/* Rovify shared theme layer — monochrome duo-theme + theme switcher.
 *
 * Loaded site-wide via web_include_css. Overrides each portal page's
 * inline `:root` dark tokens via higher-specificity html[data-theme=…]
 * selectors (0,1,1 beats :root 0,1,0), so pages flip to light/dark WITHOUT
 * rewriting their bespoke CSS. Default (no data-theme = "System") leaves
 * each page on its own baked theme, so nothing changes unless a user
 * explicitly picks Light/Dark. Brand is black & white — no colour.
 */

/* ── BASE (System / no explicit pick) ────────────────────────────────────
 * The standard tokens used to live ONLY under html[data-theme=…], so a page
 * that consumed var(--bg)/var(--text)/… WITHOUT baking its own local :root
 * dark palette rendered with UNDEFINED tokens in "System" mode (the default
 * for a fresh visitor — rovify_theme.js removes the data-theme attr). This
 * base :root makes the token layer self-sufficient: any page can use the
 * tokens with no local :root and System falls back to the (baked-default)
 * dark palette. Lower specificity (0,1,0) than html[data-theme=…] (0,1,1),
 * so an explicit Light/Dark pick still wins. Values mirror DARK below. */
:root {
  --bg:#0a0a0a; --bg-2:#0f0f10;
  --panel:#141416; --panel-2:#1b1b1e; --panel-3:#222226;
  --card:#0f0f10; --surface:#141416; --surface-2:#1b1b1e;
  --text:#f5f5f7; --text-2:#d4d4d8; --dim:#a1a1aa;
  --muted:#8b9099; --muted-2:#71717a;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.16); --line-3:rgba(255,255,255,0.06);
  --accent:#f5f5f7; --accent-soft:rgba(255,255,255,0.10); --accent-pressed:#ffffff;
  --on-accent:#0a0a0a; --primary:#f5f5f7; --ghost:rgba(255,255,255,0.05);
  --emerald:#f5f5f7; --emerald-soft:rgba(255,255,255,0.10); --emerald-2:#ffffff;
  --emerald-glow:rgba(255,255,255,0.10); --emerald-pressed:#ffffff;
  --ring:rgba(255,255,255,0.18);
  --shadow:0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6);
}

/* ── LIGHT ────────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg:#ffffff; --bg-2:#f7f7f8;
  --panel:#f6f6f7; --panel-2:#efeff1; --panel-3:#e8e8ea;
  --card:#ffffff; --surface:#f6f6f7; --surface-2:#efeff1;
  --text:#18181b; --text-2:#3f3f46; --dim:#52525b;
  --muted:#71717a; --muted-2:#52525b;
  --line:rgba(0,0,0,0.10); --line-2:rgba(0,0,0,0.16); --line-3:rgba(0,0,0,0.06);
  --accent:#18181b; --accent-soft:rgba(0,0,0,0.07); --accent-pressed:#000000;
  --on-accent:#ffffff; --primary:#18181b; --ghost:rgba(0,0,0,0.04);
  --emerald:#18181b; --emerald-soft:rgba(0,0,0,0.07); --emerald-2:#000000;
  --emerald-glow:rgba(0,0,0,0.10); --emerald-pressed:#000000;
  --ring:rgba(0,0,0,0.14);
  --shadow:0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.12);
}
/* ── DARK (explicit) — matches the portal's current dark look ─────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0a0a; --bg-2:#0f0f10;
  --panel:#141416; --panel-2:#1b1b1e; --panel-3:#222226;
  --card:#0f0f10; --surface:#141416; --surface-2:#1b1b1e;
  --text:#f5f5f7; --text-2:#d4d4d8; --dim:#a1a1aa;
  --muted:#8b9099; --muted-2:#71717a;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.16); --line-3:rgba(255,255,255,0.06);
  --accent:#f5f5f7; --accent-soft:rgba(255,255,255,0.10); --accent-pressed:#ffffff;
  --on-accent:#0a0a0a; --primary:#f5f5f7; --ghost:rgba(255,255,255,0.05);
  --emerald:#f5f5f7; --emerald-soft:rgba(255,255,255,0.10); --emerald-2:#ffffff;
  --emerald-glow:rgba(255,255,255,0.10); --emerald-pressed:#ffffff;
  --ring:rgba(255,255,255,0.18);
  --shadow:0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6);
}

/* SYSTEM mode (no explicit data-theme — the default for a fresh visitor) on a
 * LIGHT OS: the base :root above is dark, which left pages — especially the
 * Desk-embedded ones, whose own theme toggle is suppressed — rendering BLACK
 * while the Desk/OS is light, with no way to switch. Follow the OS for System so
 * an unset visitor matches their environment. `:root:not([data-theme])` is
 * specificity (0,2,0) — higher than a page's local `:root` (0,1,0) — so this
 * also corrects standalone pages that bake their own dark palette. An explicit
 * Light/Dark pick (html[data-theme=…], 0,1,1) still wins over this. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:#ffffff; --bg-2:#f7f7f8;
    --panel:#f6f6f7; --panel-2:#efeff1; --panel-3:#e8e8ea;
    --card:#ffffff; --surface:#f6f6f7; --surface-2:#efeff1;
    --text:#18181b; --text-2:#3f3f46; --dim:#52525b;
    --muted:#71717a; --muted-2:#52525b;
    --line:rgba(0,0,0,0.10); --line-2:rgba(0,0,0,0.16); --line-3:rgba(0,0,0,0.06);
    --accent:#18181b; --accent-soft:rgba(0,0,0,0.07); --accent-pressed:#000000;
    --on-accent:#ffffff; --primary:#18181b; --ghost:rgba(0,0,0,0.04);
    --emerald:#18181b; --emerald-soft:rgba(0,0,0,0.07); --emerald-2:#000000;
    --emerald-glow:rgba(0,0,0,0.10); --emerald-pressed:#000000;
    --ring:rgba(0,0,0,0.14);
    --shadow:0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -12px rgba(0,0,0,0.12);
  }
  :root:not([data-theme]) body { background:#ffffff; color:#18181b; }
}

/* Embedded inside the Desk (?embed=1 iframe → html.rvf-embed, set by
 * rovify_theme.js). The Desk supplies the sidebar + header, so a custom page's
 * own marketing nav/footer is redundant chrome — hide it. The injected theme
 * float is already suppressed in JS.
 * NOTE: EXACT class tokens only — never [class*="__bar"], which also matches
 * in-page content like __bar-tabs / __bars / __bar-row. A class selector
 * (.rvf-mc__bar) matches the whole token, so __bar-tabs is safely untouched.
 * New standalone page? Add its top-nav / footer class token here — or just
 * give its standalone "© Rovify" footer the shared `.rvf-page-foot` class. */
html.rvf-embed .rvf-page-foot,
html.rvf-embed .rvf-legal-nav,
html.rvf-embed .rvf-legal-footer,
html.rvf-embed .rvf-al__bar,  html.rvf-embed .rvf-api__bar, html.rvf-embed .rvf-im__bar,
html.rvf-embed .rvf-lb__bar,  html.rvf-embed .rvf-ln__bar,  html.rvf-embed .rvf-mc__bar,
html.rvf-embed .rvf-md__bar,  html.rvf-embed .rvf-sso__bar, html.rvf-embed .rvf-us__bar,
html.rvf-embed .rvf-vf__bar,  html.rvf-embed .rvf-vq__bar,  html.rvf-embed .rvf-wel__bar,
html.rvf-embed .rvf-cmp__topbar, html.rvf-embed .rvf-us__topbar,
html.rvf-embed .rvf-me-bar,
html.rvf-embed .rvf-api__nav, html.rvf-embed .rvf-on__nav,
html.rvf-embed .rvf-mc__foot, html.rvf-embed .rvf-wl__foot { display:none !important; }
html.rvf-embed .rvf-legal-body { padding-top:32px !important; }

/* Structural fixes — only when LIGHT is explicitly chosen, so the
 * default-dark pages are never disturbed. Frappe's website shell is dark
 * server-side; neutralise it + lay down a white background. */
/* color is !important because Frappe's web.html renders an inline color on
 * <body>; without it, every standalone page's heading inherits white-on-white. */
html[data-theme="light"] body { background:#ffffff !important; color:#18181b !important; }
html[data-theme="light"] [id^="page-"],
html[data-theme="light"] .main-section,
html[data-theme="light"] .page_content,
html[data-theme="light"] .page-content-wrapper,
html[data-theme="light"] main.container { background:transparent !important; }
html[data-theme="light"] body::before { content:""; position:fixed; inset:0; background:#ffffff; z-index:-1; }
html[data-theme="dark"] body { background:#0a0a0a !important; }

/* Hardcoded-dark container/topbar classes that don't use tokens — flip
 * them to the light surface so there are no dark islands in Light mode. */
html[data-theme="light"] .rvf-pg-root,
html[data-theme="light"] .rvf-me { background:var(--bg) !important; color:var(--text) !important; }
html[data-theme="light"] .rvf-pg-topbar,
html[data-theme="light"] .rvf-me-bar,
html[data-theme="light"] [class*="__bar"],
html[data-theme="light"] [class$="-topbar"] {
  background:var(--surface) !important; color:var(--text) !important;
  border-bottom:1px solid var(--line) !important; }
html[data-theme="light"] .rvf-footer {
  background:var(--bg) !important; color:var(--muted) !important;
  border-top:1px solid var(--line) !important; }
/* Bars often carry hardcoded white text — re-tone child text/icons to the token. */
html[data-theme="light"] .rvf-pg-topbar *, html[data-theme="light"] [class*="__bar"] *,
html[data-theme="light"] .rvf-me-bar * { color:var(--text-2); }

/* Shared dark cards/containers + Frappe default chrome (pages that don't
 * opt out of navbar/footer, e.g. my-tickets). */
html[data-theme="light"] .rovify-card,
html[data-theme="light"] .rvf-legal,
html[data-theme="light"] .page-card {
  background:var(--card) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-theme="light"] .navbar, html[data-theme="light"] .web-footer,
html[data-theme="light"] .footer-logo-extension, html[data-theme="light"] .footer-info {
  background:var(--bg) !important; border-color:var(--line) !important; }
html[data-theme="light"] .navbar a, html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .web-footer, html[data-theme="light"] .web-footer a,
html[data-theme="light"] .footer-info { color:var(--text-2) !important; }
html[data-theme="light"] .footer-logo-extension img { filter:none; }

/* ── Shared app bar (injected by rovify_theme.js where a page doesn't
 *    already host its own header, e.g. /manage) ──────────────────────────── */
.rvf-appbar { position:sticky; top:0; z-index:9998; background:var(--bg, #0a0a0a);
  border-bottom:1px solid var(--line, rgba(255,255,255,0.10));
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; }
.rvf-appbar__inner { max-width:1100px; margin:0 auto; padding:11px 18px; display:flex; align-items:center; gap:12px; }
.rvf-appbar__brand { display:inline-flex; align-items:center; gap:9px; text-decoration:none !important; }
.rvf-appbar__logo { height:22px; width:auto; display:block; filter:none; }
html[data-theme="dark"] .rvf-appbar__logo { filter:invert(1) hue-rotate(180deg); }
.rvf-appbar__name { font-size:15.5px; font-weight:720; letter-spacing:-0.02em; color:var(--text, #f5f5f7); }
.rvf-appbar__spacer { margin-left:auto; }
.rvf-appbar__actions { display:flex; align-items:center; gap:9px; }
.rvf-appbar__desk { display:inline-flex; align-items:center; gap:6px; text-decoration:none !important;
  color:var(--text-2, #d4d4d8); font-size:13px; font-weight:560; padding:8px 13px;
  border:1px solid var(--line-2, rgba(255,255,255,0.16)); border-radius:999px; background:transparent;
  transition:border-color .14s, background .14s, color .14s; white-space:nowrap; }
.rvf-appbar__desk:hover { color:var(--text, #f5f5f7); border-color:var(--text-2, #d4d4d8); background:var(--surface, #141416); }
.rvf-theme { position:relative; }
/* Floating variant — for pages that already have their own nav bar. */
.rvf-theme--float { position:fixed; bottom:18px; right:18px; z-index:9998; }
.rvf-theme--float .rvf-theme__btn { background:var(--card, #0f0f10); box-shadow:0 6px 20px rgba(0,0,0,0.28); width:42px; height:42px; }
.rvf-theme--float .rvf-theme-menu { top:auto; bottom:52px; }
.rvf-theme--float .rvf-theme-menu__desk { display:flex; align-items:center; gap:8px; width:100%;
  border:none; background:transparent; color:var(--text,#f5f5f7); font:inherit; font-size:13.5px; font-weight:540;
  padding:9px 10px; border-radius:9px; cursor:pointer; text-align:left; text-decoration:none !important;
  border-top:1px solid var(--line,rgba(255,255,255,0.1)); margin-top:4px; }
.rvf-theme--float .rvf-theme-menu__desk:hover { background:var(--surface,#141416); }
.rvf-theme__btn { width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line-2, rgba(255,255,255,0.16)); background:transparent;
  color:var(--text-2, #d4d4d8); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .14s, border-color .14s, background .14s; }
.rvf-theme__btn:hover { color:var(--text, #f5f5f7); border-color:var(--text-2, #d4d4d8); background:var(--surface, #141416); }
.rvf-theme-menu { position:absolute; right:0; top:46px; min-width:174px; background:var(--card,#0f0f10);
  border:1px solid var(--line-2,rgba(255,255,255,0.16)); border-radius:14px; padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,0.45); opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .16s, transform .16s; }
.rvf-theme-menu.open { opacity:1; transform:none; pointer-events:auto; }
.rvf-theme-menu__label { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted,#8b9099); padding:8px 10px 4px; }
.rvf-theme-menu__opt { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:none; background:transparent; color:var(--text,#f5f5f7); font:inherit; font-size:13.5px; font-weight:540;
  padding:9px 10px; border-radius:9px; cursor:pointer; text-align:left; }
.rvf-theme-menu__opt:hover { background:var(--surface,#141416); }
.rvf-theme-menu__opt .tick { opacity:0; }
.rvf-theme-menu__opt[aria-checked="true"] .tick { opacity:1; }

/* ── Light-mode safety net for bespoke portal pages ──────────────────────
 * Many primary buttons hardcode `color:#0a0a0a` on `background:var(--accent)`.
 * In dark that's dark text on a near-white pill (correct); in light the
 * accent flips near-black, so the text becomes dark-on-dark (invisible).
 * Force readable on-accent text in light mode without editing each page. */
html[data-theme="light"] [class*="btn--ok"],
html[data-theme="light"] [class*="btn--primary"],
html[data-theme="light"] .av-btn--ok,
html[data-theme="light"] .cl-btn--ok,
html[data-theme="light"] .af-btn--ok,
html[data-theme="light"] .af-btn--primary,
html[data-theme="light"] .mg-new {
  color:#ffffff !important;
}