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

/* Round avatar circle holding the sparkles icon */
.chat-popup-title::before {
  content: "";
  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-popup-title .icon {
  width: 18px;
  height: 18px;
  color: #fff;
  /* Pull icon over the avatar circle (created above) */
  margin-inline-start: -32px;
  z-index: 1;
  pointer-events: none;
}

/* Online dot baked into the title */
.chat-popup-title::after {
  content: "online";
  position: absolute;
  inset-inline-start: 60px;
  top: 30px;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0;
}

.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 === */