/* ============================================================
   Intelgic — central theme tokens
   Single source of truth for brand colors & accents.
   Every page links this BEFORE its own <style>, and uses
   var(--token) instead of hardcoded hex, so the whole app
   can be re-skinned from this one file.
   ============================================================ */
:root{
  /* Brand */
  --brand:#0d5c63;        /* primary teal */
  --brand2:#0a4a50;       /* deep teal */
  --blue:#1e65a3;         /* accent blue */
  --blue2:#185a92;

  /* Tints / fills */
  --accent:#e8f3f3;       /* light teal fill */
  --accent2:#f2faf9;      /* lightest teal */
  --bluebg:#eaf1f8;       /* light blue fill */

  /* Ink / text */
  --ink:#15202b;
  --ink2:#4a5764;
  --ink3:#7a8694;

  /* Surfaces / lines */
  --surface:#ffffff;
  --line:#e6eaee;
  --bg:#eef2f4;           /* flat page / control fill */

  /* Status */
  --good:#0d7a4d;
  --internal:#8a4b00;
  --danger:#a8321f;

  /* Reusables */
  --grad-brand:linear-gradient(135deg, var(--brand), var(--brand2));
  --shadow:0 1px 3px rgba(20,40,60,.06), 0 8px 22px rgba(20,40,60,.06);

  /* The soft welcome/landing backdrop — use as `background: var(--page-bg)` */
  --page-bg:
    radial-gradient(1100px 520px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 88% 8%, rgba(30,101,163,.06) 0%, rgba(30,101,163,0) 55%),
    radial-gradient(900px 600px at 8% 96%, rgba(13,92,99,.07) 0%, rgba(13,92,99,0) 55%),
    linear-gradient(170deg,#f7fafb 0%,#eef5f6 100%);
}

/* ============================================================
   App "scene" — the premium teal backdrop shared by the start
   pages (login, landing). Set `body{background:var(--scene-bg)}`
   and drop in <div class="scene-aurora">…blobs…</div> +
   <div class="scene-grid"></div>. One source for the whole look.
   ============================================================ */
:root{
  --scene-bg:
    radial-gradient(130% 120% at 50% -10%, transparent 55%, rgba(0,0,0,.22) 100%),
    radial-gradient(900px 520px at 80% 0%, rgba(30,101,163,.42), transparent 60%),
    radial-gradient(900px 560px at 8% 100%, rgba(8,60,68,.55), transparent 60%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand2) 100%);
}
.scene-aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.scene-aurora .blob{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.scene-aurora .b1{width:560px;height:560px;top:-160px;left:-120px;opacity:.40;background:radial-gradient(circle, rgba(46,150,170,.9), transparent 70%);animation:scenedrift1 30s ease-in-out infinite alternate}
.scene-aurora .b2{width:620px;height:620px;bottom:-200px;right:-140px;opacity:.34;background:radial-gradient(circle, rgba(30,101,163,.9), transparent 70%);animation:scenedrift2 38s ease-in-out infinite alternate}
.scene-aurora .b3{width:460px;height:460px;top:38%;left:48%;opacity:.20;background:radial-gradient(circle, rgba(150,220,210,.9), transparent 70%);animation:scenedrift3 34s ease-in-out infinite alternate}
@keyframes scenedrift1{from{transform:translate(0,0) scale(1)}to{transform:translate(90px,70px) scale(1.18)}}
@keyframes scenedrift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-80px,-60px) scale(1.12)}}
@keyframes scenedrift3{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-44%,-56%) scale(1.22)}}
.scene-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 90% at 50% 42%, #000 0%, transparent 72%);
  animation:scenegridpan 42s linear infinite}
@keyframes scenegridpan{from{background-position:0 0}to{background-position:46px 46px}}
@media (prefers-reduced-motion: reduce){.scene-aurora .blob,.scene-grid{animation:none}}
/* ============================================================
   Standard menu drawer  —  ONE source of truth for the whole site
   Every hamburger / menu drawer opts in with class="drawer menu"
   (+ a sibling element with class="menu-scrim"). Floats above the
   page with rounded corners + soft elevation; Sign out sits at the
   bottom via a .grow1 spacer. Change a value here and EVERY menu
   drawer on the site updates. Currently used by: welcome.html
   (start page) and components.html (Components Manager).
   Selectors are intentionally specific (.drawer.menu ...) so this
   wins over any page's older inline drawer CSS.
   ============================================================ */
.menu-scrim{position:fixed;inset:0;background:rgba(8,30,36,.42);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
.menu-scrim.open{opacity:1;pointer-events:auto}

.drawer.menu{position:fixed;top:16px;right:16px;bottom:16px;height:auto;width:328px;max-width:calc(100vw - 32px);
  z-index:61;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#e7f5f1 0%,#d4ece6 52%,#c2e4dd 100%);
  border:1px solid rgba(255,255,255,.6);border-radius:22px;
  box-shadow:0 24px 70px rgba(8,30,36,.42), 0 1px 0 rgba(255,255,255,.55) inset;
  transform:translateX(calc(100% + 24px));
  transition:transform .34s cubic-bezier(.22,1,.36,1)}
.drawer.menu.open{transform:translateX(0)}
.drawer.menu .dh{padding:20px 20px 16px;display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(13,92,99,.18);background:linear-gradient(180deg,#d3ebe6,#c6e4dd)}
.drawer.menu .dh .av{width:42px;height:42px;min-width:42px;min-height:42px;max-height:42px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex-shrink:0}
.drawer.menu .dh .who{font-size:14px;font-weight:800;color:var(--ink);line-height:1.2}
.drawer.menu .dh .whoe{font-size:11.5px;color:var(--ink3);word-break:break-all}
.drawer.menu .dh .dx{margin-left:auto;border:none;background:none;font-size:24px;color:var(--ink3);cursor:pointer;line-height:1;align-self:flex-start}
.drawer.menu .dbody{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column}
.drawer.menu .ditem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:none;padding:13px 14px;border-radius:11px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none}
.drawer.menu .ditem:hover{background:#dcefec}
.drawer.menu .ditem .di{width:20px;display:flex;align-items:center;justify-content:center;color:var(--brand);font-size:16px;flex-shrink:0}
.drawer.menu .ditem .di svg{width:17px;height:17px;display:block}
.drawer.menu .ditem.primary{background:var(--grad-brand);color:#fff;margin-bottom:4px}
.drawer.menu .ditem.primary .di{color:#fff}
.drawer.menu .ditem.danger{color:var(--danger)}
.drawer.menu .ditem.danger .di{color:var(--danger)}
.drawer.menu .grow1{flex:1 1 auto;min-height:6px}
.drawer.menu .dsep{height:1px;background:var(--line);margin:8px 14px}
/* active (current-page) nav item — shown but not navigable */
.drawer.menu .ditem.active{background:#dcefec;color:var(--brand);cursor:default}
.drawer.menu .ditem.active .di{color:var(--brand)}
/* Advanced disclosure (admin-only power tools / account manager) */
.drawer.menu .ditem.adv .chev{margin-left:auto;color:var(--ink3);transition:transform .25s;font-size:12px}
.drawer.menu .ditem.adv .chev.open{transform:rotate(90deg)}
.drawer.menu .advpanel{max-height:0;overflow:hidden;opacity:.6;transition:max-height .28s ease,opacity .28s ease;margin:2px 6px 0;border-radius:12px;background:rgba(13,92,99,.07);border:1px solid rgba(13,92,99,.10)}
.drawer.menu .advpanel.open{max-height:260px;opacity:1}
.drawer.menu .advhint{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);padding:10px 14px 4px}
.drawer.menu .optpanel.open{max-height:360px}
.drawer.menu .optrow{display:flex;flex-wrap:wrap;gap:7px;padding:4px 12px 12px}
.drawer.menu .optrow label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid rgba(13,92,99,.18);border-radius:999px;padding:6px 11px;cursor:pointer;transition:background .12s,border-color .12s}
.drawer.menu .optrow label:hover{background:#eef7f6;border-color:rgba(13,92,99,.32)}
.drawer.menu .optrow input{accent-color:var(--brand);margin:0;cursor:pointer}
.drawer.menu .advitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:none;padding:10px 14px;font-size:13px;font-weight:700;color:var(--ink2);cursor:pointer;border-radius:9px;text-decoration:none}
.drawer.menu .advitem:hover{background:#dcefec}
.drawer.menu .advitem .di{width:20px;text-align:center;color:var(--brand);font-size:15px;flex-shrink:0}
/* toggle switch (e.g. Show inactive parts) */
.drawer.menu .sw{margin-left:auto;width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex-shrink:0}
.drawer.menu .sw.on{background:var(--brand)}
.drawer.menu .sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.drawer.menu .sw.on i{left:18px}

/* ---- Centralized signed-in user chip (user-chip.js) — edit here, every page inherits ---- */
.uchip{display:inline-flex;align-items:center;gap:8px;height:38px;box-sizing:border-box;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:4px 14px 4px 5px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.uchip:hover{border-color:#cfe0e1;color:var(--ink)}
.uchip-av{width:28px;height:28px;border-radius:50%;background:var(--grad-brand,linear-gradient(135deg,#0d5c63,#0a4a50));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;line-height:1}
.uchip-nm{white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.uchip-pop{position:fixed;display:none;flex-direction:column;min-width:188px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(20,40,60,.18);padding:6px;z-index:120}
.uchip-pop.open{display:flex;animation:uchipIn .14s ease}
@keyframes uchipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.uchip-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;border:none;background:none;text-align:left;width:100%;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:none}
.uchip-item:hover{background:#eef7f6}
.uchip-item.danger{color:var(--danger)}
.uchip-ic{width:18px;text-align:center;color:var(--brand);font-size:14px}
.uchip-item.danger .uchip-ic{color:var(--danger)}
.drawer.menu .optrow .opthint{flex-basis:100%;font-size:10.5px;font-weight:600;color:var(--ink3);margin-top:2px}

/* ============================================================
   Neon accent SKINS (additive — new token names so existing
   light pages are untouched). Used by the dark login animation
   now, and by the full dark reskin as it rolls out page by page.
   Default = lime; data-skin="blue" overrides. Keep the *-rgb
   triples in sync with the hexes (the login canvas reads them).
   ============================================================ */
:root, :root[data-skin="lime"]{
  --neon:#00E676; --neon-bright:#5CFFA6; --neon-deep:#00B85F;
  --neon-glow:rgba(0,230,118,.45); --neon-soft:rgba(0,230,118,.12); --on-neon:#04130B;
  --neon-rgb:0,230,118; --neon-bright-rgb:92,255,166;
}
:root[data-skin="blue"]{
  --neon:#14C2FF; --neon-bright:#7FE0FF; --neon-deep:#0090CC;
  --neon-glow:rgba(20,194,255,.45); --neon-soft:rgba(20,194,255,.12); --on-neon:#00131F;
  --neon-rgb:20,194,255; --neon-bright-rgb:127,224,255;
}

/* ============================================================
   Ambient scene — masked grid + drifting aurora blobs + cursor
   parallax. Injected by scene.js as the first <body> child.
   Shown only in dark mode (html[data-grid="on"]); fully token-
   driven so Theme Studio can tune it. Classic Light keeps its
   existing look (no scene unless a light recipe enables grid).
   ============================================================ */
.scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg);pointer-events:none}
html[data-grid="off"] .scene{display:none}
.scene .grid{position:absolute;inset:-6%;opacity:var(--grid-opacity,.35);
  background-image:linear-gradient(var(--grid-line,#2A322D) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line,#2A322D) 1px,transparent 1px);
  background-size:var(--grid-size,46px) var(--grid-size,46px);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
  transform:translate(calc(var(--px,0)*-1px),calc(var(--py,0)*-1px));transition:transform .22s ease-out}
.scene .blobs{position:absolute;inset:0;transform:translate(calc(var(--px,0)*1px),calc(var(--py,0)*1px));transition:transform .28s ease-out}
.scene .blob{position:absolute;border-radius:50%;filter:blur(var(--blob-blur,90px));opacity:.62;animation:sdrift 20s ease-in-out infinite;will-change:transform}
.scene .b1{width:520px;height:520px;left:-120px;top:-100px;background:radial-gradient(circle,var(--blob1,rgba(0,230,118,.45)),transparent 60%)}
.scene .b2{width:460px;height:460px;right:-120px;bottom:-120px;background:radial-gradient(circle,var(--blob2,rgba(0,184,95,.4)),transparent 60%);animation-delay:-7s}
.scene .b3{width:320px;height:320px;right:28%;top:8%;background:radial-gradient(circle,var(--blob3,rgba(92,255,166,.25)),transparent 60%);animation-delay:-13s}
@keyframes sdrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,28px) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.scene .blob{animation:none}}

/* ============================================================
   DARK MODE overrides for shared components (drawer + user chip).
   Classic Light is untouched above; these only apply when a dark
   recipe is active (html[data-theme="dark"]).
   ============================================================ */
html[data-theme="dark"] .menu-scrim{background:rgba(0,0,0,.55)}
html[data-theme="dark"] .drawer.menu{background:linear-gradient(180deg,var(--surface-2,#181D1A),var(--surface,#111513));border:1px solid var(--line,#2A322D);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px var(--neon-soft)}
html[data-theme="dark"] .drawer.menu .dh{background:linear-gradient(180deg,var(--surface-3,#202622),var(--surface-2,#181D1A));border-bottom:1px solid var(--line,#2A322D)}
html[data-theme="dark"] .drawer.menu .ditem:hover,html[data-theme="dark"] .drawer.menu .advitem:hover,html[data-theme="dark"] .drawer.menu .ditem.active{background:var(--surface-3,#202622)}
html[data-theme="dark"] .drawer.menu .advpanel{background:rgba(255,255,255,.03);border:1px solid var(--line,#2A322D)}
html[data-theme="dark"] .drawer.menu .optrow label{background:var(--surface-3,#202622);border:1px solid var(--line,#2A322D);color:var(--ink2)}
html[data-theme="dark"] .drawer.menu .sw{background:var(--surface-3,#202622)}
html[data-theme="dark"] .uchip{background:var(--surface-2,#181D1A);border:1px solid var(--line,#2A322D);color:var(--ink2)}
html[data-theme="dark"] .uchip:hover{color:var(--ink);border-color:var(--neon-soft)}
html[data-theme="dark"] .uchip-pop{background:var(--surface,#111513);border:1px solid var(--line,#2A322D)}
html[data-theme="dark"] .uchip-item{color:var(--ink)}
html[data-theme="dark"] .uchip-item:hover{background:var(--surface-3,#202622)}

/* dark pages: let the ambient .scene (grid+blobs) show through the body */
html[data-theme="dark"]{background:var(--bg,#080A09)}
html[data-theme="dark"] body{background:transparent !important}

/* ============================================================
   GLOBAL dark-mode overrides for the shared component class
   names used across pages (so the whole suite themes from one
   place). Specificity (html[data-theme] .x) beats page rules.
   Classic Light is untouched (these only apply in dark).
   ============================================================ */
html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .sheet,html[data-theme="dark"] .modal,html[data-theme="dark"] .tray,html[data-theme="dark"] .box{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .modal{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 40px var(--neon-soft)}
html[data-theme="dark"] .phead,html[data-theme="dark"] .m-h,html[data-theme="dark"] .mhead,html[data-theme="dark"] .thead,html[data-theme="dark"] .dh{background:linear-gradient(90deg,var(--surface-2),var(--surface-3));border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .search{background:var(--surface-2);border-color:var(--line);color:var(--ink2)}
html[data-theme="dark"] .search input,html[data-theme="dark"] .search input::placeholder{color:var(--ink)}
html[data-theme="dark"] .search input::placeholder{color:var(--ink3)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:var(--ink3)}
html[data-theme="dark"] .btn,html[data-theme="dark"] .chip,html[data-theme="dark"] .tag,html[data-theme="dark"] .pill{background:var(--surface-2);border-color:var(--line);color:var(--ink2)}
html[data-theme="dark"] .btn:hover{border-color:var(--neon-soft);color:var(--ink)}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] .btn-primary{background:var(--grad-brand);color:var(--on-neon);border-color:transparent}
html[data-theme="dark"] .fld input,html[data-theme="dark"] .fld textarea,html[data-theme="dark"] .fld select{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .dbody,html[data-theme="dark"] .catbody,html[data-theme="dark"] .tally{background:var(--surface)}

/* deeper dark sweep: editor sheets/drawers, popup footers + buttons that bespoke
   components inject. Specificity html[data-theme] .x beats page/JS rules. */
html[data-theme="dark"] .sheet,html[data-theme="dark"] .drawer,html[data-theme="dark"] .editor,html[data-theme="dark"] .ed,html[data-theme="dark"] .pane,html[data-theme="dark"] .popover,html[data-theme="dark"] .pop,html[data-theme="dark"] .menu,html[data-theme="dark"] .dropdown,html[data-theme="dark"] .overlay-card,html[data-theme="dark"] .cm{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .sheet-head,html[data-theme="dark"] .sheet-foot,html[data-theme="dark"] .ed-head,html[data-theme="dark"] .ed-foot,html[data-theme="dark"] .foot,html[data-theme="dark"] .footer,html[data-theme="dark"] .actions,html[data-theme="dark"] .modal-foot,html[data-theme="dark"] .m-foot,html[data-theme="dark"] .formfoot,html[data-theme="dark"] .toolbar,html[data-theme="dark"] .tabbar,html[data-theme="dark"] .tabs{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .tab,html[data-theme="dark"] .seg,html[data-theme="dark"] .segbtn{color:var(--ink2)}
html[data-theme="dark"] .tab.on,html[data-theme="dark"] .tab.active,html[data-theme="dark"] .seg .on{color:var(--brand);border-color:var(--brand)}
/* any button/input/select that's still on a white/light bg -> themed */
html[data-theme="dark"] button,html[data-theme="dark"] .btn,html[data-theme="dark"] .button,html[data-theme="dark"] [class*="btn"]{}
html[data-theme="dark"] .btn-secondary,html[data-theme="dark"] .btn-ghost,html[data-theme="dark"] .btn-cancel,html[data-theme="dark"] .secondary,html[data-theme="dark"] .ghost,html[data-theme="dark"] .cancel{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .btn-primary,html[data-theme="dark"] .primary,html[data-theme="dark"] .save,html[data-theme="dark"] .gbtn,html[data-theme="dark"] .newbtn,html[data-theme="dark"] .btn.primary{background:var(--grad-brand);color:var(--on-neon);border-color:transparent}
html[data-theme="dark"] .chip,html[data-theme="dark"] .badge,html[data-theme="dark"] .tag,html[data-theme="dark"] .label{background:var(--surface-2);border-color:var(--line);color:var(--ink2)}

/* Logo is force-inverted to white for dark skins; in light mode it must be dark. */
html:not([data-theme="dark"]) .logo,
html:not([data-theme="dark"]) .qlogo{ filter:brightness(0) !important; }


/* Popup elevation — dynamic separation from the bg. On dark skins --surface ~= --bg,
   so floating popups need a crisp --line border + an accent halo + a deep shadow to
   read as raised. Accent-aware (rgba(var(--neon-rgb))) so it follows the active skin. */
:root{ --pop-elev:0 24px 64px rgba(20,40,60,.20), 0 0 40px rgba(var(--neon-rgb,13,92,99),.06); }
html[data-theme="dark"]{ --pop-elev:0 30px 80px rgba(0,0,0,.62), 0 0 52px rgba(var(--neon-rgb,20,194,255),.12); }