/* ============================================================================
   Responsive layer — shared across the admin pages.
   Loaded after styles.css. EVERY rule here lives inside a max-width breakpoint,
   so desktop layout is completely unchanged; this file only adds behaviour as
   the viewport narrows. Two tiers, aligned to the nav:
       <= 1024px   tablet  (nav collapses to the hamburger here)
       <=  768px   phone

   Table -> cards pattern (reusable on any list page):
     1. add class "stack-mobile" to the <table>
     2. give each <td> a data-label="Column name"
     3. for rich/action cells add class "td-stack" so the label sits on its own
        line above full-width content
   On phones the <thead> hides and each <tr> renders as a labelled card.
   ============================================================================ */

/* ---------- Tablet: let the page chrome breathe ---------- */
@media (max-width: 1024px) {
  .po-view { padding: 20px; }

  .page-header { flex-wrap: wrap; gap: 16px; }
  .page-actions { flex-wrap: wrap; }

  .filters-bar { flex-wrap: wrap; }
  .search-box { min-width: 220px; flex: 1; }

  .summary-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- Phone: stack everything ---------- */
@media (max-width: 768px) {
  .po-view { padding: 14px; }

  /* Page header: title over full-width action buttons */
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .page-actions .btn.btn-primary { flex-basis: 100%; }

  /* Filters: wrapped tabs above a full-width search box */
  .filters-bar { flex-direction: column; align-items: stretch; padding: 12px; }
  .filter-tabs { gap: 6px; }
  .search-box { width: 100%; min-width: 0; }

  /* Summary cards: single column */
  .summary-cards { grid-template-columns: 1fr; gap: 12px; }
  .summary-card { padding: 16px; }
  .summary-card-value { font-size: 24px; }

  /* Footer + pagination stack and centre */
  .table-footer { flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
  .pagination { flex-wrap: wrap; }

  /* ----- Table -> labelled cards ----- */
  /* Drop the scrolling frame so the cards sit on the page background — but ONLY
     for containers that actually hold a stack-mobile table, so ordinary
     horizontal-scroll tables on other pages keep their scroll frame. */
  .table-container:has(table.stack-mobile) {
    border: none;
    background: transparent;
    overflow: visible;
    padding-bottom: 0;
  }

  table.stack-mobile { min-width: 0 !important; width: 100%; border-collapse: collapse; }
  table.stack-mobile thead { display: none; }          /* labels come from data-label */
  table.stack-mobile tbody,
  table.stack-mobile tr,
  table.stack-mobile td { display: block; width: 100%; }

  table.stack-mobile tr {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 6px 14px;
    margin-bottom: 12px;
    height: auto;                                        /* undo the global tr height:48px */
  }
  table.stack-mobile tbody tr:hover { background: var(--bg-secondary); }

  table.stack-mobile td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    text-align: right;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  table.stack-mobile td:last-child { border-bottom: 0 !important; }

  table.stack-mobile td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  table.stack-mobile td:not([data-label])::before { content: none; }

  /* Rich / action cells: label on its own line, content full width. */
  table.stack-mobile td.td-stack {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  table.stack-mobile td.td-stack::before { margin-bottom: 8px; }

  /* Actions become a wrapped row of proper tap targets. */
  table.stack-mobile .actions-cell { flex-wrap: wrap; gap: 8px; }
  table.stack-mobile .actions-cell .action-link,
  table.stack-mobile .actions-cell .btn-clear {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 10px 12px;
  }

  /* Value + status stay together, aligned to the right of the row. */
  table.stack-mobile .value-status-cell { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

  /* Empty / loading colspan rows: plain centred message, no label. */
  table.stack-mobile td[colspan] { display: block; text-align: center !important; min-height: 0; }
  table.stack-mobile td[colspan]::before { content: none; }

  /* PO flagged AI-rationale cell must not keep its fixed 460px desktop width. */
  .flag-value-cell { width: auto !important; max-width: 100% !important; }

  /* ----- Control-centre header ----- */
  .cc-header { flex-direction: column; align-items: stretch; gap: 16px; }
  .cc-header-actions { flex-wrap: wrap; }
  .cc-header-actions .cc-header-btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   pricesTwo (.price-table) — keep editing intact, freeze the Model column.
   Approach: sticky first column + horizontal scroll (NOT card stacking), so
   every inline price/SOA input behaves exactly as on desktop. styles.css only
   freezes .sticky-column at >=1200px; extend that down so the product identity
   stays pinned while you swipe the price columns on tablet/phone. The scroll
   container is the existing Bootstrap .table-responsive wrapper (#pricing-table).
   ============================================================================ */
@media (max-width: 1199px) {
  .price-table .sticky-column {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 10;
  }
  /* body Model cell already carries Bootstrap .bg-white, so it stays opaque */
  .price-table thead .sticky-column {
    z-index: 12;
    background: var(--bg-primary) !important;
  }
}

/* iOS Safari fix (used on tablet 769–1199px, where the column still freezes):
   position:sticky needs a real table cell, never display:flex. The Model <td>
   keeps table-cell display; the flex column lives on .model-inner. */
.price-table td.model.sticky-column { display: table-cell; }
.price-table .model-inner { display: flex; flex-direction: column; position: relative; }

/* The ⋯ row-details toggle is a mobile-only affordance — never shown on desktop. */
.model-details-toggle { display: none; }

@media (max-width: 768px) {
  /* ===== Stacked card layout — one product per card, no horizontal scroll. =====
     Only the identity block + the Shopify price editor stay on the card; every
     other column (Amazon, Cost, SOA, Competitors) moves into the ⋯ details modal.
     The REAL inputs stay in the DOM in place (just hidden), so the positional
     name="x[]" arrays and the entire save path are completely unchanged — the
     modal edits them through value proxies. */

  #pricing-table { max-height: none; border: none; overflow: visible; }

  .price-table { min-width: 0; display: block; }
  .price-table thead { display: none; }
  .price-table tbody { display: block; }

  .price-table tr.product {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-secondary);
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  /* Show identity + Shopify price, plus the read-only decision context
     (competitor price, cost, last PO). Everything else moves to the ⋯ modal. */
  .price-table td { display: none; border: none !important; }
  .price-table td.model,
  .price-table td.col-shopify,
  .price-table td.col-competitors,
  .price-table td.col-cost { display: block; width: 100%; max-width: 100%; }

  /* Order under the Shopify price. */
  .price-table td.model { order: 0; }
  .price-table td.col-shopify { order: 1; }
  .price-table td.col-competitors { order: 2; }
  .price-table td.col-cost { order: 3; }

  /* Read-only context cells: labelled, divided, compact. */
  .price-table td.col-competitors,
  .price-table td.col-cost {
    border-top: 1px solid var(--border-subtle) !important;
    padding: 10px 0 0;
    font-size: 13px;
  }
  .price-table td.col-competitors::before,
  .price-table td.col-cost::before {
    content: "Competitors";
    display: block;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .price-table td.col-cost::before { content: "Cost / Last PO"; }

  /* Undo the frozen-column treatment for the stacked identity cell. */
  .price-table td.model.sticky-column {
    position: static;
    display: block;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
    padding: 0 0 10px;
  }

  /* Identity declutter: checkboxes, EAN, days-since and the action row now all
     live in the modal. */
  .price-table .product_price_checkbox,
  #selectAllCheckbox,
  .price-table .ean-line,
  .price-table .days-since-line,
  .price-table .price-actions { display: none !important; }

  /* MPN can breathe on a full-width card, but still cap very long ones. */
  .price-table .mpn-text {
    display: inline-block;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  /* ⋯ toggle sits below the identity block. */
  .model-details-toggle {
    display: inline-flex !important;
    position: static;
    order: 99;
    align-self: flex-start;
    margin-top: 6px;
  }

  /* Shopify price = the card's editable body. */
  .price-table td.col-shopify {
    border-top: 1px solid var(--border-subtle) !important;
    padding: 12px 0 0;
  }
  .price-table td.col-shopify .price-input {
    width: 100%;
    height: 40px;
    max-height: none;
    font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  }
}

/* Row-details modal (pricesTwo, mobile) */
#rowDetailsModal .rd-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
#rowDetailsModal .rd-label { color: var(--text-secondary); font-weight: 600; }