/* Shared Invixo theme. Loaded AFTER each page's own <style> so it overrides the
   page's legacy palette. Reskins every legacy page to the Invixo design language
   (white default, Arial, blue accent, sharp corners) to match dashboard/reports/
   support (which use invixo.css). Pairs with theme.js (light/dark toggle). */

:root{
  /* Invixo light palette, mapped onto the legacy variable names */
  --ink:#1a1815; --ink2:#5b554c; --muted:#8c857a; --faint:#a39b8f;
  --bg:#ffffff; --sidebar:#f4f2ed; --panel:#ffffff; --panel2:#f3f1ec;   /* ribbon a real step off white — the flat-white complaint (2026-07-31) */
  --line:#e7e2d8; --line-soft:#efeae0; --field:#ffffff; --field-line:#d9d3c7;
  --pill:#efeae0; --accent:#1d6fe0; --accent-2:#2f80ff; --accent-ink:#ffffff;
  --nav-bg:#ffffff; --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);
  /* legacy aliases / accents */
  --blue:#1d6fe0; --blue-dk:#1657c8; --blue-lt:var(--panel2); --blue-deep:#1657c8;
  --text:var(--ink); --text2:var(--ink2); --border:var(--line); --hover:#f4f1ea;
  --white:var(--panel); --orange:#e8710a; --green:#1e8e3e; --red:#dc2626; --amber:#b45309;
  --cyan:#0d9488; --lime:#4d7c0f;
}
[data-theme="dark"]{
  --ink:#f4f1ea; --ink2:#b4aca0; --muted:#837b6f; --faint:#837b6f;
  --bg:#161513; --sidebar:#1d1b18; --panel:#211f1b; --panel2:#262320;
  --line:#332f29; --line-soft:#2a2723; --field:#262320; --field-line:#423d35;
  --pill:#2b2823; --accent:#2f80ff; --accent-2:#5fa0ff; --accent-ink:#ffffff;
  --nav-bg:#1d1b18; --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);
  --blue:#2f80ff; --blue-dk:#5fa0ff; --blue-deep:#1657c8;
  --hover:#2a2622; --white:var(--panel); --orange:#ff8a4c; --green:#5be38b; --red:#ff6a52;
  --amber:#f0a020; --cyan:#3fd9c9; --lime:#bbe84a;
}
html, body{
  background:var(--bg); color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Sharp corners — the defining Invixo trait. Flatten the common box/control
   components; small round indicators (dots, spinners, the theme FAB) are left
   alone because they carry no matching class. ──────────────────────────────── */
button, input, select, textarea,
.btn, .btn2, .upbtn, .iconbtn, .ico, .stat, .pill, .role, .tab, .ps-btn, .chip,
.card, .ocard, .pcard, .oa-card, .panel, .addbar, .empty, .thumb, .card-logo,
table, .mchip, .mem-box, .acct-menu, .acct-modal, .acct-seg button,
.avatar, .nav-ava, .nav-avatar, .oa-logo, .oa-ini{
  border-radius:0 !important;
}
/* ONE deliberate exception to the flatten above: the sidebar mode strip is a CAPSULE by
   design (index.html #sb-modes / .sb-mode both ask for 999px). Its container is a <div>,
   so it keeps its curve — but each tab is a <button>, which the blanket rule caught, so
   the active blue pill rendered square INSIDE a rounded bar. Restoring it here (rather
   than carving `:not(.sb-mode)` out of the list above) leaves every other button, input,
   select, textarea, card, panel and table that rule covers exactly as sharp as it was. */
.sb-mode{ border-radius:999px !important; }
/* Second deliberate exception, same story: the injected header utility buttons (theme,
   bell, and the "?" shortcuts button that docks in as .egnav-btn) are CIRCLES by design —
   invixo-nav.js asks for 50% but without !important, so the bare `button` heading the
   blanket flattened them on every theme.css page while the invixo.css pages (dashboard)
   kept their circles. Restoring the one class here converges the two families; the fix
   does NOT belong in invixo-nav.js because that injected sheet is shared by every page
   and works today without !important — the exception sits beside the rule that broke it. */
.egnav-btn{ border-radius:50% !important; }
/* Third deliberate exception — Kye's removal-dialog mock (2026-08-18). The confirm /
   prompt box is a 6px card with 4px controls, the design-system.css family, so .uim-box
   has come OUT of the flatten list above (its own rule in ui.js now sets the radius, no
   !important needed). Its BUTTONS still need the carve-out .egnav-btn needed: the bare
   `button` heading that list carries !important, which no plain rule in ui.js's injected
   sheet can outrank. The dialog's FIELDS are deliberately left flat — every other input
   in the app is square and they are seen side by side. */
#ui-modal .uim-btn{ border-radius:4px !important; }
/* Same carve-out for the client-invite dialog (ds design, 2026-08-22): the blanket
   above flattens every button/input/select, and no rule in an injected sheet can
   outrank it — only this file can. */
.shr-modal button, .shr-modal input, .shr-modal select{ border-radius:4px !important; }

/* ── Nav → Invixo header: solid bar, square "I" mark, blue active underline ── */
#nav{ background:var(--nav-bg)!important; border-bottom:1px solid var(--line)!important; box-shadow:none!important;
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav-logo{ color:var(--ink)!important; font-family:Arial,Helvetica,sans-serif; }
.nav-logo svg, .nav-logo-mark{ display:none!important; }   /* hide legacy SVG + index's own mark; ::before supplies the square initial */
.nav-logo::before{ content:"I"; width:26px; height:26px; border-radius:0; background:var(--ink); color:var(--bg);
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex:0 0 auto; }
.nav-link{ color:var(--ink2)!important; background:none!important; text-transform:none!important; letter-spacing:0!important;
  font-weight:450!important; border-radius:0!important; border-bottom:2px solid transparent!important; }
.nav-link:hover{ color:var(--ink)!important; background:none!important; }
.nav-link.active{ color:var(--ink)!important; background:none!important; font-weight:600!important; border-bottom-color:var(--accent)!important; }
.nav-user{ color:var(--ink)!important; }
.nav-username, .nav-uname{ color:var(--ink)!important; }
.nav-caret{ color:var(--muted)!important; }
.nav-avatar, .nav-ava{ background:var(--accent)!important; color:#fff!important; }

/* page footer (organizations / projects) */
footer{ background:var(--panel)!important; color:var(--muted)!important; border-top:1px solid var(--line); }
footer a{ color:var(--ink2)!important; }

/* ── Floating theme toggle (injected by theme.js when no in-nav button) ──── */
#theme-fab{ position:fixed; right:18px; bottom:18px; z-index:9500; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel); color:var(--ink2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.16); transition:color .15s, background .15s; }
#theme-fab:hover{ color:var(--ink); background:var(--panel2); }

/* ── Seamless surfaces ────────────────────────────────────────────────────────
   After whitening the page ground, a 1px grey outline around every card, panel,
   table and empty-state read as clutter. Drop those box-lines: genuine cards lift
   with a soft shadow instead, nested sub-panels separate by whitespace, and tables
   collapse to a single faint row hairline. Sharp corners (radius:0) are preserved.
   theme.css loads AFTER each legacy page's <style>, so these win with no !important. */
.card, .ocard, .pcard, .oa-card, .al-card, .mem-box, .dm-box, .hist-card,
.d-grid, .d-assets, .lib, .addbar, #focus-banner, #bulkbar,
.oa-hd, .oa-body, .mem-hd, .mem-ft, .dm-hdr, .dm-foot, .hist-hd {
  border-color: transparent;
}
/* .tree-panel / .tree-hdr keep their border: the admin directory two-pane
   vertical divider is genuine structure, not box clutter. */
.card, .ocard, .pcard, .oa-card, .al-card, .mem-box, .dm-box, .hist-card {
  box-shadow: var(--card-shadow);
}
/* tables / lists → no outer frame, one faint row hairline only */
table, .lib, .d-assets { border: none; box-shadow: none; }
.lib thead th, .d-assets thead th, table thead th { border-bottom: 1px solid var(--line-soft); }
.lib td, .d-assets td, table tbody td, .hist-row, .mem-row { border-color: var(--line-soft); }
.lib tbody tr:last-child td, .d-assets tbody tr:last-child td, table tbody tr:last-child td { border-bottom: none; }
/* dashed empty-state / dropzone frames → soft hairline, not a hard dashed box */
.empty, .empty.drophint, #drop, #dropzone, .oa-newproj button { border-color: var(--line-soft); }

/* ── 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; }
}