/* =========================================
   PHONE — final ≤640px pass over shared pieces (KPI cards, shop cards, dashboard
   alerts, filter bars, tables shown as cards). Loaded last so it wins over the page files.
   ========================================= */

/* =========================================
   PHONE POLISH — ≤640px
   ========================================= */
@media (max-width: 640px) {
  /* KPI cards: two per row, stacked inside (label, value, note) so values aren't cut off */
  .kpi-grid,
  .kpi-grid:has(> .kpi-card:nth-child(3):last-child),
  .kpi-grid:has(> .kpi-card:nth-child(4):last-child),
  .kpi-grid:has(> .kpi-card:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 16px; }
  .kpi-grid > .kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-card { display: block; padding: 12px 14px; border-radius: var(--radius); }
  .kpi-label { font-size: 0.8rem; letter-spacing: 0.02em; line-height: 1.3; margin-bottom: 4px; }
  .kpi-value { font-size: clamp(0.95rem, 10cqi, 1.3rem); }
  .kpi-change, .kpi-sub { font-size: 0.7rem !important; line-height: 1.3; }

  /* Shop / procurement product grids: two cards per row (.pc-grid otherwise wins over .pd-grid's phone rule) */
  .pd-grid.pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Smaller corner tags so Best Seller and the category pill fit side by side on a half-width card */
  .cs-card .pd-badge { top: 8px; right: 8px; padding: 2px 7px; font-size: 0.58rem; letter-spacing: 0; }
  .cs-card .cs-tags { top: 8px; left: 8px; gap: 4px; }
  .cs-card .cs-bestseller, .cs-card .cs-incart { padding: 2px 7px; font-size: 0.58rem; letter-spacing: 0; gap: 3px; }
  .cs-card .cs-bestseller svg, .cs-card .cs-incart svg { width: 10px; height: 10px; }
  .cs-card .pd-name { font-size: 0.88rem; line-height: 1.3; }
  .cs-card .pd-price { font-size: 1.05rem; }

  /* Dashboard alert chips: one swipeable row instead of a wall of chips */
  .alert-banner.dash-alert { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .dash-alert-chips { min-width: 0; flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .dash-alert-chips::-webkit-scrollbar { display: none; }
  .dash-alert-chips .badge { flex-shrink: 0; }

  /* Filter bars: search gets the full row, selects share the next */
  .filter-bar > .flex-row { flex: 1 1 100% !important; flex-wrap: wrap; }
  .filter-bar .flex-row > .form-input,
  .filter-bar > .form-input,
  .filter-bar .search-field { flex: 1 1 100% !important; }
  .filter-bar > .text-muted { margin-left: auto; font-size: 0.75rem; }

  /* Page header: title row stays compact */
  .page-header { margin-bottom: 16px; }
  .page-actions .btn { justify-content: center; }

  /* Tables in pages read as stacked cards (labels come from the headers, see labelTableCells in app.js) */
  .data-table.m-cards { min-width: 0 !important; width: 100% !important; }
  .data-table.m-cards, .data-table.m-cards tbody { display: block; }
  .data-table.m-cards thead { display: none; }
  .data-table.m-cards tbody tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .data-table.m-cards tbody tr:last-child { border-bottom: 0; }
  .data-table.m-cards tbody td {
    display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: 12px; align-items: center; justify-items: end;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 5px 0 !important; border: 0 !important; text-align: right; white-space: normal;
  }
  .data-table.m-cards tbody td > * { grid-column: 2; min-width: 0; max-width: 100%; }
  .data-table.m-cards tbody td::before {
    content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; justify-self: start; text-align: left;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
  }
  .data-table.m-cards tbody td:not([data-label]),
  .data-table.m-cards tbody td[data-label=""],
  .data-table.m-cards tbody td.m-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .data-table.m-cards tbody td:not([data-label])::before,
  .data-table.m-cards tbody td[data-label=""]::before { display: none; }
  .data-table.m-cards tbody td.m-hide { display: none; }
  .data-table.m-cards tbody td[colspan] { display: block; text-align: center; }
  .data-table.m-cards tbody td.m-actions { justify-content: flex-end; margin-top: 6px; padding-top: 10px !important; border-top: 1px dashed var(--border) !important; }
  .data-table.m-cards tbody td.m-actions::before { display: none; }
  .data-table.m-cards .row-actions { width: auto; justify-content: flex-end; flex-wrap: wrap; }
}