/* premium.css — the ONE shared premium surface for every Crystal app page.
   Lifted from index.html's exact glassmorphism system (palette + glass cards + layered depth +
   accent glow) with a COMPLETE body.light-mode remap so light mode works everywhere. Load AFTER
   theme.css (theme.css owns the animated background + theme panel + accent vars; this owns the
   page surface — cards, header, tabs, tables, inputs, pills). Pages must NOT redefine these; add
   only page-specific layout. This is the fix for "every page invented its own bleak CSS". */

:root{
  color-scheme: dark;   /* render native controls (esp. <select> option popups) dark — without this,
                           Windows/Chrome draws the popup light while option text stays white = invisible */
  --glass-bg:rgba(255,255,255,.035);
  --glass-bg2:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.08);
  --glass-border-hi:rgba(255,255,255,.14);
  --glass-blur:blur(20px) saturate(180%);
  --glass-blur-sm:blur(12px) saturate(160%);
  --text:#f0f0f0; --muted:#888898; --muted2:#b0b8c4;
  --surface:rgba(255,255,255,.04); --surface2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);
  --danger:#f05252; --warn:#f6a623; --success:#34d399; --cyan:#22d3ee; --purple:#b77aff;
  --glow-red:0 0 32px rgba(var(--accent-rgb),.35);
  --r:14px; --r-sm:10px;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --shadow-card:0 10px 34px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-hi:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),0 0 60px rgba(var(--accent-rgb),.05);
}

/* ── The base typeface — APPLIED, not just declared ───────────────────── */
/* `--font` existed here from the start but nothing ever used it: every page that looked right
   was setting `font-family:var(--font)` on its own `html,body`, and any page that forgot fell
   back to the browser's default SERIF. That is a shared-system job, not something each page
   should have to remember, so it lives here now (found on crystal_training.html 2026-07-27;
   deals.html and teach.html had the same defect and are fixed by this one line).
   Pages that still declare it themselves are unaffected — they use the same variable. */
html,body{ font-family:var(--font); }
/* Form controls and buttons do NOT inherit the page font by default — without this every
   input and textarea renders in the browser's monospace/system default. */
input,select,textarea,button{ font-family:inherit; }

/* ── Glass mixins ─────────────────────────────────────────────────────── */
.glass{ background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); }
.glass-hi{ background:var(--glass-bg2); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-hi); }

/* ── Premium card (frosted, layered depth, faint top-edge highlight) ──── */
.panel,.pcard,.kpi{
  position:relative; background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border); border-radius:var(--r);
  box-shadow:var(--shadow-card);
}
.pcard,.kpi{ padding:16px 18px; transition:border-color .18s,box-shadow .18s,transform .18s,background .18s; }
.pcard:hover,.kpi:hover{ border-color:var(--glass-border-hi); box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07),0 0 40px rgba(var(--accent-rgb),.06); }
.kpi::after{ content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.55),transparent); opacity:.5; }
.kpi .l{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.kpi .v{ font-size:24px; font-weight:800; margin-top:6px; letter-spacing:-.4px; }
.kpi .s{ color:var(--muted); font-size:12px; margin-top:2px; }

/* ── Header / topbar ──────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; padding:0 20px; height:56px;
  background:rgba(8,8,8,.86); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(var(--accent-rgb),.15); box-shadow:0 1px 0 rgba(var(--accent-rgb),.06),0 4px 24px rgba(0,0,0,.4);
}
.brand{ font-weight:800; font-size:16px; letter-spacing:-.3px;
  background:linear-gradient(135deg,#fff 30%,var(--accent) 72%,var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand small{ -webkit-text-fill-color:var(--muted); color:var(--muted); font-weight:600; }
.sp{ flex:1; }
.tl{ color:var(--muted); text-decoration:none; font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:9px; border:1px solid transparent; cursor:pointer; background:none; transition:all .15s; }
.tl:hover{ color:var(--text); background:rgba(255,255,255,.06); border-color:var(--glass-border-hi); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{ cursor:pointer; border:none; border-radius:10px; font-family:inherit; font-weight:700; font-size:13.5px; padding:9px 16px;
  color:#fff; background:linear-gradient(135deg,var(--accent),#990018); box-shadow:0 4px 18px rgba(var(--accent-rgb),.38); letter-spacing:.2px; transition:transform .15s,box-shadow .15s,filter .15s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 26px rgba(var(--accent-rgb),.5); }
.btn:active{ transform:translateY(0); }
.btn-ghost{ background:var(--glass-bg2); color:var(--text); border:1px solid var(--glass-border-hi); box-shadow:none; font-weight:600; }
.btn-ghost:hover{ background:rgba(255,255,255,.1); box-shadow:none; transform:translateY(-1px); }
.btn-sm{ padding:6px 12px; font-size:12.5px; border-radius:8px; }

/* ── Inputs ───────────────────────────────────────────────────────────── */
input,select,textarea{ background:var(--surface2); border:1px solid var(--glass-border); color:var(--text); border-radius:9px; padding:9px 12px; font-size:13.5px; font-family:inherit; outline:none; transition:border-color .18s,background .18s,box-shadow .18s; }
input:focus,select:focus,textarea:focus{ border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.05); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }
/* Native <option> popups: --surface2 is translucent glass (can't back a popup over the OS's white),
   so give options a SOLID dark bg + light text. Cross-browser backstop to color-scheme above — fixes
   the white-on-white dropdown items reported on Windows/Chrome dark mode. */
select option,select optgroup{ background:#1b1b22; color:#f0f0f0; }
input::placeholder,textarea::placeholder{ color:var(--muted); }
input[readonly]{ opacity:.85; }

/* ── Tables ───────────────────────────────────────────────────────────── */
table.list,table.data{ width:100%; border-collapse:collapse; }
table.list th,table.data th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--glass-border); }
table.list td,table.data td{ padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13.5px; }
table.data th{ padding:8px 10px; } table.data td{ padding:8px 10px; font-size:13px; }
table.list tbody tr{ cursor:pointer; transition:background .12s; }
table.list tbody tr:hover td{ background:rgba(255,255,255,.03); }
table.data tfoot td{ font-weight:800; border-top:1px solid var(--glass-border); }

/* ── Pills / status ───────────────────────────────────────────────────── */
.pill{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:20px; background:rgba(var(--accent-rgb),.14); color:var(--text); border:1px solid var(--glass-border-hi); }
.ph-intake{ background:rgba(100,120,255,.18); border-color:rgba(100,120,255,.3); }
.ph-quote{ background:rgba(246,166,35,.18); color:var(--warn); border-color:rgba(246,166,35,.32); }
.ph-wip{ background:rgba(52,211,153,.16); color:var(--success); border-color:rgba(52,211,153,.3); }
.ph-resolution{ background:rgba(148,163,184,.18); color:var(--muted2); border-color:rgba(148,163,184,.28); }
.ph-closure{ background:rgba(148,163,184,.1); color:var(--muted); }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:12px 20px 0; border-bottom:1px solid var(--glass-border); position:sticky; background:rgba(16,16,20,.92); backdrop-filter:blur(18px); z-index:2; }
.tab{ cursor:pointer; font-size:13px; font-weight:650; padding:9px 14px; border-radius:9px 9px 0 0; color:var(--muted); border:1px solid transparent; border-bottom:none; transition:all .15s; }
.tab:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.tab.on{ color:var(--accent2); background:var(--glass-bg2); border-color:var(--glass-border-hi); box-shadow:inset 0 2px 0 var(--accent); }
.tabpane{ display:none; } .tabpane.on{ display:block; }

/* status chips (job workspace) */
.statuses{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.st{ cursor:pointer; font-size:12px; font-weight:640; padding:6px 12px; border-radius:18px; border:1px solid var(--glass-border); background:var(--glass-bg); color:var(--muted); transition:all .15s; }
.st:hover{ color:var(--text); border-color:rgba(var(--accent-rgb),.5); }
.st.on{ background:rgba(var(--accent-rgb),.2); color:var(--text); border-color:rgba(var(--accent-rgb),.6); box-shadow:0 0 18px rgba(var(--accent-rgb),.2); }

/* ── Fields / sections ────────────────────────────────────────────────── */
.fld{ margin-bottom:11px; } .fld label{ display:block; font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:5px; }
.fld input,.fld select,.fld textarea{ width:100%; }
.sec{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:800; margin:20px 0 10px; border-bottom:1px solid var(--glass-border); padding-bottom:7px; }
.sec:first-child{ margin-top:4px; }
.muted{ color:var(--muted); font-size:13px; }
.empty{ color:var(--muted); text-align:center; padding:44px; }

/* ── Modal / sheet overlays ───────────────────────────────────────────── */
.backdrop{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto; }
.backdrop.on{ display:flex; }
.sheet,.modal{ width:100%; background:rgba(18,18,22,var(--bg-overlay-opacity,.92)); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border-hi); border-radius:18px; box-shadow:var(--shadow-hi); }
.sheet{ max-width:1080px; } .modal{ max-width:720px; }
.mhead{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--glass-border); position:sticky; top:0; background:rgba(18,18,22,.96); z-index:3; border-radius:18px 18px 0 0; }
.mtitle{ font-weight:750; font-size:16px; }
.mx{ cursor:pointer; background:rgba(255,255,255,.05); border:1px solid var(--glass-border); border-radius:8px; color:var(--muted); font-size:16px; width:30px; height:30px; }
.mx:hover{ color:var(--text); background:rgba(255,255,255,.1); }
.mbody{ padding:18px 22px 26px; }
.save-bar{ display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:90; background:rgba(20,20,24,.96); backdrop-filter:blur(18px); border:1px solid var(--glass-border-hi); border-left:3px solid var(--accent); border-radius:10px; padding:11px 18px; font-size:13px; box-shadow:0 14px 40px rgba(0,0,0,.5); display:none; }

/* ══════════════════════════════════════════════════════════════════════
   LIGHT MODE — complete remap (theme.js toggles body.light-mode).
   Solid white cards, soft neutral shadows, backdrop-filter OFF, dark text.
   ══════════════════════════════════════════════════════════════════════ */
body.light-mode{
  color-scheme: light;   /* native controls render light in light mode */
  --glass-bg:rgba(255,255,255,.82); --glass-bg2:#fff; --glass-border:rgba(0,0,0,.09); --glass-border-hi:rgba(0,0,0,.14);
  --text:#111827; --muted:#6b7280; --muted2:#4b5563;
  --surface:rgba(0,0,0,.035); --surface2:#fff; --border:rgba(0,0,0,.10);
  --danger:#dc2626; --warn:#d97706; --success:#059669; --cyan:#0891b2; --purple:#7c3aed;
  --glow-red:0 0 20px rgba(var(--accent-rgb),.1);
  --shadow-card:0 2px 10px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --shadow-hi:0 24px 60px rgba(0,0,0,.18);
}
body.light-mode .panel,body.light-mode .pcard,body.light-mode .kpi{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-color:rgba(0,0,0,.09); box-shadow:var(--shadow-card); }
body.light-mode .pcard:hover,body.light-mode .kpi:hover{ border-color:rgba(0,0,0,.16); box-shadow:0 6px 20px rgba(0,0,0,.1); }
body.light-mode .kpi::after{ opacity:.35; }
body.light-mode .glass{ background:rgba(255,255,255,.85) !important; backdrop-filter:none !important; border-color:rgba(0,0,0,.09); }
body.light-mode .glass-hi{ background:#fff !important; backdrop-filter:none !important; border-color:rgba(0,0,0,.12); }
body.light-mode .topbar{ background:rgba(255,255,255,.95) !important; border-bottom-color:rgba(0,0,0,.1) !important; box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.07) !important; }
body.light-mode .tl{ color:#374151; }
body.light-mode .tl:hover{ color:#111; background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.14); }
body.light-mode .btn-ghost{ background:rgba(0,0,0,.04); color:#111; border-color:rgba(0,0,0,.14); }
body.light-mode .btn-ghost:hover{ background:rgba(0,0,0,.08); }
body.light-mode input,body.light-mode select,body.light-mode textarea{ background:#fff; border-color:rgba(0,0,0,.14); color:#111; }
body.light-mode select option,body.light-mode select optgroup{ background:#fff; color:#111; }
body.light-mode input:focus,body.light-mode select:focus,body.light-mode textarea:focus{ border-color:rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.03); }
body.light-mode input[readonly]{ background:#f3f4f6; }
body.light-mode table.list th,body.light-mode table.data th{ color:#374151; background:#f3f4f6; border-bottom-color:rgba(0,0,0,.09); }
body.light-mode table.list td,body.light-mode table.data td{ border-bottom-color:rgba(0,0,0,.06); color:#111; }
body.light-mode table.list tbody tr:hover td{ background:rgba(0,0,0,.025); }
body.light-mode table.data tfoot td{ border-top-color:rgba(0,0,0,.12); }
body.light-mode .tabs{ background:rgba(248,249,252,.95); border-bottom-color:rgba(0,0,0,.09); }
body.light-mode .tab{ color:#374151; }
body.light-mode .tab:hover{ color:#111; background:rgba(0,0,0,.05); }
body.light-mode .tab.on{ color:var(--accent); background:#fff; border-color:rgba(0,0,0,.1); box-shadow:inset 0 2px 0 var(--accent); }
body.light-mode .st{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.12); color:#374151; }
body.light-mode .st:hover{ color:#111; }
body.light-mode .st.on{ background:rgba(var(--accent-rgb),.1); color:var(--accent); border-color:rgba(var(--accent-rgb),.35); box-shadow:none; }
body.light-mode .pill{ color:#111; border-color:rgba(0,0,0,.12); }
body.light-mode .ph-intake{ color:#3730a3; background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.22); }
body.light-mode .ph-quote{ color:#92400e; background:rgba(217,119,6,.1); border-color:rgba(217,119,6,.22); }
body.light-mode .ph-wip{ color:#065f46; background:rgba(5,150,105,.1); border-color:rgba(5,150,105,.22); }
body.light-mode .ph-resolution{ color:#374151; background:rgba(75,85,99,.08); border-color:rgba(75,85,99,.16); }
body.light-mode .ph-closure{ color:#6b7280; background:rgba(107,114,128,.06); }
body.light-mode .sec{ color:#6b7280; border-bottom-color:rgba(0,0,0,.08); }
body.light-mode .muted,body.light-mode .empty{ color:#6b7280; }
body.light-mode .sheet,body.light-mode .modal{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-color:rgba(0,0,0,.1); box-shadow:var(--shadow-hi); }
body.light-mode .mhead{ background:#fff; border-bottom-color:rgba(0,0,0,.08); }
body.light-mode .mx{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1); color:#374151; }
body.light-mode .mx:hover{ background:rgba(0,0,0,.09); color:#111; }
body.light-mode .toast{ background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 14px 40px rgba(0,0,0,.18); color:#111; }

/* ── Embedded in the /home shell (body.embedded) ──────────────────────────────
   The shell owns appearance, profile and logout. Hide the per-page duplicates so
   they never double up inside the workspace iframe. Applies to every page that
   loads premium.css and sets body.embedded on ?embed=1. Pages whose whole topbar
   is redundant hide it outright (their own CSS); this covers the chrome trio for
   pages that keep an operational bar. */
body.embedded [onclick*="toggleThemePanel"],
body.embedded #wolf-profile-btn,
body.embedded [onclick*="doLogout"],
body.embedded [onclick*="logout("]{ display:none !important; }