/* SHV component layer on top of Q Platform.
   Use q-* contracts first and add shv-* only for ERP-specific adjustments. */

.shv-page,
.shv-detail-page {
  width: min(var(--shv-page-max), calc(100vw - (var(--shv-page-gutter) * 2)));
  margin: 32px auto;
}

.shv-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.shv-table {
  min-width: 920px;
}

.shv-page-section {
  min-width: 0;
}

.shv-detail-page .q-detail-panel {
  min-width: 0;
}

.shv-detail-page .q-detail-title,
.shv-detail-page .q-detail-info-line dd,
.shv-detail-page .q-detail-kpi__label,
.shv-detail-page .q-empty-state,
.shv-detail-page .q-alert,
.shv-notice-inline {
  overflow-wrap: anywhere;
}

.shv-detail-page .q-status-badge {
  white-space: nowrap;
}

.shv-table th,
.shv-table td {
  vertical-align: top;
}

.shv-pagination .q-button {
  min-width: 58px;
}

select.q-input,
select.q-searchbar__input,
.shv-pagination-shell .pagination-size-form select.q-input,
.pagination-size-form select.q-input {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--q-text-soft) 50%),
    linear-gradient(135deg, var(--q-text-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  line-height: 1.2;
  max-width: 100%;
  padding-right: 34px;
  text-overflow: ellipsis;
}

.shv-pagination__current {
  align-items: center;
  color: var(--q-text);
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 38px;
  min-width: 38px;
}

.shv-notice-inline {
  color: var(--q-text-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .shv-page,
  .shv-detail-page {
    width: min(100vw - 20px, var(--shv-page-max));
    margin: 20px auto;
  }

  .shv-page-header {
    align-items: stretch;
    gap: var(--q-space-3);
  }

  .shv-page-header .header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    overflow-x: visible;
  }

  .shv-page-header .header-actions .q-button {
    flex: 1 1 calc(50% - var(--q-space-2));
    min-height: 38px;
    min-width: 0;
    white-space: nowrap;
  }

  .shv-table-wrap {
    margin-inline: -2px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .q-searchbar--filters > .q-filter-actions {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    width: 100%;
  }

  .q-searchbar--filters > .q-filter-actions > .q-button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  select.q-input,
  select.q-searchbar__input,
  .shv-pagination-shell .pagination-size-form select.q-input,
  .pagination-size-form select.q-input {
    min-height: 44px;
    height: 44px;
    font-size: 16px;
  }

  .shv-pagination-shell {
    align-items: stretch;
    display: grid;
    gap: var(--q-space-2);
  }

  .shv-pagination {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .shv-pagination .q-button {
    min-width: 0;
    min-height: 34px;
    padding-inline: 8px;
    font-size: 12px;
    line-height: 1.1;
  }

  .shv-pagination__page:not([aria-current="page"]) {
    display: none;
  }

  .shv-pagination__page[aria-current="page"] {
    grid-column: span 2;
    order: 3;
  }

  .shv-pagination .q-button:nth-child(1) {
    order: 1;
  }

  .shv-pagination .q-button:nth-child(2) {
    order: 2;
  }

  .shv-pagination .q-button:nth-last-child(2) {
    order: 4;
  }

  .shv-pagination .q-button:nth-last-child(1) {
    order: 5;
  }

  .shv-pagination-shell .pagination-size-form {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(72px, auto);
    width: 100%;
  }

  .shv-pagination-shell .pagination-size-form label {
    min-width: 0;
  }

  .shv-pagination-shell .pagination-size-form .q-button {
    min-height: 44px;
    padding-inline: 10px;
  }

  .shv-table-wrap::after {
    display: block;
    width: max(80px, 20vw);
    height: 1px;
    content: "";
  }

  .shv-table {
    min-width: 760px;
  }

  .file-upload-command {
    align-items: stretch;
    flex-direction: column;
    max-width: min(100%, 280px);
  }

  .file-upload-command input[type="file"],
  .file-upload-command .q-button {
    width: 100%;
    max-width: 100%;
  }

  .project-unit-command-actions {
    flex-wrap: wrap;
  }
}