:root {
  /* BoomRx brand palette */
  --navy: #002034;         /* brand navy — sidebar, headers, titles, button fill */
  --navy-light: #0a3350;
  --teal: #0D9488;
  --blue: #002034;         /* interactive accent unified to brand navy */
  --orange: #FF991C;       /* primary brand orange */
  --rust: #B0560F;         /* deep orange for kicker labels / high-contrast text */
  --brand-red: #BC2D29;    /* gradient anchor */
  --grad: linear-gradient(90deg, #BC2D29, #FF991C);   /* primary brand gradient */
  --grad-135: linear-gradient(135deg, #BC2D29, #FF991C);
  --gray: #6B7280;
  --red: #DC2626;
  --white: #ffffff;
  --bg: #F1F5F9;
  --border: #E2E8F0;
  --text: #1E293B;
  --text-muted: #64748B;
  --card: #ffffff;
  --bg-alt: #F1F5F9;
  --sidebar-width: 240px;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   Redefines the surface/text variables. --white becomes a dark surface and
   --navy becomes a light heading/accent color (both were used dual-purpose);
   the few elements that used them as a colored BACKGROUND are corrected below,
   and CSS-variable scoping keeps the sidebar + colored buttons white-on-color. */
:root[data-theme="dark"] {
  --white: #18242f;      /* cards / surfaces */
  --bg: #0e1620;         /* page background */
  --bg-alt: #1c2b38;
  --card: #18242f;
  --border: #2b3b49;
  --text: #e6edf4;
  --text-muted: #9db0c1;
  --gray: #9db0c1;
  --navy: #e6edf4;       /* headings / accents read light on dark */
  --blue: #7db3ff;       /* interactive accent (tab underline, links) — light on dark */
}
/* Active/selected tab-style controls: white text + a soft white halo instead of dark blue. */
:root[data-theme="dark"] .fm-tab:hover,
:root[data-theme="dark"] .fm-tab.active { color: #ffffff; border-bottom-color: #ffffff; }
:root[data-theme="dark"] .fm-tab.active { text-shadow: 0 0 8px rgba(255,255,255,0.45); }
/* Update ("cookies") banner used --navy as its bg → now light; force a dark banner in dark mode. */
:root[data-theme="dark"] .app-update-banner { background: #1c2b38; color: #fff; border: 1px solid var(--border); }
/* Needs Attention KPI card + filter pill → dark surface with a red halo (was white / faded red). */
:root[data-theme="dark"] .kpi-card.kpi-attention { background: rgba(220,38,38,0.10); border-color: rgba(248,113,113,0.45); box-shadow: 0 0 0 1px rgba(248,113,113,0.18), 0 0 20px rgba(220,38,38,0.16); }
:root[data-theme="dark"] .kpi-card.kpi-attention .kpi-num { color: #f87171; }
:root[data-theme="dark"] .filter-pills .pill-attention { border-color: rgba(248,113,113,0.6); color: #fca5a5; box-shadow: 0 0 10px rgba(220,38,38,0.28); }
:root[data-theme="dark"] .filter-pills .pill-attention:hover { border-color: #f87171; color: #fecaca; box-shadow: 0 0 15px rgba(220,38,38,0.42); }
:root[data-theme="dark"] .filter-pills .pill-attention.active { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 0 16px rgba(220,38,38,0.55); }
/* Count badges (Account Directory / Office Management) used --navy as bg → light in dark mode,
   giving white-on-white. Re-skin as a readable neon-blue halo pill. */
:root[data-theme="dark"] .om2-badge { background: rgba(125,179,255,0.18); color: #dbe9ff; box-shadow: inset 0 0 0 1px rgba(125,179,255,0.4); }
:root[data-theme="dark"] .om2-avatar[style*="--navy"] { background: rgba(125,179,255,0.2) !important; color: #dbe9ff; }
/* Cards ↔ Grid view toggle on the Shipping Tracker (grid = manager backend, hidden from reps). */
.gs-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.gs-seg a { padding:0.35rem 0.8rem; font-size:0.82rem; font-weight:700; color:var(--text-muted); text-decoration:none; background:var(--white); }
.gs-seg a.on { background:var(--navy,#0f2a3f); color:#fff; }
:root[data-theme="dark"] .gs-seg a.on { background:#2563eb; }
/* Reps cannot export data out of the Hub — hide export/download controls for them. */
body.rep-noexport #q-export,
body.rep-noexport [data-rep-noexport] { display: none !important; }
/* Sidebar keeps its own dark bg + white text (scope --white back to #fff for it). */
:root[data-theme="dark"] .sidebar { background: #0a1119; --white: #ffffff; }
:root[data-theme="dark"] body.login-page { background: #0a1119; }
:root[data-theme="dark"] .login-card { background: var(--white); }
/* White-on-color elements: keep their text white. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-teal,
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .pill.pill-apply { --white: #ffffff; }
/* Elements that used --navy as a BACKGROUND (now light) → dark surface / accent. */
:root[data-theme="dark"] .btn:hover { background: #26384a; color: #fff; border-color: #26384a; }
:root[data-theme="dark"] .pill.active { background: #2563eb; border-color: #2563eb; color: #fff; }
:root[data-theme="dark"] .drp-preset.active,
:root[data-theme="dark"] .drp-cell.edge { background: #2563eb; color: #fff; }
/* Form fields that hardcode a light background. */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--white); color: var(--text); border-color: var(--border); }
/* Disposition highlights are inline background colors baked into saved note HTML — keep them,
   but force dark text on any highlighted run so it stays readable on the bright swatch. */
:root[data-theme="dark"] .ap-dsub [style*="background"],
:root[data-theme="dark"] .tl-note [style*="background"],
:root[data-theme="dark"] .ap-rte  [style*="background"],
:root[data-theme="dark"] .ph-redact [style*="background"] { color: #111827; }
/* ── Theme pill slider (sun ↔ moon) — bottom-left corner, above Sign Out ── */
.theme-slider { display: flex; justify-content: flex-start; width: 100%; background: none; border: 0; cursor: pointer; padding: 0 0 0.55rem; }
.ts-track { position: relative; width: 42px; height: 21px; border-radius: 999px; background: rgba(255,255,255,0.16); display: inline-block; transition: background .2s; }
.ts-ico { position: absolute; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; color: rgba(255,255,255,0.7); z-index: 1; }
.ts-ico svg { width: 100%; height: 100%; display: block; }
.ts-sun { left: 5px; } .ts-moon { right: 5px; }
.ts-knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: left .22s cubic-bezier(.4,0,.2,1); z-index: 2; }
:root[data-theme="dark"] .ts-track { background: rgba(255,255,255,0.22); }
:root[data-theme="dark"] .ts-knob { left: 24px; }
/* Collapsed sidebar: center the compact pill (never fills outward). */
.app-layout.nav-collapsed .theme-slider { justify-content: center; }

/* Formulary PRINT sheet (.fm-doc) stays white in dark mode — it's a static, print-styled document.
   Pin its variables so everything inside renders in its original light palette. */
:root[data-theme="dark"] .fm-doc {
  --white: #ffffff; --bg: #ffffff; --bg-alt: #f1f5f9; --card: #ffffff;
  --border: #e2e8f0; --text: #1e293b; --text-muted: #64748b; --navy: #002034;
  background: #ffffff; color: #1e293b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* Login */
body.login-page { display: flex; align-items: center; justify-content: center; background: var(--navy); }
.login-card { background: var(--white); border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-brand h1 { font-size: 1.4rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.login-brand p { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 2rem; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 0.375rem; }
.form-group input, .form-group select { width: 100%; padding: 0.625rem 0.875rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.9375rem; color: var(--text); background: var(--white); transition: border-color 0.15s; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Buttons */
/* Clean, always-legible buttons (BoomRx theme). No JS, no overlay. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1.05rem; border-radius: 10px; border: 1px solid var(--border); background: var(--white); color: var(--navy); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease, transform .08s ease; box-shadow: 0 1px 2px rgba(0,32,52,0.05); }
.btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(0,32,52,0.3); }
.btn:disabled, .btn.is-disabled { pointer-events: none; opacity: 0.45; }
.btn-outline { background: var(--white); color: var(--navy); border: 1px solid var(--border); }
/* Solid / gradient variants keep their fill; just brighten on hover */
.btn-primary { background: var(--grad); background-repeat: no-repeat; color: var(--white); border: 1px solid transparent; box-shadow: none; }
.btn-primary:hover { background: var(--grad); color: var(--white); border-color: transparent; filter: brightness(1.05); }
.btn-teal { background: var(--teal); color: var(--white); border-color: var(--teal); }
.btn-teal:hover { background: var(--teal); color: var(--white); border-color: var(--teal); filter: brightness(1.07); }
.btn-danger { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--white); border-color: var(--red); filter: brightness(1.07); }
.btn-full { width: 100%; justify-content: center; padding: 0.8rem; }
/* Dark sidebar footer (Sign Out): transparent on navy, not white-on-white */
.sidebar .btn-outline { background: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25); box-shadow: none; }
.sidebar .btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8125rem; }

.error-msg { color: var(--red); font-size: 0.875rem; margin-bottom: 1rem; }

/* Layout with sidebar */
.app-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: var(--sidebar-width); background: var(--navy); color: var(--white); display: flex; flex-direction: column; flex-shrink: 0; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; }
.sidebar-brand { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-brand h2 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.sidebar-brand p { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 0.25rem; }
.brand-logo { padding: 6px 0 4px; margin-bottom: 0.6rem; display: flex; justify-content: center; }
.brand-logo img { height: 64px; width: auto; max-width: 100%; display: block; }
.app-layout.nav-collapsed .brand-logo img { height: 40px; }
.sidebar-user { padding: 0.875rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.8125rem; color: rgba(255,255,255,0.7); }
.sidebar-user strong { display: block; color: var(--white); font-size: 0.875rem; margin-bottom: 0.25rem; }
.sidebar-user span { display: block; margin-bottom: 0.15rem; line-height: 1.4; }

/* Shipment contents (medications) cell */
.contents-cell { max-width: 320px; }
.med-line { font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.med-line .med-str { color: var(--text-muted); font-size: 0.75rem; }
.med-line .med-qty { color: var(--teal); font-weight: 600; font-size: 0.75rem; }
/* Aging chips on Received orders */
.age-chip { display:inline-block; margin-top:0.3rem; padding:0.1rem 0.45rem; border-radius:6px; font-size:0.7rem; font-weight:700; white-space:nowrap; }
.age-chip.age-green   { background:#d1fae5; color:#065f46; }
.age-chip.age-yellow  { background:#fef3c7; color:#92400e; }
.age-chip.age-lightred{ background:#fecaca; color:#991b1b; }
.age-chip.age-heavyred{ background:#dc2626; color:#fff; box-shadow:0 0 0 2px rgba(220,38,38,0.25); }

/* Pharmacy closure banner (informational, for reps) */
#closure-banner-wrap { margin-bottom:0.75rem; display:flex; flex-direction:column; gap:0.4rem; }
.closure-banner { display:flex; align-items:center; gap:0.55rem; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; border-radius:8px; padding:0.6rem 0.9rem; font-size:0.85rem; }
.closure-banner strong { color:#7c2d12; }
.closure-banner a { color:inherit; font-weight:600; }
.closure-form { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:1.25rem 1.5rem; }
/* Pharmacy selectors as toggle pills that light up when checked. */
.closure-ph-grid { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.closure-ph { display:inline-flex; align-items:center; gap:0.45rem; font-size:0.82rem; cursor:pointer; padding:0.4rem 0.8rem; border:1px solid var(--border); border-radius:999px; background:var(--bg-alt,#f5f8fb); color:var(--text); transition:background .12s,border-color .12s; }
.closure-ph:hover { border-color:var(--blue,#3b82f6); }
.closure-ph:has(input:checked) { background:rgba(59,130,246,0.16); border-color:#3b82f6; color:var(--navy); font-weight:600; }
.closure-ph input { accent-color:#3b82f6; margin:0; }
.closure-fields { display:flex; flex-wrap:wrap; gap:0.85rem; align-items:flex-end; }
.closure-fields label { display:flex; flex-direction:column; font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-muted); gap:0.25rem; }
.closure-fields input, .closure-fields select { padding:0.45rem 0.6rem; border:1.5px solid var(--border); border-radius:8px; font-size:0.86rem; font-family:inherit; background:var(--white); color:var(--text); }
/* ── Site-wide announcement banners ── */
.announce-bar { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:1.25rem; }
.announce { display:flex; align-items:center; gap:0.7rem; padding:0.7rem 1.15rem; font-size:0.9rem; }
.announce + .announce { border-top:1px solid rgba(0,0,0,0.08); }
.announce-ic { flex:0 0 auto; font-size:1rem; }
.announce-txt { flex:1; min-width:0; }
.announce-x { border:0; background:none; color:inherit; opacity:0.65; cursor:pointer; font-size:15px; line-height:1; padding:3px 7px; border-radius:6px; }
.announce-x:hover { opacity:1; background:rgba(0,0,0,0.1); }
.announce.sev-info { background:#e0edff; color:#1e40af; }
.announce.sev-success { background:#dcfce7; color:#166534; }
.announce.sev-warning { background:#fef3c7; color:#92400e; }
.announce.sev-critical { background:#fee2e2; color:#991b1b; }
:root[data-theme="dark"] .announce.sev-info { background:rgba(61,123,255,0.20); color:#bcd4ff; }
:root[data-theme="dark"] .announce.sev-success { background:rgba(41,255,176,0.16); color:#7ef0c0; }
:root[data-theme="dark"] .announce.sev-warning { background:rgba(255,200,60,0.16); color:#ffd98a; }
:root[data-theme="dark"] .announce.sev-critical { background:rgba(255,80,120,0.20); color:#ffb3c4; }
/* ── Announcement manager (admin) ── */
.ann-fields { display:flex; flex-wrap:wrap; gap:0.85rem; align-items:flex-end; }
.ann-fields label, .ann-full { display:flex; flex-direction:column; font-size:0.72rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-muted); gap:0.25rem; }
.ann-full { margin-top:0.7rem; }
.ann-fields input, .ann-fields select, .ann-full input { padding:0.45rem 0.6rem; border:1.5px solid var(--border); border-radius:8px; font-size:0.88rem; font-family:inherit; background:var(--white); color:var(--text); }
.ann-static { flex-direction:row!important; align-items:center; gap:0.45rem; text-transform:none!important; letter-spacing:0; }
.ann-static input { accent-color:#3b82f6; }
.ann-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.ann-dot.sev-info{background:#3b82f6;} .ann-dot.sev-success{background:#22c55e;} .ann-dot.sev-warning{background:#f59e0b;} .ann-dot.sev-critical{background:#ef4444;}
.ann-msg { font-size:0.8rem; color:var(--text-muted); margin-top:0.2rem; }
.ann-status { font-size:0.7rem; font-weight:700; padding:0.14rem 0.55rem; border-radius:999px; white-space:nowrap; }
.ann-status.ok { background:rgba(34,197,94,0.18); color:#16a34a; }
.ann-status.sched { background:rgba(59,130,246,0.18); color:#2563eb; }
.ann-status.exp { background:rgba(148,163,184,0.18); color:#64748b; }
:root[data-theme="dark"] .ann-status.ok { color:#34f5a8; }
:root[data-theme="dark"] .ann-status.sched { color:#7db3ff; }

/* ── Formulary ── */
.fm-toolbar { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.fm-state-wrap { position:relative; }
.fm-state-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:280px; background:var(--white); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,32,52,0.15); padding:0.6rem; }
.fm-state-actions { display:flex; gap:0.4rem; margin-bottom:0.5rem; }
.pill.pill-apply { margin-left:auto; background:var(--grad); color:var(--white); border-color:transparent; }
.pill.pill-apply:hover { filter:brightness(1.05); }
.btn.fm-reset-btn { color:var(--brand-red); border-color:rgba(188,45,41,0.35); }
.btn.fm-reset-btn:hover { background:var(--brand-red); color:var(--white); border-color:var(--brand-red); }
.fm-state-list { max-height:300px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:0.15rem 0.5rem; }
.fm-cl-search { width:100%; box-sizing:border-box; padding:0.4rem 0.55rem; margin-bottom:0.5rem; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:0.85rem; }
.fm-cl-search:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 2px rgba(37,99,235,0.15); }
.fm-state-item { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--navy); cursor:pointer; padding:0.35rem 0.5rem; border-radius:8px; }
.fm-state-item:hover { background:var(--bg-alt); }
.fm-summary { font-size:0.8125rem; color:var(--text-muted); flex:1; min-width:180px; }
.fm-actions { display:flex; gap:0.5rem; }

.fm-doc { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:1.75rem 2rem; }
.fm-doc-head { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:2px solid #16243d; padding-bottom:0.75rem; margin-bottom:1.25rem; }
.fm-doc-head h2 { font-size:1.75rem; font-weight:800; color:#16243d; margin:0.1rem 0 0; }
.fm-doc-stat { font-size:0.8rem; font-weight:700; letter-spacing:0.5px; color:#8aa0b8; text-transform:uppercase; }
.fm-eyebrow { font-size:0.7rem; font-weight:700; letter-spacing:1.5px; color:#8aa0b8; text-transform:uppercase; }
.fm-pharm { margin-bottom:1.75rem; }
.fm-pharm-head { margin-bottom:0.75rem; }
.fm-pharm-title-row { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1.5px solid #16243d; padding-bottom:0.4rem; }
.fm-pharm-title-row h3 { font-size:1.4rem; font-weight:800; color:#16243d; margin:0; }
.fm-pharm-count { font-size:0.7rem; font-weight:700; letter-spacing:1px; color:#8aa0b8; }
.fm-prod { margin:0.85rem 0; }
.fm-prod-head { display:flex; align-items:center; gap:0.4rem; margin-bottom:0.3rem; }
.fm-prod-name { font-weight:700; color:#16243d; font-size:0.95rem; }
.fm-chip { display:inline-block; padding:0.08rem 0.45rem; border-radius:5px; font-size:0.62rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; }
.fm-chip-cat { background:#fae6d3; color:#c56a1c; }
.fm-chip-form { background:transparent; border:1px solid #d6dee7; color:#8aa0b8; }
.fm-prod-note { font-size:0.72rem; font-weight:700; color:#bc2d29; margin:1px 0 4px; }
.fm-leader { display:flex; align-items:baseline; gap:0.4rem; padding:0.12rem 0; }
.fm-str { color:#334155; font-size:0.85rem; white-space:nowrap; }
.fm-dots { flex:1; border-bottom:1px dotted #c7d0da; transform:translateY(-3px); }
.fm-price { font-weight:700; color:#16243d; font-size:0.85rem; white-space:nowrap; }
.fm-soon { text-align:center; max-width:560px; margin:2rem auto; padding:1rem; }
.fm-soon-emoji { font-size:3rem; line-height:1; margin-bottom:0.75rem; }
.fm-soon h2 { font-size:1.6rem; font-weight:800; color:#16243d; margin:0 0 0.75rem; }
.fm-soon p { color:var(--text-muted); font-size:0.95rem; line-height:1.55; margin:0 0 0.85rem; }
.fm-soon-cookie { background:#fff7ed; border:1px dashed #fdba74; color:#9a3412; border-radius:10px; padding:0.85rem 1rem; }
.fm-soon-fine { font-size:0.85rem; font-style:italic; }

/* Formulary manager (spreadsheet + licensing grid) */
.fm-tabs { display:flex; align-items:center; gap:0.4rem; margin-bottom:1rem; border-bottom:1px solid var(--border); }
.fm-tab { border:none; background:transparent; padding:0.55rem 0.9rem; font:inherit; font-weight:600; font-size:0.875rem; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.fm-tab:hover { color:var(--blue); }
.fm-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.fm-changebar { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:0.6rem 0.9rem; margin-bottom:0.75rem; }
.fm-changebar.dirty { border-color:#f59e0b; background:#fffbeb; }
.fm-change-count { font-size:0.85rem; font-weight:600; color:var(--text-muted); }
.fm-changebar.dirty .fm-change-count { color:#b45309; }
.fm-changebar-actions { display:flex; gap:0.5rem; }
.fm-mgr-toolbar { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; margin-bottom:0.75rem; }
.fm-mgr-toolbar input[type=text], .fm-mgr-toolbar select { padding:0.45rem 0.6rem; border:1.5px solid var(--border); border-radius:8px; font:inherit; font-size:0.85rem; }
.fm-scroll { max-height:64vh; overflow:auto; border:1px solid var(--border); border-radius:10px; background:var(--white); }

.fm-grid-table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.82rem; }
.fm-grid-table th, .fm-grid-table td { border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:0.3rem 0.45rem; text-align:left; vertical-align:middle; }
.fm-grid-table th { background:var(--bg-alt); position:sticky; top:0; z-index:2; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); }
.fm-grid-table input, .fm-grid-table select { width:100%; border:1px solid transparent; background:transparent; font:inherit; padding:0.25rem 0.3rem; border-radius:5px; }
.fm-grid-table select { -webkit-appearance:none; appearance:none; padding-right:1.1rem; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238aa0b8' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat:no-repeat; background-position:right 0.35rem center; cursor:pointer; }
.fm-grid-table input:hover, .fm-grid-table select:hover { border-color:var(--border); background-color:#fff; }
.fm-grid-table input:focus, .fm-grid-table select:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 2px rgba(37,99,235,0.15); }
.fm-row-edited td.fm-cell-changed { background:#fee2e2; }
.fm-row-edited td.fm-cell-changed input { color:#b91c1c; font-weight:600; }
.fm-row-new td { background:#ecfdf5; }
.fm-row-new td:first-child { box-shadow:inset 3px 0 0 #10b981; }
.fm-group-row td { background:#0f172a; color:#fff; font-weight:700; position:sticky; top:26px; z-index:1; }
.fm-group-row span:first-child { font-size:0.9rem; }
.fm-group-count { display:inline-block; background:rgba(255,255,255,0.18); border-radius:10px; padding:0 0.45rem; font-size:0.72rem; margin-left:0.4rem; }
.fm-add-inline { float:right; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.35); border-radius:6px; padding:0.1rem 0.5rem; font:inherit; font-size:0.72rem; font-weight:600; cursor:pointer; }
.fm-add-inline:hover { background:rgba(255,255,255,0.28); }
.fm-row-actions { white-space:nowrap; text-align:center; }
.fm-iconbtn { border:1px solid var(--border); background:var(--white); border-radius:6px; width:24px; height:24px; font-size:0.8rem; line-height:1; cursor:pointer; color:var(--text-muted); margin:0 1px; }
.fm-iconbtn:hover { border-color:var(--blue); color:var(--blue); }
.fm-iconbtn:disabled { opacity:0.3; cursor:default; }
.fm-iconbtn-del:hover { border-color:var(--red); color:var(--red); }
.fm-lic-cell { text-align:center; }
.fm-lic-active { background:#d1fae5; } .fm-lic-no_license { background:#fee2e2; } .fm-lic-partial { background:#fef3c7; }
.fm-grid-table td.fm-cell-changed { box-shadow:inset 0 0 0 2px #ef4444; }

.fm-ph-list { display:flex; flex-direction:column; gap:0.4rem; max-width:560px; }
.fm-ph-row { display:flex; align-items:center; gap:0.75rem; background:var(--white); border:1px solid var(--border); border-radius:10px; padding:0.5rem 0.75rem; }
.fm-ph-move { display:flex; flex-direction:column; gap:2px; }
.fm-ph-move .fm-iconbtn { width:22px; height:18px; font-size:0.6rem; }
.fm-ph-key { font-weight:800; color:var(--blue); width:48px; }
.fm-ph-row label { flex:1; display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; color:var(--text-muted); }
.fm-ph-row label input { flex:1; padding:0.35rem 0.5rem; border:1.5px solid var(--border); border-radius:6px; font:inherit; }

.fm-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.55); display:flex; align-items:center; justify-content:center; z-index:100; }
.fm-modal { background:var(--white); border-radius:14px; padding:1.5rem 1.6rem; max-width:440px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.fm-modal h3 { margin:0 0 0.75rem; font-size:1.2rem; color:#16243d; }
.fm-modal-list { margin:0.5rem 0 1rem; padding-left:1.1rem; font-size:0.9rem; }
.fm-modal-list li { margin:0.15rem 0; }
.fm-modal-ack { display:flex; align-items:flex-start; gap:0.5rem; font-size:0.85rem; color:var(--text); background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:0.6rem 0.7rem; margin-bottom:1rem; cursor:pointer; }
.fm-modal-actions { display:flex; justify-content:flex-end; gap:0.6rem; }

.fm-bulk { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:0.6rem 0.8rem; margin-bottom:0.75rem; }
.fm-bulk-title { font-weight:700; font-size:0.82rem; color:#1e40af; }
.fm-bulk input, .fm-bulk select { padding:0.4rem 0.55rem; border:1.5px solid var(--border); border-radius:6px; font:inherit; font-size:0.85rem; background:#fff; }
.fm-bulk select { min-width:180px; }
.fm-bulk input[type=text] { min-width:170px; } .fm-bulk input[type=number] { width:110px; }

/* Rep-facing customize (edit) mode */
.fm-editbar { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; background:var(--white); border:1px solid var(--border); color:var(--navy); border-radius:12px; padding:0.6rem 0.9rem; margin-bottom:0.75rem; box-shadow:0 1px 3px rgba(0,32,52,0.06); }
.fm-editbar .fm-editbar-title { font-weight:600; font-size:0.85rem; color:var(--text-muted); }
.fm-editbar input[type=number] { border:1px solid var(--border) !important; }
.fm-editbar-sep { width:1px; background:rgba(0,32,52,0.08); margin:0.35rem 0.4rem; align-self:stretch; }
.fm-cl-group { margin-bottom:0.3rem; }
.fm-cl-group-head { font-size:0.72rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:var(--rust); padding:0.3rem 0.15rem 0.15rem; position:sticky; top:0; background:var(--white); }
.fm-flash { animation: fmflash 1.6s ease; border-radius:6px; }
@keyframes fmflash { 0%,100% { background:transparent; } 15%,55% { background:rgba(255,153,28,0.28); } }

/* ── Formulary sandbox redesign ── */
.fm-sandbox-badge { display:inline-block; vertical-align:middle; font-size:0.6rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#fff; background:var(--grad); padding:0.15rem 0.5rem; border-radius:999px; margin-left:0.5rem; }
.fm-topsearch { flex:1; min-width:180px; max-width:420px; padding:0.55rem 0.9rem; border:1px solid var(--border); border-radius:10px; font:inherit; font-size:0.9rem; background:var(--white); }
.fm-topsearch:focus { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,32,52,0.12); }
.fm-prepared { width:190px; padding:0.55rem 0.75rem; border:1px dashed var(--border); border-radius:10px; font:inherit; font-size:0.85rem; background:var(--white); }
.fm-prepared:focus { outline:none; border-style:solid; border-color:var(--rust); box-shadow:0 0 0 3px rgba(176,86,15,0.12); }
/* Date-range picker */
.drp-trigger { display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.85rem; border:1px solid var(--border); border-radius:10px; background:var(--white); color:var(--navy); font:inherit; font-size:0.875rem; font-weight:600; cursor:pointer; }
.drp-trigger:hover { border-color:var(--navy); }
.drp-trigger .drp-caret { color:var(--text-muted); font-size:0.7rem; }
.drp-pop { position:fixed; z-index:1100; display:flex; background:var(--white); border:1px solid var(--border); border-radius:14px; box-shadow:0 16px 44px rgba(0,32,52,0.22); overflow:hidden; max-width:calc(100vw - 16px); }
.drp-presets { display:flex; flex-direction:column; padding:0.6rem; gap:0.15rem; border-right:1px solid var(--border); min-width:150px; background:var(--bg-alt); }
.drp-preset { text-align:left; padding:0.5rem 0.75rem; border:none; background:transparent; border-radius:8px; font:inherit; font-size:0.85rem; color:var(--navy); cursor:pointer; white-space:nowrap; }
.drp-preset:hover { background:rgba(0,32,52,0.06); }
.drp-preset.active { background:var(--navy); color:#fff; }
.drp-calwrap { padding:0.9rem 1rem; }
.drp-months { display:flex; gap:1.5rem; position:relative; }
.drp-nav { position:absolute; top:-2px; width:26px; height:26px; border:1px solid var(--border); background:var(--white); border-radius:7px; cursor:pointer; color:var(--navy); font-size:1rem; line-height:1; }
.drp-nav.drp-prev { left:0; } .drp-nav.drp-next { right:0; }
.drp-month { width:224px; }
.drp-mhead { text-align:center; font-weight:700; color:var(--navy); font-size:0.85rem; margin-bottom:0.5rem; }
.drp-dow { display:grid; grid-template-columns:repeat(7,1fr); font-size:0.68rem; color:var(--text-muted); text-align:center; margin-bottom:0.2rem; }
.drp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.drp-cell { border:none; background:transparent; font:inherit; font-size:0.8rem; color:var(--navy); height:30px; border-radius:7px; cursor:pointer; }
.drp-cell.empty { visibility:hidden; }
.drp-cell:hover:not(.empty) { background:rgba(0,32,52,0.08); }
.drp-cell.in { background:rgba(0,32,52,0.08); border-radius:0; }
.drp-cell.edge { background:var(--navy); color:#fff; border-radius:7px; }
.drp-cell.today:not(.edge) { box-shadow:inset 0 0 0 1.5px var(--orange); }
.drp-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0.9rem; padding-top:0.8rem; border-top:1px solid var(--border); }
.drp-sel { font-size:0.82rem; color:var(--text-muted); font-weight:600; }
.drp-primary-sel { font-size:0.82rem; color:var(--text-muted); margin-top:0.7rem; }
.drp-primary-sel strong, .drp-cmp-sel strong { color:var(--navy); }
.drp-vs { color:var(--orange); font-weight:600; margin-left:0.3rem; }
/* compare highlights (orange) */
.drp-cell.cin { background:rgba(255,153,28,0.18); border-radius:0; }
.drp-cell.cedge { background:var(--orange); color:#fff; border-radius:7px; }
.drp-compare { margin-top:0.7rem; padding-top:0.7rem; border-top:1px dashed var(--border); }
.drp-cmp-toggle { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; font-weight:600; color:var(--navy); cursor:pointer; }
.drp-cmp-toggle input { accent-color:var(--orange); }
.drp-cmp-row { display:flex; align-items:center; gap:0.5rem; margin-top:0.5rem; }
.drp-cmp-lbl { font-size:0.78rem; color:var(--text-muted); font-weight:600; }
.drp-cmp-mode { padding:0.35rem 0.5rem; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:0.82rem; background:var(--white); }
.drp-cmp-row input[type=date] { padding:0.3rem 0.45rem; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:0.82rem; margin-left:0.3rem; }
.drp-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.drp-seg-btn { border:none; background:var(--white); padding:0.3rem 0.6rem; font:inherit; font-size:0.78rem; color:var(--text-muted); cursor:pointer; }
.drp-seg-btn.active { background:var(--orange); color:#fff; }
.drp-cmp-sel { font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; }
.drp-cmp-head { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); margin:0.6rem 0 0.4rem; }
.kpi-delta { display:inline-block; margin-top:0.2rem; font-size:0.72rem; font-weight:700; padding:0.05rem 0.4rem; border-radius:999px; }
.kpi-delta.good { background:#DCFCE7; color:#15803D; }
.kpi-delta.bad { background:#FEE2E2; color:#B91C1C; }
.kpi-delta.flat { background:var(--bg-alt); color:var(--text-muted); }
.drp-actions { display:flex; gap:0.5rem; }
.drp-actions .btn { padding:0.4rem 0.9rem; }
@media (max-width:640px){ .drp-pop{ flex-direction:column; } .drp-presets{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border); } .drp-months{ flex-direction:column; } }

.ac-menu { position:fixed; z-index:1000; background:var(--white); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,32,52,0.15); max-height:280px; overflow-y:auto; }
.ac-item { padding:0.5rem 0.8rem; font-size:0.85rem; color:var(--navy); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-item:hover, .ac-item.active { background:var(--bg-alt); }
.fm-offer-toggle { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.82rem; color:var(--navy); white-space:nowrap; cursor:pointer; user-select:none; }
.fm-offer-toggle input { accent-color:var(--rust); cursor:pointer; }
.fm-modebar { display:flex; align-items:center; gap:0.6rem; background:linear-gradient(90deg, rgba(188,45,41,0.06), rgba(255,153,28,0.12)); border:1px solid rgba(255,153,28,0.5); border-left:4px solid var(--orange); border-radius:10px; padding:0.6rem 0.9rem; margin-bottom:0.6rem; font-size:0.85rem; color:var(--navy); }
.fm-modebar-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); flex:0 0 auto; box-shadow:0 0 0 3px rgba(255,153,28,0.25); }
.fm-modebar-text strong { color:var(--rust); }
.fm-cust-mode { padding:0.42rem 0.5rem; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:0.85rem; background:var(--white); }
.fm-badge { display:inline-block; min-width:1.15rem; text-align:center; font-size:0.7rem; font-weight:800; line-height:1.15rem; color:#fff; background:var(--brand-red); border-radius:999px; padding:0 0.35rem; margin-left:0.35rem; }
.fm-doc.editing .fm-pharm { position:relative; border:1px dashed transparent; border-radius:8px; padding:0.4rem; transition:border-color .12s; }
.fm-doc.editing .fm-pharm:hover { border-color:#fca5a5; background:#fef2f2; }
.fm-doc.editing .fm-prod { position:relative; border:1px solid transparent; border-radius:6px; padding:0.3rem 0.4rem; }
.fm-doc.editing .fm-prod:hover { border-color:#fecaca; background:#fff5f5; }
.fm-del-x { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none; background:#ef4444; color:#fff; font-size:0.8rem; line-height:1; cursor:pointer; display:none; z-index:3; box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.fm-doc.editing .fm-pharm:hover > .fm-del-x, .fm-doc.editing .fm-prod:hover > .fm-del-x { display:block; }
/* Edit-by-medication view (A–Z) — SINGLE-COLUMN document, matching the formulary sheet */
.fm-bymed { display:block; max-width:820px; margin:1.25rem 0 0; }
.fm-bymed .fm-card { position:relative; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0.55rem 0.25rem 0.6rem; margin:0; }
.fm-bymed .fm-card + .fm-card { border-top:1px solid #eef2f6; }
.fm-bymed .fm-prod-head { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; margin-bottom:0.15rem; }
.fm-bymed .fm-prod-name { font-weight:800; color:#16243d; font-size:0.98rem; }
.fm-bymed .fm-leader { display:flex; align-items:baseline; gap:0.4rem; padding:0.16rem 0; }
.fm-str-ph { display:inline-block; font-size:0.68rem; font-weight:700; letter-spacing:0.3px; color:#5b6b7d; background:#eef2f6; border-radius:5px; padding:0.05rem 0.4rem; margin-left:0.15rem; }
.fm-str-note { color:var(--brand-red, #bc2d29); font-size:0.75rem; font-weight:700; }
.fm-del-x.fm-del-inline { position:static; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:0.7rem; margin-left:6px; box-shadow:none; visibility:hidden; }
.fm-doc.editing .fm-leader:hover .fm-del-x.fm-del-inline { visibility:visible; }

/* Formulary Manager — SINGLE-COLUMN document view (matches the live formulary sheet) */
#fm-prod-list.fm-bymed { max-width:none; margin:0; width:100%; }
#tab-products .fm-doc { max-width:none; }
/* Keep the price column from being pushed off / clipped by long strength text */
#fm-prod-list .fm-leader, .fm-doc.editing .fm-leader { flex-wrap:wrap; }
#fm-prod-list .fm-str, .fm-doc.editing .fm-str { white-space:normal; flex:1 1 auto; min-width:0; }
#fm-prod-list .fm-dots, .fm-doc.editing .fm-dots { min-width:24px; }
#fm-prod-list .fm-money, .fm-doc.editing .fm-money { flex:0 0 auto; }
#fm-prod-list .fm-price-edit, .fm-doc.editing .fm-price-edit { width:82px; }
#fm-prod-list .fm-drag { cursor:grab; color:#b6c0cc; font-size:0.9rem; margin-right:0.15rem; user-select:none; }
#fm-prod-list .fm-srow.fm-dragging { opacity:0.45; }
#fm-prod-list .fm-srow.fm-drop-before { box-shadow:inset 0 2px 0 var(--blue,#2563eb); }
#fm-prod-list .fm-srow.fm-drop-after { box-shadow:inset 0 -2px 0 var(--blue,#2563eb); }
.fm-bymed-toolbar { display:flex; justify-content:flex-end; margin-bottom:0.75rem; }
#fm-prod-list .fm-card { position:relative; background:transparent; border:none; border-radius:0; box-shadow:none; padding:0.6rem 2.2rem 0.7rem 0.25rem; transition:background .1s; }
#fm-prod-list .fm-card + .fm-card { border-top:1px solid #eef2f6; }
#fm-prod-list .fm-card:hover { background:#fafcff; }
#fm-prod-list .fm-prod-head { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; margin-bottom:0.15rem; }
#fm-prod-list .fm-prod-name { font-weight:800; color:#16243d; font-size:0.98rem; }
#fm-prod-list .fm-srow { border-radius:6px; padding:0 0.2rem; }
#fm-prod-list .fm-srow-edited { background:#fef2f2; box-shadow:inset 3px 0 0 #ef4444; }
#fm-prod-list .fm-srow-new { background:#ecfdf5; box-shadow:inset 3px 0 0 #10b981; }
#fm-prod-list .fm-leader { display:flex; align-items:baseline; gap:0.4rem; padding:0.2rem 0; }
#fm-prod-list .fm-price-edit { width:66px; border:1px solid #cbd5e1; border-radius:5px; padding:0.12rem 0.3rem; font:inherit; font-size:0.85rem; text-align:right; }
#fm-prod-list .fm-del-x { display:none; top:8px; right:6px; }
#fm-prod-list .fm-card:hover > .fm-del-x { display:flex; align-items:center; justify-content:center; }
#fm-prod-list .fm-iconbtn { visibility:hidden; }
#fm-prod-list .fm-srow:hover .fm-iconbtn { visibility:visible; }
.fm-detail { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.5rem; margin:0.35rem 0 0.5rem 0.2rem; padding:0.6rem; background:#f8fafc; border:1px solid #e6ebf1; border-radius:8px; }
.fm-detail label { display:block; font-size:0.68rem; font-weight:700; color:var(--navy,#16243d); margin-bottom:0.15rem; text-transform:uppercase; letter-spacing:0.3px; }
.fm-detail input, .fm-detail select { width:100%; box-sizing:border-box; padding:0.3rem 0.4rem; border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-size:0.82rem; background:#fff; }
.fm-add-strength { margin:0.3rem 0 0 0.2rem; background:transparent; border:none; color:var(--blue,#2563eb); padding:0.15rem 0; font:inherit; font-size:0.78rem; font-weight:700; cursor:pointer; }
.fm-add-strength:hover { text-decoration:underline; }
.fm-cat-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:0.5rem; vertical-align:middle; }
/* View toggle (By Pharmacy / A–Z) — used in Manage + Edit Price */
.fm-sort-toggle { display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-right:auto; }
.fm-sort-btn { border:none; background:var(--white,#fff); color:var(--text-muted); font:inherit; font-size:0.78rem; font-weight:700; padding:0.35rem 0.8rem; cursor:pointer; }
.fm-sort-btn.active { background:var(--navy,#16243d); color:#fff; }
.fm-bymed-toolbar { display:flex; align-items:center; gap:0.6rem; }
/* Manager pharmacy-view sections (branded, deletable) */
#fm-prod-list .fm-pharm { position:relative; border:1px solid #e6ebf1; border-radius:12px; padding:1rem 1.25rem 1.1rem; margin-bottom:1.25rem; background:#fff; }
#fm-prod-list .fm-pharm > .fm-del-x { display:none; top:10px; right:10px; }
#fm-prod-list .fm-pharm:hover > .fm-del-x { display:flex; align-items:center; justify-content:center; }
#fm-prod-list .fm-pharm .fm-add-strength { margin-top:0.6rem; }
.fm-doc.editing .fm-price-edit { width:64px; border:1px solid #cbd5e1; border-radius:5px; padding:0.1rem 0.3rem; font:inherit; font-size:0.85rem; text-align:right; }
.fm-money { display:inline-flex; align-items:baseline; gap:1px; font-weight:700; color:#16243d; }
.fm-grid-table .fm-money { display:flex; align-items:center; gap:2px; font-weight:600; color:var(--text); }
.fm-grid-table .fm-money input { text-align:right; }
.fm-cat-wrap { position:relative; }
.fm-preset-list { display:flex; flex-direction:column; gap:0.3rem; max-height:300px; overflow-y:auto; }
.fm-preset-item { display:flex; align-items:center; gap:0.4rem; }
.fm-preset-load { flex:1; text-align:left; background:var(--bg-alt); border:1px solid var(--border); border-radius:7px; padding:0.4rem 0.6rem; font:inherit; font-size:0.85rem; font-weight:600; color:var(--text); cursor:pointer; }
.fm-preset-load:hover { border-color:var(--blue); color:var(--blue); }
.is-disabled { opacity:0.45; cursor:not-allowed; pointer-events:none; }
/* Full-page BoomRx design preview (on-screen) */
/* Preview renders each page at its true 8.5in design width (scales down on
   narrow screens) so it isn't stretched/squished. */
.fm-fancy { width:8.5in; max-width:100%; margin:0 auto; }
.fm-fancy .fm-doc-pages > section { box-shadow:0 2px 14px rgba(0,0,0,0.09); margin-bottom:22px; border-radius:4px; }
/* On-screen preview: don't clip the fixed-height cover/contact pages */
.fm-fancy .fm-doc-pages > section { height:auto !important; min-height:0 !important; overflow:visible !important; }
/* Product pages get the design's 0.5in page margin in the preview (print uses @page) */
.fm-fancy .fm-page { padding:0.5in; box-sizing:border-box; }
/* Rep footer shown once at the bottom of the preview (repeats per page in the PDF) */
.fm-fancy .fm-print-footer { width:8.5in; max-width:100%; box-sizing:border-box; padding:0 0.5in 0.5in; margin:0 auto; }
/* Neutral backdrop, no card-in-card chrome around the pages */
#fm-doc:has(.fm-fancy) { background:var(--bg-alt); border:none; padding:1.5rem; overflow-x:auto; }

/* Chip button (Contents medications + multi-tracking) — toggles one shared detail row */
.dd-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border: 1.5px solid var(--teal); border-radius: 999px;
  background: rgba(20,160,140,0.10); color: var(--teal); font-size: 0.8125rem; font-weight: 600;
  white-space: nowrap; transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.dd-btn::after { content: '▾'; font-size: 0.7rem; transition: transform 0.15s; }
.dd-btn:hover { background: rgba(20,160,140,0.22); }
.dd-btn.open { background: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(20,160,140,0.35); }
.dd-btn.open::after { transform: rotate(180deg); }

/* One shared, full-width detail row for the order */
.order-detail-row > td { background: var(--bg-alt); padding: 0.5rem 1rem 0.85rem; }
.dd-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.5rem 1.5rem; }
.med-detail { padding: 0.5rem 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.dd-panel .med-line { white-space: normal; max-width: none; font-weight: 600; }
.med-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }
.med-sub .med-rx { font-family: ui-monospace, monospace; }
.sidebar-nav { padding: 0.75rem 0; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.15s; border: none; background: none; width: 100%; text-align: left; }
.nav-item:hover, .nav-item.active { color: var(--white); background: rgba(255,255,255,0.1); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--orange); }
/* Expandable Reporting group (parent + Queries sub-item) */
.nav-parent .nav-caret { margin-left: auto; font-size: 0.68rem; opacity: 0.55; transition: transform 0.15s; }
.nav-group.open .nav-parent .nav-caret { transform: rotate(90deg); }
.nav-sub { display: none; }
.nav-group.open .nav-sub { display: block; }
.nav-sub .nav-item { padding-left: 2.7rem; font-size: 0.83rem; color: rgba(255,255,255,0.6); }
.app-layout.nav-collapsed .nav-sub .nav-item { padding-left: 0; }
/* Collapsed: keep the Queries sub-icon and the caret visible, but pin the caret absolutely to the
   right edge so its margin-left:auto no longer shoves the parent icon off-center. */
.app-layout.nav-collapsed .nav-parent { position: relative; }
.app-layout.nav-collapsed .nav-parent .nav-caret { position: absolute; right: 7px; top: 50%; margin: 0; font-size: 0.5rem; transform: translateY(-50%); }
.app-layout.nav-collapsed .nav-group.open .nav-parent .nav-caret { transform: translateY(-50%) rotate(90deg); }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); }

/* Main content */
.main-content { margin-left: var(--sidebar-width); flex: 1; padding: 1.5rem 2rem; }

/* Page header */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.page-header p { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.25rem; }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--white); border-radius: 10px; padding: 1.25rem 1.5rem; border: 1px solid var(--border); }
.kpi-num { font-size: 2rem; font-weight: 700; color: var(--navy); line-height: 1; }
.kpi-label { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.375rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-received .kpi-num { color: var(--blue); }
.kpi-shipped .kpi-num { color: var(--teal); }
.kpi-delivered .kpi-num { color: #15803D; }
.kpi-cancelled .kpi-num { color: var(--gray); }

/* Filters bar */
.filters-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.filter-pills { display: flex; gap: 0.375rem; }
.pill { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--white); font-size: 0.8125rem; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: all 0.15s; }
.pill:hover { border-color: var(--orange); color: var(--rust); }
.pill.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pill-attention { border-color: #fdba74; color: #c2410c; }
.pill-attention:hover { border-color: #ea580c; color: #ea580c; }
.pill-attention.active { background: #ea580c; border-color: #ea580c; color: #fff; }
.search-input { flex: 1; min-width: 200px; padding: 0.5rem 0.875rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.875rem; }
.search-input:focus { outline: none; border-color: var(--blue); }
.rep-filter { padding: 0.5rem 0.875rem; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.875rem; background: var(--white); }

/* Table card */
.table-card { background: var(--white); border-radius: 10px; border: 1px solid var(--border); overflow: hidden; }
.table-card-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.table-card-header h3 { font-size: 0.9375rem; font-weight: 600; }
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 0.875rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
.row-cancelled td { opacity: 0.5; }
.sub-text { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Badges */
.badge { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: capitalize; }
.badge-shipped { background: #CCFBF1; color: #0F766E; }
.badge-delivered { background: #DCFCE7; color: #15803D; }
.badge-received { background: #DBEAFE; color: #1D4ED8; }
.badge-cancelled { background: #F3F4F6; color: #4B5563; }
.badge-unknown { background: #F3F4F6; color: #4B5563; }

/* Tracking link */
td a { color: var(--blue); text-decoration: none; }
td a:hover { text-decoration: underline; }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn { padding: 0.75rem 1.25rem; border: none; background: none; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Import section */
.import-section { background: var(--white); border-radius: 10px; border: 1px solid var(--border); padding: 1.5rem; margin-top: 1.5rem; }
.import-section h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.file-drop { border: 2px dashed var(--border); border-radius: 8px; padding: 2.5rem; text-align: center; color: var(--text-muted); cursor: pointer; transition: border-color 0.15s; }
.file-drop:hover { border-color: var(--blue); }
.import-preview { margin-top: 1.25rem; overflow-x: auto; }
.import-actions { display: flex; gap: 0.75rem; margin-top: 1rem; align-items: center; }

/* Banner */
.banner { background: #FEF3C7; border: 1px solid #F59E0B; border-radius: 8px; padding: 0.875rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.75rem; }
.banner-icon { font-size: 1.125rem; flex-shrink: 0; }

/* Users list */
.users-section { display: grid; gap: 1rem; }
.user-card { background: var(--white); border-radius: 8px; border: 1px solid var(--border); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.user-card-info strong { font-size: 0.9375rem; }
.user-card-info p { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.125rem; }
.user-card-actions { display: flex; gap: 0.5rem; }
.badge-inactive { background: #FEE2E2; color: #DC2626; }
.badge-active { background: #DCFCE7; color: #16A34A; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--white); border-radius: 12px; padding: 1.75rem; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.25rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* Inline loading spinner */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Inactive user card */
.user-card.inactive { opacity: 0.5; }
.user-card.inactive .user-card-actions .btn:not(.btn-reactivate) { pointer-events: none; opacity: 0.4; }
/* Nav divider */
.nav-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0.5rem 1.25rem; }
/* Nav icon alignment */
.nav-item svg { flex-shrink: 0; }
/* drag-over for import */
.drag-over { border-color: var(--blue) !important; background: #EFF6FF; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar { width: 100%; height: auto; position: relative; }
  .main-content { margin-left: 0; padding: 1rem; }
  .app-layout { flex-direction: column; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Collapsible sidebar ────────────────────────────────────── */
.sidebar { transition: width 0.18s ease; }
.main-content { transition: margin-left 0.18s ease; }
.nav-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  margin: 0.5rem 0.6rem 0 auto; width: 32px; height: 32px;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8);
}
.nav-collapse-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.nav-collapse-btn svg { transition: transform 0.18s ease; }

.app-layout.nav-collapsed .sidebar { width: 64px; overflow: visible; }
.app-layout.nav-collapsed .sidebar-nav { overflow: visible; }
/* Instant, high-visibility label bubble when hovering a collapsed nav icon (replaces the slow
   native title tooltip). Dark bubble + white text + arrow, appears immediately to the right. */
.app-layout.nav-collapsed .nav-item { position: relative; }
.app-layout.nav-collapsed .nav-item[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #0f2231; color: #fff; padding: 6px 11px; border-radius: 8px; font-size: 0.8rem; font-weight: 600;
  white-space: nowrap; z-index: 300; box-shadow: 0 8px 22px rgba(0,0,0,0.35); pointer-events: none;
}
.app-layout.nav-collapsed .nav-item[data-tip]:hover::before {
  content: ''; position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-right-color: #0f2231; z-index: 300; pointer-events: none;
}
:root[data-theme="dark"] .app-layout.nav-collapsed .nav-item[data-tip]:hover::after { background: #24384b; box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
:root[data-theme="dark"] .app-layout.nav-collapsed .nav-item[data-tip]:hover::before { border-right-color: #24384b; }
.app-layout.nav-collapsed .main-content { margin-left: 64px; }
.app-layout.nav-collapsed .nav-collapse-btn { margin: 0.5rem auto 0; }
.app-layout.nav-collapsed .nav-collapse-btn svg { transform: rotate(180deg); }
.app-layout.nav-collapsed .sidebar-brand { padding: 0.85rem 0; text-align: center; }
.app-layout.nav-collapsed .sidebar-brand h2 { font-size: 0; }
.app-layout.nav-collapsed .sidebar-brand h2::after { content: attr(data-office); font-size: 0.85rem; }
.app-layout.nav-collapsed .sidebar-brand p,
.app-layout.nav-collapsed .sidebar-user { display: none; }
.app-layout.nav-collapsed .nav-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; font-size: 0; }
.app-layout.nav-collapsed .nav-divider { margin: 0.5rem 0.75rem; }
.app-layout.nav-collapsed .sidebar-footer { padding: 1rem 0.5rem; }
.app-layout.nav-collapsed .sidebar-footer .btn { font-size: 0; padding-left: 0; padding-right: 0; }
.app-layout.nav-collapsed .sidebar-footer .btn::after { content: '⎋'; font-size: 1.15rem; }
@media (max-width: 768px) {
  .app-layout.nav-collapsed .sidebar { width: 100%; }
  .app-layout.nav-collapsed .main-content { margin-left: 0; }
}

/* Update-available banner (shown when a newer deploy is detected) */
.app-update-banner {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9999;
  display:flex; align-items:center; gap:0.75rem;
  background:var(--navy,#16243d); color:#fff; padding:0.65rem 0.85rem 0.65rem 1.1rem;
  border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.28); font-size:0.88rem; max-width:92vw;
  animation:app-update-in 0.25s ease-out;
}
@keyframes app-update-in { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }
.app-update-banner button#app-update-refresh {
  background:linear-gradient(90deg,#BC2D29,#FF991C); color:#fff; border:none; border-radius:50%;
  width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;
}
.app-update-banner button#app-update-refresh:hover { opacity:0.92; }
.app-update-banner button#app-update-refresh svg { display:block; }
.app-update-banner button#app-update-dismiss {
  background:transparent; border:none; color:rgba(255,255,255,0.7); font-size:0.9rem; cursor:pointer; padding:0 0.2rem;
}
.app-update-banner button#app-update-dismiss:hover { color:#fff; }