/* ============================================================
   COMMAND CENTER — MAISON THEME (complete, purpose-built)
   Dark espresso + struck-gold premium admin design system.
   Loaded LAST. Keeps the existing functional DOM/ids/JS; owns the
   entire visual layer (chrome + component primitives) so every one
   of the 18 sections inherits one cohesive luxe look — no reactive
   recoloring, no blue/white leftovers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Sora:wght@200;300;400;500;600&display=swap');

/* ───────────────────────── 1. TOKENS ───────────────────────── */
:root {
  --m-bg:#0A0805; --m-bg2:#0F0C08; --m-bg3:#13100B; --m-bg4:#1A150E; --m-bg5:#221B11;
  --m-text:#EEE9DF; --m-text2:#C8BFB0; --m-muted:#897C6B; --m-muted2:#A89B89;
  --m-gold:#C4943A; --m-gold2:#E2B76A; --m-gold3:#F2D79A;
  --m-sage:#6B8B78; --m-sage2:#8FAF9A; --m-blush:#B8836A;
  --m-line:rgba(196,148,58,.18); --m-line2:rgba(196,148,58,.36); --m-line3:rgba(196,148,58,.55);
  --m-glass:linear-gradient(160deg,#13100B,#0F0C08);
  --m-glass2:linear-gradient(160deg,#181309,#110E09);
  --m-goldgrad:linear-gradient(135deg,#C4943A,#F2D79A 55%,#E2B76A);
  --m-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 48px rgba(0,0,0,.42);
  --m-shadow-rise:0 1px 2px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.7);
  --m-play:'Playfair Display',Georgia,serif; --m-sans:'Sora',system-ui,sans-serif;

  /* map every legacy namespace → maison (!important = source-order safe) */
  --bg:var(--m-bg)!important; --bg2:var(--m-bg2)!important; --bg3:var(--m-bg3)!important;
  --adp-bg-1:var(--m-bg)!important; --adp-bg-2:var(--m-bg2)!important; --adp-card:var(--m-bg3)!important;
  --panel:rgba(255,255,255,.04)!important;
  --surface-0:rgba(255,255,255,.03)!important; --surface-1:rgba(255,255,255,.04)!important; --surface-2:rgba(255,255,255,.05)!important;
  --cat-glass:rgba(255,255,255,.04)!important; --cat-glass-edge:var(--m-line2)!important;
  --cc-glass:rgba(255,255,255,.04)!important; --cc-glass-edge:var(--m-line2)!important;
  --glass-white:rgba(255,255,255,.04)!important; --glass-border:var(--m-line2)!important; --glass-edge:var(--m-line2)!important;
  --gold-glass:rgba(196,148,58,.08)!important;
  --text:var(--m-text)!important; --text-dim:var(--m-text2)!important; --text-muted:var(--m-muted2)!important;
  --adp-text:var(--m-text)!important; --adp-dim:var(--m-text2)!important; --adp-mut:var(--m-muted2)!important;
  --cat-text:var(--m-text)!important;
  --amber:var(--m-gold)!important; --amber-lt:var(--m-gold2)!important; --amber-dk:var(--m-gold)!important;
  --amber-1:var(--m-gold2)!important; --amber-2:var(--m-gold)!important;
  --blue:var(--m-gold)!important; --teal:var(--m-gold)!important; --teal-dim:rgba(196,148,58,.45)!important; --emerald:var(--m-gold)!important;
  --cyan:var(--m-gold2)!important; --cyan-light:var(--m-gold3)!important; --indigo:var(--m-gold2)!important;
  --adp-blue:var(--m-gold)!important; --adp-blue-deep:var(--m-gold)!important; --adp-cyan:var(--m-gold2)!important;
  --adp-blue-tint:rgba(196,148,58,.08)!important; --adp-blue-rule:var(--m-line2)!important;
  --accent-1:var(--m-gold2)!important; --accent-2:var(--m-gold)!important; --accent-3:var(--m-gold)!important; --accent-4:var(--m-gold2)!important;
  --cat-blue-1:var(--m-gold)!important; --cat-blue-2:var(--m-gold2)!important;
  --neon-cyan:rgba(196,148,58,.55)!important; --neon-teal:rgba(226,183,106,.55)!important;
  --grad-brand:var(--m-goldgrad)!important;
  --grad-brand-soft:linear-gradient(135deg,rgba(242,215,154,.16),rgba(196,148,58,.06))!important;
  --md-grad-brand:var(--m-goldgrad)!important;
  --divider:var(--m-line)!important; --hud-line:rgba(196,148,58,.07)!important;
  --brand-edge:var(--m-line2)!important; --gold-border:var(--m-line2)!important; --adp-rule:var(--m-line)!important;
  --coral:var(--m-blush)!important; --cat-red:var(--m-blush)!important; --red-600:var(--m-blush)!important; --adp-red:var(--m-blush)!important;
  --warn:var(--m-gold2)!important; --adp-amber:var(--m-gold2)!important; --cat-warm:var(--m-gold2)!important;
  --adp-green:var(--m-sage2)!important; --cat-green:var(--m-sage2)!important;
  --ocean-600:var(--m-gold)!important; --ocean-700:var(--m-gold)!important; --ocean-800:var(--m-gold)!important;
  --depth-shadow:var(--m-shadow)!important; --adp-shadow-lift:var(--m-shadow)!important; --adp-shadow-soft:var(--m-shadow)!important;
  --glass-shadow-1:0 8px 32px rgba(0,0,0,.5)!important; --glass-shadow-2:0 16px 64px rgba(0,0,0,.5)!important;
  --cc-color-blue:var(--m-gold)!important; --cc-color-blue-deep:var(--m-gold)!important;
  --cc-color-blue-light:var(--m-gold2)!important; --cc-color-cyan:var(--m-gold2)!important; --cc-color-cyan-light:var(--m-gold3)!important;
  --cc-text:var(--m-text)!important; --cc-text-dim:var(--m-text2)!important; --cc-text-muted:var(--m-muted2)!important; --cc-text-faint:var(--m-muted)!important;
  --cc-surface-card:var(--m-bg3)!important; --cc-surface-card-soft:var(--m-bg2)!important; --cc-surface-elevated:var(--m-bg3)!important;
  --cc-rule:var(--m-line)!important; --cc-rule-strong:var(--m-line2)!important;
  --cc-color-green:var(--m-sage2)!important; --cc-color-amber:var(--m-gold2)!important; --cc-color-red:var(--m-blush)!important;
  --cc-font-display:var(--m-play)!important; --cc-font-ui:var(--m-sans)!important; --cc-font-eyebrow:var(--m-sans)!important;
  --adp-font-display:var(--m-play)!important; --adp-font-ui:var(--m-sans)!important; --adp-font-eyebrow:var(--m-sans)!important;
}

/* ───────────────────────── 2. CANVAS ───────────────────────── */
html, body {
  background:
    radial-gradient(80% 50% at 50% -10%, rgba(196,148,58,.10), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(143,175,154,.05), transparent 70%),
    linear-gradient(160deg, var(--m-bg) 0%, var(--m-bg2) 55%, var(--m-bg3) 100%) !important;
  /* Solid dark base UNDER the gradients so the layout's top gap (and any
     uncovered edge) is espresso, not the light browser canvas — kills the gray
     bar that showed above the sidebar/crest, without clipping the crest. */
  background-color: var(--m-bg) !important;
  color: var(--m-text) !important; font-family: var(--m-sans) !important;
}
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4 { font-family: var(--m-play); }
::selection { background: rgba(196,148,58,.3); color: var(--m-text); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background: var(--m-bg); }
::-webkit-scrollbar-thumb { background: rgba(196,148,58,.22); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(196,148,58,.4); }

/* ───────────────────────── 3. SIDEBAR ──────────────────────── */
#appLayout .sidebar {
  /* Warm espresso to match the body wallpaper instead of cold near-black. */
  background: linear-gradient(180deg, var(--m-bg4), var(--m-bg3) 60%, var(--m-bg2)) !important;
  border-right: 1px solid var(--m-line) !important;
  /* Kill the light top edge (2px white border + inset white shadow) that read
     as a gray bar above the crest. Keep only a soft side drop-shadow. */
  border-top: 0 !important;
  box-shadow: 6px 0 36px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Centered crest header — gives the detailed crest room to read instead of a
   tiny illegible corner mark. */
#appLayout .sidebar-logo {
  border-bottom: 1px solid var(--m-line) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  gap: 9px !important; padding: 18px 14px 15px !important;
}
#appLayout .sidebar-brand-row {
  flex-direction: column !important; align-items: center !important; gap: 8px !important;
}
#appLayout .sidebar-brand-text { text-align: center !important; }
#appLayout .sidebar-mono--crest { width: 76px !important; height: 76px !important; }
#appLayout .sidebar-mono {
  background: rgba(196,148,58,.10) !important; border:1px solid var(--m-line2) !important;
  border-radius: 11px !important; padding: 5px !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* The crest is a detailed mark — let it stand alone, no boxed gold tile. */
#appLayout .sidebar-mono--crest {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
#appLayout .sidebar-eyebrow {
  font-family: var(--m-sans) !important; font-weight:600 !important; font-size:9.5px !important;
  letter-spacing:.22em !important; text-transform:uppercase !important; color: var(--m-gold2) !important;
}
#appLayout .sidebar-name { font-family: var(--m-play) !important; font-weight:500 !important; color: var(--m-text) !important; letter-spacing:.02em !important; }
#appLayout .sidebar-role { color: var(--m-muted2) !important; font-size:11px !important; letter-spacing:.04em !important; }
#appLayout .nav-section-label {
  font-family: var(--m-sans) !important; font-weight:600 !important; font-size:9px !important;
  letter-spacing:.24em !important; text-transform:uppercase !important; color: var(--m-muted) !important;
  margin-top:16px !important;
}
#appLayout .nav-item {
  font-family: var(--m-sans) !important; font-weight:400 !important; color: var(--m-text2) !important;
  border-radius: 11px !important; border:1px solid transparent !important; transition: all .2s ease !important;
  background: transparent !important; letter-spacing:.01em !important;
}
#appLayout .nav-item svg { color: var(--m-muted2) !important; stroke: var(--m-muted2) !important; opacity:.9; }
#appLayout .nav-item:hover {
  background: rgba(196,148,58,.06) !important; color: var(--m-gold3) !important; border-color: var(--m-line) !important;
}
#appLayout .nav-item:hover svg { color: var(--m-gold2) !important; stroke: var(--m-gold2) !important; }
#appLayout .nav-item.active {
  background: linear-gradient(135deg, rgba(196,148,58,.16), rgba(242,215,154,.05)) !important;
  color: var(--m-gold3) !important; border-color: var(--m-line2) !important;
  box-shadow: inset 0 1px 0 rgba(255,246,214,.08), 0 4px 14px rgba(0,0,0,.3) !important;
}
#appLayout .nav-item.active svg { color: var(--m-gold3) !important; stroke: var(--m-gold3) !important; opacity:1; }
#appLayout .nav-badge-pill {
  background: var(--m-goldgrad) !important; color:#2A1808 !important; border:0 !important;
  font-weight:700 !important; font-family: var(--m-sans) !important;
}
#appLayout .sidebar-footer { border-top:1px solid var(--m-line) !important; background: linear-gradient(180deg, transparent, rgba(0,0,0,.2)) !important; }
/* Footer brand — crest + wordmark echoing the top header. */
#appLayout .sidebar-foot-brand {
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:5px !important; padding:12px 0 10px !important; opacity:.85 !important;
  border-top:1px solid var(--m-line) !important; margin-top:4px !important;
}
#appLayout .sidebar-foot-crest { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
#appLayout .sidebar-foot-word {
  font-family: var(--m-sans) !important; font-weight:600 !important; font-size:9px !important;
  letter-spacing:.22em !important; text-transform:uppercase !important; color: var(--m-gold2) !important;
}
#appLayout .sidebar-avatar {
  background: var(--m-goldgrad) !important; color:#2A1808 !important; border:1px solid var(--m-line2) !important;
  font-weight:700 !important; font-family: var(--m-play) !important;
}
#appLayout .sidebar-user-name { color: var(--m-text) !important; }
#appLayout .sidebar-user-role { color: var(--m-gold2) !important; font-size:10px !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
#appLayout .cc-sb-toggle, #appLayout .cc-visual-chrome-lbl span { color: var(--m-text2) !important; }
#appLayout .cc-visual-chrome-hint { color: var(--m-muted) !important; }

/* ───────────────────────── 4. HERO ─────────────────────────── */
#appLayout .cc-hero {
  background:
    radial-gradient(800px 420px at 88% -30%, rgba(196,148,58,.16), transparent 60%),
    linear-gradient(150deg, var(--m-bg3), var(--m-bg2)) !important;
  border:1px solid var(--m-line) !important; border-radius:22px !important;
  box-shadow: var(--m-shadow-rise) !important; overflow:hidden; position:relative;
}
#appLayout .cc-hero-eyebrow {
  font-family: var(--m-sans) !important; font-weight:600 !important; font-size:11px !important;
  letter-spacing:.26em !important; text-transform:uppercase !important; color: var(--m-gold2) !important;
}
#appLayout .cc-hero-title, #appLayout .cc-hero-title-line { font-family: var(--m-play) !important; color: var(--m-text) !important; font-weight:400 !important; }
#appLayout .cc-hero-accent {
  font-family: var(--m-play) !important; font-style:italic !important; color: var(--m-gold2) !important !important;
  -webkit-text-fill-color: var(--m-gold2) !important; background:none !important; border:0 !important;
}
#appLayout .cc-hero-tagline { color: var(--m-text2) !important; }
#appLayout .admin-hero-logo {
  content: url('../logo-kit/crest/crest-transparent-1024.png') !important;
  opacity:.92 !important; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)) !important; background:none !important;
}
#appLayout .cc-hero-bottom-line { background: linear-gradient(to right, var(--m-line2), transparent) !important; }
#appLayout .cc-hero-return, #appLayout .cc-hero-return * { color: var(--m-gold2) !important; }

/* ──────────────────── 5. COMPONENT PRIMITIVES ──────────────── */

/* cards / panels — anything with a white-ish surface becomes dark glass */
#appLayout .card, #appLayout .panel, #appLayout .cc-card, #appLayout .glass-card,
#appLayout .admin-daily-digest, #appLayout .overview-accent-card, #appLayout .cg-card,
#appLayout .action-tile, #appLayout .add-client-card, #appLayout .delete-client-card,
#appLayout .consult-filter-row, #appLayout .consult-mgmt, #appLayout .consult-card,
#appLayout .review-row, #appLayout .inv-toolbar, #appLayout .inv-order-panel,
#appLayout .inv-vendors-wrap, #appLayout .inv-po-wrap, #appLayout .table-wrap,
#appLayout .cc-clinical-frame-wrap, #appLayout .my-refills, #appLayout .feature-card,
#appLayout .tool-card, #appLayout .exclusive-item, #appLayout .rc-blog-item,
#appLayout .cat-card, #appLayout .stat-card, #appLayout .data-card {
  background: var(--m-glass) !important; border:1px solid var(--m-line) !important;
  color: var(--m-text) !important; box-shadow: var(--m-shadow) !important;
}
#appLayout .card:hover, #appLayout .panel:hover, #appLayout .action-tile:hover,
#appLayout .cg-card:hover, #appLayout .stat-card:hover {
  border-color: var(--m-line2) !important; box-shadow: var(--m-shadow-rise) !important;
}

/* section headers — Playfair title + gold eyebrow + hairline rule */
#appLayout .section-head, #appLayout .cc-section-head, #appLayout .overview-accent-head,
#appLayout .inv-section-head, #appLayout .panel-head {
  /* no shaded band behind the header — clean like the dashboard. */
  background: transparent !important;
  border-bottom: 0 !important; color: var(--m-text) !important;
}
#appLayout h1, #appLayout h2, #appLayout h3 { color: var(--m-text) !important; }
#appLayout .section-title, #appLayout .cc-section-title, #appLayout .panel-title { font-family: var(--m-play) !important; color: var(--m-text) !important; }
#appLayout .section-eyebrow, #appLayout .eyebrow, #appLayout .cc-eyebrow {
  font-family: var(--m-sans) !important; color: var(--m-gold2) !important; letter-spacing:.2em !important; text-transform:uppercase !important;
}

/* numbers / metric values → gold gradient text */
#appLayout .stat-value, #appLayout .metric-value, #appLayout .cg-rcount, #appLayout .kpi-value, #appLayout .big-num {
  font-family: var(--m-play) !important;
  background: var(--m-goldgrad) !important; -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── BUTTONS — struck gold primary (real gold plate, like homepage) ── */
#appLayout .btn-primary, #appLayout .btn-primary--sm, #appLayout .cta-primary,
#appLayout .action-invoice-submit, #appLayout .records-add-btn, #appLayout .overview-start-chat-btn,
#appLayout .cat-btn.primary, #appLayout .cc-ob-btn-primary, #appLayout .gbtn,
#appLayout .send-login-link, #appLayout .cc-auth-submit, #appLayout .ch-hours-save,
#appLayout .inv-m-btn-gold,
#appLayout button.is-primary, #appLayout .primary-btn {
  background: #C9982E url('../logo-kit/crest/gold-plate.webp') center/cover no-repeat !important;
  color:#2A1808 !important; border:1px solid rgba(120,84,28,.65) !important; border-radius:11px !important;
  font-family: var(--m-sans) !important; font-weight:600 !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  text-shadow:0 1px 0 rgba(255,246,214,.5) !important;
  box-shadow: inset 0 2px 1px rgba(255,248,228,.7), inset 0 -3px 8px rgba(86,54,12,.45), 0 8px 22px rgba(0,0,0,.45), 0 3px 14px rgba(196,148,58,.35) !important;
}
#appLayout .btn-primary:hover, #appLayout .cta-primary:hover, #appLayout .gbtn:hover,
#appLayout .records-add-btn:hover, #appLayout .action-invoice-submit:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; }
/* inv-m-btn-gold lives in modals OUTSIDE #appLayout (e.g. New Conversation),
   so it needs an unscoped rule to override premium.css's flat-gold !important.
   Match the struck gold-plate so it's never that flat bright gold again. */
.inv-m-btn-gold, .inv-m-btn-gold--sm {
  background: #C9982E url('../logo-kit/crest/gold-plate.webp') center/cover no-repeat !important;
  color:#2A1808 !important; border:1px solid rgba(120,84,28,.65) !important;
  text-shadow:0 1px 0 rgba(255,246,214,.5) !important;
  box-shadow: inset 0 2px 1px rgba(255,248,228,.7), inset 0 -3px 8px rgba(86,54,12,.45), 0 8px 22px rgba(0,0,0,.45) !important;
}
.inv-m-btn-gold:hover:not(:disabled) { filter:brightness(1.06) !important; transform:translateY(-1px) !important; }

/* ghost / secondary buttons → dark glass + gold hairline */
#appLayout .btn-ghost, #appLayout .btn-secondary, #appLayout .cc-file-label,
#appLayout .add-client-cancel, #appLayout .add-client-close, #appLayout .cat-tab,
#appLayout .inv-subtab, #appLayout .consult-filter-pill, #appLayout .ghost-btn,
#appLayout .cc-sb-toggle, #appLayout .pill-btn {
  background: rgba(255,255,255,.035) !important; color: var(--m-text2) !important;
  border:1px solid var(--m-line) !important; border-radius:11px !important; font-family: var(--m-sans) !important;
}
#appLayout .btn-ghost:hover, #appLayout .btn-secondary:hover, #appLayout .cat-tab:hover, #appLayout .inv-subtab:hover {
  border-color: var(--m-line2) !important; color: var(--m-gold3) !important;
}
/* active tabs/subtabs/filter pills → struck gold */
#appLayout .cat-tab.active, #appLayout .inv-subtab.is-active, #appLayout .consult-filter-pill.is-active,
#appLayout .tab.active, #appLayout .subtab.active {
  background: var(--m-goldgrad) !important; color:#2A1808 !important; border-color: var(--m-line2) !important;
  font-weight:600 !important; text-shadow:0 1px 0 rgba(255,246,214,.4) !important;
}

/* pills / status / tags */
#appLayout .tag-pill, #appLayout .pill, #appLayout .status-pill, #appLayout .badge {
  font-family: var(--m-sans) !important; font-weight:600 !important; letter-spacing:.1em !important;
  border-radius:50px !important; border:1px solid var(--m-line) !important;
}
#appLayout .tag-pill.teal, #appLayout .pill-info, #appLayout .status-active {
  background: rgba(196,148,58,.10) !important; color: var(--m-gold3) !important; border-color: var(--m-line2) !important;
}
#appLayout .pill-ok, #appLayout .status-paid, #appLayout .status-shipped, #appLayout .badge-success,
#appLayout .tag-pill.green, #appLayout .digest-chip.ok {
  background: rgba(143,175,154,.10) !important; color: var(--m-sage2) !important; border-color: rgba(143,175,154,.32) !important;
}
#appLayout .pill-warn, #appLayout .status-pending, #appLayout .badge-warn, #appLayout .tag-pill.warn, #appLayout .digest-chip.warn {
  background: rgba(196,148,58,.10) !important; color: var(--m-gold3) !important; border-color: var(--m-line2) !important;
}
#appLayout .pill-danger, #appLayout .status-overdue, #appLayout .badge-danger, #appLayout .tag-pill.red {
  background: rgba(184,131,106,.10) !important; color: var(--m-blush) !important; border-color: rgba(184,131,106,.32) !important;
}

/* tables — dark, gold uppercase headers, subtle row rules */
#appLayout table { color: var(--m-text) !important; border-color: var(--m-line) !important; }
#appLayout thead th, #appLayout .table-header, #appLayout .refill-table-header,
#appLayout .inv-price-grid-header, #appLayout .members-table-header, #appLayout .inv-sheet-group-cell {
  background: linear-gradient(180deg, rgba(196,148,58,.10), rgba(196,148,58,.03)) !important;
  color: var(--m-gold2) !important; font-family: var(--m-sans) !important; font-weight:600 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important; border-bottom:1px solid var(--m-line2) !important;
}
#appLayout tbody td { border-bottom:1px solid var(--m-line) !important; color: var(--m-text2) !important; }
#appLayout tbody tr:hover { background: rgba(196,148,58,.04) !important; }

/* forms — dark inputs, gold focus */
#appLayout input, #appLayout textarea, #appLayout select,
#appLayout .consult-picker-select, #appLayout .inv-input, #appLayout .form-control {
  background: rgba(255,255,255,.035) !important; color: var(--m-text) !important;
  border:1px solid var(--m-line) !important; border-radius:10px !important; font-family: var(--m-sans) !important;
}
#appLayout input::placeholder, #appLayout textarea::placeholder { color: var(--m-muted) !important; }
#appLayout input:focus, #appLayout textarea:focus, #appLayout select:focus {
  outline:none !important; border-color: var(--m-gold2) !important; box-shadow:0 0 0 3px rgba(196,148,58,.13) !important;
}
#appLayout label, #appLayout .form-label { color: var(--m-text2) !important; }

/* modals / overlays */
.cc-auth-overlay, .nav-drawer-backdrop, .cc-modal-backdrop, .modal-backdrop { background: rgba(8,6,4,.7) !important; }
.cc-auth-modal, .cc-auth-card, .cc-modal, .modal, #memberOnboardingCard {
  background: var(--m-glass2) !important; border:1px solid var(--m-line2) !important; color: var(--m-text) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
.cc-auth-modal input, .cc-modal input { background: rgba(255,255,255,.04) !important; color: var(--m-text) !important; }

/* ──────────────── 6. SECTION-SPECIFIC ACCENTS ──────────────── */
/* glance / action-tile / process-pulse icons → uniform gold */
#appLayout .cg-qbtn, #appLayout .cg-send, #appLayout .action-tile-icon,
#appLayout .action-tile-icon--sched, #appLayout .action-tile-icon--intake,
#appLayout .action-tile-icon--invoice, #appLayout .msg-center-pane-head-avatar,
#appLayout .feature-icon, #appLayout .tool-icon {
  background: var(--m-goldgrad) !important; color:#2A1808 !important;
}
/* Glance quick-buttons: bolder label + bigger, higher-contrast emoji. The
   dark text sits on gold; the icon halo keeps colored emoji legible. */
#appLayout .cg-qbtn { font-weight: 800 !important; letter-spacing:.2px !important; }
#appLayout .cg-qbtn .cg-qico {
  font-size: 1.3em; line-height: 1; margin-right: 4px;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.4)) drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
#appLayout .admin-daily-digest-eyebrow, #appLayout .msg-center-pane-head-btn,
#appLayout .admin-inline-chat-expand { color: var(--m-gold2) !important; border-color: var(--m-line2) !important; }
#appLayout .admin-inline-chat-expand { background: rgba(196,148,58,.08) !important; color: var(--m-gold3) !important; }
#appLayout .overview-accent-scrim { background: linear-gradient(135deg, rgba(196,148,58,.16), rgba(242,215,154,.06)) !important; }
#appLayout .msg-center-rail-foot, #appLayout .action-tile-empty, #appLayout .action-tile-foot { border-color: var(--m-line) !important; }

/* return-to-command bar */
.cc-hero-return-bar, .admin-return-bar { background: rgba(12,9,6,.7) !important; border-color: var(--m-line) !important; }

/* silk-glass background blobs (blue/cyan) → warm */
.cc-silk .blob { filter: hue-rotate(12deg) saturate(.45) !important; opacity:.45 !important; }
.cc-silk .b1 { background: radial-gradient(circle, rgba(196,148,58,.22), transparent 70%) !important; }
.cc-silk .b2 { background: radial-gradient(circle, rgba(143,175,154,.13), transparent 70%) !important; }
.cc-silk .b3 { background: radial-gradient(circle, rgba(226,183,106,.16), transparent 70%) !important; }
.cc-silk .b4 { background: radial-gradient(circle, rgba(184,131,106,.11), transparent 70%) !important; }
.cc-silk .b5 { background: radial-gradient(circle, rgba(196,148,58,.12), transparent 70%) !important; }
.cc-silk .b6 { background: radial-gradient(circle, rgba(242,215,154,.10), transparent 70%) !important; }

/* ──────────────── 7. LEGACY BLUE KILL-SWEEP ───────────────── */
/* exact high-specificity legacy !important rules */
#section-invoices .inv-pipeline-toolbar .btn-primary,
#appLayout .cc-orders-toolbar .btn-primary, #appLayout .refill-toolbar .btn-primary,
#appLayout .inv-toolbar .btn-primary, #appLayout .cc-orders-panel-head .btn-primary,
#appLayout .cc-orders-panel-head .btn-primary--sm {
  background: var(--m-goldgrad) !important;
  color:#2A1808 !important; border:1px solid var(--m-line2) !important;
  box-shadow: none !important; text-shadow: none !important;
}
#section-invoices .cc-hero-title .cc-hero-accent { color: var(--m-gold2) !important; -webkit-text-fill-color: var(--m-gold2) !important; }

/* inline-styled blue buttons (external !important beats inline non-important) */
[style*="2A3FA8"], [style*="1E2D7A"], [style*="2EB6E0"], [style*="6078EA"] {
  background: var(--m-goldgrad) !important; color:#2A1808 !important; border-color: var(--m-line2) !important;
  text-shadow:0 1px 0 rgba(255,246,214,.4) !important;
}
[style*="color:#fff"][style*="2A3FA8"], [style*="color:#FFFFFF"][style*="2A3FA8"] { color:#2A1808 !important; }

/* section-scoped legacy holdouts (match exact specificity, load later → win) */
#appLayout #section-invoices .tag-pill, #section-invoices .tag-pill.teal {
  background: rgba(196,148,58,.10) !important; color: var(--m-gold3) !important; border:1px solid var(--m-line2) !important;
}
#appLayout .inv-pipeline-col, #section-invoices .inv-pipeline-col {
  background: var(--m-glass) !important; border:1px solid var(--m-line) !important; color: var(--m-text) !important;
}
#section-invoices .inv-pipeline-toolbar .btn-ghost, #appLayout .inv-pipeline-toolbar .btn-ghost {
  background: rgba(255,255,255,.035) !important; color: var(--m-text2) !important; border:1px solid var(--m-line) !important;
}
/* kanban / pipeline columns across sections (legacy 165deg white gradient) */
#appLayout [class*="pipeline-col"], #appLayout [class*="-column"], #appLayout [class*="kanban"] {
  background: var(--m-glass) !important; border-color: var(--m-line) !important;
}
/* remaining section panels (inventory sheet, orders panel) */
#appLayout .inv-sheet-wrap, #appLayout .cc-orders-panel, #appLayout .inv-sheet {
  background: var(--m-glass) !important; border:1px solid var(--m-line) !important; color: var(--m-text) !important;
}
#appLayout .inv-sheet-sticky-head, #appLayout .inv-sheet thead th {
  background: linear-gradient(180deg, var(--m-bg4), var(--m-bg3)) !important;
  color: var(--m-gold2) !important; border-bottom:1px solid var(--m-line2) !important;
}

/* report / resource cards + back pill + classless ghost buttons */
#appLayout .cc-rpt-card, #appLayout .resource-card {
  background: var(--m-glass) !important; border:1px solid var(--m-line) !important; color: var(--m-text) !important; box-shadow: var(--m-shadow) !important;
}
#appLayout .inv-back-pill {
  background: rgba(255,255,255,.035) !important; color: var(--m-text2) !important; border:1px solid var(--m-line) !important;
}
#appLayout .inv-back-pill:hover { color: var(--m-gold3) !important; border-color: var(--m-line2) !important; }
#appLayout button:not([class]) {
  background: rgba(255,255,255,.035) !important; color: var(--m-text2) !important; border:1px solid var(--m-line) !important; border-radius:10px !important;
}
#appLayout .thread-list, #appLayout .msg-board-page, #appLayout .msg-center-rail, #appLayout .msg-center-pane {
  background: var(--m-glass) !important; border-color: var(--m-line) !important; color: var(--m-text) !important;
}

/* inline cream/white backgrounds → dark glass (background-prop only, not text) */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFFFFF"], [style*="background: #FFFFFF"],
[style*="background:#F8F5EE"], [style*="background: #F8F5EE"], [style*="background:#F6F2E8"], [style*="background:#FAF8F4"],
[style*="background:#F4F3F1"], [style*="background:#fafafa"] {
  background: var(--m-glass2) !important; color: var(--m-text) !important; border-color: var(--m-line) !important;
}

/* ===== Sidebar: extend full-height, no internal scroll + full-close collapse (2026-06-25) ===== */
/* The nav used to be trapped in its own overflow:auto scrollbar. Let the whole
   sidebar lay out at natural height and stick to the top; the page scrolls only
   if the viewport is genuinely too short (overflow:auto is a safety net that
   stays invisible once the compacted menu fits). */
#appLayout #adminNavDrawer.sidebar {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  height: auto !important;
  max-height: none !important;
  align-self: stretch !important;
}
#appLayout #adminNavDrawer .sidebar-nav {
  flex: 0 0 auto !important;
  overflow: visible !important;
}
/* Compact the rows so the full menu fits without a scrollbar on a normal desktop. */
#appLayout #adminNavDrawer .sidebar-nav { padding: 8px 12px 8px 14px !important; }
#appLayout #adminNavDrawer .nav-item { padding: 6px 12px !important; }
#appLayout #adminNavDrawer .nav-section-label { padding: 8px 10px 3px !important; }
#appLayout #adminNavDrawer .sidebar-logo { padding: 16px 18px 12px 22px !important; }
#appLayout #adminNavDrawer .sidebar-footer { padding-top: 10px !important; }

/* Collapse button = FULLY CLOSE the sidebar (replaces the 74px icon-rail). */
#appLayout.cc-sb-collapsed #adminNavDrawer.sidebar {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  transform: translateX(-100%) !important;
}
#appLayout.cc-sb-collapsed #adminNavDrawer.sidebar > * { opacity: 0 !important; pointer-events: none !important; }
/* When closed, surface the topbar Menu button so the sidebar can be reopened. */
#appLayout.cc-sb-collapsed #navMenuToggle { display: inline-flex !important; }

/* Floating reopen button — lives on <body>, outside the sidebar, so the
   collapse can't hide it. Shown ONLY while the sidebar is collapsed. */
.cc-sb-reopen {
  display: none; position: fixed; top: 16px; left: 16px; z-index: 1200;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: 12px; cursor: pointer;
  color: var(--m-gold3);
  background: linear-gradient(135deg, rgba(196,148,58,.20), rgba(242,215,154,.06));
  border: 1px solid var(--m-line2);
  box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,246,214,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.cc-sb-reopen svg { width: 22px; height: 22px; }
.cc-sb-reopen:hover { background: linear-gradient(135deg, rgba(196,148,58,.30), rgba(242,215,154,.10)); border-color: var(--m-line3); }
#appLayout.cc-sb-collapsed ~ .cc-sb-reopen { display: inline-flex !important; }

/* ===== Kill residual indigo/cyan accent leaks → maison gold (2026-06-25 sweep) =====
   The legacy admin theme used --teal:#2A3FA8 (indigo) + a cyan→indigo gradient
   + hardcoded periwinkle/cyan rgba on decorative accents. Remap the source vars
   and override the decorative-accent classes that still render blue/cyan. Status
   colors (.tag-pill.coral = blush) are left intact. */
#appLayout { --teal: var(--m-gold) !important; --grad-brand: var(--m-goldgrad) !important; }
/* indigo/cyan accent TEXT → gold */
#appLayout .inv-section-eyebrow,
#appLayout .inv-section-accent,
#appLayout .inv-pipeline-count,
#appLayout .review-price-sub,
#appLayout .review-cat-pill,
#appLayout .consult-mgmt-eyebrow,
#appLayout .consult-mgmt-count,
#appLayout .cc-hero-accent,
#appLayout .cat-tag,
#appLayout .cat-footnote,
#appLayout .low-stock-banner-cta,
#appLayout .cc-rpt-restore { color: var(--m-gold2) !important; }
/* indigo/cyan chips → gold-tint fill + hairline */
#appLayout .review-cat-pill,
#appLayout .inv-pipeline-count,
#appLayout .cat-tag,
#appLayout .tag-pill { background: rgba(196,148,58,.10) !important; border-color: var(--m-line2) !important; }
/* cyan dots / borders → gold */
#appLayout .cg-dot { background: var(--m-gold) !important; }
#appLayout .inv-compose-add,
#appLayout .chart-shelf { border-color: var(--m-line2) !important; }
#appLayout .tag-pill.teal { background: rgba(196,148,58,.08) !important; border-color: var(--m-line2) !important; color: var(--m-gold2) !important; }
/* indigo BORDERS on structural panels/containers → gold hairline */
#appLayout .cat-glass, #appLayout .cat-panel, #appLayout .cat-panels, #appLayout .cat-panel-header,
#appLayout .cat-tabs, #appLayout .cat-actions, #appLayout .cat-footer, #appLayout .cat-note,
#appLayout .cat-btn, #appLayout .order-grid, #appLayout .store-grid, #appLayout .msg-center-pane-input-row,
#appLayout .icon-btn, #appLayout .chart-shelf-empty, #appLayout .pge-wrap, #appLayout .admin-msgboard-row,
#appLayout .inv-section-accent, #appLayout .consult-mgmt-count, #appLayout .cc-rpt-restore, #appLayout .cat-note {
  border-color: var(--m-line2) !important;
}
/* residual indigo chip/box backgrounds → espresso/gold-tint */
#appLayout .cat-note, #appLayout .admin-msgboard-row, #appLayout .consult-mgmt-count,
#appLayout .order-grid, #appLayout .store-grid { background-color: rgba(196,148,58,.05) !important; }

/* ===== Residual blue/cyan pass 2: box-shadow glows + catalog navy text (2026-06-25) ===== */
/* indigo/cyan box-SHADOW glows. Subtle elements lose the glow; buttons keep depth in gold. */
#appLayout .tag-pill, #appLayout .overview-accent-head, #appLayout .inv-sheet-sticky-head,
#appLayout .cc-realtime-status, #appLayout .sidebar-avatar { box-shadow: none !important; }
#appLayout .btn-primary, #appLayout .add-client-save,
#appLayout .msg-center-pane-send, #appLayout .consult-filter-pill {
  box-shadow: 0 8px 22px -8px rgba(196,148,58,.45) !important;
}

/* ===== Definitive card-button hierarchy (2026-06-26) =====
   The legacy .action-btn variants live in admin-dashboard.css on the OLD indigo
   palette (rgba(96,120,234,...)). Re-define here so every card button — member,
   catalog, refill, charts — reads consistently: glass = secondary, gold = primary
   action, coral = destructive. Loaded last → wins the cascade. */
#appLayout .action-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-text) !important;
  font-family: var(--m-sans) !important; font-weight: 600 !important;
  letter-spacing: .04em !important; border-radius: 9px !important;
  box-shadow: none !important; transition: background .15s, border-color .15s, color .15s !important;
}
#appLayout .action-btn:hover {
  background: rgba(196,148,58,.12) !important; border-color: var(--m-line2) !important;
  color: var(--m-gold3) !important;
}
#appLayout .action-btn--gold {
  background: var(--m-goldgrad) !important; color: #2A1808 !important;
  border: 1px solid var(--m-line2) !important;
  box-shadow: 0 6px 18px -8px rgba(196,148,58,.5) !important;
}
#appLayout .action-btn--gold:hover {
  filter: brightness(1.06) !important; color: #2A1808 !important;
}
#appLayout .action-btn--coral {
  background: rgba(200,80,80,.1) !important; color: #e58a8a !important;
  border: 1px solid rgba(200,80,80,.32) !important;
}
#appLayout .action-btn--coral:hover {
  background: rgba(200,80,80,.2) !important; border-color: rgba(200,80,80,.55) !important; color: #f0a0a0 !important;
}
/* catalog silk-glass navy text (rgb(21,49,92)) → maison cream; accents stay gold */
#appLayout #section-catalog, #appLayout #section-catalog * { color: var(--m-text) !important; }
#appLayout #section-catalog .cat-tag,
#appLayout #section-catalog .cat-name,
#appLayout #section-catalog .cat-note b,
#appLayout #section-catalog .cat-note strong { color: var(--m-gold2) !important; }
/* periwinkle tints + indigo bold text → gold */
#appLayout .icon-btn { background-color: rgba(196,148,58,.06) !important; }
#appLayout #section-orders strong { color: var(--m-gold2) !important; }

/* ===== Final residual blue/cyan (pass 3, 2026-06-25) ===== */
/* btn-primary is cyan-themed at source + picks up an indigo shadow in places. */
#appLayout .btn-primary, #appLayout #section-invoices .btn-primary {
  box-shadow: 0 8px 22px -8px rgba(196,148,58,.45) !important;
  border-color: var(--m-line2) !important;
}
/* section-title accent (e.g. "In·voices") + intake pill text + hub bold → gold/cream */
#appLayout .inv-section-head .inv-section-accent,
#appLayout .inv-section-title .inv-section-accent { color: var(--m-gold2) !important; }
#appLayout #section-intake .tag-pill { color: var(--m-gold2) !important; }
#appLayout #section-inventory strong, #appLayout #section-invoices strong { color: var(--m-text) !important; }
#appLayout .cc-rpt-restore { background-color: rgba(196,148,58,.06) !important; }
/* tag-pill keeps no indigo glow (re-assert, higher up the cascade) */
#appLayout .tag-pill { box-shadow: none !important; }

/* ============================================================
   PHASE 2 — Section cohesion restyles
   ============================================================ */

/* --- Messages: thread board --- */
/* De-box the top toolbar — no panel background/border, controls sit flat on the
   section like every other toolbar (Brandon: "remove top extend box"). */
#appLayout .thread-list.msg-board-page {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important;
}
#appLayout .thread-list-header, #appLayout .thread-list-header--compact,
#appLayout .msg-board-toolbar-inner {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 0 16px 0 !important;
}
#appLayout .thread-list-title {
  font-family: var(--m-play) !important; color: var(--m-gold2) !important;
  font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
#appLayout .thread-search, #appLayout .msg-center-rail-input {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--m-line) !important;
  color: var(--m-text) !important; border-radius: 8px !important;
}
#appLayout .thread-search::placeholder { color: var(--m-text2) !important; opacity: .5 !important; }
#appLayout .thread-filter-label { color: var(--m-text2) !important; font-size: 12px !important; }
#appLayout .thread-card {
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  color: var(--m-text) !important; border-radius: 10px !important;
}
#appLayout .thread-card:hover { border-color: var(--m-line2) !important; background: var(--m-glass2) !important; }
#appLayout .thread-card-name, #appLayout .thread-card-subject { color: var(--m-text) !important; }
#appLayout .thread-card-preview, #appLayout .thread-card-time { color: var(--m-text2) !important; }
#appLayout .thread-card.is-unread .thread-card-name { color: var(--m-gold3) !important; }
#appLayout .thread-card-unread-dot { background: var(--m-gold) !important; }
#appLayout .thread-list-body { background: transparent !important; }
#appLayout .msg-board-toolbar-cluster--end { color: var(--m-text2) !important; }

/* --- Invoices: pipeline --- */
#section-invoices .inv-pipeline-col-head {
  background: linear-gradient(180deg, var(--m-bg4), var(--m-bg3)) !important;
  border: 1px solid var(--m-line) !important; color: var(--m-gold2) !important;
  font-family: var(--m-play) !important; border-radius: 8px 8px 0 0 !important;
}
#section-invoices .inv-card, #section-invoices .invoice-card, #section-invoices .inv-pipeline-card {
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  color: var(--m-text) !important; border-radius: 10px !important; box-shadow: var(--m-shadow) !important;
}
#section-invoices .inv-card:hover, #section-invoices .invoice-card:hover,
#section-invoices .inv-pipeline-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-2px) !important;
}
#section-invoices .inv-card-name, #section-invoices .inv-card-client,
#section-invoices .inv-pipeline-card-name { color: var(--m-text) !important; }
#section-invoices .inv-card-amount, #section-invoices .inv-pipeline-card-amount {
  color: var(--m-gold3) !important; font-family: var(--m-play) !important;
}
#section-invoices .inv-card-date, #section-invoices .inv-card-meta,
#section-invoices .inv-pipeline-card-meta { color: var(--m-text2) !important; }
#section-invoices .inv-pipeline-col { border: 1px solid var(--m-line) !important; border-radius: 12px !important; }
#section-invoices .inv-pipeline-col-body { background: rgba(255,255,255,.012) !important; }

/* --- Refill log: cards --- */
#section-refills .refill-toolbar { display: flex !important; gap: 10px !important; margin-bottom: 18px !important; }
#appLayout .refill-cards {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 14px !important; padding: 0 0 32px !important;
}
#appLayout .refill-card {
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.016)) !important;
  border: 1px solid var(--m-line) !important; border-radius: 16px !important;
  padding: 16px 18px 14px !important; display: flex !important; flex-direction: column !important;
  gap: 12px !important; transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
#appLayout .refill-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.32) !important;
}
#appLayout .refill-card-main { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
#appLayout .refill-card-avatar {
  width: 42px !important; height: 42px !important; flex-shrink: 0 !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--m-bg4), var(--m-bg3)) !important;
  border: 1px solid var(--m-line2) !important; display: flex !important; align-items: center !important;
  justify-content: center !important; font-family: var(--m-play) !important; font-size: 15px !important;
  font-weight: 500 !important; color: var(--m-gold2) !important;
}
#appLayout .refill-card-who { flex: 1 !important; min-width: 0 !important; }
#appLayout .refill-card-name {
  font-family: var(--m-play) !important; font-size: 15px !important; color: var(--m-text) !important;
  font-weight: 500 !important; line-height: 1.25 !important;
}
#appLayout .refill-card-email { font-size: 11px !important; color: var(--m-text2) !important; word-break: break-all !important; line-height: 1.3 !important; }
#appLayout .refill-card-side { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; flex-shrink: 0 !important; }
#appLayout .refill-pill {
  font-size: 10px !important; padding: 3px 11px !important; border-radius: 20px !important;
  font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important;
}
#appLayout .refill-pill--pending { background: rgba(200,160,60,.2) !important; color: #d4a93c !important; }
#appLayout .refill-pill--done    { background: rgba(74,166,90,.18) !important; color: #70c97d !important; }
#appLayout .refill-pill--void    { background: rgba(120,120,120,.16) !important; color: #9a9a9a !important; }
#appLayout .refill-card-date { font-size: 10.5px !important; color: var(--m-text2) !important; white-space: nowrap !important; }
#appLayout .refill-card-compounds {
  font-size: 12.5px !important; color: var(--m-text) !important; line-height: 1.5 !important;
  background: rgba(0,0,0,.18) !important; border: 1px solid var(--m-line) !important;
  border-radius: 10px !important; padding: 10px 12px !important;
}
#appLayout .refill-card-compounds--empty { color: var(--m-text2) !important; font-style: italic !important; }
#appLayout .refill-card-actions { display: flex !important; gap: 8px !important; }
#appLayout .refill-card-actions .action-btn { flex: 1 !important; font-size: 11px !important; padding: 8px 10px !important; }
/* refill empty state on dark */
#appLayout .refill-empty-state {
  grid-column: 1 / -1 !important; text-align: center !important; padding: 44px 24px !important;
  background: var(--m-glass) !important; border: 1px dashed var(--m-line2) !important; border-radius: 16px !important;
  color: var(--m-text2) !important; font-size: 14px !important; display: flex !important;
  flex-direction: column !important; gap: 8px !important;
}
#appLayout .refill-empty-hint { font-size: 12.5px !important; color: var(--m-text2) !important; }
#appLayout .refill-empty-email { color: var(--m-gold2) !important; }

/* --- Reports --- */
#section-reports .cc-rpt-intro { color: var(--m-text2) !important; }
#section-reports .cc-rpt-toolbar {
  border-bottom: 1px solid var(--m-line) !important;
  padding-bottom: 16px !important; margin-bottom: 24px !important;
}
/* category eyebrow */
#appLayout .cc-rpt-cat { margin-bottom: 26px !important; }
#appLayout .cc-rpt-cat-title {
  font-family: var(--m-sans) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important;
  color: var(--m-gold2) !important; margin: 0 0 14px !important;
}
#appLayout .cc-rpt-grid {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}
#appLayout .cc-rpt-card {
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.016)) !important;
  border: 1px solid var(--m-line) !important; border-radius: 16px !important;
  padding: 18px 18px 16px !important; display: flex !important; flex-direction: column !important;
  gap: 8px !important; box-shadow: none !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
#appLayout .cc-rpt-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
}
#appLayout .cc-rpt-card-top {
  display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
  margin-bottom: 4px !important;
}
#appLayout .cc-rpt-card-icon {
  width: 38px !important; height: 38px !important; border-radius: 11px !important;
  background: rgba(196,148,58,.12) !important; border: 1px solid var(--m-line2) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  color: var(--m-gold2) !important;
}
#appLayout .cc-rpt-card-icon svg { width: 18px !important; height: 18px !important; stroke: var(--m-gold2) !important; color: var(--m-gold2) !important; }
#appLayout .cc-rpt-card-del {
  background: transparent !important; border: none !important; cursor: pointer !important;
  color: var(--m-text2) !important; font-size: 18px !important; line-height: 1 !important;
  padding: 2px 5px !important; border-radius: 6px !important; transition: color .15s, background .15s !important;
}
#appLayout .cc-rpt-card-del:hover { color: #e58a8a !important; background: rgba(200,80,80,.12) !important; }
#appLayout .cc-rpt-card-name {
  font-family: var(--m-play) !important; font-size: 16px !important; color: var(--m-text) !important;
  font-weight: 500 !important; line-height: 1.25 !important;
}
#appLayout .cc-rpt-card-desc {
  font-size: 12px !important; color: var(--m-text2) !important; line-height: 1.45 !important;
  margin: 0 0 6px !important; flex: 1 !important;
}
/* RUN REPORT — was indigo; now gold outline pill */
#appLayout .cc-rpt-card-run {
  align-self: flex-start !important; background: transparent !important;
  border: 1px solid var(--m-line2) !important; border-radius: 8px !important;
  color: var(--m-gold2) !important; font-family: var(--m-sans) !important;
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; padding: 7px 14px !important; cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
#appLayout .cc-rpt-card-run:hover {
  background: var(--m-goldgrad) !important; color: #2A1808 !important; border-color: var(--m-line2) !important;
}
#appLayout .cc-rpt-empty {
  padding: 40px !important; text-align: center !important; color: var(--m-text2) !important;
  background: var(--m-glass) !important; border: 1px dashed var(--m-line2) !important; border-radius: 16px !important;
}

/* --- Intake & forms: pending rows + sub-labels --- */
#section-intake .intake-pending-row {
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important; border-radius: 12px !important;
}
#section-intake .intake-pending-row.is-open {
  border-color: var(--m-line2) !important; box-shadow: 0 6px 24px rgba(0,0,0,.35) !important;
}
#section-intake .intake-pending-row-head { color: var(--m-text) !important; }
#section-intake .intake-pending-row-name { color: var(--m-text) !important; font-weight: 600 !important; }
#section-intake .intake-pending-row-meta { color: var(--m-text2) !important; }
#section-intake .intake-pending-row-body {
  border-top: 1px solid var(--m-line) !important; color: var(--m-text) !important;
}
#section-intake .intake-detail-grid dt { color: var(--m-gold2) !important; }
#section-intake .intake-detail-grid dd { color: var(--m-text) !important; }
#section-intake .intake-detail-grid dd.empty { color: var(--m-text2) !important; }
#section-intake .intake-pending-empty {
  background: rgba(196,148,58,.04) !important; border-color: var(--m-line) !important;
  color: var(--m-text2) !important; border-radius: 12px !important;
}
#section-intake .intake-pending-empty strong { color: var(--m-gold2) !important; }
#section-intake [style*="color:#2A3FA8"], #section-intake [style*="color:#3A4259"],
#section-intake [style*="color:#1A1F2E"] { color: var(--m-gold2) !important; }
#section-intake [style*="font-family:Georgia"] { font-family: var(--m-play) !important; color: var(--m-text) !important; }
#section-intake [style*="background:#F8F5EE"], #section-intake [style*="background:#fff"],
#section-intake [style*="background: #fff"] {
  background: var(--m-glass) !important; border-color: var(--m-line) !important; color: var(--m-text) !important;
}
#section-intake button#intakePendingRefresh {
  background: var(--m-glass) !important; color: var(--m-text) !important;
  border: 1px solid var(--m-line) !important; border-radius: 8px !important;
}
#section-intake button#intakePendingRefresh:hover { border-color: var(--m-line2) !important; color: var(--m-gold3) !important; }
#section-intake [style*="rgba(42,63,168,0.04)"], #section-intake [style*="rgba(42,63,168,.04)"] {
  background: rgba(196,148,58,.04) !important;
}
#section-intake [style*="rgba(42,63,168,0.18)"], #section-intake [style*="dashed rgba(42,63,168"] {
  border-color: var(--m-line) !important;
}

/* --- Client charts: square grid cards --- */
#appLayout .charts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important; padding: 0 24px 24px !important;
}
#appLayout .chart-card {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  padding: 22px 14px 16px !important;
  /* Neutral white-translucent glass to match the dashboard cards (Practice
     Pulse / cc-glass) — no gold (gold ban). */
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important; gap: 6px !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; backdrop-filter: blur(14px) saturate(1.08) !important;
  transition: border-color .2s, transform .2s, background .2s !important; cursor: default !important;
}
#appLayout .chart-card:hover {
  border-color: rgba(255,255,255,.30) !important; transform: translateY(-2px) !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
#appLayout .chart-card-avatar {
  width: 62px !important; height: 62px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--m-bg4), var(--m-bg3)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: var(--m-play) !important; font-size: 20px !important; font-weight: 500 !important;
  color: var(--m-text) !important; overflow: hidden !important; flex-shrink: 0 !important;
}
#appLayout .chart-card-avatar img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
#appLayout .chart-card-name {
  font-family: var(--m-play) !important; font-size: 13px !important;
  color: var(--m-text) !important; font-weight: 500 !important;
  line-height: 1.3 !important; word-break: break-word !important;
}
#appLayout .chart-card-email {
  font-size: 10px !important; color: var(--m-text2) !important;
  word-break: break-all !important; line-height: 1.3 !important;
}
#appLayout .chart-card-actions {
  display: flex !important; flex-direction: column !important;
  gap: 5px !important; width: 100% !important; margin-top: 6px !important;
}
#appLayout .chart-card-actions .action-btn {
  width: 100% !important; font-size: 10px !important; padding: 7px 8px !important;
}
/* hide old horizontal-layout classes if they survive */
#appLayout .chart-card-top, #appLayout .chart-card-h,
#appLayout .chart-card-e, #appLayout .chart-card-thumb { display: none !important; }

/* resource cards h3/p (Intake sub-section + Member tools) */
#appLayout .resource-card h3 {
  color: var(--m-text) !important; font-family: var(--m-play) !important; font-size: 15px !important;
}
#appLayout .resource-card p { color: var(--m-text2) !important; }
#appLayout .resource-card:hover h3 { color: #FFFFFF !important; }
/* Member tools cards → neutral white-translucent glass to match the dashboard
   (de-gold; was espresso + gold hairline). */
#appLayout .resource-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
}
#appLayout .resource-card:hover { border-color: rgba(255,255,255,0.30) !important; }
/* Store-preview "Open live storefront" button → neutral white-frost (de-gold). */
#appLayout .inv-pane[data-inv-pane="store"] .btn-primary {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  color: #EEE9DF !important; box-shadow: none !important;
}
#appLayout .inv-pane[data-inv-pane="store"] .btn-primary:hover {
  background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.4) !important;
  filter: none !important; transform: none !important;
}

/* ── MEMBER DIRECTORY CARDS (v21) ── */
#appLayout .mem-toolbar {
  display: flex !important; gap: 10px !important; align-items: center !important;
  margin-bottom: 18px !important; flex-wrap: wrap !important;
}
#appLayout .mem-search, #appLayout .mem-filter {
  padding: 10px 14px !important; font-family: var(--m-sans) !important;
  font-size: 13px !important; color: var(--m-text) !important;
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  border-radius: 10px !important; outline: none !important;
}
#appLayout .mem-search { flex: 1 !important; min-width: 200px !important; }
#appLayout .mem-search::placeholder { color: var(--m-text2) !important; }
#appLayout .mem-filter option { background: #1A130B !important; color: var(--m-text) !important; }
#appLayout .mem-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 14px !important; padding: 0 0 24px !important;
}
#appLayout .mem-card {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; text-align: center !important;
  padding: 22px 14px 16px !important;
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  border-radius: 14px !important; gap: 5px !important;
  transition: border-color .2s, transform .2s !important;
}
#appLayout .mem-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}
#appLayout .mem-card-avatar {
  width: 62px !important; height: 62px !important; border-radius: 50% !important;
  background: linear-gradient(135deg, var(--m-bg4), var(--m-bg3)) !important;
  border: 1px solid var(--m-line2) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-family: var(--m-play) !important; font-size: 20px !important; font-weight: 500 !important;
  color: var(--m-gold2) !important; flex-shrink: 0 !important;
}
#appLayout .mem-card-name {
  font-family: var(--m-play) !important; font-size: 13px !important;
  color: var(--m-text) !important; font-weight: 500 !important;
  line-height: 1.3 !important; word-break: break-word !important;
}
#appLayout .mem-card-phone {
  font-size: 11px !important; color: var(--m-text2) !important;
  letter-spacing: .02em !important; line-height: 1.3 !important;
}
#appLayout .mem-card-email {
  font-size: 10px !important; color: var(--m-text2) !important;
  word-break: break-all !important; line-height: 1.3 !important;
}
#appLayout .mem-card-address {
  font-size: 10px !important; color: var(--m-muted2) !important;
  line-height: 1.35 !important; word-break: break-word !important;
  max-width: 92% !important; margin: 1px auto 0 !important;
}
#appLayout .mem-card-empty {
  color: var(--m-muted) !important; font-style: italic !important; font-size: 9.5px !important;
}
#appLayout .mem-card-proto {
  font-size: 10px !important; color: var(--m-gold2) !important;
  font-family: var(--m-play) !important; line-height: 1.2 !important;
  word-break: break-word !important; margin-top: 1px !important;
}
#appLayout .mem-card-status {
  font-size: 10px !important; padding: 3px 10px !important; border-radius: 20px !important;
  font-weight: 600 !important; letter-spacing: .03em !important; text-transform: uppercase !important;
  margin-top: 2px !important;
}
#appLayout .mem-status--active  { background: rgba(74,166,90,.18) !important; color: #70c97d !important; }
#appLayout .mem-status--paused  { background: rgba(200,160,60,.18) !important; color: #d4a93c !important; }
#appLayout .mem-status--vip     { background: rgba(196,148,58,.28) !important; color: var(--m-gold3) !important; }
#appLayout .mem-status--archived{ background: rgba(120,120,120,.18) !important; color: #8a8a8a !important; }
#appLayout .mem-card-actions {
  display: flex !important; flex-direction: column !important;
  gap: 5px !important; width: 100% !important; margin-top: 6px !important;
}
#appLayout .mem-card-actions .action-btn {
  width: 100% !important; font-size: 10px !important; padding: 7px 8px !important;
}

/* ── MEMBER EDIT MODAL ── */
.mem-edit-overlay {
  display: none !important; position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.6) !important; backdrop-filter: blur(4px) !important;
  z-index: 9000 !important; align-items: center !important; justify-content: center !important;
}
.mem-edit-overlay.is-open {
  display: flex !important;
}
.mem-edit-panel {
  background: var(--m-bg2, #1A130B) !important; border: 1px solid var(--m-line2, rgba(196,148,58,.35)) !important;
  border-radius: 18px !important; width: min(440px, 94vw) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55) !important; overflow: hidden !important;
}
.mem-edit-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 18px 22px 14px !important; border-bottom: 1px solid var(--m-line, rgba(255,255,255,.08)) !important;
}
.mem-edit-title {
  font-family: var(--m-play) !important; font-size: 15px !important;
  color: var(--m-gold3, #E8C87A) !important; font-weight: 500 !important;
}
.mem-edit-close {
  background: none !important; border: none !important; cursor: pointer !important;
  color: var(--m-text2) !important; font-size: 22px !important; line-height: 1 !important;
  padding: 0 4px !important; transition: color .15s !important;
}
.mem-edit-close:hover { color: var(--m-text) !important; }
.mem-edit-body {
  padding: 18px 22px !important; display: flex !important; flex-direction: column !important;
  gap: 13px !important;
}
.mem-edit-label {
  display: flex !important; flex-direction: column !important; gap: 5px !important;
  font-size: 11px !important; color: var(--m-gold2, #C4943A) !important;
  font-family: var(--m-play) !important; letter-spacing: .04em !important; text-transform: uppercase !important;
}
.mem-edit-input {
  width: 100% !important; box-sizing: border-box !important;
  padding: 10px 13px !important; font-family: var(--m-sans) !important;
  font-size: 13px !important; color: var(--m-text) !important;
  background: var(--m-glass, rgba(255,255,255,.04)) !important;
  border: 1px solid var(--m-line) !important; border-radius: 9px !important;
  outline: none !important; transition: border-color .15s !important;
  -webkit-appearance: none !important;
}
.mem-edit-input:focus { border-color: var(--m-gold2) !important; }
.mem-edit-input[readonly] { opacity: .55 !important; cursor: default !important; }
.mem-edit-textarea { resize: vertical !important; min-height: 52px !important; }
.mem-edit-input option { background: #1A130B !important; }
.mem-edit-foot {
  display: flex !important; align-items: center !important; justify-content: flex-end !important;
  gap: 12px !important; padding: 14px 22px 18px !important;
  border-top: 1px solid var(--m-line) !important;
}
.mem-edit-msg {
  flex: 1 !important; font-size: 12px !important; color: var(--m-text2) !important;
}

/* ── CATALOG ADMIN CARDS (v21) ── */
#appLayout .cat-admin-toolbar {
  display: flex !important; gap: 10px !important; align-items: center !important;
  margin-bottom: 0 !important; flex-wrap: wrap !important;
}
#appLayout #section-inventory .cat-admin-search, #appLayout #section-inventory .cat-admin-filter {
  padding: 10px 14px !important; font-family: var(--m-sans) !important;
  font-size: 13px !important; color: var(--m-text) !important;
  background: rgba(0,0,0,.28) !important; border: 1.5px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important; outline: none !important;
}
#appLayout #section-inventory .cat-admin-search:focus, #appLayout #section-inventory .cat-admin-filter:focus {
  border-color: rgba(226,183,106,.5) !important;
}
#appLayout .cat-admin-search { flex: 1 !important; min-width: 180px !important; }

/* ═══════════ CATALOG HERO BANNER (no crest) ═══════════ */
#appLayout #section-inventory .cat-hero {
  position: relative !important; overflow: hidden !important;
  border-radius: 26px !important; padding: 22px 28px 18px !important; margin-bottom: 22px !important;
  background:
    radial-gradient(120% 150% at 88% -20%, rgba(196,148,58,.30), transparent 46%),
    radial-gradient(90% 130% at 2% 130%, rgba(143,175,154,.10), transparent 52%),
    linear-gradient(140deg, #261b10 0%, #1a130b 54%, #110c07 100%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 24px 54px -28px rgba(0,0,0,.75) !important;
}
#appLayout #section-inventory .cat-hero-sheen {
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 38%) !important;
}
#appLayout #section-inventory .cat-hero-row { position: relative !important; display: flex !important; align-items: center !important; gap: 16px !important; }
#appLayout #section-inventory .cat-hero-row--top { justify-content: space-between !important; }
#appLayout #section-inventory .cat-hero-back { flex: 0 0 auto !important; }
#appLayout #section-inventory .cat-hero-titles { flex: 1 1 auto !important; text-align: center !important; min-width: 0 !important; }
#appLayout #section-inventory .cat-hero-eyebrow {
  font-family: var(--m-sans) !important; font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .34em !important; text-transform: uppercase !important; color: var(--m-gold2) !important; margin: 0 0 4px !important;
}
#appLayout #section-inventory .cat-hero-title {
  font-family: var(--m-play) !important; font-size: 30px !important; font-weight: 500 !important;
  letter-spacing: .01em !important; color: var(--m-text) !important; margin: 0 !important; line-height: 1 !important;
}
#appLayout #section-inventory .cat-hero-bar {
  margin-top: 18px !important; padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
  justify-content: space-between !important; flex-wrap: wrap !important; row-gap: 12px !important;
}
#appLayout #section-inventory .cat-hero-bar .inv-subtabs { display: flex !important; gap: 8px !important; flex: 0 0 auto !important; margin: 0 !important; }
#appLayout #section-inventory .cat-hero-bar .cat-admin-toolbar { flex: 1 1 360px !important; justify-content: flex-end !important; }
#appLayout .cat-admin-search::placeholder { color: var(--m-text2) !important; }
#appLayout .cat-admin-filter option { background: #1A130B !important; color: var(--m-text) !important; }
#appLayout .cat-admin-filter-wrap { display: flex !important; }
#appLayout .cat-admin-loading {
  grid-column: 1 / -1 !important; text-align: center !important;
  padding: 48px 0 !important; color: var(--m-text2) !important; font-size: 13px !important;
}
/* 6-wide bigger cards (was ~7 @ 200px) */
#appLayout .cat-admin-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 18px !important; padding: 0 0 36px !important;
}
/* ── Catalog top controls → frosted-glass dashboard language (cg-qbtn), not
   loud gold fills. Scoped to the catalog so locked sections are untouched. ── */
/* shared frosted button base: Store, reload, subtabs */
#appLayout #section-inventory .cat-store-btn,
#appLayout #section-inventory .cat-admin-toolbar .action-btn,
#appLayout #section-inventory .inv-subtab {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
  border: 1.5px solid rgba(255,255,255,.26) !important; border-radius: 14px !important;
  color: var(--m-text) !important; font-family: var(--m-sans) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 18px -12px rgba(0,0,0,.55) !important;
  text-transform: none !important; letter-spacing: .01em !important; font-weight: 600 !important;
  transition: transform .25s cubic-bezier(.34,1.5,.5,1), box-shadow .25s, background .2s, color .2s, border-color .2s !important;
}
#appLayout #section-inventory .cat-store-btn:hover,
#appLayout #section-inventory .cat-admin-toolbar .action-btn:hover,
#appLayout #section-inventory .inv-subtab:hover {
  transform: translateY(-2px) !important; color: var(--m-gold3) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 26px -12px rgba(0,0,0,.6) !important;
}
#appLayout #section-inventory .cat-store-btn { font-size: 12px !important; padding: 9px 16px !important; }
#appLayout #section-inventory .cat-admin-toolbar .action-btn { font-size: 15px !important; padding: 9px 14px !important; }
/* subtabs: frosted; selected = brighter frosted + gold text (no solid-gold slab) */
#appLayout #section-inventory .inv-subtab { font-size: 13px !important; padding: 9px 18px !important; }
#appLayout #section-inventory .inv-subtab.is-active {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.085)) !important;
  border-color: rgba(255,255,255,.45) !important; color: var(--m-gold3) !important;
  font-weight: 700 !important; text-shadow: none !important;
}
/* + Add product = the ONE primary: gold-tinted frosted, still in the glass family */
#appLayout #section-inventory .cat-admin-toolbar .action-btn--gold {
  background: linear-gradient(135deg, rgba(226,183,106,.34), rgba(196,148,58,.16)) !important;
  border: 1.5px solid rgba(226,183,106,.55) !important; border-radius: 14px !important;
  color: var(--m-gold3) !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .01em !important; text-transform: none !important; padding: 9px 18px !important;
  box-shadow: 0 1px 0 rgba(255,246,214,.35) inset, 0 8px 20px -10px rgba(0,0,0,.55) !important;
}
#appLayout #section-inventory .cat-admin-toolbar .action-btn--gold:hover {
  transform: translateY(-2px) !important; color: #F7E6BE !important;
  border-color: rgba(242,215,154,.7) !important;
  box-shadow: 0 1px 0 rgba(255,246,214,.5) inset, 0 14px 28px -10px rgba(0,0,0,.6) !important;
}
/* Catalog card = the member-store card face (vial display + name + price) with
   an editable admin strip welded to the bottom. Frosted, overflow-clipped so
   the vial window corners are rounded. */
#appLayout .cat-card {
  background: linear-gradient(168deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 20px !important; padding: 0 !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 40px -22px rgba(0,0,0,.6) !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
#appLayout .cat-card:hover {
  border-color: rgba(255,255,255,.3) !important; transform: translateY(-3px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 26px 50px -20px rgba(0,0,0,.7) !important;
}
/* Vial display = EXACT member-store treatment: blank amber vial PNG + printed
   crest/name/dose label, auto-fit by catFitVialLabels(). Copied verbatim from
   shop-formulary.css (.fx-*) so the catalog matches the store 1:1. */
#appLayout #section-inventory .cat-card-vial {
  --fx-play: 'Playfair Display', Georgia, serif; --fx-sans: 'Sora','DM Sans',system-ui,sans-serif;
  --fx-gold2: #E2B76A; --fx-gold3: #F2D79A;
  height: 230px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important; padding: 12px 0 !important;
  background: radial-gradient(58% 44% at 50% 52%, rgba(196,148,58,.24), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.4), transparent 58%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
/* Fit the WHOLE vial by height (no side/top crop); label tracks the vial */
#appLayout #section-inventory .cat-card-vial .fx-vial { position: relative; height: 100%; width: auto; max-width: 100%; line-height: 0; }
#appLayout #section-inventory .cat-card-vial .fx-vial-img { display: block; height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 16px 26px rgba(0,0,0,.72)); }
#appLayout #section-inventory .cat-card-vial .fx-label {
  position: absolute; left: 50%; transform: translateX(-50%); top: 45%; height: 33%; width: 46%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 1% 0; text-align: center; pointer-events: none;
  -webkit-mask: radial-gradient(172% 100% at 50% 50%, #000 73%, transparent 99%);
  mask: radial-gradient(172% 100% at 50% 50%, #000 73%, transparent 99%);
}
#appLayout #section-inventory .cat-card-vial .fx-lab-crest { height: auto; width: 42%; max-width: 48%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.85)); flex: 0 0 auto; }
/* Admin catalog: crest-only label — enlarge the crest to fill the label band */
#appLayout #section-inventory .cat-card-vial .fx-lab-crest--big { width: 96% !important; max-width: 96% !important; }
#appLayout #section-inventory .cat-card-vial .fx-lab-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; width: 76%; }
#appLayout #section-inventory .cat-card-vial .fx-lab-name { font-family: var(--fx-play); font-weight: 600; font-size: 14px; letter-spacing: .005em; line-height: 1.06; color: var(--fx-gold3); text-shadow: 0 1px 2px rgba(0,0,0,.95); max-width: 100%; word-break: normal; overflow-wrap: break-word; hyphens: none; }
#appLayout #section-inventory .cat-card-vial .fx-lab-mg { font-family: var(--fx-sans); font-weight: 700; font-size: 9px; letter-spacing: .18em; color: var(--fx-gold2); text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.95); line-height: 1; }
#appLayout #section-inventory .cat-card-vial .fx-lab-brand { font-family: var(--fx-sans); font-weight: 600; font-size: 6px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-gold2); text-shadow: 0 1px 2px rgba(0,0,0,.95); line-height: 1; flex: 0 0 auto; white-space: nowrap; max-width: 84%; }
/* Face: name + dose·category on the left, kit price on the right */
#appLayout .cat-card-face {
  display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
  gap: 10px !important; padding: 14px 16px 4px !important;
}
#appLayout .cat-card-titles { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#appLayout .cat-card-name {
  font-family: var(--m-play) !important; font-size: 16px !important;
  color: var(--m-text) !important; font-weight: 500 !important; line-height: 1.2 !important;
  letter-spacing: .01em !important;
}
#appLayout .cat-card-sub {
  font-size: 10px !important; color: var(--m-text2) !important; line-height: 1.3 !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
}
#appLayout .cat-card-price {
  flex-shrink: 0 !important; font-family: var(--m-play) !important; font-size: 18px !important;
  font-weight: 600 !important; color: var(--m-gold3) !important; line-height: 1 !important; padding-top: 2px !important;
}
/* small More ↗ text-link into the full edit modal */
#appLayout .cat-card-editlink {
  flex-shrink: 0 !important; background: transparent !important; border: none !important;
  color: var(--m-gold2) !important; font-family: var(--m-sans) !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .07em !important;
  text-transform: uppercase !important; padding: 0 !important; cursor: pointer !important;
  transition: color .15s !important;
}
#appLayout .cat-card-editlink:hover { color: var(--m-gold3) !important; }
#appLayout .cat-card-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 16px 12px !important; }
#appLayout .cat-stock-badge {
  font-size: 10px !important; padding: 3px 10px !important; border-radius: 20px !important;
  font-weight: 600 !important; letter-spacing: .03em !important;
}
#appLayout .cat-stock--ok   { background: rgba(74,166,90,.18) !important; color: #70c97d !important; }
#appLayout .cat-stock--low  { background: rgba(200,160,60,.22) !important; color: #d4a93c !important; }
#appLayout .cat-stock--out  { background: rgba(200,80,80,.22) !important; color: #e07070 !important; }
/* ── Editable admin strip welded to the bottom of the card ── */
#appLayout .cat-card-edit {
  margin-top: auto !important;
  background: rgba(0,0,0,.28) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  padding: 11px 16px 14px !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
#appLayout .cat-card-edit-hd {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
#appLayout .cat-card-edit-hd > span {
  font-size: 9px !important; font-weight: 700 !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; color: var(--m-text2) !important;
}
/* inline-editable field rows — compact 2-up grid, label over input */
#appLayout .cat-card-fields {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important;
  border-top: none !important; padding-top: 0 !important;
}
#appLayout .cat-card-edit .cat-field {
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 3px !important;
}
#appLayout .cat-field-lbl {
  font-size: 10px !important; color: var(--m-text2) !important;
  text-transform: uppercase !important; letter-spacing: .07em !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
}
#appLayout .cat-field-tag {
  font-style: normal !important; font-size: 8px !important; padding: 1px 5px !important;
  border-radius: 6px !important; background: rgba(196,148,58,.16) !important;
  color: var(--m-gold2) !important; letter-spacing: .05em !important;
}
#appLayout .cat-field-in {
  display: inline-flex !important; align-items: center !important;
  background: rgba(0,0,0,.22) !important; border: 1px solid var(--m-line) !important;
  border-radius: 8px !important; padding: 0 9px !important; width: 92px !important;
  transition: border-color .15s, box-shadow .15s, background .3s !important;
}
#appLayout .cat-field-in:focus-within {
  border-color: var(--m-gold2) !important; box-shadow: 0 0 0 2px rgba(196,148,58,.14) !important;
}
#appLayout .cat-field-in em {
  font-style: normal !important; color: var(--m-text2) !important; font-size: 12px !important; padding-right: 1px !important;
}
#appLayout .cat-field-in input {
  width: 100% !important; background: transparent !important; border: none !important;
  outline: none !important; color: var(--m-text) !important;
  font-family: var(--m-play) !important; font-size: 13px !important; font-weight: 500 !important;
  text-align: right !important; padding: 7px 0 !important;
}
#appLayout .cat-field--admin .cat-field-in input { color: var(--m-gold3) !important; }
#appLayout .cat-field-in.cat-field-ok { background: rgba(74,166,90,.16) !important; border-color: rgba(74,166,90,.4) !important; }
#appLayout .cat-field-in.cat-field-err { background: rgba(200,80,80,.16) !important; border-color: rgba(200,80,80,.5) !important; }
#appLayout .cat-field-in.cat-field-saving { opacity: .6 !important; }
#appLayout .cat-field--ro { padding-top: 2px !important; }
#appLayout .cat-field-markup {
  font-family: var(--m-play) !important; font-size: 13px !important;
  color: var(--m-gold2) !important; font-weight: 600 !important;
}
#appLayout .cat-card-edit .cat-field-in { width: 100% !important; }
#appLayout .cat-card-edit .cat-field-lbl { font-size: 9px !important; letter-spacing: .08em !important; }
/* read-only Kit-markup cell — looks like the inputs but highlighted gold */
#appLayout .cat-card-edit .cat-field--ro { padding-top: 0 !important; }
#appLayout .cat-card-edit .cat-field--ro .cat-field-markup {
  display: flex !important; align-items: center !important; justify-content: flex-end !important;
  height: 32px !important; padding: 0 10px !important;
  background: rgba(196,148,58,.12) !important; border: 1px solid rgba(226,183,106,.3) !important;
  border-radius: 8px !important; color: var(--m-gold3) !important;
  font-family: var(--m-play) !important; font-size: 13px !important; font-weight: 600 !important;
}
/* inline store toggle — inside the strip, divided from the fields */
#appLayout .cat-card-store {
  display: flex !important; align-items: center !important; gap: 9px !important;
  font-size: 10px !important; color: var(--m-text2) !important; cursor: pointer !important;
  border-top: 1px solid rgba(255,255,255,.08) !important; padding-top: 11px !important; margin-top: 1px !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
}
#appLayout .cat-card-store input { width: 15px !important; height: 15px !important; accent-color: var(--m-gold2) !important; cursor: pointer !important; }

/* ── PRODUCT EDIT MODAL extras ── */
.cat-prod-edit-panel { width: min(580px, 96vw) !important; }
.cat-prod-edit-body {
  padding: 16px 22px !important; display: flex !important;
  flex-direction: column !important; gap: 12px !important;
}
.cat-prod-edit-row {
  display: flex !important; gap: 12px !important; align-items: flex-start !important;
}
.cat-prod-edit-row .mem-edit-label { flex: 1 !important; }
.cat-prod-admin-tag {
  display: inline-block !important; margin-left: 6px !important;
  font-size: 9px !important; padding: 1px 6px !important; border-radius: 8px !important;
  background: rgba(196,148,58,.18) !important; color: var(--m-gold2) !important;
  letter-spacing: .04em !important; vertical-align: middle !important; text-transform: uppercase !important;
}
.cat-prod-edit-toggles { align-items: center !important; gap: 18px !important; margin-top: 2px !important; }
.cat-prod-toggle-label {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: 13px !important; color: var(--m-text) !important; cursor: pointer !important;
}
.cat-prod-toggle-cb { width: 16px !important; height: 16px !important; accent-color: var(--m-gold2) !important; cursor: pointer !important; }

/* ── INVOICES PIPELINE — full restyle (v21) ── */
#appLayout #section-invoices .inv-pipeline-toolbar {
  display: flex !important; gap: 10px !important; align-items: center !important;
  margin-bottom: 20px !important;
}
#appLayout #section-invoices .inv-pipeline-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important; align-items: start !important;
}
#appLayout #section-invoices .inv-pipeline-col {
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  border-radius: 16px !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; min-height: 160px !important;
}
/* Fix: JS uses -hdr, old CSS used -head */
#appLayout #section-invoices .inv-pipeline-col-hdr,
#appLayout #section-invoices .inv-pipeline-col-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 18px 12px !important;
  background: linear-gradient(180deg, var(--m-bg4), var(--m-bg3)) !important;
  border-bottom: 1px solid var(--m-line2) !important;
  font-family: var(--m-play) !important; font-size: 11px !important;
  font-weight: 600 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; color: var(--m-gold2) !important;
}
#appLayout #section-invoices .inv-pipeline-count {
  background: rgba(196,148,58,.18) !important; color: var(--m-gold3) !important;
  border: 1px solid rgba(196,148,58,.3) !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 2px 9px !important; border-radius: 20px !important;
  font-family: var(--m-sans) !important; letter-spacing: 0 !important;
}
#appLayout #section-invoices .inv-pipeline-col-body {
  padding: 12px !important; display: flex !important;
  flex-direction: column !important; gap: 9px !important; flex: 1 !important;
}
#appLayout #section-invoices .inv-pipeline-empty {
  text-align: center !important; padding: 28px 0 !important;
  font-size: 12px !important; color: var(--m-text2) !important;
  font-family: var(--m-sans) !important;
}
#appLayout #section-invoices .inv-pipeline-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--m-line) !important; border-radius: 12px !important;
  overflow: hidden !important; transition: border-color .18s, transform .18s !important;
}
#appLayout #section-invoices .inv-pipeline-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
}
#appLayout #section-invoices .inv-pipeline-card-open {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 13px 15px 10px !important; background: none !important;
  border: none !important; cursor: pointer !important;
}
#appLayout #section-invoices .inv-pipeline-card-title {
  font-family: var(--m-play) !important; font-size: 13px !important;
  color: var(--m-text) !important; font-weight: 500 !important;
  line-height: 1.3 !important; margin-bottom: 4px !important;
}
#appLayout #section-invoices .inv-pipeline-card-meta {
  font-size: 11px !important; color: var(--m-text2) !important; line-height: 1.5 !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions {
  display: flex !important; gap: 6px !important; flex-wrap: wrap !important;
  padding: 8px 12px 11px !important;
  border-top: 1px solid var(--m-line) !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions button {
  font-family: var(--m-sans) !important; font-size: 10px !important;
  font-weight: 600 !important; letter-spacing: .04em !important;
  padding: 5px 11px !important; border-radius: 8px !important;
  cursor: pointer !important; border: 1px solid var(--m-line) !important;
  background: var(--m-glass) !important; color: var(--m-text) !important;
  transition: background .15s, border-color .15s !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions button:hover {
  background: rgba(196,148,58,.15) !important; border-color: var(--m-line2) !important;
  color: var(--m-gold3) !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-back {
  color: var(--m-text2) !important; opacity: .75 !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-del {
  color: #e07070 !important; border-color: rgba(200,80,80,.25) !important;
  background: rgba(200,80,80,.08) !important; margin-left: auto !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-del:hover {
  background: rgba(200,80,80,.2) !important; border-color: rgba(200,80,80,.5) !important; color: #f08080 !important;
}
/* pipeline error state */
#appLayout #section-invoices .inv-pipeline-err {
  padding: 24px !important; color: #e07070 !important; font-size: 13px !important;
}

/* ── SHARED MODAL DARK THEME (2026-06-26) ──
   .invoice-modal-dialog modals (Invoice builder, New conversation, Refill) live
   OUTSIDE #appLayout, so the #appLayout input theming never reached them — inputs
   ended up white-text-on-light-section (invisible while typing). These UNSCOPED
   rules dark-theme the whole shared dialog so every field is readable. */
.invoice-modal-dialog {
  background: linear-gradient(165deg,#1A130B,#0F0B07) !important;
  border: 1px solid rgba(196,148,58,.3) !important;
}
.invoice-modal-top { border-bottom-color: rgba(255,255,255,.08) !important; }
.invoice-modal-dialog .invoice-modal-title { color: #F3E9D6 !important; }
.invoice-modal-dialog .invoice-modal-kicker { color: #C4943A !important; }
.invoice-modal-dialog .cc-muted-lead,
.invoice-modal-dialog .cc-muted-lead--tight { color: rgba(243,233,214,.62) !important; }
.invoice-modal-dialog .inv-m-section {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.invoice-modal-dialog .inv-m-section-title { color: #C4943A !important; }
.invoice-modal-dialog .inv-m-label { color: #C4943A !important; }
.invoice-modal-dialog input,
.invoice-modal-dialog textarea,
.invoice-modal-dialog select,
.invoice-modal-dialog .inv-m-input,
.invoice-modal-dialog .inv-m-select {
  background: rgba(0,0,0,.28) !important;
  color: #F3E9D6 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.invoice-modal-dialog input::placeholder,
.invoice-modal-dialog textarea::placeholder { color: rgba(243,233,214,.42) !important; }
.invoice-modal-dialog input:focus,
.invoice-modal-dialog textarea:focus,
.invoice-modal-dialog select:focus { border-color: #C4943A !important; outline: none !important; }
.invoice-modal-dialog select option { background: #1A130B !important; color: #F3E9D6 !important; }
.invoice-modal-dialog .inv-m-comp-results,
.invoice-modal-dialog .inv-m-custom-box { background: rgba(0,0,0,.2) !important; border-color: rgba(255,255,255,.08) !important; }

/* ── Stray low-contrast inputs caught by contrast scan (2026-06-26) ──
   Reply inputs + slot-time inputs that sit outside #appLayout or in light
   containers. Solid dark bg + cream text so they're readable anywhere. */
.reply-input,
#msgCenterPaneInput,
#addSlotModal input[type="time"],
#addSlotModal input[type="text"],
#addSlotModal input:not([type="checkbox"]):not([type="radio"]),
#addSlotModal select {
  background: #16110b !important;
  color: #F3E9D6 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.reply-input::placeholder,
#msgCenterPaneInput::placeholder { color: rgba(243,233,214,.42) !important; }
#msgCenterPaneInput:disabled { color: rgba(243,233,214,.5) !important; background: #16110b !important; }

/* ── Vendor pricing pane (merged into Catalog subtab, 2026-06-26) ── */
#appLayout .vp-toolbar {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  align-items: center !important; margin-bottom: 18px !important;
}
#appLayout .vp-select {
  padding: 10px 14px !important; min-width: 200px !important;
  background: var(--m-glass) !important; border: 1px solid var(--m-line) !important;
  border-radius: 10px !important; color: var(--m-text) !important; font-family: var(--m-sans) !important; font-size: 13px !important;
}
#appLayout .vp-select option { background: #1A130B !important; color: var(--m-text) !important; }
#appLayout .vp-vendorlink {
  font-size: 12px !important; color: var(--m-gold2) !important; text-decoration: none !important;
  font-weight: 600 !important; letter-spacing: .02em !important;
}
#appLayout .vp-vendorlink:hover { color: var(--m-gold3) !important; }
#appLayout .vp-count {
  margin-left: auto !important; font-family: var(--m-sans) !important; font-size: 11px !important;
  font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  color: var(--m-text2) !important;
}
#appLayout .vp-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }

/* vendor pricing list — override the JS inline light-theme styles (scoped) */
#appLayout .vp-list [style*="background:#fff"] { background: var(--m-glass) !important; border-color: var(--m-line) !important; }
#appLayout .vp-list [style*="background:#F8F5EE"] { background: rgba(255,255,255,.05) !important; color: var(--m-text) !important; }
#appLayout .vp-list [style*="background:rgba(42,63,168"] { background: rgba(196,148,58,.05) !important; border-color: var(--m-line2) !important; color: var(--m-text2) !important; }
#appLayout .vp-list [style*="color:#1A1F2E"] { color: var(--m-text) !important; }
#appLayout .vp-list [style*="color:rgba(26,31,46,.62)"],
#appLayout .vp-list [style*="color:rgba(26,31,46,.55)"],
#appLayout .vp-list [style*="color:rgba(26,31,46,.45)"] { color: var(--m-text2) !important; }
#appLayout .vp-list [style*="border-bottom:1px solid rgba(26,31,46"] { border-bottom-color: var(--m-line) !important; }
#appLayout .vp-list [style*="border:1px solid rgba(26,31,46"] { border-color: var(--m-line) !important; }
#appLayout .vp-list [style*="color:#A03030"] { color: #e58a8a !important; }
#appLayout .vp-list [style*="color:#8A5C1A"] { color: var(--m-gold2) !important; }
#appLayout .vp-list [style*="background:rgba(184,146,74"] { background: rgba(196,148,58,.16) !important; }
#appLayout .vp-list table { width: 100% !important; border-collapse: collapse !important; }
#appLayout .vp-list thead th { color: var(--m-gold2) !important; background: linear-gradient(180deg, rgba(196,148,58,.08), transparent) !important; }
#appLayout .vp-list tr { border-bottom: 1px solid var(--m-line) !important; }

/* ════════════════════════════════════════════════════════════════
   MESSAGES → DASHBOARD STANDARD (locked here first, 2026-06-26)
   Rebuild the section in the Dashboard home's component language:
   smooth gold buttons (not the loud gold-plate), no hard header
   divider, clean spacing. Scoped to #section-messages for now.
   ════════════════════════════════════════════════════════════════ */
/* 1. Kill the stray header divider line — the dashboard header has none. */
#appLayout #section-messages .inv-section-head { border-bottom: 0 !important; padding-bottom: 4px !important; }

/* 2. "New conversation" → smooth gold like the dashboard's "Approve Chart"
      (.cg-qbtn): --m-goldgrad, rounded 16px, readable label — NOT the loud
      crinkled gold-plate, NOT tiny-uppercase. */
#appLayout #section-messages .btn-primary {
  background: var(--m-goldgrad) !important;
  background-image: var(--m-goldgrad) !important;
  color: #2A1808 !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 16px !important;
  padding: 11px 20px !important;
  font-family: var(--m-sans) !important;
  font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .2px !important; text-transform: none !important;
  text-shadow: none !important;
  box-shadow: 0 8px 20px -8px rgba(196,148,58,.5), 0 1px 0 rgba(255,255,255,.35) inset !important;
}
#appLayout #section-messages .btn-primary:hover {
  filter: brightness(1.05) !important; transform: translateY(-2px) !important;
}

/* 3. Toolbar: clean spacing + alignment to match the dashboard's calm rows. */
#appLayout #section-messages .thread-list-header { padding: 4px 0 18px !important; }
#appLayout #section-messages .msg-board-toolbar-inner {
  display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important;
}
#appLayout #section-messages .msg-board-toolbar-cluster--start {
  display: flex !important; align-items: center !important; gap: 12px !important;
}
#appLayout #section-messages .thread-list-title {
  font-family: var(--m-sans) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--m-gold2) !important;
}
#appLayout #section-messages .thread-count-pill {
  background: rgba(196,148,58,.14) !important; color: var(--m-gold3) !important;
  border: 1px solid var(--m-line2) !important; box-shadow: none !important;
}
#appLayout #section-messages .msg-board-toolbar-cluster--search { flex: 1 !important; min-width: 220px !important; }
#appLayout #section-messages .thread-search { width: 100% !important; }
#appLayout #section-messages .icon-btn {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--m-line) !important;
  color: var(--m-gold2) !important; border-radius: 12px !important;
}

/* residual cyan accent glow in main::before → gold (brand: no blue/cyan) */
#appLayout main::before, main.main::before {
  background-image:
    radial-gradient(70% 45% at 95% 8%, rgba(196,148,58,.05) 0%, rgba(0,0,0,0) 50%),
    radial-gradient(60% 40% at 5% 100%, rgba(143,175,154,.04) 0%, rgba(0,0,0,0) 55%) !important;
}

/* Messages: wrap toolbar + content in the Dashboard's frosted-glass cards
   (matches .cg-glass: luminous translucent fill, soft light rim, big radius,
   deep soft shadow, backdrop blur) — not flat dark boxes. */
#appLayout #section-messages .thread-list.msg-board-page {
  display: flex !important; flex-direction: column !important; gap: 16px !important;
}
#appLayout #section-messages .thread-list-header {
  background: rgba(255,255,255,.06) !important;
  backdrop-filter: blur(40px) saturate(155%) !important; -webkit-backdrop-filter: blur(40px) saturate(155%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 26px 54px -22px rgba(0,0,0,.55), 0 10px 22px -14px rgba(0,0,0,.4) !important;
  padding: 20px 24px !important;
}
#appLayout #section-messages .thread-list-body {
  background: rgba(255,255,255,.04) !important;
  backdrop-filter: blur(40px) saturate(155%) !important; -webkit-backdrop-filter: blur(40px) saturate(155%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 54px -22px rgba(0,0,0,.5) !important;
  padding: 30px !important; min-height: 260px !important;
}

/* Match Messages cards to the Dashboard's EXACT frosted-glass coloration
   (cg-glass tokens: fill .15, edge .55, radius 34, sheen, deep shadow). */
#appLayout #section-messages .thread-list-header,
#appLayout #section-messages .thread-list-body {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(42px) saturate(160%) !important; -webkit-backdrop-filter: blur(42px) saturate(160%) !important;
  border: 2px solid rgba(255,255,255,.55) !important;
  border-radius: 34px !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 30px 60px -20px rgba(30,40,60,.45), 0 12px 24px -12px rgba(30,40,60,.30) !important;
  position: relative !important;
}
#appLayout #section-messages .thread-list-header::after,
#appLayout #section-messages .thread-list-body::after {
  content:'' !important; position:absolute !important; inset:0 !important; border-radius:inherit !important;
  pointer-events:none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%) !important;
}
/* keep toolbar/empty-state content above the sheen */
#appLayout #section-messages .msg-board-toolbar-inner,
#appLayout #section-messages .thread-list-body > * { position: relative !important; z-index: 1 !important; }

/* BACK: kill the gold box — minimal text button (Dashboard restraint), global */
#appLayout .inv-back-pill {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--m-text2) !important; padding: 6px 4px !important;
}
#appLayout .inv-back-pill:hover { color: var(--m-gold3) !important; background: transparent !important; }

/* ════════════════════════════════════════════════════════════════
   INVOICES → DASHBOARD STANDARD (option A: elevated pipeline, 2026-06-26)
   Keep the New→Paid→Shipped pipeline, rebuilt in the Messages/cg-glass
   language: frosted columns, rich invoice cards, real toolbar.
   ════════════════════════════════════════════════════════════════ */
/* toolbar: search + count metric + smooth-gold Create + reload */
#appLayout #section-invoices .inv-pipeline-toolbar {
  display: flex !important; align-items: center !important; gap: 12px !important;
  margin-bottom: 20px !important; flex-wrap: wrap !important;
}
#appLayout #section-invoices .inv-pipe-search {
  flex: 1 !important; min-width: 220px !important;
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--m-line) !important;
  border-radius: 12px !important; padding: 11px 16px !important;
  color: var(--m-text) !important; font-family: var(--m-sans) !important; font-size: 13px !important; outline: none !important;
}
#appLayout #section-invoices .inv-pipe-search::placeholder { color: var(--m-text2) !important; }
#appLayout #section-invoices .inv-pipe-search:focus { border-color: var(--m-gold2) !important; }
#appLayout #section-invoices .inv-pipe-count {
  font-family: var(--m-sans) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--m-gold2) !important; white-space: nowrap !important;
}
#appLayout #section-invoices .btn-primary {
  background: var(--m-goldgrad) !important; background-image: var(--m-goldgrad) !important;
  color: #2A1808 !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 16px !important;
  padding: 11px 20px !important; font-family: var(--m-sans) !important; font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .2px !important; text-transform: none !important; text-shadow: none !important;
  box-shadow: 0 8px 20px -8px rgba(196,148,58,.5), 0 1px 0 rgba(255,255,255,.35) inset !important;
}
#appLayout #section-invoices .btn-primary:hover { filter: brightness(1.05) !important; transform: translateY(-2px) !important; }

/* pipeline grid + frosted columns (cg-glass language) */
#appLayout #section-invoices .inv-pipeline-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; align-items: start !important;
}
#appLayout #section-invoices .inv-pipeline-col {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(40px) saturate(155%) !important; -webkit-backdrop-filter: blur(40px) saturate(155%) !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 24px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 26px 54px -24px rgba(0,0,0,.5) !important;
  overflow: hidden !important; display: flex !important; flex-direction: column !important; min-height: 200px !important;
}
#appLayout #section-invoices .inv-pipeline-col-hdr,
#appLayout #section-invoices .inv-pipeline-col-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 16px 20px 13px !important; border-bottom: 1px solid var(--m-line) !important;
  font-family: var(--m-sans) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--m-gold2) !important;
  background: linear-gradient(180deg, rgba(196,148,58,.06), transparent) !important;
}
#appLayout #section-invoices .inv-pipeline-count {
  background: rgba(196,148,58,.16) !important; color: var(--m-gold3) !important;
  border: 1px solid rgba(196,148,58,.3) !important; font-size: 11px !important; font-weight: 700 !important;
  padding: 2px 9px !important; border-radius: 20px !important; font-family: var(--m-sans) !important; letter-spacing: 0 !important;
}
#appLayout #section-invoices .inv-pipeline-col-body {
  padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 11px !important; flex: 1 !important;
}
#appLayout #section-invoices .inv-pipeline-empty {
  text-align: center !important; padding: 30px 0 !important; font-size: 12px !important; color: var(--m-text2) !important;
}

/* rich invoice cards */
#appLayout #section-invoices .inv-pipeline-card {
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--m-line) !important;
  border-radius: 14px !important; overflow: hidden !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
#appLayout #section-invoices .inv-pipeline-card:hover {
  border-color: var(--m-line2) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(0,0,0,.32) !important;
}
#appLayout #section-invoices .inv-pipeline-card-open {
  display: block !important; width: 100% !important; text-align: left !important;
  padding: 14px 15px 12px !important; background: none !important; border: none !important; cursor: pointer !important;
}
#appLayout #section-invoices .inv-card-name {
  font-family: var(--m-play) !important; font-size: 14px !important; color: var(--m-text) !important;
  font-weight: 500 !important; line-height: 1.25 !important;
}
#appLayout #section-invoices .inv-card-email {
  font-size: 11px !important; color: var(--m-text2) !important; margin-top: 2px !important;
  word-break: break-all !important; line-height: 1.3 !important;
}
#appLayout #section-invoices .inv-card-figures {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important;
  gap: 8px !important; margin-top: 10px !important;
}
#appLayout #section-invoices .inv-card-amount {
  font-family: var(--m-play) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--m-gold3) !important;
}
#appLayout #section-invoices .inv-card-sub { font-size: 10.5px !important; color: var(--m-text2) !important; text-align: right !important; }

/* card actions — smooth small buttons */
#appLayout #section-invoices .inv-pipeline-card-actions {
  display: flex !important; gap: 6px !important; flex-wrap: wrap !important;
  padding: 8px 12px 11px !important; border-top: 1px solid var(--m-line) !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions button {
  font-family: var(--m-sans) !important; font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .03em !important; padding: 6px 11px !important; border-radius: 8px !important; cursor: pointer !important;
  border: 1px solid var(--m-line) !important; background: rgba(255,255,255,.04) !important; color: var(--m-text) !important;
  transition: background .15s, border-color .15s, color .15s !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions button:hover {
  background: rgba(196,148,58,.15) !important; border-color: var(--m-line2) !important; color: var(--m-gold3) !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-back { color: var(--m-text2) !important; opacity: .8 !important; }
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-del {
  color: #e58a8a !important; border-color: rgba(200,80,80,.28) !important; background: rgba(200,80,80,.08) !important; margin-left: auto !important;
}
#appLayout #section-invoices .inv-pipeline-card-actions .inv-pipe-btn-del:hover { background: rgba(200,80,80,.2) !important; border-color: rgba(200,80,80,.5) !important; color: #f0a0a0 !important; }

/* ════════════════════════════════════════════════════════════════
   INVOICES → Dashboard frosted standard (option A: elevate pipeline)
   Toolbar + 3 pipeline columns get the Messages frosted-glass card
   treatment; invoice cards inside stay refined dark (like thread cards
   inside a frosted body). Smooth gold "Create invoice". 2026-06-26.
   ════════════════════════════════════════════════════════════════ */
/* Toolbar = frosted card */
#appLayout #section-invoices .inv-pipeline-toolbar {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(42px) saturate(160%) !important; -webkit-backdrop-filter: blur(42px) saturate(160%) !important;
  border: 2px solid rgba(255,255,255,.55) !important; border-radius: 26px !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 30px 60px -20px rgba(30,40,60,.45), 0 12px 24px -12px rgba(30,40,60,.30) !important;
  padding: 15px 22px !important; gap: 14px !important; position: relative !important; margin-bottom: 0 !important;
}
#appLayout #section-invoices .inv-pipeline-toolbar::after {
  content:'' !important; position:absolute !important; inset:0 !important; border-radius:inherit !important; pointer-events:none !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%) !important;
}
#appLayout #section-invoices .inv-pipeline-toolbar > * { position: relative !important; z-index: 1 !important; }
#appLayout #section-invoices .inv-pipe-search {
  flex: 1 !important; min-width: 200px !important;
  background: rgba(0,0,0,.20) !important; border: 1px solid var(--m-line) !important; border-radius: 12px !important;
  padding: 10px 14px !important; color: var(--m-text) !important; font-family: var(--m-sans) !important; font-size: 13px !important; outline: none !important;
}
#appLayout #section-invoices .inv-pipe-search::placeholder { color: var(--m-text2) !important; }
#appLayout #section-invoices .inv-pipe-count {
  font-family: var(--m-sans) !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--m-gold2) !important; white-space: nowrap !important;
}
#appLayout #section-invoices .inv-pipeline-toolbar .btn-primary {
  background: var(--m-goldgrad) !important; background-image: var(--m-goldgrad) !important;
  color: #2A1808 !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 16px !important;
  text-transform: none !important; letter-spacing: .2px !important; font-weight: 800 !important; font-size: 13px !important;
  text-shadow: none !important; padding: 10px 18px !important; box-shadow: 0 8px 20px -8px rgba(196,148,58,.5) !important;
}

/* Pipeline columns = frosted cg-glass containers (stage separation kept) */
#appLayout #section-invoices .inv-pipeline-grid { margin-top: 18px !important; }
#appLayout #section-invoices .inv-pipeline-col {
  background: rgba(255,255,255,.15) !important;
  backdrop-filter: blur(42px) saturate(160%) !important; -webkit-backdrop-filter: blur(42px) saturate(160%) !important;
  border: 2px solid rgba(255,255,255,.55) !important; border-radius: 22px !important; overflow: hidden !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 30px 60px -20px rgba(30,40,60,.45), 0 12px 24px -12px rgba(30,40,60,.30) !important;
  position: relative !important;
}
#appLayout #section-invoices .inv-pipeline-col-hdr,
#appLayout #section-invoices .inv-pipeline-col-head {
  background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.16) !important;
  padding: 16px 18px 12px !important; color: var(--m-gold2) !important; position: relative !important; z-index: 1 !important;
}
#appLayout #section-invoices .inv-pipeline-col-body { position: relative !important; z-index: 1 !important; }
/* item cards inside = refined dark, readable on the frost */
#appLayout #section-invoices .inv-pipeline-card {
  background: rgba(18,13,8,.6) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 13px !important;
  backdrop-filter: blur(6px) !important;
}
#appLayout #section-invoices .inv-pipeline-card:hover {
  border-color: var(--m-line2) !important; background: rgba(18,13,8,.78) !important; transform: translateY(-1px) !important;
}
#appLayout #section-invoices .inv-card-name {
  font-family: var(--m-play) !important; font-size: 14px !important; color: var(--m-text) !important; font-weight: 500 !important; margin-bottom: 2px !important;
}
#appLayout #section-invoices .inv-card-email { font-size: 11px !important; color: var(--m-text2) !important; }
#appLayout #section-invoices .inv-card-figures { display: flex !important; align-items: baseline !important; gap: 9px !important; margin-top: 7px !important; }
#appLayout #section-invoices .inv-card-amount {
  font-family: var(--m-play) !important; font-size: 16px !important; color: var(--m-gold3) !important; font-weight: 600 !important;
}
#appLayout #section-invoices .inv-card-sub { font-size: 11px !important; color: var(--m-text2) !important; }

/* Invoice cards must NOT shrink — with many cards in a column, flex-shrink was
   crushing them to ~28px and overflow:hidden clipped the content (blank pills).
   Keep natural height; the column body (overflow:auto) scrolls instead. */
#appLayout #section-invoices .inv-pipeline-card { flex-shrink: 0 !important; }
#appLayout #section-invoices .inv-pipeline-col-body { overflow-y: auto !important; max-height: 64vh !important; }

/* Order-detail modal body must scroll — it uses .invoice-modal-body (not
   .invoice-modal-scroll), so tall invoices overflowed the capped dialog and got
   cut off. Make it the flex scroll region; head/foot stay pinned. */
.invoice-modal-dialog .invoice-modal-body {
  flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important;
  padding: 16px 22px 22px !important; -webkit-overflow-scrolling: touch !important;
}
.invoice-modal-dialog .invoice-modal-head,
.invoice-modal-dialog .invoice-modal-foot { flex: 0 0 auto !important; }

/* ──────────────── PO + VENDOR PANE — DARK MAISON THEME ───────────────── */
/* Replaces the light-theme white/blue defaults shipped in admin-dashboard.css */

/* Container wrap */
#appLayout .inv-vendors-wrap,
#appLayout .inv-po-wrap {
  background: var(--m-glass) !important;
  border: 1px solid var(--m-line) !important;
  box-shadow: var(--m-shadow) !important;
}

/* Empty state */
#appLayout .inv-empty-pane {
  color: var(--m-muted2) !important;
}
#appLayout .inv-empty-pane strong { color: var(--m-text) !important; }

/* Vendor card */
#appLayout .inv-vendor-card {
  background: var(--m-glass2) !important;
  border: 1px solid var(--m-line) !important;
}
#appLayout .inv-vendor-card:hover {
  border-color: var(--m-line2) !important;
  box-shadow: 0 2px 8px rgba(196,148,58,.10) !important;
}
#appLayout .inv-vendor-card-name { color: var(--m-text) !important; }
#appLayout .inv-vendor-card-contact { color: var(--m-text2) !important; }
#appLayout .inv-vendor-card-contact strong { color: var(--m-text) !important; }
#appLayout .inv-vendor-card-meta { color: var(--m-muted2) !important; }
#appLayout .inv-vendor-card-meta a { color: var(--m-gold2) !important; }
#appLayout .inv-vendor-card-edit-btn {
  background: rgba(196,148,58,.08) !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-gold2) !important;
}
#appLayout .inv-vendor-card-edit-btn:hover {
  background: rgba(196,148,58,.16) !important;
  border-color: var(--m-line2) !important;
}

/* PO card */
#appLayout .inv-po-card {
  background: var(--m-glass2) !important;
  border: 1px solid var(--m-line) !important;
}
#appLayout .inv-po-card:hover { border-color: var(--m-line2) !important; }
#appLayout .inv-po-card-num { color: var(--m-text) !important; }
#appLayout .inv-po-card-vendor { color: var(--m-text2) !important; }
#appLayout .inv-po-card-meta { color: var(--m-muted2) !important; }

/* Status badges — stay distinct but warm */
#appLayout .inv-po-card-status--draft {
  background: rgba(196,148,58,.14) !important;
  color: var(--m-gold3) !important;
}
#appLayout .inv-po-card-status--sent {
  background: rgba(196,148,58,.08) !important;
  color: var(--m-gold2) !important;
}
#appLayout .inv-po-card-status--received {
  background: rgba(111,139,120,.16) !important;
  color: var(--m-sage2) !important;
}

/* PO card action buttons */
#appLayout .inv-po-card-btn {
  background: transparent !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-text2) !important;
}
#appLayout .inv-po-card-btn:hover {
  background: rgba(196,148,58,.08) !important;
  border-color: var(--m-line2) !important;
  color: var(--m-text) !important;
}
#appLayout .inv-po-card-btn--primary {
  border-color: rgba(111,139,120,.35) !important;
  color: var(--m-sage2) !important;
}
#appLayout .inv-po-card-btn--primary:hover {
  background: rgba(111,139,120,.10) !important;
}
#appLayout .inv-po-card-btn--danger {
  border-color: rgba(184,131,106,.30) !important;
  color: var(--m-blush) !important;
}
#appLayout .inv-po-card-btn--danger:hover {
  background: rgba(184,131,106,.10) !important;
}

/* PO modal inner elements */
#appLayout .inv-po-section-title { color: var(--m-text) !important; }
#appLayout .inv-po-section-hint { color: var(--m-muted2) !important; }
#appLayout .inv-po-section-head { border-bottom-color: var(--m-line) !important; }
#appLayout .inv-po-vendor-meta { color: var(--m-muted2) !important; }
#appLayout .inv-po-totals { border-top-color: var(--m-line) !important; }
#appLayout .inv-po-totals-label { color: var(--m-muted2) !important; }
#appLayout .inv-po-totals-value { color: var(--m-gold2) !important; }

/* Add line button */
#appLayout .inv-po-add-line {
  background: transparent !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-gold2) !important;
}
#appLayout .inv-po-add-line:hover {
  background: rgba(196,148,58,.08) !important;
  border-color: var(--m-line2) !important;
}

/* PO line row */
#appLayout .inv-po-line {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--m-line) !important;
}
#appLayout .inv-po-line-name { color: var(--m-text) !important; }
#appLayout .inv-po-line-total { color: var(--m-text) !important; }
#appLayout .inv-po-line-name-input,
#appLayout .inv-po-line-qty,
#appLayout .inv-po-line-price {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--m-line) !important;
  color: var(--m-text) !important;
}
#appLayout .inv-po-line-name-input:focus,
#appLayout .inv-po-line-qty:focus,
#appLayout .inv-po-line-price:focus {
  border-color: var(--m-line2) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196,148,58,.13) !important;
}
#appLayout .inv-po-empty {
  color: var(--m-muted2) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px dashed var(--m-line) !important;
}