/* ==== style.css (emerge app, /static) ==== */
/* =========================================================
   emerge AI systems
   Premium SaaS UI — black surfaces, brand green accent.
   Brand colors taken verbatim from the master logo SVG:
     #9ccb47  primary (the only brand color)
     #060505  near-black wordmark
   ========================================================= */

:root {
  /* background — clean cool slate replaces the old pink wash */
  --bg: #f6f7fb;
  /* page background — cool premium grey */
  --surface: #ffffff;
  /* cards / topbar / sidebar */
  --surface-2: #f1f3f9;
  /* inputs / tables / chat */
  --hover: #eef5e0;
  /* subtle green-tinted hover (from brand green) */

  /* text — slightly darker secondary tones for clearer hierarchy. */
  --text: #060505;
  /* brand near-black */
  --text-2: #334155;
  /* secondary text */
  --muted: #6b7280;
  /* meta / labels */

  /* borders — cooler greys to pair with the green palette */
  --border: #e6e8ee;
  --border-strong: #d2d6e0;

  /* brand — single color, exact match to the logo SVG (#9ccb47) */
  --primary: #7eb12c;
  /* darker green for text contrast (AA) */
  --primary-hover: #6c9b22;
  --primary-soft: rgba(156, 203, 71, 0.14);
  --primary-soft-2: rgba(156, 203, 71, 0.06);
  --primary-text: #5a8418;
  --brand-green: #9ccb47;
  /* exact brand green from the logo SVG */
  --brand-green-2: #b7da7c;
  /* lighter tint for gradients */
  --brand-black: #060505;
  /* exact brand near-black from the logo SVG */
  /* semantic — distinct from brand so status colors don't drift */
  --green: #16a34a;
  /* status: success / done */
  --green-soft: rgba(22, 163, 74, 0.10);
  --yellow: #d97706;
  --yellow-soft: rgba(217, 119, 6, 0.10);
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.10);
  --red: #dc2626;
  --red-soft: rgba(126, 177, 44, 0.10);

  /* type scale */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --track-tightest: -0.025em;
  --track-tighter: -0.02em;
  --track-tight: -0.01em;
  --track-wide: 0.04em;
  --track-wider: 0.06em;

  /* shape — radii bumped to a softer, more cohesive set (16-20px on cards). */
  --radius-sm: 12px;
  /* inputs / buttons / chips */
  --radius: 18px;
  /* cards / KPIs / sections */
  --radius-lg: 22px;
  /* dialogs / hero cards */

  /* layout */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 64px;

  /* shadows — softer, layered, consistent across every card-like surface. */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 20px -8px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.05),
    0 14px 32px -10px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, 0.06),
    0 28px 56px -12px rgba(15, 23, 42, 0.14);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.03);

  --glow-red-soft:
    0 0 0 1px rgba(126, 177, 44, 0.22),
    0 0 0 4px rgba(126, 177, 44, 0.06),
    0 8px 24px rgba(126, 177, 44, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(156, 203, 71, 0.05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

body {
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  /* Premium editorial stack: Geist for Latin (Vercel's typeface — sharp,
     modern, supports 300-800), Cairo for Arabic (geometric Saudi-favorite),
     with Inter + IBM Plex Sans Arabic as fallbacks while Geist downloads.
     Geist Mono drives tabular numerals via the .mono utility + the
     `font-variant-numeric: tabular-nums` rule on KPI values. */
  font-family: "Geist", "Cairo", "Inter", "IBM Plex Sans Arabic",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "ss01" 1, "cv11" 1;
  letter-spacing: -0.005em;
}

/* RTL Arabic — Cairo wins, Geist falls through as fallback. */
[dir="rtl"] body,
[dir="rtl"] {
  font-family: "Cairo", "Geist", "IBM Plex Sans Arabic", "Inter",
    system-ui, sans-serif;
}

/* Monospace utility — for tabular numbers, code, refs. Uses Geist Mono. */
.mono,
code,
pre,
kbd,
samp,
[data-mono],
.num-mono,
[class*="-mono"] {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace !important;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ---------- typography primitives ---------- */
h1,
h2,
h3,
h4 {
  font-family: inherit;
  color: var(--text);
}

h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--track-tighter);
  line-height: var(--lh-snug);
  margin: 0;
}

h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: var(--track-tighter);
  line-height: var(--lh-snug);
  margin: 0;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  margin: 0;
}

h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  margin: 0;
}

p {
  margin: 0 0 0.75em;
}

strong,
b {
  font-weight: 600;
  color: var(--text);
}

code {
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.tabular,
.kpi .value,
.pc-budget,
.kanban-card .value,
table.data td.right,
table.data td.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
}

button {
  font-family: inherit;
}

/* =========================================================
   Layout shell
   ========================================================= */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--t-med) var(--ease);
}

.app.sidebar-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ============================================================
   Sidebar rail mode — icon-only by default, hover to expand
   ------------------------------------------------------------
   Applied via `<div class="app sidebar-rail">` on every page.
   The sidebar permanently occupies a 64px column (just enough
   for the brand mark + icon nav). On `:hover` (or any inner
   focus) it expands to the full 256px and overlays the main
   content — the grid track stays at 64px so content doesn't
   shift. Mobile (`max-width:880px`) keeps its existing drawer
   behaviour because this whole block is gated by min-width:881.
   ============================================================ */
@media (min-width: 881px) {
  .app.sidebar-rail {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
  }

  .app.sidebar-rail .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: var(--sidebar-w-collapsed);
    height: 100vh;
    z-index: 25;
    transition: width var(--t-med) var(--ease),
      box-shadow var(--t-med) var(--ease);
  }

  /* When the sidebar is position:fixed it leaves the grid flow.
     Without this rule, .main would auto-place into the FIRST grid
     cell (the 64px sidebar track) and collapse to 64px wide.
     Force .main into column 2 so it always fills the 1fr track. */
  .app.sidebar-rail>.main {
    grid-column: 2 / 3;
    min-width: 0;
  }

  /* On hover or when focus is inside, expand to full width and
     lift with a soft shadow to make the overlay obvious. */
  .app.sidebar-rail .sidebar:hover,
  .app.sidebar-rail .sidebar:focus-within {
    width: var(--sidebar-w);
    box-shadow: 0 16px 48px -8px rgba(15, 23, 42, 0.20),
      0 4px 12px rgba(15, 23, 42, 0.06);
  }

  /* --- COLLAPSED visuals (when the rail is NOT hovered) --- */
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .brand-meta,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-section,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item .label,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-subgroup,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-group-body,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-group-caret,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot .user-meta,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot form,
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot>a+a {
    display: none;
  }

  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item {
    justify-content: center;
    padding: 8px;
  }

  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item-box {
    padding: 12px;
  }

  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item-nested {
    margin-left: 0;
    padding-left: 8px;
    border-left: none;
  }

  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot {
    justify-content: center;
    padding: 8px;
  }

  /* Hide the active-state inset line on collapsed items — the soft
     background pill already signals the active route. */
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item.active {
    box-shadow: none;
  }

  /* Center the brand mark inside the 64px column. */
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-brand {
    justify-content: center;
    padding: 0 8px;
    gap: 0;
  }

  /* The sidebar-foot avatar link occupies the full 64px width on
     its own when the user-meta + secondary actions are hidden. */
  .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot>a:first-child {
    justify-content: center;
    flex: 0 0 auto;
  }
}

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 20;
}

.app.sidebar-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   Sidebar
   ========================================================= */

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 5;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
  text-decoration: none;
}

.sidebar-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface);
  padding: 3px;
  box-shadow: 0 0 0 1px var(--border);
}

.sidebar-brand .brand-meta {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--text);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-brand .brand-meta small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.app.sidebar-collapsed .brand-meta {
  display: none;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  /* Extra space at the bottom so the last nav-item (Settings) clears
     the chat FAB / floating elements when scrolled to the very end.
     Without this, the last entry can feel cropped on short viewports. */
  padding-bottom: 80px;
  flex: 1;
  overflow-y: auto;
  /* Stop wheel events from bubbling to the page when the nav reaches
     its top or bottom (or has nothing to scroll). Without this, hovering
     the sidebar and scrolling moves the main content area instead of
     just the sidebar nav. `contain` is the standard "don't propagate to
     parent" value for this property. */
  overscroll-behavior: contain;
}

.nav-section {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 8px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.nav-section .icon {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.nav-section:first-child {
  padding-top: 0;
}

.app.sidebar-collapsed .nav-section {
  display: none;
}

/* Intelligence group pinned to the bottom of the nav. */
.nav-section-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--primary);
}

.nav-section-foot .icon {
  opacity: 1;
  color: var(--primary);
}

/* Visually nested item under a section. */
.nav-item-nested {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  border-radius: 0 6px 6px 0;
}

.nav-item-nested:hover {
  border-left-color: var(--primary);
}

.nav-item-nested.active {
  border-left-color: var(--primary);
  box-shadow: none;
}

.app.sidebar-collapsed .nav-item-nested {
  margin-left: 0;
  padding-left: 8px;
  border-left: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  color: var(--text-2);
  font-weight: 500;
  font-size: var(--fs-base);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
  position: relative;
}

.nav-item .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease);
}

.nav-item:hover {
  background: var(--hover);
  color: var(--text);
}

.nav-item:hover .icon {
  opacity: 1;
}

.nav-item.active {
  background: var(--primary-soft);
  color: var(--primary-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);
}

.nav-item.active .icon {
  opacity: 1;
}

/* Dashboard — boxed/featured nav item */
.nav-item-box {
  margin: 4px 0 8px;
  padding: 12px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-1);
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.nav-item-box .icon {
  opacity: 1;
  color: var(--primary);
}

.nav-item-box:hover {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--primary-text);
  box-shadow: var(--glow-red-soft);
  transform: translateY(-1px);
}

.nav-item-box.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 10px -2px rgba(126, 177, 44, 0.35);
}

.nav-item-box.active .icon {
  color: #fff;
  opacity: 1;
}

.app.sidebar-collapsed .nav-item-box {
  padding: 12px;
}

.app.sidebar-collapsed .nav-item .label {
  display: none;
}

.app.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 8px;
}

/* ============================================================
   Collapsible sidebar groups (e.g. Reports)

   Markup:
     <div class="nav-group" data-nav-group="reports">
       <button class="nav-item nav-group-toggle">…</button>
       <div class="nav-group-body">
         <a class="nav-item nav-item-nested">…</a>
         …
       </div>
     </div>

   Open state is driven by `.is-open` on `.nav-group`. The body
   collapses via a max-height transition — no JS height math
   needed; pick a max-height large enough to hold the items.
   ============================================================ */

.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-group-toggle {
  /* Inherits everything from `.nav-item`; we just add the chevron
     alignment and reset native <button> chrome. */
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  /* The label flexes, pushing the chevron to the right. */
  justify-content: flex-start;
}

.nav-group-toggle .label {
  flex: 1;
}

/* Chevron — rotates 180° when the group is open. */
.nav-group-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: .55;
  transition: transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
}

.nav-group-caret .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.nav-group.is-open .nav-group-caret {
  transform: rotate(180deg);
  opacity: .9;
}

/* Parent stays "lit" when any child page is active OR the group is
   manually toggled open. We use a softer treatment than `.nav-item.active`
   so the actual active child is still the visual anchor. */
.nav-group.has-active>.nav-group-toggle {
  color: var(--text);
  font-weight: 600;
}

.nav-group.has-active>.nav-group-toggle .icon {
  opacity: 1;
}

.nav-group.has-active>.nav-group-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* The actual collapse animation. max-height jumps from 0 → enough-room
   on `.is-open`. 360px comfortably holds 3 nested items; bump if more
   are added. */
.nav-group-body {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Smooth ease, fast enough to feel responsive but slow enough to
     read the motion. */
  transition: max-height 280ms cubic-bezier(.2, .8, .2, 1),
    opacity 200ms ease,
    padding 280ms cubic-bezier(.2, .8, .2, 1);
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-group.is-open .nav-group-body {
  /* Tall enough for any section. HR has 22 sub-items (~30px each);
     360px clipped it. 1400px holds anything reasonable; on shorter
     viewports the overflow-y: auto kicks in so the submenu scrolls
     instead of bleeding past the viewport. */
  max-height: 1400px;
  overflow-y: auto;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 4px;
}

/* ============================================================
   Second-level nav-subgroup (HR + Accounting)
   ------------------------------------------------------------
   When a top-level group has too many items (HR has 24, Accounting
   has 30) we collapse them under category buttons. Markup:

     <div class="nav-subgroup" data-nav-subgroup="hr-people">
       <button class="nav-subgroup-toggle">People …</button>
       <div class="nav-subgroup-body">
         <a class="nav-item-nested ...">Employees</a>
         …
       </div>
     </div>

   The subgroup is INSIDE a .nav-group-body, so it shares the
   parent's open/close animation. It manages its own open state
   independently — multiple subgroups can be open at once.
   ============================================================ */
.nav-subgroup {
  display: block;
}

/* Toggle button — looks like a nav-item-nested but with a caret. */
.nav-subgroup-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  /* Match nav-item-nested spacing so categories visually align with
     the parent group's items. */
  margin-left: 12px;
  padding: 7px 10px 7px 12px;
  border-left: 2px solid var(--border);
  border-radius: 0 6px 6px 0;
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
}

.nav-subgroup-toggle:hover {
  border-left-color: var(--primary);
  background: rgba(0, 0, 0, .02);
}

.nav-subgroup.has-active>.nav-subgroup-toggle {
  border-left-color: var(--primary);
  color: var(--primary);
}

.nav-subgroup-toggle .label {
  flex: 1;
}

.nav-subgroup-toggle .nav-group-caret {
  display: inline-flex;
  align-items: center;
  transition: transform 200ms ease;
  opacity: .65;
}

.nav-subgroup.is-open>.nav-subgroup-toggle .nav-group-caret {
  transform: rotate(180deg);
  opacity: .9;
}

/* Collapsible body — same trick as nav-group-body but smaller cap. */
.nav-subgroup-body {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: max-height 240ms cubic-bezier(.2, .8, .2, 1),
    opacity 180ms ease;
}

.nav-subgroup.is-open>.nav-subgroup-body {
  max-height: 600px;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 4px;
}

/* Leaves inside a subgroup get one more level of indent so the
   hierarchy is visually obvious. */
.nav-subgroup-body .nav-item-nested {
  margin-left: 24px;
  font-size: 12.5px;
}

/* RTL mirror for the borders + indents. */
[dir="rtl"] .nav-subgroup-toggle {
  margin-left: 0;
  margin-right: 12px;
  padding: 7px 12px 7px 10px;
  border-left: none;
  border-right: 2px solid var(--border);
  border-radius: 6px 0 0 6px;
}

[dir="rtl"] .nav-subgroup-toggle:hover {
  border-right-color: var(--primary);
}

[dir="rtl"] .nav-subgroup.has-active>.nav-subgroup-toggle {
  border-right-color: var(--primary);
}

[dir="rtl"] .nav-subgroup-body .nav-item-nested {
  margin-left: 0;
  margin-right: 24px;
}

/* Collapsed sidebar — hide everything below the top-level group. */
.app.sidebar-collapsed .nav-subgroup {
  display: none;
}

/* When the sidebar is in its narrow collapsed state, hide the
   submenu entirely and just show the parent icon (clicking it
   still toggles, but with no labels visible the menu is moot). */
.app.sidebar-collapsed .nav-group-body {
  display: none;
}

.app.sidebar-collapsed .nav-group-caret {
  display: none;
}

/* ============================================================
   Reports page styles — KPI grid, chart placeholder, activity list
   ============================================================ */

.rep-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 18px;
  flex-wrap: wrap;
}

.rep-page-head h2 {
  margin: 0 0 4px;
}

.rep-page-head .sub {
  color: var(--text-2);
  font-size: 13px;
}

.rep-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rep-btn-pdf,
.rep-btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.rep-btn-pdf:hover,
.rep-btn-excel:hover {
  background: var(--surface-2);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.rep-btn-pdf .icon {
  color: #b91c1c;
}

.rep-btn-excel .icon {
  color: #15803d;
}

/* KPI grid — 4-up on wide, 2-up on tablet, 1-up on phone. */
.rep-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

@media (max-width: 1100px) {
  .rep-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .rep-kpis {
    grid-template-columns: 1fr;
  }
}

.rep-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.rep-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
}

.rep-kpi-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-2);
}

.rep-kpi-icon .icon {
  width: 20px;
  height: 20px;
}

.rep-kpi-icon.kpi-leads {
  color: #d97706;
  background: #fef3c7;
}

.rep-kpi-icon.kpi-docs {
  color: #1e40af;
  background: #dbeafe;
}

.rep-kpi-icon.kpi-contracts {
  color: #6d28d9;
  background: #ede9fe;
}

.rep-kpi-icon.kpi-msgs {
  color: #15803d;
  background: #dcfce7;
}

.rep-kpi-icon.kpi-revenue {
  color: #047857;
  background: #d1fae5;
}

.rep-kpi-icon.kpi-hours {
  color: #be185d;
  background: #fce7f3;
}

/* "Current week / month" inline badge in page headers */
.rep-badge-now {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--primary-soft);
  color: var(--primary-text);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Missing-day / missing-week rows render faintly so gaps are visible
   without screaming. */
.rep-row-missing td {
  color: var(--text-2);
  opacity: .55;
}

/* Totals row at the bottom of weekly/monthly tables — slightly
   stronger separator so the eye lands on it as a summary. */
.rep-totals-row td {
  background: var(--surface-2);
  border-top: 2px solid var(--border);
}

/* ============================================================
   Document version indicators — used in every list view that
   shows files (documents, plans, client files, project files,
   contract files). Driven by the `doc_version_badge` and
   `fresh_pill` macros in _components.html.
   ============================================================ */
.doc-vbadge {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.doc-vbadge-multi {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.doc-vbadge-sep {
  opacity: .55;
  margin: 0 1px;
}

.doc-new-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1px 7px;
  border-radius: 4px;
  background: #16a34a;
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}

/* Daily-entry form layout — wider grid so all 7 inputs fit nicely. */
.rep-daily-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.rep-daily-form .full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .rep-daily-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .rep-daily-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Weekly analytics — WoW deltas, severity colouring, alert panel.

   Severity vocabulary:
     growth   → green   (current > previous, no rules hit)
     stable   → neutral (no meaningful change)
     warning  → amber   (mild drop 10–15% on alertable metrics)
     critical → red     (drop > rule threshold OR 2-week decline)

   KPI cards get a thin left accent in the matching colour so a
   scan of the row immediately shows where attention is needed.
   ============================================================ */

/* Per-KPI severity accent (a 3px left border, plus a subtle bg) */
.rep-kpi.rep-kpi-growth {
  border-left: 3px solid #16a34a;
}

.rep-kpi.rep-kpi-stable {
  border-left: 3px solid #cbd5e1;
}

.rep-kpi.rep-kpi-warning {
  border-left: 3px solid #d97706;
  background: linear-gradient(to right,
      #fffbeb 0%,
      var(--surface) 30%);
}

.rep-kpi.rep-kpi-critical {
  border-left: 3px solid #dc2626;
  background: linear-gradient(to right,
      #fef2f2 0%,
      var(--surface) 30%);
}

/* Secondary KPI row — tighter spacing so it visually subordinates */
.rep-kpis-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: -6px;
  margin-bottom: 18px;
}

@media (max-width: 1100px) {
  .rep-kpis-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .rep-kpis-secondary {
    grid-template-columns: 1fr;
  }
}

/* WoW delta chip — `↑ 12.5%` / `↓ 18.3%` / `→ 0.0%` */
.rep-wow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: .01em;
}

.rep-wow-up {
  color: #15803d;
  background: #dcfce7;
}

.rep-wow-down {
  color: #b91c1c;
  background: #fee2e2;
}

.rep-wow-flat {
  color: #475569;
  background: #e2e8f0;
}

/* Overall state banner above the alerts panel — colour follows the
   severity of the worst alert (or "growth" if at least one metric is
   up and there are no alerts). */
.rep-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin: 0 0 14px;
  background: var(--surface);
  font-size: 13px;
  color: var(--text);
}

.rep-banner-icon {
  font-size: 22px;
  line-height: 1;
}

.rep-banner-body strong {
  display: inline;
}

.rep-banner-growth {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.rep-banner-growth .rep-banner-icon {
  color: #15803d;
}

.rep-banner-stable {
  background: var(--surface-2);
  border-color: var(--border);
}

.rep-banner-stable .rep-banner-icon {
  color: var(--text-2);
}

.rep-banner-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.rep-banner-warning .rep-banner-icon {
  color: #b45309;
}

.rep-banner-critical {
  background: #fef2f2;
  border-color: #fecaca;
}

.rep-banner-critical .rep-banner-icon {
  color: #b91c1c;
}

/* Alerts panel — list of individual alerts under the banner */
.rep-alerts-card {
  margin-bottom: 18px;
  border: 1px solid #fecaca;
}

.rep-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rep-alert {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.rep-alert:first-child {
  border-top: 0;
}

.rep-alert-sev {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
  align-self: start;
}

.rep-alert-warning .rep-alert-sev {
  background: #fef3c7;
  color: #92400e;
}

.rep-alert-critical .rep-alert-sev {
  background: #fee2e2;
  color: #991b1b;
}

.rep-alert-text {
  min-width: 0;
}

.rep-alert-head {
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.rep-alert-body {
  margin-top: 2px;
}

/* Daily-report prompt — rendered from the editable daily_reports
   template. Sits above the entry form as a hint. */
.rep-prompt {
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.rep-prompt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 8px;
}

.rep-prompt-body {
  font-family: inherit;
  white-space: pre-wrap;
  margin: 0;
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

.rep-kpi-body {
  min-width: 0;
}

.rep-kpi-label {
  color: var(--text-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rep-kpi-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
  color: var(--text);
}

.rep-kpi-foot {
  margin-top: 2px;
}

/* Chart placeholder — soft background, currentColor SVG so it
   inherits text color and adapts cleanly to any theme. */
.rep-chart-placeholder {
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
}

.rep-chart-placeholder svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Recent activity list — borrows the row pattern from the dashboard
   activity feed: kind badge / title / timestamp. */
.rep-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rep-activity-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}

.rep-activity-row:first-child {
  border-top: 0;
}

.rep-activity-row:hover {
  background: var(--hover);
}

.rep-activity-kind {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.rep-activity-kind .icon {
  width: 14px;
  height: 14px;
}

.rep-activity-kind.kind-lead {
  color: #d97706;
  background: #fef3c7;
}

.rep-activity-kind.kind-document {
  color: #1e40af;
  background: #dbeafe;
}

.rep-activity-kind.kind-contract {
  color: #6d28d9;
  background: #ede9fe;
}

.rep-activity-title {
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rep-activity-when {
  white-space: nowrap;
}

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app.sidebar-collapsed .sidebar-foot .user-meta {
  display: none;
}

.app.sidebar-collapsed .sidebar-foot {
  justify-content: center;
  padding: 8px;
}

.user-meta {
  flex: 1;
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  overflow: hidden;
}

.user-meta .name {
  font-weight: 600;
  color: var(--text);
}

.user-meta .role {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* =========================================================
   Main area & topbar
   ========================================================= */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 var(--border);
}

.topbar h1 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--text);
}

.topbar .crumb {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.topbar-search {
  margin-left: auto;
  position: relative;
  width: 320px;
  max-width: 40%;
}

.topbar-search input {
  width: 100%;
  height: 40px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px 0 36px;
  font-size: var(--fs-base);
  font-weight: 400;
  transition: border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.topbar-search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.15);
}

.topbar-search .icon {
  position: absolute;
  top: 11px;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--text-2);
  transition: background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  position: relative;
}

.icon-btn:hover {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border);
}

.icon-btn .icon {
  width: 16px;
  height: 16px;
}

.icon-btn.has-dot::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface),
    0 0 8px rgba(126, 177, 44, 0.45);
}

/* topbar avatar + user cluster */
.topbar-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--primary-soft);
  color: var(--primary);
  transition: border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  margin-left: 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.topbar-user:hover {
  background: var(--hover);
  border-color: var(--border);
}

.topbar-user .user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  min-width: 0;
}

.topbar-user .user-info .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--track-tight);
}

.topbar-user .user-info .role {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 700px) {
  .topbar-user .user-info {
    display: none;
  }
}

/* main content scroll area */
.content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  animation: fade-in var(--t-med) var(--ease);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.page-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: var(--track-tighter);
  line-height: var(--lh-snug);
  color: var(--p-text-dark);
}

.page-head .sub {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 6px;
  font-weight: 400;
}

/* When a .create-toggle (or a button cluster) is moved INTO a .page-head
   (by app.js), it sits at the inline-end (visual left in RTL). The
   page-head's `justify-content: space-between` handles the alignment.
   When the details opens, the wrapped form takes the full width on a
   second flex row so the inputs aren't squashed next to the title. */
.page-head>.create-toggle,
.page-head>.page-head-cta {
  flex-shrink: 0;
  margin: 0;
  order: 2;
}

.page-head>div:not(.create-toggle):not(.page-head-cta):first-child {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

.page-head>.create-toggle[open] {
  flex-basis: 100%;
  margin-top: 6px;
}

/* =========================================================
   Cards
   ========================================================= */

/* Card — Pulse grammar.
   White surface, subtle outer border (15,23,42,.16), 14px radius,
   no shadow. Inherited by every page that uses class="card" — the
   single biggest visual change across the system. */
.card {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  transition: border-color var(--t-fast) var(--ease);
}

.card-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--p-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.card-header h3 .icon {
  width: 16px;
  height: 16px;
  color: var(--p-green);
}

.card-header .sub {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.card-body {
  padding: 20px 22px;
}

/* =========================================================
   KPI cards
   ========================================================= */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.kpi {
  background:
    radial-gradient(ellipse 120% 55% at 50% -25%, rgba(126, 177, 44, 0.05), transparent 65%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--shadow-1);
  position: relative;
  transition: box-shadow var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.kpi:hover {
  border-color: rgba(126, 177, 44, 0.35);
  box-shadow: var(--glow-red-soft);
  transform: translateY(-2px);
}

.kpi-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.kpi .label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.kpi .value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: var(--track-tighter);
  color: var(--text);
  line-height: var(--lh-tight);
  margin-top: 4px;
}

.kpi .delta {
  font-size: 12px;
  font-weight: 600;
}

.kpi .delta.up {
  color: var(--text);
}

.kpi .delta.down {
  color: var(--red);
}

.kpi .sub {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 4px;
}

.kpi .sub.sub-alert {
  color: var(--primary-text);
  font-weight: 600;
}

/* Clickable KPI cards — strip default link styling, let the .kpi:hover do the work. */
.kpi-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.kpi-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(126, 177, 44, 0.20),
    0 4px 12px -4px rgba(126, 177, 44, 0.30);
}

.kpi-icon .icon {
  width: 16px;
  height: 16px;
}

/* =========================================================
   Buttons
   ========================================================= */

/* Base button — Pulse grammar.
   White surface, sharp 8px radius, hover lifts 1px and tightens the
   border. Inherited by every page that uses class="btn". */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 38px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--p-divider);
  background: #fff;
  color: var(--text);
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.btn:hover {
  background: #fafbf6;
  border-color: rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 10px -2px rgba(126, 177, 44, 0.35);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 18px -4px rgba(126, 177, 44, 0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--hover);
  color: var(--text);
}

.btn-danger:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red);
}

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: var(--fs-sm);
}

.btn .icon {
  width: 16px;
  height: 16px;
}

.btn-sm .icon {
  width: 14px;
  height: 14px;
}

/* =========================================================
   Tags / badges
   ========================================================= */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
  text-transform: capitalize;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.tag-active,
.tag-won,
.tag-out {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
  border-color: transparent;
}

.tag-paused,
.tag-negotiation {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: transparent;
}

.tag-done,
.tag-lost {
  background: rgba(0, 0, 0, 0.03);
  color: var(--muted);
  border-color: transparent;
}

.tag-lead,
.tag-in {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-2);
  border-color: transparent;
}

.tag-proposal {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: transparent;
}

.tag-prio-low {
  background: var(--surface-2);
  color: var(--muted);
  border-color: transparent;
}

.tag-prio-medium {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-2);
  border-color: transparent;
}

.tag-prio-high {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  border-color: transparent;
}

.tag-prio-urgent {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: transparent;
}

/* Invoice status — distinct colors so 'overdue' jumps out at a glance. */
.tag-invoice-paid {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border-color: transparent;
}

.tag-invoice-pending {
  background: rgba(202, 138, 4, 0.12);
  color: #a16207;
  border-color: transparent;
}

.tag-invoice-overdue {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: transparent;
  font-weight: 600;
}

/* RFI status — open is the attention-getter, answered/closed read calmer. */
.tag-rfi-open {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: transparent;
  font-weight: 600;
}

.tag-rfi-answered {
  background: rgba(202, 138, 4, 0.12);
  color: #a16207;
  border-color: transparent;
}

.tag-rfi-closed {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  border-color: transparent;
}

/* =========================================================
   Project detail — header, KPI strip, tab nav
   ========================================================= */

.project-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.project-header-main {
  flex: 1;
  min-width: 0;
}

.project-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: var(--track-tighter);
  line-height: var(--lh-snug);
}

.project-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.project-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.project-meta .icon {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.project-meta .tag {
  padding: 3px 10px;
}

.project-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.project-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-1);
}

.project-kpi .label {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.project-kpi .value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--track-tighter);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.project-kpi .value.value-alert {
  color: var(--primary);
}

.project-kpi .sub {
  color: var(--muted);
  font-size: var(--fs-xs);
}

@media (max-width: 880px) {
  .project-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tab nav — pill-strip with red underline on the active tab. */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 4px 0 4px;
}

.tab-link {
  padding: 10px 16px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--fs-base);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  border-radius: 6px 6px 0 0;
}

.tab-link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.tab-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
  background: transparent;
}

/* Tab panels — used inside .proj-layout, now ALL render simultaneously so
   the sidebar can act as a scroll-spy. The old show/hide behaviour was a
   pre-sidebar choice and is intentionally overridden here. The `.active`
   class still exists on link side, but on the panel side it's a no-op. */
.tab-panel {
  display: block;
}

.tab-panel.active {
  animation: fade-in var(--t-med) var(--ease);
}

.tab-panel+.tab-panel {
  margin-top: 28px;
}

.tab-panel>*+* {
  margin-top: 16px;
}

/* Scroll margin so a clicked anchor doesn't get tucked under the
   sticky topbar / sidebar header. Tuned to clear the topbar (~64px)
   plus a little breathing room. */
.tab-panel,
.proj-section {
  scroll-margin-top: 80px;
}

/* The pre-sidebar tab strip is no longer rendered (the template uses
   .proj-docnav instead). Kept as a fallback so any other template
   still using <nav class="tab-nav"> keeps working. */
.tab-nav {
  display: none;
}

.tab-select {
  display: none;
}

/* ====================================================================
   "Late" badge — shows on project cards / dashboard rows / detail
   header when project_workflow.project_lateness() reports the project
   has missed its deadline. Subtle but unmistakable: red pill with a
   warning glyph + days overdue. Designed to drop into any context
   alongside the existing .tag styles without colliding.
   ==================================================================== */
.late-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
  letter-spacing: .02em;
  white-space: nowrap;
}

.late-badge-large {
  font-size: 13px;
  padding: 5px 11px;
}

/* Stack badges in the corner of project cards (status pill + late) */
.pc-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Late state of the header progress bar — overrides the default fill colour
   so a missed deadline reads at a glance even without looking at the badge. */
.phase-bar-fill.late {
  background: linear-gradient(90deg, #dc2626, #f87171);
}

.project-kpi.value-alert {
  color: #991b1b;
}

/* ====================================================================
   Project detail page — single scrollable column. The section
   navigation lives in the GLOBAL sidebar (.nav-item-nested entries
   under "Projects" in base.html), so we don't need an in-page
   sidebar duplicating it. We just want smooth scrolling globally
   and a touch of breathing room between sections.
   ==================================================================== */
html {
  scroll-behavior: smooth;
}

.proj-content {
  min-width: 0;
}

.proj-content>*+* {
  margin-top: 18px;
}

/* =========================================================
   Skeleton loaders — utility for placeholder shapes.
   Use .skeleton on any block (e.g., a container around a lazy <img>)
   to render a shimmering bar until real content paints over it.
   ========================================================= */

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--surface-2) 0%,
      var(--hover) 50%,
      var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton-line {
  height: 12px;
  margin: 6px 0;
}

.skeleton-block {
  height: 64px;
}

.skeleton-photo {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
}

/* Lazy site-visit photos: shimmer until the image loads. */
.visit-photo {
  background: var(--surface-2);
}

.visit-photo:not(.loaded)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--hover) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.visit-photo img {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Rich empty states — icon + headline + supporting text + CTA.
   Wraps the existing .empty-state for a friendlier first-time UX.
   ========================================================= */

.empty-state-rich {
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.empty-state-rich .empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 4px;
}

.empty-state-rich .empty-icon .icon {
  width: 24px;
  height: 24px;
}

.empty-state-rich h4 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}

.empty-state-rich p {
  margin: 0;
  max-width: 380px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.empty-state-rich .btn {
  margin-top: 6px;
}

/* ---------------------------------------------------------------
   Skeleton loaders (Phase 20 D2)
   Drop-in placeholders for async lists / tables. Pair with the
   `skeleton(rows)` macro from _components.html.
   --------------------------------------------------------------- */
.skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.skel-line,
.skel-card {
  background: linear-gradient(90deg,
      var(--surface-2, #f1f5f9) 0%,
      rgba(255, 255, 255, .6) 50%,
      var(--surface-2, #f1f5f9) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-line {
  height: 14px;
  width: 100%;
}

.skel-line:nth-child(2n) {
  width: 88%;
}

.skel-line:nth-child(3n+1) {
  width: 74%;
}

.skel-card {
  height: 80px;
  border-radius: 10px;
}

@keyframes skel-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Respect prefers-reduced-motion — show a static placeholder */
@media (prefers-reduced-motion: reduce) {

  .skel-line,
  .skel-card {
    animation: none;
    opacity: .7;
  }
}

/* Project Overview — phase timeline rows. */
.phase-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phase-timeline-row {
  display: grid;
  grid-template-columns: 180px 1fr 56px 120px;
  gap: 14px;
  align-items: center;
}

.phase-timeline-name strong {
  display: block;
}

.phase-timeline-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.phase-timeline-due {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .phase-timeline-row {
    grid-template-columns: 1fr 56px;
    gap: 6px;
  }

  .phase-timeline-row .phase-bar {
    grid-column: 1 / -1;
  }

  .phase-timeline-due {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Project Overview — financial summary 3-cell row. */
.finance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.finance-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
}

.finance-cell strong {
  font-size: 14px;
  padding: 4px 10px;
}

@media (max-width: 540px) {
  .finance-grid {
    grid-template-columns: 1fr;
  }
}

/* Project activity feed — icon swatches for the new event kinds. */
.activity .ic.invoice_issued {
  background: var(--surface-2);
  color: var(--text-2);
}

.activity .ic.invoice_paid {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}

.activity .ic.rfi_submitted {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.activity .ic.rfi_answered {
  background: rgba(202, 138, 4, 0.12);
  color: #a16207;
}

.activity .ic.site_visit {
  background: var(--surface-2);
  color: var(--text);
}

.activity .ic.drawing {
  background: var(--surface-2);
  color: var(--text-2);
}

/* =========================================================
   Filter bars (used in Drawings + Time tabs)
   ========================================================= */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0 4px;
}

.filter-bar input,
.filter-bar select {
  height: 34px;
}

.filter-bar input[type="search"],
.filter-bar input[type="date"] {
  width: auto;
  min-width: 160px;
}

.filter-bar select {
  width: auto;
  min-width: 140px;
  padding-right: 26px;
}

.filter-bar .filter-count {
  margin-left: auto;
}

/* =========================================================
   RFI groups — Open / Closed collapsible sections
   ========================================================= */

.rfi-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.rfi-group+.rfi-group {
  margin-top: 0;
}

.rfi-group>summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  user-select: none;
}

.rfi-group>summary::-webkit-details-marker {
  display: none;
}

.rfi-group>summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--t-fast) var(--ease);
}

.rfi-group[open]>summary::before {
  transform: rotate(90deg);
}

.rfi-group:hover>summary {
  background: var(--surface-2);
  border-radius: var(--radius);
}

.rfi-group .rfi-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rfi-group .rfi-group-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
}

/* =========================================================
   Invoice stacked-bar breakdown
   ========================================================= */

.invoice-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0;
}

.invoice-breakdown-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.invoice-breakdown-bar .seg {
  height: 100%;
  transition: width var(--t-med) var(--ease);
}

.invoice-breakdown-bar .seg-paid {
  background: #16a34a;
}

.invoice-breakdown-bar .seg-pending {
  background: #ca8a04;
}

.invoice-breakdown-bar .seg-overdue {
  background: var(--primary);
}

.invoice-breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  font-size: var(--fs-sm);
}

.invoice-breakdown-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.invoice-breakdown-legend .legend-total {
  margin-left: auto;
}

.invoice-breakdown-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.invoice-breakdown-legend .dot-paid {
  background: #16a34a;
}

.invoice-breakdown-legend .dot-pending {
  background: #ca8a04;
}

.invoice-breakdown-legend .dot-overdue {
  background: var(--primary);
}

/* =========================================================
   Time logged — engineer summary cells + footer totals
   ========================================================= */

.time-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.time-summary-cell {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.time-summary-cell strong {
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

#timeTable tfoot td {
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}

/* Drawing register — older revisions read greyed out so the latest pops. */
.drawing-register tbody tr.drawing-superseded td {
  opacity: 0.55;
}

.drawing-register tbody tr.drawing-superseded:hover td {
  opacity: 1;
}

/* Site visit reports — photo grid + delete overlay. */
.site-visit-card {
  margin: 0;
}

.visit-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.visit-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.visit-photo a {
  display: block;
  width: 100%;
  height: 100%;
}

.visit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}

.visit-photo:hover img {
  transform: scale(1.04);
}

.visit-photo-del {
  position: absolute;
  top: 6px;
  right: 6px;
  margin: 0;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}

.visit-photo:hover .visit-photo-del {
  opacity: 1;
}

.visit-photo-del .btn {
  background: rgba(255, 255, 255, 0.92);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Forms
   ========================================================= */

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 400;
  height: 42px;
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  width: 100%;
  letter-spacing: 0;
}

textarea {
  padding: 10px 14px;
  height: auto;
  min-height: 88px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.15);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.form-grid label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-2);
  margin-bottom: 8px;
  font-weight: 600;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-error {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-weight: 500;
  margin-bottom: 10px;
}

/* =========================================================
   Tables
   ========================================================= */

.table-wrap {
  overflow-x: auto;
}

/* Data tables — Pulse grammar.
   Light dividers, uppercase header in muted, hover row turns pastel
   green-tinted (matches the .pulse-row hover). */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.data th,
table.data td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--p-divider);
  vertical-align: middle;
}

table.data thead th {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 0;
  border-bottom: 1px solid var(--p-border);
  padding-top: 12px;
  padding-bottom: 12px;
}

table.data tbody td.right {
  font-weight: 600;
  color: var(--text);
}

table.data tbody tr {
  transition: background var(--t-fast) var(--ease);
}

table.data tbody tr:hover {
  background: var(--p-hover);
}

table.data tbody tr:last-child td {
  border-bottom: none;
}

table.data .actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}

.avatar-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* =========================================================
   Project cards
   ========================================================= */

/* =========================================================
   Project cards — premium grid (Pulse-grammar)
   ---------------------------------------------------------
   Calm hierarchy: status dot → name → client/pm/dates →
   thin progress bar with stage label → budget + Open CTA.
   Hover lifts subtly and reveals a kebab/delete affordance
   so the resting card is uncluttered.
   ========================================================= */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.project-card {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 14px;
  padding: 22px 24px 18px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.project-card:hover {
  border-color: rgba(126, 177, 44, 0.40);
  box-shadow: 0 12px 32px -16px rgba(126, 177, 44, 0.30),
    0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}

/* Brand accent line on top — only visible on hover. */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p-green-bright), var(--p-green));
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 1;
}

.project-card:hover::before {
  opacity: 1;
}

/* --- Head: status dot + label + (late badge on right) --- */
.project-card .pc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
}

.project-card .pc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.project-card .pc-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-green);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.18);
}

.project-card .pc-status.is-active::before {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20);
}

.project-card .pc-status.is-on_hold::before {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}

.project-card .pc-status.is-archived::before {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.20);
}

.project-card .pc-status.is-completed::before {
  background: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.20);
}

.project-card .pc-late {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* --- Name: hero text, max 2 lines --- */
.project-card .pc-name {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--p-text-dark);
  line-height: 1.3;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card .pc-name a {
  color: inherit;
  text-decoration: none;
}

.project-card .pc-name a:hover {
  color: var(--p-sub);
}

/* --- Meta: client · type · pm chip · dates --- */
.project-card .pc-meta {
  font-size: 12.5px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  line-height: 1.4;
}

.project-card .pc-meta .pc-sep {
  color: var(--muted);
}

.project-card .pc-meta .pc-pm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  background: rgba(126, 177, 44, 0.10);
  color: var(--p-sub);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.project-card .pc-meta .pc-pm .icon {
  width: 11px;
  height: 11px;
}

.project-card .pc-dates {
  font-size: 11.5px;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* --- Stage progress: thin bar + label below --- */
.project-card .pc-stage-block {
  margin-top: 6px;
}

.project-card .pc-stage-track {
  height: 5px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.project-card .pc-stage-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--p-green-bright), var(--p-green));
  border-radius: inherit;
  transition: width 400ms ease;
  min-width: 6px;
}

.project-card .pc-stage-fill.is-warn {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.project-card .pc-stage-fill.is-overdue {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

.project-card .pc-stage-label {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-2);
  font-weight: 500;
}

.project-card .pc-stage-label .pc-stage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.project-card .pc-stage-label .pc-stage-name .icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.project-card .pc-stage-label .pc-stage-days {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.project-card .pc-stage-label .pc-stage-days.is-warn {
  color: #92400e;
}

.project-card .pc-stage-label .pc-stage-days.is-overdue {
  color: #b91c1c;
}

/* --- Notes (optional, muted) --- */
.project-card .pc-notes {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Footer: budget + Open CTA --- */
.project-card .pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--p-divider-soft);
}

.project-card .pc-budget {
  font-size: 17px;
  font-weight: 700;
  color: var(--p-text-dark);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.project-card .pc-budget .pc-budget-cur {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: inherit;
}

.project-card .pc-budget.pc-budget-empty {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  font-family: inherit;
  letter-spacing: normal;
}

.project-card .pc-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--p-text-dark);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--p-divider);
  background: #fff;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.project-card .pc-open:hover {
  background: var(--p-text-dark);
  color: #fff;
  border-color: var(--p-text-dark);
}

.project-card .pc-open .icon {
  width: 12px;
  height: 12px;
}

[dir="rtl"] .project-card .pc-open .icon {
  transform: scaleX(-1);
}

/* --- Hover-reveal kebab actions (status change + delete) --- */
.project-card .pc-actions {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 2;
}

.project-card:hover .pc-actions,
.project-card:focus-within .pc-actions {
  opacity: 1;
  transform: translateY(0);
}

.project-card .pc-actions .pc-act-btn {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--p-divider);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
  backdrop-filter: blur(4px);
}

.project-card .pc-actions .pc-act-btn:hover {
  border-color: rgba(15, 23, 42, 0.25);
  color: var(--text);
}

.project-card .pc-actions .pc-act-btn.danger:hover {
  color: #b91c1c;
  border-color: rgba(126, 177, 44, 0.30);
  background: #fef2f2;
}

.project-card .pc-actions .pc-act-btn .icon {
  width: 13px;
  height: 13px;
}

.project-card .pc-actions form {
  margin: 0;
}

.project-card .pc-actions select.pc-status-select {
  height: 28px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--p-divider);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-transform: capitalize;
  backdrop-filter: blur(4px);
}

.project-card .pc-actions select.pc-status-select:hover {
  border-color: rgba(15, 23, 42, 0.25);
}

/* =========================================================
   Pipeline kanban
   ========================================================= */

.kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(240px, 1fr));
  gap: 12px;
  overflow-x: auto;
}

.kanban-col {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

.kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-2);
}

.kanban-head .count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.kanban-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  font-size: var(--fs-base);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  cursor: default;
}

.kanban-card:hover {
  border-color: rgba(126, 177, 44, 0.25);
  box-shadow: var(--glow-red-soft);
  transform: translateY(-1px);
}

.kanban-card .name {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  letter-spacing: var(--track-tight);
}

.kanban-card .meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.kanban-card .value {
  font-weight: 700;
  color: var(--primary-text);
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}

.col-lead {
  border-top: 3px solid var(--border-strong);
}

.col-proposal {
  border-top: 3px solid var(--primary);
}

.col-negotiation {
  border-top: 3px solid var(--text-2);
}

.col-won {
  border-top: 3px solid var(--text);
}

.col-lost {
  border-top: 3px solid var(--border);
}

/* =========================================================
   Phase progress overview
   ========================================================= */

.phase-progress-table tbody td {
  vertical-align: middle;
}

.phase-progress-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.phase-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.phase-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b91c1c 0%, var(--primary) 60%, #f87171 100%);
  border-radius: 999px;
  transition: width var(--t-med) var(--ease);
}

.phase-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Phase row — assignee inline popover + Approve & bill button.
   The popover uses native <details> so no JS is needed. */
.ph-assign-pop {
  position: relative;
  display: inline-block;
  margin-top: 4px;
}

.ph-assign-pop>summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  display: inline-block;
  color: var(--text-2);
  border: 1px solid transparent;
}

.ph-assign-pop>summary::-webkit-details-marker {
  display: none;
}

.ph-assign-pop:hover>summary {
  background: var(--hover);
  color: var(--text);
  border-color: var(--border);
}

.ph-assign-pop[open]>summary {
  background: var(--surface);
  border-color: var(--primary);
  color: var(--text);
}

.ph-assign-form {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 30;
}

.ph-assign-form select {
  min-width: 140px;
}

/* Approve-and-bill button — green to differentiate from neutral actions */
.ph-approve-btn {
  background: #16a34a;
  color: #fff;
  border: 1px solid #15803d;
  font-weight: 600;
}

.ph-approve-btn:hover {
  background: #15803d;
}

.ph-approve-btn .icon {
  width: 13px;
  height: 13px;
}

.phase-controls .phase-sep {
  opacity: 0.5;
}

.phase-pct-input {
  width: 64px;
  height: 28px;
  padding: 0 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.phase-invoice-input {
  width: 110px;
  height: 28px;
  padding: 0 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.phase-controls .btn-sm {
  height: 28px;
}

/* Phase row expander — chevron rotates when the subrow is open. */
.phase-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.phase-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
}

.phase-toggle .icon {
  width: 13px;
  height: 13px;
  transition: transform var(--t-fast) var(--ease);
}

.phase-toggle.open {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-color: transparent;
}

.phase-toggle.open .icon {
  transform: rotate(90deg);
}

/* Hidden by default; .open reveals the cell. */
.phase-tasks-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}

.phase-tasks-row .phase-tasks-wrap {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  background: var(--surface-2);
  transition: max-height var(--t-med) var(--ease), padding var(--t-med) var(--ease);
}

.phase-tasks-row.open .phase-tasks-wrap {
  max-height: 1500px;
  /* generous cap; anything taller scrolls inside the table cell */
  padding: 14px 18px;
}

/* =========================================================
   Floating AI chat — brand-green FAB + popup, bottom-right.
   The HTML uses .chat-popup with .chat-popup-head / .chat-stream /
   .suggestion-row / .chat-foot. Same WhatsApp-style layout, re-skinned
   in the emerge AI brand palette so the in-app assistant is clearly
   distinct from the real WhatsApp bot on the business number.

   Palette (emerge AI systems, 2026):
     --wa-green    : #9ccb47  (accent / send button — exact brand green)
     --wa-teal     : #7eb12c  (header gradient mid — darker green)
     --wa-teal-d   : #5a8418  (header gradient deep — deepest green)
     --wa-paper    : #F8FAF3  (chat backdrop — warm off-white, green-tinted)
     --wa-bubble-in: #FFFFFF  (incoming bubble)
     --wa-bubble-out: #EEF5E0 (outgoing bubble — soft green wash)
     --wa-meta     : #6B7280  (timestamps / muted — neutral grey)

   Variable names kept as `--wa-*` to avoid breaking the existing
   selectors; the *values* shifted from red back to brand green.
   ========================================================= */

:root {
  --wa-green: #9ccb47;
  --wa-teal: #7eb12c;
  --wa-teal-d: #5a8418;
  --wa-paper: #F8FAF3;
  --wa-bubble-in: #FFFFFF;
  --wa-bubble-out: #EEF5E0;
  --wa-meta: #6B7280;
}

.chat-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #9ccb47 0%, #7eb12c 100%);
  color: #060505;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 28px -6px rgba(126, 177, 44, 0.55),
    0 2px 4px rgba(6, 5, 5, 0.10);
  /* Above Leaflet (controls 1000, panes up to 700) so the chat FAB stays
     clickable when a map is open on the page. */
  z-index: 1100;
  transition: transform var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow:
    0 14px 34px -6px rgba(126, 177, 44, 0.65),
    0 2px 6px rgba(6, 5, 5, 0.12);
}

.chat-fab:active {
  transform: scale(0.95);
}

.chat-fab .icon {
  width: 26px;
  height: 26px;
}

.chat-fab.hidden {
  display: none;
}

/* ----- Popup shell ----- */
.chat-popup {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 100px);
  background: var(--wa-paper);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow:
    0 28px 60px -12px rgba(0, 0, 0, 0.30),
    0 6px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Above Leaflet (controls at 1000, panes up to 700) so the open chat
     panel renders over an active map instead of being clipped by it. */
  z-index: 1101;
  animation: chat-popup-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chat-popup-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-popup[hidden] {
  display: none;
}

/* ----- Header (WhatsApp teal gradient + avatar + presence) ----- */
.chat-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--wa-teal) 0%, var(--wa-teal-d) 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
}

.chat-popup-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 0;
}

/* Real avatar circle wrapping the inline brain SVG. The old layout drew
   the circle with ::before and pinned "online" with ::after at fixed
   coordinates — which collided with the logo in RTL. */
.chat-ai-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 60%),
    var(--wa-green);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.chat-ai-name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.chat-ai-status {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

.chat-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ----- History panel (previous conversations) ----- */
.chat-hist-panel[hidden] {
  display: none;      /* the hidden attribute must beat display:flex below */
}

.chat-hist-panel {
  position: absolute;
  top: 56px;            /* just under the header */
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 16px 16px;
}

.chat-hist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}

.chat-hist-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.chat-hist-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  font: inherit;
}

.chat-hist-item:hover {
  background: #f0fdf4;
  border-color: #86efac;
}

.chat-hist-item .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-hist-item .d {
  font-size: 11px;
  color: #94a3b8;
}

.chat-hist-empty {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  padding: 36px 16px;
}

.chat-popup-head .icon-btn {
  color: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  background: transparent;
}

.chat-popup-head .icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
}

/* ----- Stream / chat backdrop ----- */
.chat-popup .chat-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 18px;
  background-color: var(--wa-paper);
  /* Subtle SVG paper texture used by WhatsApp Web — inline so no extra
     network request and it survives CSP. */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%23d8d0c4' fill-opacity='0.35'><circle cx='40' cy='30' r='1.3'/><circle cx='90' cy='80' r='1'/><circle cx='160' cy='40' r='1.1'/><circle cx='200' cy='110' r='1'/><circle cx='30' cy='160' r='1.2'/><circle cx='110' cy='180' r='1'/><circle cx='170' cy='200' r='1.1'/><circle cx='70' cy='110' r='0.9'/><circle cx='140' cy='140' r='1'/></g></svg>");
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.chat-popup .chat-stream::-webkit-scrollbar {
  width: 6px;
}

.chat-popup .chat-stream::-webkit-scrollbar-track {
  background: transparent;
}

.chat-popup .chat-stream::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 3px;
}

/* ----- Bubbles (override base bubble for the popup only) ----- */
.chat-popup .bubble {
  max-width: 80%;
  padding: 7px 10px 6px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.42;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
  border: none;
  animation: wa-bubble-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
  word-wrap: break-word;
  margin-top: 4px;
}

@keyframes wa-bubble-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-popup .bubble .body {
  white-space: pre-wrap;
  word-break: break-word;
  color: #111b21;
}

.chat-popup .bubble .meta {
  display: block;
  font-size: 10.5px;
  color: var(--wa-meta);
  text-align: end;
  margin-top: 2px;
  letter-spacing: 0;
}

/* Incoming (bot) — white, tail on top-left */
.chat-popup .bubble-in {
  align-self: flex-start;
  background: var(--wa-bubble-in);
  border-radius: 10px 10px 10px 2px;
  margin-inline-start: 8px;
}

.chat-popup .bubble-in::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 10px 0;
  border-color: transparent var(--wa-bubble-in) transparent transparent;
  filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04));
}

[dir="rtl"] .chat-popup .bubble-in::before {
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--wa-bubble-in);
}

/* Outgoing (user) — light green, tail on top-right */
.chat-popup .bubble-out {
  align-self: flex-end;
  background: var(--wa-bubble-out);
  color: #111b21;
  border-radius: 10px 10px 2px 10px;
  margin-inline-end: 8px;
}

.chat-popup .bubble-out::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 8px;
  border-color: transparent transparent transparent var(--wa-bubble-out);
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.04));
}

[dir="rtl"] .chat-popup .bubble-out::before {
  border-width: 0 8px 10px 0;
  border-color: transparent var(--wa-bubble-out) transparent transparent;
}

.chat-popup .bubble-out .body {
  color: #111b21;
}

.chat-popup .bubble-out .meta {
  color: rgba(0, 0, 0, 0.45);
}

/* Typing indicator (three jumping dots in an incoming bubble) */
.chat-popup .typing {
  align-self: flex-start;
  background: var(--wa-bubble-in);
  border-radius: 12px 12px 12px 2px;
  padding: 10px 14px;
  margin-inline-start: 8px;
  margin-top: 4px;
  display: inline-flex;
  gap: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
  animation: wa-bubble-pop 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-popup .typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8696a0;
  animation: wa-typing 1.2s infinite ease-in-out;
}

.chat-popup .typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.chat-popup .typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes wa-typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ----- Quick-reply chips (WhatsApp Business style) ----- */
.chat-popup .suggestion-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  scrollbar-width: none;
}

.chat-popup .suggestion-row::-webkit-scrollbar {
  display: none;
}

.chat-popup .suggestion-chip {
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--wa-green);
  color: var(--wa-teal);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.chat-popup .suggestion-chip:hover {
  background: var(--wa-green);
  color: #fff;
  transform: translateY(-1px);
}

.chat-popup .suggestion-chip:active {
  transform: translateY(0) scale(0.97);
}

/* ----- Input bar (fixed at bottom) ----- */
.chat-popup .chat-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #F0F2F5;
  margin: 0;
  flex-shrink: 0;
}

.chat-popup .chat-foot input {
  flex: 1;
  height: 40px;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 0 16px;
  font-size: 14px;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.chat-popup .chat-foot input:focus {
  outline: none;
  border-color: var(--wa-green);
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.15);
}

.chat-popup .chat-foot input::placeholder {
  color: #8696a0;
}

.chat-popup .chat-foot .btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
  box-shadow: 0 2px 6px rgba(126, 177, 44, 0.35);
}

.chat-popup .chat-foot .btn:hover {
  background: var(--wa-teal);
  transform: scale(1.05);
}

.chat-popup .chat-foot .btn:active {
  transform: scale(0.94);
}

.chat-popup .chat-foot .btn .icon {
  width: 18px;
  height: 18px;
}

/* Paperclip attach button — sits beside the input, opens file picker. */
.chat-popup .chat-foot .chat-attach-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #54656f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
  flex-shrink: 0;
}

.chat-popup .chat-foot .chat-attach-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--wa-green);
}

/* Chip strip — shows the user which files are queued for the next send. */
.chat-popup .chat-attach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  background: #F0F2F5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.chat-popup .chat-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 14px;
  padding: 3px 6px 3px 10px;
  font-size: 12px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.chat-popup .chat-attach-x {
  border: none;
  background: transparent;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #54656f;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  padding: 0;
}

.chat-popup .chat-attach-x:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #111b21;
}

/* Action result cards rendered between chat bubbles when the bot
   executes an action (create task, mark invoice paid, etc.) */
.action-card {
  align-self: stretch;
  margin: 4px 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, #f7f8fa);
  font-size: var(--fs-sm, 13px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.action-card.action-ok {
  border-color: #b6e3c5;
  background: #e9f8ee;
}

.action-card.action-fail {
  border-color: #f1b7b7;
  background: #fbecec;
}

.action-card .action-head {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2f6f47;
}

.action-card.action-fail .action-head {
  color: #9b2929;
}

.action-card .action-body {
  color: var(--text);
}

.action-card .action-link {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary, #1f6feb);
}

.action-card .action-link:hover {
  text-decoration: underline;
}

/* =========================================================
   Notifications bell + popup
   ========================================================= */

.notif-wrap {
  position: relative;
}

.notif-btn {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}

.notif-popup {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(380px, 90vw);
  max-height: 480px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  z-index: 30;
  animation: notif-pop-in 160ms var(--ease);
}

@keyframes notif-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notif-popup-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}

.notif-mark-all {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.notif-mark-all:hover {
  color: var(--primary-hover);
}

.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.notif-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}

.notif-item:hover {
  background: var(--surface-2);
}

.notif-item.notif-unread {
  background: rgba(126, 177, 44, 0.04);
}

.notif-item.notif-unread:hover {
  background: rgba(126, 177, 44, 0.08);
}

.notif-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--surface-2);
  border-radius: 10px;
}

.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.notif-text {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-time {
  margin-top: 4px;
  font-size: 11px;
}

/* =========================================================
   Live Conversations widget on the dashboard.
   Streams classified WhatsApp inbound from /api/intake/live.
   ========================================================= */

.live-conv-card .card-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.live-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: live-pulse 2s ease-in-out infinite;
  margin-inline-start: 4px;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

.live-conv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
}

.live-conv-empty {
  padding: 22px 28px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.live-conv-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
  position: relative;
  /* anchor for the trash button */
}

.live-conv-row:hover {
  background: var(--surface-2);
}

.live-conv-del {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s ease, background .12s ease, color .12s ease, border-color .12s ease;
  z-index: 2;
}

.live-conv-row:hover .live-conv-del,
.live-conv-row:focus-within .live-conv-del {
  opacity: 1;
}

.live-conv-del:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.live-conv-row.live-conv-new {
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.10), transparent 70%);
  animation: live-row-flash 1.5s ease-out;
}

@keyframes live-row-flash {
  0% {
    background-color: rgba(22, 163, 74, 0.18);
  }

  100% {
    background-color: transparent;
  }
}

.live-conv-link {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 18px;
  text-decoration: none;
  color: inherit;
}

/* Reserve room for the hover-revealed delete button without shifting layout */
.live-conv-row:hover .live-conv-link,
.live-conv-row:focus-within .live-conv-link {
  padding-inline-end: 56px;
}

.live-conv-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-2);
}

.live-conv-body {
  min-width: 0;
}

.live-conv-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 2px;
}

.live-conv-summary {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.live-conv-time {
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================================================
   Smart Project View — 2-column grid of self-contained boxes,
   each with its own inline notes thread + count badge.
   ========================================================= */

.smart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.smart-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.smart-box-wide {
  grid-column: 1 / -1;
}

.smart-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.smart-box-head>div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.smart-box-head .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.smart-box-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.smart-box-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}

.smart-box-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}

.smart-box-body {
  padding: 16px 18px;
  flex: 1;
}

.smart-box-headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  word-break: break-word;
}

.smart-box-headline a {
  color: var(--text);
}

.smart-box-headline a:hover {
  color: var(--primary);
}

.smart-box-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.smart-box-sub .icon {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
}

/* Count badge in card head */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 11px;
  font-weight: 700;
  margin-inline-start: 4px;
}

/* Mini phase list inside the Progress box */
.phase-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.phase-mini-list li {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.phase-mini-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phase-mini-bar {
  display: block;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.phase-mini-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width var(--t-med) var(--ease);
}

.phase-mini-pct {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2);
}

/* Timeline box rows */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.timeline-row>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.muted.xs {
  font-size: 11px;
  color: var(--muted);
}

.overdue-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.overdue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--red-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--red);
}

/* Budget stacked bar */
.budget-bar {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 6px;
}

.budget-bar-collected {
  display: block;
  height: 100%;
  background: #16a34a;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

[dir="rtl"] .budget-bar-collected {
  left: auto;
  right: 0;
}

.budget-bar-cost {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(45deg,
      rgba(126, 177, 44, 0.65) 0 6px, rgba(126, 177, 44, 0.45) 6px 12px);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

[dir="rtl"] .budget-bar-cost {
  left: auto;
  right: 0;
}

.budget-bar-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.budget-bar-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-inline-end: 4px;
}

.budget-bar-legend .dot-collected {
  background: #16a34a;
}

.budget-bar-legend .dot-cost {
  background: #dc2626;
}

.budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.budget-grid>div {
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.budget-grid strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Per-box note thread (inline at bottom of each smart-box body) */
.box-notes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.box-notes-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.box-notes-divider .icon {
  width: 12px;
  height: 12px;
}

.box-notes-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.box-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 12.5px;
}

.box-note-body {
  flex: 1;
  min-width: 0;
}

.box-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 2px;
  font-size: 11px;
}

.box-note-text {
  white-space: pre-wrap;
  line-height: 1.5;
  color: var(--text);
}

.avatar.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
  flex-shrink: 0;
}

.box-notes-more {
  display: inline-block;
  font-size: 11px;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 6px;
}

.box-note-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.box-note-form input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: var(--surface);
}

.box-note-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.box-note-form .btn {
  height: 32px;
  padding: 0 10px;
}

.icon-btn-xs {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-btn-xs:hover {
  color: var(--red);
  background: var(--red-soft);
}

.icon-btn-xs .icon {
  width: 12px;
  height: 12px;
}

.tag.tag-sm {
  font-size: 10px;
  padding: 1px 6px;
}

/* All-notes feed at the bottom */
.all-notes-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  text-transform: capitalize;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.filter-chip:hover {
  border-color: var(--text-2);
}

.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.filter-chip .muted {
  color: inherit;
  opacity: 0.7;
  margin-inline-start: 4px;
}

.filter-chip.active .muted {
  color: rgba(255, 255, 255, 0.7);
}

.all-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.all-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.all-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.all-note-body {
  white-space: pre-wrap;
  margin-top: 4px;
  line-height: 1.5;
}

/* section badges (chip on each note row) */
.tag-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
}

.tag-section-progress {
  background: rgba(126, 177, 44, 0.10);
  color: #b91c1c;
}

.tag-section-budget {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}

.tag-section-timeline {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
}

.tag-section-owner {
  background: rgba(168, 85, 247, 0.10);
  color: #6b21a8;
}

.tag-section-risks {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.tag-section-general {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Insight as a hero strip (replaces the old big card) */
.insight-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  position: relative;
}

.insight-strip-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-strip-icon .icon {
  width: 20px;
  height: 20px;
}

.insight-strip-text {
  min-width: 0;
}

.insight-strip-headline {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.insight-strip-details {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

.insight-strip-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  user-select: none;
}

.insight-strip-details summary::-webkit-details-marker {
  display: none;
}

.insight-strip-details summary::before {
  content: "▸ ";
  display: inline-block;
  margin-inline-end: 4px;
  transition: transform var(--t-fast) var(--ease);
}

.insight-strip-details[open] summary::before {
  transform: rotate(90deg);
}

.insight-strip-body {
  margin-top: 10px;
}

.insight-strip.insight-alert {
  border-left: 4px solid #dc2626;
}

.insight-strip.insight-warn {
  border-left: 4px solid #f59e0b;
}

.insight-strip.insight-ok {
  border-left: 4px solid #16a34a;
}

.insight-strip.insight-info {
  border-left: 4px solid #1f4f8a;
}

[dir="rtl"] .insight-strip {
  border-left: none;
}

[dir="rtl"] .insight-strip.insight-alert {
  border-right: 4px solid #dc2626;
}

[dir="rtl"] .insight-strip.insight-warn {
  border-right: 4px solid #f59e0b;
}

[dir="rtl"] .insight-strip.insight-ok {
  border-right: 4px solid #16a34a;
}

[dir="rtl"] .insight-strip.insight-info {
  border-right: 4px solid #1f4f8a;
}

@media (max-width: 880px) {
  .smart-grid {
    grid-template-columns: 1fr;
  }

  .budget-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insight-strip {
    grid-template-columns: auto 1fr;
  }

  .insight-strip .insight-severity {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 540px) {
  .smart-box-head {
    padding: 12px 14px;
  }

  .smart-box-body {
    padding: 12px 14px;
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }

  .budget-grid {
    grid-template-columns: 1fr 1fr;
  }

  .phase-mini-list li {
    grid-template-columns: 1fr 60px 32px;
    gap: 6px;
  }
}

/* =========================================================
   Project Insight card — severity-tinted band on the project page
   that interprets the project's state instead of just listing data.
   ========================================================= */

.insight-card {
  border-left: 4px solid var(--border-strong);
  position: relative;
  overflow: hidden;
}

[dir="rtl"] .insight-card {
  border-left: none;
  border-right: 4px solid var(--border-strong);
}

.insight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 80% at 0% 0%,
      rgba(126, 177, 44, 0.04), transparent 70%);
}

.insight-alert {
  border-left-color: #dc2626;
}

.insight-alert::before {
  background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(126, 177, 44, 0.10), transparent 70%);
}

.insight-warn {
  border-left-color: #f59e0b;
}

.insight-warn::before {
  background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(245, 158, 11, 0.10), transparent 70%);
}

.insight-ok {
  border-left-color: #16a34a;
}

.insight-ok::before {
  background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(22, 163, 74, 0.08), transparent 70%);
}

.insight-info {
  border-left-color: #1f4f8a;
}

[dir="rtl"] .insight-alert {
  border-right-color: #dc2626;
}

[dir="rtl"] .insight-warn {
  border-right-color: #f59e0b;
}

[dir="rtl"] .insight-ok {
  border-right-color: #16a34a;
}

[dir="rtl"] .insight-info {
  border-right-color: #1f4f8a;
}

.insight-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.insight-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.insight-icon .icon {
  width: 20px;
  height: 20px;
}

.insight-headline {
  flex: 1;
  min-width: 0;
}

.insight-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.insight-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.insight-severity {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.insight-severity-alert {
  background: #fee2e2;
  color: #991b1b;
}

.insight-severity-warn {
  background: #fef3c7;
  color: #92400e;
}

.insight-severity-ok {
  background: #dcfce7;
  color: #166534;
}

.insight-severity-info {
  background: #dbeafe;
  color: #1e3a8a;
}

.insight-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
}

.insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.insight-dot-alert {
  background: #dc2626;
}

.insight-dot-warn {
  background: #f59e0b;
}

.insight-dot-ok {
  background: #16a34a;
}

.insight-dot-info {
  background: #1f4f8a;
}

.insight-actions-head {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: uppercase;
}

.insight-actions {
  margin: 0;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text);
}

.insight-actions li {
  line-height: 1.5;
}

.insight-actions strong {
  color: var(--text);
}

.insight-rationale {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* On phone: stack the severity pill below the headline. */
@media (max-width: 540px) {
  .insight-head {
    flex-wrap: wrap;
  }

  .insight-severity {
    order: 3;
    margin-top: 4px;
  }
}

/* Fetch (read-only) result cards rendered when intent=FETCH. Visually
   distinct from green action cards so the user can tell at a glance
   that nothing was mutated. */
.fetch-card {
  align-self: stretch;
  margin: 4px 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #cfe1f7;
  background: #eef5fc;
  font-size: var(--fs-sm, 13px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fetch-card.fetch-fail {
  border-color: #f1b7b7;
  background: #fbecec;
}

.fetch-card .fetch-head {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f4f8a;
}

.fetch-card.fetch-fail .fetch-head {
  color: #9b2929;
}

.fetch-card .fetch-body {
  color: var(--text);
}

.fetch-card .fetch-items {
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fetch-card .fetch-items li {
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.fetch-card .fetch-items li.fetch-more {
  background: transparent;
  border: none;
  color: var(--muted);
  font-style: italic;
  padding: 2px 8px;
}

.fetch-card .action-link {
  color: #1f4f8a;
}

@media (max-width: 540px) {
  .chat-popup {
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .chat-popup-head {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .chat-popup .chat-foot {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* =========================================================
   Modal dialog (native <dialog>)
   ========================================================= */

dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 540px;
  width: 95%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  font-family: inherit;
}

dialog.modal::backdrop {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-head h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.modal-head .icon-btn {
  width: 32px;
  height: 32px;
}

.modal-body {
  padding: 18px 20px;
}

.modal-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* =========================================================
   Inbox / chat
   ========================================================= */

.inbox-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  min-height: calc(100vh - var(--topbar-h) - 48px);
}

.inbox-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-list-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

.inbox-thread {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.inbox-thread:last-child {
  border-bottom: none;
}

.inbox-thread:hover {
  background: var(--surface-2);
}

.inbox-thread.active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.inbox-thread .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.inbox-thread .name {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
  color: var(--text);
}

.inbox-thread .time {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.inbox-thread .preview {
  color: var(--muted);
  font-size: var(--fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-head .name {
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--track-tight);
}

.chat-head .meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.chat-stream {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  background: var(--surface-2);
}

.bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  animation: bubble-in var(--t-med) var(--ease);
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bubble-in {
  align-self: flex-start;
}

.bubble-out {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.bubble-out .meta {
  color: rgba(255, 255, 255, 0.75);
}

.bubble-failed {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red);
}

.bubble .body {
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble .meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.chat-foot {
  border-top: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface);
}

.chat-foot form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-foot input[name="body"] {
  flex: 1;
}

.suggestion-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
  background: var(--surface);
}

.suggestion-chip {
  background: var(--primary-soft-2);
  border: 1px solid var(--primary-soft);
  color: var(--primary-text);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.suggestion-chip:hover {
  background: var(--primary-soft);
}

/* =========================================================
   Activity feed
   ========================================================= */

.activity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background var(--t-fast) var(--ease);
}

.activity-row:hover {
  background: var(--surface-2);
}

.activity .ic {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.activity .ic.message {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.activity .ic.project {
  background: var(--surface-2);
  color: var(--text);
}

.activity .ic.invoice_paid {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
}

.activity .ic.rfi_answered {
  background: rgba(202, 138, 4, 0.12);
  color: #a16207;
}

.activity .body {
  flex: 1;
  min-width: 0;
}

.activity .title {
  font-weight: 500;
  color: var(--text);
  font-size: var(--fs-base);
}

.activity .meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

/* =========================================================
   Advisor
   ========================================================= */

.advisor-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.insight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.insight:hover {
  border-color: rgba(126, 177, 44, 0.25);
  box-shadow: var(--glow-red-soft);
  transform: translateY(-1px);
}

.insight+.insight {
  margin-top: 12px;
}

.insight .ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight .ic.alert {
  background: var(--red-soft);
  color: var(--red);
}

.insight .ic.warn {
  background: var(--surface-2);
  color: var(--text-2);
}

.insight .ic.info {
  background: var(--surface-2);
  color: var(--text-2);
}

.insight .ic.opp {
  background: var(--primary-soft);
  color: var(--primary-text);
}

.insight .body {
  flex: 1;
}

.insight .title {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
}

.insight .desc {
  color: var(--muted);
  font-size: var(--fs-base);
  margin-top: 4px;
  line-height: var(--lh-normal);
}

.insight .actions {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================================
   Charts
   ========================================================= */

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}

.chart-grid>.card {
  min-height: 300px;
}

.chart-host {
  padding: 8px 18px 18px;
  height: 260px;
  position: relative;
}

.chart-card {
  overflow: hidden;
}

/* Two-up sections that gracefully fall back to single column. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}

/* =========================================================
   Login
   ========================================================= */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 8%, rgba(126, 177, 44, 0.08) 0, transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(126, 177, 44, 0.05) 0, transparent 50%),
    var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-card .login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: block;
  background: var(--surface);
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border);
}

.login-card h1 {
  text-align: center;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: var(--track-tightest);
  line-height: var(--lh-snug);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-card .muted {
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* =========================================================
   Helpers
   ========================================================= */

.muted {
  color: var(--muted);
}

.text-2 {
  color: var(--text-2);
}

.small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.spacer {
  flex: 1;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.row-end {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.section+.section {
  margin-top: 16px;
}

.hidden {
  display: none !important;
}

.empty-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.ghost-link {
  color: var(--muted);
  text-decoration: none;
  margin-right: 6px;
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 6px;
}

.ghost-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chat-mini {
  max-height: 360px;
}

/* =========================================================
   Mobile
   ========================================================= */

/* =========================================================
   New defaults — language switcher + Ask-AI button (top bar)
   ========================================================= */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.lang-toggle:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.lang-toggle .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-toggle-label {
  white-space: nowrap;
}

/* On phones, drop the long label and keep the globe + short code. */
@media (max-width: 540px) {
  .lang-toggle {
    padding: 0 10px;
  }

  .lang-toggle-label {
    font-size: 12px;
  }
}

.topbar-ask-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

/* WhatsApp status pill — live indicator next to the language toggle.
   Class wa-status-{on,off,pair,unknown} swaps the dot color so the
   operator can read the bot state at a glance. */
.wa-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.wa-status:hover {
  border-color: var(--text);
  background: var(--surface);
}

.wa-status .wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 2px var(--surface);
  flex-shrink: 0;
}

.wa-status-on .wa-dot {
  background: #16a34a;
  box-shadow: 0 0 0 2px var(--surface), 0 0 8px rgba(22, 163, 74, 0.55);
  animation: wa-pulse 2s ease-in-out infinite;
}

.wa-status-pair .wa-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px var(--surface), 0 0 8px rgba(245, 158, 11, 0.55);
  animation: wa-pulse 1.4s ease-in-out infinite;
}

.wa-status-off .wa-dot {
  background: #94a3b8;
}

.wa-status-unknown .wa-dot {
  background: #cbd5e1;
}

@keyframes wa-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }
}

/* On phones, drop the text — keep only the dot so the topbar stays compact. */
@media (max-width: 540px) {
  .wa-status .wa-status-label {
    display: none;
  }

  .wa-status {
    padding: 0 10px;
  }
}

.topbar-ask-ai:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}

.topbar-ask-ai .icon {
  width: 16px;
  height: 16px;
}

/* On wide viewports the FAB is enough; the topbar Ask-AI is a mobile aid. */
@media (min-width: 881px) {
  .topbar-ask-ai .label {
    display: inline;
  }
}

/* =========================================================
   Mobile-first responsive: drawer, hamburger, table-to-card
   ========================================================= */

/* The mobile breakpoint is 880px — below this the sidebar becomes a
   slide-in overlay and the layout collapses to a single column. The
   hamburger is the only way to open the drawer. */
@media (max-width: 880px) {

  /* Single-column layout: the sidebar overlays content, doesn't reserve
     a track in the grid. */
  .app {
    grid-template-columns: 1fr;
  }

  .app.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  /* Sidebar = fixed slide-in drawer. Off-screen by default; .sidebar-open
     translates it into view. width slightly wider than desktop to give
     fingers room. */
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: min(86vw, 320px);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease);
    box-shadow: var(--shadow-3);
    z-index: 30;
  }

  .app.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* RTL: drawer slides in from the right edge instead. */
  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }

  [dir="rtl"] .app.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Override the desktop "collapsed" rules so the open drawer always
     shows full labels — there's no space-saving need on a phone. */
  .sidebar-brand .brand-meta {
    display: block;
  }

  .nav-item .label {
    display: inline;
  }

  .nav-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .nav-section {
    display: flex;
  }

  .sidebar-foot .user-meta {
    display: block;
  }

  .sidebar-foot {
    justify-content: flex-start;
    padding: 12px;
  }

  .app.sidebar-collapsed .nav-item {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .app.sidebar-collapsed .nav-item .label {
    display: inline;
  }

  .app.sidebar-collapsed .nav-section {
    display: flex;
  }

  .app.sidebar-collapsed .brand-meta {
    display: block;
  }

  .app.sidebar-collapsed .sidebar-foot .user-meta {
    display: block;
  }

  /* Topbar leaves only essentials: hamburger, page title, AI, lang, avatar. */
  .topbar {
    padding: 0 12px;
    gap: 6px;
  }

  .topbar h1 {
    font-size: var(--fs-base);
  }

  .topbar .crumb {
    display: none;
  }

  .topbar-search {
    display: none;
  }

  .topbar-settings {
    display: none;
  }

  .topbar-user .user-info {
    display: none;
  }

  .topbar-user {
    padding: 4px;
    margin-inline-start: 0;
  }

  .content {
    padding: 16px;
    gap: 14px;
  }

  /* Existing dashboards squashed into a single column. */
  .advisor-grid {
    grid-template-columns: 1fr;
  }

  .chart-grid {
    grid-template-columns: 1fr;
  }

  .inbox-shell {
    grid-template-columns: 1fr;
  }

  .kanban {
    grid-template-columns: repeat(5, 80vw);
    overflow-x: auto;
  }

  /* Project KPIs: 2 per row instead of 4. */
  .project-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  /* KPI grid bumps cards to fill width. */
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .kpi {
    padding: 16px;
  }

  .kpi .value {
    font-size: 22px;
  }

  .card-header {
    padding: 14px 16px;
  }

  .card-body {
    padding: 16px;
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Hamburger lives on the topbar only on mobile. Desktop already has its
   own collapse toggle that lives outside this rule. */
.topbar-menu {
  display: inline-flex;
}

@media (min-width: 881px) {
  .topbar-menu {
    display: none;
  }
}

/* Table → Card transformation.
   At ≤700px we strip the table layout, stack each row as a card, and
   surface the column header via CSS using a `data-label` attribute on
   each <td>. Templates need to add `data-label="…"` for this to look
   good; the fallback (no label) is graceful — the cell just appears
   without a leading caption. */
@media (max-width: 700px) {
  .table-wrap {
    overflow: visible;
  }

  table.data,
  table.data thead,
  table.data tbody,
  table.data tr,
  table.data th,
  table.data td {
    display: block;
    width: 100%;
  }

  table.data thead {
    /* Visually-hidden but accessible. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.data tbody {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  table.data tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    padding: 12px 14px;
  }

  table.data td {
    border: none;
    padding: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: end;
  }

  table.data td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    flex-shrink: 0;
    text-align: start;
  }

  table.data td.actions {
    justify-content: flex-end;
    border-top: 1px dashed var(--border);
    margin-top: 6px;
    padding-top: 10px;
  }

  table.data td.actions::before {
    content: "";
  }
}

/* Phone-first tweaks below 540px — chat priority + tighter spacing. */
@media (max-width: 540px) {
  .content {
    padding: 12px;
    gap: 12px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi {
    padding: 14px;
  }

  .kpi .value {
    font-size: 22px;
  }

  .card-header {
    padding: 12px 14px;
  }

  .card-body {
    padding: 12px 14px;
  }

  .project-kpis {
    grid-template-columns: 1fr 1fr;
  }

  /* Forms: full-width inputs, clear gap so taps don't collide. */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .form-grid .full {
    grid-column: 1;
  }

  /* Make the chat FAB a *dominant* affordance on phones — the user spec
     says chat is the priority on small screens. */
  .chat-fab {
    width: 64px;
    height: 64px;
    bottom: 18px;
    inset-inline-end: 18px;
    inset-inline-start: auto;
    box-shadow: 0 12px 32px rgba(126, 177, 44, 0.45);
    animation: chat-fab-pulse 2.4s ease-in-out infinite;
  }

  @keyframes chat-fab-pulse {

    0%,
    100% {
      box-shadow: 0 12px 32px rgba(126, 177, 44, 0.45);
    }

    50% {
      box-shadow: 0 12px 36px rgba(126, 177, 44, 0.65), 0 0 0 6px rgba(126, 177, 44, 0.10);
    }
  }

  /* Chat popup is fullscreen WhatsApp-style on phones. */
  .chat-popup {
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: auto;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .chat-popup .bubble {
    font-size: 14.5px;
    max-width: 84%;
  }

  .chat-popup .chat-foot input {
    height: 42px;
  }

  .chat-popup .chat-foot .btn {
    width: 42px;
    height: 42px;
  }

  /* Topbar Ask-AI: keep the icon, drop the label text. */
  .topbar-ask-ai .label {
    display: none;
  }

  .topbar-ask-ai {
    padding: 0 10px;
  }
}

/* =========================================================
   Dashboard — Needs my action today
   ========================================================= */

.action-card {
  border-left: 3px solid var(--primary);
}

.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  transition: background var(--t-fast) var(--ease);
}

.action-row:first-child {
  border-top: 0;
}

.action-row:hover {
  background: var(--surface-2);
}

.action-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--text-2);
  background: var(--surface-2);
}

.action-row.action-alert .action-ic {
  color: var(--primary);
  background: var(--primary-soft);
}

.action-row.action-warn .action-ic {
  color: var(--text);
  background: var(--surface-2);
}

.action-body {
  flex: 1;
  min-width: 0;
}

.action-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.action-go:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.action-go .icon {
  width: 16px;
  height: 16px;
}

/* =========================================================
   Dashboard — Project phase health
   ========================================================= */

.phase-health-table .phase-row {
  transition: background var(--t-fast) var(--ease);
}

.phase-health-table .phase-row:hover {
  background: var(--surface-2);
}

.phase-health-table .phase-name {
  font-weight: 600;
  color: var(--text);
}

.progress-mini {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}

.progress-mini-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width var(--t-med) var(--ease);
}

.phase-row.phase-alert .progress-mini-fill {
  background: var(--primary);
}

.phase-row.phase-warn .progress-mini-fill {
  background: var(--text-2);
}

.phase-row.phase-ok .progress-mini-fill {
  background: var(--text-2);
  opacity: 0.6;
}

/* =========================================================
   Dashboard — Invoice aging buckets
   ========================================================= */

.aging-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.aging-bucket {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.aging-bucket:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

.aging-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.aging-amount {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--track-tight);
}

.aging-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.aging-bucket.aging-warn {
  background: rgba(126, 177, 44, 0.04);
  border-color: rgba(126, 177, 44, 0.15);
}

.aging-bucket.aging-alert {
  background: rgba(126, 177, 44, 0.08);
  border-color: rgba(126, 177, 44, 0.25);
}

.aging-bucket.aging-alert .aging-amount {
  color: var(--primary-text);
}

.aging-bucket.aging-critical {
  background: var(--primary-soft);
  border-color: rgba(126, 177, 44, 0.40);
}

.aging-bucket.aging-critical .aging-amount {
  color: var(--primary);
}

.aging-bucket.aging-critical .aging-label {
  color: var(--primary-text);
}

.aging-bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
}

.aging-seg {
  display: block;
  height: 100%;
}

.aging-seg.seg-current {
  background: var(--text-2);
  opacity: 0.45;
}

.aging-seg.seg-warn {
  background: rgba(126, 177, 44, 0.45);
}

.aging-seg.seg-alert {
  background: rgba(126, 177, 44, 0.75);
}

.aging-seg.seg-critical {
  background: var(--primary);
}

@media (max-width: 720px) {
  .aging-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   RTL — Arabic support
   ========================================================= */

/* Arabic typography intentionally inherits the global stack
   (Inter + IBM Plex Sans Arabic). No decorative Kufi/Naskh overrides. */

/* Bilingual content split — used by the Project Insight section so each
   bullet, headline, and action can carry both an EN and AR string. The
   active language's variant shows; the other one is hidden. Defaults to
   showing the English copy (matches the pre-JS state). */
.lang-ar-only {
  display: none;
}

body.lang-ar .lang-ar-only {
  display: inline;
}

body.lang-ar .lang-en-only {
  display: none;
}

/* When the wrapper itself is a block-level element (.insight-rationale
   is a div), the inline default would collapse it onto one line. */
body.lang-ar div.lang-ar-only {
  display: block;
}

body:not(.lang-ar) div.lang-ar-only {
  display: none;
}

/* Inputs/buttons inside an RTL container should align right. */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] .topbar-search input {
  padding: 0 36px 0 14px;
}

[dir="rtl"] .topbar-search .icon {
  left: auto;
  right: 12px;
}

/* Sidebar border + active indicator flip. */
[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .nav-item.active {
  box-shadow: inset -2px 0 0 var(--primary);
}

/* Nested nav items use a left border in LTR; flip to right in RTL. */
[dir="rtl"] .nav-item-nested {
  margin-left: 0;
  margin-right: 12px;
  padding-left: 0;
  padding-right: 12px;
  border-left: none;
  border-right: 2px solid var(--border);
  border-radius: 6px 0 0 6px;
}

[dir="rtl"] .nav-item-nested:hover {
  border-right-color: var(--primary);
}

[dir="rtl"] .nav-item-nested.active {
  border-right-color: var(--primary);
}

/* The icon-btn-with-dot has its dot pinned to the right corner; flip. */
[dir="rtl"] .icon-btn.has-dot::after {
  right: auto;
  left: 9px;
}

/* topbar-user pill — fix asymmetric padding so the avatar still looks centered. */
[dir="rtl"] .topbar-user {
  padding: 4px 4px 4px 12px;
  margin-left: 0;
  margin-right: 4px;
}

/* In RTL, text-align defaults switch direction. Keep numerics LTR so
   currency strings ("SAR 12,500") and dates render left-to-right. */
[dir="rtl"] .tabular,
[dir="rtl"] [class*="value"],
[dir="rtl"] td.tabular,
[dir="rtl"] td.right {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
}

/* Activity feed icons sit on the left in LTR; flip in RTL. */
[dir="rtl"] .activity .ic {
  margin-right: 0;
  margin-left: 10px;
}

/* Action result cards in chat — link arrow side. */
[dir="rtl"] .action-card {
  text-align: right;
}

/* Chat popup — anchor to the right edge in LTR, left in RTL. */
.chat-popup {
  left: auto;
  right: 24px;
}

[dir="rtl"] .chat-popup {
  right: auto;
  left: 24px;
}

.chat-fab {
  left: auto;
  right: 24px;
}

[dir="rtl"] .chat-fab {
  right: auto;
  left: 24px;
}

/* RTL phone: keep the chat FAB on the side closest to the user's thumb. */
@media (max-width: 540px) {
  [dir="rtl"] .chat-fab {
    left: 18px;
    right: auto;
  }

  [dir="rtl"] .chat-popup {
    left: 0;
    right: 0;
  }
}

/* Drawer slide direction is handled inside the mobile @media block above
   via inset-inline-start logic — no extra RTL rule needed there. */


/* =========================================================
   emerge AI systems — Premium polish layer (additive only)
   Everything below is PURE addition — no override of layout
   properties, no rename of any selector. Safe to remove en bloc
   if a regression appears.
   ========================================================= */

/* Bring in Archivo for display headings — pairs with Inter for body */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap');

/* Display headings use the chunkier Archivo for that "premium" weight,
   while body text stays on Inter for legibility. Falls back gracefully
   on Arabic where Plex Arabic already wins via inheritance. */
.topbar h1,
.sidebar-brand .brand-meta,
.cd-head h2,
.login-card h2,
.wc-hero h1 {
  font-family: 'Archivo', 'Inter', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* Sidebar — give it a subtle gradient + a brand-tinted top edge so the
   app feels grounded in the brand palette without disrupting layout.
   We do NOT set `position` here — the original `.sidebar { position: sticky; top: 0; }`
   rule (line ~190) must keep winning so the sidebar stays put while the
   main column scrolls. The ::before pseudo-element below positions
   absolutely against the sidebar's sticky bounding box. */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
}

.sidebar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg,
      var(--brand-green) 0%,
      var(--brand-green) 60%,
      var(--brand-purple) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Pulse-aligned primary button — flat green, sharp 8px radius.
   Matches the .pulse-btn-primary utility so every existing
   class="btn btn-primary" inherits the same look. */
.btn-primary {
  background: var(--p-green);
  border-color: var(--p-green);
  color: #fff;
  box-shadow: none;
  border-radius: 8px;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary:hover {
  background: var(--p-green-deep);
  border-color: var(--p-green-deep);
  color: #fff;
  box-shadow: var(--p-shadow-btn);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* KPI tiles get a brand-tinted top border so the dashboard reads as
   "Emerge" at a glance */
.kpi {
  border-block-start: 3px solid var(--brand-green);
  position: relative;
  overflow: hidden;
}

.kpi::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right,
      rgba(139, 197, 63, 0.10) 0%,
      transparent 70%);
  pointer-events: none;
}

/* Focus rings — modern brand-tinted focus for inputs and buttons */
input:focus,
textarea:focus,
select:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 197, 63, 0.22);
  border-color: var(--brand-green);
}

/* Nav-item active state — green left/right edge instead of red */
.nav-item.active,
.nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary-text);
  border-inline-start: 3px solid var(--brand-green);
}

[dir="rtl"] .nav-item.active,
[dir="rtl"] .nav-item.is-active {
  border-inline-start: none;
  border-inline-end: 3px solid var(--brand-green);
}

/* Avatar gets a tiny gradient ring for the premium touch */
.avatar {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-purple));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(10, 10, 15, 0.1);
}

/* Tag chips — subtle elevation */
.tag,
.pr-chip,
.st-chip,
.ct-pill {
  box-shadow: inset 0 0 0 1px rgba(10, 10, 15, 0.04);
}

/* Smooth scroll for in-page anchors (Phases / Site Visits / Invoices in
   project_detail.html and similar). Pairs with the existing data-section
   scroll-spy without changing any selector. */
html {
  scroll-behavior: smooth;
}

/* Modern scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 15, 0.15);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 15, 0.3);
}

/* =============================================================
   PULSE DESIGN SYSTEM — site-wide utility classes
   -------------------------------------------------------------
   Extracted from the dashboard/clients/client_detail rewrites so
   every page shares the same "Pipedrive Pulse" grammar without
   each template having to ship its own <style> block. Naming:

     .pulse-page      — page wrapper (bottom padding)
     .pulse-subnav    — tabbed sub-nav strip + .pulse-subnav-link
     .pulse-hero      — pastel gradient hero with .h-title/.h-sub
     .pulse-card      — white card + .pulse-card-head + .pulse-card-body
     .pulse-form-grid — 3-col responsive grid (.full for full width)
     .pulse-field     — label + input/select/textarea
     .pulse-btn       — base btn; +primary +ghost +dark +danger
     .pulse-avatar    — circular gradient initial badge (+ .lg variant)
     .pulse-list      — flush container for row items
     .pulse-row       — single row inside .pulse-list
     .pulse-pill      — small status badge (+ .has +.warn +.bad +.info)
     .pulse-info-grid — 3-column key/value grid with dividers
     .pulse-empty     — empty state dashed box
     .pulse-tabchip   — sub-nav with attached count badge
     .pulse-kpis      — 4-up KPI row used on detail pages
     .pulse-portal    — pastel-green inline portal/CTA card

   Colour anchors used throughout:
     --p-green   #7eb12c (text/btn)         #9ccb47 (gradient)
     --p-text    #060505 (near-black headings)
     --p-sub     #5a8418 (accent sub-text on pastel)
     --p-border  rgba(15,23,42,.16) (outer borders)
     --p-divider rgba(15,23,42,.12) (inner cell dividers)
     --p-hover   #fafbf6 (hover bg on rows)
   ============================================================= */

:root {
  --p-green: #7eb12c;
  --p-green-bright: #9ccb47;
  --p-green-deep: #6c9b22;
  --p-text-dark: #060505;
  --p-sub: #5a8418;
  --p-border: rgba(15, 23, 42, 0.16);
  --p-divider: rgba(15, 23, 42, 0.12);
  --p-divider-soft: rgba(15, 23, 42, 0.06);
  --p-hover: #fafbf6;
  --p-gradient:
    linear-gradient(135deg,
      #f0f9d8 0%, #ecf5e2 25%, #eef2f0 50%, #f0eef9 75%, #f4ebf2 100%);
  --p-shadow-btn: 0 4px 12px -4px rgba(126, 177, 44, 0.40);
}

.pulse-page {
  padding: 0 0 40px;
}

/* ---- Sub-nav strip (tabs along the top of a section) ---- */
.pulse-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--p-border);
  margin-bottom: 22px;
  padding-bottom: 2px;
  overflow-x: auto;
}

.pulse-subnav a,
.pulse-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 150ms ease;
  background: none;
  cursor: pointer;
}

.pulse-subnav a:hover,
.pulse-subnav-link:hover {
  color: var(--text);
}

.pulse-subnav a.is-on,
.pulse-subnav-link.is-on {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--p-text-dark);
}

.pulse-subnav a .icon,
.pulse-subnav-link .icon {
  width: 16px;
  height: 16px;
}

.pulse-subnav a .pill,
.pulse-subnav-link .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 7px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}

.pulse-subnav a.is-on .pill,
.pulse-subnav-link.is-on .pill {
  background: rgba(126, 177, 44, 0.18);
  color: var(--p-sub);
}

/* ---- Pastel gradient hero ---- */
.pulse-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 30px 40px;
  background: var(--p-gradient);
  margin-bottom: 22px;
  border: 1px solid var(--p-divider);
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Hero boxes are GONE — the brand identity moves to a single page-
   background watermark (see body::before below). The page title is
   carried by the existing topbar/heading instead. This kills the
   pastel hero strip on every page in one shot, no template edits. */
.pulse-hero,
.c-hero,
.cd-hero,
.p-hero,
.wc-hero,
.h-art {
  display: none !important;
}

/* Emerge brain — site-wide background watermark.
   Painted into the brain silhouette via mask-image so we can color
   it with a green gradient. Position: fixed so it stays put when
   scrolling. z-index: 0 + pointer-events: none so it never gets in
   the way. Sits behind every card/table/form because those have
   opaque white backgrounds — the watermark shows through page gaps
   and around card edges, contributing a soft brand presence rather
   than a stamped logo. */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  inset-inline-end: -10vmin;
  transform: translateY(-50%);
  width: 80vmin;
  height: 80vmin;
  max-width: 900px;
  max-height: 900px;
  background: linear-gradient(135deg,
      rgba(126, 177, 44, 0.16) 0%,
      rgba(156, 203, 71, 0.10) 40%,
      rgba(156, 203, 71, 0.02) 100%);
  mask: url('/static/emerge-brain.svg') no-repeat center / contain;
  -webkit-mask: url('/static/emerge-brain.svg') no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

/* Ensure the actual app shell stacks ABOVE the watermark so cards/
   forms/tables sit on top of the pattern. */
.app {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Collapsible "+ New X" creator
   ------------------------------------------------------------
   List pages used to greet the user with the full "create new"
   form unrolled. That's noisy — users want to see their list
   first. Wrap the create-form in `<details class="create-toggle">`
   with a `<summary>` that doubles as the green CTA button:

     <details class="create-toggle">
       <summary>{{ icon('plus') }} New project</summary>
       <div class="card"><div class="card-body">…form…</div></div>
     </details>

   Click the button → details opens → form appears.
   Browser handles state, no JS required.
   ============================================================ */
.create-toggle {
  margin-bottom: 18px;
}

.create-toggle>summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--p-green);
  color: #fff;
  border: 1px solid var(--p-green);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background 150ms ease, transform 150ms ease,
    box-shadow 150ms ease;
  user-select: none;
  width: -moz-fit-content;
  width: fit-content;
}

.create-toggle>summary::-webkit-details-marker {
  display: none;
}

.create-toggle>summary::marker {
  content: '';
}

.create-toggle>summary:hover {
  background: var(--p-green-deep);
  border-color: var(--p-green-deep);
  transform: translateY(-1px);
  box-shadow: var(--p-shadow-btn);
}

.create-toggle>summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.30);
}

.create-toggle>summary .icon {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}

/* Rotate the leading icon when the details opens so it acts as
   a visual close hint (+ → ×). */
.create-toggle[open]>summary .icon {
  transform: rotate(45deg);
}

.create-toggle[open]>summary {
  margin-bottom: 14px;
}

/* When open, the wrapped card has a soft entrance — feels like a
   reveal rather than a layout jump. */
.create-toggle[open]>.card,
.create-toggle[open]>details>.card {
  animation: createToggleIn 220ms ease both;
}

@keyframes createToggleIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pulse-hero .h-body {
  flex: 1;
  min-width: 0;
}

.pulse-hero .h-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--p-text-dark);
  line-height: 1.1;
  margin: 0 0 4px;
}

.pulse-hero .h-sub,
.pulse-hero .h-company {
  font-size: 15px;
  font-weight: 500;
  color: var(--p-sub);
  margin: 0 0 12px;
}

.pulse-hero .h-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}

.pulse-hero .h-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pulse-hero .h-meta b {
  color: var(--text);
  font-weight: 700;
}

.pulse-hero .h-art {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background-image: url('/static/emerge-brain.svg');
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 24px rgba(126, 177, 44, 0.20));
  opacity: 0.88;
}

.pulse-hero .h-back {
  position: absolute;
  top: 16px;
  inset-inline-end: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: all 150ms ease;
}

.pulse-hero .h-back:hover {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.15);
}

.pulse-hero .h-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.pulse-hero .h-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease;
}

.pulse-hero .h-btn:hover {
  border-color: rgba(15, 23, 42, 0.20);
  transform: translateY(-1px);
}

.pulse-hero .h-btn .icon {
  width: 13px;
  height: 13px;
}

.pulse-hero .h-btn.primary {
  background: var(--p-green);
  color: #fff;
  border-color: var(--p-green);
}

.pulse-hero .h-btn.primary:hover {
  background: var(--p-green-deep);
  border-color: var(--p-green-deep);
  box-shadow: var(--p-shadow-btn);
}

@media (max-width: 800px) {
  .pulse-hero {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
  }

  .pulse-hero .h-art {
    display: none;
  }
}

/* ---- Generic white card ---- */
.pulse-card {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pulse-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--p-divider);
}

.pulse-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pulse-card-head h3 .icon {
  width: 16px;
  height: 16px;
  color: var(--p-green);
}

.pulse-card-head .count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  background: rgba(15, 23, 42, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
}

.pulse-card-head .ar {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.pulse-card-head .sub {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--muted);
}

.pulse-card-head .head-actions {
  margin-inline-start: auto;
  display: flex;
  gap: 8px;
}

.pulse-card-body {
  padding: 20px 22px;
}

/* ---- Form grid ---- */
.pulse-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .pulse-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .pulse-form-grid {
    grid-template-columns: 1fr;
  }
}

.pulse-form-grid .full,
.pulse-field.full {
  grid-column: 1 / -1;
}

.pulse-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}

.pulse-field label .muted {
  font-size: 11px;
  color: var(--muted);
  margin-inline-start: 4px;
}

.pulse-field input,
.pulse-field select,
.pulse-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--p-divider);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.pulse-field textarea {
  min-height: 96px;
  resize: vertical;
}

.pulse-field input:focus,
.pulse-field select:focus,
.pulse-field textarea:focus {
  outline: none;
  border-color: var(--p-green);
  box-shadow: 0 0 0 3px rgba(126, 177, 44, 0.15);
}

.pulse-form-foot {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Buttons ---- */
.pulse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--p-divider);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.pulse-btn:hover {
  border-color: rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.pulse-btn .icon {
  width: 14px;
  height: 14px;
}

.pulse-btn-primary {
  background: var(--p-green);
  color: #fff;
  border-color: var(--p-green);
  font-weight: 600;
}

.pulse-btn-primary:hover {
  background: var(--p-green-deep);
  border-color: var(--p-green-deep);
  color: #fff;
  box-shadow: var(--p-shadow-btn);
}

.pulse-btn-dark {
  background: var(--p-text-dark);
  color: #fff;
  border-color: var(--p-text-dark);
  font-weight: 600;
}

.pulse-btn-dark:hover {
  background: #2a2a2e;
  border-color: #2a2a2e;
  color: #fff;
}

.pulse-btn-ghost {
  background: transparent;
  border-color: rgba(15, 23, 42, 0.10);
}

.pulse-btn-ghost:hover {
  background: #fafafa;
  border-color: rgba(15, 23, 42, 0.20);
}

.pulse-btn-danger {
  color: #b91c1c;
  border-color: rgba(15, 23, 42, 0.10);
}

.pulse-btn-danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.pulse-btn-sm {
  padding: 7px 12px;
  font-size: 12.5px;
}

.pulse-btn-sm .icon {
  width: 12px;
  height: 12px;
}

/* ---- Avatar (circular gradient initial badge) ---- */
.pulse-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p-green-bright), var(--p-green));
  color: var(--p-text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
}

.pulse-avatar.lg {
  width: 96px;
  height: 96px;
  font-size: 38px;
  box-shadow: 0 8px 24px -8px rgba(126, 177, 44, 0.45);
}

.pulse-avatar.sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* ---- Row-item list (cards or table-replacement) ---- */
.pulse-list {
  display: flex;
  flex-direction: column;
}

.pulse-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid var(--p-divider);
  text-decoration: none;
  color: var(--text);
  transition: background 150ms ease;
}

.pulse-row:first-child {
  border-top: 0;
}

.pulse-row:hover {
  background: var(--p-hover);
}

.pulse-row-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.pulse-row-icon .icon {
  width: 16px;
  height: 16px;
}

.pulse-row-body {
  flex: 1;
  min-width: 0;
}

.pulse-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-row-meta {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pulse-row-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pulse-row-meta b {
  color: var(--text);
  font-weight: 600;
}

.pulse-row-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pulse-row-actions form {
  margin: 0;
}

/* ---- Status pill ---- */
.pulse-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: capitalize;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-2);
}

.pulse-pill.has,
.pulse-pill.good,
.pulse-pill.active,
.pulse-pill.signed,
.pulse-pill.completed,
.pulse-pill.paid {
  background: #dcfce7;
  color: #15803d;
}

.pulse-pill.warn,
.pulse-pill.sent,
.pulse-pill.pending,
.pulse-pill.on_hold,
.pulse-pill.partial {
  background: #fef3c7;
  color: #92400e;
}

.pulse-pill.bad,
.pulse-pill.overdue,
.pulse-pill.cancelled,
.pulse-pill.rejected,
.pulse-pill.failed {
  background: #fee2e2;
  color: #b91c1c;
}

.pulse-pill.info,
.pulse-pill.draft {
  background: rgba(59, 130, 246, 0.10);
  color: #1e40af;
}

.pulse-pill.green-soft {
  background: rgba(126, 177, 44, 0.14);
  color: var(--p-sub);
}

/* Tabular-numeric budget/amount cell on the right of a row */
.pulse-budget {
  flex-shrink: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---- Info grid (key/value compartments with dividers) ---- */
.pulse-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 800px) {
  .pulse-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .pulse-info-grid {
    grid-template-columns: 1fr;
  }
}

.pulse-info-cell {
  padding: 14px 16px;
  border-inline-end: 1px solid var(--p-divider);
  border-bottom: 1px solid var(--p-divider);
}

.pulse-info-cell:nth-child(3n) {
  border-inline-end: 0;
}

@media (min-width: 801px) {

  .pulse-info-cell:nth-last-child(-n+3):nth-child(3n+1),
  .pulse-info-cell:nth-last-child(-n+3):nth-child(3n+1)~.pulse-info-cell {
    border-bottom: 0;
  }
}

@media (max-width: 800px) and (min-width: 501px) {
  .pulse-info-cell:nth-child(2n) {
    border-inline-end: 0;
  }
}

@media (max-width: 500px) {
  .pulse-info-cell {
    border-inline-end: 0;
  }
}

.pulse-info-cell .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.pulse-info-cell .value {
  font-size: 14px;
  color: var(--text);
}

.pulse-info-cell .value a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.15);
}

.pulse-info-cell .value a:hover {
  color: var(--p-sub);
  border-bottom-color: var(--p-green);
}

.pulse-info-cell .value.empty {
  color: var(--muted);
}

.pulse-info-cell.mono .value {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---- KPI row (4-up by default, responsive) ---- */
.pulse-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}

@media (max-width: 1000px) {
  .pulse-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .pulse-kpis {
    grid-template-columns: 1fr;
  }
}

.pulse-kpi {
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pulse-kpi .k-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pulse-kpi .k-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--p-text-dark);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.pulse-kpi .k-meta {
  font-size: 12px;
  color: var(--text-2);
}

.pulse-kpi.green {
  background: linear-gradient(135deg, #f0f9d8, #ecf5e2);
  border-color: rgba(126, 177, 44, 0.25);
}

.pulse-kpi.green .k-value {
  color: var(--p-sub);
}

/* ---- Empty state ---- */
.pulse-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.15);
  border-radius: 12px;
}

.pulse-empty .e-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: 0.35;
}

.pulse-empty .e-cta {
  margin-top: 14px;
}

/* ---- Pastel-green portal/info card (inline highlight box) ---- */
.pulse-portal {
  padding: 18px 20px;
  background: #f0f9d8;
  border: 1px solid rgba(126, 177, 44, 0.20);
  border-radius: 12px;
  margin-bottom: 16px;
}

.pulse-portal .p-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pulse-portal .p-head .ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--p-sub);
  border: 1px solid rgba(126, 177, 44, 0.30);
}

.pulse-portal .p-head .ico .icon {
  width: 14px;
  height: 14px;
}

.pulse-portal .p-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.pulse-portal .p-body {
  font-size: 13px;
  color: var(--text-2);
}

/* ---- Page-head row (left = title block, right = actions) ---- */
.pulse-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pulse-page-head h2 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pulse-page-head .sub {
  font-size: 13px;
  color: var(--text-2);
}

.pulse-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* === end PULSE DESIGN SYSTEM === */

/* User-defined names (follow-up classes, lead labels) render BOTH the
   English and Arabic value the operator typed; show the one matching the
   active UI language. <html lang> is kept current by i18n.js applyDir().
   Pair this with data-i18n-skip so the dictionary cannot overwrite a
   custom name (e.g. a class renamed to a word the dict also knows). */
html[lang="ar"] .bl-en { display: none; }
html:not([lang="ar"]) .bl-ar { display: none; }



/* ============================================================
   PRINT / PDF
   ------------------------------------------------------------
   The app shipped with zero print rules, so Ctrl+P put the
   sidebar, the topbar, the chat FAB and every action button on
   the sheet. This is the single global block.

   It honours the .no-print convention the statement templates
   already use locally, so those keep working unchanged - they
   simply stop printing the shell as well.

   Quote/contract PDFs are NOT affected: those templates are
   standalone (no extends, no style.css) and are rendered by
   WeasyPrint, so nothing here reaches them.
   ============================================================ */
.print-only { display: none; }

/* the -quick toolbar chips are used as links AND as buttons */
button.rp-quick, button.sc-quick, button.fc-quick, button.gl-quick {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

@media print {
  @page { size: A4 portrait; margin: 14mm; }

  html, body { background: #fff !important; }

  /* chrome that must never reach paper */
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .chat-fab,
  .chat-popup,
  .notif-popup,
  .no-print { display: none !important; }

  /* flatten the shell - otherwise the grid keeps an empty
     sidebar column where the sidebar used to be */
  .app  { display: block !important; }
  .main { display: block !important; margin: 0 !important; padding: 0 !important; }

  .print-only { display: block !important; }

  /* cards read as paper, not as UI */
  .card, .kpi, .mini,
  .rp-card2, .rp-kpi, .rp-card,
  .sc-card, .fc-tile, .gl-card,
  .pulse-card {
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* long report tables: repeat the header on every page and
     never split a row across the fold */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img { break-inside: avoid; page-break-inside: avoid; }

  a { text-decoration: none; color: inherit; }
}

/* ==== mobile.css (emerge app, /static) ==== */
/* Phase 18 D3 — Mobile-optimised overrides.
   Loads AFTER style.css so these rules win on small viewports. Keep
   the override surface narrow — most components scale on their own,
   we only override the patterns that don't. */

@media (max-width: 768px) {

  /* ── Bigger tap targets across the board ─────────────────── */
  .btn, button, a.btn {
    min-height: 44px;          /* Apple HIG: 44pt minimum */
    padding: 10px 14px;
    font-size: 14px;
  }
  .btn-sm { min-height: 36px; padding: 8px 10px; }

  /* ── Hide desktop sidebar — bottom tab bar takes its place ── */
  .app.sidebar-rail .sidebar,
  .sidebar { display: none !important; }
  .app .main, .main { margin-inline-start: 0 !important; }
  /* Make the main content full-width and leave room for the tabbar */
  body { padding-bottom: 68px; /* tabbar height */ }

  /* ── Bottom tab bar ─────────────────────────────────────── */
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    display: flex; align-items: stretch; justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(15,23,42,.06);
    /* Honor iOS safe area */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tabbar a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #6b7280; text-decoration: none;
    font-size: 10.5px; font-weight: 500;
    gap: 2px; padding: 6px 4px;
  }
  .mobile-tabbar a .ic { font-size: 18px; }
  .mobile-tabbar a.is-on { color: #6366f1; }
  .mobile-tabbar a:active { background: #f3f4f6; }

  /* ── Pulse hero: trim padding ───────────────────────────── */
  .pulse-hero { padding: 18px 16px; }
  .pulse-hero .h-title { font-size: 18px; }
  .pulse-hero .h-sub { font-size: 13px; }
  .pulse-hero .h-meta { font-size: 12px; }
  .pulse-hero .h-art { display: none; }

  /* ── Pulse page: tighter gutters ────────────────────────── */
  .pulse-page { padding: 12px; }
  .card { border-radius: 10px; }
  .card-header, .card-body { padding: 12px 14px; }

  /* ── Kanban: horizontal-scroll columns ──────────────────── */
  .kb-board, #kb-board {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 8px;
  }
  .kb-col {
    flex: 0 0 280px;
    min-width: 280px;
    scroll-snap-align: start;
  }
  .kb-card {
    padding: 8px 10px;
    font-size: 12.5px;
  }
  .kb-card .kb-title { font-size: 13px; line-height: 1.25; }

  /* ── Tables → stacked cards via data-label ──────────────── */
  table.data thead { display: none; }
  table.data tr {
    display: block;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
  }
  table.data td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border: none;
    gap: 12px;
  }
  table.data td::before {
    content: attr(data-label);
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0;
  }
  table.data td.right,
  table.data td.actions { justify-content: flex-end; }
  table.data td.actions { padding-top: 8px; flex-wrap: wrap; gap: 6px; }
  table.data td.actions::before { display: none; }

  /* ── Form-grid columns collapse to single column ───────── */
  .form-grid { grid-template-columns: 1fr !important; }

  /* ── KPI grid: 1 column on phones ───────────────────────── */
  .kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi .value { font-size: 20px; }

  /* ── Modals: full-screen on phone ───────────────────────── */
  .modal .modal-body,
  .kb-bulk-modal,
  .kb-confirm-modal {
    width: 92% !important;
    max-width: none !important;
    border-radius: 14px;
  }

  /* ── Pulse sub-nav: scroll horizontally ─────────────────── */
  .pulse-subnav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .pulse-subnav a {
    flex-shrink: 0;
    font-size: 13px;
  }
}

/* iOS-only: respect the home-bar safe area */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    body { padding-bottom: max(68px, env(safe-area-inset-bottom)); }
    .mobile-tabbar {
      padding-bottom: max(0px, env(safe-area-inset-bottom));
      height: calc(60px + max(0px, env(safe-area-inset-bottom)));
    }
  }
}

/* ==== resilience.css (emerge app, /static) ==== */
/* Emerge — skeleton shapes, navigation progress, network status pill.
   Companion to static/skeleton.js and static/net.js. The base .skel,
   .skel-line and .skel-card rules live in style.css (Phase 20 D2); this
   file adds the shapes a whole section needs and the two overlays. */

/* ---------- skeleton shapes ---------- */
.skel { gap: 10px; }
.skel .skel-line { height: 12px; }
.skel-box,
.skel-cal-cell {
  background: linear-gradient(90deg, var(--surface-2, #f1f5f9) 0%, rgba(255, 255, 255, .6) 50%, var(--surface-2, #f1f5f9) 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-box { height: 74px; }
.skel-title { height: 22px !important; width: 42% !important; }
.skel-tall { height: 220px; }
.skel-lbl { width: 30% !important; height: 10px !important; }

.skel-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border, #e6e8ee); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); }
.skel-thead, .skel-row { display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1fr .8fr; gap: 18px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border, #e6e8ee); }
.skel-thead { background: var(--surface-2, #f1f3f9); }
.skel-thead .skel-line { height: 10px; width: 60%; }
.skel-row:last-child { border-bottom: 0; }
.skel-row .skel-line { margin: 0; }
.skel-row .skel-line:nth-child(1) { width: 78%; }
.skel-row .skel-line:nth-child(2) { width: 62%; }
.skel-row .skel-line:nth-child(3) { width: 48%; }
.skel-row .skel-line:nth-child(4) { width: 70%; }
.skel-row .skel-line:nth-child(5) { width: 40%; }

.skel-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 14px; overflow: hidden; }
.skel-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2, #f1f3f9); min-height: 320px; }
.skel-col-head { height: 14px !important; width: 55% !important; margin-bottom: 4px; }
.skel-col .skel-card { height: 92px; background-image: linear-gradient(90deg, var(--surface, #fff) 0%, var(--hover, #eef5e0) 50%, var(--surface, #fff) 100%); }

.skel-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.skel-cal-head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
.skel-cal-head .skel-line { width: 60%; height: 10px; margin: 0 auto; }
.skel-cal-cell { height: 84px; padding: 8px; }
.skel-cal-cell .skel-line { width: 30%; height: 10px; background: rgba(255, 255, 255, .7); animation: none; }

.skel-detail, .skel-dash, .skel-form { display: flex; flex-direction: column; gap: 18px; }
.skel-hero { display: flex; flex-direction: column; gap: 10px; }
.skel-hero .skel-line:last-child { width: 28%; }
.skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skel-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.skel-field { display: flex; flex-direction: column; gap: 6px; }
.skel-field .skel-box { height: 40px; }
@media (max-width: 880px) {
  .skel-grid { grid-template-columns: repeat(2, 1fr); }
  .skel-two { grid-template-columns: 1fr; }
  .skel-thead, .skel-row { grid-template-columns: 2fr 1fr 1fr; }
  .skel-thead .skel-line:nth-child(n+4), .skel-row .skel-line:nth-child(n+4) { display: none; }
  .skel-cal-cell { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .skel-box, .skel-cal-cell, .skel-col .skel-card { animation: none; opacity: .75; }
}

/* ---------- navigation progress bar ---------- */
.emerge-nav-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-green, #9ccb47), var(--primary, #7eb12c));
  z-index: 1200; pointer-events: none; opacity: 0;
  transition: width .25s ease, opacity .3s ease;
}
.emerge-nav-progress.is-active { opacity: 1; animation: emerge-nav-progress 9s cubic-bezier(.1, .8, .2, 1) forwards; }
.emerge-nav-progress.is-done { width: 100%; opacity: 0; animation: none; }
@keyframes emerge-nav-progress {
  0% { width: 0; }
  15% { width: 45%; }
  50% { width: 80%; }
  100% { width: 94%; }
}
html.emerge-navigating .content > .skel { animation: fade-in var(--t-med, .25s) var(--ease, ease); }
@media (prefers-reduced-motion: reduce) {
  .emerge-nav-progress.is-active { animation: none; width: 60%; }
}

/* ---------- network status pill ---------- */
.emerge-net-pill {
  position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 1100;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: min(92vw, 420px);
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong, #d2d6e0);
  background: var(--surface, #fff); color: var(--text, #060505);
  font: 500 13px/1.3 inherit; font-family: inherit;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .28);
  cursor: pointer; text-align: start;
  animation: emerge-pill-in .22s ease;
}
.emerge-net-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--muted, #6b7280);
}
.emerge-net-pill.is-down::before { background: #d97706; animation: emerge-pill-blink 1.2s ease-in-out infinite; }
.emerge-net-pill.is-sync::before, .emerge-net-pill.is-pending::before { background: #2563eb; }
.emerge-net-pill.is-sync::before { animation: emerge-pill-blink 1s ease-in-out infinite; }
.emerge-net-pill.is-ok::before { background: var(--green, #16a34a); }
.emerge-net-pill.is-failed::before, .emerge-net-pill.is-auth::before { background: #dc2626; }
.emerge-net-pill[hidden] { display: none !important; }
@keyframes emerge-pill-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes emerge-pill-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 880px) {
  .emerge-net-pill { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 12px; font-size: 12.5px; }
}
@media print { .emerge-net-pill, .emerge-net-panel, .emerge-net-toast, .emerge-nav-progress { display: none !important; } }

.emerge-net-panel {
  position: fixed; bottom: 62px; inset-inline-start: 18px; z-index: 1101;
  width: min(92vw, 380px); max-height: 60vh; overflow: auto;
  background: var(--surface, #fff); border: 1px solid var(--border-strong, #d2d6e0); border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .35); padding: 10px 12px; font-size: 13px;
}
.emerge-net-panel-head { font-weight: 600; padding: 4px 4px 8px; }
.emerge-net-panel-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 4px; border-top: 1px solid var(--border, #e6e8ee); align-items: center; }
.emerge-net-panel-item .lbl { font-weight: 600; grid-column: 1; }
.emerge-net-panel-item .why { color: var(--text-2, #334155); grid-column: 1; overflow-wrap: anywhere; }
.emerge-net-panel-item .when { color: var(--muted, #6b7280); font-size: 11.5px; grid-column: 1; direction: ltr; text-align: start; }
.emerge-net-panel-item button { grid-column: 2; grid-row: 1 / span 3; }

.emerge-net-toast {
  position: fixed; bottom: 62px; inset-inline-start: 18px; z-index: 1102;
  max-width: min(92vw, 420px); padding: 10px 14px; border-radius: 12px;
  background: #0f172a; color: #f8fafc; font-size: 13px; line-height: 1.45;
  box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .5);
}
.emerge-net-toast[hidden] { display: none !important; }

/* a submit button held by the form gate */
button.is-reconnecting, input.is-reconnecting { opacity: .75; cursor: progress; }

/* a card whose write is still in flight or waiting in the outbox */
.emerge-pending { opacity: .55; pointer-events: none; transition: opacity .2s ease; }

/* ==== mobile_polish.css (emerge app, /static) ==== */
/* Phase 30 Day 1 — iOS-like polish for the Emerge Systems mobile PWA.
 *
 * Loads AFTER mobile.css so these rules win on small viewports. The
 * goal is to make the existing infrastructure (PWA shell, bottom tab
 * bar, mobile components) feel native: refined typography, smooth
 * spring-style press feedback, soft shadows, iOS-style segmented
 * controls, and bottom-sheet modals.
 *
 * Everything is scoped to @media (max-width: 768px) so desktop pages
 * are untouched. Where iOS conventions diverge from Android, we lean
 * iOS — the user is on iPhone.
 */

@media (max-width: 768px) {

  /* ── Premium typography ──────────────────────────────────── */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  body,
  .card,
  .pulse-page,
  .mobile-tabbar {
    letter-spacing: -0.005em;
  }
  h1, h2, h3, .h-title {
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  /* Arabic flips back to Cairo with looser letter-spacing because
     condensed glyphs look cramped on small viewports. */
  [dir="rtl"] body,
  [lang="ar"] body {
    letter-spacing: 0;
  }

  /* ── Soft, layered shadows on cards ──────────────────────── */
  .card,
  .panel,
  .modal,
  .sheet {
    box-shadow:
      0 1px 2px rgba(15, 23, 42, .04),
      0 4px 12px rgba(15, 23, 42, .04);
    border-radius: 14px;
  }
  /* Hairline borders — half-px on retina, 1px elsewhere. */
  .card,
  .panel,
  table.br-table,
  .input,
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(15, 23, 42, .12);
  }

  /* ── Active-state spring on tappable elements ─────────────── */
  .btn,
  button:not([disabled]),
  a.btn,
  .pill,
  .chip,
  .mobile-tabbar a {
    transition: transform .12s cubic-bezier(.2, .8, .2, 1),
                opacity .12s ease,
                background-color .12s ease;
    will-change: transform;
  }
  .btn:active,
  button:not([disabled]):active,
  a.btn:active,
  .pill:active,
  .chip:active,
  .mobile-tabbar a:active {
    transform: scale(0.97);
    opacity: 0.85;
  }

  /* ── iOS-style segmented control ─────────────────────────── */
  .ios-segment {
    background: #e9e9eb;
    border-radius: 9px;
    padding: 2px;
    display: flex;
    gap: 2px;
    -webkit-user-select: none;
    user-select: none;
  }
  .ios-segment > button,
  .ios-segment > a {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 8px 12px;
    border-radius: 7px;
    font-weight: 500;
    font-size: 13.5px;
    color: #3a3a3c;
    transition: all .15s;
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
    min-height: 30px;
  }
  .ios-segment > button.active,
  .ios-segment > a.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow:
      0 1px 1px rgba(15, 23, 42, .04),
      0 3px 8px rgba(15, 23, 42, .08);
  }
  .ios-segment > button:active,
  .ios-segment > a:active {
    transform: scale(0.96);
  }

  /* ── Sheet-style modals (slide up from bottom) ───────────── */
  .sheet,
  .modal.sheet,
  .modal--sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px;
    /* Honor iOS safe area at the bottom. */
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
    max-height: 85vh;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, .18);
  }
  .sheet.is-open,
  .modal.sheet.is-open,
  .modal--sheet.is-open {
    transform: translateY(0);
  }
  /* Drag handle visual cue on sheets. */
  .sheet::before,
  .modal--sheet::before {
    content: "";
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #d1d5db;
    margin: -8px auto 12px;
  }

  /* ── Safe-area honored everywhere ────────────────────────── */
  .mobile-tabbar {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* ── Offline indicator bar — DISABLED by operator request.
     Kept selector so any cached JS that injects the element can't
     paint it. */
  #mp-offline-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ── Biometric prompt banner (rendered by mobile_polish.js) */
  .mp-biometric-banner {
    background: #ffffff;
    border: 0.5px solid rgba(15, 23, 42, .12);
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow:
      0 1px 3px rgba(15, 23, 42, .05),
      0 8px 24px rgba(15, 23, 42, .14);
    animation: mp-slide-up .32s cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes mp-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ── Visit check-in button on deal/lead detail ───────────── */
  .mp-visit-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    border: 0.5px solid rgba(15, 23, 42, .08);
    font-weight: 500;
    font-size: 13.5px;
    text-decoration: none;
    transition: all .15s;
  }
  .mp-visit-checkin-btn:active {
    transform: scale(0.97);
    background: #e2e8f0;
  }
  .mp-visit-checkin-btn .ic {
    font-size: 16px;
  }

  /* ── Form inputs feel iOS-grouped ────────────────────────── */
  .input,
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 15.5px;   /* iOS focus-zoom threshold is < 16px */
    background: #ffffff;
  }
  input[type="search"] {
    background: #f1f5f9;
    border-color: transparent;
  }

  /* ── Lists: iOS-style grouped rows on simple panels ──────── */
  .ios-grouped-list {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 0.5px solid rgba(15, 23, 42, .08);
  }
  .ios-grouped-list > * {
    border-bottom: 0.5px solid rgba(15, 23, 42, .08);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ios-grouped-list > *:last-child {
    border-bottom: 0;
  }

  /* ── Smooth momentum scrolling on any scrollable container */
  .scroll,
  .modal-body,
  .sheet,
  .kb-board,
  #kb-board,
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Dark-mode polish — only kicks in if the user opted into a dark theme
 * via the existing theme switcher (data-theme="dark" on <html>). */
@media (max-width: 768px) {
  [data-theme="dark"] .card,
  [data-theme="dark"] .panel,
  [data-theme="dark"] .modal {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, .4),
      0 4px 12px rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .08);
  }
  [data-theme="dark"] .ios-segment {
    background: rgba(255, 255, 255, .12);
  }
  [data-theme="dark"] .ios-segment > button.active,
  [data-theme="dark"] .ios-segment > a.active {
    background: #2c2c2e;
    color: #ffffff;
  }
}

/* ──────────────────────────────────────────────────────────
   Offline indicator bar — DISABLED at every viewport.
   This rule is intentionally OUTSIDE the @media block so it
   kills the bar on desktop too. Disabled per operator request.
   ────────────────────────────────────────────────────────── */
#mp-offline-bar,
.mp-offline-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}


/* ==== brand-fix.css (emerge app, /static) ==== */
/* =========================================================
   emerge AI systems — brand-fix.css  (auto-generated by
   apply_design_fixes.py — re-run the script to refresh)
   ---------------------------------------------------------
   Loads AFTER style.css / mobile.css / mobile_polish.css so
   these rules win the cascade. Three jobs:
     1. Kill the legacy `--brand-purple` aliases.
     2. Re-tint every haunting red glow / shadow green.
     3. Lock focus rings + primary-button to brand green.
   ========================================================= */

:root {
  /* re-alias purple → green so any straggling reference still
     resolves in-palette even after we delete the alias lines. */
  --brand-purple:   var(--brand-green);
  --brand-purple-2: var(--brand-green-2);

  /* repoint the legacy red glow token */
  --glow-red-soft:
    0 0 0 1px rgba(126, 177, 44, 0.22),
    0 0 0 4px rgba(126, 177, 44, 0.06),
    0 8px 24px rgba(126, 177, 44, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Page background — replace the red radial wash with a soft
   green one. */
html {
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%,
      rgba(156, 203, 71, 0.05),
      transparent 70%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Primary button — strip red shadow */
.btn-primary,
.pulse-btn-primary {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 4px 10px -2px rgba(126, 177, 44, 0.35) !important;
}
.btn-primary:hover,
.pulse-btn-primary:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 18px -4px rgba(126, 177, 44, 0.45) !important;
}

/* Focus rings — universal brand-green tint */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.btn:focus-visible,
[contenteditable]:focus,
.search-input:focus,
.cmd-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(156, 203, 71, 0.22) !important;
  border-color: var(--brand-green) !important;
}

/* Voice-memo recording pulse — green, not red */
.voice-memo-btn,
.vm-recording {
  box-shadow: 0 8px 24px rgba(126, 177, 44, 0.30) !important;
}

/* Soft hero/page accents that were red */
.r2-hero,
.sh-hero,
.ti-hero,
.welcome-card {
  border-color: rgba(126, 177, 44, 0.30) !important;
}

/* Suppress decorative "head-emoji" spans on the dashboard
   in case any survive the template strip. */
.head-emoji,
.dx-empty-emoji,
.cel-emoji {
  display: none !important;
}

/* KPI top-stripe — brand green (safety net) */
.kpi {
  border-block-start-color: var(--brand-green) !important;
}

/* ---------------------------------------------------------
   Fix: the global `input { ... }` rule in style.css
   (line ~2917) styles ALL inputs — including checkboxes and
   radios — as 42px-tall, 100%-width boxes with backgrounds +
   borders. That makes checkboxes look like giant empty
   squares and pushes any label text off the row. Restore
   browser defaults for checkboxes + radios so they render
   small + inline + with their natural appearance.
   --------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: initial !important;
  border: initial !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* The brand-green accent set inline (via accent-color)
     by the macros still applies — we don't touch it here. */
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid var(--brand-green) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ==== polish-3d-final.css (emerge app, /static) ==== */
/* ============================================================================
   POLISH 3D — subtle, Apple-like depth for Emerge
   ----------------------------------------------------------------------------
   Loads LAST (after style.css → mobile.css → mobile_polish.css → brand-fix.css
   → aurora.css) so its rules win the cascade. Pure visual refinement:
     • no layout changes
     • no navigation / behaviour changes
     • no palette pivot — keeps the emerge green identity
     • no i18n changes
   Only touches: card treatments, button depth, KPI numeric weight,
   dashboard widget depth, and darkens the sidebar to near-black.
   Remove this single <link> in base.html to revert.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. SIDEBAR — near-black in LIGHT mode (like the reference design).
   Dark mode already has a dark sidebar (from aurora.css). Position, width,
   brand mark, every nav-item stay exactly where they are — only surface
   tone, text/icon color, hover and active-state contrast change.
   ───────────────────────────────────────────────────────────────────────── */
:root:not([data-theme="dark"]) {
  --p3-sidebar-bg:      #2a2e33;
  --p3-sidebar-bg-2:    #33373d;
  --p3-sidebar-text:    #eef1f4;
  --p3-sidebar-muted:   #a6aeb7;
  --p3-sidebar-hover:   rgba(255, 255, 255, 0.075);
  --p3-sidebar-border:  rgba(255, 255, 255, 0.10);
  --p3-sidebar-active-bg:   rgba(156, 203, 71, 0.22);
  --p3-sidebar-active-text: #c8e486;
}

:root:not([data-theme="dark"]) .sidebar {
  background: linear-gradient(180deg, var(--p3-sidebar-bg-2) 0%, var(--p3-sidebar-bg) 100%) !important;
  border-inline-end: 1px solid var(--p3-sidebar-border) !important;
  border-right: 1px solid var(--p3-sidebar-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) .sidebar-brand,
:root:not([data-theme="dark"]) .sidebar-foot {
  border-color: var(--p3-sidebar-border) !important;
}

:root:not([data-theme="dark"]) .sidebar-brand .brand-meta {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
:root:not([data-theme="dark"]) .sidebar-brand .brand-meta small {
  color: var(--p3-sidebar-muted) !important;
  -webkit-text-fill-color: var(--p3-sidebar-muted) !important;
}

:root:not([data-theme="dark"]) .nav-section {
  color: var(--p3-sidebar-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px !important;
  padding-top: 12px !important;
}

:root:not([data-theme="dark"]) .nav-item,
:root:not([data-theme="dark"]) .nav-group-toggle,
:root:not([data-theme="dark"]) .nav-subgroup-toggle {
  color: var(--p3-sidebar-text) !important;
  border-radius: 10px !important;
}
:root:not([data-theme="dark"]) .nav-item .icon,
:root:not([data-theme="dark"]) .nav-group-toggle .icon,
:root:not([data-theme="dark"]) .nav-subgroup-toggle .icon,
:root:not([data-theme="dark"]) .nav-group-caret .icon {
  color: var(--p3-sidebar-muted) !important;
}

:root:not([data-theme="dark"]) .nav-item:hover,
:root:not([data-theme="dark"]) .nav-group-toggle:hover,
:root:not([data-theme="dark"]) .nav-subgroup-toggle:hover {
  background: var(--p3-sidebar-hover) !important;
  color: #ffffff !important;
}
:root:not([data-theme="dark"]) .nav-item:hover .icon,
:root:not([data-theme="dark"]) .nav-group-toggle:hover .icon,
:root:not([data-theme="dark"]) .nav-subgroup-toggle:hover .icon {
  color: #ffffff !important;
}

:root:not([data-theme="dark"]) .nav-item.active,
:root:not([data-theme="dark"]) .nav-group-toggle.is-active {
  background: var(--p3-sidebar-active-bg) !important;
  color: var(--p3-sidebar-active-text) !important;
  box-shadow: none !important;
}
:root:not([data-theme="dark"]) .nav-item.active .icon,
:root:not([data-theme="dark"]) .nav-group-toggle.is-active .icon {
  color: var(--p3-sidebar-active-text) !important;
}

/* Sidebar scrollbar — invert for the dark surface. */
:root:not([data-theme="dark"]) .sidebar-nav {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
:root:not([data-theme="dark"]) .sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: 3px solid transparent;
  background-clip: padding-box;
}
:root:not([data-theme="dark"]) .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
  background-clip: padding-box;
}

/* Sidebar sub-labels + captions inside groups. */
:root:not([data-theme="dark"]) .nav-item-nested {
  color: var(--p3-sidebar-text) !important;
}
:root:not([data-theme="dark"]) .nav-group-body,
:root:not([data-theme="dark"]) .nav-subgroup-body {
  border-color: var(--p3-sidebar-border) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. CARDS — premium soft 3D with larger radius (matches the reference).
   Slightly larger radius (20 px), gentle 145° gradient, layered soft shadow,
   inner top highlight, cleaner border, and a 2-3 px hover lift.
   Covers: generic .card, dashboard .dx-card / .dx-kpi / .dx-insight,
   and any explicit .dashboard-card class.
   ───────────────────────────────────────────────────────────────────────── */
html body .card,
html body .dx-card,
html body .dx-kpi,
html body .dx-insight,
html body .dashboard-card {
  border-radius: 20px !important;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .2s ease !important;
}

/* Light mode surface + depth. `html body …` raises specificity to (0,0,3,2)
   so it beats the dashboard-page inline `.dx-kpi { box-shadow: … }` rule
   even when the inline block appears later in the source. */
html body .card,
html body .dx-card,
html body .dx-kpi,
html body .dashboard-card {
  background: linear-gradient(145deg, #ffffff 0%, #fafbfd 100%) !important;
  border: 1px solid rgba(30, 50, 70, 0.06) !important;
  box-shadow:
    0 10px 28px rgba(30, 50, 70, 0.06),
    0 2px 6px  rgba(30, 50, 70, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body .card:hover,
html body .dx-card:hover,
html body .dx-kpi:hover,
html body .dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px rgba(30, 50, 70, 0.10),
    0 4px 10px rgba(30, 50, 70, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}
:root[data-theme="dark"] html body .card,
:root[data-theme="dark"] html body .dx-card,
:root[data-theme="dark"] html body .dx-kpi,
:root[data-theme="dark"] html body .dashboard-card {
  background: linear-gradient(145deg, #1a231e 0%, #151d18 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 2px 5px  rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:root[data-theme="dark"] html body .card:hover,
:root[data-theme="dark"] html body .dx-card:hover,
:root[data-theme="dark"] html body .dx-kpi:hover,
:root[data-theme="dark"] html body .dashboard-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.45),
    0 3px 8px  rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* The AI insight / action-row bar keeps its brand tint but gets the same
   depth family. In the reference design, these are pill-rounded rows with a
   left-side colored circle bubble. */
html body .dx-insight {
  background: #ffffff !important;
  border: 1px solid rgba(30, 50, 70, 0.06) !important;
  box-shadow:
    0 8px 22px rgba(30, 50, 70, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
:root[data-theme="dark"] html body .dx-insight {
  background: #151d18 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. KPI CARDS — big, bold, UNIFIED-GREEN numbers with matching bubbles.
   Selectors are prefixed with `html body` so their specificity (0,0,3,2)
   beats the dashboard.html inline `.dx-kpi.blue .dx-kpi-bubble` rules
   (0,0,3,0) even in the browser cache.
   ───────────────────────────────────────────────────────────────────────── */
html body .dx-kpi-value {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: #4d7c0f !important;         /* UNIFIED emerge green */
}
:root[data-theme="dark"] .dx-kpi-value {
  color: #c4e07a !important;         /* brighter green on the dark canvas */
}

/* Accent bubble on each KPI — UNIFIED emerge-green across every variant.
   Forces the same soft-lime fill + olive-lime icon color regardless of
   the .blue / .violet / .amber / .red / .green modifier on the parent
   .dx-kpi. Uses html body … to raise specificity above the dashboard's
   inline color-per-variant rules. */
html body .dx-kpi-bubble,
html body .dx-kpi.blue .dx-kpi-bubble,
html body .dx-kpi.violet .dx-kpi-bubble,
html body .dx-kpi.amber .dx-kpi-bubble,
html body .dx-kpi.red .dx-kpi-bubble,
html body .dx-kpi.green .dx-kpi-bubble,
html body .dx-kpi.brand .dx-kpi-bubble,
html body .dx-kpi.warn .dx-kpi-bubble {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: #ecfccb !important;   /* soft lime fill */
  color: #4d7c0f !important;        /* olive-lime icon */
  box-shadow:
    0 4px 10px rgba(126, 177, 44, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
html body .dx-kpi-bubble .icon,
html body .dx-kpi.blue .dx-kpi-bubble .icon,
html body .dx-kpi.violet .dx-kpi-bubble .icon,
html body .dx-kpi.amber .dx-kpi-bubble .icon,
html body .dx-kpi.red .dx-kpi-bubble .icon,
html body .dx-kpi.green .dx-kpi-bubble .icon,
html body .dx-kpi.brand .dx-kpi-bubble .icon,
html body .dx-kpi.warn .dx-kpi-bubble .icon {
  color: #4d7c0f !important;
}

/* Delta pill — force the brand green tint regardless of up/down/warn class
   so the entire KPI row reads as one cohesive brand-green story. */
html body .dx-kpi-delta,
html body .dx-kpi-delta.up,
html body .dx-kpi-delta.down,
html body .dx-kpi-delta.warn {
  color: #4d7c0f !important;
}
html body .dx-kpi-delta .pill,
html body .dx-kpi-delta.up .pill,
html body .dx-kpi-delta.down .pill,
html body .dx-kpi-delta.warn .pill {
  background: #ecfccb !important;
  color: #4d7c0f !important;
}

/* Dark-mode: keep the same green identity but tuned for the dark surface. */
:root[data-theme="dark"] .dx-kpi-bubble,
:root[data-theme="dark"] .dx-kpi.blue .dx-kpi-bubble,
:root[data-theme="dark"] .dx-kpi.violet .dx-kpi-bubble,
:root[data-theme="dark"] .dx-kpi.amber .dx-kpi-bubble,
:root[data-theme="dark"] .dx-kpi.red .dx-kpi-bubble {
  background: rgba(156, 203, 71, 0.16) !important;
  color: #c4e07a !important;
}
:root[data-theme="dark"] .dx-kpi-bubble .icon,
:root[data-theme="dark"] .dx-kpi.blue .dx-kpi-bubble .icon,
:root[data-theme="dark"] .dx-kpi.violet .dx-kpi-bubble .icon,
:root[data-theme="dark"] .dx-kpi.amber .dx-kpi-bubble .icon,
:root[data-theme="dark"] .dx-kpi.red .dx-kpi-bubble .icon {
  color: #c4e07a !important;
}

/* KPI delta pill — the green "↑ 12%" chip in the reference. */
.dx-kpi-delta .pill {
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. DASHBOARD WIDGET CARDS — the 3x2 grid at the bottom of the reference,
   with a large COLORED number in the middle. The .dx-card class already
   carries the raised look via block 2; here we make the count numbers
   larger, weightier, and tint them by card accent if the template has an
   `.accent-*` modifier. We DO NOT change the DOM — this only enhances what
   the existing dashboard already emits.
   ───────────────────────────────────────────────────────────────────────── */
html body .dx-card .dx-card-head h3 {
  font-size: 14px !important;
  color: var(--w-ink-3, #78716c) !important;
  font-weight: 500 !important;
}
html body .dx-card .head-count {
  font-family: 'Geist', 'Onest', sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  color: #4d7c0f !important;              /* UNIFIED emerge green */
  margin-inline-start: 0 !important;
  display: block !important;
  padding: 6px 0 4px !important;
  font-variant-numeric: tabular-nums !important;
  direction: ltr !important;
}
:root[data-theme="dark"] html body .dx-card .head-count {
  color: #c4e07a !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. BUTTONS — subtle 3D.
   • current emerge color remains (primary keeps its green gradient)
   • small bottom shadow (chunky feel)
   • soft outer drop
   • pressed state moves DOWN 2 px
   • 10 px radius, no glow spam
   ───────────────────────────────────────────────────────────────────────── */
.btn,
button.btn,
a.btn {
  border-radius: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 3px 0  rgba(0, 0, 0, 0.06),
    0 6px 14px rgba(0, 0, 0, 0.05);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease !important;
}
.btn:hover,
button.btn:hover,
a.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0  rgba(0, 0, 0, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.07) !important;
}
.btn:active,
button.btn:active,
a.btn:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0  rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Primary button — keep aurora's green gradient but layer the 3D shadow. */
.btn-primary,
.btn.btn-primary,
button.primary,
.btn.primary,
.dx-head-btn.primary,
.dx-empty-cta,
.dx-insight-cta {
  border-radius: 10px !important;
  border: 1px solid rgba(126, 177, 44, 0.55);
  box-shadow:
    0 3px 0  rgba(85, 122, 24, 0.32),
    0 6px 16px rgba(126, 177, 44, 0.26) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
button.primary:hover,
.btn.primary:hover,
.dx-head-btn.primary:hover,
.dx-empty-cta:hover,
.dx-insight-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0  rgba(85, 122, 24, 0.28),
    0 12px 24px rgba(126, 177, 44, 0.34) !important;
}
.btn-primary:active,
.btn.btn-primary:active,
button.primary:active,
.btn.primary:active,
.dx-head-btn.primary:active,
.dx-empty-cta:active,
.dx-insight-cta:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0  rgba(85, 122, 24, 0.28),
    0 3px 8px rgba(126, 177, 44, 0.22) !important;
}

/* Dark-mode shadow palette — the light-mode drops disappear on a dark canvas,
   so we swap to blacker tones with the same 3D contract. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] button.btn,
:root[data-theme="dark"] a.btn {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 3px 0  rgba(0, 0, 0, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.30);
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] button.btn:hover,
:root[data-theme="dark"] a.btn:hover {
  box-shadow:
    0 5px 0  rgba(0, 0, 0, 0.4),
    0 10px 20px rgba(0, 0, 0, 0.35) !important;
}
:root[data-theme="dark"] .btn:active,
:root[data-theme="dark"] button.btn:active,
:root[data-theme="dark"] a.btn:active {
  box-shadow:
    0 1px 0  rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. TOPBAR — quieter, matches the reference look (crisp white surface,
   pill search, subtle icon buttons).
   ───────────────────────────────────────────────────────────────────────── */
:root:not([data-theme="dark"]) .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(30, 50, 70, 0.06) !important;
  box-shadow: 0 1px 0 rgba(30, 50, 70, 0.02) !important;
}
:root:not([data-theme="dark"]) .topbar-search {
  background: #f6f7f5 !important;
  border: 1px solid rgba(30, 50, 70, 0.05) !important;
}
:root:not([data-theme="dark"]) .lang-toggle,
:root:not([data-theme="dark"]) .theme-toggle,
:root:not([data-theme="dark"]) .icon-btn {
  border: 1px solid rgba(30, 50, 70, 0.06) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. LAYOUT — fixed full-width sidebar + clean apple-green content bg.
   ─────────────────────────────────────────────────────────────────────────
   Prod's base style.css paints the emerge-brain SVG as a huge fixed
   watermark via `body::before`. The reference design is clean and minimal,
   so we suppress it. Prod's `.app.sidebar-rail` class collapses the
   sidebar to a 64 px icon rail that only expands on hover; the reference
   shows the FULL-WIDTH sidebar always visible and completely stationary
   while the content area scrolls. We achieve that by overriding the
   sidebar-rail rules — no template / DOM change. Every rule is scoped
   with `html body` so it beats the base style.css cascade.
   ───────────────────────────────────────────────────────────────────────── */

/* Kill the fullpage brain silhouette watermark. */
html body::before {
  display: none !important;
  content: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* ── Root background ──────────────────────────────────────────────────────
   Prod's style.css paints `html` with a radial gradient on top of
   `var(--bg)` (= #f6f7fb, near-white) using `background-attachment: fixed`.
   `body` is transparent, so the near-white html surface shows through —
   that's the white area that appears when scrolling past the last card.
   Override the --bg token AND html's own background so the SAME cohesive
   soft-green paints the entire page under every layout container, no
   matter how tall the content grows. */
:root {
  --bg: #eaf1d9 !important;
  --page-bg: #eaf1d9;
  --card-bg: #ffffff;
  --card-border: rgba(30, 50, 70, 0.06);
  --card-shadow: 0 10px 28px rgba(30, 50, 70, 0.06),
                 0 2px 6px rgba(30, 50, 70, 0.03),
                 inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --muted-text-ink: #6a7462;
}
:root[data-theme="dark"] {
  --bg: #0e1311 !important;
  --page-bg: #0e1311;
  --card-bg: #151d18;
  --card-border: rgba(255, 255, 255, 0.06);
}

/* Paint every layer that could show through with the same page-bg so
   scrolling never reveals a near-white surface underneath. */
html,
html body,
html body .app,
html body .main,
html body .content {
  background: var(--page-bg) !important;
}
html {
  /* Kill the fixed radial that painted the near-white top glow. */
  background-image: none !important;
  background-attachment: scroll !important;
  min-height: 100vh;
}
:root[data-theme="dark"] html,
:root[data-theme="dark"] html body,
:root[data-theme="dark"] html body .app,
:root[data-theme="dark"] html body .main,
:root[data-theme="dark"] html body .content {
  background: var(--page-bg) !important;
}

/* Desktop-only: expand the sidebar to its full 256 px width AND freeze it
   in place. On mobile (< 881 px) the existing drawer behaviour is left
   alone, so nothing changes for phones. */
@media (min-width: 881px) {
  html body .app,
  html body .app.sidebar-rail {
    grid-template-columns: var(--sidebar-w, 256px) 1fr !important;
  }

  /* The .sidebar is already position:fixed in rail mode; keep that (so it
     stays visible on scroll) but restore its full 256 px width. In RTL
     `inset-inline-start` resolves to `right`, so the sidebar is pinned to
     the right edge — matching the reference. */
  html body .app.sidebar-rail .sidebar {
    position: fixed !important;
    top: 0 !important;
    inset-inline-start: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-w, 256px) !important;
    z-index: 25 !important;
    transition: none !important;
    box-shadow: none !important;
  }

  /* The base rail rules HIDE the labels / section captions / group bodies
     when the sidebar isn't hovered; reverse that so everything is ALWAYS
     visible, matching the reference. */
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .brand-meta,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-section,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item .label,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-subgroup,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-group-body,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-group-caret,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot .user-meta,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot form,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot>a+a {
    display: revert !important;
  }

  /* And un-center the collapsed layout so items align with the labels. */
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-foot,
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-brand {
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    gap: 12px !important;
  }
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item-box {
    padding: 8px 12px !important;
  }
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .nav-item-nested {
    padding-inline-start: 24px !important;
  }
  /* Restore the sidebar-brand's original left/right padding for the logo. */
  html body .app.sidebar-rail .sidebar:not(:hover):not(:focus-within) .sidebar-brand {
    padding: 0 16px !important;
    gap: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   8. CRM-INSIGHTS DASHBOARD (crm_insights/dashboard_view.html)
   The emerge Home dashboard is built with `.iv-*` and `.hz-*` classes,
   NOT the `.dx-*` ones we styled above. Its per-widget accent color comes
   from `var(--accent, #6366f1)` set inline on each widget. Override so
   EVERY value renders in the unified emerge green, and so the widget
   containers pick up the same soft-3D card treatment as the rest of the
   design system. Highest-specificity selectors so we beat every inline
   variable and per-widget style.
   ───────────────────────────────────────────────────────────────────────── */

/* ── KPI widgets — force ONE unified green for every numeric value ── */
html body .iv-kpi .value,
html body .iv-kpi-value,
html body .iv-leader-value,
html body .hz-kpi-value,
html body .hz-kpi-value .cur,
html body .iv-bar-value,
html body .iv-bar-fill {
  color: #4d7c0f !important;
}
html body .iv-bar-fill {
  background: linear-gradient(90deg, #9ccb47 0%, #7eb12c 100%) !important;
}
:root[data-theme="dark"] html body .iv-kpi .value,
:root[data-theme="dark"] html body .iv-kpi-value,
:root[data-theme="dark"] html body .iv-leader-value,
:root[data-theme="dark"] html body .hz-kpi-value,
:root[data-theme="dark"] html body .hz-kpi-value .cur {
  color: #c4e07a !important;
}

/* Uniform accent variable — every widget inherits the emerge green,
   removing the per-widget blue / violet / orange randomness. */
html body .iv-widget,
html body .iv-kpi,
html body .hz-kpi {
  --accent: #4d7c0f !important;
}

/* ── iv-widget CONTAINERS — pronounced soft-3D white cards ── */
html body .iv-widget {
  background: linear-gradient(160deg, #ffffff 0%, #f6f9ef 100%) !important;
  border: 1px solid rgba(30, 50, 70, 0.07) !important;
  border-radius: 18px !important;
  box-shadow:
    0 14px 34px -8px rgba(30, 50, 70, 0.10),
    0 4px 10px rgba(30, 50, 70, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow: hidden;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .2s ease !important;
}
html body .iv-widget:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 46px -10px rgba(30, 50, 70, 0.14),
    0 6px 14px rgba(30, 50, 70, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(126, 177, 44, 0.30) !important;
}
:root[data-theme="dark"] html body .iv-widget {
  background: linear-gradient(145deg, #1a231e 0%, #151d18 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Widget head — quieter, less contrasty than the default gray strip. */
html body .iv-widget-head {
  background: transparent !important;
  border-bottom: 1px solid rgba(30, 50, 70, 0.05) !important;
  padding: 12px 16px !important;
}
html body .iv-widget-title {
  /* 13.5px was smaller than the body text it introduced. Kept !important
     because the whole file is; the board template states 16px too, so the
     two agree instead of fighting. */
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--muted-text-ink, #6a7462) !important;
}

/* KPI values — bigger, more prominent, unified emerge green. */
html body .iv-kpi {
  padding: 20px 14px !important;
}
html body .iv-kpi .value {
  font-family: 'Geist', 'Onest', sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
html body .iv-kpi .sub {
  color: var(--muted-text-ink, #6a7462) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}

/* ── hz-KPI top row (the 4 cards in the reference) ── */
html body .hz-kpi {
  background: linear-gradient(160deg, #ffffff 0%, #f4f8ec 100%) !important;
  border: 1px solid rgba(30, 50, 70, 0.07) !important;
  border-radius: 20px !important;
  box-shadow:
    0 16px 40px -10px rgba(30, 50, 70, 0.11),
    0 4px 10px rgba(30, 50, 70, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  padding: 22px 24px !important;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .2s ease !important;
}
html body a.hz-kpi:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 52px -12px rgba(30, 50, 70, 0.15),
    0 6px 14px rgba(30, 50, 70, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(126, 177, 44, 0.30) !important;
}
html body .hz-kpi-label {
  font-size: 13px !important;
  color: var(--muted-text-ink, #6a7462) !important;
  font-weight: 500 !important;
}
html body .hz-kpi-value {
  font-family: 'Geist', 'Onest', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: #0f172a !important;
  margin-top: 6px !important;
}

/* ── hz-feed (action rows) — raised pill-row card ── */
html body .hz-feed {
  background: linear-gradient(160deg, #ffffff 0%, #f6f9ef 100%) !important;
  border: 1px solid rgba(30, 50, 70, 0.07) !important;
  border-radius: 18px !important;
  box-shadow:
    0 14px 34px -10px rgba(30, 50, 70, 0.09),
    0 4px 10px rgba(30, 50, 70, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  overflow: hidden;
}
html body .hz-feed-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6),
              0 4px 10px rgba(126, 177, 44, 0.18) !important;
}
html body .hz-feed-item {
  transition: background .12s ease;
}
html body .hz-feed-item:hover {
  background: #f5faf1 !important;
}

/* Trend delta badges — soft-green regardless of direction (unified feel). */
html body .hz-delta,
html body .hz-delta.up,
html body .hz-delta.flat,
html body .hz-delta.down {
  background: rgba(156, 203, 71, 0.16) !important;
  color: #4d7c0f !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. WIDGET INLINE `--accent` OVERRIDE (belt & suspenders).
   `crm_insights/dashboard_view.html` renders each widget with an inline
   `style="--accent: #7c3aed;"` (or blue / orange / green) that drives the
   value color via `color: var(--accent, #6366f1)`. Some browsers give the
   inline custom-property higher precedence than an author `!important` on
   the same property, so we also override the CONSUMING rule directly with
   `[style*="--accent"]` selectors to force the unified emerge green
   regardless of the widget's per-instance accent choice.
   ───────────────────────────────────────────────────────────────────────── */
html body .iv-widget[style*="--accent"],
html body .iv-widget[style*="--accent"] * {
  --accent: #4d7c0f !important;
}
html body .iv-widget[style*="--accent"] .iv-kpi .value,
html body .iv-widget[style*="--accent"] .value,
html body .iv-widget[style*="--accent"] .iv-leader-value,
html body .iv-widget[style*="--accent"] .iv-bar-value {
  color: #4d7c0f !important;
}
html body .iv-widget[style*="--accent"] .iv-bar-fill {
  background: linear-gradient(90deg, #9ccb47 0%, #7eb12c 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. NAV-GROUP TOGGLES — RTL fixes for the Accounting / HR sub-groups.
   Prod's style.css hard-codes `text-align: left` and `left: 0` on the
   active-state accent bar. In RTL those anchor to the WRONG edge; use
   logical properties so the toggle text aligns with the label and the
   accent bar sits on the inline-start edge (i.e. RIGHT in RTL).
   ───────────────────────────────────────────────────────────────────────── */
html body .nav-group-toggle,
html body .nav-subgroup-toggle {
  text-align: start !important;
}
html body .nav-group.has-active > .nav-group-toggle::before {
  left: auto !important;
  right: auto !important;
  inset-inline-start: 0 !important;
}
/* Nav labels: they inherit the parent's alignment. Make sure they hug
   the label side and never accidentally center under the label. */
html body .nav-item .label,
html body .nav-group-toggle .label,
html body .nav-subgroup-toggle .label {
  text-align: start !important;
}
/* In RTL, put the caret on the LEFT (opposite of the label). Flex ordering
   already handles this in most browsers, but be explicit so the chevron
   stays fixed on the far inline-end side regardless of language. */
[dir="rtl"] html body .nav-group-caret,
html[dir="rtl"] body .nav-group-caret {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FINAL POLISH — unified modern Arabic typography.
   Force ONE Arabic font family across every UI surface (sidebar, dashboard,
   cards, buttons, tables, inputs, modals). Prod already loads Cairo via the
   Google Fonts <link>; here we make it the CANONICAL Arabic face everywhere
   by raising specificity so no component-scoped CSS wins its own font.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --font-ar: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'Onest', 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-num: 'Geist', 'Onest', 'Cairo', system-ui, sans-serif;
  --t-fast: 150ms;
  --t-med: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

html body,
html body input,
html body textarea,
html body select,
html body button,
html body .btn,
html body .nav-item,
html body .nav-group-toggle,
html body .nav-subgroup-toggle,
html body .sidebar-brand,
html body .brand-meta,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .topbar h1,
html body .card, html body .card-header, html body .card-body,
html body .hz-kpi, html body .hz-kpi-label, html body .hz-kpi-value,
html body .iv-widget, html body .iv-widget-title, html body .iv-kpi, html body .iv-kpi .value,
html body .dx-card, html body .dx-card-head, html body .dx-kpi,
html body .hz-feed, html body .hz-feed-text, html body .hz-feed-meta,
html body table, html body th, html body td,
html body label, html body .form-label,
html body .dropdown, html body .modal,
html body .tag, html body .badge, html body .pill {
  font-family: var(--font-ar) !important;
}

/* Numbers keep Geist for their tabular numerals — but only for pure-number
   cells so Arabic labels stay in Cairo. */
html body .hz-kpi-value,
html body .iv-kpi .value,
html body .dx-kpi-value,
html body .dx-card .head-count,
html body .mono,
html body [data-numeric] {
  font-family: var(--font-num) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Arabic body sizing — Cairo runs slightly denser than Onest, so lift
   line-height a touch for readability. */
html[lang="ar"] body,
html[dir="rtl"] body {
  line-height: 1.6;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. SIDEBAR ICONS — MUCH larger + wrapped in a rounded chip so they read
   as real interactive targets rather than tiny decorations. Highest
   specificity + !important guarantees the base 16 px rule loses.
   ───────────────────────────────────────────────────────────────────────── */
html body .app .sidebar .nav-item,
html body .app .sidebar .nav-group-toggle,
html body .app .sidebar .nav-subgroup-toggle {
  min-height: 44px !important;
}

html body .app .sidebar .nav-item .icon,
html body .app .sidebar .nav-group-toggle .icon,
html body .app .sidebar .nav-subgroup-toggle .icon,
html body .app.sidebar-rail .sidebar .nav-item .icon,
html body .app.sidebar-rail .sidebar .nav-group-toggle .icon,
html body .app.sidebar-rail .sidebar .nav-subgroup-toggle .icon {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
  flex-shrink: 0 !important;
  padding: 4px !important;
  box-sizing: content-box !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition:
    color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out) !important;
}

/* Primary Dashboard icon — hero-sized + always framed in the emerge green
   tile so the "home" anchor is instantly visible. */
html body .app .sidebar .nav-item-box .icon,
html body .app.sidebar-rail .sidebar .nav-item-box .icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2 !important;
  padding: 5px !important;
  background: rgba(156, 203, 71, 0.20) !important;
  color: #c4e07a !important;
  border-radius: 12px !important;
}

/* ── FIX: .nav-item-box (the "featured" Dashboard button) is set to
   `background: var(--surface-2)` in style.css — a light off-white token
   that renders as a bright white block INSIDE our dark sidebar. Override
   the box to match the sidebar surface so it doesn't punch a white hole
   in the top of the sidebar; the active state keeps its green pill.

   ⚠ SELECTOR SHAPE — do NOT write `:root:not(...) html body ...` here.
   `:root` IS the <html> element, so a descendant `html` after it asks for
   an <html> nested inside <html>, which can never exist: the whole block
   goes dead and the white box comes back on every non-dashboard page
   (the Dashboard button only looked right while `.active` was on it).
   Start from `:root:not(...)` and go straight to `body`. */
:root:not([data-theme="dark"]) body .app .sidebar .nav-item-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--p3-sidebar-text) !important;
  box-shadow: none !important;
}
:root:not([data-theme="dark"]) body .app .sidebar .nav-item-box:hover {
  background: rgba(156, 203, 71, 0.10) !important;
  border-color: rgba(156, 203, 71, 0.30) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}
:root:not([data-theme="dark"]) body .app .sidebar .nav-item-box.active {
  background: linear-gradient(90deg, rgba(156,203,71,.28) 0%, rgba(156,203,71,.18) 100%) !important;
  border-color: rgba(156, 203, 71, 0.40) !important;
  color: #d9ec9a !important;
  box-shadow: inset 0 0 0 1px rgba(196, 224, 122, 0.16) !important;
}
:root:not([data-theme="dark"]) body .app .sidebar .nav-item-box.active .icon {
  background: rgba(156, 203, 71, 0.35) !important;
  color: #ffffff !important;
}

/* Nested (sub-group) icons: 18 px so the visual hierarchy holds. */
html body .app .sidebar .nav-item-nested .icon,
html body .app.sidebar-rail .sidebar .nav-item-nested .icon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.75 !important;
  padding: 3px !important;
  background: transparent !important;
  border-radius: 8px !important;
}

/* Caret chevrons for group toggles — clear rotate animation. */
html body .app .sidebar .nav-group-caret .icon,
html body .app.sidebar-rail .sidebar .nav-group-caret .icon {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 2.5 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Hover treatment on the icon chip — the whole chip glows soft-lime. */
:root:not([data-theme="dark"]) html body .app .sidebar .nav-item:hover .icon,
:root:not([data-theme="dark"]) html body .app .sidebar .nav-group-toggle:hover .icon,
:root:not([data-theme="dark"]) html body .app .sidebar .nav-subgroup-toggle:hover .icon {
  background: rgba(156, 203, 71, 0.14) !important;
  color: #c4e07a !important;
  transform: scale(1.06);
}

/* Active nav item — pronounced green chip behind the icon. */
:root:not([data-theme="dark"]) html body .app .sidebar .nav-item.active .icon,
:root:not([data-theme="dark"]) html body .app .sidebar .nav-group-toggle.is-active .icon {
  background: rgba(156, 203, 71, 0.28) !important;
  color: #d9ec9a !important;
  box-shadow: 0 4px 10px rgba(126, 177, 44, 0.20) !important;
}

/* Inactive icons: quiet muted-warm grey so the Arabic label carries. */
:root:not([data-theme="dark"]) html body .sidebar .nav-item .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-group-toggle .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-subgroup-toggle .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-group-caret .icon {
  color: #98a29a !important;
  opacity: 1 !important;
}

/* Hover: brighten to soft-lime, small rightward nudge in RTL for feedback. */
:root:not([data-theme="dark"]) html body .sidebar .nav-item:hover .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-group-toggle:hover .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-subgroup-toggle:hover .icon {
  color: #c4e07a !important;
}

/* Active: the emerge brand green, matches the pill highlight. */
:root:not([data-theme="dark"]) html body .sidebar .nav-item.active .icon,
:root:not([data-theme="dark"]) html body .sidebar .nav-group-toggle.is-active .icon {
  color: #c4e07a !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. SIDEBAR SPACING & HIERARCHY — modern breathing room.
   ───────────────────────────────────────────────────────────────────────── */
html body .sidebar-nav {
  padding: 12px 10px 80px !important;
  gap: 3px !important;
}
html body .nav-section {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 12px 6px !important;
  margin-top: 4px;
  opacity: 0.7;
}
html body .nav-item,
html body .nav-group-toggle,
html body .nav-subgroup-toggle {
  padding: 10px 14px !important;
  gap: 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out) !important;
}
html body .nav-item-nested {
  padding: 8px 14px 8px 32px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
[dir="rtl"] html body .nav-item-nested,
html[dir="rtl"] body .nav-item-nested {
  padding: 8px 32px 8px 14px !important;
}

/* Active pill — pronounced but elegant. */
:root:not([data-theme="dark"]) html body .nav-item.active {
  background: linear-gradient(90deg, rgba(156,203,71,.22) 0%, rgba(156,203,71,.14) 100%) !important;
  color: #c4e07a !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(196, 224, 122, 0.14) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. GLOBAL TRANSITION SYSTEM — every interactive surface uses the same
   fast, quiet cubic-bezier so the app feels like ONE product.
   ───────────────────────────────────────────────────────────────────────── */
html body .btn,
html body button,
html body a.btn,
html body .icon-btn,
html body .lang-toggle,
html body .theme-toggle,
html body .hz-kpi,
html body .iv-widget,
html body .card,
html body .dx-card,
html body .dx-kpi,
html body .hz-feed-item,
html body .nav-item,
html body .nav-group-toggle,
html body .nav-subgroup-toggle {
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    transform var(--t-med) var(--ease-out) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. TOPBAR — breadcrumb + language pill polish (matches highlight in
   the reference screenshot's yellow-circled area).
   ───────────────────────────────────────────────────────────────────────── */
html body .topbar h1,
html body .topbar .crumb {
  font-family: var(--font-ar) !important;
  font-weight: 700 !important;
  color: #0f172a;
  letter-spacing: 0;
}
html body .topbar .lang-toggle,
html body .topbar .theme-toggle,
html body .topbar .icon-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(30, 50, 70, 0.08) !important;
  background: #ffffff !important;
  padding: 8px 14px !important;
  min-height: 40px;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out) !important;
}
html body .topbar .lang-toggle:hover,
html body .topbar .theme-toggle:hover,
html body .topbar .icon-btn:hover {
  background: #f5faf1 !important;
  border-color: rgba(126, 177, 44, 0.30) !important;
  box-shadow: 0 4px 10px rgba(126, 177, 44, 0.08) !important;
}
html body .topbar-search {
  border-radius: 12px !important;
  border: 1px solid rgba(30, 50, 70, 0.08) !important;
  box-shadow: 0 1px 2px rgba(30, 50, 70, 0.03) !important;
}
html body .topbar-search:focus-within {
  border-color: rgba(126, 177, 44, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(156, 203, 71, 0.12) !important;
}

/* Reduced-motion users get the color/shadow, not the lift. */
@media (prefers-reduced-motion: reduce) {
  .card, .dx-card, .dx-kpi, .dx-insight, .dashboard-card,
  .btn, button.btn, a.btn,
  .btn-primary, .btn.btn-primary, button.primary,
  .dx-head-btn.primary, .dx-empty-cta, .dx-insight-cta {
    transition: none !important;
  }
  .card:hover, .dx-card:hover, .dx-kpi:hover, .dashboard-card:hover,
  .btn:hover, button.btn:hover, a.btn:hover,
  .btn-primary:hover, .btn.btn-primary:hover, button.primary:hover,
  .dx-head-btn.primary:hover, .dx-empty-cta:hover, .dx-insight-cta:hover {
    transform: none !important;
  }
}


/* ===== DEALS BOARD - dashboard card skin ===== */
/* ----------------------------------------------------------------------------
   The deals board (templates/deals/preview_v2.html) ships its own Stripe-derived
   palette scoped to .dv2-shell: near-white ground, 10px radii, flat hairline card
   shadows, uppercase micro-cap labels. Next to this tenant's home dashboard —
   16/20px radii, soft-green rims, embossed surfaces, sentence-case labels, 32px
   values, a green glyph tile per KPI — it reads as a second design.

   This section re-dresses the board's two card families (the KPI rail and the
   kanban deal cards) in the dashboard's language. Presentation only: no layout
   reflow, no markup, no behaviour. Every card in the board's markup carries its
   look in an inline style="" attribute, which is why these declarations need
   !important - that is the only way a stylesheet can reach them.
   -------------------------------------------------------------------------- */
html body .dv2-shell {
  --dsk-surface:      #ffffff;
  --dsk-ink:          #17211b;
  --dsk-ink-2:        #5c6b62;
  --dsk-ink-3:        #97a49c;
  --dsk-line-soft:    #f2f6f3;
  --dsk-green:        #2f7d4c;
  --dsk-green-d:      #23603a;
  --dsk-green-soft:   #e9f4ec;
  --dsk-green-soft-2: #f4faf5;
  --dsk-r:            20px;
  --dsk-r-md:         16px;
  --dsk-r-sm:         12px;
  --dsk-shadow-sm:    0 1px 2px rgba(23,33,27,.05), 0 4px 12px rgba(23,33,27,.04);
  --dsk-shadow:       0 1px 2px rgba(23,33,27,.04), 0 10px 26px rgba(23,33,27,.05);
  --dsk-emboss:       7px 7px 18px rgba(31,58,38,.065), -7px -7px 18px rgba(255,255,255,.9);
  --dsk-emboss-hi:    9px 9px 22px rgba(31,58,38,.09),  -9px -9px 22px rgba(255,255,255,.95);
}

/* -- KPI rail -------------------------------------------------------------
   Same shape as the dashboard's .hz-kpi: 16px radius, hairline green rim,
   soft drop, lift on hover. */
html body .dv2-shell .kpi-rail { gap: 14px !important; }
html body .dv2-shell .kpi-tile {
  position: relative;
  background: var(--dsk-surface) !important;
  border: 1px solid var(--dsk-line-soft) !important;
  border-radius: var(--dsk-r-md) !important;
  padding: 16px 18px 15px !important;
  box-shadow: var(--dsk-shadow-sm) !important;
  transition: transform .14s ease, box-shadow .14s ease;
}
html body .dv2-shell .kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--dsk-shadow) !important;
}
/* Label - the dashboard states it plainly; drop the uppercase micro-caps.
   The label also reserves the glyph's row band: 50px tall and 58px clear on
   the inline-end. That is what keeps the 32px value below the glyph instead
   of sliding under it, the same stacking the dashboard gets from its
   .hz-kpi-top flex row. Without it the value collides with the glyph as soon
   as the rail's five fixed columns drop under ~230px each - which is the
   normal case on a 1440px screen once the 256px sidebar is subtracted. */
html body .dv2-shell .kpi-tile > div:first-child {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--dsk-ink-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-inline-end: 58px;
  min-height: 50px;
  display: flex;
  align-items: center;
}
/* Value - 32px/800 ink, with the currency word demoted, as on the dashboard. */
html body .dv2-shell .kpi-tile > div:nth-child(2) {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--dsk-ink) !important;
  margin-top: 10px !important;
}
html body .dv2-shell .kpi-tile > div:nth-child(2) > span:not(.num) {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--dsk-ink-2) !important;
}
/* Sub-line and its inline emphasis. */
html body .dv2-shell .kpi-tile > div:nth-child(3) {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--dsk-ink-3) !important;
  margin-top: 9px !important;
}
html body .dv2-shell .kpi-tile > div:nth-child(3) b { color: var(--dsk-ink-2) !important; }
html body .dv2-shell .kpi-tile > div:nth-child(3) a { color: var(--dsk-green) !important; }

/* Glyph tile - the dashboard gives every KPI a green square in the corner.
   The board's markup has no element for it, so it is drawn as two pseudo-
   elements on the label and the icon is a masked inline SVG. Positions are
   keyed so they hold whether or not the optional "Heaviest stage" tile is
   rendered: 1-3 are always present, the stalled tile is always last, and
   heaviest is the 4th only when a 5th follows it. */
html body .dv2-shell .kpi-tile > div:first-child::after {
  content: "";
  position: absolute;
  top: 14px; inset-inline-end: 16px;
  width: 50px; height: 50px;
  border-radius: var(--dsk-r-sm);
  background: var(--dsk-green-soft);
}
html body .dv2-shell .kpi-tile > div:first-child::before {
  content: "";
  position: absolute;
  top: 28px; inset-inline-end: 30px;
  width: 22px; height: 22px;
  z-index: 1;
  background: var(--dsk-green);
  -webkit-mask: var(--dsk-glyph) center / 22px 22px no-repeat;
          mask: var(--dsk-glyph) center / 22px 22px no-repeat;
}
/* wallet - pipeline value */
html body .dv2-shell .kpi-tile:nth-child(1) {
  --dsk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4z'/%3E%3C/svg%3E");
}
/* trending - weighted forecast */
html body .dv2-shell .kpi-tile:nth-child(2) {
  --dsk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}
/* file - open deals */
html body .dv2-shell .kpi-tile:nth-child(3) {
  --dsk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
/* layers - heaviest stage (only when a further tile follows it) */
html body .dv2-shell .kpi-tile:nth-child(4):not(:last-child) {
  --dsk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");
}
/* clock - stalled 14d+ (always the last tile) */
html body .dv2-shell .kpi-tile:last-child {
  --dsk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* The rail is a hard repeat(5, 1fr) with no breakpoints of its own. Five
   columns of a 32px number plus a 50px glyph stop fitting well below a
   ~1000px content box, so fold the rail the way the dashboard folds .hz-kpis
   rather than let the tiles crush. */
@media (max-width: 1000px) {
  html body .dv2-shell .kpi-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  html body .dv2-shell .kpi-rail { grid-template-columns: 1fr !important; }
}

/* -- Kanban deal cards ----------------------------------------------------
   The dashboard's board cards (.iv-widget): 20px radius, a white-to-mint
   gradient, a white rim and a two-sided emboss instead of a drop shadow,
   plus the short accent underline at the bottom inline-start. */
html body .dv2-shell .deal-card {
  background: linear-gradient(150deg, #ffffff 0%, #fcfefc 55%, #f6faf7 100%) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: var(--dsk-r) !important;
  box-shadow: var(--dsk-emboss) !important;
  padding: 16px 18px 18px !important;
  padding-inline-start: 22px !important;
  color: var(--dsk-ink) !important;
  transition: transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease;
}
html body .dv2-shell .deal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dsk-emboss-hi) !important;
}
html body .dv2-shell .deal-card::after {
  content: "";
  position: absolute;
  bottom: 10px; inset-inline-start: 20px;
  width: 30px; height: 4px;
  border-radius: 999px;
  background: var(--dsk-green);
  opacity: .32;
}
html body .dv2-shell .deal-card .card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--dsk-ink) !important;
}
html body .dv2-shell .deal-card .card-sub { color: var(--dsk-ink-3) !important; }
html body .dv2-shell .deal-card .card-bottom {
  border-top: 1px solid var(--dsk-line-soft) !important;
  padding-top: 11px !important;
}
html body .dv2-shell .deal-card .card-bottom > .num { color: var(--dsk-ink) !important; }
html body .dv2-shell .deal-card .card-bottom > .num small { color: var(--dsk-ink-3) !important; }
/* "Open deal" - the dashboard's quiet green pill. */
html body .dv2-shell .deal-card > a[href^="/deals/"] {
  background: var(--dsk-green-soft-2) !important;
  color: var(--dsk-green-d) !important;
  border: 1px solid var(--dsk-line-soft) !important;
  border-radius: var(--dsk-r-sm) !important;
  padding: 9px !important;
  font-weight: 700 !important;
  margin-bottom: 4px;
}
html body .dv2-shell .deal-card > a[href^="/deals/"]:hover {
  background: var(--dsk-green-soft) !important;
  color: var(--dsk-green-d) !important;
}
/* Bulk-select state - restated in the green palette so the board's own lime
   ring does not reappear through this skin. */
html body .dv2-shell .deal-card:has(.deal-select:checked) {
  background: var(--dsk-green-soft-2) !important;
  box-shadow: 0 0 0 2px var(--dsk-green) inset, var(--dsk-emboss) !important;
}
html body .dv2-shell .deal-select { accent-color: var(--dsk-green) !important; }

/* Empty-column placeholder and the Won / Lost drop boxes - same card, dashed. */
html body .dv2-shell .col-body > div:not(.deal-card) {
  border: 1.5px dashed #cddccf !important;
  border-radius: var(--dsk-r-md) !important;
  color: var(--dsk-ink-3) !important;
  background: rgba(255,255,255,.5) !important;
}
html body .dv2-shell .close-box {
  border-radius: var(--dsk-r-md) !important;
  background: var(--dsk-surface) !important;
  border: 1px solid var(--dsk-line-soft) !important;
  box-shadow: var(--dsk-shadow-sm) !important;
}
html body .dv2-shell .kanban-col.is-drag-over .col-body {
  background: var(--dsk-green-soft) !important;
  outline-color: var(--dsk-green) !important;
  border-radius: var(--dsk-r-md) !important;
}
/* ===== /DEALS BOARD - dashboard card skin ===== */

/* ===== CLIENTS + QUOTES - dark-green buttons (client1) ===== */
/* Presentation only. Every button on the Clients list and the Quotes list is
   repainted to the soft-green skin's dark green (#23603a, 7.5:1 on white).
   Filter/sort <select> fields are left alone - they are inputs, not buttons.
   Destructive controls (row delete, Reject) keep their red vocabulary. */

html body .clients-page,
html body:has(.qt-filterbar) {
  --dg:       #23603a;
  --dg-hover: #1a4a2c;
  --dg-ring:  rgba(35, 96, 58, .30);
}

html body .clients-page details.create-toggle > summary,
html body .clients-page button.c-btn-primary,
html body .clients-page button.colcfg-btn,
html body .clients-page .colcfg-pop button.colcfg-save,
html body .clients-page button#cliFilterToggle,
html body .clients-page td.ctbl-act a.btn.btn-primary,
html body .clients-page td.ctbl-act a.btn.btn-icon,
html body:has(.qt-filterbar) .qt-actions button.btn.btn-primary,
html body:has(.qt-filterbar) button.colcfg-btn,
html body:has(.qt-filterbar) .colcfg-pop button.colcfg-save,
html body:has(.qt-filterbar) .qt-filters a.qt-chip.is-active,
html body:has(.qt-filterbar) form.qt-filterbar button.btn,
html body:has(.qt-filterbar) form.qt-filterbar a.btn,
html body:has(.qt-filterbar) td.actions button.btn.qt-quick-preview,
html body:has(.qt-filterbar) td.actions a.btn,
html body:has(.qt-filterbar) td.actions form[action$="/advance"] button.btn,
html body:has(.qt-filterbar) td.actions form[action$="/duplicate"] button.btn,
html body:has(.qt-filterbar) a#qt-d-open.btn {
  background: var(--dg) !important;
  background-image: none !important;
  border-color: var(--dg) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .clients-page details.create-toggle > summary:hover,
html body .clients-page button.c-btn-primary:hover,
html body .clients-page button.colcfg-btn:hover,
html body .clients-page .colcfg-pop button.colcfg-save:hover,
html body .clients-page button#cliFilterToggle:hover,
html body .clients-page td.ctbl-act a.btn.btn-primary:hover,
html body .clients-page td.ctbl-act a.btn.btn-icon:hover,
html body:has(.qt-filterbar) .qt-actions button.btn.btn-primary:hover,
html body:has(.qt-filterbar) button.colcfg-btn:hover,
html body:has(.qt-filterbar) .colcfg-pop button.colcfg-save:hover,
html body:has(.qt-filterbar) .qt-filters a.qt-chip.is-active:hover,
html body:has(.qt-filterbar) form.qt-filterbar button.btn:hover,
html body:has(.qt-filterbar) form.qt-filterbar a.btn:hover,
html body:has(.qt-filterbar) td.actions button.btn.qt-quick-preview:hover,
html body:has(.qt-filterbar) td.actions a.btn:hover,
html body:has(.qt-filterbar) td.actions form[action$="/advance"] button.btn:hover,
html body:has(.qt-filterbar) td.actions form[action$="/duplicate"] button.btn:hover,
html body:has(.qt-filterbar) a#qt-d-open.btn:hover {
  background: var(--dg-hover) !important;
  border-color: var(--dg-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -4px var(--dg-ring) !important;
}

html body .clients-page details.create-toggle > summary:focus-visible,
html body .clients-page button.c-btn-primary:focus-visible,
html body .clients-page button.colcfg-btn:focus-visible,
html body .clients-page .colcfg-pop button.colcfg-save:focus-visible,
html body .clients-page button#cliFilterToggle:focus-visible,
html body .clients-page td.ctbl-act a.btn.btn-primary:focus-visible,
html body .clients-page td.ctbl-act a.btn.btn-icon:focus-visible,
html body:has(.qt-filterbar) .qt-actions button.btn.btn-primary:focus-visible,
html body:has(.qt-filterbar) button.colcfg-btn:focus-visible,
html body:has(.qt-filterbar) .colcfg-pop button.colcfg-save:focus-visible,
html body:has(.qt-filterbar) .qt-filters a.qt-chip.is-active:focus-visible,
html body:has(.qt-filterbar) form.qt-filterbar button.btn:focus-visible,
html body:has(.qt-filterbar) form.qt-filterbar a.btn:focus-visible,
html body:has(.qt-filterbar) td.actions button.btn.qt-quick-preview:focus-visible,
html body:has(.qt-filterbar) td.actions a.btn:focus-visible,
html body:has(.qt-filterbar) td.actions form[action$="/advance"] button.btn:focus-visible,
html body:has(.qt-filterbar) td.actions form[action$="/duplicate"] button.btn:focus-visible,
html body:has(.qt-filterbar) a#qt-d-open.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--dg-ring) !important;
}

/* Badges that sit INSIDE a now-dark button have to flip to stay legible. */
html body .clients-page button#cliFilterToggle > span {
  background: #ffffff !important;
  color: var(--dg) !important;
}
html body:has(.qt-filterbar) .qt-filters a.qt-chip.is-active .qt-chip-n {
  color: rgba(255, 255, 255, .82) !important;
}
/* ===== /CLIENTS + QUOTES - dark-green buttons ===== */

/* ==== soft-green.css (emerge app, /static) ==== */
/* ══════════════════════════════════════════════════════════════════════════
   soft-green.css — client1 site-wide soft-green skin
   ─────────────────────────────────────────────────────────────────────────
   GENERATED by overrides/make_green.py — do not hand-edit the deployed file;
   edit the generator and re-run, or the next rebuild loses your change.

   Loaded LAST from the tenant-override base.html, after polish-3d-final.css,
   so `!important` is used only where polish-3d already claimed it or where a
   page's own inline <style> would otherwise win on document order.

   Presentation only: no markup, no template, no query changes.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sg-page:      #eef5f0;   /* app background          */
  --sg-surface:   #fbfefc;   /* cards, topbar, rows     */
  --sg-surface-2: #eaf3ec;   /* inputs, table furniture */
  --sg-soft:      #f4faf5;   /* soft panels             */
  --sg-auto:      #f6fbf7;   /* per-page surfaces       */
  --sg-hover:     #e6f2ea;
  --sg-line:      #e4eee7;
  --sg-line-2:    #cfe1d5;
  --sg-green:     #2f7d4c;
  --sg-green-d:   #23603a;
  --sg-green-l:   #4a9a63;
  --sg-green-soft: #e9f4ec;

  --sg-card: linear-gradient(150deg, #ffffff 0%, #fbfdfb 50%, #f3f9f4 100%);

  /* ── retint the design tokens ──────────────────────────────────────────
     style.css shipped a cool-slate palette (--surface #ffffff, --surface-2
     #f1f3f9, --border #e6e8ee); polish-3d then forced --bg to a yellow-green
     #eaf1d9. Both are replaced by the softer green of the home rail. This
     one block carries ~90 rules in style.css on its own. */
  --bg: var(--sg-page) !important;
  --page-bg: var(--sg-page);
  --surface: var(--sg-surface);
  --surface-2: var(--sg-surface-2);
  --hover: var(--sg-hover);
  --border: var(--sg-line);
  --border-strong: var(--sg-line-2);
  --card-bg: var(--sg-surface);
  --card-border: rgba(35, 96, 58, 0.08);

  /* the `--p-*` premium set (style.css :root #3) */
  --p-border: rgba(35, 96, 58, 0.16);
  --p-divider: rgba(35, 96, 58, 0.12);
  --p-divider-soft: rgba(35, 96, 58, 0.06);
  --p-hover: #f2f9f4;

  /* chat paper */
  --wa-paper: #f2f8f3;
  --wa-bubble-in: var(--sg-surface);
}

/* ── page shell ───────────────────────────────────────────────────────────
   polish-3d paints html/body/.app/.main/.content with `var(--page-bg)
   !important`; retinting the token above is enough, but the radial wash on
   <html> and the body glow still carry the old cool tint. */
html body::before { background: radial-gradient(circle,
  rgba(74, 154, 99, 0.07), rgba(74, 154, 99, 0) 70%) !important; }

/* ── topbar ───────────────────────────────────────────────────────────────
   polish-3d: `background:#ffffff !important`. */
:root:not([data-theme="dark"]) .topbar,
html body .topbar {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf7 100%) !important;
  border-bottom-color: var(--sg-line) !important;
}
:root:not([data-theme="dark"]) .topbar-search,
html body .topbar-search { background: var(--sg-soft) !important; }
html body .topbar .lang-toggle,
html body .topbar .theme-toggle,
html body .topbar .icon-btn { background: var(--sg-surface) !important; }
html body .topbar .lang-toggle:hover,
html body .topbar .theme-toggle:hover,
html body .topbar .icon-btn:hover { background: var(--sg-green-soft) !important; }

/* ── cards & panels ───────────────────────────────────────────────────────
   polish-3d: `linear-gradient(145deg,#ffffff,#fafbfd) !important`. */
html body .card,
html body .dx-card,
html body .dx-kpi,
html body .dashboard-card,
html body .dx-insight,
html body .pulse-card,
html body .pulse-kpi,
html body .pulse-empty,
html body .project-card {
  background: var(--sg-card) !important;
  border-color: var(--sg-line) !important;
}
html body .card-head,
html body .card-header,
html body .card-foot,
html body .card-footer { background: transparent; border-color: var(--sg-line); }

/* ── tables ───────────────────────────────────────────────────────────────
   `table.data tr` is a card-row (radius + shadow); it reads --surface, which
   is retinted above. These add the header, zebra, hover and footer tints. */
html body table.data { background: transparent; }
html body table.data thead th {
  background: var(--sg-surface-2) !important;
  color: var(--sg-green-d);
  border-bottom-color: var(--sg-line) !important;
}
html body table.data tr { background: var(--sg-surface) !important; }
html body table.data tbody tr:nth-child(even) { background: #f7fcf8 !important; }
html body table.data tbody tr:hover { background: var(--sg-green-soft) !important; }
html body table.data tfoot td,
html body .rep-totals-row td,
html body #timeTable tfoot td { background: var(--sg-surface-2) !important; }
html body .phase-health-table .phase-row:hover { background: var(--sg-green-soft); }
/* plain <table>s that pages drop in without .data */
html body table > thead > tr > th { background: var(--sg-surface-2); }

/* ── forms ────────────────────────────────────────────────────────────────
   mobile_polish.css paints every input #ffffff. */
html body .input,
html body .form-control,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="date"],
html body input[type="datetime-local"],
html body input[type="time"],
html body input[type="search"],
html body select,
html body textarea {
  background: var(--sg-soft) !important;
  border-color: var(--sg-line) !important;
}
html body .input:focus,
html body .form-control:focus,
html body input:focus,
html body select:focus,
html body textarea:focus {
  background: #ffffff !important;
  border-color: var(--sg-green-l) !important;
}
html body .pulse-field input,
html body .pulse-field select,
html body .pulse-field textarea { background: var(--sg-soft) !important; }

/* ── buttons & chips ──────────────────────────────────────────────────────
   Neutral (white) buttons only — .btn-primary and every coloured button keep
   their own background. */
html body .btn:not(.btn-primary):not(.btn-ghost):not(.is-primary),
html body .pulse-btn,
html body .pulse-hero .h-btn,
html body .project-card .pc-open {
  background: var(--sg-soft);
  border-color: var(--sg-line);
}
html body .btn:not(.btn-primary):not(.btn-ghost):not(.is-primary):hover,
html body .pulse-btn:hover { background: var(--sg-green-soft); }
/* `.btn-primary` is deliberately untouched: it is already the brand green
   (#7eb12c). This file only re-tints what is white or a cool grey. */
html body .icon-btn { background: var(--sg-soft); }
html body .icon-btn:hover { background: var(--sg-green-soft); }

/* ── modals, sheets, dropdowns ────────────────────────────────────────────*/
html body dialog.modal,
html body .modal,
html body .modal-card,
html body .modal-content,
html body .sheet,
html body .modal.sheet,
html body .modal--sheet,
html body .dropdown-menu,
html body .popover,
html body .menu-panel,
html body .ios-grouped-list {
  background: var(--sg-card) !important;
  border-color: var(--sg-line) !important;
}
html body .modal-head,
html body .modal-header { background: transparent; border-color: var(--sg-line); }
html body .modal-foot,
html body .modal-footer { background: var(--sg-surface-2) !important; }
html body dialog.modal::backdrop { background: rgba(23, 60, 40, 0.38); }

/* ── chat / assistant ─────────────────────────────────────────────────────*/
html body .chat-hist-panel { background: var(--sg-card) !important; }
html body .chat-hist-item { background: var(--sg-soft) !important; }
html body .chat-hist-item:hover { background: var(--sg-green-soft) !important; }
html body .chat-popup .suggestion-row { background: rgba(244, 250, 245, 0.9) !important; }
html body .chat-popup .suggestion-chip,
html body .chat-popup .chat-attach-chip { background: var(--sg-soft) !important; }
html body .chat-popup .chat-foot,
html body .chat-popup .chat-attach-strip { background: var(--sg-surface-2) !important; }
html body .chat-popup .chat-foot input { background: #ffffff !important; }

/* ── mobile chrome ────────────────────────────────────────────────────────*/
html body .mobile-tabbar { background: linear-gradient(180deg, #f8fcf9 0%, #eef5f0 100%) !important; }
html body .mobile-tabbar a:active { background: var(--sg-green-soft) !important; }
html body .ios-segment { background: var(--sg-surface-2) !important; }
html body .ios-segment > button.active,
html body .ios-segment > a.active { background: var(--sg-surface) !important; }
html body .mp-biometric-banner { background: var(--sg-card) !important; }
html body .mp-visit-checkin-btn { background: var(--sg-soft) !important; }

/* ── odds and ends that shipped a cool grey ───────────────────────────────*/
html body .action-card { background: var(--sg-soft) !important; }
html body .pulse-row-icon { background: var(--sg-green-soft) !important; }
html body .pulse-portal .p-head .ico { background: var(--sg-surface) !important; }
html body .invoice-breakdown-bar,
html body .phase-bar { background: var(--sg-surface-2) !important; }
html body .skel-line,
html body .skel-card {
  background: linear-gradient(90deg, var(--sg-surface-2) 0%,
    rgba(255, 255, 255, 0.65) 50%, var(--sg-surface-2) 100%) !important;
}
html body .sidebar-backdrop { background: rgba(35, 96, 58, 0.35) !important; }

/* Empty states / section headers that used a plain white sheet. */
html body .empty,
html body .empty-state,
html body .placeholder { background: var(--sg-soft); }



/* ══════════════════════════════════════════════════════════════════════════
   GENERATED — per-page white surfaces
   1482 selectors harvested from 499 app templates whose own <style>
   block paints them a neutral white. They are emitted with `html body` +
   `!important` because a page's inline <style> comes after this file in
   document order and would otherwise win.
   ══════════════════════════════════════════════════════════════════════════ */

html body #ac-cal,
html body #ac-strip,
html body #bm-drawer,
html body #ctxAddModal .fld input,
html body #ctxAddModal .fld select,
html body #ctxAddModal .fld textarea,
html body #dl-wrap .dl-empty,
html body #dl-wrap .dl-filters,
html body #dl-wrap .dl-filters .dl-clear,
html body #dl-wrap .dl-filters input,
html body #dl-wrap .dl-filters select,
html body #dl-wrap .dl-kpi,
html body #dl-wrap .dl-tablewrap,
html body #dl-wrap .dl-toggle,
html body #dl-wrap table.dl-tbl tbody tr:hover,
html body #dl-wrap table.dl-tbl th,
html body #lead-fu .fu-btn,
html body #lead-fu .fu-ev.future .fu-dot,
html body #lead-fu .fu-field input,
html body #lead-fu .fu-field select,
html body #lead-qc .ld-qc-row,
html body #lead-qc .ld-qc-row:hover,
html body #lead-qc .ld-qc-status,
html body #ltCalPop,
html body #ltFc,
html body #ltStripWrap,
html body #pl-wrap .pl-bar,
html body #pl-wrap .pl-empty,
html body #pl-wrap .pl-filters,
html body #pl-wrap .pl-filters .pl-clear,
html body #pl-wrap .pl-filters input,
html body #pl-wrap .pl-filters select,
html body #pl-wrap .pl-kpi,
html body #pl-wrap .pl-tablewrap,
html body #pl-wrap .pl-toggle,
html body #pl-wrap table.pl-tbl tbody tr:hover,
html body #pl-wrap table.pl-tbl th,
html body #project-notes .cnotes-scroll,
html body #project-notes .cnotes-tbl tbody tr:hover,
html body #project-notes .cnotes-tbl th,
html body .ab-card,
html body .ab-card > .head,
html body .ab-field input,
html body .ab-field select,
html body .ab-field textarea,
html body .ab-pill.is-draft,
html body .ab-table th,
html body .abr-btn.is-ghost,
html body .abr-card,
html body .abr-card > .head,
html body .abr-pill.is-draft,
html body .abr-stat,
html body .abr-table th,
html body .abx-arm,
html body .abx-btn.is-ghost,
html body .abx-card,
html body .abx-card > .head,
html body .abx-empty,
html body .abx-filter a,
html body .abx-pill.is-cancelled,
html body .abx-pill.is-inconclusive,
html body .abx-rate-bar,
html body .abx-stat,
html body .abx-table th,
html body .ac-action:hover,
html body .ac-bulk-btn,
html body .ac-cal-legend,
html body .ac-cal-src,
html body .ac-cal-src:hover,
html body .ac-cal-toggle,
html body .ac-cal-topbar,
html body .ac-cal-view,
html body .ac-cal-view:hover,
html body .ac-fb-clear,
html body .ac-fb-clear:hover,
html body .ac-fb-in,
html body .ac-fb-sel,
html body .ac-filterbar,
html body .ac-group td,
html body .ac-group.g-done td,
html body .ac-mode-btn,
html body .ac-prio.low,
html body .ac-pv,
html body .ac-pv-close-btn,
html body .ac-pv-close-btn:hover,
html body .ac-pv-danger,
html body .ac-pv-fld input,
html body .ac-pv-fld select,
html body .ac-pv-fld textarea,
html body .ac-pv-ft,
html body .ac-pv-note,
html body .ac-rm-btn,
html body .ac-rowmenu,
html body .ac-section,
html body .ac-section-done .ac-pill,
html body .ac-section-head,
html body .ac-table tbody tr:hover,
html body .ac-table thead th,
html body .ac-table-wrap,
html body .ac-toggle,
html body .ac-toolbar,
html body .ac-topbar,
html body .ac-view,
html body .ac-view:hover,
html body .acc-section,
html body .actions-glass-card .btn-ghost:hover,
html body .actions-glass-card select.select:focus,
html body .actions-glass-card select.select:hover,
html body .ad-btn.ghost,
html body .ad-btn.ghost:hover,
html body .ad-by-type .chip,
html body .ad-card,
html body .ad-card .head,
html body .ad-diff-block,
html body .ad-head,
html body .ad-kpi,
html body .ads-label .ext,
html body .ads-note,
html body .advisor-ok,
html body .ae-action-row,
html body .ae-add-row,
html body .ae-card,
html body .ae-card-head,
html body .ae-input,
html body .ae-params input,
html body .ae-params select,
html body .ae-params textarea,
html body .ae-row input,
html body .ae-row select,
html body .ae-run-status.skipped,
html body .ae-select,
html body .ae-test-fire,
html body .ae-topbar,
html body .aem-box,
html body .aem-btn,
html body .ai-banner.placeholder,
html body .ai-card,
html body .ai-card-head,
html body .ai-extract-field,
html body .ai-extract-field .conf,
html body .ai-extract-field.matches,
html body .ai-focus-row:hover,
html body .ai-kpi,
html body .ai-narrative,
html body .ai-rate-bar,
html body .ai-source-fallback,
html body .ai-stat,
html body .ai-status,
html body .ai-toolbar,
html body .ais-card,
html body .ais-card > .head,
html body .ais-interp code,
html body .ais-result .meta .kind,
html body .ais-searchbar input[type="text"],
html body .ais-suggest a,
html body .al-action-pill,
html body .al-card,
html body .al-chip,
html body .al-chip:hover,
html body .al-row.al-row-header,
html body .al-row.al-row-header:hover,
html body .al-row:hover,
html body .al-topbar,
html body .ann-card,
html body .ap-card,
html body .ap-col,
html body .as-btn,
html body .as-card,
html body .as-form input[type="text"],
html body .as-form textarea,
html body .as-head,
html body .as-opt.is-on,
html body .as-row.as-row-header,
html body .as-stat-off,
html body .as-tag,
html body .as-weekend td,
html body .askai-composer,
html body .askai-drawer,
html body .askai-messages,
html body .askai-msg.askai-asst,
html body .askai-suggestions button,
html body .assignee-chk,
html body .at-actions,
html body .at-btn,
html body .at-btn:hover,
html body .at-card,
html body .at-card-head,
html body .at-edit,
html body .at-edit input[type="color"],
html body .at-edit input[type="text"],
html body .at-edit select,
html body .at-flag.archived,
html body .at-foot,
html body .at-form input[type="color"],
html body .at-form input[type="datetime-local"],
html body .at-form input[type="text"],
html body .at-form select,
html body .at-modehint,
html body .at-new-flash .token-box,
html body .at-revoked-pill,
html body .at-row.at-row-header,
html body .at-row:hover,
html body .at-scopes,
html body .at-topbar,
html body .at-tr button,
html body .at-tr button:hover:not(:disabled),
html body .at-wrap input[type=text],
html body .at-wrap textarea,
html body .att-cell.weekend,
html body .att-day tbody tr:hover,
html body .att-day thead th,
html body .att-grid .day-head.weekend,
html body .att-grid .emp-cell,
html body .att-grid thead .emp-cell,
html body .att-grid thead th,
html body .au-action-btn:hover,
html body .au-ai-input,
html body .au-btn,
html body .au-btn:hover,
html body .au-card,
html body .au-card-head,
html body .au-foot,
html body .au-hero,
html body .au-rep-row:hover,
html body .au-row-status.is-off,
html body .au-row:hover,
html body .au-rule input,
html body .au-rule select,
html body .au-rule-group,
html body .au-section,
html body .au-section-head,
html body .au-section-head .pill,
html body .au-tmpl-card,
html body .au-tmpl-card:hover,
html body .au-topbar,
html body .auto-chip.muted,
html body .avail-row,
html body .avail-row.is-off,
html body .badge-agent,
html body .badge-off,
html body .bal-grid .emp-cell,
html body .bal-grid thead .emp-cell,
html body .bal-grid thead th,
html body .bar-track,
html body .bar-wrap,
html body .bd-card,
html body .bd-pill,
html body .bh-pill,
html body .billing-state-todo,
html body .bm-btn.secondary,
html body .bm-card,
html body .bm-empty,
html body .br-edit-form,
html body .br-help,
html body .br-intro,
html body .br-pill-off,
html body .br-topbar,
html body .c-actions .btn,
html body .c-card,
html body .c-empty,
html body .c-field input,
html body .cal-bar label.toggle,
html body .cal-bar select,
html body .cat-chip,
html body .cat-inbox,
html body .cc-msg.in,
html body .cc-thread,
html body .cd-btn,
html body .cd-btn:hover,
html body .cd-card,
html body .cd-card-head,
html body .cd-chat .bubble-in,
html body .cd-disp-form button,
html body .cd-disp-form button:hover,
html body .cd-edit-form,
html body .cd-edit-form input,
html body .cd-edit-toggle:hover,
html body .cd-emg-card,
html body .cd-foot,
html body .cd-form input[type="datetime-local"],
html body .cd-form input[type="text"],
html body .cd-form select,
html body .cd-form textarea,
html body .cd-portal .p-btn.ghost,
html body .cd-portal .p-head .ico,
html body .cd-portal input,
html body .cd-row-actions .btn,
html body .cd-row-icon,
html body .cd-sig-pad-wrap,
html body .cd-sign-card,
html body .cd-sign-row,
html body .cd-soon,
html body .cd-stat,
html body .cd-status.archived,
html body .cd-status.draft,
html body .cd-topbar,
html body .cd-tpl-card,
html body .cd-transcript,
html body .cd-upload input,
html body .cd-upload select,
html body .cd-upsign,
html body .cdx-box,
html body .cdx-chip,
html body .cdx-ft,
html body .ce-btn-preview,
html body .ce-btn.secondary,
html body .ce-card,
html body .ce-card > .head,
html body .ce-form input,
html body .ce-form select,
html body .ce-form textarea,
html body .ce-grid > .new-form,
html body .ce-grid > .sessions,
html body .ce-input,
html body .ce-meta-grid input[type="date"],
html body .ce-meta-grid input[type="number"],
html body .ce-meta-grid input[type="text"],
html body .ce-meta-grid select,
html body .ce-modal-card,
html body .ce-pill-draft,
html body .ce-rem-person,
html body .ce-rem-person:hover,
html body .ce-split-prev iframe,
html body .ce-status.cancelled,
html body .cel-card,
html body .cf-chip,
html body .cf-section,
html body .cfx-wrap .cfx-input,
html body .ch-whatsapp,
html body .ci-body,
html body .ci-btn,
html body .ci-btn-reject,
html body .ci-btn:hover,
html body .ci-card,
html body .ci-card .kind-pill.no_action,
html body .ci-empty,
html body .ci-side,
html body .ci-tile,
html body .ci-topbar,
html body .cl-card,
html body .cl-chip,
html body .cl-chip:hover,
html body .cl-pill.kind-drip,
html body .cl-row.cl-row-header,
html body .cl-row.cl-row-header:hover,
html body .cl-row:hover,
html body .cl-status.archived,
html body .cl-status.draft,
html body .cl-topbar,
html body .closed-row,
html body .cm-cluster,
html body .cm-cluster-foot,
html body .cm-cluster-head .count,
html body .cm-empty,
html body .cm-hero,
html body .cm-row:hover,
html body .cm-status.expired,
html body .cn-btn,
html body .cn-btn:hover,
html body .cn-card,
html body .cn-foot,
html body .cn-form-grid input[type="text"],
html body .cn-form-grid select,
html body .cn-head,
html body .cn-kind-card,
html body .cn-seg,
html body .cn-tok,
html body .co-bar,
html body .co-card,
html body .co-progress,
html body .co-rcpt-status,
html body .co-status,
html body .colcfg-list li:hover,
html body .colcfg-move button,
html body .colcfg-pop,
html body .conf-bar,
html body .conf-none,
html body .confidence-bar,
html body .conv-ch-instagram .bubble-in,
html body .conv-ch-instagram .chat-head,
html body .conv-ch-whatsapp .bubble-in,
html body .cp-card,
html body .cp-empty,
html body .cp-kbd,
html body .cp-kpi,
html body .cp-panel,
html body .cp-pipe-head,
html body .cp-toolbar,
html body .cr-add,
html body .cr-add input[type="text"],
html body .cr-archived,
html body .cr-btn,
html body .cr-btn:hover,
html body .cr-card,
html body .cr-card-head,
html body .cr-edit,
html body .cr-edit input[type="text"],
html body .cr-row:hover,
html body .cr-usage,
html body .cs-card,
html body .cs-soon,
html body .csc-btn.secondary,
html body .csc-btn.secondary:hover,
html body .csc-card,
html body .csc-card .head,
html body .csc-table th,
html body .csc-test,
html body .csid-snippet,
html body .ctbl-pcount,
html body .ctx-act,
html body .ctx-chip.is-on,
html body .ctx-chips,
html body .ctx-cust-filter:focus-within,
html body .ctx-hero,
html body .ctx-modal-foot .btn-cancel:hover,
html body .ctx-modal-panel,
html body .ctx-modal-x:hover,
html body .ctx-sortby:focus-within,
html body .ctx-sortby:hover,
html body .ctx-table-wrap,
html body .dd-btn,
html body .dd-btn:hover,
html body .dd-card,
html body .dd-card-head,
html body .dd-data,
html body .dd-doc-page,
html body .dd-doc-page [data-sd-edit]:focus,
html body .dd-doc-wrap,
html body .dd-foot,
html body .dd-form input[type="color"],
html body .dd-form input[type="email"],
html body .dd-form input[type="text"],
html body .dd-form textarea,
html body .dd-preview,
html body .dd-soon,
html body .dd-status.archived,
html body .dd-status.draft,
html body .dd-topbar,
html body .dec-pill.draft,
html body .deliv-check,
html body .deliv-count,
html body .deliv-pick,
html body .dep-help,
html body .dform,
html body .dform input[type=date],
html body .dform input[type=number],
html body .dform input[type=text],
html body .dform select,
html body .dform textarea,
html body .dform-serial input,
html body .dg-source-fallback,
html body .dg-summary,
html body .direction-toggle label,
html body .dl-btn,
html body .dl-btn:hover,
html body .dl-card,
html body .dl-chip,
html body .dl-chip:hover,
html body .dl-row.dl-row-header,
html body .dl-row.dl-row-header:hover,
html body .dl-row:hover,
html body .dl-status.archived,
html body .dl-status.draft,
html body .dl-topbar,
html body .dm-cluster,
html body .dm-cluster-foot,
html body .dm-cluster-head .count,
html body .dm-empty,
html body .dm-hero,
html body .dm-row:hover,
html body .dn-btn,
html body .dn-btn:hover,
html body .dn-card,
html body .dn-foot,
html body .dn-form-grid input[type="text"],
html body .dn-form-grid select,
html body .dn-head,
html body .dn-tpl,
html body .dn-tpl-preview,
html body .doc-card,
html body .doc-card .dc-btn,
html body .doc-card .dc-status-draft,
html body .doc-row[data-ext="csv"] .dr-tile,
html body .doc-row[data-ext="gif"] .dr-tile,
html body .doc-row[data-ext="jpeg"] .dr-tile,
html body .doc-row[data-ext="jpg"] .dr-tile,
html body .doc-row[data-ext="png"] .dr-tile,
html body .doc-row[data-ext="webp"] .dr-tile,
html body .doc-row[data-ext="xls"] .dr-tile,
html body .doc-row[data-ext="xlsx"] .dr-tile,
html body .doc-thumb,
html body .doc-user-row:hover,
html body .docs-action-ghost,
html body .docs-filter-pop,
html body .docs-filter-pop .dfp-search input:focus,
html body .docs-filter-pop select,
html body .docs-list,
html body .docs-tbl-pill-draft,
html body .docs-tbl-wrap,
html body .dp-more-item:hover,
html body .dr-btn,
html body .dr-btn:hover,
html body .dr-bubble,
html body .dr-card,
html body .dr-chip:hover,
html body .dr-empty,
html body .dr-filters,
html body .dr-filters input,
html body .dr-filters select,
html body .dr-head,
html body .dr-section-filter,
html body .dr-stat,
html body .dr-tbl th,
html body .dr-tbl tr:hover td,
html body .dr-thread.is-resolved,
html body .dr-tile,
html body .drw-comment,
html body .drw-comment.is-rep,
html body .drw-form,
html body .drw-list,
html body .drw-panel,
html body .dsr-filter-menu,
html body .dsr-filter-menu button:hover,
html body .dsr-row,
html body .dsr-sum:hover,
html body .edit-mini,
html body .ek-btn,
html body .ek-card,
html body .el-folder-tag,
html body .em-att-chip,
html body .em-att-chip:hover,
html body .em-mode.is-on,
html body .em-msg,
html body .em-msg.em-out,
html body .email-acct-select,
html body .email-filter-tabs,
html body .email-list,
html body .email-row-wrap,
html body .email-search-clear,
html body .email-search-input,
html body .emerge-badge,
html body .emerge-badge-logo,
html body .emp-card,
html body .emp-code,
html body .empty-callout,
html body .engagement-bars .row .bar,
html body .ent-card,
html body .entity-pill,
html body .entity-pill.ent-client,
html body .entity-pill:hover,
html body .es-archived,
html body .es-btn,
html body .es-btn:hover,
html body .es-card,
html body .es-card-head,
html body .es-edit,
html body .es-edit input[type="text"],
html body .es-edit textarea,
html body .es-form input[type="text"],
html body .es-form textarea,
html body .es-row:hover,
html body .et-archived,
html body .et-btn,
html body .et-btn:hover,
html body .et-card,
html body .et-card-head,
html body .et-empty,
html body .et-form input[type="text"],
html body .et-form select,
html body .et-form textarea,
html body .et-row:hover,
html body .et-tags,
html body .ete-actions,
html body .ete-btn,
html body .ete-btn:hover,
html body .ete-card,
html body .ete-card-head,
html body .ete-form input[type="text"],
html body .ete-form select,
html body .ete-form textarea,
html body .ete-tags,
html body .ex-bar,
html body .ex-cat,
html body .faq-row .rm,
html body .fb-note,
html body .fb-row,
html body .fc-bar,
html body .fc-card,
html body .fc-card-head,
html body .fc-daygrid-more-link,
html body .fc-hist-bar,
html body .fc-popover-header,
html body .fc-tile,
html body .fc-topbar,
html body .fe-btn,
html body .fe-btn:hover,
html body .fe-card,
html body .fe-card-head,
html body .fe-flag,
html body .fe-form input[type="text"],
html body .fe-form select,
html body .fe-form textarea,
html body .fe-row.fe-row-header,
html body .fe-row.fe-row-header:hover,
html body .fe-row:hover,
html body .fe-tab:hover,
html body .fe-tabs,
html body .ff-add,
html body .ff-bar,
html body .ff-card,
html body .ff-legend code,
html body .ff-row,
html body .ffv2-btn.secondary,
html body .ffv2-btn.secondary:hover,
html body .ffv2-card,
html body .ffv2-card .head,
html body .ffv2-fieldref,
html body .ffv2-fieldref code,
html body .ffv2-table th,
html body .fo-card,
html body .fo-card .fo-empty,
html body .foot .pn,
html body .funnel-row .f-track,
html body .gc-card,
html body .gc-empty,
html body .gc-node,
html body .gc-rollup,
html body .gd-btn,
html body .gd-btn:hover,
html body .gd-card,
html body .gd-card-head,
html body .gd-topbar,
html body .gem-btn.is-ghost,
html body .gem-card,
html body .gem-card .head,
html body .gem-hero .pill,
html body .gem-merge-tags code,
html body .gem-recent th,
html body .gem-stat,
html body .gem-status.cancelled,
html body .ger-btn.is-ghost,
html body .ger-card,
html body .ger-card .head,
html body .ger-hero,
html body .ger-kpi,
html body .ger-row-status.cancelled,
html body .ger-status.cancelled,
html body .gl-bar,
html body .gl-card,
html body .gl-card-head,
html body .gl-input,
html body .gl-select,
html body .gl-topbar,
html body .gov-card,
html body .gql-btn.secondary,
html body .gql-card,
html body .gql-example,
html body .gs-bar input[type="text"],
html body .gs-btn.secondary,
html body .gs-bucket-tab,
html body .gs-card,
html body .gs-card > .head,
html body .gs-interp code,
html body .gs-result .meta .kind,
html body .h0,
html body .hier-add,
html body .hier-chain .crumb,
html body .hier-list li,
html body .hier-widget,
html body .histo .histo-track,
html body .history-marker,
html body .hm-bar,
html body .hm-card,
html body .hm-head,
html body .hm-stat,
html body .hm-table th,
html body .hm-window,
html body .hr-dept-bar .bar,
html body .iai-mapping-table th,
html body .iai-result-card,
html body .iai-result-stat,
html body .iai-step-pill,
html body .ic-card,
html body .icon-tile,
html body .icon-tile:hover,
html body .igc-card,
html body .igc-form input[type=number],
html body .igc-form input[type=password],
html body .igc-form input[type=text],
html body .igc-note code,
html body .igc-off,
html body .igc-tab,
html body .il-add-card,
html body .il-add-form input[type="text"],
html body .il-add-head,
html body .il-card,
html body .il-topbar,
html body .im-btn,
html body .im-card,
html body .im-foot,
html body .im-head,
html body .im-map-row select,
html body .im-preview th,
html body .it-kind,
html body .iud-agenda,
html body .iud-agenda .iud-chip,
html body .iud-agenda .iud-chip:hover,
html body .iud-card,
html body .iud-card .head,
html body .iud-form input[type=email],
html body .iud-form input[type=number],
html body .iud-form input[type=password],
html body .iud-form input[type=text],
html body .iud-form select,
html body .iud-pill.is-aux,
html body .jd-public,
html body .jd-public code,
html body .kn-chip,
html body .kpi-card,
html body .kpi-card .kpi-ic,
html body .ks-kbd,
html body .ks-panel,
html body .lb-btn,
html body .lb-btn:hover,
html body .lb-card,
html body .lb-card-head,
html body .lb-edit,
html body .lb-edit input[type="color"],
html body .lb-edit input[type="text"],
html body .lb-flag,
html body .lb-form input[type="color"],
html body .lb-form input[type="text"],
html body .lb-rank,
html body .lb-rank.silver,
html body .lb-row.lb-row-header,
html body .lb-row.lb-row-header:hover,
html body .lb-row:hover,
html body .lb-topbar,
html body .lb-win,
html body .lc-chip,
html body .lf-chip,
html body .ln-bar,
html body .loc-chip-off,
html body .lp-cf,
html body .lp-edit-form,
html body .lp-pill-off,
html body .lp-tag,
html body .lt-btn,
html body .lt-bulk,
html body .lt-cat,
html body .lt-chip.s-off,
html body .lt-filters input[type=text],
html body .lt-filters select,
html body .lt-kpi,
html body .lt-pop,
html body .lt-pop-item:hover,
html body .lt-sec-n,
html body .lt-section,
html body .lt-viewtoggle,
html body .lt-viewtoggle button,
html body .ltc-mode,
html body .ltc-modes,
html body .ltr-card,
html body .ltr-count,
html body .ltr-group,
html body .ltstrip-bar,
html body .ltstrip-col.is-weekend,
html body .ltstrip-nav,
html body .lu-cell.weekend,
html body .lu-chip,
html body .lu-dayhead.weekend,
html body .lu-grid thead th,
html body .lu-lead,
html body .lu-monthnav,
html body .lu-monthnav a:hover,
html body .lu-monthnav button:hover,
html body .lu-search,
html body .lu-sheet,
html body .lu-sheet-foot,
html body .lu-sheet-foot button,
html body .lu-today-btn,
html body .lu-today-btn:hover,
html body .lu-wrap,
html body .mention-dropdown,
html body .mig-card,
html body .modal-card,
html body .mp-actions .btn,
html body .mp-attendee .role-pill,
html body .mp-card,
html body .mp-drop,
html body .mp-intro,
html body .mp-section,
html body .mt-btn.ghost,
html body .mt-btn.ghost:hover,
html body .mt-card,
html body .mt-summary .card,
html body .my-library,
html body .my-library label,
html body .my-tile,
html body .na-btn,
html body .na-btn:hover,
html body .na-card,
html body .nd-foot,
html body .nd-input,
html body .nd-input:disabled,
html body .nd-stage,
html body .nd-ta-opt.is-active,
html body .nd-ta-opt:hover,
html body .nd-ta-pop,
html body .note-action-btn:hover,
html body .note-card,
html body .note-composer,
html body .notes-empty,
html body .np-edit-form,
html body .np-event,
html body .np-pill-off,
html body .np-rkind,
html body .nsr-head,
html body .nsr-pad-wrap,
html body .nsr-panel,
html body .nsr-seg,
html body .nsr-seg label:has(input:checked),
html body .oa-col,
html body .oc-chip,
html body .oc-fold,
html body .oc-node,
html body .oc-node.is-pick,
html body .oc-panel,
html body .oc-wrap,
html body .od-btn,
html body .od-btn:hover,
html body .od-card,
html body .od-card-head,
html body .od-code,
html body .od-deal-row:hover,
html body .od-edit-card,
html body .od-hero,
html body .od-kpi,
html body .od-modal-body input[type="text"],
html body .od-modal-body select,
html body .od-modal-body textarea,
html body .od-modal-foot,
html body .od-modal-head,
html body .od-person-row:hover,
html body .od-pill,
html body .od-row input,
html body .ohp-btn.ghost,
html body .ohp-btn.ghost:hover,
html body .ohp-card,
html body .ol-act,
html body .ol-add-card,
html body .ol-add-form input[type="text"],
html body .ol-add-form select,
html body .ol-add-form textarea,
html body .ol-add-head,
html body .ol-card,
html body .ol-chips-clear:hover,
html body .ol-filter > summary:hover,
html body .ol-filter-popover,
html body .ol-filter-popover h4 .x:hover,
html body .ol-filter-row input[type="text"]:focus,
html body .ol-filter-row select:focus,
html body .ol-filter[open] .ol-filter-badge,
html body .ol-modal-head,
html body .ol-modal-panel,
html body .ol-modal-x:hover,
html body .ol-search:focus-within,
html body .ol-sortby:focus-within,
html body .ol-sortby:hover,
html body .ol-topbar,
html body .ol-tri,
html body .ol-tri label.is-on,
html body .opening-row,
html body .org-tree .node,
html body .p-thumb,
html body .p-thumb-ph,
html body .pa-count,
html body .pa-head,
html body .pa-panel,
html body .pat-card,
html body .pat-card-head,
html body .pat-row .bar,
html body .pat-topbar,
html body .pc-calc,
html body .pc-card,
html body .pc-edit-form,
html body .pc-pill-off,
html body .pc-today,
html body .pd-add-stage,
html body .pd-add-stage input,
html body .pd-btn,
html body .pd-btn:hover,
html body .pd-card,
html body .pd-card-head,
html body .pd-deals-pill,
html body .pd-flag.archived,
html body .pd-form-grid .pd-req-fields,
html body .pd-form-grid input[type="number"],
html body .pd-form-grid input[type="text"],
html body .pd-form-grid select,
html body .pd-form-grid textarea,
html body .pd-meta-form input[type="color"],
html body .pd-meta-form input[type="text"],
html body .pd-stage,
html body .pd-stage:hover,
html body .pe-assignee,
html body .pe-chip,
html body .pe-field input,
html body .pe-field select,
html body .pe-field textarea,
html body .pe-stage,
html body .pe-terminal-note,
html body .ph-card,
html body .ph-chk,
html body .ph-chk.on,
html body .ph-num,
html body .ph-prompt,
html body .ph-table select,
html body .ph-table th,
html body .phase,
html body .phase-block,
html body .phase-chip,
html body .phase-config,
html body .phase-head,
html body .pi-btn,
html body .pi-card,
html body .pi-foot,
html body .pi-head,
html body .pi-map-row select,
html body .pi-pill,
html body .pi-preview th,
html body .pill-closed,
html body .pill-disposed,
html body .pill-inactive,
html body .pill-other,
html body .pill-rejected,
html body .pinf-card,
html body .pinf-card .head,
html body .pinf-hero .pill,
html body .pinf-list code,
html body .pl-actions,
html body .pl-btn,
html body .pl-btn:hover,
html body .pl-card,
html body .pl-card-head,
html body .pl-flag.muted,
html body .pl-newform input[type="color"],
html body .pl-newform input[type="text"],
html body .pl-row.pl-row-header,
html body .pl-row.pl-row-header:hover,
html body .pl-row:hover,
html body .plat-card,
html body .pmodal-head,
html body .pmodal-panel,
html body .pool-bar,
html body .pool-table th,
html body .pr-low,
html body .pr-paper,
html body .pr-row input,
html body .pr-side .role-pill,
html body .pr-summary,
html body .proj-info-edit-btn,
html body .proj-info-edit-btn:hover,
html body .proj-state,
html body .proj-state-pill:hover,
html body .project-refno .rv,
html body .ps-cbar,
html body .ps-manual,
html body .ps-mark button,
html body .ps-readonly,
html body .ps-row,
html body .ps-tot-card,
html body .ptl-cal,
html body .ptl-ctrl,
html body .ptl-pick > summary,
html body .ptl-pick-list,
html body .ptl-pick-opt:hover,
html body .pw-card,
html body .pw-note,
html body .pw-wrap input[type=number],
html body .pw-wrap input[type=text],
html body .pw-wrap textarea,
html body .qapp-btn.is-ghost,
html body .qapp-card,
html body .qapp-card > .head,
html body .qapp-empty,
html body .qapp-pill.is-cancelled,
html body .qapp-stat,
html body .qapp-table th,
html body .qcfg-btn.is-ghost,
html body .qcfg-card,
html body .qcfg-card > .head,
html body .qcfg-empty,
html body .qcfg-savings.is-zero,
html body .qcfg-table th,
html body .qline,
html body .qrul-btn.is-ghost,
html body .qrul-card,
html body .qrul-card > .head,
html body .qrul-empty,
html body .qrul-hint,
html body .qrul-table th,
html body .qs-card,
html body .qs-head,
html body .qs-kpi,
html body .qs-prog,
html body .qs-status.pending,
html body .qt-btn-preview,
html body .qt-btn-reject,
html body .qt-pill-draft,
html body .qt-recip-opt.is-active,
html body .qt-recip-opt:hover,
html body .qt-recip-pill,
html body .qt-recip-pop,
html body .qt-split-prev iframe,
html body .rb-actions button,
html body .rb-counts .pill,
html body .rb-table tbody tr:hover,
html body .rb-table th,
html body .rc-tile,
html body .rc-upload,
html body .rd-btn,
html body .rd-card,
html body .rd-empty,
html body .rd-factor,
html body .rd-filters,
html body .rd-form-data,
html body .rd-summary .tile,
html body .re-cat,
html body .re-perm-row:hover,
html body .re-row input,
html body .re-row select,
html body .re-row textarea,
html body .re-section > summary,
html body .re-section[open] > summary,
html body .reg-pill.waived,
html body .rev-btn,
html body .rev-detail-body,
html body .rev-file,
html body .rev-file:hover,
html body .rev-people-picker,
html body .rev-people-picker .rp-row:hover,
html body .rev-people-picker[open] > summary,
html body .rev-queue,
html body .revm-box,
html body .revm-file,
html body .revm-file:hover,
html body .rfi-assignee:hover,
html body .rfi-assignees,
html body .rfi-owner-none,
html body .rfi-submitter,
html body .rl-built,
html body .rl-section h3,
html body .rl-table tbody tr:hover,
html body .rp-card,
html body .rp-card2,
html body .rp-card2-head,
html body .rp-edit-form,
html body .rp-kpi,
html body .rp-period,
html body .rp-pill-cat,
html body .rp-pill-off,
html body .rp-pill.mut,
html body .rp-quick,
html body .rp-quick:hover,
html body .rp-role-card,
html body .rp-table tbody tr:hover,
html body .rp-table thead th,
html body .rp-topbar,
html body .rpt-bar .bar,
html body .rpt-card,
html body .rq-card,
html body .rq-count,
html body .rq-group,
html body .rq-tile,
html body .rr-edit-form,
html body .rr-pill-off,
html body .rt-card,
html body .rt-chip,
html body .rt-icon,
html body .rt-rules thead th,
html body .rt-status-card,
html body .rtf-ico span,
html body .rung-form,
html body .rv2-card,
html body .rv2-empty,
html body .rv2-kpi,
html body .rv2-toolbar,
html body .sa-day-item:hover,
html body .sa-day-nav:hover,
html body .sa-foot,
html body .sa-head,
html body .sa-input,
html body .sa-right,
html body .sa-ta-opt:hover,
html body .sa-ta-pop,
html body .sa-tip,
html body .sa-title-input,
html body .sa-type,
html body .sa-type.is-selected,
html body .sa-type:hover,
html body .sact-row,
html body .sc-card,
html body .sc-pct-bar,
html body .sc-period,
html body .sc-period:hover,
html body .sc-rank,
html body .sc-rank.r2,
html body .sc-table tbody tr:hover,
html body .sc-table thead th,
html body .sc-topbar,
html body .schema-help,
html body .score-card,
html body .sd-actions,
html body .sd-btn,
html body .sd-btn:hover,
html body .sd-card,
html body .sd-card-head,
html body .sd-link-box,
html body .sd-q,
html body .sd-sig,
html body .sd-sig img,
html body .sd-status.expired,
html body .sd-status.revoked,
html body .sd-topbar,
html body .seg-card,
html body .seg-card .seg-icon,
html body .seg-card .seg-pct,
html body .segbar,
html body .sem-box,
html body .sf-btn,
html body .sf-btn-accept:hover,
html body .sf-empty,
html body .sf-sugg,
html body .sg-add,
html body .sg-btn,
html body .sg-btn:hover,
html body .sg-card,
html body .sg-head,
html body .sg-input,
html body .sg-prog,
html body .sg-role,
html body .sg-status.pending,
html body .sh-card,
html body .sh-empty,
html body .sh-pill,
html body .sh-role-banner,
html body .sh-window,
html body .si-card,
html body .si-empty,
html body .si-sent-pill.neutral,
html body .si-summary .tile,
html body .sig-box,
html body .sig-card,
html body .sig-form-card,
html body .sim .step,
html body .sim .step.none,
html body .sl-card,
html body .sl-filter,
html body .sl-filter:hover,
html body .sl-row.matched,
html body .sl-row:hover,
html body .sl-status.expired,
html body .sl-status.revoked,
html body .sl-topbar,
html body .sla-bar,
html body .sm-dialog,
html body .sm-head,
html body .sm-mark,
html body .sm-page,
html body .sm-pages,
html body .smart-input,
html body .smart-input:focus,
html body .so-chip,
html body .sof-repeat,
html body .sp-add,
html body .sp-btn,
html body .sp-btn:hover,
html body .sp-card,
html body .sp-card-head,
html body .sp-foot,
html body .sp-form input[type="number"],
html body .sp-form input[type="text"],
html body .sp-form textarea,
html body .sp-handle,
html body .sp-hero,
html body .sp-page,
html body .sr-tabs a,
html body .ssf-num,
html body .ssf-stage,
html body .ssf-window,
html body .st-add,
html body .st-badge.role,
html body .st-card,
html body .st-card-head,
html body .st-count.is-zero,
html body .st-hero,
html body .st-hero .status.draft,
html body .st-kpi,
html body .st-pv-frame,
html body .st-pv-wrap,
html body .st-rcpt-row.st-row-header,
html body .st-rcpt-status.queued,
html body .st-rcpts,
html body .st-rcpts-head,
html body .st-row:hover,
html body .st-type,
html body .st-wrap input:not([type]),
html body .st-wrap input[type=text],
html body .st-wrap select,
html body .stage-avatar,
html body .stage-bill-none,
html body .stage-card .stage-actions .btn-ghost,
html body .stage-card .stage-actions .btn-ghost:hover:not(:disabled),
html body .stage-current .stage-step-btn,
html body .stage-info,
html body .stage-num,
html body .stage-override[open] > summary,
html body .stage-pill,
html body .stage-pill:hover,
html body .stage-schedule,
html body .stage-step-btn,
html body .stage-sub-bar,
html body .stage-sub-check,
html body .stage-sub-count,
html body .stage-sub-dates,
html body .stage-sublist,
html body .stage-submission-file,
html body .stage-submission-file:hover,
html body .stage-submission-note,
html body .stage-todo .stage-num,
html body .stage-todo .stage-step-btn,
html body .stage-type-switch[open] > summary,
html body .stamp-card,
html body .start-row .pill,
html body .stat,
html body .strip-bar,
html body .strip-bg.is-weekend,
html body .strip-nav,
html body .strip-nb,
html body .strip-nb:hover,
html body .sts-card,
html body .sts-card .head,
html body .sts-conf.unknown,
html body .sts-hero .pill,
html body .sts-kpi,
html body .sub-row,
html body .sv-card,
html body .sv-form,
html body .sv-form select,
html body .sv-results .sv-snippet,
html body .tbl td,
html body .td-row input,
html body .td-row select,
html body .td-row textarea,
html body .te-field input,
html body .te-field textarea,
html body .te-row,
html body .ti-admin-table code,
html body .ti-admin-table th,
html body .ti-card,
html body .ti-composer,
html body .ti-events code,
html body .ti-form-grid input,
html body .ti-form-grid select,
html body .ti-msg-inbound,
html body .ti-side-card,
html body .ti-side-card form button,
html body .ti-side-card select,
html body .ti-stat,
html body .ti-status-closed,
html body .ti-tabs,
html body .ti-thread-table th,
html body .ti-thread-table tr:hover,
html body .ti-toolbar select,
html body .ti-visibility-pill,
html body .tk-actions button,
html body .tk-actions button:hover,
html body .tk-filters input[type=text],
html body .tk-filters select,
html body .tk-form,
html body .tk-table tbody tr:hover,
html body .tk-table th,
html body .tl-add-card,
html body .tl-add-form input[type="color"],
html body .tl-add-form input[type="text"],
html body .tl-add-form select,
html body .tl-add-head,
html body .tl-bar.k-task,
html body .tl-bar.st-not_started,
html body .tl-btn,
html body .tl-btn:hover,
html body .tl-card,
html body .tl-card-preview,
html body .tl-corner,
html body .tl-count,
html body .tl-day.is-weekend,
html body .tl-days,
html body .tl-list a:hover,
html body .tl-name,
html body .tl-pill,
html body .tl-scroll,
html body .tl-topbar,
html body .tl-view,
html body .tl-view:hover,
html body .tm-btn,
html body .tm-head,
html body .tm-table,
html body .tm-table th,
html body .tp-bar,
html body .tp-doc,
html body .tp-doc-wrap,
html body .tpl-badge,
html body .tpl-card,
html body .tpl-form-card,
html body .triage-banner,
html body .triage-tab:hover,
html body .triage-tab:not(.active) .count,
html body .type-stat.is-active,
html body .type-stat:hover,
html body .ua-modal input[type=email],
html body .ua-modal input[type=password],
html body .ua-modal input[type=tel],
html body .ua-modal input[type=text],
html body .ua-role,
html body .ua-role-chk,
html body .ua-table th,
html body .upl-mode,
html body .vc-btn.secondary,
html body .vc-card,
html body .vc-field input[type=file],
html body .vc-field input[type=number],
html body .vc-field input[type=text],
html body .vc-field select,
html body .vc-field textarea,
html body .vc-geo,
html body .vc-recent li,
html body .ver-btn,
html body .ver-btn:hover,
html body .ver-card,
html body .ver-diff,
html body .ver-diff-form,
html body .ver-diff-line.add,
html body .ver-head,
html body .ver-table th,
html body .vis-people-picker .vp-row:hover,
html body .vis-people-picker[open] > summary,
html body .vm-card,
html body .vp-active,
html body .vp-btn-ghost,
html body .vp-card,
html body .vp-disp-grid button,
html body .vp-key,
html body .vp-key:hover,
html body .vp-phone,
html body .vp-stat,
html body .vq-fallback,
html body .vq-hint code,
html body .vq-recents,
html body .vq-stage,
html body .vq-transcript,
html body .wa-preview,
html body .wc-card,
html body .wc-hero .user-pill,
html body .wc-qr-wrap,
html body .wc-wrap code,
html body .wd-btn,
html body .wd-card,
html body .wd-detail,
html body .wd-detail pre,
html body .wd-row.wd-row-header,
html body .wd-topbar,
html body .we-btn,
html body .we-btn:hover,
html body .we-sec,
html body .we-sec h3,
html body .wf-add-btn,
html body .wf-add-btn:hover,
html body .wf-branch-item,
html body .wf-branch-meta code,
html body .wf-branches,
html body .wf-node,
html body .wf-node .wf-handle,
html body .wf-toolbar,
html body .wf-waiting,
html body .wfap-btn.is-cancel,
html body .wfap-card,
html body .wfap-card > .head,
html body .wfap-empty,
html body .wfap-log,
html body .wfap-pill.is-cancelled,
html body .wfap-stat,
html body .wfap-table th,
html body .wfsw-btn,
html body .wfsw-card,
html body .wfsw-card > .head,
html body .wfsw-chain,
html body .wfsw-empty,
html body .wfsw-pill.is-cancelled,
html body .wfsw-table th,
html body .wh-btn,
html body .wh-btn:hover,
html body .wh-card,
html body .wh-card-head,
html body .wh-edit,
html body .wh-edit input[type="text"],
html body .wh-events,
html body .wh-foot,
html body .wh-form input[type="text"],
html body .wh-pill.muted,
html body .wh-row.wh-row-header,
html body .wh-topbar,
html body .wl-btn,
html body .wl-btn:hover,
html body .wl-card,
html body .wl-scroll,
html body .wl-table td.wl-name,
html body .wl-table th,
html body .wl-table th.wl-name,
html body .wl-tbl th,
html body .wl-tbl tr:hover td,
html body .wp-action-grid,
html body .wp-card,
html body .wp-field input,
html body .wp-field input[type=tel],
html body .wp-field input[type=text],
html body .wp-field select,
html body .wp-field textarea,
html body .wp-module-row label,
html body .wp-pill-off,
html body .wp-tag.retired,
html body .wp-toggle,
html body .wq-btn,
html body .wq-queue,
html body a.kpi-card,
html body code.col,
html body details.client > summary:hover,
html body details.ps-month > summary:hover,
html body details.ps-month[open] > summary,
html body details.supplier > summary:hover,
html body details.wp-advanced,
html body details[open] > .proj-info-edit-btn,
html body pre.gql-output,
html body pre.mig-pre,
html body select.select:focus,
html body select.select:hover,
html body table.ad-table th,
html body table.ce-table,
html body table.ce-table td input:focus,
html body table.ce-table th,
html body table.cp-tbl th,
html body table.data-table th,
html body table.dr-tbl,
html body table.ek-tbl th,
html body table.et-tbl th,
html body table.ff input[type=text],
html body table.ff select,
html body table.ger-list th,
html body table.gql-history th,
html body table.iud-list th,
html body table.jd-apps tr:hover td,
html body table.mig-tbl th,
html body table.mt-table th,
html body table.mt-table tr:hover,
html body table.pinf-list th,
html body table.rd-tbl th,
html body table.req-tbl tr:hover td,
html body table.rj-tbl tr:hover td,
html body table.si-tbl th,
html body table.so-tbl tbody tr:hover,
html body table.sr-grid thead th,
html body table.sts-list th,
html body thead .lu-lead {
  background-color: var(--sg-auto) !important;
}

html body .ai-extract,
html body .cn-structure,
html body .inbox-shell.ch-instagram .inbox-thread .avatar,
html body .oc-canvas,
html body .re-master,
html body .sig-pad,
html body .stage-done .stage-step-btn,
html body .tl-track,
html body .wf-canvas-wrap {
  background: var(--sg-auto) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   GENERATED — colours that must survive the tint
   738 rules whose selector is a *variant* of one of the tinted selectors
   above (`.li-action-btn.cdx-del`, `.btn.danger`, …). The tint carries
   `!important`, which beats a more specific rule that does not, so every
   meaningful colour is re-asserted here — after the tint, at its own
   specificity, with its original value.
   ══════════════════════════════════════════════════════════════════════════ */

html body .askai-msg.askai-user { background: #4f46e5 !important; }
html body .askai-suggestions button:hover { background: #eef2ff !important; }
html body .askai-composer button { background: #4f46e5 !important; }
html body .askai-composer button:hover { background: #4338ca !important; }
html body .askai-composer button:disabled { background: #cbd5e1 !important; }
html body .bm-quickadd button { background: #0f172a !important; }
html body .cdx-go { background: #b91c1c !important; }
html body .colcfg-move button:hover { background: #ecfdf3 !important; }
html body .tbl th { background: linear-gradient(135deg,#141414,#373737) !important; }
html body .tbl tr:nth-child(even) td { background: #fbf9f7 !important; }
html body .notes-panel h3 .count { background: #eef2ff !important; }
html body .note-card.pinned { background: #fffbeb !important; }
html body .note-action-btn.danger:hover { background: #fef2f2 !important; }
html body .note-comment .avatar { background: #eef2ff !important; }
html body .mention-dropdown .item.is-active { background: #eef2ff !important; }
html body .ptl-pick > summary:hover { background: #e2e8f0 !important; }
html body .ptl-pick[open] > summary { background: #e0e7ff !important; }
html body .stage-card .stage-actions .btn-primary { background: linear-gradient(135deg, #34d27f 0%, #16a34a 100%) !important; }
html body .stage-card .stage-actions .btn-primary:disabled { background: #cbd5e1 !important; }
html body .stage-done .stage-num { background: linear-gradient(135deg,#34d27f,#16a34a) !important; }
html body .stage-current .stage-num { background: #16a34a !important; }
html body .stage-done .stage-avatar { background: #d6f5e0 !important; }
html body .stage-current .stage-avatar { background: #16a34a !important; }
html body .stage-current .stage-sub-count { background: #dcf6e3 !important; }
html body .stage-sub-count.all-done { background: #dcf6e3 !important; }
html body .stage-subitem.sub-done .stage-sub-check { background: linear-gradient(135deg,#34d27f,#16a34a) !important; }
html body .stage-sub-bar > span { background: linear-gradient(90deg,#34d399,#16a34a) !important; }
html body .sla-ok .sla-bar > span { background: linear-gradient(90deg,#34d399,#16a34a) !important; }
html body .sla-warn .sla-bar > span { background: linear-gradient(90deg,#fbbf24,#f59e0b) !important; }
html body .sla-overdue .sla-bar > span { background: linear-gradient(90deg,#f87171,#dc2626) !important; }
html body .deliv-count.all-done { background: #dcfce7 !important; }
html body .deliv-done .deliv-check { background: #16a34a !important; }
html body .deliv-pick:hover { background: #fef2f2 !important; }
html body .billing-table tr.b-row-current td { background: #fef2f2 !important; }
html body .sl-row.selected { background: #eef2ff !important; }
html body .type-stat .badge { background: #e2e8f0 !important; }
html body .edit-mini:hover { background: #e2e8f0 !important; }
html body .row-edit-form td { background: #fffbeb !important; }
html body .ai-banner { background: linear-gradient(120deg, #ede9fe 0%, #dbeafe 100%) !important; }
html body .ai-banner.loading { background: #fef3c7 !important; }
html body .qoyod-status.ok { background: #dcfce7 !important; }
html body .pill-synced { background: #dcfce7 !important; }
html body .pill-pending { background: #fef3c7 !important; }
html body .pill-failed { background: #fee2e2 !important; }
html body .direction-toggle input:checked + label { background: #eef2ff !important; }
html body .rc-upload:hover { background: #eef2ff !important; }
html body .rc-upload.dragover { background: #e0e7ff !important; }
html body .pill-pending { background: #fef3c7 !important; }
html body .pill-approved { background: #dcfce7 !important; }
html body .pill-failed { background: #fee2e2 !important; }
html body .pill-due { background: #fde68a !important; }
html body .proposal.warn { background: linear-gradient(120deg, #fef3c7 0%, #fef9c3 100%) !important; }
html body .confidence-bar > span { background: #15803d !important; }
html body .pill-warn { background: #fde68a !important; }
html body .pill-default { background: #dcfce7 !important; }
html body .sa-note { background: #fef9c3 !important; }
html body .sa-tip:hover { background: #6366f1 !important; }
html body .ac-cal-toggle a.is-on { background: #0f172a !important; }
html body .ac-cal-src.is-on { background: #0f172a !important; }
html body .ac-mode-btn.is-on { background: #0f172a !important; }
html body .strip-bg.is-today { background: #ecfdf5 !important; }
html body .strip-bar.is-span { background: #eef2ff !important; }
html body .strip-bar.is-span { background: color-mix(in srgb, var(--ec,#6366f1) 13%, #fff) !important; }
html body .strip-bar.is-stage { background: color-mix(in srgb,var(--ec,#4f46e5) 13%,#fff) !important; }
html body .strip-bar.is-stage.is-span { background: color-mix(in srgb,var(--ec,#4f46e5) 20%,#fff) !important; }
html body .ac-pv-danger:hover { background: #fef2f2 !important; }
html body .rev-approve { background: #16a34a !important; }
html body .rev-approve:hover { background: #15803d !important; }
html body .rev-reject:hover { background: #fef2f2 !important; }
html body .wq-done-btn { background: #16a34a !important; }
html body .wq-done-btn:hover { background: #15803d !important; }
html body .wq-done-btn:disabled { background: #e2e8f0 !important; }
html body .rev-view:hover { background: #eff6ff !important; }
html body .aem-ok { background: #16a34a !important; }
html body .ac-toggle a.is-on { background: #0f172a !important; }
html body .ac-section-overdue .ac-pill { background: #fee2e2 !important; }
html body .ac-section-today .ac-pill { background: #fef3c7 !important; }
html body .ac-section-upcoming .ac-pill { background: #e0f2fe !important; }
html body .ac-group.g-overdue td { background: #fef2f2 !important; }
html body .ac-group.g-today td { background: #fffbeb !important; }
html body .ac-group.g-upcoming td { background: #eff6ff !important; }
html body .ac-prio.urgent { background: #fee2e2 !important; }
html body .ac-prio.high { background: #ffedd5 !important; }
html body .ac-prio.medium { background: #dbeafe !important; }
html body .ac-bulk-btn:hover { background: #e2e8f0 !important; }
html body .ac-bulk-btn.is-danger { background: #fee2e2 !important; }
html body .ac-bulk-btn.is-danger:hover { background: #fecaca !important; }
html body .ac-rm-btn:hover { background: #f7fee7 !important; }
html body .ac-rm-btn.go { background: #65a30d !important; }
html body .tl-day.is-today { background: #dcfce7 !important; }
html body .tl-bar.st-active { background: #dbeafe !important; }
html body .tl-bar.st-submitted { background: #fee2e2 !important; }
html body .tl-bar.st-approved { background: #dcfce7 !important; }
html body .abx-pill.is-running { background: #dcfce7 !important; }
html body .abx-pill.is-paused { background: #fef3c7 !important; }
html body .abx-pill.is-completed { background: #dbeafe !important; }
html body .abx-pill.is-significant { background: #dcfce7 !important; }
html body .abx-pill.is-suggestive { background: #fef3c7 !important; }
html body .abx-pill.is-winner-a { background: #dbeafe !important; }
html body .abx-pill.is-winner-b { background: #ede9fe !important; }
html body .abx-btn { background: #0f172a !important; }
html body .abx-btn.is-danger { background: #dc2626 !important; }
html body .abx-filter a.is-on { background: #0f172a !important; }
html body .ais-suggest a:hover { background: #e2e8f0 !important; }
html body .wfap-pill.is-pending { background: #fef3c7 !important; }
html body .wfap-pill.is-approved { background: #dcfce7 !important; }
html body .wfap-pill.is-rejected { background: #fee2e2 !important; }
html body .wfap-pill.is-timed_out { background: #fed7aa !important; }
html body .wfap-pill.is-sequential { background: #dbeafe !important; }
html body .wfap-pill.is-parallel { background: #ede9fe !important; }
html body .wfap-btn { background: #0f172a !important; }
html body .wfap-btn.is-approve { background: #16a34a !important; }
html body .wfap-btn.is-reject { background: #dc2626 !important; }
html body .bd-pill.ok { background: #dcfce7 !important; }
html body .bd-pill.warn { background: #fef3c7 !important; }
html body .br-pill { background: #eef2ff !important; }
html body .br-pill.reverted { background: #fef3c7 !important; }
html body .br-btn.danger { background: #ef4444 !important; }
html body .cc-msg.out { background: #eef2ff !important; }
html body .cc-msg.system { background: #fffbeb !important; }
html body .cc-form button { background: #0f172a !important; }
html body .ce-btn { background: #0f172a !important; }
html body .ce-btn.danger { background: #fee2e2 !important; }
html body .ce-status.editing { background: #dbeafe !important; }
html body .ce-status.saved { background: #d1fae5 !important; }
html body .qapp-pill.is-pending { background: #fef3c7 !important; }
html body .qapp-pill.is-approved { background: #dcfce7 !important; }
html body .qapp-pill.is-rejected { background: #fee2e2 !important; }
html body .qapp-btn { background: #0f172a !important; }
html body .qapp-btn.is-approve { background: #16a34a !important; }
html body .qapp-btn.is-reject { background: #dc2626 !important; }
html body .iud-pill.is-default { background: #dcfce7 !important; }
html body .iud-form button.btn { background: #6366f1 !important; }
html body .iud-form button.btn:hover { background: #4f46e5 !important; }
html body .ek-pill.on { background: #dcfce7 !important; }
html body .ek-pill.off { background: #fee2e2 !important; }
html body .ek-pill.kind { background: #fef3c7 !important; }
html body .ek-form button { background: #f59e0b !important; }
html body .ek-btn.danger { background: #fee2e2 !important; }
html body .et-pill.on { background: #dcfce7 !important; }
html body .et-pill.off { background: #fee2e2 !important; }
html body .et-pill.kind { background: #ede9fe !important; }
html body .et-form button { background: #0f172a !important; }
html body .et-btn.danger { background: #fee2e2 !important; }
html body .gs-btn { background: #0f172a !important; }
html body .gs-actions a { background: #ecfdf5 !important; }
html body .gs-bucket-tab.active { background: #0f172a !important; }
html body .gql-btn { background: #a21caf !important; }
html body .gql-pill.ok { background: #dcfce7 !important; }
html body .gql-pill.err { background: #fee2e2 !important; }
html body .gql-example:hover { background: #e2e8f0 !important; }
html body .mig-pill.pending { background: #fef3c7 !important; }
html body .od-pill.ok { background: #dcfce7 !important; }
html body .od-pill.warn { background: #fef3c7 !important; }
html body .pinf-form button.btn { background: #db2777 !important; }
html body .pinf-form button.btn:hover { background: #be185d !important; }
html body .pe-chip.lime { background: #ecfccb !important; }
html body .pe-btn { background: #65a30d !important; }
html body .pe-btn.danger { background: #fef2f2 !important; }
html body .pe-saved-pill.err { background: #fef2f2 !important; }
html body .qrul-pill.is-on { background: #dcfce7 !important; }
html body .qrul-pill.is-off { background: #fee2e2 !important; }
html body .qrul-btn { background: #0f172a !important; }
html body .qrul-btn.is-danger { background: #dc2626 !important; }
html body .qrul-hint code { background: #0f172a !important; }
html body .qcfg-savings { background: #ecfdf5 !important; }
html body .qcfg-pill.is-on { background: #dcfce7 !important; }
html body .qcfg-pill.is-off { background: #fee2e2 !important; }
html body .qcfg-btn { background: #0f172a !important; }
html body .qcfg-btn.is-danger { background: #dc2626 !important; }
html body .pe-btn { background: #65a30d !important; }
html body .pe-btn.danger { background: #fef2f2 !important; }
html body .ph-card.deleted-row { background: #fafaf9 !important; }
html body .te-btn { background: #65a30d !important; }
html body .te-btn.danger { background: #fef2f2 !important; }
html body .rd-pill.on { background: #dcfce7 !important; }
html body .rd-pill.off { background: #fee2e2 !important; }
html body .rd-pill.kind { background: #e0e7ff !important; }
html body .rd-form button { background: #0f172a !important; }
html body .rd-btn:hover { background: #e2e8f0 !important; }
html body .rd-btn.danger { background: #fee2e2 !important; }
html body .rd-btn.fire { background: #dbeafe !important; }
html body .rd-filters a.active { background: #1e293b !important; }
html body .rd-score-pill.high { background: #fee2e2 !important; }
html body .rd-score-pill.medium { background: #fef3c7 !important; }
html body .rd-score-pill.low { background: #dcfce7 !important; }
html body .rd-factor.high { background: #fee2e2 !important; }
html body .rd-factor.medium { background: #fef3c7 !important; }
html body .rd-factor.low { background: #e0e7ff !important; }
html body .sts-conf.high { background: #dcfce7 !important; }
html body .sts-conf.medium { background: #fef3c7 !important; }
html body .sts-conf.low { background: #dbeafe !important; }
html body .si-sent-pill.negative { background: #fee2e2 !important; }
html body .si-sent-pill.positive { background: #dcfce7 !important; }
html body .ci-card .kind-pill { background: #eef2ff !important; }
html body .ci-card .kind-pill.email { background: #dbeafe !important; }
html body .ci-card .kind-pill.follow_up_activity { background: #dcfce7 !important; }
html body .ci-card .kind-pill.note { background: #fef3c7 !important; }
html body .ci-btn-approve { background: #16a34a !important; }
html body .ci-btn-approve:hover { background: #15803d !important; }
html body .ci-btn-reject:hover { background: #fef2f2 !important; }
html body .vq-fallback button { background: #4f46e5 !important; }
html body .ai-status.is-off { background: #fef3c7 !important; }
html body .ai-rate-fill.is-low { background: #dc2626 !important; }
html body .pat-row .fill.low { background: #dc2626 !important; }
html body .at-btn.is-danger:hover { background: #fee2e2 !important; }
html body .al-chip.is-on { background: #0f172a !important; }
html body .al-action-pill.created { background: #dbeafe !important; }
html body .al-action-pill.updated { background: #fef3c7 !important; }
html body .al-action-pill.deleted { background: #fee2e2 !important; }
html body .al-action-pill.merged { background: #f3e8ff !important; }
html body .al-action-pill.signed { background: #dcfce7 !important; }
html body .al-action-pill.moved { background: #ecfeff !important; }
html body .ae-card-head .num { background: #6366f1 !important; }
html body .ae-run-status.succeeded { background: #dcfce7 !important; }
html body .ae-run-status.failed { background: #fee2e2 !important; }
html body .au-row-status.is-on { background: #dcfce7 !important; }
html body .au-action-btn.is-danger:hover { background: #fee2e2 !important; }
html body .au-action-btn.is-muted { background: #fef3c7 !important; }
html body .wfsw-pill.is-invoked { background: #dbeafe !important; }
html body .wfsw-pill.is-completed { background: #dcfce7 !important; }
html body .wfsw-pill.is-failed { background: #fee2e2 !important; }
html body .fc-daygrid-more-link:hover { background: #dc2626 !important; }
html body .h3 { background: #a5f3fc !important; }
html body .lf-chip:has(input:checked) { background: #eef2ff !important; }
html body .au-btn.is-primary { background: #0f172a !important; }
html body .au-btn.is-primary:hover { background: #1e293b !important; }
html body .as-btn.is-danger:hover { background: #fee2e2 !important; }
html body .as-form button { background: #0f172a !important; }
html body .cd-status.scheduled { background: #fef3c7 !important; }
html body .cd-status.sending { background: #dbeafe !important; }
html body .cd-status.sent { background: #dcfce7 !important; }
html body .cd-status.paused { background: #fee2e2 !important; }
html body .cd-btn.is-primary { background: #0f172a !important; }
html body .cd-btn.is-primary:hover { background: #1e293b !important; }
html body .cd-btn.is-danger:hover { background: #fee2e2 !important; }
html body .cl-chip.is-on { background: #0f172a !important; }
html body .cl-pill.kind-broadcast { background: #eef2ff !important; }
html body .cl-pill.kind-ab_test { background: #fef3c7 !important; }
html body .cl-status.scheduled { background: #fef3c7 !important; }
html body .cl-status.sending { background: #dbeafe !important; }
html body .cl-status.sent { background: #dcfce7 !important; }
html body .cl-status.paused { background: #fee2e2 !important; }
html body .cn-kind-card.is-on { background: #eef2ff !important; }
html body .cn-btn.is-primary { background: #0f172a !important; }
html body .cn-btn.is-primary:hover { background: #1e293b !important; }
html body .st-hero .status.sent { background: #dcfce7 !important; }
html body .st-hero .status.sending { background: #dbeafe !important; }
html body .st-rcpt-status.sent { background: #dbeafe !important; }
html body .st-rcpt-status.opened { background: #fef3c7 !important; }
html body .st-rcpt-status.clicked { background: #dcfce7 !important; }
html body .st-rcpt-status.bounced { background: #fee2e2 !important; }
html body .st-rcpt-status.unsubscribed { background: #f3e8ff !important; }
html body .st-rcpt-status.failed { background: #fee2e2 !important; }
html body .sp-btn.is-primary { background: #0f172a !important; }
html body .sp-btn.is-primary:hover { background: #1e293b !important; }
html body .sp-btn.is-danger:hover { background: #fee2e2 !important; }
html body .cd-subnav a .pill { background: rgba(15,23,42,.06) !important; }
html body .cd-subnav a.is-on .pill { background: rgba(126,177,44,.18) !important; }
html body .cd-card-head .count { background: rgba(15,23,42,.12) !important; }
html body .cd-portal .p-btn.primary { background: #7eb12c !important; }
html body .cd-portal .p-btn.primary:hover { background: #6c9b22 !important; }
html body .cd-row-actions .btn-dark { background: #060505 !important; }
html body .cd-row-actions .btn-dark:hover { background: #2a2a2e !important; }
html body .c-card-head .count { background: rgba(15,23,42,.12) !important; }
html body .c-actions .btn-primary { background: #060505 !important; }
html body .c-actions .btn-primary:hover { background: #2a2a2e !important; }
html body .c-actions .btn-danger:hover { background: #fef2f2 !important; }
html body .ctbl-pcount.has { background: #dcf5e4 !important; }
html body .kbk-bar .btn { background: #1e293b !important; }
html body .kbk-delbtn { background: #b91c1c !important; }
html body .cm-row.is-survivor { background: rgba(34,197,94,.06) !important; }
html body .pending-banner .btn-discard { background: #fef2f2 !important; }
html body .ce-rem-person:has(input:checked) { background: #eaf1fa !important; }
html body .ce-btn-preview:hover { background: #dbeafe !important; }
html body .ctx-cust-filter { background: #fafbf6 !important; }
html body .ctx-sortby { background: #fafbf6 !important; }
html body .ctx-chip:hover { background: rgba(255, 255, 255, .60) !important; }
html body .ctx-act.advance { background: rgba(126, 177, 44, .10) !important; }
html body .ctx-act.danger:hover { background: #fef2f2 !important; }
html body .cbk-bar .btn { background: #1e293b !important; }
html body .cbk-delbtn { background: #b91c1c !important; }
html body .cbk-rowdel:hover { background: #fef2f2 !important; }
html body .conv-ch-whatsapp .chat-head { background: linear-gradient(135deg,#075e54,#128c7e) !important; }
html body .conv-ch-whatsapp .chat-head .avatar { background: linear-gradient(135deg,#25d366,#128c7e) !important; }
html body .conv-ch-whatsapp .chat-foot .btn-primary { background: #128c7e !important; }
html body .conv-ch-whatsapp .chat-foot .btn-primary:hover { background: #075e54 !important; }
html body .conv-ch-instagram .chat-head .avatar { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5) border-box !important; }
html body .conv-ch-instagram .chat-foot .btn-primary { background: linear-gradient(45deg,#d62976,#962fbf) !important; }
html body .il-add-form button { background: #0f172a !important; }
html body .at-flag { background: #eef2ff !important; }
html body .at-flag.custom { background: #fce7f3 !important; }
html body .at-btn.is-danger:hover { background: #fee2e2 !important; }
html body .at-form button { background: #0f172a !important; }
html body .at-form button:hover { background: #1e293b !important; }
html body .cr-card-head.won { background: #dcfce7 !important; }
html body .cr-card-head.lost { background: #fee2e2 !important; }
html body .cr-btn.is-danger:hover { background: #fee2e2 !important; }
html body .cr-add button { background: #0f172a !important; }
html body .cr-add button:hover { background: #1e293b !important; }
html body .es-btn.is-danger:hover { background: #fee2e2 !important; }
html body .es-btn.is-primary { background: #0f172a !important; }
html body .es-btn.is-primary:hover { background: #1e293b !important; }
html body .ete-btn.is-primary { background: #0f172a !important; }
html body .ete-btn.is-primary:hover { background: #1e293b !important; }
html body .et-btn.is-danger:hover { background: #fee2e2 !important; }
html body .et-form button { background: #0f172a !important; }
html body .et-form button:hover { background: #1e293b !important; }
html body .fe-tab.is-on { background: #0f172a !important; }
html body .fe-flag.req { background: #fee2e2 !important; }
html body .fe-flag.ro { background: #fef3c7 !important; }
html body .fe-btn.is-danger:hover { background: #fee2e2 !important; }
html body .csc-btn { background: #16a34a !important; }
html body .csc-btn:hover { background: #15803d !important; }
html body .ffv2-fieldref code:hover { background: #eef2ff !important; }
html body .ffv2-btn { background: #6366f1 !important; }
html body .ffv2-btn:hover { background: #4f46e5 !important; }
html body .ffv2-examples code { background: #0f172a !important; }
html body .lb-btn.is-danger:hover { background: #fee2e2 !important; }
html body .lb-form button { background: #0f172a !important; }
html body .lb-form button:hover { background: #1e293b !important; }
html body .pd-stage.is-won { background: rgba(34,197,94,.04) !important; }
html body .pd-stage.is-lost { background: rgba(220,38,38,.04) !important; }
html body .pd-flag.won { background: #dcfce7 !important; }
html body .pd-flag.lost { background: #fee2e2 !important; }
html body .pd-btn.is-danger:hover { background: #fee2e2 !important; }
html body .pd-btn.is-primary { background: #0f172a !important; }
html body .pd-btn.is-primary:hover { background: #1e293b !important; }
html body .pd-add-stage button { background: #0f172a !important; }
html body .pd-add-stage button:hover { background: #1e293b !important; }
html body .pl-flag { background: #eef2ff !important; }
html body .pl-btn.is-danger:hover { background: #fee2e2 !important; }
html body .st-badge { background: #eef2ff !important; }
html body .im-btn.is-primary { background: #0f172a !important; }
html body .im-btn.is-primary:hover { background: #1e293b !important; }
html body .ci-btn.is-primary { background: #0f172a !important; }
html body .ci-btn.is-primary:hover { background: #1e293b !important; }
html body .phase-chip.phase-prog { background: #ede9fe !important; }
html body .assignee-chk.on { background: #ecfdf3 !important; }
html body .dr-actions a { background: #eef2ff !important; }
html body .dr-actions a:hover { background: #e0e7ff !important; }
html body .dm-row.is-survivor { background: rgba(34,197,94,.06) !important; }
html body .dm-status.won { background: #dcfce7 !important; }
html body .dm-status.lost { background: #fee2e2 !important; }
html body .nd-stage:hover { background: #dde3ea !important; }
html body .nd-stage.is-passed { background: #c9f2d8 !important; }
html body .nd-stage.is-selected { background: #16a34a !important; }
html body .dv2-shell .col[data-stage="won"] .card { background: linear-gradient(180deg, #f7fde6 0%, #ffffff 60%) !important; }
html body .actions-glass-card .btn-ghost { background: rgba(255, 255, 255, 0.6) !important; }
html body .actions-glass-card .btn-win { background: linear-gradient(135deg, var(--green), #15803d) !important; }
html body .actions-glass-card .btn-win:hover { background: linear-gradient(135deg, #15803d, #166534) !important; }
html body .actions-glass-card .btn-lose { background: rgba(220, 38, 38, 0.08) !important; }
html body .actions-glass-card .btn-lose:hover { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
html body .actions-glass-card select.select { background: rgba(255, 255, 255, 0.6) !important; }
html body .nd-modal .nd-actions .btn-primary:hover { background: #1a3a5c !important; }
html body .nd-modal .nd-actions button[type="submit"]:hover { background: #1a3a5c !important; }
html body select.select { background: rgba(255, 255, 255, 0.6) !important; }
html body .table-glass-card table.table tr:hover td { background: rgba(156, 203, 71, 0.04) !important; }
html body #dl-wrap .dl-toggle a.on { background: var(--brand,#2f7d4f) !important; }
html body .dv2-shell .stage-chev:nth-child(even):not(.is-active):not(.is-current) { background: #c7eed4 !important; }
html body .dv2-shell .stage-chev.is-active { background: #16a34a !important; }
html body .dv2-shell .stage-chev.is-current { background: #15803d !important; }
html body .dv2-shell .drag-zone.lost.drag-over { background: #fde8ee !important; }
html body .rp-pill { background: #e8f3d6 !important; }
html body .docs-filter-pop .dfp-search input { background: #fafbf6 !important; }
html body .docs-action-ghost:hover { background: #fafbf6 !important; }
html body .docs-action-ghost[aria-expanded="true"] { background: #fafbf6 !important; }
html body .doc-row[data-ext="pdf"] .dr-tile { background: #fef2f2 !important; }
html body .doc-row[data-ext="doc"] .dr-tile { background: #eff6ff !important; }
html body .doc-row[data-ext="docx"] .dr-tile { background: #eff6ff !important; }
html body .doc-row[data-ext="dwg"] .dr-tile { background: #fff7ed !important; }
html body .doc-row[data-ext="dxf"] .dr-tile { background: #fff7ed !important; }
html body .doc-row[data-ext="zip"] .dr-tile { background: #fefce8 !important; }
html body .doc-row[data-ext="rar"] .dr-tile { background: #fefce8 !important; }
html body .doc-row[data-ext="7z"] .dr-tile { background: #fefce8 !important; }
html body .dr-btn-primary { background: var(--p-text-dark, #0f172a) !important; }
html body .dr-btn-primary:hover { background: #1e293b !important; }
html body .dr-btn-accent { background: #eef2ff !important; }
html body .dr-btn-accent:hover { background: #e0e7ff !important; }
html body .dr-btn-approve { background: #16a34a !important; }
html body .dr-btn-approve:hover { background: #15803d !important; }
html body .dr-btn-sendback { background: #fef2f2 !important; }
html body .dr-btn-sendback:hover { background: #fee2e2 !important; }
html body .doc-card .dc-btn:hover { background: #fafbf6 !important; }
html body .tm-pill.on { background: #dcfce7 !important; }
html body .tm-pill.off { background: #fee2e2 !important; }
html body .tm-pill.starter { background: #eef2ff !important; }
html body .ab-pill.is-sending { background: #fef3c7 !important; }
html body .ab-pill.is-sent { background: #dcfce7 !important; }
html body .ab-pill.is-completed { background: #dbeafe !important; }
html body .ab-pill.is-cancelled { background: #fee2e2 !important; }
html body .abr-pill.is-sending { background: #fef3c7 !important; }
html body .abr-pill.is-sent { background: #dcfce7 !important; }
html body .abr-pill.is-completed { background: #dbeafe !important; }
html body .abr-pill.is-cancelled { background: #fee2e2 !important; }
html body .abr-pill.is-winner { background: #dcfce7 !important; }
html body .abr-btn { background: #0f172a !important; }
html body .abr-btn.is-danger { background: #ef4444 !important; }
html body .email-filter-tabs a:hover { background: #fafbf6 !important; }
html body .email-filter-tabs .badge { background: rgba(15,23,42,.10) !important; }
html body .email-filter-tabs a.is-on .badge { background: rgba(255,255,255,.18) !important; }
html body .email-search-clear:hover { background: #fef2f2 !important; }
html body .tpl-badge-shared { background: #dbeafe !important; }
html body .tpl-badge-cat { background: #e8f3d6 !important; }
html body .gd-search button { background: #0f172a !important; }
html body .gd-btn.is-export { background: #0f172a !important; }
html body .gd-btn.is-erase:hover { background: #fee2e2 !important; }
html body .gc-bar > span { background: linear-gradient(90deg, #6366f1, #06b6d4) !important; }
html body .gc-form button { background: #0f172a !important; }
html body .gc-form button:hover { background: #1e293b !important; }
html body .gem-btn { background: #0f172a !important; }
html body .gem-btn.is-primary { background: #4f46e5 !important; }
html body .gem-status.queued { background: #fef3c7 !important; }
html body .gem-status.sending { background: #dbeafe !important; }
html body .gem-status.sent { background: #dcfce7 !important; }
html body .gem-status.failed { background: #fee2e2 !important; }
html body .ger-status.queued { background: #fef3c7 !important; }
html body .ger-status.sending { background: #dbeafe !important; }
html body .ger-status.sent { background: #dcfce7 !important; }
html body .ger-status.failed { background: #fee2e2 !important; }
html body .ger-row-status.pending { background: #fef3c7 !important; }
html body .ger-row-status.sent { background: #dcfce7 !important; }
html body .ger-row-status.failed { background: #fee2e2 !important; }
html body .ger-btn { background: #0f172a !important; }
html body .ger-btn.is-danger { background: #dc2626 !important; }
html body .st-count { background: #e8f0d8 !important; }
html body .lc-chip.is-on { background: #1e293b !important; }
html body .att-grid .day-head.today { background: #fee2e2 !important; }
html body .att-grid .day-head.holiday { background: #fef2f2 !important; }
html body .att-cell.holiday { background: #fef2f2 !important; }
html body .att-pill-present { background: #16a34a !important; }
html body .att-pill-absent { background: #dc2626 !important; }
html body .att-pill-late { background: #f59e0b !important; }
html body .att-pill-half_day { background: #0ea5e9 !important; }
html body .att-pill-leave { background: #a855f7 !important; }
html body .att-pill-holiday { background: #64748b !important; }
html body .att-tabs a.on { background: #0f172a !important; }
html body .att-views a.on { background: #0f172a !important; }
html body .auto-chip.ok { background: #dcfce7 !important; }
html body .auto-chip.warn { background: #fef3c7 !important; }
html body .auto-chip.err { background: #fee2e2 !important; }
html body .cm-status.draft { background: #e2e8f0 !important; }
html body .cm-status.published { background: #dcfce7 !important; }
html body .cm-status.scheduled { background: #fef3c7 !important; }
html body .cm-severity.low { background: #fef9c3 !important; }
html body .cm-severity.medium { background: #fed7aa !important; }
html body .cm-severity.high { background: #fecaca !important; }
html body .hr-dept-bar .bar > span { background: linear-gradient(90deg,#0ea5e9,#6366f1) !important; }
html body .cel-card.today { background: #fffbeb !important; }
html body .eos-pill.ok { background: #dcfce7 !important; }
html body .dec-pill.pending { background: #fef3c7 !important; }
html body .dec-pill.approved { background: #dbeafe !important; }
html body .dec-pill.applied { background: #dcfce7 !important; }
html body .dec-pill.rejected { background: #fee2e2 !important; }
html body .dec-pill.cancelled { background: #e2e8f0 !important; }
html body .reg-pill.pending { background: #fef3c7 !important; }
html body .reg-pill.applied { background: #fee2e2 !important; }
html body .ex-bar > span { background: #16a34a !important; }
html body .lc-chip.is-on { background: #1e293b !important; }
html body .ff-toggle.on { background: #16a34a !important; }
html body .lt-pill.active { background: #dcfce7 !important; }
html body .ln-bar > span { background: #0ea5e9 !important; }
html body .my-tile .ico { background: linear-gradient(135deg, #e0f2fe, #ede9fe) !important; }
html body .oc-node.is-vacancy { background: repeating-linear-gradient(45deg,transparent,transparent 6px, rgba(148,163,184,.07) 6px,rgba(148,163,184,.07) 12px) !important; }
html body .oc-asof button:hover { background: #312e81 !important; }
html body #ocSaudi.is-on { background: #0f172a !important; }
html body #ocExpiry.is-on { background: #0f172a !important; }
html body .oc-bulk select { background: #1e293b !important; }
html body .oc-bulk button:hover { background: #1e293b !important; }
html body #ocLive.is-on { background: #0f172a !important; }
html body .ps-tot-card.net { background: #ecfdf5 !important; }
html body .pen-step.warn { background: #fffbeb !important; }
html body .pen-pill.pending { background: #fef3c7 !important; }
html body .pen-pill.waived { background: #e2e8f0 !important; }
html body .pc-btn.in { background: #16a34a !important; }
html body .pc-btn.out { background: #dc2626 !important; }
html body .pe-pill.active { background: #dcfce7 !important; }
html body .pe-pill.inactive { background: #e2e8f0 !important; }
html body .rc-tile .ico { background: linear-gradient(135deg, #e0f2fe, #ede9fe) !important; }
html body .rc-tile.is-external .ico { background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important; }
html body .jd-pill.draft { background: #94a3b8 !important; }
html body .jd-pill.archived { background: #475569 !important; }
html body .rj-pill.draft { background: #94a3b8 !important; }
html body .rj-pill.archived { background: #475569 !important; }
html body .rec-pill.on { background: #dcfce7 !important; }
html body .rec-pill.off { background: #e2e8f0 !important; }
html body .rpt-bar .bar > span { background: linear-gradient(90deg,#0ea5e9,#6366f1) !important; }
html body .rqj-pill.queued { background: #fef3c7 !important; }
html body .schema-help code { background: rgba(0,0,0,.05) !important; }
html body .rtf-ico input:checked + span { background: #eef2ff !important; }
html body .rt-chip.built-in { background: #ede9fe !important; }
html body .rt-chip.active { background: #dcfce7 !important; }
html body .rt-chip.inactive { background: #e2e8f0 !important; }
html body .rt-chip.route-finance { background: #fef3c7 !important; }
html body .rt-chip.route-manager { background: #dbeafe !important; }
html body .rt-chip.route-hr { background: #fce7f3 !important; }
html body .rq-tile .ico { background: linear-gradient(135deg, #e0f2fe, #ede9fe) !important; }
html body .rp-pill-on { background: #dcfce7 !important; }
html body .so-chip.c-all.is-on { background: #1e293b !important; }
html body .so-chip.c-pending.is-on { background: #fef3c7 !important; }
html body .so-chip.c-approved.is-on { background: #dbeafe !important; }
html body .so-chip.c-applied.is-on { background: #dcfce7 !important; }
html body .so-chip.c-rejected.is-on { background: #e2e8f0 !important; }
html body .so-pill.pending { background: #fef3c7 !important; }
html body .ann-card.pinned { background: #fffbeb !important; }
html body .sr-tabs a.on { background: #1e40af !important; }
html body .tk-priority.low { background: #e2e8f0 !important; }
html body .tk-priority.high { background: #fef3c7 !important; }
html body .lc-chip.is-on { background: #1e293b !important; }
html body .wp-tag.live { background: #dcfce7 !important; }
html body .triage-tab { background: #f5f5f4 !important; }
html body .triage-tab.active { background: #111 !important; }
html body .triage-tab .count { background: rgba(255,255,255,0.18) !important; }
html body .bh-pill.bh-online { background: #dcfce7 !important; }
html body .bh-pill.bh-offline { background: #fef3c7 !important; }
html body .entity-pill.ent-quote { background: #fef9c3 !important; }
html body .entity-pill.ent-project { background: #dcfce7 !important; }
html body .entity-pill.ent-lead { background: #dbeafe !important; }
html body .inbox-shell.ch-whatsapp .inbox-list-head .bh-pill { background: rgba(255,255,255,.16) !important; }
html body .inbox-shell.ch-instagram .inbox-list-head .bh-pill { background: rgba(255,255,255,.16) !important; }
html body .iai-step-pill.is-active { background: #dbeafe !important; }
html body .iai-step-pill.is-done { background: #dcfce7 !important; }
html body .iai-step-pill .num { background: rgba(255,255,255,.7) !important; }
html body .iai-result-card.is-fail { background: #fef2f2 !important; }
html body .igc-tab.is-on { background: #0f172a !important; }
html body .ai-extract-field .conf.high { background: #dcfce7 !important; }
html body .ai-extract-field .conf.med { background: #fef3c7 !important; }
html body .ai-extract-field .conf.low { background: #fee2e2 !important; }
html body .ai-extract-field.diverges { background: #fffbeb !important; }
html body #lead-fu .fu-btn.primary { background: #0f172a !important; }
html body #lead-fu .fu-dot { background: #94a3b8 !important; }
html body #lead-fu .fu-ev.ch-whatsapp .fu-dot { background: #16a34a !important; }
html body #lead-fu .fu-ev.ch-email .fu-dot { background: #2563eb !important; }
html body #lead-fu .fu-ev.today-marker .fu-dot { background: #0f172a !important; }
html body #lead-qc .ld-qc-status.s-sent { background: #dbeafe !important; }
html body #lead-qc .ld-qc-status.s-viewed { background: #dbeafe !important; }
html body #lead-qc .ld-qc-status.s-accepted { background: #dcfce7 !important; }
html body #lead-qc .ld-qc-status.s-approved { background: #dcfce7 !important; }
html body #lead-qc .ld-qc-status.s-signed { background: #dcfce7 !important; }
html body #lead-qc .ld-qc-status.s-rejected { background: #fee2e2 !important; }
html body .lb-win.is-on { background: #0f172a !important; }
html body .lb-rank.gold { background: #fef3c7 !important; }
html body .lb-rank.bronze { background: #fde68a !important; }
html body .lb-pill.high { background: #dcfce7 !important; }
html body .lb-pill.low { background: #fee2e2 !important; }
html body .lt-chip.s-active { background: #dcfce7 !important; }
html body .lt-chip.s-paused { background: #fef3c7 !important; }
html body .lt-chip.s-max { background: #fee2e2 !important; }
html body .lt-chip.s-draft { background: #fef3c7 !important; }
html body .lt-sdot.ch-whatsapp { background: #16a34a !important; }
html body .lt-btn.primary { background: #0f172a !important; }
html body .lt-viewtoggle button.is-on { background: #0f172a !important; }
html body .ltc-mode.is-on { background: #0f172a !important; }
html body .ltstrip-col.is-today { background: #ecfdf5 !important; }
html body .ltstrip-dot.ch-whatsapp { background: #16a34a !important; }
html body .lu-chip.is-on { background: #0f172a !important; }
html body .lu-dayhead.today { background: #0f172a !important; }
html body .mp-actions .btn-primary { background: #4f46e5 !important; }
html body .mp-actions .btn-primary:hover { background: #4338ca !important; }
html body .mp-section h3 .count { background: #eef2ff !important; }
html body .mp-attendee .avatar { background: #4f46e5 !important; }
html body .mp-attendee .role-pill.client { background: #dcfce7 !important; }
html body .mp-attendee .role-pill.rep { background: #dbeafe !important; }
html body .mp-drop label { background: var(--accent, #dc2626) !important; }
html body .vc-geo.acquired { background: #ecfdf5 !important; }
html body .vc-geo.error { background: #fee2e2 !important; }
html body .vc-btn { background: var(--accent, #dc2626) !important; }
html body .na-btn-primary { background: #0f172a !important; }
html body .na-btn-primary:hover { background: #1e293b !important; }
html body .od-btn.is-primary { background: #0f172a !important; }
html body .od-btn.is-primary:hover { background: #1e293b !important; }
html body .od-btn.is-danger:hover { background: #fee2e2 !important; }
html body .ol-search { background: #fafbf6 !important; }
html body .ol-filter > summary { background: #fafbf6 !important; }
html body .ol-filter-row select { background: #fafbf6 !important; }
html body .ol-filter-row input[type="text"] { background: #fafbf6 !important; }
html body .ol-chip a.x:hover { background: rgba(126, 177, 44, .30) !important; }
html body .ol-sortby { background: #fafbf6 !important; }
html body .ol-act:hover { background: #ecfdf3 !important; }
html body .ol-act.danger:hover { background: #fef2f2 !important; }
html body .ol-add-form button { background: #0f172a !important; }
html body .ol-add-form button:hover { background: #1e293b !important; }
html body .hier-chain .crumb.is-current { background: #1e293b !important; }
html body .hier-add button { background: #1e293b !important; }
html body .hier-add button:hover { background: #334155 !important; }
html body .ad-btn { background: #1e293b !important; }
html body .ad-btn:hover { background: #334155 !important; }
html body .ad-pill.hot { background: #fee2e2 !important; }
html body .ad-pill.warm { background: #fef3c7 !important; }
html body .ad-pill.cold { background: #dbeafe !important; }
html body .engagement-bars .row .bar > span { background: linear-gradient(90deg, #6366f1, #8b5cf6) !important; }
html body .ohp-btn { background: #1e293b !important; }
html body .ohp-btn:hover { background: #334155 !important; }
html body .org-tree .root > .node { background: #fef3c7 !important; }
html body .org-tree .pill { background: #e0e7ff !important; }
html body .mt-btn { background: #1e293b !important; }
html body .mt-summary .card.hot { background: #fee2e2 !important; }
html body .mt-summary .card.warm { background: #fef3c7 !important; }
html body .mt-summary .card.cold { background: #dbeafe !important; }
html body .mt-pill.hot { background: #fee2e2 !important; }
html body .mt-pill.warm { background: #fef3c7 !important; }
html body .mt-pill.cold { background: #dbeafe !important; }
html body .proj-state-pill.on.state-active { background: #16a34a !important; }
html body .proj-state-pill.on.state-paused { background: #d97706 !important; }
html body .proj-state-pill.on.state-done { background: #0ea5e9 !important; }
html body .rfi-owner-chip { background: #eafaef !important; }
html body .dsr-filter-menu button.is-on { background: #eafaef !important; }
html body .pa-upload button { background: #0f172a !important; }
html body .pi-btn.is-primary { background: #0f172a !important; }
html body .pi-btn.is-primary:hover { background: #1e293b !important; }
html body #pl-wrap .pl-toggle a.on { background: var(--brand,#2f7d4f) !important; }
html body .dv2-shell .stage-chev.is-active { background: linear-gradient(135deg, var(--brand) 0%, #a3e635 35%, var(--brand) 65%, var(--brand-deep) 100%) !important; }
html body .dv2-shell .drag-zone.lost.drag-over { background: #fde8ee !important; }
html body .qt-btn-preview:hover { background: #dbeafe !important; }
html body .qt-btn-reject:hover { background: #fee2e2 !important; }
html body .qt-btn-preview:hover { background: #dbeafe !important; }
html body .qt-btn-reject:hover { background: #fee2e2 !important; }
html body .qbk-bar .btn { background: #1e293b !important; }
html body .qbk-delbtn { background: #b91c1c !important; }
html body .qbk-rowdel:hover { background: #fef2f2 !important; }
html body .rv2-toolbar button { background: var(--accent, #dc2626) !important; }
html body .rv2-toolbar button { background: var(--accent, #dc2626) !important; }
html body .seg-card.one_time .seg-icon { background: #dbeafe !important; }
html body .seg-card.recurring .seg-icon { background: #dcfce7 !important; }
html body .seg-card.installment .seg-icon { background: #fef3c7 !important; }
html body .segbar-cell.one_time { background: #2563eb !important; }
html body .segbar-cell.recurring { background: #16a34a !important; }
html body .segbar-cell.installment { background: #ca8a04 !important; }
html body .rv2-toolbar button { background: var(--accent, #dc2626) !important; }
html body .rv2-toolbar button { background: var(--accent, #dc2626) !important; }
html body .cp-toolbar button { background: #0e7490 !important; }
html body .we-tag.ok { background: #dcfce7 !important; }
html body .wl-per a.on { background: #2563eb !important; }
html body .rt-chip.intent { background: #dbeafe !important; }
html body .rt-chip.hours { background: #fef3c7 !important; }
html body .rt-chip.kw { background: #ede9fe !important; }
html body .rt-chip.tag { background: #dcfce7 !important; }
html body .rt-toggle.on { background: #dcfce7 !important; }
html body .rt-days label { background: #f5f5f4 !important; }
html body .rt-days input:checked + span { background: #111 !important; }
html body .pool-bar > span { background: linear-gradient(90deg, #15803d 0%, #84cc16 60%, #f59e0b 80%, #dc2626 100%) !important; }
html body .rp-period.active { background: var(--p-green, #7eb12c) !important; }
html body .rp-pill.good { background: #dcfce7 !important; }
html body .rp-pill.bad { background: #fee2e2 !important; }
html body .rp-pill.warn { background: #fef3c7 !important; }
html body .rp-period.active { background: var(--p-green, #7eb12c) !important; }
html body .fc-toggle a.is-on { background: #0f172a !important; }
html body .gl-fill.low { background: #dc2626 !important; }
html body .ps-mark button:hover { background: #dcfce7 !important; }
html body .sc-rank.r1 { background: #fef3c7 !important; }
html body .sc-rank.r3 { background: #fde68a !important; }
html body .sc-pct-fill.low { background: #dc2626 !important; }
html body .sc-period.active { background: var(--p-green, #7eb12c) !important; }
html body .bm-btn { background: var(--accent, #dc2626) !important; }
html body .bm-btn.danger { background: #ef4444 !important; }
html body .cn-tok:hover { background: #dce8fa !important; }
html body .cn-tok:hover { background: #dce8fa !important; }
html body .sh-role-banner .role-pill { background: #0f172a !important; }
html body .sd-status.requested { background: #e0f2fe !important; }
html body .sd-status.opened { background: #fef3c7 !important; }
html body .sd-status.signed { background: #dcfce7 !important; }
html body .sd-status.declined { background: #fee2e2 !important; }
html body .sd-btn.is-danger:hover { background: #fee2e2 !important; }
html body .sl-filter.is-on { background: #0f172a !important; }
html body .sl-status.requested { background: #e0f2fe !important; }
html body .sl-status.opened { background: #fef3c7 !important; }
html body .sl-status.signed { background: #dcfce7 !important; }
html body .sl-status.declined { background: #fee2e2 !important; }
html body .dd-status.sent { background: #dbeafe !important; }
html body .dd-status.viewed { background: #fef3c7 !important; }
html body .dd-status.signed { background: #dcfce7 !important; }
html body .dd-status.declined { background: #fee2e2 !important; }
html body .dd-btn.is-primary { background: #0f172a !important; }
html body .dd-btn.is-primary:hover { background: #1e293b !important; }
html body .dd-btn.is-danger:hover { background: #fee2e2 !important; }
html body .dd-event-dot.signed { background: #16a34a !important; }
html body .dn-btn.is-primary { background: #0f172a !important; }
html body .dn-btn.is-primary:hover { background: #1e293b !important; }
html body .dl-btn.is-primary { background: #0f172a !important; }
html body .dl-btn.is-primary:hover { background: #1e293b !important; }
html body .dl-chip.is-on { background: #0f172a !important; }
html body .dl-status.sent { background: #dbeafe !important; }
html body .dl-status.viewed { background: #fef3c7 !important; }
html body .dl-status.signed { background: #dcfce7 !important; }
html body .dl-status.declined { background: #fee2e2 !important; }
html body .tl-pill.seeded { background: #eef2ff !important; }
html body .tl-pill.archived { background: #fee2e2 !important; }
html body .tl-pill.line-items { background: #fef3c7 !important; }
html body .tl-add-form button { background: #0f172a !important; }
html body .tl-add-form button:hover { background: #1e293b !important; }
html body .sf-btn-reject:hover { background: #fef2f2 !important; }
html body .drw-comment.is-client { background: #eff6ff !important; }
html body .dr-stat.is-warn { background: #fef3c7 !important; }
html body .dr-chip.is-active { background: #0f172a !important; }
html body .dr-chip.is-active:hover { background: #1e293b !important; }
html body .dr-avatar.is-rep { background: #ede9fe !important; }
html body .dr-bubble.is-client { background: #eff6ff !important; }
html body .dr-btn.is-primary { background: #0f172a !important; }
html body .dr-btn.is-primary:hover { background: #1e293b !important; }
html body .dr-btn.is-danger:hover { background: #fee2e2 !important; }
html body .hm-window a.is-active { background: #0f172a !important; }
html body .qs-status.notified { background: #dbeafe !important; }
html body .qs-status.signed { background: #dcfce7 !important; }
html body .qs-status.declined { background: #fee2e2 !important; }
html body .sg-status.notified { background: #dbeafe !important; }
html body .sg-status.signed { background: #dcfce7 !important; }
html body .sg-status.declined { background: #fee2e2 !important; }
html body .sg-btn.is-primary { background: #0f172a !important; }
html body .sg-btn.is-primary:hover { background: #1e293b !important; }
html body .sg-btn.is-danger:hover { background: #fee2e2 !important; }
html body .ver-btn.is-primary { background: #0f172a !important; }
html body .ver-btn.is-primary:hover { background: #1e293b !important; }
html body .ver-diff-line.remove { background: #fef2f2 !important; }
html body .td-foot .delete-btn { background: #fef2f2 !important; }
html body .ua-role-admin { background: #1f2937 !important; }
html body .cd-disp-form button.on { background: #3730a3 !important; }
html body .cd-actions button { background: var(--accent, #dc2626) !important; }
html body .vp-key:active { background: #e2e8f0 !important; }
html body .vp-btn-ghost:hover { background: #e2e8f0 !important; }
html body .vp-disp-grid button:hover { background: #fef3c7 !important; }
html body .sv-form button { background: var(--accent, #dc2626) !important; }
html body .wd-status.pending { background: #fef3c7 !important; }
html body .wh-pill { background: #eef2ff !important; }
html body .wh-pill.success { background: #dcfce7 !important; }
html body .wh-pill.failure { background: #fee2e2 !important; }
html body .wh-btn.is-danger:hover { background: #fee2e2 !important; }
html body .wc-test button { background: #0f766e !important; }
html body .re-master.is-on { background: linear-gradient(135deg,#fef2f2,#fff) !important; }
html body .icon-tile.selected { background: #fee2e2 !important; }

/* order fix-up: 54 white rules that originally came after a colour of equal weight, in the same template. */
html body .ac-group.g-done td,
html body .ac-prio.low,
html body .ac-section-done .ac-pill,
html body .ad-btn.ghost,
html body .askai-msg.askai-asst,
html body .at-flag.archived,
html body .au-row-status.is-off,
html body .auto-chip.muted,
html body .bm-btn.secondary,
html body .cd-portal .p-btn.ghost,
html body .cd-status.archived,
html body .ce-status.cancelled,
html body .ci-card .kind-pill.no_action,
html body .cl-status.archived,
html body .cm-status.expired,
html body .conv-ch-instagram .chat-head,
html body .csc-btn.secondary,
html body .ctx-chip.is-on,
html body .dd-status.archived,
html body .dec-pill.draft,
html body .dl-status.archived,
html body .dr-chip:hover,
html body .drw-comment.is-rep,
html body .entity-pill.ent-client,
html body .ffv2-btn.secondary,
html body .gem-status.cancelled,
html body .ger-row-status.cancelled,
html body .ger-status.cancelled,
html body .iud-pill.is-aux,
html body .oc-node.is-pick,
html body .ohp-btn.ghost,
html body .ol-add-form input[type="text"],
html body .ol-add-form select,
html body .pd-flag.archived,
html body .qapp-pill.is-cancelled,
html body .reg-pill.waived,
html body .rfi-owner-none,
html body .rp-pill.mut,
html body .sd-status.expired,
html body .sd-status.revoked,
html body .sl-row.matched,
html body .sl-status.expired,
html body .sl-status.revoked,
html body .st-hero .status.draft,
html body .stage-override[open] > summary,
html body .stage-todo .stage-num,
html body .stage-type-switch[open] > summary,
html body .sts-conf.unknown,
html body .tl-bar.k-task,
html body .tl-bar.st-not_started,
html body .wfap-btn.is-cancel,
html body .wfsw-pill.is-cancelled,
html body .wh-pill.muted,
html body .wp-tag.retired {
  background-color: var(--sg-auto) !important;
}


/* ── documents page: the near-black action buttons ────────────────────────
   `documents.html` paints its primary buttons with `--p-text-dark` (#0f172a):
   "Upload a file", "Create a document" and the per-row "Open". On a green
   page they read as ink blocks. Deep green carries the same weight and keeps
   white text above 7:1, and it is the green the home skin already uses for
   its primary button. The semantic ones are left alone — Approve stays
   #16a34a, Send back stays red. */
html body .docs-action-primary,
html body .dr-btn-primary {
  background: var(--sg-green-d) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(35, 96, 58, .22),
              0 0 0 1px rgba(35, 96, 58, .06),
              0 6px 16px -8px rgba(35, 96, 58, .45) !important;
}
html body .docs-action-primary:hover,
html body .dr-btn-primary:hover {
  background: #1d5231 !important;
  box-shadow: 0 4px 10px rgba(35, 96, 58, .30),
              0 0 0 1px rgba(35, 96, 58, .06),
              0 10px 24px -8px rgba(35, 96, 58, .48) !important;
}
/* the filter/columns ghosts beside them pick up the same green rim */
html body .docs-action-ghost,
html body .docs-action-ghost:hover,
html body .docs-action-ghost[aria-expanded="true"] {
  background: var(--sg-surface) !important;
  border-color: rgba(35, 96, 58, .18) !important;
  color: var(--sg-green-d) !important;
}
html body .docs-action-ghost:hover,
html body .docs-action-ghost[aria-expanded="true"] {
  background: var(--sg-green-soft) !important;
  border-color: rgba(35, 96, 58, .30) !important;
}


/* ==== dark-green-buttons.css (emerge app, /static) ==== */
/* ============================================================================
   dark-green-buttons.css
   ----------------------------------------------------------------------------
   Repaints every LIGHT-GREEN filled button in the app to the dark green already
   used by this design system (--sg-green-d #23603a, 7.48:1 with white text).

   Scope is deliberately BUTTONS ONLY. The light green #7eb12c / #9ccb47 /
   #65a30d family also paints avatars, progress bars, sidebar nav highlights,
   KPI tints, badges and the page background wash - all of that is left alone.

   Deliberately NOT repainted (they carry meaning, not brand):
     - the success/approve green #16a34a (Approve, Done, Present, Active)
     - destructive red controls, and the var(--accent, #dc2626) buttons
       (--accent is undefined on those pages, so they render RED, not green)
     - pale mint chips/badges (#dcfce7, rgba(126,177,44,.14) ...)

   Loaded LAST in base.html, and every rule is prefixed `html body` + marked
   !important so it also beats page-level <style> blocks (which sit after the
   <link>s in document order) and inline style="" attributes.

   Revert: delete the <link> line from templates/base.html.
   ========================================================================== */

:root {
  --dgb:        #23603a;   /* dark green, base    */
  --dgb-hover:  #1a4a2c;   /* dark green, hover   */
  --dgb-active: #163f25;   /* dark green, pressed */
}

/* ---------------------------------------------------------------------------
   1. The app-wide primary button.
      style.css paints these `var(--p-green)` = #7eb12c. This is what the
      Companies "Details", Daily-reports "Filter" and Users "New user"
      buttons are.
   ------------------------------------------------------------------------ */
html body .btn-primary,
html body .btn.btn-primary,
html body a.btn.btn-primary,
html body button.btn.btn-primary,
html body button.primary,
html body .btn.primary,
html body .pulse-btn-primary,
html body .pulse-hero .h-btn.primary,
html body .create-toggle > summary {
  background: var(--dgb) !important;
  background-image: none !important;
  border-color: var(--dgb) !important;
  color: #fff !important;
  box-shadow:
    0 3px 0  rgba(18, 60, 35, 0.30),
    0 6px 16px rgba(35, 96, 58, 0.24) !important;
}

html body .btn-primary:hover,
html body .btn.btn-primary:hover,
html body a.btn.btn-primary:hover,
html body button.btn.btn-primary:hover,
html body button.primary:hover,
html body .btn.primary:hover,
html body .pulse-btn-primary:hover,
html body .pulse-hero .h-btn.primary:hover,
html body .create-toggle > summary:hover {
  background: var(--dgb-hover) !important;
  background-image: none !important;
  border-color: var(--dgb-hover) !important;
  color: #fff !important;
  box-shadow:
    0 5px 0  rgba(18, 60, 35, 0.26),
    0 12px 24px rgba(35, 96, 58, 0.32) !important;
}

html body .btn-primary:active,
html body .btn.btn-primary:active,
html body button.primary:active,
html body .btn.primary:active,
html body .pulse-btn-primary:active,
html body .create-toggle > summary:active {
  background: var(--dgb-active) !important;
  border-color: var(--dgb-active) !important;
  box-shadow:
    0 1px 0  rgba(18, 60, 35, 0.26),
    0 3px 8px rgba(35, 96, 58, 0.22) !important;
}

/* Keep the focus ring legible against the darker fill. */
html body .btn-primary:focus-visible,
html body .btn.btn-primary:focus-visible,
html body .pulse-btn-primary:focus-visible,
html body .create-toggle > summary:focus-visible {
  outline: 2px solid var(--dgb) !important;
  outline-offset: 2px !important;
}

/* Disabled primaries must not read as pressable. */
html body .btn-primary:disabled,
html body .btn.btn-primary:disabled,
html body button.primary:disabled,
html body .pulse-btn-primary:disabled,
html body .btn-primary[aria-disabled="true"] {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   2. Global toggle / topbar buttons that fill with var(--primary) #7eb12c.
   ------------------------------------------------------------------------ */
html body .filter-chip.active,
html body .lang-toggle:hover,
html body .topbar-ask-ai:hover {
  background: var(--dgb) !important;
  background-image: none !important;
  border-color: var(--dgb) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   3. Dashboard call-to-action links - var(--w-lime) #65a30d.
   ------------------------------------------------------------------------ */
html body .dx-insight-cta,
html body .dx-empty-cta,
html body .dx-head-btn.primary {
  background: var(--dgb) !important;
  background-image: none !important;
  border-color: var(--dgb) !important;
  color: #fff !important;
}
html body .dx-insight-cta:hover,
html body .dx-empty-cta:hover,
html body .dx-head-btn.primary:hover {
  background: var(--dgb-hover) !important;
  border-color: var(--dgb-hover) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   4. Page-scoped primary buttons that hard-code the light green.
      Each of these lives in a page <style> block, which loads AFTER this
      file - `html body` + !important is what wins the cascade.
   ------------------------------------------------------------------------ */
html body .c-btn-primary,                    /* clients.html            */
html body .cd-btn-primary,                   /* client_detail.html      */
html body .cd-portal .p-btn.primary,         /* client_detail portal    */
html body .ctx-add-btn,                      /* contracts.html          */
html body .ctx-modal-foot .btn-sign,         /* contracts.html          */
html body .rp-period.active,                 /* reports period toggle   */
html body .sc-period.active,                 /* snapshot period toggle  */
html body .ac-rm-btn.go,                     /* activities/list.html    */
html body .pe-btn,                           /* admin pipeline editors  */
html body .pe-sa-save,                       /* admin pipeline editors  */
html body .te-btn {                          /* pipeline template edit  */
  background: var(--dgb) !important;
  background-image: none !important;
  border-color: var(--dgb) !important;
  color: #fff !important;
}

html body .c-btn-primary:hover,
html body .cd-btn-primary:hover,
html body .cd-portal .p-btn.primary:hover,
html body .ctx-add-btn:hover,
html body .ctx-modal-foot .btn-sign:hover:not(:disabled),
html body .ac-rm-btn.go:hover,
html body .pe-btn:hover,
html body .pe-sa-save:hover,
html body .te-btn:hover {
  background: var(--dgb-hover) !important;
  border-color: var(--dgb-hover) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   5. Buttons that carry the light green as an inline style="" attribute.
      Matched on the literal colour, and restricted to real controls so the
      light-green *badges* that use the same inline colour (the "on" pill on
      /clients, the kanban count pill) are left untouched.
      A stylesheet !important outranks a non-important inline declaration.
   ------------------------------------------------------------------------ */
html body button[style*="#65a30d"],
html body a[style*="#65a30d"],
html body input[type="submit"][style*="#65a30d"],
html body button[style*="#7eb12c"],
html body a[style*="#7eb12c"],
html body input[type="submit"][style*="#7eb12c"],
html body button[style*="#84cc16"],
html body a[style*="#84cc16"],
html body button[style*="--primary"][style*="--brand-green"],
html body a[style*="--primary"][style*="--brand-green"] {
  background: var(--dgb) !important;
  background-image: none !important;
  border-color: var(--dgb) !important;
  color: #fff !important;
}
html body button[style*="#65a30d"]:hover,
html body a[style*="#65a30d"]:hover,
html body input[type="submit"][style*="#65a30d"]:hover,
html body button[style*="#7eb12c"]:hover,
html body a[style*="#7eb12c"]:hover,
html body input[type="submit"][style*="#7eb12c"]:hover,
html body button[style*="#84cc16"]:hover,
html body a[style*="#84cc16"]:hover,
html body button[style*="--primary"][style*="--brand-green"]:hover,
html body a[style*="--primary"][style*="--brand-green"]:hover {
  background: var(--dgb-hover) !important;
  border-color: var(--dgb-hover) !important;
  color: #fff !important;
}

/* ==== contrast-fix.css (emerge app, /static) ==== */
/* ============================================================================
   contrast-fix.css  -  invisible text repairs
   ----------------------------------------------------------------------------
   soft-green.css re-tints the app's white/cool-grey surfaces. Two of its rules
   overpower a page that had deliberately painted a DARK control:

     html body select, html body textarea, html body input[...]
         { background: var(--sg-soft) !important; }          <- #f4faf5, !important
     html body .btn:not(.btn-primary):not(.btn-ghost):not(.is-primary)
         { background: var(--sg-soft); }                      <- specificity (0,4,2)

   When the page's matching `color: #fff` is NOT !important, the background
   flips light and the white text stays -> the label vanishes (~1.05:1).

   make_green.py already re-asserts the dark rule for pages it harvested
   (see `html body .oc-bulk select { background:#1e293b !important }`), but
   pages EXCLUDED from the harvest - the hand-skinned leads inbox among them -
   never got that protection. This file supplies it for those pages, using the
   same shape, so a soft-green regenerate cannot silently drop it again.

   Revert: delete the <link> line from templates/base.html.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Leads inbox - the bulk action bar (.li-bulk is #23603a dark green).
      Its two <select>s were white text on #f4faf5 = 1.06:1, unreadable.
      Restore the translucent-on-dark control the skin intended.
   ------------------------------------------------------------------------ */
html body .li-bulk-actions select {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}
/* soft-green forces every :focus field to solid white - so pair it with
   dark text rather than fighting it. */
html body .li-bulk-actions select:focus {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0f172a !important;
}
/* The dropdown list itself renders on the OS layer, always light. */
html body .li-bulk-actions select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ---------------------------------------------------------------------------
   2. GraphQL console - a deliberately dark code editor whose background was
      flipped to #f4faf5 under #f8fafc text = 1.01:1 (the query was invisible).
   ------------------------------------------------------------------------ */
html body textarea.gql-query,
html body textarea.gql-query:focus {
  background: #0f172a !important;
  color: #f8fafc !important;
}
html body textarea.gql-query:focus {
  border-color: #4a9a63 !important;
}

/* ---------------------------------------------------------------------------
   3. Quote preview - the Send button is `class="btn qp-send"`, so the neutral
      .btn tint (0,4,2) out-specified `.qp-send` (0,1,0) and washed the green
      out from under its white label. Restore its own green.
      Left at #16a34a on purpose: this is the success/send green, not the
      brand light green that was repainted dark.
   ------------------------------------------------------------------------ */
html body .btn.qp-send {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
html body .btn.qp-send:hover {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   4. Contract split editor - read-only fields were #94a3b8 on a near-white
      ground (2.42:1). Not a soft-green regression, just too faint to read.
      Keep them visibly muted, but above 4.5:1.
   ------------------------------------------------------------------------ */
html body .cse-fld.ro input {
  color: #64748b !important;
}

/* ---------------------------------------------------------------------------
   5. Disabled primary buttons. dark-green-buttons.css mutes them to #f8fafc
      on #cbd5e1 - only 1.6:1, so the label all but vanishes. Keep the muted
      look, but make the word readable (4.6:1).
      Lives here rather than in dark-green-buttons.css so it ships on a NEW
      URL: static_v() memoises mtimes per process, so editing an
      already-linked sheet keeps serving the old ?v= until a restart.
   ------------------------------------------------------------------------ */
html body .btn-primary:disabled,
html body .btn.btn-primary:disabled,
html body button.primary:disabled,
html body .pulse-btn-primary:disabled,
html body .btn-primary[aria-disabled="true"] {
  color: #475569 !important;
}

/* ==== admin-pages-skin.css (emerge app, /static) ==== */
/* ══════════════════════════════════════════════════════════════════════════
   admin-pages-skin.css — Bot memory + Active sessions
   ─────────────────────────────────────────────────────────────────────────
   Scope:  .skin-botmem   → templates/agent_memory.html   (/admin/agent-memory)
           .skin-sessions → templates/admin/sessions.html (/admin/sessions)

   Both pages predate the green design system. They still carry the cool-grey
   and violet palette style.css originally shipped with, and neither was
   revisited when soft-green.css re-tinted the app, so they read as visitors
   from another product.

   PRESENTATION ONLY. No markup, no logic, no query changes. The two templates
   gain one scoping class on their existing wrapper div; nothing else moves.

   Loads LAST, after contrast-fix.css. `!important` appears only where the
   template's own inline style would otherwise win — an inline declaration
   beats any normal author rule, so a page skin has to answer in kind.

   Tokens come from soft-green.css :root (--sg-*).
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 ─ Tall rows: keep each row's identity cells where they can be seen ──
   One user with 99 live sessions renders a SINGLE <tr> a few thousand pixels
   tall, because every session is a div inside one cell. The browser default
   `vertical-align: middle` then parks User / Role / Active / Cap at the
   vertical centre of that row — far below the fold — and the first four
   columns read as permanently empty. Top-aligning is the entire fix.        */
.skin-sessions table.data tbody td { vertical-align: top; }


/* ── 2 ─ Session pills ────────────────────────────────────────────────────
   Inline `border:1px solid #e5e7eb` — the cool grey from before the green
   skin. Swap in the green hairline and give the pill a surface so it reads
   as a card rather than a wireframe box. `td > div` is the pill itself: it
   is the only bare div at that level (the flex row and the user-agent line
   are nested inside it).                                                   */
.skin-sessions table.data tbody td > div {
  border-color: var(--sg-line-2) !important;
  border-radius: 10px !important;
  background: var(--sg-soft);
}


/* ── 3 ─ Destructive buttons get their resting state back ─────────────────
   style.css only ever defined `.btn-danger:hover` — there is no resting rule
   at all — so soft-green's

       html body .btn:not(.btn-primary):not(.btn-ghost):not(.is-primary)

   (specificity 0,4,2) paints Kick / Delete / Erase the same near-white as
   every neutral button, and they only turn red once the pointer is on them.
   A destructive action should not be indistinguishable from "Save".

   Scoped to these two pages on purpose — the same gap affects 88 other
   templates and widening the blast radius is not what was asked for.

   `--red-soft` is deliberately NOT used: it holds rgba(126,177,44,.10), a
   leftover from the old lime brand, and is green.                          */
.skin-sessions .btn.btn-danger,
.skin-botmem   .btn.btn-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}

.skin-sessions .btn.btn-danger:hover,
.skin-botmem   .btn.btn-danger:hover {
  background: var(--red) !important;
  color: #ffffff !important;
  border-color: var(--red) !important;
}


/* ── 4 ─ Bot memory: violet → brand green ─────────────────────────────────
   The contact links carry an inline `color:#6d28d9` and the selected row an
   inline `background:#f5f3ff` — the violet that used to match the page's
   violet hero. That hero is hidden app-wide now (style.css sets
   `.pulse-hero{display:none!important}`), so the violet is the last trace of
   a palette nothing else on screen shares.
   `:not(.btn)` keeps the View button on its normal button colour.          */
.skin-botmem table.data tbody a[href]:not(.btn) {
  color: var(--sg-green-d) !important;
}

.skin-botmem table.data tbody a[href]:not(.btn):hover {
  color: var(--sg-green) !important;
  text-decoration: underline;
}

.skin-botmem table.data tbody tr[style] {
  background: var(--sg-green-soft) !important;
}


/* ── 5 ─ Fact-editor hairlines ────────────────────────────────────────────
   Inline `border:1px solid #e5e7eb` on the fact key/value inputs. The
   confirm field in the danger zone is deliberately #fecaca and is excluded. */
.skin-botmem .card-body input:not([type="hidden"]):not([name="confirm"]) {
  border-color: var(--sg-line-2) !important;
  border-radius: 10px !important;
}


/* ── 6 ─ Empty state ──────────────────────────────────────────────────────
   With no contact selected, the right-hand column holds one short card
   beside a ~650px contact list, so most of the page is void. Give the card
   some height and centre its message, so the emptiness reads as deliberate.
   `:only-child` scopes this to the empty state — once a contact is picked
   the column holds several sibling cards and the rule stops matching.      */
.skin-botmem .card:only-child {
  min-height: 240px;
  display: grid;
  place-items: center;
  text-align: center;
}


/* ── 7 ─ Full-bleed width ─────────────────────────────────────────────────
   Both templates pin their wrapper to an inline `max-width:1200px`. On a
   wide screen that wastes most of the row: the sessions table has six
   columns to place, and the memory page's detail panel is the widest thing
   on the page. Let both use the width the app shell already gives them.   */
.skin-botmem,
.skin-sessions { max-width: none !important; }

/* If the six-column table still outruns the space on a narrow window, it
   scrolls inside its own card rather than pushing the whole page sideways. */
.skin-sessions .card-body { overflow-x: auto; }

/* ==== sidebar-user-ink.css (emerge app, /static) ==== */
/* ============================================================================
   sidebar-user-ink.css
   ----------------------------------------------------------------------------
   The graphite sidebar re-tone (polish-3d-final.css --p3-sidebar-* vars,
   2026-08-27) styles the brand block and nav but never touched the footer
   user card, so .user-meta kept its light-theme inks from style.css:
     .name  var(--text)  #060505  -> near-black on the dark grey bar
     .role  var(--muted) #6b7280  -> murky blue-grey on the dark grey bar
   Fix, per operator request ("white the name", "make the blue green"):
   the username goes white like the brand mark above it, and the role line
   joins the sidebar's green accent family (same tone as the active nav
   item, --p3-sidebar-active-text).

   Guarded with :root:not([data-theme="dark"]) exactly like the polish-3d
   sidebar rules: the data-theme=dark mode has no graphite skin (sidebar
   stays --surface white there), so these overrides must not apply to it.
   The unguarded base rule below keeps the role line readable in that mode.

   Ships as its own sheet because static_v() memoises mtimes per process —
   editing an already-linked sheet keeps serving the stale ?v= until every
   tenant restarts. Browsers revalidate (304s in the journal), so in-place
   edits of THIS file still reach clients on the next load.

   Revert: delete the <link> line from templates/base.html.
   ========================================================================== */

/* dark-theme fallback (white sidebar there): keep the role line readable */
html body .sidebar-foot .user-meta .role {
  color: var(--text) !important;
}

/* the live graphite sidebar */
:root:not([data-theme="dark"]) .sidebar-foot .user-meta .name {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
:root:not([data-theme="dark"]) .sidebar-foot .user-meta .role {
  color: var(--p3-sidebar-active-text, #c8e486) !important;
  -webkit-text-fill-color: var(--p3-sidebar-active-text, #c8e486) !important;
}