/**
 * 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);

  /* 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. */
body[data-theme="premium"] .topbar-logo span { color: var(--blue); }
body[data-theme="premium"] .topbar-badge {
  background: var(--gold);
  color: #060a1c;                                    /* near-black navy — high contrast against gold pill */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);    /* subtle top-light lift for embossed feel */
}
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%);
}

/* ── 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); }
