/* ============================================================
   BSC Ops — Shared Primitives (PR 4 of design refresh)

   Foundation components every per-page redesign reuses.
   Loaded AFTER tokens.css and AFTER the inline <style> so it
   wins the cascade over the older inline rules with the same
   selector. Existing markup classes (.btn-primary, .btn-outline,
   .badge-green, .alert-item, .card, etc.) are preserved as
   shim selectors so no JS / no markup needs to change.

   Per-page features (drawer wiring, bulk-bar, par-bar, count
   stepper, skeleton rows) ship in their own PRs.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.btn-outline,
.btn-danger {
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;
  font:inherit;font-size:12px;font-weight:600;
  color:var(--ink);
  background:linear-gradient(180deg, #ffffff 0%, #f5f0e2 100%);
  border:1px solid var(--border-2);
  border-radius:7px;
  cursor:pointer;
  box-shadow:var(--sh-btn);
  transition:all 100ms ease;
  line-height:1;
  white-space:nowrap;
  font-family:inherit;
}
.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-danger:hover {
  background:linear-gradient(180deg, #ffffff 0%, var(--light-blue-25) 100%);
  border-color:var(--border-3);
}
.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-danger:active {
  box-shadow:var(--sh-btn-press);
  transform:translateY(0.5px);
}
.btn:disabled,
.btn-primary:disabled,
.btn-outline:disabled,
.btn-danger:disabled {
  opacity:.45;cursor:not-allowed;transform:none;
}
.btn svg,
.btn-primary svg,
.btn-outline svg,
.btn-danger svg { width:13px;height:13px;flex-shrink:0; }

/* Primary — navy gradient */
.btn.primary,
.btn-primary {
  color:#fff;
  background:linear-gradient(180deg, #1c4e5b 0%, var(--navy) 100%);
  border-color:rgba(0,0,0,0.40);
  box-shadow:var(--sh-btn-primary);
}
.btn.primary:hover,
.btn-primary:hover {
  background:linear-gradient(180deg, #235a68 0%, #134552 100%);
  border-color:rgba(0,0,0,0.40);
}

/* Accent — light-blue gradient */
.btn.accent {
  color:var(--ink);
  background:linear-gradient(180deg, #d4ecf0 0%, var(--light-blue) 100%);
  border-color:var(--light-blue-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(14,53,64,0.10),
    0 1px 2px rgba(14,53,64,0.10),
    0 4px 8px -3px rgba(143,196,203,0.50);
}
.btn.accent:hover {
  background:linear-gradient(180deg, #ddf0f3 0%, #c5dde2 100%);
  border-color:var(--light-blue-deep);
}

/* Danger — soft red border, fills on hover */
.btn.danger,
.btn-danger {
  color:var(--red);
  background:linear-gradient(180deg, #ffffff, #fbeef0);
  border-color:rgba(176,49,66,0.40);
}
.btn.danger:hover,
.btn-danger:hover {
  background:linear-gradient(180deg, var(--red), #8f2535);
  color:#fff;
  border-color:var(--red);
}

/* Size modifiers (preserved) */
.btn-md { padding:6px 11px;font-size:12px; }
.btn-sm { padding:5px 10px;font-size:11px; }

/* ── Close / dismiss button (× / ✕) ───────────────────────────
   Replaces the inline-styled background:none;border:none × buttons
   sprinkled across modals, drawers, banners, tag pills, table-row
   actions. Three sizes via modifier; default is the medium chrome
   used inside modals & drawers. */
.close-btn {
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:18px;line-height:1;
  padding:2px 6px;border-radius:6px;
  font-family:inherit;
  transition:background 120ms ease, color 120ms ease;
}
.close-btn:hover { color:var(--ink); background:var(--bg-row-hover); }
.close-btn:focus-visible { outline:2px solid var(--bsc-light-blue-deep); outline-offset:1px; }
.close-btn.sm { font-size:14px;padding:1px 4px; }
.close-btn.lg { font-size:22px;padding:2px 8px; }
.close-btn.gold { color:var(--gold-deep); }
.close-btn.gold:hover { color:var(--ink); }

/* Segmented button group */
.btn-group {
  display:inline-flex;
  border-radius:7px;
  box-shadow:var(--sh-btn);
  background:linear-gradient(180deg, #ffffff 0%, #f5f0e2 100%);
  border:1px solid var(--border-2);
}
.btn-group .btn,
.btn-group .btn-primary,
.btn-group .btn-outline {
  box-shadow:none;border:none;border-radius:0;background:transparent;
  border-right:1px solid var(--border);
  color:var(--ink);
}
.btn-group .btn:last-child,
.btn-group .btn-primary:last-child,
.btn-group .btn-outline:last-child { border-right:none; }
.btn-group .btn.active,
.btn-group .btn-primary.active,
.btn-group .btn-outline.active {
  background:linear-gradient(180deg, var(--light-blue-25), var(--light-blue-50));
  color:var(--ink);
  box-shadow:inset 0 1px 1px rgba(14,53,64,0.06);
}

/* ──────────────────────────────────────────────────────────────
   Cards
   ────────────────────────────────────────────────────────────── */
/* Conservative .card override — keeps legacy 20px padding (set by the inline
   <style>) untouched so Recipes / Maintenance / Settings / Projects / etc.
   don't regress. Only touches the visual chrome (border, radius, shadow). */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--sh-card);
}
.card-head {
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;
  background:linear-gradient(180deg, #ffffff 0%, var(--bg-card-soft) 100%);
  border-bottom:1px solid var(--border);
}
.card-body { padding:14px 16px 16px; }
.card-title {
  font-size:12px;font-weight:700;
  color:var(--ink);
  letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  margin:0;
}
.card-title-count {
  font-family:var(--mono);font-weight:600;
  background:var(--light-blue-50);
  color:var(--ink);
  padding:1px 7px;border-radius:999px;
  font-size:10px;
  border:1px solid var(--light-blue);
  letter-spacing:0;
}

/* Span utilities for the future 12-col .cards-grid (PR 5 will rewrite
   .cards-grid to grid-template-columns:repeat(12,1fr); these utilities
   are no-ops on the current auto-fill grid until then, since
   grid-column:span 7 still pushes the item to a single track in
   auto-fill). Harmless to ship now. */
.span-12 { grid-column: span 12; }
.span-7  { grid-column: span 7; }
.span-6  { grid-column: span 6; }
.span-5  { grid-column: span 5; }

/* ──────────────────────────────────────────────────────────────
   Section divider (gold-line caps label)
   ────────────────────────────────────────────────────────────── */
.section-divider {
  display:flex;align-items:center;gap:12px;
  margin:18px 0 10px;
  color:var(--muted);
}
.section-divider::before,
.section-divider::after {
  content:'';flex:1;height:1px;background:var(--border);
}
.section-divider span {
  font-size:10px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;
  font-family:inherit;
}

/* ──────────────────────────────────────────────────────────────
   Badges (gradient fills + inset highlight + ink-tinted border)
   Replaces the old flat-fill .badge-* rules. Mono numerals.
   ────────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:5px;
  font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.02em;
  border:1px solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  white-space:nowrap;
}
.badge-red    { background:linear-gradient(180deg, #fde7ea, #f9d4d8); color:var(--red);    border-color:#f0b9bf; }
.badge-orange { background:linear-gradient(180deg, #fce8d5, #f8d3aa); color:var(--orange); border-color:#edb47a; }
.badge-green  { background:linear-gradient(180deg, #def0e2, #c4e3cd); color:var(--green);  border-color:#9bcdab; }
.badge-blue   { background:linear-gradient(180deg, var(--light-blue-25), var(--light-blue-50)); color:var(--ink); border-color:var(--light-blue); }
.badge-mint,
.badge-teal   { background:linear-gradient(180deg, #ecf3ef, var(--opal-50)); color:var(--ink); border-color:var(--opal); }
.badge-gold   { background:linear-gradient(180deg, #f6ecd6, #ecdcb3); color:var(--gold-deep); border-color:#d8be7f; }
.badge-gray   { background:linear-gradient(180deg, #f1eee8, #e6e0d4); color:var(--ink-2);  border-color:#d4ccba; }

/* ──────────────────────────────────────────────────────────────
   Alert-item (low-stock list rows etc.)
   ────────────────────────────────────────────────────────────── */
.alert-item {
  display:flex;align-items:center;gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--ink);
}
.alert-item:last-child { border-bottom:none; }
.alert-name { font-weight:500;color:var(--ink); }
.alert-loc  {
  margin-left:auto;font-size:11px;color:var(--muted);
  font-family:var(--mono);
}
.alert-dot {
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.alert-dot.red    { background:var(--red);    box-shadow:0 0 0 3px rgba(176,49,66,0.12); }
.alert-dot.orange { background:var(--orange); box-shadow:0 0 0 3px rgba(197,90,17,0.12); }
.alert-dot.gold   { background:var(--gold);   box-shadow:0 0 0 3px rgba(201,167,109,0.18); }
.alert-dot.blue   { background:var(--ink);    box-shadow:0 0 0 3px rgba(2,61,74,0.10); }

/* ──────────────────────────────────────────────────────────────
   Scrim (used by Inventory PR 9 + Checklists PR 18)
   Hidden by default — modules toggle .show to display it.
   ────────────────────────────────────────────────────────────── */
.scrim {
  position:fixed;inset:0;background:rgba(2,30,38,0.18);
  z-index:200;backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  display:none;
}
.scrim.show { display:block; }


/* ──────────────────────────────────────────────────────────────
   Modal overlay — softer backdrop with blur (mock §6.2 spec)
   Existing .modal-overlay is defined inline; this overrides it.
   ────────────────────────────────────────────────────────────── */
.modal-overlay {
  background:rgba(2,30,38,0.18);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* ──────────────────────────────────────────────────────────────
   Link helpers (used by card heads + footers)
   ────────────────────────────────────────────────────────────── */
a.link, .link {
  color:var(--gold-deep);font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(151,121,68,0.28);
  cursor:pointer;transition:all 120ms ease;
}
a.link:hover, .link:hover {
  color:var(--gold);border-bottom-color:var(--gold);
}

/* ── Lane primitives (Phase 2 design language) ───────────────────
   Originally defined inline for the Checklists Phase 2 lane preview
   (PRs 16-24). Promoted to a shared primitive in PR 29 so other
   pages (Maintenance status lanes, Ordering by-status, etc.) can
   reuse the same visual language without duplicating CSS.

   Anatomy:
     .lane-card                  surface (gradient cream)
       .lane-head                top bar
         .lane-marker.<tone>       6px colored bar (status indicator)
         .lane-title               h3 IvyPresto + .sub muted caption
         .lane-progress            mono fraction + 80px progress bar
       <body content>            sections / rows / etc.

   Marker tone variants:
     .tone-warn-soft                   gold gradient
     .tone-neutral                     light-blue gradient
     .tone-strong                      deep-navy gradient
     .tone-bad                          red gradient (overdue / error)
     .tone-warn                         amber gradient (due-soon)
     .tone-good                         green gradient (on-track)
     .tone-muted                        gray gradient (done / archived)
*/
.lane-card{
  background:linear-gradient(180deg,#ffffff 0%,var(--bg-card-soft) 100%);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-card);
  padding:0;overflow:hidden;
  display:flex;flex-direction:column;
}
.lane-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#ffffff 0%,var(--bg-card-soft) 100%);
}
.lane-marker{width:6px;height:32px;border-radius:3px;flex-shrink:0;background:var(--bsc-light-blue-deep);}
/* Generic semantic tones — used by status-grouping pages. */
.lane-marker.tone-warn-soft{background:linear-gradient(180deg,#f6ecd6,#d8be7f);}
.lane-marker.tone-strong{background:linear-gradient(180deg,#1d4753,var(--navy));}
.lane-marker.tone-bad{background:linear-gradient(180deg,#f0a3a3,var(--bad,#c44545));}
.lane-marker.tone-warn{background:linear-gradient(180deg,#f6d99a,#e0a83b);}
.lane-marker.tone-good{background:linear-gradient(180deg,#bcd9b9,var(--good,#5b8c4f));}
.lane-marker.tone-neutral{background:linear-gradient(180deg,#d4ecf0,var(--bsc-light-blue-deep));}
.lane-marker.tone-muted{background:linear-gradient(180deg,#e6e0d4,#b6ada0);}
.lane-marker.tone-strong{background:linear-gradient(180deg,#1d4753,var(--navy));}

.lane-title{flex:1;}
.lane-title h3{font-family:var(--font-display);font-style:normal;font-weight:300;font-size:18px;color:var(--ink);line-height:1.15;letter-spacing:-.005em;margin:0;}
.lane-title .sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:3px;}
.lane-progress{display:flex;align-items:center;gap:8px;}
.lane-progress .frac{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;}
.lane-progress .bar{width:80px;height:6px;border-radius:999px;background:linear-gradient(180deg,#e1ebed,var(--light-blue-50));overflow:hidden;border:1px solid var(--border);}
.lane-progress .bar-fill{height:100%;background:linear-gradient(180deg,#1d4753,var(--navy));border-radius:999px;transition:width 420ms cubic-bezier(.4,0,.2,1);}

/* ── Day ribbon — at-a-glance stat tiles above lane stack ────── */
.day-ribbon{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-bottom:18px;
}
.day-ribbon-cell{
  background:linear-gradient(180deg,#ffffff 0%,var(--bg-card-soft) 100%);
  border:1px solid var(--border);border-radius:9px;
  padding:10px 12px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:4px;
}
.day-ribbon-cell .dr-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;}
.day-ribbon-cell .dr-stat{font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
/* Optional tone class to colorize the big number for severity (eg overdue). */
.day-ribbon-cell.tone-bad  .dr-stat{color:var(--bad,#c44545);}
.day-ribbon-cell.tone-warn .dr-stat{color:#a87a18;}
.day-ribbon-cell.tone-good .dr-stat{color:var(--good,#5b8c4f);}

/* ── Sign-off confirmation card (Phase 2 manager sign-off) ───── */
.signoff-card{
  background:linear-gradient(180deg,var(--light-blue-25),var(--light-blue-50));
  border:1px solid var(--light-blue-deep);border-radius:12px;
  padding:14px 18px;margin-top:14px;
  display:flex;align-items:center;gap:12px;
  color:var(--ink);font-size:13px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
}
.signoff-card .sig-icon{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#1d4753,var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.signoff-card .meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500;}

/* ── Mobile overhaul (2026-08-07 full-app audit) ─────────────────
   Overrides for primitives whose base rules live in this file (this
   sheet loads after index.html's inline style, so same-specificity
   mobile rules must live here to win the cascade). */
@media (max-width:768px){
  /* Segmented tab groups (Prices etc.): scroll, don't overflow the page */
  .btn-group{display:flex;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .btn-group::-webkit-scrollbar{display:none;}
  .btn-group .btn{flex:0 0 auto;}
  /* × buttons (row delete, tag remove, pill dismiss): real hit areas */
  .close-btn{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;}
  .close-btn.sm{min-width:30px;min-height:30px;}
  /* Stat-tile ribbon: 4-across becomes 2-across */
  .day-ribbon{grid-template-columns:1fr 1fr;}
  /* Low-stock rows: truncate long names instead of wrapping into badges */
  .alert-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}