/* ==========================================================================
   ASSIST EDGE DESIGN SYSTEM — Fin Buildge v4.1
   Part 1 of 4: Tokens.

   Every visual decision in this system resolves to a token defined here.
   Never hard-code a color in a component. Never define a color inside a
   media query or [data-theme] block below this file's token section.

   Loaded AFTER v26-styles.css and REPLACES theme-dark.css + themes.css.
   Those two files are no longer linked from header.php — this one file
   carries the palette, the app shell, and every component they defined.
   ========================================================================== */

:root {
  /* ---- Typeface roles (brand: Saira + Inter only, no third family) ---- */
  --ae-font-display: 'Saira', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ae-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (1.25 major third, 16px base) ---- */
  --ae-text-2xs: 0.6875rem;  /* 11px — table micro-labels, BDT sub-amounts */
  --ae-text-xs:  0.75rem;    /* 12px — eyebrows, column headers, captions */
  --ae-text-sm:  0.8125rem;  /* 13px — dense table cells, nav */
  --ae-text-md:  0.875rem;   /* 14px — default UI text */
  --ae-text-base:0.9375rem;  /* 15px — body copy */
  --ae-text-lg:  1.125rem;   /* 18px — card titles */
  --ae-text-xl:  1.375rem;   /* 22px — section titles */
  --ae-text-2xl: 1.75rem;    /* 28px — page title */
  --ae-text-3xl: 2.25rem;    /* 36px — KPI figure */
  --ae-text-4xl: 3rem;       /* 48px — hero figure */

  --ae-leading-tight: 1.15;
  --ae-leading-snug: 1.35;
  --ae-leading-normal: 1.55;

  --ae-tracking-label: 0.08em;  /* uppercase eyebrows + column headers */
  --ae-tracking-display: 0.01em;

  /* ---- Space: 4pt base, 8pt rhythm ---- */
  --ae-space-1: 0.25rem;  /*  4px */
  --ae-space-2: 0.5rem;   /*  8px */
  --ae-space-3: 0.75rem;  /* 12px */
  --ae-space-4: 1rem;     /* 16px */
  --ae-space-5: 1.5rem;   /* 24px */
  --ae-space-6: 2rem;     /* 32px */
  --ae-space-7: 3rem;     /* 48px */
  --ae-space-8: 4rem;     /* 64px */

  /* ---- Radius ---- */
  --ae-radius-sm: 4px;
  --ae-radius-md: 8px;
  --ae-radius-lg: 12px;
  --ae-radius-pill: 999px;

  /* ---- Motion ---- */
  --ae-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --ae-dur-fast: 120ms;
  --ae-dur-base: 200ms;

  /* ---- Layout constants ---- */
  --ae-rail-width: 236px;
  --ae-header-height: 60px;
  --ae-content-max: 1440px;

  /* ======================================================================
     COLOR — LIGHT THEME (the base definition; dark overrides tokens only)
     Neutrals carry a faint olive bias so they sit with the lime accent
     instead of fighting it. This is why they are not #888/#ccc greys.
     ====================================================================== */

  /* Surfaces, from furthest back to furthest forward */
  --ae-canvas:      #F7F8F2;  /* app background */
  --ae-surface:     #FFFFFF;  /* cards, tables, panels */
  --ae-surface-2:   #F2F4EA;  /* inset rows, table headers, wells */
  --ae-surface-3:   #E9ECDD;  /* hover on inset, chart gridfill */
  --ae-rail:        #12140C;  /* left nav — dark in BOTH themes, on purpose */

  /* Lines */
  --ae-border:        #E2E5D6;  /* default hairline */
  --ae-border-strong: #CBD0B9;  /* emphasized divider, input outline */

  /* Text */
  --ae-text:        #14170D;  /* primary */
  --ae-text-muted:  #5F6552;  /* secondary — labels, BDT, captions */
  --ae-text-subtle: #8E9482;  /* tertiary — zero values, placeholders */
  --ae-text-on-accent: #12140C;  /* text sitting ON lime */
  --ae-text-on-rail:   #E8EBDE;
  --ae-text-on-rail-muted: #878D77;

  /* Accent — brand lime. Fill-only in light mode; --ae-accent-ink for text. */
  --ae-accent:        #C8FF02;
  --ae-accent-hover:  #D2FF15;
  --ae-accent-ink:    #4F6600;  /* accent as TEXT on light surfaces (AA) */
  --ae-accent-quiet:  #EEFFB8;  /* accent as a wash behind content */
  --ae-accent-line:   #B4E600;  /* accent as a hairline / chart stroke */

  /* Semantic — deliberately NOT lime, so "up" never reads as "brand" */
  --ae-positive:       #0B7D4F;
  --ae-positive-quiet: #DCF2E7;
  --ae-negative:       #B33520;
  --ae-negative-quiet: #FBE4DF;
  --ae-warning:        #96650A;
  --ae-warning-quiet:  #FBEED2;
  --ae-info:           #2C5C8F;
  --ae-info-quiet:     #E1ECF8;

  /* Data-viz ramp — used for categorical series (sources, cost categories).
     Ordered by visual weight so series 1 is always the heaviest. */
  --ae-series-1: #12140C;
  --ae-series-2: #4F6600;
  --ae-series-3: #7E9A2E;
  --ae-series-4: #A9BE6E;
  --ae-series-5: #C9D7A5;
  --ae-series-6: #8E9482;

  /* Elevation — light theme uses shadow; dark theme swaps to borders */
  --ae-shadow-sm: 0 1px 2px rgba(20, 23, 13, 0.05);
  --ae-shadow-md: 0 2px 4px rgba(20, 23, 13, 0.04), 0 8px 20px rgba(20, 23, 13, 0.06);
  --ae-shadow-pop: 0 10px 30px rgba(20, 23, 13, 0.14);

  --ae-focus-ring: 0 0 0 2px var(--ae-canvas), 0 0 0 4px var(--ae-accent-line);

  /* ======================================================================
     LEGACY TOKEN BRIDGE
     v26-styles.css (and 40+ pages that reference these directly in inline
     styles) still speak the old navy vocabulary. Re-point every legacy
     name at an --ae-* token so the entire app inherits the new palette
     without touching those pages. Nothing below ever needs a second
     definition in the dark blocks — these all resolve through --ae-*.
     ====================================================================== */
  --navy:        var(--ae-rail);
  --navy-deep:   var(--ae-rail);
  --light-blue:  var(--ae-accent-quiet);
  --grey:        var(--ae-surface-2);
  --surface:     var(--ae-surface);
  --panel-2:     var(--ae-surface-2);
  --border:      var(--ae-border);
  --text:        var(--ae-text);
  --text-muted:  var(--ae-text-muted);
  --green:       var(--ae-positive);
  --red:         var(--ae-negative);
  --amber:       var(--ae-warning);
  --usd-accent:  var(--ae-text);
  --bdt-accent:  var(--ae-text-muted);
  --brand:       var(--ae-accent);
  --brand-2:     var(--ae-accent-ink);
  --accent:      var(--ae-accent);
  --shadow-sm:   var(--ae-shadow-sm);
  --shadow-md:   var(--ae-shadow-md);
}

/* ==========================================================================
   COLOR — DARK THEME
   Two selectors, same token block:
   1. prefers-color-scheme, guarded so an explicit light choice still wins
   2. an explicit [data-theme="dark"] stamp, so the toggle wins over the OS
   Only tokens are redefined here. No component ever styles itself in here.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ae-canvas:    #0B0C08;
    --ae-surface:   #14160F;
    --ae-surface-2: #1B1E14;
    --ae-surface-3: #23271A;
    --ae-rail:      #0F110A;

    --ae-border:        #272C1D;
    --ae-border-strong: #3A4129;

    --ae-text:        #F1F3E9;
    --ae-text-muted:  #969C86;
    --ae-text-subtle: #6A7059;
    --ae-text-on-accent: #12140C;
    --ae-text-on-rail:   #E8EBDE;
    --ae-text-on-rail-muted: #878D77;

    --ae-accent:       #C8FF02;
    --ae-accent-hover: #D2FF15;
    --ae-accent-ink:   #C8FF02;  /* lime IS legible on near-black */
    --ae-accent-quiet: #23300B;
    --ae-accent-line:  #A5D400;

    --ae-positive:       #45C88A;
    --ae-positive-quiet: #10301F;
    --ae-negative:       #F0806B;
    --ae-negative-quiet: #3A1710;
    --ae-warning:        #E0AC3C;
    --ae-warning-quiet:  #35270A;
    --ae-info:           #7FB2E6;
    --ae-info-quiet:     #122334;

    --ae-series-1: #C8FF02;
    --ae-series-2: #9BC71B;
    --ae-series-3: #8AAE38;
    --ae-series-4: #6D8B33;
    --ae-series-5: #47552C;
    --ae-series-6: #6A7059;

    --ae-shadow-sm: none;
    --ae-shadow-md: none;
    --ae-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.6);

    --ae-focus-ring: 0 0 0 2px var(--ae-canvas), 0 0 0 4px var(--ae-accent-line);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ae-canvas:    #0B0C08;
  --ae-surface:   #14160F;
  --ae-surface-2: #1B1E14;
  --ae-surface-3: #23271A;
  --ae-rail:      #0F110A;

  --ae-border:        #272C1D;
  --ae-border-strong: #3A4129;

  --ae-text:        #F1F3E9;
  --ae-text-muted:  #969C86;
  --ae-text-subtle: #6A7059;
  --ae-text-on-accent: #12140C;
  --ae-text-on-rail:   #E8EBDE;
  --ae-text-on-rail-muted: #878D77;

  --ae-accent:       #C8FF02;
  --ae-accent-hover: #D2FF15;
  --ae-accent-ink:   #C8FF02;
  --ae-accent-quiet: #23300B;
  --ae-accent-line:  #A5D400;

  --ae-positive:       #45C88A;
  --ae-positive-quiet: #10301F;
  --ae-negative:       #F0806B;
  --ae-negative-quiet: #3A1710;
  --ae-warning:        #E0AC3C;
  --ae-warning-quiet:  #35270A;
  --ae-info:           #7FB2E6;
  --ae-info-quiet:     #122334;

  --ae-series-1: #C8FF02;
  --ae-series-2: #9BC71B;
  --ae-series-3: #8AAE38;
  --ae-series-4: #6D8B33;
  --ae-series-5: #47552C;
  --ae-series-6: #6A7059;

  --ae-shadow-sm: none;
  --ae-shadow-md: none;
  --ae-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   Part 2 of 4: Base + app shell.
   Every color below comes from a token above. No literals.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--ae-canvas);
  color: var(--ae-text);
}

body {
  margin: 0;
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-base);
  line-height: var(--ae-leading-normal);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'cv02', 'cv03', 'cv04';
}

h1, h2, h3, h4, .brand, .side-brand .name, .mtop .page-title {
  font-family: var(--ae-font-display);
  line-height: var(--ae-leading-tight);
  letter-spacing: var(--ae-tracking-display);
  text-wrap: balance;
  color: var(--ae-text);
}

h1 { font-size: var(--ae-text-2xl); font-weight: 700; margin: 0 0 var(--ae-space-1); }
h2 { font-size: var(--ae-text-xl); font-weight: 600; margin: var(--ae-space-6) 0 var(--ae-space-3); }
h3 { font-size: var(--ae-text-lg); font-weight: 600; margin: var(--ae-space-5) 0 var(--ae-space-2); }

a { color: var(--ae-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.subtitle { color: var(--ae-text-muted); font-size: var(--ae-text-md); margin: 0 0 var(--ae-space-5); max-width: 68ch; }
.hint, form .hint { color: var(--ae-text-muted); font-size: var(--ae-text-xs); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ae-focus-ring);
  border-radius: var(--ae-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Leftovers from the retired v2.7 top-nav layout */
.topbar, .mobile-bottom-nav { display: none !important; }

/* ==========================================================================
   APP SHELL — .app-shell > aside.side + main.main-area (markup in header.php)
   ========================================================================== */

.app-shell {
  display: block;
  min-height: 100vh;
}

.main-area { min-width: 0; display: flex; flex-direction: column; margin-left: var(--ae-rail-width); }

.main-area .container {
  width: 100%;
  max-width: var(--ae-content-max);
  margin: 0 auto;
  padding: var(--ae-space-5) var(--ae-space-6) var(--ae-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-5);
}

/* --- Left rail — dark in BOTH themes, on purpose -------------------------- */
.side {
  background: var(--ae-rail);
  color: var(--ae-text-on-rail);
  border-right: 1px solid var(--ae-border);
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-4);
  padding: var(--ae-space-4) var(--ae-space-3);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  width: var(--ae-rail-width);
  z-index: 20;
  flex: initial;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
  padding: var(--ae-space-2);
}

.side-brand .mark {
  width: 30px; height: 30px;
  flex: none;
  display: grid; place-items: center;
  background: var(--ae-accent);
  color: var(--ae-text-on-accent);
  border-radius: var(--ae-radius-md);
  font-family: var(--ae-font-display);
  font-weight: 800;
  font-size: var(--ae-text-md);
}

.side-brand .name {
  font-weight: 700;
  font-size: var(--ae-text-lg);
  color: var(--ae-text-on-rail);
}

.side-nav { display: flex; flex-direction: column; gap: var(--ae-space-1); flex: 1; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
  padding: var(--ae-space-2) var(--ae-space-3);
  border-radius: var(--ae-radius-md);
  color: var(--ae-text-on-rail-muted);
  font-size: var(--ae-text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--ae-dur-fast) var(--ae-ease), color var(--ae-dur-fast) var(--ae-ease);
}
.side-nav a:hover { background: rgba(255,255,255,0.06); color: var(--ae-text-on-rail); text-decoration: none; }

.side-nav a.active {
  background: var(--ae-accent);
  color: var(--ae-text-on-accent);
  font-weight: 600;
  box-shadow: none;
}
.side-nav a.active:hover { background: var(--ae-accent-hover); color: var(--ae-text-on-accent); }

/* The one nav item that creates data gets accent text, not an accent fill —
   it is an action, not a location. */
.side-nav a.is-action { color: var(--ae-accent); font-weight: 600; }
.side-nav a.is-action:hover { color: var(--ae-accent-hover); }

.side-group-label {
  display: block;
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-on-rail-muted);
  padding: var(--ae-space-4) var(--ae-space-2) var(--ae-space-1);
}

.side-sub { display: flex; flex-direction: column; gap: var(--ae-space-1); }
.side-sub a { padding-left: var(--ae-space-3); font-size: var(--ae-text-sm); }

.nav-icon { width: 16px; height: 16px; flex: none; stroke-width: 1.6; fill: none; stroke: currentColor; }

.side-foot {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--ae-space-3);
  margin-top: var(--ae-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-2);
}

.side-user { display: flex; align-items: center; gap: var(--ae-space-3); }
.side-user .avatar, .side-user .avatar-ph { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.side-user .avatar-ph {
  background: rgba(255,255,255,0.08);
  color: var(--ae-text-on-rail);
  display: grid; place-items: center;
  font-family: var(--ae-font-display);
  font-weight: 700;
}
.side-user .u-name { font-size: var(--ae-text-sm); font-weight: 600; color: var(--ae-text-on-rail); }

.side-links { display: flex; gap: var(--ae-space-2); }
.side-links a {
  flex: 1;
  text-align: center;
  padding: var(--ae-space-2);
  border-radius: var(--ae-radius-md);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ae-text-on-rail-muted);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  text-decoration: none;
}
.side-links a:hover { background: rgba(255,255,255,0.08); color: var(--ae-text-on-rail); text-decoration: none; }

/* --- Page header --------------------------------------------------------- */
.mtop {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--ae-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ae-space-4);
  flex-wrap: wrap;
  padding: var(--ae-space-2) var(--ae-space-6);
  background: var(--ae-surface);
  border-bottom: 1px solid var(--ae-border);
}

.mtop .page-title { font-size: var(--ae-text-lg); font-weight: 600; margin: 0; }
.mtop .mtop-right { display: flex; align-items: center; gap: var(--ae-space-3); }

/* Entity switcher */
.switcher-pill {
  display: flex;
  align-items: center;
  gap: var(--ae-space-2);
  background: var(--ae-surface-2);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
  padding: var(--ae-space-1) var(--ae-space-3);
}
.switcher-label {
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ae-tracking-label);
  color: var(--ae-text-muted);
}
.company-switch { display: inline-block; margin: 0; }
.company-switch select {
  background: transparent;
  color: var(--ae-text);
  border: none;
  border-radius: var(--ae-radius-sm);
  padding: var(--ae-space-1) var(--ae-space-2);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  font-weight: 600;
  cursor: pointer;
}
.company-switch select option { background: var(--ae-surface); color: var(--ae-text); }

/* Theme toggle in the page header */
.ae-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  padding: var(--ae-space-1) var(--ae-space-3);
  border: 1px solid transparent;
  border-radius: var(--ae-radius-md);
  background: transparent;
  color: var(--ae-text-muted);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.ae-theme-toggle:hover { background: var(--ae-surface-2); color: var(--ae-text); }
.ae-theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Mobile drawer chrome (rules live in responsive.css; colors here) */
.nav-toggle {
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
  background: var(--ae-surface-2);
  color: var(--ae-text);
}

/* ==========================================================================
   Part 3 of 4: The .ae-* component library.
   These are the new primitives. The rebuilt Dashboard uses them directly;
   every other page reaches them through the legacy bridge in Part 4.
   ========================================================================== */

/* --- Eyebrow / label ----------------------------------------------------- */
.ae-label {
  font-size: var(--ae-text-xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}

/* --- Card ---------------------------------------------------------------- */
.ae-card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  box-shadow: var(--ae-shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ae-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ae-space-4);
  padding: var(--ae-space-4) var(--ae-space-5);
  border-bottom: 1px solid var(--ae-border);
}

.ae-card-title { font-family: var(--ae-font-display); font-size: var(--ae-text-lg); font-weight: 600; margin: 0; }
.ae-card-sub { font-size: var(--ae-text-md); color: var(--ae-text-muted); margin: var(--ae-space-1) 0 0; }

.ae-card-body { padding: var(--ae-space-5); }
.ae-card-body.is-flush { padding: 0; }

.ae-card-foot {
  margin-top: auto;
  padding: var(--ae-space-3) var(--ae-space-5);
  border-top: 1px solid var(--ae-border);
  background: var(--ae-surface-2);
  border-radius: 0 0 var(--ae-radius-lg) var(--ae-radius-lg);
  font-size: var(--ae-text-md);
  color: var(--ae-text-muted);
}

/* --- Section heading (outside cards) ------------------------------------- */
.ae-section { display: flex; flex-direction: column; gap: var(--ae-space-4); }
.ae-section-head { display: flex; flex-direction: column; gap: var(--ae-space-1); }
.ae-section-title { font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 600; margin: 0; }
.ae-section-sub { font-size: var(--ae-text-md); color: var(--ae-text-muted); max-width: 68ch; margin: 0; }

/* ==========================================================================
   MONEY — the core pattern of this system.
   USD is the decision number and is set large. BDT is a conversion and sits
   on its own muted line beneath it, never inline in the same breath.
   money_dual() in includes/functions.php emits exactly this markup, so every
   figure in the app picks the pattern up without a per-page change.
   ========================================================================== */

.ae-money {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  text-align: inherit;
}

.ae-money-primary {
  font-family: var(--ae-font-display);
  font-weight: 700;
  letter-spacing: var(--ae-tracking-display);
  color: var(--ae-text);
  line-height: var(--ae-leading-tight);
}

.ae-money-secondary {
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-2xs);
  font-weight: 500;
  color: var(--ae-text-muted);
  font-variant-numeric: tabular-nums;
}

/* A zero has no information in it. Recede it so the eye skips to real values. */
.ae-money.is-zero .ae-money-primary,
.ae-money.is-zero .ae-money-secondary { color: var(--ae-text-subtle); font-weight: 500; }

.ae-money.is-positive .ae-money-primary { color: var(--ae-positive); }
.ae-money.is-negative .ae-money-primary { color: var(--ae-negative); }

/* Size variants */
.ae-money .ae-money-primary { font-size: var(--ae-text-md); }
.ae-money.ae-size-sm .ae-money-primary { font-size: var(--ae-text-md); }
.ae-money.ae-size-md .ae-money-primary { font-size: var(--ae-text-xl); }
.ae-money.ae-size-lg .ae-money-primary { font-size: var(--ae-text-3xl); }
.ae-money.ae-size-xl .ae-money-primary { font-size: var(--ae-text-4xl); }

/* ==========================================================================
   STAT TILE — one number, its label, and its trend. Nothing else.
   ========================================================================== */

.ae-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ae-space-4);
}

.ae-stat {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  box-shadow: var(--ae-shadow-sm);
  padding: var(--ae-space-4) var(--ae-space-5) var(--ae-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-3);
  min-width: 0;
}

/* The single most important number on the page gets the accent ground.
   Exactly one per screen — this is the "one focal element" brand rule. */
.ae-stat.is-feature { background: var(--ae-accent); border-color: var(--ae-accent-line); }
.ae-stat.is-feature .ae-stat-label,
.ae-stat.is-feature .ae-money-primary,
.ae-stat.is-feature .ae-money-secondary,
.ae-stat.is-feature .ae-stat-note { color: var(--ae-text-on-accent); }
.ae-stat.is-feature .ae-money-secondary,
.ae-stat.is-feature .ae-stat-note { opacity: 0.72; }

.ae-stat-label {
  font-size: var(--ae-text-xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}

.ae-stat-note { font-size: var(--ae-text-xs); color: var(--ae-text-muted); }
.ae-stat-foot { display: flex; align-items: center; gap: var(--ae-space-2); flex-wrap: wrap; }

/* --- Delta chip — direction is in the shape AND the color, not color alone */
.ae-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--ae-space-2);
  border-radius: var(--ae-radius-pill);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--ae-surface-2);
  color: var(--ae-text-muted);
}
.ae-delta.is-up   { background: var(--ae-positive-quiet); color: var(--ae-positive); }
.ae-delta.is-down { background: var(--ae-negative-quiet); color: var(--ae-negative); }

/* ==========================================================================
   BADGE / PILL — state, always with a text label. Never color-only.
   ========================================================================== */

.ae-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  padding: 3px var(--ae-space-3);
  border-radius: var(--ae-radius-pill);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ae-surface-2);
  color: var(--ae-text-muted);
  white-space: nowrap;
}
.ae-badge.is-positive { background: var(--ae-positive-quiet); color: var(--ae-positive); }
.ae-badge.is-negative { background: var(--ae-negative-quiet); color: var(--ae-negative); }
.ae-badge.is-warning  { background: var(--ae-warning-quiet);  color: var(--ae-warning); }
.ae-badge.is-info     { background: var(--ae-info-quiet);     color: var(--ae-info); }
.ae-badge.is-accent   { background: var(--ae-accent-quiet);   color: var(--ae-accent-ink); }

.ae-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --- Role tag — quieter than a badge, for job titles in tables ----------- */
.ae-tag {
  display: inline-block;
  font-size: var(--ae-text-2xs);
  font-weight: 500;
  color: var(--ae-text-muted);
  background: var(--ae-surface-2);
  border-radius: var(--ae-radius-sm);
  padding: 2px var(--ae-space-2);
  white-space: nowrap;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ae-space-2);
  padding: var(--ae-space-2) var(--ae-space-4);
  border-radius: var(--ae-radius-md);
  border: 1px solid transparent;
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ae-dur-fast) var(--ae-ease), border-color var(--ae-dur-fast) var(--ae-ease), color var(--ae-dur-fast) var(--ae-ease);
}

.ae-btn-primary { background: var(--ae-accent); color: var(--ae-text-on-accent); }
.ae-btn-primary:hover { background: var(--ae-accent-hover); text-decoration: none; }

.ae-btn-secondary { background: var(--ae-surface); color: var(--ae-text); border-color: var(--ae-border-strong); }
.ae-btn-secondary:hover { background: var(--ae-surface-2); text-decoration: none; }

.ae-btn-ghost { background: transparent; color: var(--ae-text-muted); }
.ae-btn-ghost:hover { background: var(--ae-surface-2); color: var(--ae-text); text-decoration: none; }

.ae-btn-sm { padding: var(--ae-space-1) var(--ae-space-3); font-size: var(--ae-text-sm); }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.ae-field { display: flex; flex-direction: column; gap: var(--ae-space-2); min-width: 0; }

.ae-field-label {
  font-size: var(--ae-text-xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}

.ae-input, .ae-select {
  appearance: none;
  background: var(--ae-surface);
  color: var(--ae-text);
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-md);
  padding: var(--ae-space-2) var(--ae-space-3);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  min-height: 34px;
}

.ae-select {
  padding-right: var(--ae-space-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ae-input::placeholder { color: var(--ae-text-subtle); }

/* --- Segmented control — mutually exclusive views ------------------------ */
.ae-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--ae-surface-2);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
}

.ae-segment-item {
  padding: var(--ae-space-1) var(--ae-space-3);
  border: none;
  background: transparent;
  border-radius: var(--ae-radius-sm);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-sm);
  font-weight: 600;
  color: var(--ae-text-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.ae-segment-item:hover { color: var(--ae-text); text-decoration: none; }
.ae-segment-item.is-active { background: var(--ae-surface); color: var(--ae-text); box-shadow: var(--ae-shadow-sm); }

/* --- Filter bar ---------------------------------------------------------- */
.ae-filterbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--ae-space-4);
  padding: var(--ae-space-4) var(--ae-space-5);
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  box-shadow: var(--ae-shadow-sm);
}
.ae-filterbar-spacer { margin-left: auto; }

/* ==========================================================================
   TABLE — the workhorse. Hairline rules, no zebra, numbers right-aligned
   and tabular so columns compare vertically at a glance.
   ========================================================================== */

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

.ae-table { width: 100%; border-collapse: collapse; font-size: var(--ae-text-sm); background: transparent; }

.ae-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ae-surface-2);
  text-align: left;
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
  padding: var(--ae-space-3) var(--ae-space-4);
  border-bottom: 1px solid var(--ae-border);
  white-space: nowrap;
}

.ae-table tbody td {
  padding: var(--ae-space-3) var(--ae-space-4);
  border-bottom: 1px solid var(--ae-border);
  vertical-align: middle;
  background: transparent;
}

.ae-table tbody tr:last-child td { border-bottom: none; }
.ae-table tbody tr:hover td { background: var(--ae-surface-2); }
.ae-table tbody tr:nth-child(even) { background: transparent; }

.ae-table tfoot td {
  padding: var(--ae-space-3) var(--ae-space-4);
  border-top: 2px solid var(--ae-border-strong);
  font-weight: 700;
  background: var(--ae-surface-2);
}

/* Alignment + emphasis helpers, applied per column */
.ae-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-num .ae-money { align-items: flex-end; }
.ae-col-primary { font-weight: 600; color: var(--ae-text); }
.ae-col-quiet { color: var(--ae-text-muted); }

/* A whole row that carries no value — dim it as a unit. */
.ae-table tbody tr.is-empty td { color: var(--ae-text-subtle); }

/* Person cell: name over role */
.ae-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ae-person-name { font-weight: 600; color: var(--ae-text); white-space: nowrap; }
.ae-person-role { font-size: var(--ae-text-2xs); color: var(--ae-text-muted); }

/* ==========================================================================
   PIPELINE — payment stages. A single bar, proportional by amount, with a
   legend below carrying the exact figure and count for each stage.
   ========================================================================== */

.ae-pipeline { display: flex; flex-direction: column; gap: var(--ae-space-4); }

.ae-pipeline-bar {
  display: flex;
  height: 10px;
  border-radius: var(--ae-radius-pill);
  overflow: hidden;
  background: var(--ae-surface-2);
}

.ae-pipeline-fill { height: 100%; transition: flex-basis var(--ae-dur-base) var(--ae-ease); }
.ae-pipeline-fill.is-unpaid    { background: var(--ae-negative); }
.ae-pipeline-fill.is-invoiced  { background: var(--ae-warning); }
.ae-pipeline-fill.is-paid      { background: var(--ae-info); }
.ae-pipeline-fill.is-deposited { background: var(--ae-positive); }

.ae-pipeline-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: var(--ae-space-3);
}

.ae-pipeline-stage {
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-1);
  padding: var(--ae-space-3);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
  background: var(--ae-surface);
  border-left: 3px solid var(--ae-border-strong);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--ae-dur-fast) var(--ae-ease);
}
.ae-pipeline-stage:hover { background: var(--ae-surface-2); text-decoration: none; }
.ae-pipeline-stage.is-unpaid    { border-left-color: var(--ae-negative); }
.ae-pipeline-stage.is-invoiced  { border-left-color: var(--ae-warning); }
.ae-pipeline-stage.is-paid      { border-left-color: var(--ae-info); }
.ae-pipeline-stage.is-deposited { border-left-color: var(--ae-positive); }

.ae-pipeline-stage-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ae-space-2);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}

.ae-pipeline-count {
  font-variant-numeric: tabular-nums;
  background: var(--ae-surface-2);
  border-radius: var(--ae-radius-pill);
  padding: 1px var(--ae-space-2);
  letter-spacing: 0;
}

/* --- Pipeline substage: a fact ABOUT a stage, not a stage of its own ----- */
.ae-pipeline-substage {
  display: flex;
  align-items: baseline;
  gap: var(--ae-space-2);
  margin-top: var(--ae-space-2);
  padding-top: var(--ae-space-2);
  border-top: 1px dashed var(--ae-border);
  font-size: var(--ae-text-2xs);
  color: var(--ae-text-muted);
  font-variant-numeric: tabular-nums;
}
.ae-pipeline-substage strong { color: var(--ae-positive); font-weight: 700; }

/* ==========================================================================
   BAR METER — a proportional row used inside tables and breakdowns.
   Gives every list of amounts a shape, not just digits.
   ========================================================================== */

.ae-meter {
  display: block;
  height: 6px;
  width: 100%;
  min-width: 60px;
  background: var(--ae-surface-2);
  border-radius: var(--ae-radius-pill);
  overflow: hidden;
}

.ae-meter-fill { display: block; height: 100%; background: var(--ae-accent-line); border-radius: var(--ae-radius-pill); }
.ae-meter-fill.is-muted { background: var(--ae-series-4); }

/* --- Split bar: how a person's revenue divides between them and company -- */
.ae-split {
  display: flex;
  height: 8px;
  width: 100%;
  min-width: 120px;
  border-radius: var(--ae-radius-pill);
  overflow: hidden;
  background: var(--ae-surface-2);
}
.ae-split-them { background: var(--ae-series-4); }
.ae-split-us { background: var(--ae-accent-line); }

/* ==========================================================================
   CHART SCAFFOLD — shared chrome so every chart shares gridlines, axis
   type and legend treatment, whether it is inline SVG or a Chart.js canvas.
   ========================================================================== */

.ae-chart { display: flex; flex-direction: column; gap: var(--ae-space-4); }
.ae-chart-legend { display: flex; flex-wrap: wrap; gap: var(--ae-space-4); }
.ae-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  font-size: var(--ae-text-xs);
  color: var(--ae-text-muted);
  font-weight: 500;
}
.ae-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ae-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ae-grid-line { stroke: var(--ae-border); stroke-width: 1; }
.ae-axis-text { fill: var(--ae-text-muted); font-family: var(--ae-font-body); font-size: 10px; font-variant-numeric: tabular-nums; }
.ae-axis-text.is-emphasis { fill: var(--ae-text); font-weight: 600; }
.ae-bar { transition: opacity var(--ae-dur-fast) var(--ae-ease); }
.ae-bar:hover { opacity: 0.78; }

/* ==========================================================================
   ACTIVITY FEED
   ========================================================================== */

.ae-feed { display: flex; flex-direction: column; }

.ae-feed-item {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
  padding: var(--ae-space-3) var(--ae-space-5);
  border-bottom: 1px solid var(--ae-border);
}
.ae-feed-item:last-child { border-bottom: none; }

.ae-feed-icon {
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--ae-radius-sm);
  background: var(--ae-accent-quiet);
  color: var(--ae-accent-ink);
  font-size: var(--ae-text-2xs);
  font-weight: 700;
}
.ae-feed-icon.is-neutral { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.ae-feed-icon.is-negative { background: var(--ae-negative-quiet); color: var(--ae-negative); }

.ae-feed-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ae-feed-title { font-size: var(--ae-text-md); font-weight: 600; margin: 0; }
.ae-feed-meta { font-size: var(--ae-text-xs); color: var(--ae-text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; }
.ae-feed-amount { font-size: var(--ae-text-md); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ae-positive); white-space: nowrap; }
.ae-feed-amount.is-negative { color: var(--ae-negative); }
.ae-feed-amount.is-neutral { color: var(--ae-text-muted); font-weight: 600; }
.ae-feed-time { font-size: var(--ae-text-2xs); color: var(--ae-text-subtle); white-space: nowrap; }

/* ==========================================================================
   CALLOUT — informational strip (e.g. figures excluded from totals)
   ========================================================================== */

.ae-callout {
  display: flex;
  align-items: center;
  gap: var(--ae-space-4);
  padding: var(--ae-space-4) var(--ae-space-5);
  border: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-info);
  border-radius: var(--ae-radius-md);
  background: var(--ae-surface);
  flex-wrap: wrap;
}
.ae-callout-body { flex: 1; min-width: 0; }
.ae-callout-title { font-size: var(--ae-text-md); font-weight: 600; }
.ae-callout-text { font-size: var(--ae-text-xs); color: var(--ae-text-muted); }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.ae-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ae-space-2);
  padding: var(--ae-space-7) var(--ae-space-5);
  text-align: center;
  color: var(--ae-text-muted);
}
.ae-empty-title { font-family: var(--ae-font-display); font-size: var(--ae-text-lg); font-weight: 600; color: var(--ae-text); }
.ae-empty-text { font-size: var(--ae-text-md); max-width: 42ch; }

/* ==========================================================================
   FIGURE — a large number that is not money (counts, hours, percentages).
   Same typographic treatment as .ae-money-primary so tiles stay consistent.
   ========================================================================== */

.ae-figure {
  font-family: var(--ae-font-display);
  font-weight: 700;
  letter-spacing: var(--ae-tracking-display);
  line-height: var(--ae-leading-tight);
  color: var(--ae-text);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: var(--ae-space-2);
}
.ae-figure.ae-size-sm { font-size: var(--ae-text-md); }
.ae-figure.ae-size-md { font-size: var(--ae-text-xl); }
.ae-figure.ae-size-lg { font-size: var(--ae-text-3xl); }
.ae-figure.ae-size-xl { font-size: var(--ae-text-4xl); }
.ae-figure-unit { font-family: var(--ae-font-body); font-size: var(--ae-text-md); font-weight: 500; color: var(--ae-text-muted); }
.ae-stat.is-feature .ae-figure { color: var(--ae-text-on-accent); }

/* ==========================================================================
   CELL STACK — a generic two-line table cell: identifier over context.
   ========================================================================== */

.ae-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ae-cell-main { font-weight: 600; color: var(--ae-text); }
.ae-cell-sub { font-size: var(--ae-text-2xs); color: var(--ae-text-muted); }
.ae-cell-sub.is-wrap { white-space: normal; max-width: 30ch; line-height: 1.4; }
.ae-table tbody tr.is-empty .ae-cell-main { color: inherit; }

/* --- Date range — compact, tabular, never two labelled lines ------------- */
.ae-daterange { display: inline-flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-daterange-main { font-size: var(--ae-text-sm); font-weight: 600; color: var(--ae-text); }
.ae-daterange-year { font-size: var(--ae-text-2xs); color: var(--ae-text-subtle); }
.ae-table tbody tr.is-empty .ae-daterange-main { color: inherit; }

/* ==========================================================================
   ROW ACTIONS — quiet by default, revealed on hover or keyboard focus.
   Forty rows of loud coloured buttons is forty rows of noise; the data is
   what the page is for.
   ========================================================================== */

.ae-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ae-space-1);
  opacity: 0;
  transition: opacity var(--ae-dur-fast) var(--ae-ease);
}
.ae-table tbody tr:hover .ae-row-actions,
.ae-row-actions:focus-within { opacity: 1; }

/* Touch and keyboard users never get a hover, so never hide the controls */
@media (hover: none) { .ae-row-actions { opacity: 1; } }

.ae-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ae-radius-sm);
  background: transparent;
  color: var(--ae-text-muted);
  cursor: pointer;
  transition: background var(--ae-dur-fast) var(--ae-ease), color var(--ae-dur-fast) var(--ae-ease);
}
.ae-icon-btn:hover { background: var(--ae-surface-3); color: var(--ae-text); }
.ae-icon-btn.is-danger:hover { background: var(--ae-negative-quiet); color: var(--ae-negative); }
.ae-icon-btn svg { width: 15px; height: 15px; stroke-width: 1.7; fill: none; stroke: currentColor; }

/* ==========================================================================
   GROUP ROW — a subheader inside a long table.
   ========================================================================== */

.ae-table tbody tr.ae-group-row td {
  background: var(--ae-surface-2);
  border-bottom: 1px solid var(--ae-border);
  border-top: 1px solid var(--ae-border);
  padding: var(--ae-space-2) var(--ae-space-4);
}
.ae-table tbody tr.ae-group-row:hover td { background: var(--ae-surface-2); }

.ae-group-label {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
  font-size: var(--ae-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}
.ae-group-total {
  margin-left: auto;
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-sm);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ae-text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TOOLBAR — a summary strip above a long table.
   ========================================================================== */

.ae-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ae-space-3);
  padding: var(--ae-space-3) var(--ae-space-5);
  border-bottom: 1px solid var(--ae-border);
  background: var(--ae-surface-2);
  font-size: var(--ae-text-md);
  color: var(--ae-text-muted);
}
.ae-toolbar strong { color: var(--ae-text); font-weight: 600; }

/* --- Checkbox that reads as a filter, not a form field ------------------- */
.ae-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  font-size: var(--ae-text-md);
  color: var(--ae-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ae-check input { accent-color: var(--ae-accent-line); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.ae-check:hover { color: var(--ae-text); }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.ae-grid { display: grid; gap: var(--ae-space-4); }
.ae-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ae-grid-main-side { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.ae-stack { display: flex; flex-direction: column; gap: var(--ae-space-4); }
.ae-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ae-space-3); }
.ae-cluster-tight { gap: var(--ae-space-2); }
.ae-push { margin-left: auto; }

@media (max-width: 1080px) { .ae-grid-main-side { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Part 4 of 4: LEGACY BRIDGE.
   v26-styles.css still supplies the structure for the 44 pages whose markup
   has not been rebuilt. Everything here re-skins those existing classes in
   the new design language, so those pages inherit the system without a
   single markup change. Selectors match v26's specificity where needed;
   !important is used only where v26 itself used it.
   ========================================================================== */

/* --- Card ---------------------------------------------------------------- */
.card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-space-5);
  margin-bottom: 0;
  box-shadow: var(--ae-shadow-sm);
}

/* --- KPI cards → stat tiles ---------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ae-space-4);
  margin-bottom: 0;
}

.kpi-card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-space-4) var(--ae-space-5) var(--ae-space-5);
  box-shadow: var(--ae-shadow-sm);
  transition: none;
}
.kpi-card:hover { box-shadow: var(--ae-shadow-sm); transform: none; }

.kpi-card .label {
  font-size: var(--ae-text-xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
}
.kpi-card .value {
  font-family: var(--ae-font-display);
  font-size: var(--ae-text-3xl);
  font-weight: 700;
  letter-spacing: var(--ae-tracking-display);
  color: var(--ae-text);
  margin-top: var(--ae-space-3);
  line-height: var(--ae-leading-tight);
  font-variant-numeric: tabular-nums;
}
.kpi-card .hint {
  font-size: var(--ae-text-2xs);
  font-weight: 500;
  color: var(--ae-text-muted);
  margin-top: 1px;
  opacity: 1;
}

/* The one focal tile per screen gets the accent ground, not a navy gradient. */
.kpi-card.kpi-hero { background: var(--ae-accent); border: 1px solid var(--ae-accent-line); color: var(--ae-text-on-accent); }
.kpi-card.kpi-hero .label { color: var(--ae-text-on-accent); }
.kpi-card.kpi-hero .value { color: var(--ae-text-on-accent); }
.kpi-card.kpi-hero .hint { color: var(--ae-text-on-accent); opacity: 0.72; }
.kpi-hero-bar { margin-top: var(--ae-space-3); background: rgba(18,20,12,0.18); height: 6px; border-radius: var(--ae-radius-pill); overflow: hidden; }
.kpi-hero-bar-fill { background: var(--ae-text-on-accent); height: 100%; border-radius: var(--ae-radius-pill); }

.kpi-chip {
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  padding: 2px var(--ae-space-2);
  border-radius: var(--ae-radius-pill);
  font-variant-numeric: tabular-nums;
}
.kpi-chip-up { background: var(--ae-positive-quiet); color: var(--ae-positive); }
.kpi-chip-down { background: var(--ae-negative-quiet); color: var(--ae-negative); }
.kpi-chip-neutral { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.kpi-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ae-space-2); }

/* --- Legacy inline BDT figure -------------------------------------------- */
/* money_dual() now emits .ae-money, but a handful of pages write .fx by hand. */
.fx { color: var(--ae-text-muted); font-size: var(--ae-text-2xs); font-weight: 500; }

/* --- Tables -------------------------------------------------------------- */
.table-wrap {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  overflow: hidden;
  box-shadow: var(--ae-shadow-sm);
  margin-bottom: 0;
}
.table-wrap.scroll { max-height: 420px; overflow-y: auto; }

table { border-collapse: collapse; width: 100%; background: var(--ae-surface); margin-bottom: 0; font-size: var(--ae-text-sm); }

th, td {
  border-bottom: 1px solid var(--ae-border);
  padding: var(--ae-space-3) var(--ae-space-4);
  text-align: left;
  vertical-align: middle;
}

th {
  background: var(--ae-surface-2);
  color: var(--ae-text-muted);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ae-tracking-label);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

/* No zebra. Hairlines carry the row rhythm; stripes fight the money column. */
tr:nth-child(even) { background: transparent; }
tbody td { color: var(--ae-text); background: transparent; }
tbody td:first-child { color: var(--ae-text); font-weight: 600; }
tr:hover td { background: var(--ae-surface-2); }

tfoot td, tfoot th {
  background: var(--ae-surface-2);
  border-top: 2px solid var(--ae-border-strong);
  font-weight: 700;
  color: var(--ae-text);
}

/* --- Buttons ------------------------------------------------------------- */
button, .btn {
  background: var(--ae-accent);
  color: var(--ae-text-on-accent);
  border: 1px solid transparent;
  padding: var(--ae-space-2) var(--ae-space-4);
  border-radius: var(--ae-radius-md);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ae-space-2);
  transition: background var(--ae-dur-fast) var(--ae-ease);
}
button:hover, .btn:hover { background: var(--ae-accent-hover); opacity: 1; text-decoration: none; }

.btn.btn-secondary, .btn.secondary, .btn-ghost, button.btn-secondary {
  background: var(--ae-surface);
  color: var(--ae-text);
  border: 1px solid var(--ae-border-strong);
}
.btn.btn-secondary:hover, .btn.secondary:hover, .btn-ghost:hover, button.btn-secondary:hover { background: var(--ae-surface-2); }

.btn-sm { padding: var(--ae-space-1) var(--ae-space-3) !important; font-size: var(--ae-text-sm) !important; border-radius: var(--ae-radius-md) !important; }

/* --- Alerts -------------------------------------------------------------- */
.alert {
  padding: var(--ae-space-3) var(--ae-space-4);
  border-radius: var(--ae-radius-md);
  margin-bottom: var(--ae-space-4);
  font-size: var(--ae-text-md);
  border: 1px solid var(--ae-border);
  border-left-width: 3px;
  background: var(--ae-surface);
  color: var(--ae-text);
}
.alert-error { background: var(--ae-negative-quiet); border-color: var(--ae-negative); color: var(--ae-negative); }
.alert-success { background: var(--ae-positive-quiet); border-color: var(--ae-positive); color: var(--ae-positive); }

/* --- Badges / status pills ----------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  padding: 3px var(--ae-space-3);
  border-radius: var(--ae-radius-pill);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--ae-surface-2);
  color: var(--ae-text-muted);
  white-space: nowrap;
}
.badge-board   { background: var(--ae-accent-quiet); color: var(--ae-accent-ink); }
.badge-manager { background: var(--ae-warning-quiet); color: var(--ae-warning); }
.badge-member  { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.badge-company { background: var(--ae-accent-quiet); color: var(--ae-accent-ink); }

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--ae-space-3);
  border-radius: var(--ae-radius-pill);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  background: var(--ae-surface-2);
}
.status-pill-active { background: var(--ae-positive-quiet); color: var(--ae-positive); }
.status-pill-archived { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.status-pill-pending { background: var(--ae-negative-quiet); color: var(--ae-negative); }

/* --- Client cards (grid) --------------------------------------------------
   Card-grid alternative to a directory table — one client per card. Used by
   Client History today; written generically enough for Active Clients or
   any other "directory of records" page to reuse the same classes. */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--ae-space-4);
}

.client-card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-lg);
  box-shadow: var(--ae-shadow-sm);
  padding: var(--ae-space-4) var(--ae-space-5) var(--ae-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ae-space-4);
}
.client-card.is-active { border-left-color: var(--ae-positive); }
.client-card.is-off { border-left-color: var(--ae-border-strong); }

.client-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ae-space-3); }
.client-id { display: flex; align-items: flex-start; gap: var(--ae-space-3); min-width: 0; }
.client-avatar {
  flex: none; width: 34px; height: 34px; border-radius: var(--ae-radius-md);
  background: var(--ae-surface-2); color: var(--ae-text-muted);
  display: grid; place-items: center;
  font-family: var(--ae-font-display); font-weight: 700; font-size: var(--ae-text-sm);
}
.client-name-wrap { min-width: 0; }
.client-name { display: block; font-size: var(--ae-text-lg); font-weight: 600; color: var(--ae-text); font-family: var(--ae-font-body); }
.client-name:hover { color: var(--ae-accent-ink); text-decoration: none; }
.client-company {
  font-size: var(--ae-text-xs); color: var(--ae-text-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.client-meta { display: flex; flex-direction: column; gap: var(--ae-space-2); margin: 0; }
.client-meta-row { display: grid; grid-template-columns: 66px 1fr; gap: var(--ae-space-3); align-items: baseline; }
.client-meta-row dt { font-size: var(--ae-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ae-tracking-label); color: var(--ae-text-subtle); margin: 0; }
.client-meta-row dd { font-size: var(--ae-text-sm); color: var(--ae-text); margin: 0; }

.client-pricing { background: var(--ae-surface-2); border-radius: var(--ae-radius-md); padding: var(--ae-space-3); margin: 0; }
.client-pricing dt { font-size: var(--ae-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ae-tracking-label); color: var(--ae-text-muted); margin: 0 0 2px; }
.client-pricing dd { font-size: var(--ae-text-sm); color: var(--ae-text); margin: 0; font-weight: 600; }
.client-pricing .fx { display: block; font-size: var(--ae-text-2xs); font-weight: 500; color: var(--ae-text-muted); margin-top: 2px; }

.client-card-actions { display: flex; gap: var(--ae-space-2); border-top: 1px solid var(--ae-border); padding-top: var(--ae-space-3); margin-top: auto; }
.client-card-actions form { margin: 0; flex: 1; display: flex; }
.client-card-actions .btn { flex: 1; }

/* --- Forms --------------------------------------------------------------- */
form .field { margin-bottom: var(--ae-space-3); }
form label, .filter-bar .field label {
  display: block;
  font-size: var(--ae-text-xs);
  font-weight: 600;
  letter-spacing: var(--ae-tracking-label);
  text-transform: uppercase;
  color: var(--ae-text-muted);
  margin-bottom: var(--ae-space-2);
}

input, select, textarea,
form input[type=text], form input[type=email], form input[type=password],
form input[type=number], form input[type=date], form input[type=month],
form select, form textarea,
.filter-bar .field input, .filter-bar .field select {
  appearance: none;
  width: 100%;
  background: var(--ae-surface);
  color: var(--ae-text);
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-md);
  padding: var(--ae-space-2) var(--ae-space-3);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  min-height: 34px;
}
input[type=checkbox], input[type=radio] {
  width: 15px; height: 15px; min-height: 0;
  accent-color: var(--ae-accent-line);
  appearance: auto;
}
input::placeholder, textarea::placeholder { color: var(--ae-text-subtle); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ae-accent-line); }
select option { background: var(--ae-surface); color: var(--ae-text); }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ae-space-4); }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ae-space-4); }

.form-section { margin-bottom: var(--ae-space-5); padding-top: var(--ae-space-4); border-top: 1px solid var(--ae-border); }
.form-section:first-child { border-top: none; padding-top: 0; }
.form-section-title {
  font-size: var(--ae-text-xs);
  font-weight: 600;
  color: var(--ae-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ae-tracking-label);
  margin-bottom: var(--ae-space-3);
}

details > summary { cursor: pointer; color: var(--ae-accent-ink); font-size: var(--ae-text-md); font-weight: 600; padding: var(--ae-space-2) 0; list-style: none; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '\25B8  '; }
details[open] > summary::before { content: '\25BE  '; }

/* --- Filter bar ---------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ae-space-4);
  margin-bottom: 0;
}
.filter-bar .field { margin-bottom: 0; min-width: 150px; }

/* --- Month banner -------------------------------------------------------- */
.month-banner {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  color: var(--ae-text);
  font-weight: 600;
  padding: var(--ae-space-2) var(--ae-space-4);
  border-radius: var(--ae-radius-pill);
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ae-space-2);
  font-size: var(--ae-text-md);
  align-self: flex-start;
}
.month-banner-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ae-space-2);
  padding: 2px var(--ae-space-3);
  border-radius: var(--ae-radius-pill);
  font-size: var(--ae-text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--ae-surface-2);
  color: var(--ae-text-muted);
}
.month-banner-badge-auto  { background: var(--ae-accent-quiet); color: var(--ae-accent-ink); }
.month-banner-badge-fixed { background: var(--ae-warning-quiet); color: var(--ae-warning); }
.month-banner-badge-all   { background: var(--ae-surface-2); color: var(--ae-text-muted); }

/* --- Bento layout -------------------------------------------------------- */
.bento-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--ae-space-4); align-items: start; }
@media (max-width: 1080px) { .bento-grid { grid-template-columns: minmax(0, 1fr); } }
.bento-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ae-space-4); margin-bottom: var(--ae-space-4); }

/* --- CSS bar chart (Revenue Distribution) -------------------------------- */
.rev-bars { display: flex; align-items: flex-end; gap: var(--ae-space-5); height: 180px; padding: 0 var(--ae-space-1) var(--ae-space-2); border-bottom: 1px solid var(--ae-border); }
.rev-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: var(--ae-space-2); background: transparent; }
.rev-bar { width: 100%; max-width: 56px; background: var(--ae-accent-line); border-radius: var(--ae-radius-sm) var(--ae-radius-sm) 0 0; min-height: 4px; transition: opacity var(--ae-dur-fast) var(--ae-ease); }
.rev-bar:hover { opacity: 0.78; }
.rev-bar-amount { font-family: var(--ae-font-display); font-size: var(--ae-text-xs); font-weight: 700; color: var(--ae-text); font-variant-numeric: tabular-nums; }
.rev-bar-label { font-size: var(--ae-text-2xs); color: var(--ae-text-muted); font-weight: 500; }
.rev-split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ae-space-3); margin-top: var(--ae-space-4); }
.rev-split-stats > div { text-align: center; }
.stat-label { display: block; font-size: var(--ae-text-xs); text-transform: uppercase; letter-spacing: var(--ae-tracking-label); color: var(--ae-text-muted); font-weight: 600; margin-bottom: var(--ae-space-1); }
.stat-value { display: block; font-family: var(--ae-font-display); font-size: var(--ae-text-lg); font-weight: 700; color: var(--ae-text); }

/* --- Recent Activity feed ------------------------------------------------ */
.activity-list { display: flex; flex-direction: column; gap: var(--ae-space-4); max-height: 420px; overflow-y: auto; }
.activity-item { display: flex; gap: var(--ae-space-3); align-items: flex-start; background: transparent; }
.activity-icon {
  width: 26px; height: 26px;
  border-radius: var(--ae-radius-sm);
  flex-shrink: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--ae-text-2xs);
}
.activity-icon-income { background: var(--ae-accent-quiet); color: var(--ae-accent-ink); }
.activity-icon-cost { background: var(--ae-negative-quiet); color: var(--ae-negative); }
.activity-icon-team { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.activity-body { flex: 1; min-width: 0; }
.activity-title { margin: 0; font-size: var(--ae-text-md); font-weight: 600; color: var(--ae-text); }
.activity-sub { margin: 1px 0 0; font-size: var(--ae-text-xs); color: var(--ae-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--ae-space-1); gap: var(--ae-space-2); }
.activity-amount { font-size: var(--ae-text-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.activity-amount-income { color: var(--ae-positive); }
.activity-amount-cost { color: var(--ae-negative); }
.activity-amount-team { color: var(--ae-text-muted); font-weight: 600; }
.activity-time { font-size: var(--ae-text-2xs); color: var(--ae-text-subtle); white-space: nowrap; }

/* --- Salary ghost → callout ---------------------------------------------- */
.salary-ghost {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ae-space-4);
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-info);
  border-top: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
  padding: var(--ae-space-4) var(--ae-space-5);
}
.salary-ghost-label { display: flex; align-items: center; gap: var(--ae-space-3); }
.salary-ghost-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ae-info);
  color: var(--ae-info);
  display: grid; place-items: center;
  font-size: var(--ae-text-2xs); font-weight: 700; flex-shrink: 0;
}
.salary-ghost-title { margin: 0; font-size: var(--ae-text-md); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ae-text); }
.salary-ghost-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ae-text-muted); }
.salary-ghost-sub { margin: 2px 0 0; font-size: var(--ae-text-xs); font-style: normal; color: var(--ae-text-muted); }
.salary-ghost-amounts { display: flex; gap: var(--ae-space-4); flex-wrap: wrap; }
.salary-ghost-amounts span { font-family: var(--ae-font-display); font-size: var(--ae-text-lg); font-weight: 700; color: var(--ae-text); font-variant-numeric: tabular-nums; }

/* --- Get Paid funnel (Dashboard + Receivables) --------------------------- */
.gp-bar { display: flex; height: 10px; border-radius: var(--ae-radius-pill); overflow: hidden; margin: var(--ae-space-2) 0 var(--ae-space-4); background: var(--ae-surface-2); border: none; }
.gp-seg { display: block; height: 100%; transition: filter var(--ae-dur-fast) var(--ae-ease); }
.gp-seg:hover { filter: brightness(1.12); }
.gp-seg.gp-np { background: var(--ae-negative); }
.gp-seg.gp-is { background: var(--ae-warning); }
.gp-seg.gp-pd { background: var(--ae-info); }

.gp-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: var(--ae-space-3); }
.gp-item {
  display: flex; align-items: center; gap: var(--ae-space-3);
  text-decoration: none;
  padding: var(--ae-space-3);
  border: 1px solid var(--ae-border);
  border-left: 3px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-md);
  background: var(--ae-surface);
  min-width: 0;
}
.gp-item:hover { background: var(--ae-surface-2); text-decoration: none; }
.gp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gp-dot.gp-np { background: var(--ae-negative); }
.gp-dot.gp-is { background: var(--ae-warning); }
.gp-dot.gp-pd { background: var(--ae-info); }
.gp-dot.gp-dep { background: var(--ae-positive); }
.gp-amt { display: block; font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 700; color: var(--ae-text); font-variant-numeric: tabular-nums; }
.gp-lbl { display: block; font-size: var(--ae-text-2xs); font-weight: 600; letter-spacing: var(--ae-tracking-label); text-transform: uppercase; color: var(--ae-text-muted); }
.gp-summary { display: flex; gap: var(--ae-space-6); margin-top: var(--ae-space-4); padding-top: var(--ae-space-4); border-top: 1px solid var(--ae-border); flex-wrap: wrap; }
.gp-summary .gp-big { display: block; font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 700; color: var(--ae-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.gp-overdue { color: var(--ae-warning); font-weight: 700; }

/* --- A/R aging (Receivables) --------------------------------------------- */
.aging-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ae-space-3); margin: var(--ae-space-2) 0 var(--ae-space-5); }
@media (max-width: 900px) { .aging-row { grid-template-columns: repeat(2, 1fr); } }
.aging-card {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-space-4) var(--ae-space-4);
  border-left: 3px solid var(--ae-border-strong);
  border-top: 1px solid var(--ae-border);
  box-shadow: var(--ae-shadow-sm);
}
.aging-card.ag-current { border-left-color: var(--ae-text-subtle); }
.aging-card.ag-1 { border-left-color: var(--ae-warning); }
.aging-card.ag-2 { border-left-color: var(--ae-warning); }
.aging-card.ag-3 { border-left-color: var(--ae-negative); }
.aging-card.ag-4 { border-left-color: var(--ae-negative); }
.aging-label { font-size: var(--ae-text-xs); color: var(--ae-text-muted); font-weight: 600; letter-spacing: var(--ae-tracking-label); text-transform: uppercase; }
.aging-amt { font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 700; color: var(--ae-text); margin-top: var(--ae-space-2); font-variant-numeric: tabular-nums; }
.aging-sub { font-size: var(--ae-text-2xs); color: var(--ae-text-muted); margin-top: 2px; }
.age-pill { display: inline-block; padding: 2px var(--ae-space-3); border-radius: var(--ae-radius-pill); font-size: var(--ae-text-2xs); font-weight: 600; }
.age-pill.ag-current { background: var(--ae-surface-2); color: var(--ae-text-muted); }
.age-pill.ag-1 { background: var(--ae-warning-quiet); color: var(--ae-warning); }
.age-pill.ag-2 { background: var(--ae-warning-quiet); color: var(--ae-warning); }
.age-pill.ag-3 { background: var(--ae-negative-quiet); color: var(--ae-negative); }
.age-pill.ag-4 { background: var(--ae-negative-quiet); color: var(--ae-negative); }

/* --- Add Entry preview strip --------------------------------------------- */
.qe-preview { display: flex; gap: var(--ae-space-6); margin-top: var(--ae-space-4); padding: var(--ae-space-4) var(--ae-space-5); background: var(--ae-surface-2); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-md); flex-wrap: wrap; }
.qe-plabel { display: block; font-size: var(--ae-text-2xs); font-weight: 600; letter-spacing: var(--ae-tracking-label); text-transform: uppercase; color: var(--ae-text-muted); }
.qe-pval { display: block; font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 700; color: var(--ae-text); font-variant-numeric: tabular-nums; }
.qe-pval.qe-net { color: var(--ae-accent-ink); }

/* --- Password eye toggle -------------------------------------------------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; }
.pw-eye {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; min-height: 0;
  background: transparent; border: 0; border-radius: var(--ae-radius-sm);
  color: var(--ae-text-muted); cursor: pointer; line-height: 0;
}
.pw-eye:hover { color: var(--ae-text); background: var(--ae-surface-2); }
.pw-eye.on { color: var(--ae-accent-ink); }

/* --- Client filter dropdown (Income) ------------------------------------- */
.client-filter-dropdown { position: relative; display: inline-block; min-width: 220px; }
.client-filter-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ae-space-2);
  padding: var(--ae-space-2) var(--ae-space-3);
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-md);
  background: var(--ae-surface);
  font-family: var(--ae-font-body);
  font-size: var(--ae-text-md);
  font-weight: 500;
  color: var(--ae-text);
  cursor: pointer;
  text-align: left;
  min-height: 34px;
}
.client-filter-toggle:hover { border-color: var(--ae-accent-line); }
.client-filter-menu {
  background: var(--ae-surface);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-md);
  box-shadow: var(--ae-shadow-pop);
  padding: var(--ae-space-2) var(--ae-space-3);
}
.client-filter-menu label { font-size: var(--ae-text-md); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ae-text); margin-bottom: 0; }
.client-filter-menu label:hover { background: var(--ae-surface-2); border-radius: var(--ae-radius-sm); }

/* --- Account page -------------------------------------------------------- */
.account-profile-card { background: var(--ae-surface); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); box-shadow: var(--ae-shadow-sm); }
.account-name { font-family: var(--ae-font-display); color: var(--ae-text); }
.account-role-badge, .account-browse-label span { color: var(--ae-accent-ink); }
.account-avatar-placeholder { background: var(--ae-surface-2); color: var(--ae-text-muted); }

/* --- Theme picker (Account) ---------------------------------------------- */
.theme-picker { display: flex; gap: var(--ae-space-3); flex-wrap: wrap; margin-top: var(--ae-space-2); }
.theme-swatch {
  cursor: pointer;
  border: 1px solid var(--ae-border-strong);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-space-3) var(--ae-space-4);
  background: var(--ae-surface);
  min-width: 130px;
  display: flex; flex-direction: column; gap: var(--ae-space-2);
  text-align: left;
}
.theme-swatch:hover { background: var(--ae-surface-2); }
.theme-swatch.selected { border-color: var(--ae-accent-line); box-shadow: 0 0 0 1px var(--ae-accent-line) inset; }
.theme-swatch .dots { display: flex; gap: var(--ae-space-2); }
.theme-swatch .dot { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--ae-border); }
.theme-swatch .nm { font-size: var(--ae-text-md); font-weight: 600; color: var(--ae-text); }
.theme-swatch .mark { font-size: var(--ae-text-2xs); color: var(--ae-text-muted); }

/* --- Login --------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--ae-space-5); max-width: none; margin: 0; }
.login-wrap .card { width: 100%; max-width: 400px; }
.login-wrap h1, .login-wrap h1 a { color: var(--ae-text); }
.login-wrap button, .login-wrap button[type=submit] { width: 100%; margin-top: var(--ae-space-2); padding: var(--ae-space-3); font-size: var(--ae-text-base); }

/* --- Charts (Chart.js canvases) ------------------------------------------ */
.chart-wrap { max-width: 380px; margin: var(--ae-space-4) auto 0; background: transparent; }
.chart-wrap canvas { max-height: 220px !important; }

/* --- Misc ---------------------------------------------------------------- */
.h1-suffix { color: var(--ae-text-subtle); font-weight: 600; font-size: 0.6em; vertical-align: middle; }
.conditional { display: none; }
.who-name { color: var(--ae-text); }
.landing-body { background: var(--ae-canvas); }

/* ==========================================================================
   PRINT — finance figures get printed and emailed. Make that not look broken.
   ========================================================================== */

@media print {
  .side, .mtop, .nav-overlay, .no-print, .filter-bar, .ae-filterbar, .mobile-bottom-nav { display: none !important; }
  .app-shell { display: block; }
  .main-area .container { padding: 0; max-width: 100%; }
  .card, .kpi-card, .ae-card, .ae-stat { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

/* ==========================================================================
   RESPONSIVE — the rail collapses into an off-canvas drawer below 900px.
   The drawer mechanics live in responsive.css; this only fixes the grid.
   ========================================================================== */

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .mtop { padding: var(--ae-space-3) var(--ae-space-4); }
  .main-area .container { padding: var(--ae-space-4) var(--ae-space-4) var(--ae-space-7); gap: var(--ae-space-4); }
  .row-3 { grid-template-columns: 1fr 1fr; }
  .gp-legend, .ae-pipeline-legend { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .row-2, .row-3 { grid-template-columns: 1fr; }
  .gp-legend, .ae-pipeline-legend { grid-template-columns: 1fr; }
  .rev-split-stats { grid-template-columns: 1fr; }
  .gp-summary { gap: var(--ae-space-4); }
}