/* PriooCare Glass skin.
 * Source spec: GLASSMORPHISM-THEME.md (Finance Console, 2026-09-19).
 * Everything is scoped to :root[data-style='glass'] — remove the attribute from <html> and every
 * page falls back to its own inline solid theme untouched.
 *
 * Planes: chrome .85 (report header strip) · pane .62 + blur (sidebars, cards) · tile .55 no blur.
 * Solid, never glass: tables, inputs, selects, menus, modals, slide-over panels.
 * Linked AFTER each page's inline <style>, so equal-specificity ties also resolve here. */

:root[data-style='glass'] {
  /* app tokens, re-pointed at the glass palette */
  --bg-content: #f4faff;
  --bg-card: #ffffff;               /* stays solid: modals, drawers, menus read it */
  --text-primary: #0a2540;          /* deep navy, not black */
  --text-muted: #4f6479;
  --border: #cfdde8;
  --radius: 14px;
  --shadow: 0 8px 32px rgb(10 37 64 / 0.10);

  /* spec tokens */
  --surface: #ffffff;
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --tile: #edf4fa;
  --accent-ink: #2f47c9;            /* accent as TEXT on glass (≥ 4.5:1 on a pane) */
  --accent-weak: #eef3fe;
  --hairline: var(--border);
  --radius-card: 12px;
  --radius-control: 6px;

  --canvas-stop-1: #6ed4f1;         /* PriooCare blue #00B4E6 @55% — top-left */
  --canvas-stop-2: #9eeeff;         /* cyan #35DFFF @45% — top-right */
  --canvas-stop-3: #abc0f8;         /* royal #3D69EE @40% — bottom-right */
  --canvas: radial-gradient(60% 75% at 10% 0%,   var(--canvas-stop-1) 0%, transparent 62%),
            radial-gradient(38% 48% at 92% 10%,  var(--canvas-stop-2) 0%, transparent 60%),
            radial-gradient(52% 60% at 82% 100%, var(--canvas-stop-3) 0%, transparent 62%),
            var(--bg-content);
  --canvas-attach: fixed;

  --chrome-alpha: 0.85;
  --chrome-bg: color-mix(in srgb, var(--surface) 85%, transparent);
  --chrome-blur: blur(24px) saturate(1.4);
  --chrome-edge: color-mix(in srgb, #ffffff 70%, transparent);

  --pane-alpha: 0.62;
  --pane-bg: color-mix(in srgb, var(--surface) 62%, transparent);
  --pane-edge: color-mix(in srgb, #ffffff 70%, transparent);
  --pane-shadow: 0 8px 32px rgb(10 37 64 / 0.10),
                 inset 0 1px 0 color-mix(in srgb, #ffffff 80%, transparent);

  --tile-glass-alpha: 0.55;
  --tile-glass-bg: color-mix(in srgb, var(--surface) 55%, transparent);
  --tile-glass-edge: color-mix(in srgb, #ffffff 80%, transparent);
  --tile-glass-shadow: 0 4px 16px rgb(10 37 64 / 0.08);

  --ink-hover: rgb(10 37 64 / 0.06);
  --accent-fill-weak: color-mix(in srgb, var(--accent) 14%, transparent);
  color-scheme: light;
}

/* ── Canvas: fixed to the viewport so panes slide over it ─────────────────────────────────── */
:root[data-style='glass'] body {
  background: var(--canvas);
  background-attachment: var(--canvas-attach);
  color: var(--text);
}

/* ── chrome plane: report.html header strip (content scrolls beneath in .report-body) ─────── */
:root[data-style='glass'] :is(.report-header, .metrics-strip, .tab-bar) {
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border-bottom-color: var(--chrome-edge);
}

/* ── pane plane: sidebars ──────────────────────────────────────────────────────────────────── */
:root[data-style='glass'] :is(#sidebar, #left-panel) {
  background: var(--pane-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border-right: 1px solid var(--pane-edge);
  box-shadow: 4px 0 24px rgb(10 37 64 / 0.06);
  color: var(--text);
}

/* ── pane plane: cards sitting on the canvas ───────────────────────────────────────────────── */
:root[data-style='glass'] :is(
  .card, .help-panel, .progress-item, .summary-bar, .add-form, .users,
  .stat-card, .control-card, .table-wrap, .brands-table-wrap, .log-table-wrap,
  .metric-card, .loading-card, .error-card, .empty, .report-content
) {
  background: var(--pane-bg);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--pane-edge);
  box-shadow: var(--pane-shadow);
  border-radius: var(--radius-card);
}
:root[data-style='glass'] .empty { border-style: dashed; border-color: var(--border); }
:root[data-style='glass'] .error-card { border-color: #fecaca; }
/* report body renders markdown straight onto main — give it a pane to sit on */
:root[data-style='glass'] .report-content { padding: 28px 32px; }

/* ── tile plane: tiles inside a card — no backdrop-filter ─────────────────────────────────── */
:root[data-style='glass'] .help-dir {
  background: var(--tile-glass-bg);
  border: 1px solid var(--tile-glass-edge);
  box-shadow: var(--tile-glass-shadow);
  border-radius: var(--radius-control);
}

/* ── Solid, never glass: data and controls ────────────────────────────────────────────────── */
:root[data-style='glass'] table { background: var(--surface); }
:root[data-style='glass'] :is(.panel, .grid-review, .cf-menu) {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Sidebar inks: the solid skin's sidebar is dark (#161a24), glass flips it light ───────── */
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.sidebar-logo, .panel-logo, .nav-links, .view-toggle,
  .sidebar-status, .user-pill, .auth-pill, .sidebar-info) { border-color: var(--border); }
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.sidebar-logo, .panel-logo) h1 { color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.sidebar-logo, .panel-logo) span { color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.sidebar-section, .panel-section, .sidebar-info,
  .sidebar-status, .form-group label, .view-toggle label) { color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .sidebar-info strong { color: var(--text); }

:root[data-style='glass'] :is(#sidebar, #left-panel) .nav-link { color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .nav-link:hover { background: var(--ink-hover); color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .nav-link.active { background: var(--accent-fill-weak); color: var(--accent-ink); }

:root[data-style='glass'] :is(#sidebar, #left-panel) .form-group :is(input, select, textarea) {
  background: var(--surface); border-color: var(--border); color: var(--text);
}
:root[data-style='glass'] :is(#sidebar, #left-panel) .form-group :is(input, select, textarea):focus { border-color: var(--accent); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .form-group select option { background: var(--surface); color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .form-group input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .6; }

:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.btn-fetch, .btn-run, .btn-generate):disabled {
  background: #dde6ee; color: var(--muted);
}
:root[data-style='glass'] :is(#sidebar, #left-panel) .toggle-btn { background: var(--surface); border-color: var(--border); color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .toggle-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.chain-chip, .date-preset) {
  background: var(--surface); border-color: var(--border); color: var(--text);
}
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.chain-chip, .date-preset):hover {
  background: var(--accent-weak); border-color: var(--accent); color: var(--text);
}
:root[data-style='glass'] :is(#sidebar, #left-panel) :is(.chain-chip.selected, .date-preset.active) {
  background: var(--accent-fill-weak); border-color: var(--accent); color: var(--accent-ink);
}

:root[data-style='glass'] :is(#sidebar, #left-panel) .user-pill { color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .user-pill .email { color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .user-pill .role { color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .user-pill button { background: var(--surface); border-color: var(--border); color: var(--muted); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .user-pill button:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

:root[data-style='glass'] :is(#sidebar, #left-panel) .auth-status { background: var(--ink-hover); color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .auth-status.signed-in { background: rgb(16 185 129 / 0.10); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .cleanup-toggle:hover { background: var(--ink-hover); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .cleanup-toggle .ct-text { color: var(--text); }
:root[data-style='glass'] :is(#sidebar, #left-panel) .cleanup-toggle .ct-ex,
:root[data-style='glass'] :is(#sidebar, #left-panel) .cleanup-toggle input:disabled ~ .ct-text { color: var(--muted); }

/* Sidebar markup carries inline dark-skin colours; only !important reaches past a style attribute. */
:root[data-style='glass'] :is(#sidebar, #left-panel) :is([style*="#94a3b8"], [style*="#475569"], [style*="#64748b"]):not(span[style*="border-radius:50%"]) { color: var(--muted) !important; }
:root[data-style='glass'] :is(#sidebar, #left-panel) [style*="#e2e8f0"] { color: var(--text) !important; }
:root[data-style='glass'] :is(#sidebar, #left-panel) [style*="#818cf8"] { color: var(--accent-ink) !important; background: var(--accent-fill-weak) !important; }
:root[data-style='glass'] :is(#sidebar, #left-panel) [style*="#4f6ef7"] { color: var(--accent-ink) !important; }
:root[data-style='glass'] :is(#sidebar, #left-panel) [style*="rgba(255,255,255,.07)"] { border-color: var(--border) !important; }
:root[data-style='glass'] :is(#sidebar, #left-panel) input[style*="rgba(255,255,255,.06)"] {
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important;
}

/* ── login.html: dark card on dark gradient → glass card on the canvas ────────────────────── */
:root[data-style='glass'] .login-page .card { border-radius: var(--radius); }
:root[data-style='glass'] .login-page :is(.brand h1, .title) { color: var(--text); }
:root[data-style='glass'] .login-page :is(.brand span, .sub, .footer, .footer code) { color: var(--muted); }
:root[data-style='glass'] .login-page .error { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }
:root[data-style='glass'] .login-page .setup-warn { color: #92400e; background: #fffbeb; border-color: #fcd34d; }

/* ── Fallbacks: every glass token resets, not only the visible ones ───────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-style='glass'] {
    --chrome-alpha: 1; --chrome-bg: var(--surface); --chrome-blur: none; --chrome-edge: var(--hairline);
    --pane-alpha: 1;   --pane-bg: var(--surface);   --pane-edge: var(--hairline); --pane-shadow: var(--shadow);
    --tile-glass-alpha: 1; --tile-glass-bg: var(--tile); --tile-glass-edge: transparent; --tile-glass-shadow: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-style='glass'] {
    --chrome-alpha: 1; --chrome-bg: var(--surface); --chrome-blur: none; --chrome-edge: var(--hairline);
    --pane-alpha: 1;   --pane-bg: var(--surface);   --pane-edge: var(--hairline); --pane-shadow: var(--shadow);
    --tile-glass-alpha: 1; --tile-glass-bg: var(--tile); --tile-glass-edge: transparent; --tile-glass-shadow: none;
    --canvas: var(--bg-content); --canvas-attach: scroll;
  }
}