/**
 * NorthPathOS · Premium theme overrides
 *
 * AGENT README:
 *   Loaded after the monolith inline <style> block via <link> in <head>. CSS
 *   specificity matches the inline dark overrides because both use the same
 *   body[data-theme="..."] selector pattern.
 *
 *   To re-skin the premium palette without touching code, override the CSS
 *   custom properties in the :root block below (or in a tenant-scoped sheet
 *   like premium.<tenant_id>.css). The structural rules below assume the
 *   variables are set — they don't hardcode hex values for the chrome.
 *
 *   Tenants seeded with theme="premium" land here on boot. Topbar toggle
 *   cycles light → dark → premium → light. Persists to localStorage 'npos_theme'.
 *
 * HUMAN README:
 *   Premium = deep navy + warm gold accent. Suited for high-tier clinic
 *   tenants and NorthPath operator dashboard. To preview: open browser console,
 *   run `NPOS.theme.apply('premium')`.
 */

body[data-theme="premium"] {
  /* ── Surfaces ──────────────────────────────────────────────────────────
     Lifted navy (2026-05-26 operator feedback — was too dark). Surface cards
     also lifted to keep contrast with bg. Watchtower-style grid overlay
     adds depth without darkness. */
  --bg:        #131e36;
  --surface:   #1c2848;
  --surface-2: #243358;
  --border:    rgba(212, 160, 23, 0.18);
  --grid-line: rgba(212, 160, 23, 0.04);

  /* ── Text ──────────────────────────────────────────────────────────────
     Warm off-white for body, muted gold-gray for secondary. */
  --text:         #f5ecd5;
  --muted:        #8a8170;
  --muted-strong: #b0a78f;
  --black:        #f5ecd5; /* invert — most usages are text color, not pure black */

  /* ── Grayscale inversion (matches dark theme pattern) ──────────────────
     Legacy code references --white as a surface; map to deep surface. */
  --white: #131b2e;
  --g50:   #131b2e;
  --g100:  #1a2440;
  --g200:  #243155;
  --g300:  #34416f;
  --g400:  #6b7280;
  --g500:  #94a3b8;
  --g600:  #cbd5e1;
  --g700:  #e2e8f0;
  --g800:  #f1f5f9;

  /* ── Accent colors ─────────────────────────────────────────────────────
     Gold/amber as the primary brand accent. Blue retained for primary action
     buttons so destructive-vs-info contrast stays readable. */
  --blue:        #4a90e2;
  --blueH:       #6ba4eb;
  --blue-light:  #1e3a8a;
  --green:       #10b981;
  --green-light: #064e3b;
  --red:         #ef4444;
  --red-light:   #7f1d1d;
  --amber:       #d4a017;        /* deeper, richer gold than light/dark */
  --amber-light: #6b4d0a;
  --purple:      #b794f4;
  --purple-light:#4c1d95;

  /* ── Premium-specific gold accent (NEW variable — used selectively) ─── */
  --gold:        #d4a017;
  --gold-bright: #f0c040;
  --gold-soft:   rgba(212, 160, 23, 0.12);

  /* ── Inline-style fallback bridges (2026-06-01 fix) ─────────────────────
     Some JS-built panels (notifications, cmd-k, tooltips) hard-code inline
     `color: var(--text-main, #1b1a17)` style strings with light-theme fallback
     literals. Without a premium-side definition of those variables, the
     fallback wins → black text on navy bg. Map every common legacy var name
     to the premium palette so any inline use resolves to a readable color.
     Notification dropdown footer also used `var(--bg-card, #f8f8f8)` which
     produced the white footer bar the operator flagged. */
  --text-main:    var(--text);
  --text-muted:   var(--muted-strong);
  --text-strong:  var(--text);
  --bg-card:      var(--surface-2);
  --bg-main:      var(--surface);
  --border-color: var(--border);
  --surface-card: var(--surface);
  --muted:        var(--muted-strong); /* upgrade ambient muted for better legibility */

  /* 2026-06-09 — premium values for the previously-undefined tokens (navy/gold).
     Text tokens go cream/light; accents stay vivid on navy; surfaces dark navy. */
  --g050:#131b2e; --g900:var(--text); --ink:var(--text);
  --card:var(--surface-2); --line:var(--border); --shadow:rgba(0,0,0,.55);
  --cream:#f5ecd5; --cream-muted:#c4bb9c;
  --blue-deep:#93c5fd; --green-deep:#6ee7b7; --amber-deep:#facc15; --purple-deep:#c4b5fd;
  --info:#60a5fa; --success:#34d399; --cyan:#22d3ee;
  --accent-dark:var(--gold); --accent-soft:var(--surface-2); --on-accent:var(--bg);

  /* Watchtower-style grid crosshatch — faint gold, 32px on 32px.
     2026-05-26 operator request: surfaces feel a touch flat without depth;
     grid adds quiet structure. Opacity is intentionally low (~6%) so it
     reads as texture, not pattern. */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* ── Chrome overrides ──────────────────────────────────────────────────── */
body[data-theme="premium"] .topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(212, 160, 23, 0.06);
}
/* 2026-05-26 — "Path" reverts to blue so it doesn't compete visually with the
   gold badge next to it (operator: yellow letters against yellow pill blur).
   Badge gets a deep royal-indigo text with a whisper shadow for contrast
   against the gold pill. Stays distinct from the blue "Path" next to it. */
/* 2026-05-30 — wordmark updated for the rebranded structure:
   "Faro" stays white (--text), "Salud" gets the blue accent.
   The Panel pill goes GOLD with deep-navy text per operator spec.
   2026-06-01 — !important added because the base .topbar-badge rule
   (lib/components.css:659 — dark bg + #fff text) beat us through load order.
   (Comment originally blamed lib/layout.css:47, but that file was never
   linked — retired 2026-06-10.) Operator wants the pill text in the topbar
   dark-blue (var(--bg) = #131e36), not the near-black it was. */
/* 2026-06-01 — bumped to html-prefixed (0,2,1,1) so absolutely nothing in the
   monolith or any tenant stylesheet can win. Faro=WHITE, Salud=BLUE,
   Panel pill text = topbar dark-blue. Operator asked for this 20+ times. */
html body[data-theme="premium"] .topbar-brand,
html body[data-theme="premium"] .topbar-logo .topbar-brand,
html body[data-theme="premium"] .topbar .topbar-brand {
  color: #ffffff !important;
}
/* "Salud" — keep the existing blue accent but force-override anything else */
html body[data-theme="premium"] .topbar-brand-accent,
html body[data-theme="premium"] .topbar-logo .topbar-brand-accent,
html body[data-theme="premium"] .topbar .topbar-brand-accent,
html body[data-theme="premium"] .topbar-logo span.topbar-brand-accent {
  color: var(--blue) !important;
}
/* "Panel" pill — gold pill, dark-navy text matching topbar background.
   Two cascading selectors so even responsive.css / components.css can't beat us. */
html body[data-theme="premium"] .topbar-badge,
html body[data-theme="premium"] .topbar .topbar-badge,
html body[data-theme="premium"] .topbar-logo .topbar-badge {
  background: var(--gold) !important;
  color: var(--bg) !important;                            /* dark-blue text matches topbar bg per operator */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
  border-color: rgba(0, 0, 0, .25) !important;
  font-weight: 800 !important;
}
/* Floating panels (Cmd+K, notification dropdown, modals) — were white in
   premium because nothing overrode the var(--bg-main, #fff) fallback.
   !important to beat inline backgrounds set by the JS that builds them. */
body[data-theme="premium"] .cmdk-box,
body[data-theme="premium"] #notif-dropdown,
body[data-theme="premium"] .modal-box {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important;
}
body[data-theme="premium"] .cmdk-box input,
body[data-theme="premium"] #notif-dropdown input {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body[data-theme="premium"] .cmdk-box kbd,
body[data-theme="premium"] #notif-dropdown kbd {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
body[data-theme="premium"] .cmdk-item:hover,
body[data-theme="premium"] [data-cmdk-idx]:hover,
body[data-theme="premium"] [data-notif-id]:hover {
  background: var(--surface-2) !important;
}
/* 2026-06-01 — kill the white text + white footer bar in the notifications
   dropdown. The inline styles in lib/notifications.js use hard fallbacks
   (color:var(--text-main,#1b1a17), background:var(--bg-card,#f8f8f8)) which
   evaluated to light-theme colors before the variable bridges above were
   added. These additional overrides win on specificity so the row body
   inherits readable colors and the footer bar matches the dark surface. */
body[data-theme="premium"] #notif-dropdown,
body[data-theme="premium"] #notif-dropdown * {
  color: var(--text) !important;
}
body[data-theme="premium"] #notif-dropdown [data-notif-id] > div > div:first-child {
  color: var(--text) !important;
}
body[data-theme="premium"] #notif-dropdown > div:last-child {
  /* The footer bar with "Actualiza cada 30s · severidad…". */
  background: var(--surface) !important;
  color: var(--muted-strong) !important;
  border-top-color: var(--border) !important;
}
body[data-theme="premium"] #notif-dropdown > div:first-child {
  /* Header row with "Notificaciones · X total · Y sin leer". */
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
body[data-theme="premium"] #notif-dropdown [data-notif-mark-all] {
  background: var(--surface-2) !important;
  color: var(--gold-bright) !important;
  border: 1px solid var(--border) !important;
}
body[data-theme="premium"] #notif-dropdown [data-notif-mark-all]:hover {
  background: var(--gold-soft) !important;
}
/* Row separators between notifications use border-color:var(--border-color) fallback
   → too bright in premium. Tone to subtle gold border. */
body[data-theme="premium"] #notif-dropdown [data-notif-id] {
  border-bottom-color: var(--border) !important;
}
body[data-theme="premium"] .all-apps-grid > div {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body[data-theme="premium"] .topbar-tenant { background: var(--surface-2); color: var(--gold-bright); border-color: var(--border); }
body[data-theme="premium"] .topbar-context-widget {
  background: var(--gold-soft);
  color: var(--gold-bright);
  border-color: var(--gold);
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
body[data-theme="premium"] .sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
body[data-theme="premium"] .nav-item       { color: var(--g600); }
body[data-theme="premium"] .nav-item:hover { background: var(--g100); color: var(--gold-bright); }
body[data-theme="premium"] .nav-item.active {
  background: var(--gold-soft);
  color: var(--gold-bright);
  border-left: 2px solid var(--gold);
  padding-left: calc(0.75rem - 2px);
}

/* ── Cards (stat / section / dash / chatter / record list) ─────────── */
body[data-theme="premium"] .stat-card,
body[data-theme="premium"] .section-card,
body[data-theme="premium"] .all-apps-tile,
body[data-theme="premium"] .dash-module-card,
body[data-theme="premium"] .eco-tile,
body[data-theme="premium"] .record-list,
body[data-theme="premium"] .chatter-panel,
body[data-theme="premium"] .login-card {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body[data-theme="premium"] .stat-value.stat-good { color: var(--gold-bright); }
body[data-theme="premium"] .stat-value.stat-warn { color: var(--amber); }
body[data-theme="premium"] .stat-label { color: var(--muted-strong); letter-spacing: 0.04em; }

body[data-theme="premium"] .dash-module-card:hover {
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* ── 2026-06-01 — KANBAN COLUMNS + INNER CARDS (Projects, Notes, CRM) ──
   The pm.js / notes.js / crm.js modules build kanban columns with inline
   styles `background: var(--bg-card, #f8f8f8)` and inner cards with
   `background: var(--bg-main, #fff)`. In premium the var-bridge maps these
   to dark surface tones, but operator was still seeing white blocks
   (likely stale deploy). Force the override with !important so even if
   the bridge fails, we win on specificity. */
html body[data-theme="premium"] .pm-stage-col,
html body[data-theme="premium"] .kanban-col,
html body[data-theme="premium"] [class*="stage-col"],
html body[data-theme="premium"] [class*="kanban-col"] {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
/* Project / note / opportunity cards inside kanban columns */
html body[data-theme="premium"] .pm-stage-col a[data-card-id],
html body[data-theme="premium"] .pm-stage-col [class*="card"],
html body[data-theme="premium"] .kanban-col [class*="card"],
html body[data-theme="premium"] [data-stage] a[href*="/record/"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
/* The "Vacío" empty-state inside kanban columns */
html body[data-theme="premium"] .pm-stage-col p,
html body[data-theme="premium"] .kanban-col p,
html body[data-theme="premium"] [data-stage] p {
  color: var(--muted-strong) !important;
}

/* Calendar cells — make the day number centered (operator: "look weird like that") */
html body[data-theme="premium"] .cal-cell,
body[data-theme="dark"] .cal-cell,
body[data-theme="light"] .cal-cell {
  text-align: center;
}
html body[data-theme="premium"] .cal-cell { background: var(--surface-2) !important; }

/* ── Buttons ────────────────────────────────────────────────────────── */
body[data-theme="premium"] .btn {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="premium"] .btn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}
body[data-theme="premium"] .btn-primary {
  background: var(--gold);
  color: #1a1a1a;
  border-color: var(--gold);
  font-weight: 700;
}
/* Lock font color across all interactive states (2026-05-26 operator fix —
   was bleeding to gold-bright on hover and dropping legibility on Guardar /
   Registrar buttons). The background brightens for affordance; text stays
   near-black for contrast. */
body[data-theme="premium"] .btn-primary:hover,
body[data-theme="premium"] .btn-primary:active,
body[data-theme="premium"] .btn-primary:focus,
body[data-theme="premium"] .btn-primary:focus-visible {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #1a1a1a;
}
/* Apply the same lock to btn-green (used by Avanzar) on premium so the
   green-on-text contrast doesn't shift either. */
body[data-theme="premium"] .btn-green,
body[data-theme="premium"] .btn-green:hover,
body[data-theme="premium"] .btn-green:active,
body[data-theme="premium"] .btn-green:focus {
  color: #ffffff;
}
body[data-theme="premium"] .btn-green { background: var(--green); color: #fff; border-color: var(--green); }
body[data-theme="premium"] .btn-ghost { background: transparent; }

body[data-theme="premium"] .topbar-icon-btn { color: var(--g600); }
body[data-theme="premium"] .topbar-icon-btn:hover {
  background: var(--gold-soft);
  color: var(--gold-bright);
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
body[data-theme="premium"] input,
body[data-theme="premium"] select,
body[data-theme="premium"] textarea {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
body[data-theme="premium"] input:focus,
body[data-theme="premium"] select:focus,
body[data-theme="premium"] textarea:focus {
  border-color: var(--gold);
  outline: 1px solid var(--gold-soft);
}
body[data-theme="premium"] .login-input { border-color: var(--border); }
body[data-theme="premium"] .login-input:focus { border-color: var(--gold); }

/* ── Tabs / pills ───────────────────────────────────────────────────── */
body[data-theme="premium"] .tab-btn       { color: var(--g600); }
body[data-theme="premium"] .tab-btn:hover { color: var(--gold-bright); }
body[data-theme="premium"] .tab-btn.active {
  background: var(--gold-soft);
  color: var(--gold-bright);
  border-bottom: 2px solid var(--gold);
}

/* ── Empty / hint text ──────────────────────────────────────────────── */
body[data-theme="premium"] .empty-row,
body[data-theme="premium"] .empty-page,
body[data-theme="premium"] .page-subtitle { color: var(--muted); }

/* ── Backdrop (mobile sidebar overlay, modals) ──────────────────────── */
body[data-theme="premium"] #sidebar-backdrop { background: rgba(0, 0, 0, 0.65); }

/* ── Modal contrast (2026-05-26 operator feedback) ────────────────────
   Premium uses navy bg with gold accents. A modal that uses the same navy
   surface as the page background loses visual hierarchy. Gold border + a
   touch darker overlay + inner gold glow makes confirm dialogs and other
   modals unmistakably foreground. */
body[data-theme="premium"] .modal-overlay {
  background: rgba(6, 10, 28, 0.72);
}
body[data-theme="premium"] .modal-box,
body[data-theme="premium"] .modal-card {
  background: var(--surface-2);
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 16px 40px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(212, 160, 23, 0.10);
}
body[data-theme="premium"] .modal-msg {
  color: var(--text);
}

/* ── E-commerce bridge (the big CTA on dashboard) ───────────────────── */
body[data-theme="premium"] .ecom-bridge {
  background: linear-gradient(135deg, #1a2440 0%, #2a1a05 100%);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}
body[data-theme="premium"] .ecom-bridge .title,
body[data-theme="premium"] .ecom-bridge-arrow { color: var(--gold-bright); }

/* ── Clinical summary pane in premium (defense-in-depth) ─────────────
   components.css already gates this — these rules duplicate inside the
   premium stylesheet so they win against any later white-leaking rule.
   Use !important since this is a hard brand requirement. */
body[data-theme="premium"] .cs-pane,
body[data-theme="premium"] .clinical-summary-panel .cs-pane,
body[data-theme="premium"] .section-card .cs-pane {
  background: #1c2848 !important;
  color: #f5ecd5 !important;
  border-color: #243358 !important;
}
body[data-theme="premium"] .cs-pane .product-table { background: transparent !important; }
body[data-theme="premium"] .cs-pane .product-table th {
  background: #243358 !important;
  color: #c4bb9c !important;
}
body[data-theme="premium"] .cs-pane .product-table td {
  color: #f5ecd5 !important;
  border-color: #243358 !important;
}
body[data-theme="premium"] .cs-pane .empty-sub { color: #c4bb9c !important; }
body[data-theme="premium"] .cs-pane .cell-meta { color: #c4bb9c !important; }

/* Quick-entry modals inherit the modal-box rules; ensure body bg matches */
body[data-theme="premium"] .modal-overlay .modal-box {
  background: #1c2848 !important;
  color: #f5ecd5 !important;
  border: 1px solid #243358;
}
body[data-theme="premium"] .modal-overlay .modal-box .field-input {
  background: #131e36;
  color: #f5ecd5;
  border-color: #243358;
}
body[data-theme="premium"] .modal-overlay .modal-box label { color: #c4bb9c; }
body[data-theme="premium"] .modal-overlay .modal-box h3 { color: var(--accent); }

/* Premium scrollbars — gold-tinted */
body[data-theme="premium"] ::-webkit-scrollbar-thumb {
  background: rgba(212,160,23,.45) !important;
  background-clip: padding-box !important;
}
body[data-theme="premium"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
  background-clip: padding-box !important;
}
