/* AHSOFT shared responsive foundation.
   Desktop declarations belong in the existing component styles. This file
   only supplies reusable utilities and tablet/mobile adaptations. */
:root {
  --responsive-gutter-mobile: 12px;
  --responsive-gutter-tablet: 18px;
  --responsive-touch-target: 44px;
  --responsive-modal-gutter: 12px;
}

html {
  min-width: 0;
  max-width: 100%;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

.mobile-only { display: none !important; }
.responsive-full-width { width: 100% !important; max-width: 100% !important; }
.responsive-min-width-0 { min-width: 0 !important; }
.responsive-wrap { display: flex !important; flex-wrap: wrap !important; }
.responsive-stack { display: flex !important; flex-direction: column !important; }
.responsive-scroll,
.table-scroll,
.responsive-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.responsive-table > table,
.table-scroll > table {
  width: max-content;
  min-width: 100%;
}

.responsive-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
}

@media (min-width: 768px) and (max-width: 1023px) {
  main {
    width: 100%;
    max-width: 100vw;
    padding: 28px var(--responsive-gutter-tablet);
  }

  main > *,
  main > [id$="-host"] {
    min-width: 0;
    max-width: 100%;
  }

  .screen,
  .profile-screen,
  .customer-info-screen,
  .beneficiary-upload-screen,
  .supplier-po-screen,
  .item-master-screen,
  .item-order-screen,
  .order-item-screen,
  .workshop-detail-screen {
    width: 100%;
  }

  .search-fields,
  .search-fields.left,
  .inventory-search-fields,
  .supplier-po-filter-row,
  .so-report-filters,
  .kpi-filters {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .utility-actions,
  .screen-actions,
  .pagination-bar,
  .tab-bar,
  .tabs {
    min-width: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  :where(main, main > *, main > [id$="-host"], .screen, .dashboard,
    .profile-screen, .customer-info-screen, .beneficiary-upload-screen,
    .supplier-po-screen, .item-master-screen, .item-order-screen,
    .order-item-screen, .workshop-detail-screen, .measurement-print-screen,
    .receiving-print-screen) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  main {
    display: block;
    width: 100%;
    max-width: 100vw;
    padding: 12px var(--responsive-gutter-mobile) 24px;
  }

  .desktop-only { display: none !important; }
  .mobile-only { display: revert !important; }

  .topbar {
    width: 100%;
    min-width: 0;
    padding: 8px var(--responsive-gutter-mobile);
    gap: 8px;
    flex-wrap: nowrap;
  }

  .brand-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .brand-mark { display: none; }

  .topbar-right {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    flex-wrap: nowrap;
  }

  .topbar-help-button,
  .topbar-dashboard-button,
  .new-view-toggle,
  .current-user-summary {
    display: none !important;
  }

  .user-menu { flex: 0 0 auto; }

  .user-menu-button {
    width: var(--responsive-touch-target);
    min-width: var(--responsive-touch-target);
    min-height: var(--responsive-touch-target);
  }

  .user-menu-dropdown {
    position: fixed;
    top: 58px;
    right: var(--responsive-gutter-mobile);
    left: var(--responsive-gutter-mobile);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }

  .user-menu-dropdown button { min-height: var(--responsive-touch-target); }

  .screen-header,
  .customer-header,
  .screen-header-row,
  .profile-top,
  .customer-info-top,
  .supplier-po-detail-top,
  .delivery-data-top,
  .workshop-detail-header,
  .pd-topbar,
  .dash-topbar {
    min-width: 0;
    max-width: 100%;
  }

  :where(.search-fields, .search-fields.left, .inventory-search-fields,
    .supplier-po-filter-row, .so-report-filters, .field-grid,
    .field-grid.compact, .two-col-fields, .supplier-po-left-fields,
    .supplier-po-remarks, .staff-form-grid, .kpi-filters,
    .responsive-form-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea, .ts-wrapper, .ts-control) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, .ts-control) {
    min-height: var(--responsive-touch-target) !important;
  }

  textarea { min-height: 88px; }

  :where(.search-fields, .inventory-search-fields, .supplier-po-filter-row,
    .so-report-filters, .responsive-form-grid) > :where(input, select, textarea,
    label, button, .small-button, .ts-wrapper) {
    width: 100%;
    max-width: 100%;
  }

  :where(button, [role="button"], .small-button, .action-button,
    .dash-action-button, .tab, .tab-button):not(.icon-only):not(.exit-button) {
    min-height: var(--responsive-touch-target) !important;
    white-space: normal;
    touch-action: manipulation;
  }

  :where(.utility-actions, .screen-actions, .profile-actions,
    .customer-info-actions, .item-side-actions, .order-item-actions,
    .supplier-po-detail-actions, .supplier-po-items-actions,
    .so-report-filter-actions, .import-actions, .print-actions,
    .responsive-actions) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Header Help is a compact utility, not a full-width form action. Keeping it
     beside Close avoids an otherwise empty second toolbar row on list screens. */
  :where(.screen-header, .customer-header, .screen-header-row)
    :where(.utility-actions, .screen-actions) > .help-button {
    width: auto !important;
    min-width: 88px;
    flex: 0 0 auto;
  }

  .pagination-bar,
  .responsive-pagination {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .pagination-bar input,
  .responsive-pagination input {
    width: 64px;
    flex: 0 0 64px;
  }

  .responsive-sticky-actions {
    bottom: env(safe-area-inset-bottom, 0);
    margin-inline: calc(-1 * var(--responsive-gutter-mobile));
    padding: 10px var(--responsive-gutter-mobile) calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(18, 24, 32, .08);
  }

  :where(.grid-wrap, .po-grid, .entitled-grid, .supplier-po-grid-wrap,
    .supplier-po-items-wrap, .warehouse-maintenance-wrap, .workshop-table,
    .workshop-detail-table-wrap, .so-report-grid-wrap, .staff-list-wrap,
    .beneficiary-sizes-grid, .sap-item-stock-panel, .inventory-table-wrap,
    .responsive-table, .table-scroll) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .responsive-table--sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
  }

  .responsive-table--sticky-first :where(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
  }

  .responsive-table--cards table,
  table.responsive-table--cards {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .responsive-table--cards thead { display: none; }
  .responsive-table--cards tbody { display: grid; gap: 12px; }
  .responsive-table--cards tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }

  .responsive-table--cards td {
    width: 100% !important;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .responsive-table--cards td:last-child { border-bottom: 0; }
  .responsive-table--cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .responsive-table--cards td[colspan] {
    display: block;
    text-align: center !important;
  }

  .responsive-table--cards td[colspan]::before { content: none; }

  :where(.scanner-modal, .job-desc-popup, .history-overlay,
    .release-popup-overlay, .drawing-parts-overlay, .cop-addpart-overlay) {
    padding: var(--responsive-modal-gutter);
    overflow: hidden;
  }

  :where(.scanner-panel, .job-desc-popup > *, .history-panel, .release-popup,
    .drawing-parts-shell, .cop-addpart-panel, dialog) {
    width: min(100%, calc(100vw - 2 * var(--responsive-modal-gutter))) !important;
    max-width: calc(100vw - 2 * var(--responsive-modal-gutter)) !important;
    max-height: calc(100dvh - 2 * var(--responsive-modal-gutter)) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  body.responsive-modal-open { overflow: hidden; }
}

@media print {
  .mobile-only { display: none !important; }
  .responsive-sticky-actions { position: static; box-shadow: none; }
}