@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
   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)
   ========================================================================== */

/* --------------------------------------------------------------------------
   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-warn: #9a6410;    --lg-warn-tint: #f5ead3;
  --lg-danger: #ab3529;  --lg-danger-tint: #f6e2de;
  --lg-info: #3d5d7e;    --lg-info-tint: #e2eaf2;
  --lg-neutral: #5d6862; --lg-neutral-tint: #e9e7de;

  /* 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-focus-ring: 0 0 0 3px rgba(32, 107, 82, 0.25);
}

/* --------------------------------------------------------------------------
   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: rgba(27, 38, 34, 0.55);
  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: #fff;
}
.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: #fff;
}

/* 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: #fff;
}

.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: #fff;
}

.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: #fff;
}

.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: #fff;
}

/* 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: #fff;
}
.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: #fff;
}
.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: #fff;
}
.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: #fff;
}
.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: #fff;
}

.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: rgba(32, 107, 82, 0.045);
}

/* 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: rgba(32, 107, 82, 0.045);
}

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

.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: 0 24px 64px rgba(28, 35, 33, 0.25);
}

.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: rgba(32, 107, 82, 0.25);
  color: var(--lg-ok);
}
.alert-danger {
  background: var(--lg-danger-tint);
  border-color: rgba(171, 53, 41, 0.25);
  color: var(--lg-danger);
}
.alert-warning {
  background: var(--lg-warn-tint);
  border-color: rgba(154, 100, 16, 0.25);
  color: var(--lg-warn);
}
.alert-info {
  background: var(--lg-info-tint);
  border-color: rgba(61, 93, 126, 0.25);
  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: #fff;
}
.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: #fff;
}

/* --------------------------------------------------------------------------
   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: #fff;
}
.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);
}

/* scroll-edge shadows (layout JS adds these) — soften to paper tones */
.scroll-shadow {
  background: linear-gradient(to right, rgba(28, 35, 33, 0.08), transparent);
}
.scroll-shadow-r {
  background: linear-gradient(to left, rgba(28, 35, 33, 0.08), 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: rgba(27, 38, 34, 0.55);
}

/* 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: #fff;
}
.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: #fff;
}
.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: #fff;
}
.list-group-item.active .text-muted { color: rgba(255, 255, 255, 0.7) !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); }