/* invixo.css — design system for the new "Invixo" pages (Dashboard / Reports /
   Support), recreated from the Claude Design prototype (Invixo.dc.html).
   Light is the DEFAULT (white); [data-theme="dark"] is the override, matching the
   app's existing data-theme + localStorage("invixo:theme") convention.
   Visual language: sharp corners (radius 0), Arial, blue accent. */

:root{
  --bg:#ffffff; --bg-2:#fbfaf7; --panel:#ffffff; --panel-2:#fbfaf7; --elev:#ffffff;
  --border:#e7e2d8; --border-2:#d9d3c7; --hover:#f4f1ea;
  --text:#1a1815; --text-2:#5b554c; --text-3:#8c857a;
  --accent:#1d6fe0; --accent-2:#2f80ff; --accent-soft:rgba(29,111,224,0.10);
  --cyan:#0d9488; --lime:#4d7c0f; --red:#dc2626; --blue:#2563eb; --ok:#1e8e3e;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px -10px rgba(0,0,0,.14);
  --card-shadow:0 1px 2px rgba(28,25,21,.045),0 5px 18px -8px rgba(28,25,21,.09);
  --font-display:Arial,Helvetica,sans-serif; --font-sans:Arial,Helvetica,sans-serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="dark"]{
  --bg:#161513; --bg-2:#1d1b18; --panel:#211f1b; --panel-2:#262320; --elev:#2b2823;
  --border:#332f29; --border-2:#423d35; --hover:#2a2622;
  --text:#f4f1ea; --text-2:#b4aca0; --text-3:#837b6f;
  --accent:#2f80ff; --accent-2:#5fa0ff; --accent-soft:rgba(47,128,255,0.15);
  --cyan:#3fd9c9; --lime:#bbe84a; --red:#ff6a52; --blue:#6aa8ff; --ok:#5be38b;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 40px -8px rgba(0,0,0,.55);
  --card-shadow:0 1px 2px rgba(0,0,0,.45),0 8px 26px -8px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
button{font-family:inherit}
a{color:inherit}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── shared top header ─────────────────────────────────────────────────────── */
.eng-header{
  height:62px; flex:none; display:flex; align-items:center; padding:0 22px;
  border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:50;
}
.eng-brand{display:flex;align-items:center;gap:11px;margin-right:38px;text-decoration:none;color:var(--text);}
.eng-mark{width:30px;height:30px;border-radius:0;background:var(--text);color:var(--bg-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:17px;}
.eng-wordmark{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-0.01em;}
.eng-nav{display:flex;gap:25px;height:62px;}
.eng-navlink{
  display:flex;align-items:center;height:62px;padding:0 1px;background:none;border:none;cursor:pointer;
  font-family:var(--font-sans);font-size:14.5px;position:relative;text-decoration:none;
  color:var(--text-2);font-weight:450;
}
.eng-navlink:hover{color:var(--text);}
.eng-navlink.active{color:var(--text);font-weight:600;}
.eng-navlink .eng-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;border-radius:2px;}
.eng-navlink.active .eng-bar{background:var(--accent);}
.eng-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.eng-iconbtn{
  width:38px;height:38px;border-radius:0;border:1px solid var(--border);background:transparent;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;
}
.eng-iconbtn:hover{background:var(--hover);color:var(--text);}
.eng-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-2);}
.nav-user{
  display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:0;border:1px solid var(--border);
  background:transparent;cursor:pointer;color:var(--text);
}
.nav-user:hover{background:var(--hover);}
.nav-ava{width:28px;height:28px;border-radius:0;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;font-family:var(--font-mono);}
.nav-uname{font-size:13.5px;font-weight:500;}

/* ── shared content helpers ────────────────────────────────────────────────── */
.eng-main{flex:1;min-height:0;display:flex;flex-direction:column;}
.eng-page{padding:34px 40px 90px;max-width:1380px;width:100%;margin:0 auto;}
.eng-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);}
.eng-card{background:var(--panel);border:1px solid var(--border);border-radius:0;}
.eng-h1{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-0.02em;margin:0 0 6px;}
.eng-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;border-radius:0;
  padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;}
.eng-btn-primary:hover{background:var(--accent-2);}
.eng-btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-2);color:var(--text);
  border-radius:0;padding:10px 16px;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:none;}
.eng-btn-ghost:hover{background:var(--hover);}

/* ── Seamless surfaces (Invixo pages) ─────────────────────────────────────────
   Match theme.css: drop the 1px grey box-outlines; genuine cards lift with a soft
   shadow, tables collapse to a single faint row hairline. invixo.css loads BEFORE
   each page's inline <style>, so these need !important to beat the base .pm-*/.ph-*
   rules. Sharp corners (radius:0) preserved. Pages built from inline style=""
   (reports.html, support.html) + dashboard's inline dividers get per-page edits. */
.eng-card, .pm-card, .pm-stat, .pm-pcard, .pm-acc, .ph-card {
  border-color: transparent !important;
  box-shadow: var(--card-shadow) !important;
}
/* Re-assert the INTERACTIVE states the flatten above would otherwise wipe — these
   must beat it, so they carry !important too (a higher-specificity !important rule
   wins over a lower-specificity !important one). Fixes: the Permits selected-filter
   tile losing its accent highlight; card hover-lift being flattened. */
.pm-stat.sel { border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; }
.pm-stat:hover { border-color: var(--border-2) !important; }
.ph-card:hover { border-color: var(--border-2) !important; }
.eng-card:hover { border-color: var(--border-2) !important; box-shadow: 0 10px 30px -16px rgba(0,0,0,.28) !important; }
.pm-table { border: none !important; }
.pm-table thead th { border-bottom: 1px solid var(--border) !important; }
.pm-table td, .pm-row, .pm-li { border-color: var(--border) !important; }
.pm-table tbody tr:last-child td, .pm-row:last-child, .pm-li:last-child { border-bottom-color: transparent !important; }
/* ── Themed scrollbars ────────────────────────────────────────────────────────
   ONE rule set, both themes, every page. The thumb token resolves in either
   stylesheet family and to the SAME hex in both, so a scrollbar looks identical
   across the app: --border-2 (invixo.css) == --field-line (theme.css)
   = #d9d3c7 light / #423d35 dark. Track stays transparent so it picks up
   whatever panel it is scrolling inside.

   THE CHROMIUM TRAP: if `scrollbar-color` is set on an element, Blink IGNORES
   every ::-webkit-scrollbar rule for it. Measured on Chrome 148 — a 28px webkit
   scrollbar rendered 30px alone, and 17px (the plain default) the moment
   scrollbar-color was added. That is exactly how the old dark-mode block in
   index.html silently disabled itself. So the Firefox declaration MUST stay
   fenced behind @supports, where Blink never sees it. */
::-webkit-scrollbar        { width:10px; height:10px; }
::-webkit-scrollbar-track  { background:transparent; }
::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb  { background:var(--border-2, var(--field-line)); border-radius:0;
                             border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3, var(--muted)); background-clip:content-box; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width:thin; scrollbar-color:var(--border-2, var(--field-line)) transparent; }
}