/* ═══════════════════════════════════════════════════════════════
   b2b.css — European B2B polish + responsive completion layer
   2026-08-15 · Load LAST on every app page:
     styles.css → [dashboard-polish] → theme-light.css → mobile.css → b2b.css

   Purpose (per design brief):
   · restrained, professional look: flat fills, soft shadows, no
     gradient text, no glow, no hover-lift theatrics
   · one radius/shadow/spacing token tier (styles.css has none)
   · responsive gaps mobile.css does not cover: tables, tablet tier,
     bottom-nav-v2 orphans, sidebar dead-ends, buyer/agent row grids
   Nothing here changes features or markup — CSS only.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN COMPLETION (does not redefine existing names) ── */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(36,31,26,0.07);
  --shadow-md: 0 3px 10px rgba(36,31,26,0.08);
  --shadow-lg: 0 8px 24px rgba(36,31,26,0.10);
  --shadow-xl: 0 16px 48px rgba(36,31,26,0.13);
}

/* ── 2. DE-GARISH: flat, calm, enterprise ── */

/* Primary button: flat brand fill, no gradient, no colored glow */
.btn-primary {
  /* --gold-d is dark enough for white label in BOTH themes
     (light #6b4f1a ≈ 7.4:1, dark #8a6820 ≈ 5.1:1) */
  background: var(--gold-d);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--gold-d), #000 18%);
  box-shadow: var(--shadow-md);
  transform: none;
}

/* Gradient-clipped text → solid ink / brand color */
.stat-num, .plan-price {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
.nav-brand {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}

/* Decorative gold hairline on modals: off */
.modal-sheet::before { display: none; }

/* Focus: quiet ring, keep visible for a11y */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(138,104,32,0.12);
  border-color: var(--gold);
}

/* Hover-lift transforms: off (soft shadow step instead) */
.stat-card-v2:hover, .kpi-tile:hover, .kanban-card:hover, .card.hoverable:hover {
  transform: none;
  box-shadow: var(--shadow-md);
}
.inbox-row:hover { transform: none; }

/* Infinite attention animations: off */
.streak-fire { animation: none; }
.live-pulse::after { animation: none; display: none; }

/* Consistent soft card shadow */
.card { box-shadow: var(--shadow-sm); }

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

/* ── 3. bottom-nav-v2: complete styling here so pages that never
       linked dashboard-polish.css stop rendering a raw icon list.
       Breakpoint aligned to 768px (was 760 → double-nav bug). ── */
.bottom-nav-v2 {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border);
  box-shadow: 0 -1px 3px rgba(36,31,26,0.06);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: 200;
}
.bottom-nav-v2 .bn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 8px 4px; min-height: 48px;
  cursor: pointer; color: var(--ink3); text-decoration: none;
}
.bottom-nav-v2 .bn-item.active { color: var(--gold); }
.bottom-nav-v2 .bn-icon { font-size: 21px; line-height: 1; }
.bottom-nav-v2 .bn-label { font-size: 10px; font-weight: 600; }
.bottom-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* If a page ships BOTH nav generations, v2 wins, v1 hides (all widths) */
body:has(.bottom-nav-v2) .bottom-nav { display: none !important; }

/* ── 4. TABLET TIER 769–1024px (didn't exist anywhere) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 188px; }
  .main-content { padding: 20px 18px; }
  .sb-item { font-size: 11.5px; }
}

/* ── 5. MOBILE ≤768px ── */
@media (max-width: 768px) {

  /* 5a. Show v2 nav; clear content above it */
  .bottom-nav-v2 { display: flex; }
  body:has(.bottom-nav-v2) .main-content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* 5b. Sidebar dead-end rescue: pages with NO bottom nav of either
     generation keep their sidebar as a horizontal chip rail instead
     of losing navigation entirely (admin/, agent/, factory messages
     & rfqs …). Progressive: browsers without :has() keep old behavior. */
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .app-layout {
    flex-direction: column;
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    scrollbar-width: none;
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar::-webkit-scrollbar { display: none; }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-section {
    display: contents;
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-section-title {
    display: none;
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-item {
    flex: 0 0 auto;
    margin-bottom: 0;
    border: 1px solid var(--border);
    background: var(--surface2);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-item.active {
    background: var(--gold-glow2);
    border-color: var(--border2);
    color: var(--gold);
  }
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-footer,
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-user,
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-factory,
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar .sb-section > div:not([class]),
  body:not(:has(.bottom-nav)):not(:has(.bottom-nav-v2)) .sidebar > div:not([class]) {
    display: none;
  }

  /* 5c. Tables: shared .data-table/.chem-table had ZERO mobile handling */
  .data-table, .chem-table, .a-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  .data-table th, .data-table td,
  .chem-table th, .chem-table td { padding: 8px 10px; }

  /* 5d. Row-grids audited as broken at 375px (page-local <style>
     blocks can't be reached any other way) */
  /* agent/dpps.html */
  .list-header { display: none !important; }
  .dpp-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
    padding: 12px 14px !important;
  }
  .dpp-row > *:first-child { grid-column: 1 / -1; }
  /* agent/dpp-detail.html */
  .detail-layout { grid-template-columns: 1fr !important; }
  /* buyer ndas/samples/audits/watchlist */
  .nda-row, .sample-row, .audit-row, .factory-row {
    grid-template-columns: auto 1fr !important;
    gap: 8px 12px !important;
  }
  .nda-row > *, .sample-row > *, .audit-row > *, .factory-row > * { min-width: 0; }

  /* 5e. Inline grid patterns mobile.css doesn't already cover
     (it covers 1fr 1fr, repeat(5…), 80px 1fr, 1fr 110px) */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 140px"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:320px 1fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:300px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Card-list grids with too-wide minimum floors */
  [style*="minmax(300px"], [style*="minmax(320px"], [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* 5f. Generic overflow hygiene for families mobile.css never reached */
  .main-content { min-width: 0; }
  .main-content img, .main-content svg, .main-content video { max-width: 100%; height: auto; }
  .card-body { min-width: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* 5g. KPI / stat compaction */
  .kpi-tile-value { font-size: 32px; }
  .stat-card-v2 .stat-value { font-size: 28px; }
}

/* ── 5h. Icon + text + buttons banner rows: wrap on small phones ── */
@media (max-width: 560px) {
  .card-body > div[style*="display:flex;align-items:center;gap:12px"] { flex-wrap: wrap; }
  .card-body > div[style*="display:flex;align-items:center;gap:12px"] > div[style*="flex:1"] {
    flex: 1 1 100% !important; /* inline style needs the bang */
    min-width: 0;
  }
  .ag-role-lbl { display: none; }
}

/* ── 6. NARROW PHONES ≤380px ── */
@media (max-width: 380px) {
  .dpp-row, .nda-row, .sample-row, .audit-row, .factory-row {
    grid-template-columns: 1fr !important;
  }
  .stats-grid { grid-template-columns: 1fr !important; }
}