@charset "UTF-8";

/* ==========================================================================
   MyAgent — "Ledger" theme (style.next.css)

   New visual system replacing the StrikingDash-era style.clean.css.
   Loaded AFTER style.clean.css as a full re-skin layer; structural/behavioral
   rules (grid, collapse JS hooks, vendor widgets) still come from the old
   file, everything visual is (re)defined here. Once every page is verified,
   style.clean.css can be trimmed and eventually dropped.

   Direction: warm paper + ink "work ledger". IBM Plex Sans/Mono, deep
   viridian accent, dark ink sidebar, flat hairline-bordered panels (no
   floating card shadows), one unified chip style for statuses/tags.

   TOC
   01 Tokens
   01b Tokens: dark theme
   02 Base & typography
   03 Shell: sidebar
   04 Shell: header / topbar
   05 Shell: content area & footer
   06 Panels (Bootstrap .card re-skin)
   07 Buttons
   08 Chips (badges / tags unified)
   09 Tables
   10 Forms & inputs
   11 Dropdowns & action menus
   12 Modals
   13 Alerts / flash messages
   14 Pagination, breadcrumbs, tabs
   15 Misc widgets (checkbox, switch, scroll shadows, select2/tom-select)
   16 Utilities
   17 Responsive
   21 CDE RACI matrix (people x surfaces access grid)
   22 AI authoring (chat panel, diff card, document preview)
   23 Preference pickers (text size + theme)
   24 Dark-theme leak shims vs style.clean.css
   24c Leak shims: hover states, inline tints, gated views
   24d Sign-in / password-reset pages
   24e Contract revenues/expenses table
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --lg-paper: #f2f0e9;          /* page background */
  --lg-surface: #fbfaf7;        /* panel background */
  --lg-surface-raised: #ffffff; /* popovers, modals, menus */

  /* ink */
  --lg-ink: #232b27;
  --lg-ink-soft: #5d6862;
  --lg-ink-faint: #98a19a;

  /* lines */
  --lg-line: #e3dfd3;
  --lg-line-strong: #cfc9b8;

  /* accent — deep viridian (ledger green) */
  --lg-accent: #206b52;
  --lg-accent-ink: #17503d;
  --lg-accent-tint: #e2ede6;
  --lg-accent-bright: #7cd0ac;  /* accent on dark surfaces */

  /* sidebar night surface */
  --lg-night: #1b2622;
  --lg-night-2: #243029;
  --lg-night-line: #32403a;
  --lg-night-text: #a7b3ab;
  --lg-night-text-bright: #eef0e9;

  /* status system — the ONLY colors chips/badges may use */
  --lg-ok: #206b52;      --lg-ok-tint: #dfeee6;     --lg-ok-line: rgba(32, 107, 82, 0.25);
  --lg-warn: #9a6410;    --lg-warn-tint: #f5ead3;   --lg-warn-line: rgba(154, 100, 16, 0.25);
  --lg-danger: #ab3529;  --lg-danger-tint: #f6e2de; --lg-danger-line: rgba(171, 53, 41, 0.25);
  --lg-info: #3d5d7e;    --lg-info-tint: #e2eaf2;   --lg-info-line: rgba(61, 93, 126, 0.25);
  --lg-neutral: #5d6862; --lg-neutral-tint: #e9e7de;

  /* text ON a solid accent/status fill (filled buttons, active pills, chips).
     Its own token because the dark theme inverts it: light mode paints white
     on a deep fill, dark mode paints near-black on a bright one. */
  --lg-on-fill: #ffffff;
  --lg-on-fill-soft: rgba(255, 255, 255, 0.7);

  /* incidental surfaces that have to flip with the theme */
  --lg-overlay: rgba(27, 38, 34, 0.55);        /* mobile sidebar backdrop */
  --lg-row-hover: rgba(32, 107, 82, 0.045);    /* table row hover wash */
  --lg-scroll-shadow: rgba(28, 35, 33, 0.08);  /* scroll-edge fades */

  /* type */
  --lg-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --lg-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* geometry */
  --lg-radius: 8px;        /* panels, modals */
  --lg-radius-ctl: 6px;    /* buttons, inputs */
  --lg-radius-chip: 4px;   /* chips/badges */
  --lg-sidebar-w: 280px;
  --lg-sidebar-w-collapsed: 76px;
  --lg-header-h: 64px;

  /* elevation — menus/popovers only; panels stay flat */
  --lg-shadow-pop: 0 8px 24px rgba(28, 35, 33, 0.14), 0 2px 6px rgba(28, 35, 33, 0.08);
  --lg-shadow-modal: 0 24px 64px rgba(28, 35, 33, 0.25);
  --lg-focus-ring: 0 0 0 3px rgba(32, 107, 82, 0.25);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   01b TOKENS — DARK THEME (tracker #69)

   The whole re-skin reads from the tokens above, so the dark theme is a token
   swap, not a second stylesheet: every panel, table, chip and control follows
   automatically. Opt-in only — `data-theme="dark"` is stamped on <html> by the
   inline script in layouts/app.blade.php from the user's saved choice. There
   is deliberately no prefers-color-scheme fallback: the picker is explicit
   (admin profile → text size card), so the OS setting never surprises anyone.

   Two inversions are worth knowing about:
     • --lg-on-fill flips from white to near-black, because dark-mode fills are
       BRIGHT (mint/amber/coral) rather than deep. Filled buttons therefore read
       as dark text on a light fill, which is the standard dark-mode pattern.
     • --lg-*-tint flips from a pale wash to a deep one, so chips and alerts
       stay quiet against a dark page instead of glowing.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  /* surfaces — a lifted charcoal-green, not near-black. The first cut sat at
     #111714/#171f1b and read as a hole in the screen; these are ~10 points
     lighter so panels separate from the page by tone instead of by hairline
     alone, and long reading sessions do not feel like staring into a well. */
  --lg-paper: #1b2320;
  --lg-surface: #2a3531;
  --lg-surface-raised: #34413c;

  /* ink */
  --lg-ink: #eef2ec;
  --lg-ink-soft: #b4beb7;
  --lg-ink-faint: #8b968f;

  /* lines — visible against the lifted surfaces without turning into rules */
  --lg-line: #3f4d47;
  --lg-line-strong: #52625b;

  /* accent — the ledger green lifted until it carries on a dark ground.
     --lg-accent-ink is the *hover* value, so on dark it gets brighter, not
     darker, the way it does on paper. */
  --lg-accent: #5fcb9d;
  --lg-accent-ink: #86dcb6;
  --lg-accent-tint: #2a4036;
  --lg-accent-bright: #7cd0ac;

  /* sidebar — a shade below the page so the shell still reads as separate */
  --lg-night: #151d19;
  --lg-night-2: #1e2823;
  --lg-night-line: #2e3a34;
  --lg-night-text: #a9b5ac;
  --lg-night-text-bright: #eef0e9;

  /* status system */
  --lg-ok: #5fcb9d;      --lg-ok-tint: #1f3529;     --lg-ok-line: rgba(95, 203, 157, 0.32);
  --lg-warn: #e0ad4d;    --lg-warn-tint: #3a2d14;   --lg-warn-line: rgba(224, 173, 77, 0.32);
  --lg-danger: #ee8578;  --lg-danger-tint: #3d221e; --lg-danger-line: rgba(238, 133, 120, 0.32);
  --lg-info: #8bb9e6;    --lg-info-tint: #1e2d3b;   --lg-info-line: rgba(139, 185, 230, 0.32);
  --lg-neutral: #b4beb7; --lg-neutral-tint: #354039;

  /* near-black text on the bright fills */
  --lg-on-fill: #0d1512;
  --lg-on-fill-soft: rgba(13, 21, 18, 0.72);

  --lg-overlay: rgba(6, 10, 8, 0.62);
  --lg-row-hover: rgba(124, 208, 172, 0.07);
  --lg-scroll-shadow: rgba(0, 0, 0, 0.3);

  /* elevation reads as depth of shadow, not as a lighter surface */
  --lg-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --lg-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.55);
  --lg-focus-ring: 0 0 0 3px rgba(95, 203, 157, 0.32);

  /* native widgets (scrollbars, date pickers, the browser's own form chrome) */
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   02 BASE & TYPOGRAPHY

   UNITS: every font-size for *reading text* in this file is rem, never px.
   The accessibility text-size picker (admin profile, tracker #31) works by
   scaling the ROOT font-size (html.fs-large / html.fs-xlarge in
   style.clean.css) — an absolute px value is simply immune to it and the
   element stays put while its neighbours grow. rem here is a hard rule, not
   a preference: 14px → 0.875rem, 13.5px → 0.84375rem, 12px → 0.75rem …
   (divide by 16).

   px is allowed only where the value sizes something that is NOT reading
   text and whose box is fixed anyway — an icon glyph in a px-wide slot, or
   a label inside px grid geometry (calendar cells, gantt columns). Those
   sites carry a comment saying so.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--lg-font);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--lg-ink);
  background: var(--lg-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lg-font);
  color: var(--lg-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Sizes restated in rem. Bootstrap 3 ships these headings in absolute px
   (30/24/22/20/18/16), which the theme was inheriting — so every bare
   heading in the app ignored the text-size picker. The values below are the
   same numbers over a 16px root, i.e. pixel-identical at normal scale; they
   just scale now. */
h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }
.lead   { font-size: 1.33rem; }
.display-1 { font-size: 3rem; }
.display-2 { font-size: 2.5rem; }
.display-3 { font-size: 2.25rem; }
.display-4 { font-size: 1.875rem; }

a {
  color: var(--lg-accent);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--lg-accent-ink);
  text-decoration: none;
}

code, kbd, pre, samp, .mono {
  font-family: var(--lg-mono);
  font-size: 0.92em;
}
code {
  color: var(--lg-danger);
  background: var(--lg-neutral-tint);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

hr {
  border-top: 1px solid var(--lg-line);
}

::selection {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}

/* consistent, visible keyboard focus */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--lg-focus-ring);
}

/* thin, unobtrusive scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--lg-line-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--lg-line-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   03 SHELL: SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
  background: var(--lg-night);
  border-right: none;
  width: var(--lg-sidebar-w);
}

.sidebar__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--lg-night-line);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  /* legacy fixes height:74px, which clips a taller header */
  height: auto;
  min-height: 64px;
}

/* logo sits on a light plate so any logo artwork works on the dark bg.
   126-1.png is a tight square crop — size it here, never inline. */
.sidebar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lg-paper);
  border-radius: 6px;
  padding: 6px;
  max-width: 100%;
}
.sidebar__logo img {
  height: 36px;
  width: 36px;
  max-width: none;
  object-fit: contain;
  display: block;
}

/* sits to the RIGHT of the logo plate (header is a flex row) */
.sidebar__tenant-name {
  margin-top: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lg-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg-accent-bright);
  text-align: left;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* mobile-only close: rides at the end of the header flex row */
.sidebar__close {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--lg-night-text);
}
.sidebar__close:hover { color: var(--lg-night-text-bright); }

.sidebar__menu-group {
  padding: 10px 0;
}

.sidebar__menu-group ul.sidebar_nav li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: var(--lg-night-text);
  font-size: 0.84375rem;
  font-weight: 450;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar__menu-group ul.sidebar_nav li > a .nav-icon {
  color: inherit;
  /* px on purpose: an icon glyph in a fixed 18px slot. Scaling it with the
     text-size picker would push it out of its box and break label alignment
     (same reasoning as the .nav-icon pin in style.clean.css). */
  font-size: 15px;
  width: 18px;
  text-align: center;
  opacity: 0.75;
}

.sidebar__menu-group ul.sidebar_nav li > a:hover {
  background: var(--lg-night-2);
  color: var(--lg-night-text-bright);
}

/* active: bright text + mint marker — overrides the old inline-styled look */
.sidebar__menu-group ul.sidebar_nav li > a.active {
  background: var(--lg-night-2);
  border-left: 3px solid var(--lg-accent-bright);
  padding-left: 17px;
  color: var(--lg-night-text-bright);
  font-weight: 600;
}
.sidebar__menu-group ul.sidebar_nav li > a.active .nav-icon { opacity: 1; }

/* submenu */
.sidebar__menu-group ul.sidebar_nav li ul {
  background: transparent;
}
.sidebar__menu-group ul.sidebar_nav li ul li > a {
  padding: 7px 20px 7px 50px;
  font-size: 0.8125rem;
  color: var(--lg-night-text);
  border-left: 3px solid transparent;
}
.sidebar__menu-group ul.sidebar_nav li ul li > a:hover {
  color: var(--lg-night-text-bright);
  background: var(--lg-night-2);
}
.sidebar__menu-group ul.sidebar_nav li ul li > a.active {
  background: var(--lg-night-2);
  border-left: 3px solid var(--lg-accent-bright);
  color: var(--lg-night-text-bright);
  font-weight: 600;
}

.sidebar__menu-group ul.sidebar_nav li.has-child > a .toggle-icon {
  color: var(--lg-night-text);
  opacity: 0.6;
}

.sidebar__menu-group .menu-title span {
  color: var(--lg-ink-faint);
  font-family: var(--lg-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Group headings separate runs of nav entries, so they need breathing room
     above as well as below (the base rule only sets margin-bottom), and the same
     20px inset as the links they head — not the base rule's 30px. */
  padding: 0 20px;
  margin: 10px 0;
}

/* bottom block */
.sidebar__bottom {
  border-top: 1px solid var(--lg-night-line);
  background: var(--lg-night);
  padding-top: 10px;
}

.sidebar__language a {
  opacity: 0.45;
  filter: saturate(0.6);
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.sidebar__language a.active,
.sidebar__language a:hover {
  opacity: 1;
  filter: none;
}

/* no border-top here — .sidebar__language above already draws the divider */
.sidebar__user {
  border-top: none;
}
.sidebar__user-info h6 {
  color: var(--lg-night-text-bright);
  font-size: 0.8125rem;
}
.sidebar__user-info span {
  color: var(--lg-night-text);
  font-size: 0.71875rem;
}
.sidebar__user-logout {
  color: var(--lg-night-text);
  background: transparent;
}
.sidebar__user-logout:hover { color: var(--lg-danger-tint); }

/* Non-destructive icon action in the user row (notification settings). Same
   footprint as the logout button, accent hover instead of the danger tint. */
.sidebar__user-action {
  color: var(--lg-night-text);
  background: transparent;
  display: inline-flex; align-items: center;
}
.sidebar__user-action:hover { color: var(--lg-accent-bright); }

/* tenant switcher (styles moved out of _aside.blade.php inline block) */
.sidebar__tenant-switch { position: relative; padding: 0 1rem 0.5rem; }
.sidebar__tenant-switch-toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: var(--lg-night-2);
  border: 1px solid var(--lg-night-line);
  border-radius: var(--lg-radius-ctl);
  padding: 0.45rem 0.6rem;
  color: var(--lg-accent-bright);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.sidebar__tenant-switch-toggle .menu-text {
  flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar__tenant-switch-caret { transition: transform 0.15s ease; font-size: 0.7rem; }
.sidebar__tenant-switch.open .sidebar__tenant-switch-caret { transform: rotate(180deg); }
.sidebar__tenant-switch-menu {
  list-style: none; margin: 0.35rem 0 0; padding: 0.25rem;
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
}
.sidebar__tenant-switch-menu form { margin: 0; }
.sidebar__tenant-switch-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left;
  background: transparent; border: 0; padding: 0.45rem 0.55rem;
  border-radius: 4px; color: var(--lg-ink); font-size: 0.8rem; cursor: pointer;
}
.sidebar__tenant-switch-item:hover {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}

/* collapsed rail keeps the dark surface */
.sidebar.collapsed { width: var(--lg-sidebar-w-collapsed); }
.sidebar.collapsed .sidebar__menu-group li a { border-left-width: 0; }
.sidebar.collapsed .sidebar__menu-group li a.active,
.sidebar.collapsed .sidebar__menu-group li a:hover {
  background: var(--lg-night-2);
  color: var(--lg-night-text-bright);
}
.sidebar.collapsed .sidebar__menu-group .has-child ul {
  background: var(--lg-night-2);
  box-shadow: var(--lg-shadow-pop);
}
.sidebar.collapsed .sidebar__menu-group .has-child ul li a:hover,
.sidebar.collapsed .sidebar__menu-group .has-child ul li a.active {
  color: var(--lg-night-text-bright);
  background: var(--lg-night);
}

/* CDE-focused shell (plan 18) ------------------------------------------------
   The project-centric sidebar reuses the classes above. One correction: the
   project switcher reuses .sidebar__tenant-switch markup, but here that markup
   sits inside a sidebar_nav <li>, so its dropdown items inherit the 50px submenu
   padding (see "submenu" above) and start half-way across the rail. Reset it.

   The "More" group needs no rule: it renders the shared agenda partials as a FLAT
   list under a menu-title heading rather than nesting them in a has-child <ul>,
   so every entry keeps the normal 20px top-level inset. */
.sidebar__menu-group ul.sidebar_nav li .sidebar__tenant-switch-menu li > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.8rem;
  border-left: 0;
}
/* The leading ➜ is a bare <span class="fa">, not a .nav-icon, so it does not get
   the 18px icon box — give it one so labels line up under each other. */
.sidebar__menu-group ul.sidebar_nav li .sidebar__tenant-switch-menu li > a > .fa {
  width: 14px;
  text-align: center;
  flex: 0 0 auto;
  opacity: 0.75;
}
/* The switcher toggle is a button inside an <li>: keep it off the 20px nav
   inset so it lines up with the rail's other controls. */
.sidebar__menu-group ul.sidebar_nav li > .sidebar__tenant-switch {
  padding: 0 1rem 0.5rem;
}

/* mobile overlay backdrop */
.overlay-dark-sidebar {
  background: var(--lg-overlay);
  backdrop-filter: blur(1.5px);
}

/* --------------------------------------------------------------------------
   04 SHELL: HEADER / TOPBAR
   -------------------------------------------------------------------------- */
.header-top {
  background: var(--lg-paper);
  border-bottom: 1px solid var(--lg-line);
  box-shadow: none;
}

.header-top .navbar {
  background: transparent;
}

.navbar-page-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lg-ink);
  margin: 0;
}

.sidebar-toggle {
  color: var(--lg-ink-soft);
}
.sidebar-toggle:hover { color: var(--lg-ink); }

.navbar-right .contact-search-input {
  min-height: 40px; /* height:40px clipped the value at the larger text sizes */
  height: auto;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-ctl);
  background: var(--lg-surface);
  box-shadow: none;
  font-family: var(--lg-font);
}
.navbar-right .contact-search-input:focus {
  border-color: var(--lg-accent);
  box-shadow: var(--lg-focus-ring);
}

/* back-bar above page content */
.page-back-bar {
  padding: 2px 0 10px;
}
.page-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lg-ink-soft);
}
.page-back-link:hover { color: var(--lg-accent); }

/* --------------------------------------------------------------------------
   05 SHELL: CONTENT AREA & FOOTER
   -------------------------------------------------------------------------- */
.contents {
  background: var(--lg-paper);
}

.main-content {
  background: var(--lg-paper);
}

.footer-wrapper,
footer.footer-wrapper {
  background: transparent;
  border-top: 1px solid var(--lg-line);
  color: var(--lg-ink-faint);
  font-size: 0.75rem;
}
.footer-wrapper a { color: var(--lg-ink-soft); }
.footer-wrapper a:hover { color: var(--lg-accent); }

/* --------------------------------------------------------------------------
   06 PANELS — Bootstrap .card re-skinned as flat ledger panels
   -------------------------------------------------------------------------- */
.card {
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  box-shadow: none;
}

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--lg-line);
  border-radius: var(--lg-radius) var(--lg-radius) 0 0;
  min-height: 52px;
  padding: 8px 20px;
}

/* panel titles become small-caps ledger labels instead of bold headings */
.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5,
.card .card-header h6 {
  font-family: var(--lg-mono);
  font-size: 0.71875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lg-ink-soft);
  margin: 0;
  margin-right: auto;
}

.card .card-body {
  background: transparent;
  padding: 20px;
}

.card .card-footer {
  background: transparent;
  border-top: 1px solid var(--lg-line);
}

/* nested panels flatten out — no double frames */
.card .card {
  border: 1px solid var(--lg-line);
  box-shadow: none;
  background: var(--lg-surface-raised);
}

/* --------------------------------------------------------------------------
   07 BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--lg-font);
  font-weight: 500;
  font-size: 0.84375rem;
  border-radius: var(--lg-radius-ctl);
  padding: 0.45rem 0.95rem;
  line-height: 1.4;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  box-shadow: none;
}
.btn:focus { box-shadow: var(--lg-focus-ring); }
.btn i, .btn svg { vertical-align: -1px; }

.btn-sm { font-size: 0.78125rem; padding: 0.3rem 0.7rem; }
.btn-lg { font-size: 0.9375rem; padding: 0.6rem 1.3rem; }

/* primary — the one loud button on a page */
.btn.btn-primary {
  background: var(--lg-accent);
  border-color: var(--lg-accent);
  color: var(--lg-on-fill);
}
.btn.btn-primary:hover,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:focus {
  background: var(--lg-accent-ink);
  border-color: var(--lg-accent-ink);
  color: var(--lg-on-fill);
}

/* secondary / default / light / white — quiet outline on surface */
.btn.btn-secondary,
.btn.btn-default,
.btn.btn-light,
.btn.btn-white {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  color: var(--lg-ink);
}
.btn.btn-secondary:hover,
.btn.btn-default:hover,
.btn.btn-light:hover,
.btn.btn-white:hover,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-light:not(:disabled):not(.disabled):active {
  background: var(--lg-accent-tint);
  border-color: var(--lg-accent);
  color: var(--lg-accent-ink);
}

/* status buttons — quiet tinted until hover, so pages stop shouting */
.btn.btn-success {
  background: var(--lg-ok-tint);
  border-color: var(--lg-ok-tint);
  color: var(--lg-ok);
}
.btn.btn-success:hover,
.btn.btn-success:not(:disabled):not(.disabled):active {
  background: var(--lg-ok);
  border-color: var(--lg-ok);
  color: var(--lg-on-fill);
}

.btn.btn-danger {
  background: var(--lg-danger-tint);
  border-color: var(--lg-danger-tint);
  color: var(--lg-danger);
}
.btn.btn-danger:hover,
.btn.btn-danger:not(:disabled):not(.disabled):active {
  background: var(--lg-danger);
  border-color: var(--lg-danger);
  color: var(--lg-on-fill);
}

.btn.btn-warning {
  background: var(--lg-warn-tint);
  border-color: var(--lg-warn-tint);
  color: var(--lg-warn);
}
.btn.btn-warning:hover,
.btn.btn-warning:not(:disabled):not(.disabled):active {
  background: var(--lg-warn);
  border-color: var(--lg-warn);
  color: var(--lg-on-fill);
}

.btn.btn-info {
  background: var(--lg-info-tint);
  border-color: var(--lg-info-tint);
  color: var(--lg-info);
}
.btn.btn-info:hover,
.btn.btn-info:not(:disabled):not(.disabled):active {
  background: var(--lg-info);
  border-color: var(--lg-info);
  color: var(--lg-on-fill);
}

/* outline variants map to the same quiet language */
.btn.btn-outline-primary {
  border-color: var(--lg-accent);
  color: var(--lg-accent);
  background: transparent;
}
.btn.btn-outline-primary:hover {
  background: var(--lg-accent);
  border-color: var(--lg-accent);
  color: var(--lg-on-fill);
}
.btn.btn-outline-secondary,
.btn.btn-outline-light,
.btn.btn-outline-dark {
  border-color: var(--lg-line-strong);
  color: var(--lg-ink-soft);
  background: transparent;
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-light:hover,
.btn.btn-outline-dark:hover {
  background: var(--lg-surface-raised);
  border-color: var(--lg-accent);
  color: var(--lg-accent-ink);
}
.btn.btn-outline-danger {
  border-color: var(--lg-danger);
  color: var(--lg-danger);
  background: transparent;
}
.btn.btn-outline-danger:hover {
  background: var(--lg-danger);
  color: var(--lg-on-fill);
}
.btn.btn-outline-success {
  border-color: var(--lg-ok);
  color: var(--lg-ok);
  background: transparent;
}
.btn.btn-outline-success:hover {
  background: var(--lg-ok);
  color: var(--lg-on-fill);
}
.btn.btn-outline-warning {
  border-color: var(--lg-warn);
  color: var(--lg-warn);
  background: transparent;
}
.btn.btn-outline-warning:hover {
  background: var(--lg-warn);
  color: var(--lg-on-fill);
}
.btn.btn-outline-info {
  border-color: var(--lg-info);
  color: var(--lg-info);
  background: transparent;
}
.btn.btn-outline-info:hover {
  background: var(--lg-info);
  color: var(--lg-on-fill);
}

.btn.btn-link {
  color: var(--lg-accent);
  font-weight: 500;
}
.btn.btn-link:hover { color: var(--lg-accent-ink); text-decoration: underline; }

/* ghost icon button — kebab menus, header icon actions */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--lg-ink-soft);
  border-radius: var(--lg-radius-ctl);
  padding: 0.3rem 0.55rem;
  line-height: 1;
}
.btn-ghost:hover {
  background: var(--lg-neutral-tint);
  color: var(--lg-ink);
}

/* --------------------------------------------------------------------------
   08 CHIPS — one unified language for every badge / tag / status pill
   -------------------------------------------------------------------------- */
.chip,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--lg-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--lg-radius-chip);
  border: 1px solid transparent;
  background: var(--lg-neutral-tint);
  color: var(--lg-neutral);
  /* legacy pins .badge to height:20px, which the label overflows once the
     text-size picker scales it — let the chip size to its own content
     instead (at normal scale this lands on the same 20px). */
  height: auto;
}

/* semantic chip variants */
.chip--ok      { background: var(--lg-ok-tint);      color: var(--lg-ok); }
.chip--warn    { background: var(--lg-warn-tint);    color: var(--lg-warn); }
.chip--danger  { background: var(--lg-danger-tint);  color: var(--lg-danger); }
.chip--info    { background: var(--lg-info-tint);    color: var(--lg-info); }
.chip--neutral { background: var(--lg-neutral-tint); color: var(--lg-neutral); }
.chip--accent  { background: var(--lg-accent-tint);  color: var(--lg-accent-ink); }

/* legacy Bootstrap badge colors → mapped onto the same 5-color system */
.badge-primary   { background: var(--lg-accent-tint); color: var(--lg-accent-ink); }
.badge-secondary { background: var(--lg-neutral-tint); color: var(--lg-neutral); }
.badge-success   { background: var(--lg-ok-tint); color: var(--lg-ok); }
.badge-danger    { background: var(--lg-danger-tint); color: var(--lg-danger); }
.badge-warning   { background: var(--lg-warn-tint); color: var(--lg-warn); }
.badge-info      { background: var(--lg-info-tint); color: var(--lg-info); }
.badge-light     { background: var(--lg-neutral-tint); color: var(--lg-neutral); }
.badge-dark      { background: var(--lg-ink); color: var(--lg-paper); }

/* pill shape flattens to the unified square chip */
.badge-pill { border-radius: var(--lg-radius-chip); }

/* dot marker for compact status (e.g. table rows) */
.chip-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lg-neutral);
  vertical-align: middle;
}
.chip-dot--ok { background: var(--lg-ok); }
.chip-dot--warn { background: var(--lg-warn); }
.chip-dot--danger { background: var(--lg-danger); }
.chip-dot--info { background: var(--lg-info); }

/* --------------------------------------------------------------------------
   09 TABLES
   -------------------------------------------------------------------------- */
.table {
  color: var(--lg-ink);
  margin-bottom: 0;
}

.table thead th {
  font-family: var(--lg-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lg-ink-faint);
  background: transparent;
  border-top: none;
  border-bottom: 1px solid var(--lg-line-strong);
  padding: 10px 12px;
  white-space: nowrap;
}

.table td {
  border-top: 1px solid var(--lg-line);
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 0.84375rem;
}

.table tbody tr {
  transition: background 0.1s ease;
}
.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: var(--lg-row-hover);
}

/* kill zebra striping — hairlines are enough */
.table-striped tbody tr:nth-of-type(odd) {
  background: transparent;
}
.table-striped.table-hover tbody tr:hover,
.table-striped tbody tr:hover {
  background: var(--lg-row-hover);
}

/* numbers read as ledger figures */
.table td.num,
.table td.text-right {
  font-family: var(--lg-mono);
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}

.table-responsive {
  border-radius: 0 0 var(--lg-radius) var(--lg-radius);
}

/* footable sorting affordances */
.footable .footable-sortable:hover { color: var(--lg-ink); }
.footable .fooicon { color: var(--lg-ink-faint); }

/* --------------------------------------------------------------------------
   10 FORMS & INPUTS
   -------------------------------------------------------------------------- */
label,
.form-group label {
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--lg-ink-soft);
  margin-bottom: 0.3rem;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
  font-family: var(--lg-font);
  font-size: 0.84375rem;
  color: var(--lg-ink);
  background-color: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-ctl);
  min-height: 38px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: none;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--lg-accent);
  box-shadow: var(--lg-focus-ring);
  background-color: var(--lg-surface-raised);
  /* Bootstrap's own `.form-control:focus` sets color:#495057 at the same
     specificity. Without restating it here the re-skin won the background but
     not the text, so EVERY focused input typed dark grey on a dark surface
     (tracker #69). */
  color: var(--lg-ink);
}

.form-control::placeholder {
  color: var(--lg-ink-faint);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--lg-paper);
  color: var(--lg-ink-soft);
}

.input-group-text {
  background: var(--lg-paper);
  border: 1px solid var(--lg-line-strong);
  color: var(--lg-ink-soft);
  border-radius: var(--lg-radius-ctl);
  font-size: 0.8125rem;
}

.form-text, .form-hint, small.text-muted {
  color: var(--lg-ink-faint);
}

.invalid-feedback { color: var(--lg-danger); }
.form-control.is-invalid { border-color: var(--lg-danger); }
.valid-feedback { color: var(--lg-ok); }
.form-control.is-valid { border-color: var(--lg-ok); }

/* --------------------------------------------------------------------------
   11 DROPDOWNS & ACTION MENUS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
  padding: 0.3rem;
  font-size: 0.84375rem;
  min-width: 175px;
}

.dropdown-item {
  color: var(--lg-ink);
  border-radius: 4px;
  padding: 0.42rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-item i, .dropdown-item svg, .dropdown-item .nav-icon {
  color: var(--lg-ink-faint);
  width: 16px;
  text-align: center;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}
.dropdown-item:hover i { color: var(--lg-accent-ink); }

.dropdown-item.text-danger,
.dropdown-item--danger {
  color: var(--lg-danger);
}
.dropdown-item.text-danger:hover,
.dropdown-item--danger:hover {
  background: var(--lg-danger-tint);
  color: var(--lg-danger);
}

.dropdown-divider {
  border-top: 1px solid var(--lg-line);
  margin: 0.3rem 0.2rem;
}

.dropdown-header {
  font-family: var(--lg-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lg-ink-faint);
  padding: 0.4rem 0.6rem 0.2rem;
}

/* --------------------------------------------------------------------------
   12 MODALS
   -------------------------------------------------------------------------- */
.modal-backdrop {
  /* Color lives on the BASE class; darkness is expressed via opacity only.
     Bootstrap's .fade transitions opacity alone and removes .show at the
     START of the close animation — any color bound to .show snaps back to
     Bootstrap's #000 mid-fade and flashes the screen darker. */
  background-color: var(--lg-night);
}
.modal-backdrop.show {
  opacity: 0.6;
}

.modal-content {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-modal);
}

.modal-header {
  border-bottom: 1px solid var(--lg-line);
  padding: 14px 20px;
}
.modal-header .modal-title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-header .close {
  color: var(--lg-ink-faint);
  text-shadow: none;
  opacity: 1;
}
.modal-header .close:hover { color: var(--lg-ink); }

.modal-body { padding: 20px; }

.modal-footer {
  border-top: 1px solid var(--lg-line);
  padding: 12px 20px;
}

/* --------------------------------------------------------------------------
   13 ALERTS / FLASH MESSAGES
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--lg-radius-ctl);
  border: 1px solid transparent;
  font-size: 0.84375rem;
  padding: 0.7rem 1rem;
}
.alert-success {
  background: var(--lg-ok-tint);
  border-color: var(--lg-ok-line);
  color: var(--lg-ok);
}
.alert-danger {
  background: var(--lg-danger-tint);
  border-color: var(--lg-danger-line);
  color: var(--lg-danger);
}
.alert-warning {
  background: var(--lg-warn-tint);
  border-color: var(--lg-warn-line);
  color: var(--lg-warn);
}
.alert-info {
  background: var(--lg-info-tint);
  border-color: var(--lg-info-line);
  color: var(--lg-info);
}

/* --------------------------------------------------------------------------
   14 PAGINATION, BREADCRUMBS, TABS
   -------------------------------------------------------------------------- */
.pagination {
  gap: 4px;
}
.pagination .page-link {
  border: 1px solid transparent;
  border-radius: var(--lg-radius-ctl);
  color: var(--lg-ink-soft);
  background: transparent;
  font-size: 0.8125rem;
  min-width: 32px;
  text-align: center;
  font-family: var(--lg-mono);
}
.pagination .page-link:hover {
  background: var(--lg-neutral-tint);
  color: var(--lg-ink);
}
.pagination .page-item.active .page-link {
  background: var(--lg-accent);
  border-color: var(--lg-accent);
  color: var(--lg-on-fill);
}
.pagination .page-item.disabled .page-link {
  color: var(--lg-line-strong);
  background: transparent;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 0.78125rem;
}
.breadcrumb-item a { color: var(--lg-ink-soft); }
.breadcrumb-item.active { color: var(--lg-ink); }
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--lg-ink-faint);
  content: "/";
}

.nav-tabs {
  border-bottom: 1px solid var(--lg-line-strong);
  gap: 2px;
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--lg-ink-soft);
  font-size: 0.84375rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
  color: var(--lg-ink);
  border-bottom-color: var(--lg-line-strong);
}
.nav-tabs .nav-link.active {
  color: var(--lg-accent-ink);
  background: transparent;
  border-bottom: 2px solid var(--lg-accent);
  font-weight: 600;
}

.nav-pills .nav-link {
  border-radius: var(--lg-radius-ctl);
  color: var(--lg-ink-soft);
  font-size: 0.84375rem;
}
.nav-pills .nav-link.active {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}

/* --------------------------------------------------------------------------
   15 MISC WIDGETS
   -------------------------------------------------------------------------- */
/* custom checkbox/radio accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--lg-accent);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
}
.custom-control-label::before {
  border: 1px solid var(--lg-line-strong);
  background: var(--lg-surface-raised);
}

/* switches */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--lg-accent);
  border-color: var(--lg-accent);
}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-ctl);
  min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--lg-accent);
}
.select2-dropdown {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--lg-accent-tint);
  border: 1px solid transparent;
  border-radius: var(--lg-radius-chip);
  color: var(--lg-accent-ink);
  font-size: 0.75rem;
}

/* tom-select */
.ts-control {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-ctl);
  font-family: var(--lg-font);
  min-height: 38px;
}
.ts-control.focus {
  border-color: var(--lg-accent);
  box-shadow: var(--lg-focus-ring);
}
.ts-dropdown {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
}
.ts-dropdown .active {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}
/* The vendor sheet repaints the control white the moment it takes input
   (`.ts-wrapper.single.input-active .ts-control`, 0-3-0) and colours the search
   input + dropdown #343a40 — so typing turned the field white in light mode and
   invisible in dark. Restate each at matching specificity. */
.ts-wrapper.single.input-active .ts-control,
.full .ts-control,
.ts-dropdown.form-control {
  background: var(--lg-surface-raised);
}
.ts-control,
.ts-control .item,
.ts-control input,
.ts-dropdown,
.ts-dropdown .option,
.ts-wrapper .dropdown-header-close {
  color: var(--lg-ink);
}
.ts-control input::placeholder { color: var(--lg-ink-faint); }
.ts-dropdown .optgroup-header {
  background: var(--lg-surface-raised);
  color: var(--lg-ink-soft);
}
/* Selected-item chips in a multi select. */
.ts-wrapper.multi .ts-control > div {
  background: var(--lg-neutral-tint);
  border-color: var(--lg-line);
  color: var(--lg-ink);
}
.ts-wrapper.multi .ts-control > div.active {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}
.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active {
  background: var(--lg-surface);
  border-color: var(--lg-line);
  color: var(--lg-ink-faint);
}
.disabled .ts-control { background-color: var(--lg-paper); }

/* scroll-edge shadows (layout JS adds these) — soften to paper tones */
.scroll-shadow {
  background: linear-gradient(to right, var(--lg-scroll-shadow), transparent);
}
.scroll-shadow-r {
  background: linear-gradient(to left, var(--lg-scroll-shadow), transparent);
}

/* toast/messages */
.atbd-message {
  background: var(--lg-night);
  color: var(--lg-night-text-bright);
  border-radius: var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
  font-family: var(--lg-font);
}

/* activity chart (github-style) recolor to accent ramp */
.activity-chart rect,
.team-activity-chart rect { rx: 2; }

/* --------------------------------------------------------------------------
   16 UTILITIES
   -------------------------------------------------------------------------- */
.text-muted { color: var(--lg-ink-faint) !important; }
.text-primary { color: var(--lg-accent) !important; }
.text-success { color: var(--lg-ok) !important; }
.text-danger { color: var(--lg-danger) !important; }
.text-warning { color: var(--lg-warn) !important; }
.text-info { color: var(--lg-info) !important; }

.bg-primary { background-color: var(--lg-accent) !important; }
.bg-success { background-color: var(--lg-ok) !important; }
.bg-danger { background-color: var(--lg-danger) !important; }
.bg-warning { background-color: var(--lg-warn) !important; }
.bg-info { background-color: var(--lg-info) !important; }
.bg-light { background-color: var(--lg-paper) !important; }

.border { border-color: var(--lg-line) !important; }
.border-top { border-top-color: var(--lg-line) !important; }
.border-bottom { border-bottom-color: var(--lg-line) !important; }

/* ledger figure — for ids, amounts, dates, plates, codes */
.figure-mono {
  font-family: var(--lg-mono);
  font-size: 0.93em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* empty states */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--lg-ink-faint);
}
.empty-state i {
  font-size: 28px; /* icon, not text — stays put under the text-size picker */
  opacity: 0.5;
  display: block;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   17 RESPONSIVE
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* panels go full-bleed on phones: content earns the whole width and the
     "floating card" look disappears entirely */
  .card {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .card .card-header {
    border-radius: 0;
    padding: 8px 16px;
  }
  .card .card-body { padding: 16px; }

  .btn { font-size: 0.8125rem; }
  .table td, .table thead th { padding: 8px 10px; }
}

/* ==========================================================================
   18 APP-SPECIFIC LEGACY CLASS COVERAGE
   Everything below re-skins class systems that live in views/components today
   (btn-xs, atbd-tag, selling-badge, ui-badge, il-gray, table4, action-menu…)
   so the whole app lands on the Ledger language without touching 150 views.
   ========================================================================== */

/* x-ui.button always emits .btn-xs — keep density, adopt the new geometry */
.btn-xs {
  font-size: 0.78125rem;
  font-weight: 500;
  border-radius: var(--lg-radius-ctl);
  padding: 0 10px;
  line-height: 2.3;
  min-height: 30px;
}

/* --- Tag system 1: theme tags (atbd-tag tag-*) → chips ------------------- */
.atbd-tag {
  font-family: var(--lg-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 3px 7px;
  border-radius: var(--lg-radius-chip);
  border: 1px solid transparent;
  background: var(--lg-neutral-tint);
  color: var(--lg-neutral);
}
.atbd-tag.tag-primary,
.atbd-tag.tag-primary.tag-transparented {
  background: var(--lg-accent-tint); color: var(--lg-accent-ink); border-color: transparent;
}
.atbd-tag.tag-secondary,
.atbd-tag.tag-secondary.tag-transparented,
.atbd-tag.tag-light,
.atbd-tag.tag-light.tag-transparented {
  background: var(--lg-neutral-tint); color: var(--lg-neutral); border-color: transparent;
}
.atbd-tag.tag-success,
.atbd-tag.tag-success.tag-transparented {
  background: var(--lg-ok-tint); color: var(--lg-ok); border-color: transparent;
}
.atbd-tag.tag-info,
.atbd-tag.tag-info.tag-transparented {
  background: var(--lg-info-tint); color: var(--lg-info); border-color: transparent;
}
.atbd-tag.tag-warning,
.atbd-tag.tag-warning.tag-transparented {
  background: var(--lg-warn-tint); color: var(--lg-warn); border-color: transparent;
}
.atbd-tag.tag-danger,
.atbd-tag.tag-danger.tag-transparented {
  background: var(--lg-danger-tint); color: var(--lg-danger); border-color: transparent;
}
.atbd-tag.tag-dark,
.atbd-tag.tag-dark.tag-transparented {
  background: var(--lg-ink); color: var(--lg-paper); border-color: transparent;
}

/* --- Tag system 2: x-data.status (selling-badge + order-bg-opacity-*) ---- */
.selling-badge {
  font-family: var(--lg-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: auto;
  line-height: 1.5;
  padding: 3px 7px;
  border-radius: var(--lg-radius-chip);
}
.order-bg-opacity-success   { background: var(--lg-ok-tint) !important; }
.order-bg-opacity-pending   { background: var(--lg-warn-tint) !important; }
.order-bg-opacity-warning   { background: var(--lg-warn-tint) !important; }
.order-bg-opacity-danger    { background: var(--lg-danger-tint) !important; }
.order-bg-opacity-info      { background: var(--lg-info-tint) !important; }
.order-bg-opacity-primary   { background: var(--lg-accent-tint) !important; }
.order-bg-opacity-secondary { background: var(--lg-neutral-tint) !important; }
.color-success   { color: var(--lg-ok) !important; }
.color-pending   { color: var(--lg-warn) !important; }
.color-warning   { color: var(--lg-warn) !important; }
.color-danger    { color: var(--lg-danger) !important; }
.color-info      { color: var(--lg-info) !important; }
.color-primary   { color: var(--lg-accent) !important; }
.color-secondary { color: var(--lg-neutral) !important; }

.badge-dot { width: 7px; height: 7px; border-radius: 50%; }
.badge-dot.dot-success, .dot-success { background: var(--lg-ok); }
.badge-dot.dot-pending, .dot-pending { background: var(--lg-warn); }
.badge-dot.dot-warning, .dot-warning { background: var(--lg-warn); }
.badge-dot.dot-danger,  .dot-danger  { background: var(--lg-danger); }
.badge-dot.dot-info,    .dot-info    { background: var(--lg-info); }
.badge-dot.dot-primary, .dot-primary { background: var(--lg-accent); }

/* --- Tag system 3: x-ui.badge / doc-explorer JS (.ui-badge--*) ----------- */
.ui-badge {
  font-family: var(--lg-mono);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--lg-radius-chip);
  background: var(--lg-neutral-tint);
  color: var(--lg-neutral);
}
.ui-badge--wip       { background: var(--lg-warn-tint);   color: var(--lg-warn); }
.ui-badge--shared    { background: var(--lg-info-tint);   color: var(--lg-info); }
.ui-badge--published { background: var(--lg-ok-tint);     color: var(--lg-ok); }
.ui-badge--archived  { background: var(--lg-neutral-tint); color: var(--lg-neutral); }
.ui-badge--default   { background: var(--lg-neutral-tint); color: var(--lg-neutral); }
.ui-badge--code      { background: var(--lg-accent-tint); color: var(--lg-accent-ink); }
.ui-badge--muted     { background: transparent; color: var(--lg-ink-faint); }

/* --- Forms: x-form.input / x-form.select emitted classes ----------------- */
.il-gray { color: var(--lg-ink-soft); }
.form-group label.il-gray { font-size: 0.78125rem; }
.input-container .input-icon svg,
.input-container .input-icon i {
  color: var(--lg-ink-faint);
}

/* --- x-data.list (.table4) — key/value detail rows ----------------------- */
.table4 { background: transparent; }
.table4.bg-white { background: transparent !important; }
.table4 .table td {
  font-size: 0.84375rem;
  border-top: 1px solid var(--lg-line);
}
.table4 .table tr td:first-child {
  font-family: var(--lg-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lg-ink-faint);
  vertical-align: middle;
}

/* --- x-app.action-menu (kebab) ------------------------------------------- */
.cde-action-menu > .btn,
.cde-action-menu .btn.btn-light {
  background: transparent;
  border: 1px solid transparent;
  color: var(--lg-ink-soft);
  font-size: 15px; /* icon-only trigger (kebab) — see units note in §02 */
  line-height: 1;
}
.cde-action-menu > .btn:hover,
.cde-action-menu .btn.btn-light:hover {
  background: var(--lg-neutral-tint);
  border-color: transparent;
  color: var(--lg-ink);
}

/* --- x-ui.alert internals (flash messages) ------------------------------- */
.alert .alert-icon svg,
.alert .alert-icon i { vertical-align: -2px; }
.alert .alert-content h6.alert-heading {
  font-size: 0.84375rem;
  font-weight: 600;
  color: inherit;
  margin-bottom: 2px;
}
.alert .alert-content p { color: inherit; }

/* --- x-ui.modal (.modal-bg-white) ---------------------------------------- */
.modal-content.modal-bg-white { background: var(--lg-surface-raised); }

/* --- x-ui.card header: subtitle + count chips ----------------------------- */
.card .card-header small,
.card .card-header small.text-muted {
  font-family: var(--lg-font);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--lg-ink-faint);
}

/* --- doc rows (x-data.doc-row .files-area) --------------------------------
       Used by the legacy "Required documents" / documents blocks. The row sits
       ON the panel (transparent + hairline frame) instead of on a raised white
       pill, which punched a pure-white hole in the warm paper surface. Legacy
       markup ships no padding of its own, so it lives here too. */
.files-area {
  padding: 10px 14px;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-ctl);
  background: transparent;
}
.files-area:hover { border-color: var(--lg-line-strong); }
/* file-type icon — mirrors the doc-explorer row icons (see doc-explorer.blade) */
.files-area__img {
  margin-right: 12px;
  line-height: 1;
}
.files-area__img i {
  font-size: 20px; /* file-type icon, not text — see units note in §02 */
  color: var(--lg-ink-faint);
}
.files-area__img i.fa-file-pdf         { color: #c0392b; }
.files-area__img i.fa-file-word        { color: #2b579a; }
.files-area__img i.fa-file-excel       { color: #217346; }
.files-area__img i.fa-file-image       { color: #7e57c2; }
.files-area__img i.is-missing          { color: var(--lg-danger); }
/* legacy theme pages still ship <img class="wh-42"> in this slot */
.files-area__img img { border-radius: var(--lg-radius-chip); }
.files-area__title,
.files-area__title p { color: var(--lg-ink); }
/* size / validity line — legacy .color-light declares no color at all */
.files-area__title span.color-light { color: var(--lg-ink-faint); }

/* --- theme spin/loader dots ---------------------------------------------- */
.atbd-spin-dots .spin-dot { background: var(--lg-accent); }

/* ==========================================================================
   19 SPECIFICITY SHIMS vs style.clean.css
   The legacy theme scopes sidebar colors under body.layout-dark with higher
   specificity than section 03. These mirrors win the cascade. Delete this
   whole section when style.clean.css is retired.
   ========================================================================== */
.layout-dark .sidebar {
  background: var(--lg-night);
}
.layout-dark .sidebar .sidebar__menu-group ul li.menu-title span {
  color: var(--lg-ink-faint);
}
.layout-dark .sidebar .sidebar__menu-group ul li a {
  color: var(--lg-night-text);
  font-weight: 450;
}
.layout-dark .sidebar .sidebar__menu-group ul li a:hover {
  background-color: var(--lg-night-2);
  color: var(--lg-night-text-bright);
}
.layout-dark .sidebar .sidebar__menu-group ul li a.active {
  background-color: var(--lg-night-2);
  color: var(--lg-night-text-bright);
  font-weight: 600;
}
.layout-dark .sidebar .sidebar__menu-group ul li a .nav-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a .toggle-icon {
  color: var(--lg-night-text);
}
.layout-dark .sidebar .sidebar__menu-group ul li a:hover .nav-icon,
.layout-dark .sidebar .sidebar__menu-group ul li a.active .nav-icon {
  color: var(--lg-accent-bright);
}
.layout-dark .sidebar .sidebar__menu-group ul li ul li > a:hover,
.layout-dark .sidebar .sidebar__menu-group ul li ul li > a.active {
  background: var(--lg-night-2);
  color: var(--lg-night-text-bright);
}
.layout-dark .sidebar__header {
  border-bottom: 1px solid var(--lg-night-line);
}
.layout-dark .sidebar__bottom {
  background: var(--lg-night);
  border-top: 1px solid var(--lg-night-line);
}
.layout-dark .sidebar__language {
  border-bottom: 1px solid var(--lg-night-line);
}
/* keep the mobile backdrop dark (legacy grouped it with the white bg) */
.overlay-dark-sidebar {
  background: var(--lg-overlay);
}

/* row tints — replace ad-hoc inline background-color on <tr> */
tr.tr-tint-warn > td { background: var(--lg-warn-tint); }
tr.tr-tint-info > td { background: var(--lg-info-tint); }
tr.tr-tint-ok > td   { background: var(--lg-ok-tint); }

/* --- dashboard assignment widgets (calendar + gantt carry inline styles;
       parent-scoped selectors here out-rank them).
       The font sizes below stay in px: both widgets lay themselves out in
       absolute pixel geometry (calendar "today" is a 24px circle, gantt day
       columns are px-wide with 26px-high headers, both computed in JS), so
       growing the labels with the text-size picker overflows the cells
       instead of helping anyone read them. ------------------------------- */
.assignment-calendar .calendar-cell {
  border: 1px solid var(--lg-line);
  background: var(--lg-surface);
}
.assignment-calendar .calendar-cell.day-name {
  background: var(--lg-paper);
  color: var(--lg-ink-soft);
  font-family: var(--lg-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.assignment-calendar .calendar-cell .day-number {
  color: var(--lg-ink-soft);
  background: var(--lg-surface);
  font-family: var(--lg-mono);
  font-size: 11.5px;
}
.assignment-calendar .calendar-cell.today .day-number {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}
.assignment-calendar .calendar-cell.other-month,
.assignment-calendar .calendar-cell.other-month .day-number {
  background: var(--lg-paper);
  color: var(--lg-ink-faint);
}
.assignment-calendar .calendar-legend { color: var(--lg-ink-soft); }

.gantt-chart .gantt-body { border: 1px solid var(--lg-line); }
.gantt-chart .gantt-label-header,
.gantt-chart .gantt-label-row,
.gantt-chart .gantt-header-month,
.gantt-chart .gantt-header-day {
  background: var(--lg-paper);
  color: var(--lg-ink-soft);
  border-color: var(--lg-line);
}
.gantt-chart .gantt-header-day,
.gantt-chart .gantt-header-month {
  font-family: var(--lg-mono);
  font-size: 10.5px;
}
.gantt-chart .gantt-header-day.weekend {
  background: var(--lg-neutral-tint);
  color: var(--lg-ink-faint);
}
.gantt-chart .gantt-header-day.today {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}
.gantt-chart .gantt-today-line { background: var(--lg-accent); }
.gantt-chart .gantt-data-row,
.gantt-chart .gantt-day-cell { border-color: var(--lg-line); }
.gantt-chart .gantt-tooltip {
  border: 1px solid var(--lg-line);
  color: var(--lg-ink);
  box-shadow: var(--lg-shadow-pop);
}
.gantt-chart .gantt-empty { color: var(--lg-ink-faint); }

/* --- doc-explorer (odx) — binds its --color-primary hook to the accent and
       re-tints its two hardcoded indigo surfaces ------------------------- */
:root {
  --color-primary: var(--lg-accent);
}
.odx .odx__tnode.is-current {
  background: var(--lg-accent-tint);
  font-weight: 600;
}
.odx .odx__bulkbar {
  background: var(--lg-accent-tint);
  border: 1px solid var(--lg-line-strong);
}
tr.tr-tint-danger > td { background: var(--lg-danger-tint); }

/* --------------------------------------------------------------------------
   20 MAILBOX
   Rules migrated out of inline <style> blocks in admin/mailbox views.
   -------------------------------------------------------------------------- */
.chip-dot--accent { background: var(--lg-accent); }

/* bulk-action bar (JS toggles display; colors live here) */
#mailbox-bulkbar {
  background: var(--lg-paper);
  border-bottom: 1px solid var(--lg-line);
}

/* message list: tighter cells than the global .table default; on mobile hide
   the entity (4th) + date (5th) columns so subject/preview stay readable */
#mailbox-list th, #mailbox-list td { padding: 7px 7px; }
@media (max-width: 767.98px) {
  /* Under table-layout:fixed, display:none on a <col> doesn't release its
     reserved width — zero the col widths and re-spread the rest to 100%.
     !important: the <col> elements carry inline width styles. */
  #mailbox-list th:nth-child(4), #mailbox-list td:nth-child(4),
  #mailbox-list th:nth-child(5), #mailbox-list td:nth-child(5) { display: none; }
  #mailbox-list col:nth-child(1) { width: 42px !important; }
  #mailbox-list col:nth-child(2) { width: 35% !important; }
  #mailbox-list col:nth-child(3) { width: auto !important; }
  #mailbox-list col:nth-child(4),
  #mailbox-list col:nth-child(5) { width: 0 !important; }
}

/* entity search-as-you-type dropdown (attach/reassign pickers) */
.entity-typeahead-results {
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line);
  border-top: none;
  border-radius: 0 0 var(--lg-radius-ctl) var(--lg-radius-ctl);
  box-shadow: var(--lg-shadow-pop);
}
.entity-typeahead-row {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--lg-line);
}
.entity-typeahead-row:last-child { border-bottom: none; }
.entity-typeahead-row:hover {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}

/* sanitized email HTML — constrain wide tables/images/URLs to the panel
   (used by mailbox show, scheduled_show; previously two inline copies) */
.email-body-html {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.email-body-html img { max-width: 100%; height: auto; }
.email-body-html table { max-width: 100%; }

/* inbound-message visual marker (reply modal's read-only original, comm-center) */
.card--inbound { border-left: 3px solid var(--lg-info); }

/* timeline event bubbles (scheduled send history) → status tokens */
.timeline-single__buble.buble-success { background: var(--lg-ok); }
.timeline-single__buble.buble-danger  { background: var(--lg-danger); }
.timeline-single__buble.buble-warning { background: var(--lg-warn); }
.timeline-single__buble.buble-primary { background: var(--lg-accent); }

/* list-group (folder rails, generic lists) — first used by the mailbox */
.list-group-item {
  background: transparent;
  border-color: var(--lg-line);
  color: var(--lg-ink);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}
.list-group-item.active {
  background: var(--lg-accent);
  border-color: var(--lg-accent);
  color: var(--lg-on-fill);
}
.list-group-item.active .text-muted { color: var(--lg-on-fill-soft) !important; }

/* dashboard "More" tab grid (came from main): grid items default to
   min-width:auto and refuse to shrink below their content's min-content
   width — the 900px+ assignment gantt blows the whole card out of a phone
   viewport, where .dash-tab-shell{overflow-x:hidden} clips it with no way
   to scroll. min-width:0 lets the grid track win, which re-engages the
   widget's own inner scroller (.gantt-scroll{overflow-x:auto}). */
.dash-more-grid > * { min-width: 0; }

/* ─── Fullscreen bare layout (layouts/fullscreen.blade.php) ────────────────
   Chrome-free shell for pages that are a full-bleed embedded viewer/editor
   opened in their own tab (CDE Euro-Office). The shell is a flex column:
   a slim fixed-height bar plus a stage that takes every remaining pixel, so
   the iframe never needs a calc()-guessed height that drifts when the bar
   wraps or the browser UI resizes. */
.fullscreen-bare {
  margin: 0;
  overflow: hidden;              /* the stage scrolls, never the page */
  background: var(--lg-paper);
}
.fs-shell {
  display: flex;
  flex-direction: column;
  /* dvh tracks mobile browser chrome collapsing; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
}
.fs-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  background: var(--lg-surface);
  border-bottom: 1px solid var(--lg-line);
}
/* Title collapses first; the actions on the right stay fully readable. */
.fs-bar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-bar__spacer { margin-left: auto; }
.fs-stage {
  flex: 1 1 auto;
  min-height: 0;                 /* without this the iframe overflows the flex parent */
  position: relative;
  background: var(--lg-surface-raised);
}
.fs-stage > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── CDE annotation thread popover (MEGAFUCKERY slice 3) ──────────────────────
   The discussion surface for overlay markup, shared by the PDF and DWG viewers.
   Replaces window.prompt(): a comment is now a thread with an author, replies and
   a resolved state. Positioned absolutely inside the viewer's own scroll/mount box
   (the JS sets left/top), so it travels with the mark it belongs to. */
.cde-thread {
  position: absolute;
  z-index: 20;
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-pop);
  padding: .6rem .7rem;
  font-size: .8125rem;
  color: var(--lg-ink);
  max-height: 60%;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cde-thread__title { font-weight: 600; }
.cde-thread__head {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.cde-thread__author { font-weight: 600; }
.cde-thread__time { color: var(--lg-ink-faint); font-size: .75rem; }
.cde-thread__badge {
  margin-left: auto;
  background: var(--lg-ok-tint);
  color: var(--lg-ok);
  border-radius: var(--lg-radius-chip);
  padding: 0 .4rem;
  font-size: .7rem;
  font-weight: 600;
}
/* Comment bodies are user text — preserve their line breaks, and never let a long
   unbroken string (a pasted URL) blow out the panel width. */
.cde-thread__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Replies scroll independently so a long thread can't push the composer
   off-screen — the reply box must always stay reachable. */
.cde-thread__replies {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cde-thread__reply {
  border-left: 2px solid var(--lg-line);
  padding-left: .5rem;
}
.cde-thread__input {
  width: 100%;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius-ctl);
  padding: .3rem .4rem;
  font: inherit;
  resize: vertical;
}
.cde-thread__input:focus {
  outline: none;
  box-shadow: var(--lg-focus-ring);
}
.cde-thread__actions {
  display: flex;
  gap: .35rem;
  justify-content: flex-end;
}
/* Derived (Euro-Office mirror) rows: explain why there is nothing to click. */
.cde-thread__note {
  color: var(--lg-ink-faint);
  font-style: italic;
}

/* ── CDE floating viewer toolbar (MEGAFUCKERY slice 4) ────────────────────────
   The redline tools float OVER the viewer instead of occupying a fixed row above
   it, so the drawing/document gets the full height of its box. The buttons are the
   same live nodes the Blade toolbar declared — this only restyles their container,
   so every data-* handler keeps working. */
.cde-fbar {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  background: var(--lg-surface-raised);
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow-pop);
  max-width: calc(100% - 16px);
}
.cde-fbar__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}
/* Collapsed: only the grip remains, so the canvas is entirely unobstructed. */
.cde-fbar--collapsed .cde-fbar__body { display: none; }

.cde-fbar__grip {
  flex: 0 0 auto;
  width: 1.1rem;
  align-self: stretch;
  min-height: 1.75rem;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: grab;
  border-radius: var(--lg-radius-ctl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cde-fbar__grip:hover { background: var(--lg-accent-tint); }
.cde-fbar__grip:active { cursor: grabbing; }
.cde-fbar__grip:focus-visible { outline: none; box-shadow: var(--lg-focus-ring); }
/* The dotted rail that reads as "drag me". */
.cde-fbar__grip-dots {
  width: 3px;
  height: 1rem;
  border-radius: 2px;
  background-image: radial-gradient(currentColor 40%, transparent 42%);
  background-size: 3px 4px;
  background-repeat: repeat-y;
  opacity: .45;
}
/* The separators the static toolbars used are meaningless once the row wraps. */
.cde-fbar .dwg-toolbar-sep,
.cde-fbar .pdfv-toolbar-sep { display: none; }
/* The static rows used margin-left:auto spacers to push zoom controls right;
   in a floating panel that would stretch it to the full viewer width. */
.cde-fbar [style*="margin-left:auto"] { display: none !important; }

/* ── Mobile: bottom drawer ──
   Below the app's own breakpoint the panel spans the bottom edge so the viewer is
   effectively fullscreen and the tools sit under the thumb, not over the drawing.
   Dragging is disabled here — a drawer draggable off a small screen is a trap. */
@media (max-width: 767.98px) {
  /* :not(.cde-in-pane) — a workspace pane is narrow but is not a phone; it keeps
     the compact floating bar (see isMobile() in floating-toolbar.js). */
  html:not(.cde-in-pane) .cde-fbar {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    max-width: 100%;
    border-radius: var(--lg-radius) var(--lg-radius) 0 0;
    border-bottom: 0;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
  }
  html:not(.cde-in-pane) .cde-fbar__body {
    justify-content: center;
    max-height: 40vh;
    overflow-y: auto;
  }
  /* The grip becomes the drawer's pull-tab: a horizontal bar, full width. */
  html:not(.cde-in-pane) .cde-fbar__grip {
    width: 100%;
    min-height: .9rem;
    cursor: pointer;
  }
  html:not(.cde-in-pane) .cde-fbar__grip-dots {
    width: 2.25rem;
    height: 3px;
    background-image: radial-gradient(currentColor 40%, transparent 42%);
    background-size: 4px 3px;
    background-repeat: repeat-x;
    opacity: .5;
  }
}

/* ── CDE viewer stage (MEGAFUCKERY slice 4) ───────────────────────────────────
   The viewer box claims the height left below the app header instead of the old
   `calc(100vh - 200px)` guess. The subtracted amount is the app chrome above the
   stage (header + page padding); dvh so mobile browser chrome collapsing does not
   leave a dead band, with vh as the fallback for browsers without dvh.

   The page itself must not scroll — each viewer scrolls INSIDE its own stage (the
   PDF's page list, the DWG canvas's pan/zoom), which is the whole point of freeing
   the toolbar row. */
.cde-stage {
  /* --cde-stage-offset is measured at runtime (the stage's own distance from the
     top of the viewport plus whatever padding sits below it) and set as an inline
     custom property, so the stage lands EXACTLY on the viewport bottom instead of
     relying on a hardcoded guess at the header height. The literal below is only
     the pre-measurement fallback for the first paint. */
  height: calc(100vh - var(--cde-stage-offset, 190px));
  height: calc(100dvh - var(--cde-stage-offset, 190px));
  min-height: 16rem;
}

/* ── CDE multipane workspace (MEGAFUCKERY slice 5) ────────────────────────────
   A horizontal split of 2–3 viewer panes. Each pane is an iframe (own JS realm —
   the DWG library is a process-wide singleton), so the layout only has to manage
   sizing; everything inside a pane is the ordinary viewer page. */
.cde-ws {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--lg-line-strong);
  border-radius: var(--lg-radius);
  background: var(--lg-surface);
}
.cde-ws__pane {
  display: flex;
  flex-direction: column;
  min-width: 0;              /* without this a wide iframe refuses to shrink */
  overflow: hidden;
}
.cde-ws__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .4rem;
  border-bottom: 1px solid var(--lg-line);
  background: var(--lg-surface-raised);
}
.cde-ws__pick {
  min-width: 0;
  flex: 1 1 auto;
}
.cde-ws__frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.cde-ws__splitter {
  flex: 0 0 auto;
  width: 6px;
  cursor: col-resize;
  background: var(--lg-line);
  transition: background .12s ease;
}
.cde-ws__splitter:hover { background: var(--lg-accent); }
/* While dragging, the iframes would swallow pointermove — this makes the whole
   surface inert so the splitter keeps receiving events across a pane. */
.cde-ws--dragging .cde-ws__frame { pointer-events: none; }
.cde-ws--dragging { cursor: col-resize; user-select: none; }

/* Single-pane fallback under the desktop breakpoint (the JS also stops rendering
   extra panes there — this is the layout half of the same rule). */
.cde-ws--single { flex-direction: column; }
.cde-ws--single .cde-ws__splitter { display: none; }

/* ── Viewer inside a workspace pane (MEGAFUCKERY slice 5) ─────────────────────
   The pane's iframe loads the ORDINARY viewer route with ?pane=1. The workspace
   page already supplies the app chrome, so repeating the sidebar/header/footer in
   every pane would leave each one a sliver. Same template, same code path — the
   chrome is simply hidden and the stage fills the pane. */
.cde-in-pane .sidebar,
.cde-in-pane .layout-sidebar,
.cde-in-pane header,
.cde-in-pane .header-top,
.cde-in-pane footer,
.cde-in-pane .footer,
.cde-in-pane .page-back-link,
.cde-in-pane .breadcrumb,
/* Phone-only chrome that activates because a PANE is narrower than the app's
   768px breakpoint — but a pane is a small window, not a phone. Both are
   position:fixed white bars parked at top:56px/translateY(-80px), so they sat
   OVER the first ~36px of every pane's canvas as an unexplained blank band. */
.cde-in-pane .mobile-author-actions,
.cde-in-pane .mobile-search,
/* Dev/impersonation bars: useful on a real page, pure noise repeated in every
   pane (and they stole ~40px of each pane's height). */
.cde-in-pane .tenant-bar { display: none !important; }

.cde-in-pane .contents,
.cde-in-pane .main-content,
.cde-in-pane .container-fluid,
.cde-in-pane .row { margin: 0 !important; padding: 0 !important; }

/* The stage owns the whole pane: no header above it to subtract. */
.cde-in-pane .cde-stage {
  height: 100vh !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* --------------------------------------------------------------------------
   21 CDE RACI MATRIX — resources/views/cde/access_raci.blade.php
   Sticky in BOTH axes (header row + first column) needs border-collapse:
   separate — the default collapse drops the sticky cell's own background and
   scrolled rows/columns bleed through underneath it. Consequence: zebra/hover
   cannot be inherited by the sticky column from its row, so both are
   re-applied explicitly to .raci-surface. The corner cell is sticky on both
   axes, so it needs the highest z-index of the three sticky layers.
   -------------------------------------------------------------------------- */
.raci-table { border-collapse: separate; border-spacing: 0; }
.raci-table th, .raci-table td { border-bottom: 1px solid var(--lg-line); }
.raci-corner, .raci-surface {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--lg-surface-raised);
  min-width: 14rem;
  text-align: left;
}
.raci-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--lg-surface-raised);
}
.raci-corner { z-index: 4; }
.raci-person { min-width: 9rem; text-align: center; vertical-align: bottom; }
/* Party sits between the name and the role in the header stack, and takes the
   MIDDLE ink so the three lines read as a hierarchy (who / which org / which
   function) instead of two identical muted lines under a name. */
.raci-person-party { font-size: 0.75rem; color: var(--lg-ink-soft); }
.raci-cell { text-align: center; font-family: var(--lg-mono); font-weight: 600; }
.raci-table tbody tr:hover th.raci-surface,
.raci-table tbody tr:hover td { background: var(--lg-accent-tint); }
.raci-none   { color: var(--lg-ink-faint); font-weight: 400; }
.raci-read   { color: var(--lg-info); }
.raci-write  { color: var(--lg-warn); }
.raci-manage { color: var(--lg-ok); }

/* ── Viewer page: reclaim the footer's height (MEGAFUCKERY slice 4 follow-up) ──
   Set by fitStageToViewport() on any page that hosts a .cde-stage. The footer is
   ~100px of "Contact / Install App" that a drawing or a document page wants far
   more than the page does — and if it stayed, it would be pushed below the fold and
   reintroduce exactly the scrolling the floating toolbar exists to remove. */
.cde-viewer-page .footer-wrapper { display: none !important; }

/* The content column's trailing padding is dead space on a viewer page — it sat
   BELOW the stage and cost ~97px (.contents padding-bottom 72px + the page
   column's mb-25). Zeroing it hands that height to the drawing; the stage sizer
   then measures the smaller remainder and grows to fill it. */
.cde-viewer-page .contents { padding-bottom: 0 !important; }
.cde-viewer-page .contents .mb-25 { margin-bottom: 0 !important; }

/* Viewer page: reclaim the chrome that sits immediately around the stage.
   The back bar cost ~60px above it and the open-source attribution line ~21px
   below — together nearly a tenth of the viewport on a laptop, spent on two links.
   Both stay REACHABLE; they just stop taking a row of their own. */
.cde-viewer-page .page-back-bar {
  /* Only the bar's OWN spacing goes (15px bottom margin + 10px bottom padding).
     The link keeps its pill padding from style.clean.css — squashing that made the
     white button look broken for the sake of ~12px. */
  margin: 0 0 .25rem 0;
  padding: 0;
  min-height: 0;
}
/* Out of flow entirely — .main-content is position:relative, so this anchors to
   the content area's bottom-right corner. */
.cde-viewer-page .cde-licence-line {
  position: absolute;
  right: .75rem;
  bottom: .15rem;
  margin: 0 !important;
  z-index: 2;
  opacity: .75;
}

/* Deep-link arrival flash (My notes → this mark). A viewer that only scrolls to
   roughly the right place leaves the user hunting for which mark they clicked. */
@keyframes cde-markup-flash {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: .15; }
}
.cde-markup-flash {
  animation: cde-markup-flash .5s ease-in-out 4;
  transform-box: fill-box;
}

/* --------------------------------------------------------------------------
   22 AI AUTHORING — resources/views/components/ai/* + admin/templates/ai/*

   The chat panel is a copy-fork of the chat agenda's shell, not a reuse of it:
   the other party is a queue worker, there is a pinned proposal between the
   thread and the composer, and the whole thing is a reusable component rather
   than one page. Class names are namespaced ai-* so the two can diverge without
   either dragging the other.

   Everything here is on the Ledger tokens — no literal colours.
   -------------------------------------------------------------------------- */

/* ── Panel shell ───────────────────────────────────────────────────────── */
.ai-panel { display: flex; flex-direction: column; }

.ai-thread {
  height: 420px;
  overflow-y: auto;
  padding: 18px 22px;
  background: var(--lg-surface);
}

.ai-msg { margin-bottom: 16px; max-width: 82%; }
.ai-msg--own { margin-left: auto; text-align: right; }
.ai-msg--pending { opacity: .6; }

.ai-msg__meta {
  font-size: 0.75rem;
  color: var(--lg-ink-faint);
  margin-bottom: 3px;
}

.ai-msg__body {
  display: inline-block;
  background: var(--lg-neutral-tint);
  border-radius: var(--lg-radius);
  padding: 8px 14px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg--own .ai-msg__body {
  background: var(--lg-accent-tint);
  color: var(--lg-accent-ink);
}

/* One collapsed line for everything the model did in a turn; the detail is
   there for whoever wants it and out of the way for whoever does not. */
/* One quiet line saying what the model did, in plain sentences. It replaced a
   <details> block whose expanded view was the tool name, its JSON input and the
   tool's raw return string — all three of which are implementation, not
   something a tenant admin should be reading. There is nothing left to expand,
   so there is no expander: proportional type (not mono), no marker, no border. */
.ai-activity__line {
  margin-top: 6px;
  text-align: left;
  color: var(--lg-ink-faint);
  font-size: 0.75rem;
}

/* ── Run state strip ───────────────────────────────────────────────────── */
.ai-runstate {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 8px 22px;
  border-top: 1px solid var(--lg-line);
  font-size: 0.8125rem;
  color: var(--lg-ink-soft);
}
.ai-runstate__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lg-warn);
  flex: 0 0 auto;
}
.ai-runstate[data-state="running"] .ai-runstate__dot { background: var(--lg-info); }
.ai-runstate[data-state="done"] .ai-runstate__dot    { background: var(--lg-ok); }
.ai-runstate[data-state="failed"] .ai-runstate__dot   { background: var(--lg-danger); }
.ai-runstate[data-state="failed"] .ai-runstate__text  { color: var(--lg-danger); }
.ai-runstate__elapsed { font-family: var(--lg-mono); color: var(--lg-ink-faint); }
.ai-runstate__reload { margin-left: auto; }

/* ── Composer ──────────────────────────────────────────────────────────── */
.ai-composer {
  border-top: 1px solid var(--lg-line);
  padding: 14px 22px;
}
.ai-composer form { display: flex; align-items: flex-end; gap: 10px; }
.ai-composer textarea { flex: 1 1 auto; resize: vertical; }
.ai-composer .btn { flex: 0 0 auto; }

/* ── Session list ──────────────────────────────────────────────────────── */
.ai-session-list__item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--lg-line);
  color: inherit;
}
.ai-session-list__item:hover { background: var(--lg-accent-tint); color: inherit; text-decoration: none; }
.ai-session-list__item--active { background: var(--lg-accent-tint); }
.ai-session-list__title { font-weight: 500; }
/* Flex row rather than plain inline text: the meta carries a "in progress" chip
   beside the date when that conversation has a turn running, and a chip butted
   straight against a date reads as one word. Same shape as .ai-source__meta. */
.ai-session-list__meta { color: var(--lg-ink-faint); font-size: 0.75rem; flex: 0 0 auto;
                         display: flex; align-items: center; gap: .4rem; }

/* ── Sources ───────────────────────────────────────────────────────────── */
.ai-source { padding: 8px 0; border-bottom: 1px solid var(--lg-line); }
.ai-source__name { font-family: var(--lg-mono); font-size: 0.8125rem; word-break: break-all; }
/* Wraps: the card sits in a narrow column and a source now carries an origin
   chip and a remove button beside its kind, mode and token count. */
.ai-source__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 4px; font-size: 0.75rem; }
.ai-source__total { margin-top: 10px; font-size: 0.8125rem; color: var(--lg-ink-soft); }

/* ── Proposal + diff card ──────────────────────────────────────────────
   The gate between a suggestion and a customer's contract. It is pinned
   between the thread and the composer, and it is the widest, quietest thing
   on the page on purpose: nobody should be able to click Apply without having
   scrolled past what they are applying. */
.ai-proposal { margin: 0 22px 14px; border: 1px solid var(--lg-line-strong) !important; }
.ai-proposal__summary { font-weight: 500; margin-bottom: .5rem; }

.ai-diff__stats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.ai-diff__notice {
  background: var(--lg-warn-tint);
  color: var(--lg-warn);
  border-radius: var(--lg-radius-chip);
  padding: 8px 12px;
  margin-bottom: .75rem;
}
.ai-diff__subhead { font-size: 0.8125rem; color: var(--lg-ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.ai-diff__outline { padding: 2px 0; border-bottom: 1px dotted var(--lg-line); }
.ai-diff__outline--l2 { padding-left: 1rem; }
.ai-diff__outline--l3 { padding-left: 2rem; }
.ai-diff__outline--l4 { padding-left: 3rem; }

.ai-diff__row {
  border-left: 3px solid var(--lg-line);
  padding: 8px 0 8px 12px;
  margin-bottom: 8px;
}
.ai-diff__row--added   { border-left-color: var(--lg-ok); }
.ai-diff__row--removed { border-left-color: var(--lg-danger); }
.ai-diff__row--changed { border-left-color: var(--lg-warn); }
.ai-diff__row--moved   { border-left-color: var(--lg-info); }
.ai-diff__row--same    { border-left-color: var(--lg-line); }

.ai-diff__head { display: flex; align-items: center; gap: .4rem; margin-bottom: 4px; }
.ai-diff__type { font-size: 0.75rem; color: var(--lg-ink-soft); }
.ai-diff__id { font-family: var(--lg-mono); font-size: 0.75rem; color: var(--lg-ink-faint); margin-left: auto; }

.ai-diff__line { white-space: pre-wrap; word-break: break-word; }
.ai-diff__line--del { color: var(--lg-danger); text-decoration: line-through; }
.ai-diff__line--ins { color: var(--lg-ok); }
.ai-diff__quiet { color: var(--lg-ink-faint); font-size: 0.8125rem; }

.ai-diff__del { background: var(--lg-danger-tint); color: var(--lg-danger); text-decoration: line-through; }
.ai-diff__ins { background: var(--lg-ok-tint); color: var(--lg-ok); text-decoration: none; }

/* ── Read-only document preview (Overview tab) ─────────────────────────── */
.ai-document__block { position: relative; padding: 4px 0 4px 3.5rem; border-bottom: 1px dotted var(--lg-line); }
.ai-document__id {
  position: absolute; left: 0; top: 4px;
  font-family: var(--lg-mono); font-size: 0.75rem; color: var(--lg-ink-faint);
}
.ai-document__line { white-space: pre-wrap; word-break: break-word; }
.ai-document__block--heading .ai-document__line { font-weight: 600; }
.ai-document__block--table .ai-document__line,
.ai-document__block--list .ai-document__line { font-family: var(--lg-mono); font-size: 0.8125rem; }

/* Header control: the variant selector sits in the detail-header bar, which is
   a flex row — an unconstrained select would eat the whole bar. */
.ai-variant-select { width: auto; max-width: 260px; display: inline-block; }

@media (max-width: 991px) {
  .ai-thread { height: 340px; }
  .ai-proposal { margin-left: 0; margin-right: 0; }
}

/* ==========================================================================
   Usage analytics (Super Admin) — PLAN-usage-analytics.md slice 5
   ========================================================================== */

/* Daily-hit bars. Width is data (set inline as a percentage of the busiest
   day); every colour comes from a token, none from the view. */
.an-bar {
  height: 8px;
  min-width: 40px;
  border-radius: 2px;
  background: var(--lg-line);
  overflow: hidden;
}
.an-bar__fill { display: block; height: 100%; background: var(--lg-accent); }
.an-bar__fill--err { background: var(--lg-danger); }

/* Figures that line up in a column read better monospaced and tabular. */
.an-num {
  font-family: var(--lg-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* An agenda enabled on tenants but exercised by none — the retirement prompt
   this page exists to surface. */
.an-unused { color: var(--lg-warn); }

/* ==========================================================================
   23 PREFERENCE PICKERS — admin/profile.blade.php (text size + theme)

   These two option grids were skinned in style.clean.css with the old
   StrikingDash indigo (#5f63f2 on #fff), which reads as a foreign widget on
   the Ledger palette and — the reason it is moved here — cannot follow the
   dark theme, because a hardcoded #fff panel stays white on a dark page.
   Re-skinned from tokens so both themes are handled by definition.
   ========================================================================== */
.fontscale-option {
  border-color: var(--lg-line);
  background: var(--lg-surface);
  border-radius: var(--lg-radius);
}
.fontscale-option:hover {
  border-color: var(--lg-line-strong);
  background: var(--lg-accent-tint);
}
.fontscale-option.active {
  border-color: var(--lg-accent);
  background: var(--lg-accent-tint);
  box-shadow: 0 0 0 1px var(--lg-accent);
}
.fontscale-option__preview { color: var(--lg-ink); }
.fontscale-option__label   { color: var(--lg-ink-soft); }
.fontscale-option.active .fontscale-option__label,
.fontscale-option.active .fontscale-option__preview,
.fontscale-option__check {
  color: var(--lg-accent);
}
/* The theme picker reuses the class but shows a feather glyph, not "Aa" —
   size it like an icon, since a 1em glyph in a 16px-tall slot looks lost. */
.fontscale-option [data-feather="sun"],
.fontscale-option [data-feather="moon"] {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   24 DARK-THEME LEAK SHIMS vs style.clean.css (tracker #69)

   Surfaces the old sheet paints with a hardcoded white/indigo that the re-skin
   never re-declared — invisible while everything was light, glaring once the
   page goes dark. Each rule below matches or beats the legacy selector's
   specificity (style.next.css loads second, so equal specificity wins).

   These deliberately resolve to --lg-surface rather than --lg-paper: in light
   mode --lg-surface is #fbfaf7, so the light UI keeps the near-white look it
   has today and only the dark theme actually moves. The one exception is the
   header, which the re-skin already wanted on a panel tone.
   ========================================================================== */

/* Topbar. `.layout-dark .header-top` in the legacy sheet is 0-2-0 and was
   overriding section 04's `.header-top` — in BOTH themes, which is why the
   header has always been white instead of the panel tone section 04 asked for. */
.layout-dark .header-top {
  background-color: var(--lg-surface);
  border-bottom: 1px solid var(--lg-line);
}
.layout-dark .mobile-author-actions.show,
.mobile-search,
.mobile-author-actions,
.mobile-search.show,
.mobile-author-actions.show {
  background: var(--lg-surface);
}
.navbar-right .contact-search-input { border-color: var(--lg-line); }

/* Back link — the legacy rule paints a white pill with an indigo hover. */
.page-back-link {
  background: var(--lg-surface);
  border-color: var(--lg-line);
  color: var(--lg-ink-soft);
}
.page-back-link:hover,
.page-back-link:focus {
  background: var(--lg-accent-tint);
  color: var(--lg-accent);
}

/* Dashboard tiles + tab shell. */
.dash-kpi-tile,
.dash-tab-shell {
  background: var(--lg-surface);
}
.dash-tab-bar { border-bottom-color: var(--lg-line); }
.dash-tab { color: var(--lg-ink-soft); }
.dash-tab.active {
  color: var(--lg-accent);
  border-bottom-color: var(--lg-accent);
}
.dash-tab-badge {
  color: var(--lg-ink-soft);
  background: var(--lg-neutral-tint);
}
.dash-tab.active .dash-tab-badge {
  color: var(--lg-on-fill);
  background: var(--lg-accent);
}

/* The tile glow is a pale blue-grey — fine on paper, a halo on a dark page.
   Scoped to dark so the light dashboard is untouched. */
:root[data-theme="dark"] .dash-kpi-tile,
:root[data-theme="dark"] .dash-tab-shell {
  box-shadow: none;
  border: 1px solid var(--lg-line);
}

/* Impersonation / demo / debug ribbons. The markup carries inline background
   and border, which no stylesheet can override — the colours were moved onto
   these modifier classes instead (see layouts/partials/_header.blade.php and
   _debug_switcher.blade.php). */
.tenant-bar--demo  { background: var(--lg-info-tint);   border-bottom: 1px solid var(--lg-info-line);   color: var(--lg-info); }
.tenant-bar--imp   { background: var(--lg-warn-tint);   border-bottom: 1px solid var(--lg-warn-line);   color: var(--lg-warn); }
.tenant-bar--debug { background: var(--lg-accent-tint); border-bottom: 1px solid var(--lg-accent);      color: var(--lg-accent-ink); }
.tenant-bar--demo > span,
.tenant-bar--imp > span,
.tenant-bar--debug > span { color: inherit; }

/* --------------------------------------------------------------------------
   24b Dark-only overrides for components that style themselves inline

   doc-explorer, kanban, ui.collapse and the calendar month grid each ship a
   <style> block full of hardcoded light colours. They are corrected here under
   the dark selector ONLY, so the light UI stays byte-for-byte as it is today.
   The proper fix is to tokenize those blocks at source; until then this keeps
   the dark theme honest. Found by auditing computed styles page by page, not
   by reading the markup — see the tracker note on #69.
   -------------------------------------------------------------------------- */

/* Legacy ink utilities: the old sheet hardcodes #272b41 as "dark text". */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .dash-kpi-count,
:root[data-theme="dark"] .userDatatable-content,
:root[data-theme="dark"] .cal-ev-label {
  color: var(--lg-ink) !important;
}

/* ── doc-explorer (odx) ─────────────────────────────────────────────────── */
:root[data-theme="dark"] .odx__tbtn,
:root[data-theme="dark"] .odx__more-item,
:root[data-theme="dark"] .odx__tree-toggle,
:root[data-theme="dark"] .odx__tnode,
:root[data-theme="dark"] .odx__rowmenu-item,
:root[data-theme="dark"] .odx__bulkbar-count,
:root[data-theme="dark"] .odx__name { color: var(--lg-ink); }
:root[data-theme="dark"] .odx__col,
:root[data-theme="dark"] .odx__cell--modified,
:root[data-theme="dark"] .odx__cell--by,
:root[data-theme="dark"] .odx__cell--size,
:root[data-theme="dark"] .odx__meta,
:root[data-theme="dark"] .odx__rowmenu-btn,
:root[data-theme="dark"] .odx__rowmenu-item > i,
:root[data-theme="dark"] .odx__empty-hint,
:root[data-theme="dark"] .odx__crumbs .sep { color: var(--lg-ink-soft); }
:root[data-theme="dark"] .odx__col--plain:hover { color: var(--lg-ink-soft); }
:root[data-theme="dark"] .odx__col:hover { color: var(--lg-ink); }
/* The two dropdown PANELS. `.odx__more` is only the relative-positioning
   wrapper around the "…" button — painting it here gave the button a panel
   background and a popover shadow; the menu that actually needed it is
   `.odx__more-menu`. */
:root[data-theme="dark"] .odx__more-menu,
:root[data-theme="dark"] .odx__rowmenu-menu {
  background: var(--lg-surface-raised);
  border-color: var(--lg-line);
  box-shadow: var(--lg-shadow-pop);
}
/* The bulk-action bar is a tinted strip, not a popover: the plain
   `.odx .odx__bulkbar` rule above already themes it, but the `--fill` variant
   is repainted white by the component's own sheet at equal specificity. */
:root[data-theme="dark"] .odx--fill .odx__bulkbar {
  background: var(--lg-accent-tint);
  border-color: var(--lg-line-strong);
}
/* Busy veil over the listing — a 60% WHITE scrim flashed on every reload. */
:root[data-theme="dark"] .odx__busy { background: rgba(27, 35, 32, 0.62); }
:root[data-theme="dark"] .odx__tbtn:hover,
:root[data-theme="dark"] .odx__more-item:hover,
:root[data-theme="dark"] .odx__tree-toggle:hover,
:root[data-theme="dark"] .odx__tnode:hover,
:root[data-theme="dark"] .odx__rowmenu-item:hover,
:root[data-theme="dark"] .odx__row:hover,
:root[data-theme="dark"] .odx__rowmenu-btn:hover,
:root[data-theme="dark"] .odx__rowmenu.is-open .odx__rowmenu-btn { background: var(--lg-accent-tint); }
:root[data-theme="dark"] .odx__row--folder.is-synthetic { background: var(--lg-info-tint); }
:root[data-theme="dark"] .odx__row--folder.is-synthetic:hover { background: var(--lg-accent-tint); }
:root[data-theme="dark"] .odx__tnode.is-synthetic { color: var(--lg-info); }
:root[data-theme="dark"] .odx__row--folder.is-focus,
:root[data-theme="dark"] .odx__row--folder.is-focus:hover,
:root[data-theme="dark"] .odx__tnode.is-focus,
:root[data-theme="dark"] .odx__tnode.is-focus:hover,
:root[data-theme="dark"] .odx__row.is-dropping { background: var(--lg-warn-tint); }
:root[data-theme="dark"] .odx__row,
:root[data-theme="dark"] .odx__head,
:root[data-theme="dark"] .odx__tree,
:root[data-theme="dark"] .odx__toolbar { border-color: var(--lg-line); }
:root[data-theme="dark"] .odx__row--folder.is-private {
  background: repeating-linear-gradient(45deg,
    var(--lg-surface), var(--lg-surface) 6px,
    var(--lg-accent-tint) 6px, var(--lg-accent-tint) 12px);
}
:root[data-theme="dark"] .odx__row--folder.is-private:hover { background: var(--lg-accent-tint); }
:root[data-theme="dark"] .odx__dropzone { background: rgba(87, 194, 149, 0.1); }

/* ── kanban ─────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .kanban-column { background: var(--lg-surface); }
:root[data-theme="dark"] .kanban-card {
  background: var(--lg-surface-raised);
  border-color: var(--lg-line);
  color: var(--lg-ink);
}
:root[data-theme="dark"] .kanban-card:hover { border-color: var(--lg-line-strong); }
:root[data-theme="dark"] .kanban-card-meta { color: var(--lg-ink-soft); }
:root[data-theme="dark"] .kanban-card-badge {
  background: var(--lg-accent-tint);
  color: var(--lg-accent);
}

/* ── ui.collapse ────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .ui-collapse {
  background: var(--lg-surface);
  border-color: var(--lg-line);
}
:root[data-theme="dark"] .ui-collapse-header { color: var(--lg-ink-soft); }
:root[data-theme="dark"] .ui-collapse-header:hover { color: var(--lg-ink); }
:root[data-theme="dark"] .ui-collapse-header.active { border-bottom-color: var(--lg-line); }

/* ── calendar month grid ────────────────────────────────────────────────── */
:root[data-theme="dark"] .cal-grid {
  --cal-border: var(--lg-line);
  --cal-muted: var(--lg-ink-faint);
}
:root[data-theme="dark"] .cal-weekdays { background: var(--lg-surface); }
:root[data-theme="dark"] .cal-weekday,
:root[data-theme="dark"] .cal-daynum-badge { color: var(--lg-ink-soft); }
:root[data-theme="dark"] .cal-col-bg.is-outside { background: var(--lg-paper); }
:root[data-theme="dark"] .cal-col-bg.is-weekend { background: rgba(255, 255, 255, 0.02); }
:root[data-theme="dark"] .cal-col-bg.is-today { background: var(--lg-accent-tint); }
:root[data-theme="dark"] .cal-daynum-badge.is-today {
  background: var(--lg-accent);
  color: var(--lg-on-fill);
}

/* --------------------------------------------------------------------------
   24c Second pass — surfaces the page-level audit could not see

   The computed-style sweep only sees what is on screen in its default state,
   so it missed three whole categories: :hover / :active states, tints written
   as inline style attributes, and views that need a tab opened or a record to
   exist before they render. Reported from manual review and fixed here.
   -------------------------------------------------------------------------- */

/* Expandable-row body. The tint used to be an inline `background:#f8f9fa`,
   which no stylesheet could override — it is a class now (see
   components/data/expandable-row.blade.php) and themed in both modes. */
.exp-row__body { background: var(--lg-neutral-tint); }

/* Timeline: the rail, the bubbles sitting on it, and the pale bubble border. */
.timeline-box .timeline-single .timeline-line { background-color: var(--lg-line); }
.timeline-box .timeline-single__buble { background: var(--lg-surface); }
.timeline-box .timeline-single__buble.border-extra-light { border-color: var(--lg-line-strong); }

/* Dashboard sub-tab pill group. */
.dash-sub-toggle { background: var(--lg-neutral-tint); }
.dash-sub-pill { color: var(--lg-ink-soft); }
.dash-sub-pill.active {
  color: var(--lg-accent);
  background: var(--lg-surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* "All clear" tile — a success-tinted panel, so it maps onto the ok status. */
.dash-all-clear {
  background: var(--lg-ok-tint);
  border-color: var(--lg-ok-line);
}
.dash-all-clear-icon { background: var(--lg-ok); color: var(--lg-on-fill); }
.dash-all-clear-title { color: var(--lg-ok); }
.dash-all-clear-sub { color: var(--lg-ink-soft); }

/* Chat list rows — the hover/active tints were hardcoded greys. */
.chat-list__item { border-bottom-color: var(--lg-line); }
.chat-list__item:hover { background: var(--lg-row-hover); }
.chat-list__item--active {
  background: var(--lg-accent-tint);
  border-left-color: var(--lg-accent);
}

/* Table row hover. `.table--default tbody tr:hover` in the legacy sheet paints
   a near-white wash at the same specificity as the re-skin's `.table-hover`
   rule, so on hover a dark row turned light while its text stayed light. */
.table--default tbody tr:hover { background: var(--lg-row-hover); }
.table--default tbody tr:hover td,
.table--default tbody tr:hover th,
.table--default tbody tr:hover a:not(.btn) { color: var(--lg-ink); }


/* --------------------------------------------------------------------------
   24d Sign-in / password-reset pages (tracker #69)

   These render through layouts/app, so the theme IS stamped and the form
   controls follow it — but the page shell around them is pure legacy: a white
   `.signUP-admin` canvas and a pink `.signUP-admin-left` brand panel, plus
   heading/label colours pinned to #272b41. The result was a themed form
   floating on a light page.

   The page-level audit never caught this because it authenticates first and
   only ever sees post-login routes. Dark-scoped on purpose: the pink brand
   panel is deliberate in the light theme and stays exactly as it is.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] .signUP-admin { background-color: var(--lg-paper); }
:root[data-theme="dark"] .signUP-admin-left,
:root[data-theme="dark"] .signIn-admin-left { background-color: var(--lg-night); }
:root[data-theme="dark"] .signUP-admin-left__content h1 { color: var(--lg-night-text-bright); }
:root[data-theme="dark"] .signUP-admin h6,
:root[data-theme="dark"] .signUP-admin label,
:root[data-theme="dark"] .signUP-admin p,
:root[data-theme="dark"] .signUP-admin .edit-profile__title h1 { color: var(--lg-ink); }
:root[data-theme="dark"] .signUP-admin a:not(.btn) { color: var(--lg-accent); }
/* The decorative corner SVGs are light artwork drawn for a pale panel; at full
   strength they glare against the night surface. */
:root[data-theme="dark"] .signUP-overlay { opacity: 0.22; }

/* --------------------------------------------------------------------------
   24e Contract revenues/expenses table — admin/job_detail.blade.php (#69)

   Two light surfaces survived inside the collapse: the legacy `.atbd-collapse`
   header tone (#f8f9fb, shared with a long selector list in style.clean.css)
   and the totals row, which carried `background-color:#f5f5f5` as an inline
   attribute no stylesheet could reach — it is a class now.
   -------------------------------------------------------------------------- */
.atbd-collapse .atbd-collapse-item__header,
.atbd-collapse .card.atbd-collapse-item__header .card-header,
.atbd-collapse .card.atbd-collapse-item__header .card-body,
.atbd-collapse.atbd-collapse-custom .card.atbd-collapse-item .card-header,
.atbd-collapse.atbd-collapse-custom .card.atbd-collapse-item .card-body {
  background: var(--lg-surface);
}
.atbd-collapse.atbd-collapse-borderless .atbd-collapse-item,
.atbd-collapse .atbd-collapse-item {
  border-bottom-color: var(--lg-line);
}
.atbd-collapse .atbd-collapse-item__header h6 { color: var(--lg-ink); }

/* Totals row: a heavier rule above it and a tinted band, both themed. */
.job-money__total {
  border-top: 3px solid var(--lg-line-strong);
  background-color: var(--lg-neutral-tint);
  font-weight: bold;
}