/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ── BSN Brand Palette
   Source of truth: Design/Brand/Boonsawat/01_brand-foundation/color-system.md */
:root {
  --sidebar-w: 240px;

  /* BSN Brand Colors */
  --bsn-red: #c41e2a;
  --bsn-red-dark: #a8181f;
  --bsn-gold: #f5a800;
  --bsn-gold-soft: rgba(245,168,0,0.12);
  --bsn-charcoal: #1a1a1a;
  --bsn-cream: #FAF8F5;
  --bsn-border: #e0ddd8;
  --bsn-text: #1a1a1a;
  --bsn-text-muted: #6a6a6a;

  /* Semantic mappings (used across templates) */
  --sidebar-bg: var(--bsn-charcoal);
  --sidebar-hover: #2a2a2a;
  --sidebar-active: var(--bsn-red);
  --accent: var(--bsn-red);
  --accent-dark: var(--bsn-red-dark);
  --accent-light: #fdecee;
  --gold: var(--bsn-gold);
  --gold-soft: var(--bsn-gold-soft);
  --success: #2e7d3a;
  --danger: var(--bsn-red);
  --warning: var(--bsn-gold);
  --info: #38bdf8;
  --body-bg: var(--bsn-cream);
  --card-bg: #ffffff;
  --text-main: var(--bsn-text);
  --text-muted: var(--bsn-text-muted);
  --border: var(--bsn-border);

  --shadow-sm: 0 1px 3px rgba(26,26,26,.06), 0 1px 2px rgba(26,26,26,.04);
  --shadow: 0 4px 6px -1px rgba(26,26,26,.07), 0 2px 4px -1px rgba(26,26,26,.04);
  --shadow-lg: 0 10px 15px -3px rgba(26,26,26,.08), 0 4px 6px -2px rgba(26,26,26,.04);
  --radius: 14px;
  --radius-sm: 8px;
  --line-soft: #f0ece4;   /* lighter inner row border (refinement layer) */
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Sarabun', sans-serif;
  font-size: 0.925rem;
  background: var(--body-bg);
  color: var(--text-main);
  margin: 0;
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  transition: transform .25s ease;
  overflow: hidden;
}

/* Brand row: holds logo link + module switcher dropdown */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  padding: 16px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  gap: 8px;
}

/* Logo portion of brand row (was .sidebar-brand) */
.sidebar-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Module switcher button */
.sidebar-module-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: .8rem;
  line-height: 1;
  white-space: nowrap;
}
.sidebar-module-btn:hover,
.sidebar-module-btn:focus {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.sidebar-module-btn::after { margin-left: 4px; }

/* Module switcher dropdown menu */
.sidebar-module-menu {
  min-width: 200px;
  font-size: .875rem;
}
.sidebar-module-menu .dropdown-item {
  padding: .45rem .9rem;
}
.sidebar-module-menu .dropdown-item.active {
  background: var(--accent);
  color: #fff;
}

/* Active module label strip */
.sidebar-module-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bsn-gold);
  padding: 6px 16px 4px;
}

/* Legacy class kept for any external reference */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
}

.sidebar-brand-icon {
  width: 40px; height: 40px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.sidebar-brand-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.sidebar-brand-text {
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
  letter-spacing: .02em;
}

.sidebar-brand-sub {
  color: var(--bsn-gold);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 2px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
}

.sidebar-section {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
  padding: 14px 10px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: all .15s ease;
  position: relative;
}

.sidebar-link i { font-size: 1rem; flex-shrink: 0; }

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.sidebar-link.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(196,30,42,.35);
}

.sidebar-link .badge-count {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: .65rem;
  padding: 2px 7px;
  border-radius: 20px;
}

.sidebar-link.active .badge-count {
  background: rgba(255,255,255,.25);
}

/* ── Main content ── */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Flex children default to min-width:auto (won't shrink below content's
     intrinsic size); a wide table/.table-responsive then forces this column
     past the viewport and scrolls the page body on mobile. min-width:0 lets it
     shrink to the viewport so .table-responsive scrolls internally instead.
     No-op at >=992px (content is narrower than the column there). */
  min-width: 0;
}

/* ── Top bar ── */
.topbar {
  height: 60px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.topbar-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
  flex: 1;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ── Page content ── */
.page-content {
  padding: 24px;
  flex: 1;
}

/* ── Cards ── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 18px !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text-main);
}

.card-body { padding: 18px; }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 18px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ── Stat Cards ── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: var(--shadow); }

.stat-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.stat-card-label { font-size: .78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 4px; }
.stat-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-card-sub   { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

/* ── Buttons ── */
.btn {
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  transition: all .15s ease;
}

.btn-primary   { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 4px 12px rgba(196,30,42,.3); }

.btn-xs {
  padding: .2rem .5rem;
  font-size: .75rem;
  border-radius: 6px;
}

/* ── Tables ── */
.table {
  font-size: .875rem;
  color: var(--text-main);
}
.table th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  background: #f5f2ed;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
  padding: 10px 14px;
}
.table td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #ede9e2;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: #fdf9f3; }
.table-responsive { border-radius: 0 0 var(--radius) var(--radius); }

/* ── Badges ── */
.badge {
  font-family: 'Sarabun', sans-serif;
  font-weight: 500;
  font-size: .72rem;
  padding: .3em .65em;
  border-radius: 6px;
}

/* Custom badge colors — semantic, BSN-aligned */
.badge-success  { background: #dcf2e0; color: #2e7d3a; }
.badge-danger   { background: #fdecee; color: var(--bsn-red); }
.badge-warning  { background: var(--bsn-gold-soft); color: #8a5d00; }
.badge-info     { background: #e0f2fe; color: #0369a1; }
.badge-gold     { background: var(--bsn-gold-soft); color: #8a5d00; }
.badge-purple   { background: var(--bsn-gold-soft); color: #8a5d00; } /* legacy alias → gold */
.badge-gray     { background: #ede9e2; color: #4a4540; }
.badge-in       { background: #dcf2e0; color: #2e7d3a; }
.badge-out      { background: #fdecee; color: var(--bsn-red); }
.badge-adjust   { background: #ede9e2; color: #4a4540; }

/* ── Forms ── */
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Sarabun', sans-serif;
  font-size: .9rem;
  color: var(--text-main);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196,30,42,.12);
}
.form-label { font-weight: 500; font-size: .85rem; color: var(--text-main); margin-bottom: .35rem; }
.form-text  { font-size: .78rem; color: var(--text-muted); }
.input-group-text {
  background: #f5f2ed;
  border-color: var(--border);
  font-family: 'Sarabun', sans-serif;
  color: var(--text-muted);
  font-size: .9rem;
}

/* ── Alerts ── */
.alert {
  border-radius: var(--radius-sm);
  border: none;
  font-size: .875rem;
  padding: 12px 16px;
}
.alert-success { background: #dcf2e0; color: #1f5a28; }
.alert-danger  { background: #fdecee; color: var(--bsn-red-dark); }
.alert-warning { background: var(--bsn-gold-soft); color: #6e4a00; }
.alert-info    { background: #e0f2fe; color: #0c4a6e; }
.alert-light   { background: #f5f2ed; color: var(--text-main); border: 1px solid var(--border); }

/* ── Breadcrumb ── */
.breadcrumb { font-size: .82rem; margin-bottom: 16px; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item a { color: var(--accent); text-decoration: none; }
.breadcrumb-item.active { color: var(--text-muted); }

/* ── Pagination ── */
.page-link {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: .82rem;
  padding: .35rem .65rem;
  margin: 0 2px;
}
.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.page-link:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* ── Low stock row ── */
.row-low-stock td { background: #fdecee !important; }

/* ── Utility ── */
.text-accent    { color: var(--accent); }
.text-main      { color: var(--text-main); }
.text-subtle    { color: var(--text-muted); }
.bg-accent-soft { background: var(--accent-light); }

/* Bootstrap semantic overrides — BSN palette */
.text-success   { color: var(--success) !important; }
.text-danger    { color: var(--bsn-red) !important; }
.text-warning   { color: var(--bsn-gold) !important; }
.bg-danger      { background: var(--bsn-red) !important; }
.bg-warning     { background: var(--bsn-gold) !important; color: var(--bsn-charcoal) !important; }
.bg-secondary   { background: var(--bsn-charcoal) !important; }
.btn-warning    { background: var(--bsn-gold); border-color: var(--bsn-gold); color: var(--bsn-charcoal); }
.btn-warning:hover { background: #d99500; border-color: #d99500; color: var(--bsn-charcoal); }
.btn-danger     { background: var(--bsn-red); border-color: var(--bsn-red); }
.btn-danger:hover { background: var(--bsn-red-dark); border-color: var(--bsn-red-dark); }
.btn-success    { background: var(--success); border-color: var(--success); }
.btn-outline-secondary { color: var(--text-muted); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--bsn-charcoal); border-color: var(--bsn-charcoal); color: #fff; }
.font-mono      { font-family: 'SF Mono', 'Fira Code', monospace; font-size: .8rem; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

/* ── VAT bar on sales page ── */
.vat-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 8px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c9c2b6; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #8a8275; }

/* ── Mobile/tablet sidebar (Bootstrap lg breakpoint = 992px) ── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    height: 100vh;        /* iOS Safari fallback */
    height: 100dvh;       /* dynamic viewport height handles address-bar resize */
  }
  .sidebar.open { transform: translateX(0); }
  .main-wrap { margin-left: 0; }

  .page-content { padding: 12px; }     /* less wasted horizontal space on small screens */
  .topbar { padding: 0 12px; }

  /* Bottom-nav clearance: keep last content visible above the fixed nav (60px nav + 6px breathing) */
  body { padding-bottom: 66px; }
}

/* ── Sidebar backdrop (mobile only, click outside to close) ── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 99;            /* sidebar = 100, backdrop just below */
  opacity: 0;
  transition: opacity .25s ease;
}
.sidebar-backdrop.open { display: block; opacity: 1; }

/* ── Bottom nav (mobile only) ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 60;
  box-shadow: 0 -1px 6px rgba(0,0,0,.04);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: .65rem;
  font-weight: 500;
  border: none;
  background: transparent;
  position: relative;
}
.bottom-nav-item i { font-size: 1.25rem; line-height: 1; }
.bottom-nav-item.active { color: var(--accent); }
.bottom-nav-item .badge-count {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  min-width: 16px; height: 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* Mobile-only / desktop-only utility classes (paired with Bootstrap d-lg-*) */
.d-mobile-only { display: none; }
@media (max-width: 991.98px) {
  .d-mobile-only { display: initial; }
}

/* ── Responsive table → cards on mobile ─────────────────────────────────────
   Add class `table-mobile-cards` to a <table>, then put `data-label="..."` on
   each <td>. On <lg viewports the table flattens to a stack of cards, with
   each cell prefixed by its label. Headers (<thead>) hide on mobile.

   Cells with class `td-primary` render larger (good for the row's main name).
   Cells with class `td-actions` keep their action buttons right-aligned.
   Cells with class `td-hide-mobile` are hidden entirely on mobile. */
@media (max-width: 991.98px) {
  table.table-mobile-cards {
    border: none;
    background: transparent;
  }
  table.table-mobile-cards thead { display: none; }
  table.table-mobile-cards,
  table.table-mobile-cards tbody {
    display: block;
    width: 100%;
  }
  /* Each row becomes a flex column so we can use `order` to pin the title
     cell to the top of the card and the actions cell to the bottom,
     regardless of where they appear in the table's source column order
     (which is dictated by <thead> for desktop layout). */
  table.table-mobile-cards tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    padding: 14px 18px;          /* breathing room around card edges */
    box-shadow: var(--shadow-sm);
  }
  /* On mobile, low-stock cards use a left red border accent + faint tint
     instead of full red bg — keeps the OUT button visible (it has the same
     pink as the bg highlight on desktop, .row-low-stock td bg #fdecee). */
  table.table-mobile-cards tr.row-low-stock {
    background: #fff8f8 !important;            /* very faint red */
    border-left: 4px solid var(--bsn-red);
    padding-left: 14px;                        /* offset for the new border */
  }
  table.table-mobile-cards tr.row-low-stock td { background: transparent !important; }
  table.table-mobile-cards tr:hover td { background: transparent; }
  /* 50/50 label/value grid — both columns get equal width.
     Value sits at left of col 2 (which is the visual midpoint of the card),
     giving the row a balanced two-column feel without label/value being
     flung to opposite edges. */
  table.table-mobile-cards td {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    column-gap: 12px;
    border: none;
    padding: 3px 0;
    font-size: .9rem;
    text-align: left;
  }
  table.table-mobile-cards td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 500;
    text-transform: none;
  }
  /* Defeat Bootstrap's `.text-end { text-align: right !important }` so values
     sit right after the label instead of being flung to the far right edge.
     `!important` is required because Bootstrap's utility uses it. */
  table.table-mobile-cards td.text-end,
  table.table-mobile-cards td.text-center { text-align: left !important; }
  /* No label → don't reserve space for ::before pseudo, render single-column */
  table.table-mobile-cards td:not([data-label])::before { content: none; }
  table.table-mobile-cards td:not([data-label]):not(.td-primary):not(.td-actions) {
    grid-template-columns: 1fr;
  }
  table.table-mobile-cards td.td-primary {
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0 6px 2px;  /* slight extra left inset on top of tr padding */
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--border);
    display: block;       /* full-width title row */
    order: -1;            /* always first in the card (flex column on tr) */
  }
  table.table-mobile-cards td.td-primary::before { content: none; }
  table.table-mobile-cards td.td-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    order: 99;            /* always last in the card */
  }
  table.table-mobile-cards td.td-actions::before { content: none; }
  table.table-mobile-cards td.td-hide-mobile { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   REFINEMENT LAYER — 2026-05 "tasteful polish" (approved by Put)
   Additive: refines shared primitives + adds dashboard-level classes.
   Keeps Sarabun + BSN red/gold/charcoal. Numbers use tabular figures so
   columns align. Applied app-wide via shared classes for consistency.
   ════════════════════════════════════════════════════════════════════════ */

/* Softer, layered elevation tokens used below */
:root {
  --sh-md: 0 8px 20px -6px rgba(34,30,27,.12), 0 2px 6px -2px rgba(34,30,27,.07);
}

/* Tabular figures wherever numbers matter (digits only — Thai text unaffected) */
.font-mono,
.stat-card-value,
.table td, .table th,
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Sidebar — subtle vertical gradient + faint gold sheen + warmer active glow */
.sidebar { background: linear-gradient(180deg, #202020 0%, #161616 100%); }
.sidebar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,168,0,.5), transparent);
}
.sidebar-link.active {
  background: linear-gradient(135deg, var(--bsn-red), var(--bsn-red-dark));
}
.sidebar-link.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--bsn-gold);
}

/* Top bar — frosted glass */
.topbar { background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(8px); }

/* Primary button — confident gradient + gentle hover lift */
.btn-primary { background: linear-gradient(135deg, var(--bsn-red), var(--bsn-red-dark)); border: none; }
.btn-primary:hover { transform: translateY(-1px); }

/* Badges → pill */
.badge { border-radius: 999px; }

/* Tables — lighter inner rule, a touch more tracking on the head */
.table td { border-bottom-color: var(--line-soft); }
.table th { letter-spacing: .06em; }

/* Stat cards — hover lift + optional meaning-accent top rule (opt-in via s-*) */
.stat-card { position: relative; overflow: hidden; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.stat-card.s-red::before,
.stat-card.s-green::before,
.stat-card.s-gold::before,
.stat-card.s-ink::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-bar);
}
.stat-card.s-red   { --accent-bar: var(--bsn-red); }
.stat-card.s-green { --accent-bar: var(--success); }
.stat-card.s-gold  { --accent-bar: var(--bsn-gold); }
.stat-card.s-ink   { --accent-bar: var(--bsn-charcoal); }

/* Page header (title + description + optional action) */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-head .page-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; margin: 0; line-height: 1.1; }
.page-head .page-desc { color: var(--text-muted); font-size: .875rem; margin-top: 4px; }

/* Stat-card footer: status chip (left) + quiet action link (right) */
.stat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 8px; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.delta.up   { background: #e6f4e9; color: var(--success); }
.delta.down { background: var(--accent-light); color: var(--bsn-red); }
.delta.flat { background: #edeae4; color: var(--text-muted); }
.stat-link { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.stat-link:hover { color: var(--bsn-red); }

/* pid chip — compact identifier badge for tables */
.pid { display: inline-block; background: #edeae4; color: #5a534b; font-weight: 600; font-size: .74rem; padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }

/* Topbar breadcrumb (module context) + spacer (replaces old topbar-title) */
.topbar-spacer { flex: 1; }
.topbar-crumb { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.topbar-crumb i { color: var(--bsn-gold); }

/* page-head actions slot + mobile stacking */
.page-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 575.98px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-head .page-title { font-size: 1.25rem; }
}

/* Nav tabs — quiet underline style */
.nav-tabs { border-bottom: 1px solid var(--border); gap: 2px; }
.nav-tabs .nav-link { border: none; color: var(--text-muted); font-weight: 600; font-size: .875rem; padding: .5rem .9rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link:hover { background: #f5f2ed; color: var(--text-main); }
.nav-tabs .nav-link.active { color: var(--bsn-red); background: transparent; border-bottom: 2px solid var(--bsn-red); }

/* List group — soften inner rules */
.list-group-item { border-color: var(--line-soft); }

/* Dropdown menu — soft elevation, brand active */
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--sh-md); font-size: .875rem; }
.dropdown-item:active { background: var(--bsn-red); }

/* Modal — rounded + soft lift */
.modal-content { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 16px 40px -12px rgba(34,30,27,.28); }
.modal-header, .modal-footer { border-color: var(--border); }

/* ════════════════════════════════════════════════════════════════════════
   === mobile framework ===  (Phase P2, 2026-06-11)
   The shared mobile contract for every wave template pass. The recipes and
   per-page checklist live in docs/mobile-conventions.md — read that first.
   Breakpoint is Bootstrap's lg = 992px (mobile = max-width:991.98px), matching
   the sidebar/bottom-nav rules already in this file. This section adds ONLY
   what those earlier blocks don't: page-actions, touch targets, mobile form
   sizing, and hide-mobile/hide-desktop utilities. Do NOT redefine .bottom-nav,
   .table-mobile-cards, or the 575.98px .page-head stacking — they exist above.
   ════════════════════════════════════════════════════════════════════════ */

/* Header actions slot — base.html wraps {% block page_actions %} in this.
   Desktop: inline row, right-aligned by .page-head's space-between. Mobile:
   wraps so a row of buttons never forces horizontal body scroll. The ≥3-button
   "collapse to ⋯ dropdown" recipe is markup-driven (inline group .d-none
   .d-lg-flex + a .d-lg-none Bootstrap dropdown) — see the conventions doc. */
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

@media (max-width: 991.98px) {
  /* Touch targets ≥44px for primary mobile actions. .btn-sm is banned for
     these (see conventions doc); header-action and explicitly-touch buttons
     get a comfortable thumb target regardless of Bootstrap sizing. */
  .page-actions .btn,
  .btn-touch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Prevent iOS Safari's auto-zoom on focus: any input <16px triggers it.
     Force the 16px floor on mobile even for Bootstrap's -sm controls. */
  .form-control, .form-select,
  .form-control-sm, .form-select-sm,
  .input-group-sm > .form-control, .input-group-sm > .form-select { font-size: 16px; }

  /* Full-width submit on mobile (pair with the desktop width via markup). */
  .btn-block-mobile { width: 100%; }
}

/* Visibility utilities (documented names; complement Bootstrap d-lg-* idioms).
   .hide-mobile → gone <992px; .hide-desktop → gone ≥992px. !important to win
   over component display like Bootstrap's own display utilities. */
@media (max-width: 991.98px) { .hide-mobile  { display: none !important; } }
@media (min-width: 992px)    { .hide-desktop { display: none !important; } }