/* ===========================================================================
   FLUID LAYOUT INFRASTRUCTURE
   ---------------------------------------------------------------------------
   Why this file exists: every previous fix used viewport media queries, but the
   sidebar takes ~290px, so the viewport width never equals the width a
   component actually has. Components here respond to their OWN container via
   container queries, so they are correct at any window size, with the sidebar
   open or collapsed, in LTR and RTL.

   No fixed pixel widths for content. Floors and ceilings only.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. DATA TABLES — table on wide containers, stacked cards on narrow ones
   The handoff is seamless: the card breakpoint equals the table's working
   width, so a table never has to scroll horizontally to be readable.
   --------------------------------------------------------------------------- */
.table-wrap,
.tbl-wrap {
  container-type: inline-size;
  container-name: tablewrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

table.data {
  width: 100%;
  min-width: 820px;                 /* working width; card mode takes over below */
  border-collapse: collapse;
}

/* Content can never paint outside its own column. */
table.data td > *,
table.data th > * { max-width: 100%; }

@container tablewrap (max-width: 820px) {
  table.data { min-width: 0; }

  /* Header is still announced to screen readers, just not painted. */
  table.data thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  table.data tbody,
  table.data tr,
  table.data td { display: block; width: 100%; }

  table.data tr {
    margin-bottom: 12px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    corner-shape: squircle;
    background: var(--surface, #fff);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, .04));
  }
  table.data tr:last-child { margin-bottom: 0; }
  table.data tbody tr:hover { background: var(--surface, #fff); }

  table.data td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;               /* comfortable touch rhythm */
    padding: 8px 0 !important;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: start !important;
  }
  table.data tr td:last-child { border-bottom: 0; }

  /* The header text becomes the row label. Populated by app.js from <thead>, so
     no template needs to repeat it. */
  table.data td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  table.data td[data-label=""]::before,
  table.data td:not([data-label])::before { content: none; }

  /* Value side gets the remaining room and wraps instead of truncating — on a
     card there is no neighbouring column to collide with. */
  table.data td > * { min-width: 0; }
  table.data td .cell-strong,
  table.data td .cell-muted {
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /* Selection checkbox and action buttons read better full width. */
  table.data td:has(> input[type="checkbox"]) { justify-content: flex-start; }
  table.data td:has(.row-actions) { justify-content: flex-end; padding-top: 12px !important; }
  table.data td .row-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   2. TOOLBARS / ACTION ROWS — wrap, never overlap, never overflow
   --------------------------------------------------------------------------- */
.toolbar,
.product-toolbar,
.page-head .head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.toolbar > *,
.product-toolbar > * { flex: 0 1 auto; min-width: 0; }

/* A search/filter group takes the leftover room, then drops to its own line. */
.toolbar__grow,
.product-filter { flex: 1 1 min(100%, 24rem); min-width: 0; }

/* Buttons stay legible; they shrink their padding before they shrink their text. */
.toolbar .btn,
.product-toolbar .btn { white-space: nowrap; }

@container tablewrap (max-width: 540px) {
  .toolbar > *,
  .product-toolbar > * { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   3. FLUID PRIMITIVES — replace fixed pixel layouts
   --------------------------------------------------------------------------- */
/* Any "grid of things" that should reflow without breakpoints. */
.auto-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.auto-grid--sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.auto-grid--lg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Form grids: fluid columns, never a fixed px track. */
.form-grid,
.bulk-commission-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: end;
}

/* Row action buttons never overflow their cell. */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }

/* Long values (SKUs, references, emails) break instead of pushing layout wide. */
.cell-break,
table.data td .sku,
table.data td .ref { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   4. PAGE SHELL — fluid gutters instead of fixed padding steps
   --------------------------------------------------------------------------- */
.main { min-width: 0; }
.content { padding-inline: clamp(14px, 2.4vw, 30px); }
.card { min-width: 0; }

/* Page heads stack naturally when the title + actions no longer fit. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-width: 0;
}
.page-head > * { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   5. RESPONSIVE SAFETY NET
   Shared rules for legacy pages that still carry inline widths or old flex
   layouts. These preserve the desktop composition and only reflow when the
   available space is genuinely narrow.
   --------------------------------------------------------------------------- */
html,
body { max-width: 100%; }

body { overflow-x: hidden; }

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

.content :where(.grid, .flex, .card, .card__body, .form-card, .form-card__body, form, fieldset),
.content :where(.grid, .flex, .card, .card__body, .form-card, .form-card__body, form, fieldset) > * {
  min-width: 0;
}

.content :where(p, li, dd, td, th, label, .cell-strong, .cell-muted) {
  overflow-wrap: anywhere;
}

.gx-modal__panel,
.modal,
.welcome-modal__card,
.confirm-sheet__panel {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 920px) {
  .content > .grid[style*="grid-template-columns"],
  .content .grid.grid--stats[style*="grid-template-columns"],
  .content :where(.card__body, .form-card__body) > .form-grid[style*="grid-template-columns"],
  .content .stat-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .content :where(.card, .form-card, form)[style*="max-width"] {
    width: 100%;
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  :root { --content-pad: 14px; --card-pad: 15px; }

  .content {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .page-head {
    align-items: stretch;
  }

  .page-head > :where(.flex, .head-actions, .page-head__actions, form),
  .page-head > div:last-child:has(.btn) {
    width: 100%;
  }

  .page-head :where(.head-actions, .page-head__actions, .flex) > .btn,
  .page-head :where(.head-actions, .page-head__actions, .flex) > form,
  .page-head :where(.head-actions, .page-head__actions, .flex) > form > .btn {
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .content form[method="get"] :where(input, select, .erp-field),
  .content :where(input, select, textarea, .erp-field)[style*="width"],
  .content :where(input, select, textarea, .erp-field)[style*="max-width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .purchase-product-picker { min-width: 0 !important; }

  .workflow-steps {
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .workflow-step {
    flex: 0 0 min(78vw, 240px);
    scroll-snap-align: start;
  }

  .confirm-sheet,
  .welcome-modal,
  .gx-modal {
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .confirm-sheet { align-items: end; }

  .confirm-sheet__panel,
  .welcome-modal__card,
  .gx-modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-bottom)));
  }

  .confirm-sheet__actions,
  .welcome-modal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .confirm-sheet__actions .btn,
  .welcome-modal__actions .btn { width: 100%; }

  .auth__panel {
    min-height: 100dvh;
    place-items: start center;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  }

  .auth-card { max-width: 100%; }

  .auth-form-grid { grid-template-columns: 1fr !important; }

  .auth-field--span { grid-column: auto !important; }

  .auth-card :where(input, select, textarea) { font-size: 16px; }

  #net-banner {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (pointer: coarse) {
  :where(.btn, .icon-btn, .action-icon, .sidebar-toggle, .sidebar__close, .qa-btn, .modal__x, .eye) {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 760px) {
  .mobile-taskbar {
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .content { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  .quick-sale-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}