/* ============================================================
   FIRST-LOAD APPEAR ANIMATIONS (dashboard-anim.js adds is-revealed). Subtle
   fade + slight rise, staggered. prefers-reduced-motion → no transition. */
.em-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease, cubic-bezier(.22,.61,.36,1)),
              transform 0.5s var(--ease, cubic-bezier(.22,.61,.36,1));
  will-change: opacity, transform;
}
.em-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .em-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   screens/dashboard/dashboard.css — SCREEN-LEVEL LAYOUT ONLY
   ----------------------------------------------------------------------------
   BENCHMARK SCREEN. This file contains ZERO component styling. It only defines
   the page-shell grid (side-nav rail + main column) and the KPI grid wrapper.
   Every visual surface, color, shadow, radius, and type comes from kit tokens
   and .em-* component classes consumed verbatim. A foundation-token change
   must still propagate here — nothing below hardcodes a brand value.

   Allowed here (layout primitives the kit has no component for):
     - the app frame CSS grid (rail | main)
     - the KPI responsive grid track
     - sticky positioning of the shell bands
   Everything else = kit classes.

   D-07 (kit-wide audit):
     · KPI grid changed from repeat(7, minmax(0,1fr)) to
       repeat(auto-fit, minmax(220px,1fr)) — browser decides tile count by
       viewport; prevents the ~210px narrow tiles that clipped ₹42.6Cr (diagnosis A).
     · .em-dashboard-content given a defined background (var(--bg)) so the
       content-well is explicit and the ivory-page + elevated-card hierarchy reads
       as deliberate paper-on-linen depth, not accidental bleeding (diagnosis B).
   FINDING P: MARBLE BACKGROUND REMOVED. The workspace field is now a flat RECESSED
   panel tone (a step below the card surface) so cards clearly float above it — no
   marble. Marble is retained ONLY for the primary CTA button (.em-btn.marble), which
   still uses em-marble.js. The workspace tone:
     · dark  → --surface-sunken (#0e1114) — recessed beneath the --surface-elevated cards
     · light → --surface-2 (#f3f1ec warm) — recessed beneath the ivory cards
   Cards keep their neu depth (--surface-elevated + --neu-card-elevated) and read as
   raised over this recessed field. Tones harmonize with the component panels.
   ============================================================================ */

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

html, body { height: 100%; }

body.em-dashboard-screen {
  margin: 0;
  font-family: var(--font-sans);
  /* Workspace MARBLE field (dark marble dark mode / white Carrara light mode) paints
     behind content via .em-marble--workspace (material.js). Body bg is a matte fallback
     tone for no-WebGL only — kept transparent-ish so the marble shows when live. */
  background: var(--bg);
  color: var(--tx);
  /* Custom thin HAIRLINE scrollbar matching the kit's .em-scroll-area treatment
     (scroll-area.css): thin track, --line-strong thumb → --hair on hover. Replaces the
     basic default browser scrollbar on the workspace. */
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--line-strong) transparent;        /* Firefox: thumb / track */
}
body.em-dashboard-screen::-webkit-scrollbar { width: 10px; height: 10px; }
body.em-dashboard-screen::-webkit-scrollbar-track { background: transparent; }
body.em-dashboard-screen::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;       /* inset the thumb so it reads as a thin hairline */
  background-clip: content-box;
}
body.em-dashboard-screen::-webkit-scrollbar-thumb:hover { background: var(--hair); background-clip: content-box; }

/* Workspace field tone per theme (matte fallback under the marble). */
:root { --workspace-field: var(--surface-sunken); }      /* dark: #0e1114 recessed */
[data-theme="light"] { --workspace-field: var(--surface-2); }  /* light: #f3f1ec warm */

/* ============================================================
   WORKSPACE MARBLE FIELD — the dark/white marble background behind all content
   (material.js renders into .em-marble--workspace; MODE follows [data-theme]:
   dark marble in dark mode, white Carrara in light mode). The kit positions the field
   fixed/full-bleed at z-index:0; lift every OTHER body child above it (kit pattern). */
body.em-dashboard-screen > :not(.em-marble--workspace):not(.em-marble--fallback) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   CARD / PANEL DEPTH — bottom-right shadow ONLY (user spec). The kit --neu-raised
   paints TWO shadows: a dark bottom-right sink AND a --neu-light top-left light-catch.
   That top-left grey glow reads as low-quality. Drop it: keep only the bottom-right
   dark drop. Applied to the dashboard's cards/panels (scoped to the screen). */
/* OUTER surfaces only — the single raised panel per card/panel. Bottom-right shadow,
   no top-left grey catch. Do NOT include .em-chart-card here — that is the INNER chart
   panel; shadowing it creates a card-inside-a-card (the broken double panel). The inner
   .em-chart / .em-chart-card are neutralized to transparent passthroughs below. */
.em-dashboard-screen .em-card,
.em-dashboard-screen .em-card[data-variant="elevated-1"],
.em-dashboard-screen .em-card[data-variant="elevated-2"],
.em-dashboard-screen .em-data-surface,
.em-dashboard-screen .em-data-table {
  box-shadow: 6px 6px 16px var(--neu-dark);   /* bottom-right only — no top-left grey catch */
}
.em-dashboard-screen .em-kpi-grid > .em-card,
.em-dashboard-screen .em-resale-kpi-grid > .em-card,
.em-dashboard-screen .em-agent-kpi-row > .em-card {
  box-shadow: 6px 6px 16px var(--neu-dark);
}

/* SINGLE-SURFACE-PER-CARD: neutralize the INNER chart panels so only the OUTER .em-card
   is a raised surface. The kit nests .em-card > .em-chart > .em-chart-card, and BOTH
   .em-chart and .em-chart-card paint their own surface → nested panels (broken look,
   obvious over the marble). Strip their surface everywhere inside the dashboard content
   (KPI grids AND the Charts grid). */
.em-dashboard-content .em-card .em-chart,
.em-dashboard-content .em-card .em-chart-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

/* RESTORE the KPI HIGHLIGHT STREAK. The kit accent (.em-kpi__accent) is a 4px flex child
   that relies on the .em-kpi row's stretch height. Neutralizing the inner chart-card
   surfaces above collapsed the row's intrinsic height, so the streak rendered 0-tall and
   vanished. Pin the streak to a real height and keep its series color + pill cap. */
.em-dashboard-content .em-kpi {
  align-items: stretch;
}
.em-dashboard-content .em-kpi__accent {
  width: 4px;
  min-height: 40px;                 /* guaranteed visible streak height */
  align-self: stretch;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* =====================================================================
   APP SHELL — USER SPEC (SCREEN-MANIFEST "Screen Composition Contract"):
   · Sidebar = ROUNDED, floated/inset rail with a circular COLLAPSE FAB on its
     right border (mid-height); collapses 240↔72 via kit data-collapsed.
   · Top-bar AREA is TRANSPARENT; the actions sit in a SHORT ROUNDED PILL
     right-aligned at the top. The rest of the bar is empty/transparent.
   · "+ Add" is NOT in the top-bar — it lives in the workspace header (page title row).
   (This intentionally does NOT match the kit top-bar demo's flush band — the user
   spec governs the screen shell; the kit components stay unedited.)
   ===================================================================== */
.em-app-frame {
  display: grid;
  grid-template-columns: auto 1fr;   /* rail sizes itself (240/72px), main fills */
  min-height: 100vh;
}

/* The edge-glow layer is not part of the shell — neutralize it so it never steals a
   grid cell. (Kept as a no-op element for markup stability.) */
.em-app-frame > .em-edge-glow { display: none; }

/* Side-nav rail — ROUNDED floated column, inset from the viewport edges so all four
   corners read. Sticky full-height. The kit paints the surface; we round + inset it
   and anchor the collapse FAB to its right edge. */
.em-app-frame > .em-side-nav {
  position: sticky;
  top: var(--space-sm);
  height: calc(100vh - var(--space-sm) * 2);
  align-self: start;
  margin: var(--space-sm);
  border-radius: var(--radius-card);
  /* overflow VISIBLE so the collapse FAB can sit on the right border, half outside */
  overflow: visible;
}

/* Sidebar nav icons — STANDARDIZE size + weight. The kit icon slot is 24px but the
   svgs have no explicit size, so they fill 24px with stroke-width 2 → too large/bold,
   not matching the design language. Cap the glyph to 18px and lighten the stroke to 1.5
   so they read as refined line icons consistent with the rest of the UI. Global to the
   rail (nav items, header logo, collapse chevron untouched — it has its own size). */
.em-side-nav .em-side-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
.em-side-nav .em-side-nav-logo svg { width: 20px; height: 20px; stroke-width: 1.5; }

/* Logo section — give it real breathing room and a hairline DIVIDER below it so the
   identity header reads as its own zone, not running straight into the nav tree. */
.em-side-nav .em-side-nav-header {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* LOGO SIZE FIX — the kit lockup is 28px tall, which renders the wordmark text too
   small to read. Bump the expanded-rail lockup so the wordmark is legible. */
.em-side-nav:not([data-collapsed="true"]) .em-side-nav-logo-img {
  height: 44px;            /* up from kit 28px — wordmark now legible */
  width: auto;
  max-width: 100%;
}

/* LOGO LEGIBILITY FIX — the light/Carrara logo is white marble + light-grey wordmark,
   which nearly vanishes on the ivory (#f7f5f1) rail in day mode. Sit the lockup on a
   subtle recessed plate (neutral, never gold) so the white marble + grey text read.
   Dark mode keeps the dark logo on the dark rail (already high-contrast) — plate is a
   no-op visual there but harmless; scoped to light for the contrast lift. */
[data-theme="light"] .em-side-nav .em-side-nav-header {
  background: var(--surface-2);            /* faintly darker than the ivory rail */
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-2xs) var(--space-2xs) var(--space-sm);
  box-shadow: inset 0 0 0 1px var(--line); /* neutral hairline, never gold */
}
/* A little top inset on the nav tree so the first item isn't tight under the divider. */
.em-side-nav .em-scroll-area { padding-top: var(--space-2xs); }

/* (Collapse FAB + its spreadless white ring-glow now live in the KIT side-nav
   component — estate-matrix-kit/shell/side-nav/component.css, class .em-side-nav-collapse.
   The screen only rounds/insets the rail above.) */

/* ---- Main column: top-bar pill + content ---- */
.em-app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;                       /* allow children to shrink, prevents overflow */
}

/* Top-bar AREA — TRANSPARENT, NOT a band. The actions live in a short rounded pill
   pushed to the right. The kit .em-top-bar would otherwise paint a full-width band +
   bottom hairline — neutralize that here and float the actions cluster as a pill. */
.em-app-main > .em-top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;            /* transparent bar area (user spec) */
  border-bottom: 0;                   /* no viewport-spanning hairline */
  height: auto;
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: flex-end;          /* push the pill to the RIGHT */
}
/* Hide the (mobile) hamburger menu zone on desktop — the rail owns nav; the pill is
   actions-only. */
.em-app-main > .em-top-bar > .em-top-bar-menu { display: none; }

/* The actions cluster IS the rounded pill: short, content-width, rounded, raised.
   Vertical padding is generous enough that a child icon-button's overhanging counter
   badge stays INSIDE the pill (never clipped by the pill's rounded edge). */
.em-app-main > .em-top-bar > .em-top-bar-actions {
  background: var(--surface-2);
  box-shadow: var(--neu-raised-sm);
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-md);   /* taller so badges clear the pill edge */
  gap: var(--space-sm);
  overflow: visible;                          /* never clip overhanging badges */
}

/* Breadcrumb band flows with content (not sticky) as the top of the workspace. */
.em-app-main > .em-breadcrumb-band { position: static; }
.em-breadcrumb-band {
  padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)) 0;
}

/* WORKSPACE HEADER — page title row with the "+ Add" primary on the RIGHT.
   QuickAdd moves OUT of the top-bar to here (user spec). */
.em-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}
.em-workspace-head .em-quick-add { flex: 0 0 auto; }

/* ============================================================
   TYPOGRAPHY HIERARCHY (user spec §7) — give the page header real hierarchy.
   The kit breadcrumb-header titles the page with --role-ui-heading (Satoshi 17),
   which is too small for a PAGE TITLE. Promote it to --role-page-title (Satoshi 28)
   and tune the eyebrow crumb + subtitle so the three levels read clearly:
     · crumb/eyebrow  → small, muted, uppercase-tracked (context label)
     · TITLE "Overview" → large Satoshi page title (the focal line)
     · subtitle        → meta, muted (supporting context)
   ============================================================ */
.em-breadcrumb-band .em-breadcrumb-header__title {
  /* Page title is the DOMINANT line — larger than section titles (.tx-h3 = 28).
     Satoshi, 32px, tight tracking. */
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tx);
  margin: 0;
  letter-spacing: -0.015em;
}
.em-breadcrumb-band .em-breadcrumb-header__crumb {
  font: var(--role-label);               /* 11/500 */
  text-transform: uppercase;
  letter-spacing: 0.08em;                /* tracked eyebrow */
  color: var(--tx-2);
}
.em-breadcrumb-band .em-breadcrumb-header__subtitle {
  font: var(--role-meta);
  color: var(--tx-2);
  margin-top: var(--space-2xs);
}
/* A touch more space between the title line and the subtitle for breathing room. */
.em-breadcrumb-band .em-breadcrumb-header__heading { display: flex; flex-direction: column; gap: var(--space-2xs); }

/* ---- Dashboard content region ---- */
/* Content area is transparent so the recessed workspace field (body bg) shows in the
   gutters/gaps between the elevated cards. Cards float as opaque surfaces above it. */
.em-dashboard-content {
  background: transparent;
  padding: var(--space-lg) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Section eyebrow + heading row (uses kit type tokens only).
   FINDING M — TEXT SCRIM: these headings sit over the transparent content area
   (marble field below), so they get a subtle text-shadow for legibility in BOTH themes.
   Dark: pale shadow behind dark-marble veins. Light: warm mid-tone shadow on Carrara.
   This is intentional scrim-as-shadow — not a background chip — keeping it minimal. */
.em-dashboard-section-head { display: flex; flex-direction: column; gap: 4px; }

/* Section headings — a clear STEP BELOW the 32px page title so the hierarchy reads
   (page title → section title → card title). Section titles 22px Satoshi; the eyebrow
   label is small/tracked/muted. Labels --tx-2, titles --tx. */
.em-dashboard-section-head .tx-label {
  font: var(--role-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tx-2);
}
.em-dashboard-section-head .tx-h3 {
  font-family: var(--font-display);
  font-size: 22px;                  /* below the 32px page title */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tx);
}

/* ---- KPI grid — F5: flex wrap-and-GROW (no dead trailing cell) ----
   Problem (RC-5): `grid auto-fit minmax(220px,1fr)` with 7 tiles lands 5 columns at
   ~1680px → row1=5, row2=2, leaving a large EMPTY trailing grid cell on the right
   (unbalanced). `auto-fit` collapses empty tracks but the LEFTOVER tracks in the last
   row stay empty because grid keeps a fixed column count per row.
   Fix: flex wrap where every tile is `flex:1 1 220px` — the tiles in an incomplete
   last row GROW to fill the full row width, so there is never a dead cell, for ANY
   tile count (7, 6, 4…). Same 220px floor keeps titles/₹ numbers from clipping. */
.em-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: stretch;             /* all tiles in a row share the tallest height */
}

/* KPI tiles are the kit KPI component .em-card[data-variant="elevated-2"]. Each grows to
   share row width (flex:1 1 220px) AND stretches to full row height so tiles with a delta
   line and tiles without one are the same size (no content-driven size variance). */
.em-kpi-grid > .em-card {
  flex: 1 1 220px;                  /* grow to fill the last row — no empty trailing cell */
  min-width: 0;                     /* allow shrink below content width (AP-2 ellipsis) */
  min-height: 156px;                /* uniform tile height across ALL rows (delta or not) */
  cursor: pointer;
  text-align: left;
}

/* ---- DOUBLE-PANEL FIX (single neumorphic surface per tile) ----
   The kit KPI tile nests .em-card[elevated-2] (raised) > .em-chart > .em-chart-card > .em-kpi.
   But .em-chart (primitives/chart) ALSO paints a raised neumorphic surface (background +
   shadow + radius + 24px padding) — so the tile reads as a card-inside-a-card. On these
   screens the OUTER .em-card is the one raised surface; neutralize the inner .em-chart's
   surface so the KPI content sits directly inside the single card. Depth is preserved by
   the .em-card[elevated-2] shadow; the inner .em-chart becomes a transparent passthrough.
   Scoped to the KPI/chart grids so standalone .em-chart usage elsewhere is unaffected. */
.em-dashboard-content .em-card > .em-chart {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: var(--space-lg);         /* keep the content inset, drop the surface */
  height: 100%;
}
/* The outer .em-card / .em-chart / nested .em-chart-card must fill height so vertical
   centering of the number reads consistently across equal-height tiles.
   NOTE: .em-kpi is DELIBERATELY excluded here — it is the kit's accent|text ROW
   (vertical streak on the LEFT, text column on the RIGHT). Forcing it to
   flex-direction:column stacked the accent ON TOP of the text (bug, 2026-06-09). */
.em-kpi-grid .em-card,
.em-kpi-grid .em-chart,
.em-kpi-grid .em-chart > .em-chart-card,
.em-resale-kpi-grid .em-card,
.em-resale-kpi-grid .em-chart,
.em-resale-kpi-grid .em-chart > .em-chart-card,
.em-agent-kpi-row .em-card,
.em-agent-kpi-row .em-chart,
.em-agent-kpi-row .em-chart > .em-chart-card { display: flex; flex-direction: column; }
/* .em-kpi keeps the kit ROW (accent | text). Fill height + centre the text block
   vertically so the streak runs the full tile height beside the number. */
.em-kpi-grid .em-kpi,
.em-resale-kpi-grid .em-kpi,
.em-agent-kpi-row .em-kpi { flex: 1; flex-direction: row; align-items: stretch; }
/* the text wrapper (inner .em-chart-card) is the COLUMN, vertically centred */
.em-kpi-grid .em-kpi > .em-chart-card,
.em-resale-kpi-grid .em-kpi > .em-chart-card,
.em-agent-kpi-row .em-kpi > .em-chart-card { flex: 1; justify-content: center; }

/* Collapse the rail on narrow viewports: hand off to mobile drawer pattern.
   For the static benchmark we simply hide the rail < 900px and let main fill. */
@media (max-width: 900px) {
  .em-app-frame { grid-template-columns: 1fr; }
  .em-app-frame > .em-side-nav { display: none; }
}

/* 2×2 chart grid — matches spec: 4 ChartCards in a responsive 2-col layout */
/* Charts: 2×2 grid of LARGE cards (rubric — charts win space, never squeezed).
   Each chart gets ~half the content width so the funnel/bars are readable at a
   glance; collapses to 1-up on narrow viewports. */
.em-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}
@media (max-width: 1100px) { .em-chart-grid { grid-template-columns: 1fr; } }

/* Chart card internals: legend SITS TO THE LEFT of the plot (rubric — move the
   legend, give the chart the space), with the title spanning the top. The plot
   (.em-chart-body) takes the priority width; the legend is a fixed-width rail. */
.em-chart-grid .em-chart-card {
  display: grid;
  grid-template-columns: 132px 1fr;       /* legend rail | plot */
  grid-template-areas:
    "header header"
    "legend body";
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  align-items: stretch;
}
.em-chart-grid .em-chart-card > .em-chart-header { grid-area: header; }
.em-chart-grid .em-chart-card > .em-chart-legend { grid-area: legend; }
.em-chart-grid .em-chart-card > .em-chart-body   { grid-area: body; min-width: 0; }

/* Legend rail — stacked, vertically centred beside the plot, comfortable spacing */
.em-chart-grid .em-chart-legend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  align-self: stretch;
}

/* Give the plot real height so the larger charts read clearly */
.em-chart-grid .em-chart-body { display: flex; align-items: flex-end; }
.em-chart-grid .em-chart-body .em-sankey-funnel,
.em-chart-grid .em-chart-body > svg,
.em-chart-grid .em-chart-body .em-chart-svg { width: 100%; }
.em-chart-grid .em-sankey-funnel__svg,
.em-chart-grid .em-chart-body svg { width: 100%; height: auto; min-height: 260px; }

/* ALIGN THE BAR/AREA CHARTS (fix: "Leads by Source sits too high").
   Cards don't stretch to the row's tallest member (the tall funnel was forcing its
   row-mate tall, leaving the fixed-180px bars floating at the top with dead space
   below). Cards size to their own content, and every bars plot uses ONE consistent
   taller height so all four charts share a baseline and read as aligned. */
.em-chart-grid { align-items: start; }
.em-chart-grid .em-chart-bars { height: 220px; }

/* FUNNEL card is SELF-LABELLING (each stage prints its own name + value), so the
   side legend is redundant AND steals width from a chart that needs the full span
   to read. Give the funnel the whole card width and hide its now-redundant legend
   (rubric — the plot wins; move/remove the legend, never shrink the plot). */
.em-chart-grid .em-chart-card[data-variant="funnel"] {
  grid-template-columns: 1fr;
  grid-template-areas: "header" "body";
}
.em-chart-grid .em-chart-card[data-variant="funnel"] > .em-chart-legend { display: none; }
.em-chart-grid .em-chart-card[data-variant="funnel"] .em-sankey-funnel__svg { min-height: 300px; }

/* On the 1-up (narrow) fallback, stack legend under the plot again */
@media (max-width: 1100px) {
  .em-chart-grid .em-chart-card {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "body" "legend";
  }
  .em-chart-grid .em-chart-legend { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
}

/* ---- Filter-bar control text size ----
   The kit's .em-input-shape sets font:var(--role-body) (Inter 16/1.6). In the compact
   36px filter row that body-copy size + 1.6 line-height reads oversized. The kit's own
   token --text-ui (15px) is documented as "form text"; apply it with a tight line-height
   to the filter controls only (scoped to the filter bar — other inputs unaffected). */
.em-dashboard-filterbar .em-select-value,
.em-dashboard-filterbar .em-date-range-trigger,
.em-dashboard-filterbar .em-input-shape {
  font-size: var(--text-ui);        /* 15px UI/form text */
  line-height: 1.2;
}

/* ============================================================
   GLOBAL COUNTER-BADGE FIX (user spec §5) — for NUMBERED COUNTER badges that sit on a
   shell trigger's corner (bell unread count, QuickAdd overdue count, nav trailing count).
   The kit renders these as an .em-badge[data-variant] = a --surface-2 circular PANEL with
   a ring. On a bell that is ALSO a --surface-2 circular icon-button, that reads as a
   panel-on-a-panel (two same-tone circles). User wants a BARE NUMBER, no panel: strip the
   badge's background/ring/padding/sizing so only the numeral floats on the host corner.
   Scoped to the counter WRAPPERS only — inline badges (status chips, time chips) untouched. */
.em-notification-bell-badge .em-badge,
.em-quick-add-badge .em-badge {
  background: none;
  box-shadow: none;                 /* no ring, no panel */
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: auto;
  line-height: 1;
  color: var(--tx);                 /* legible numeral */
  font-family: var(--font-sans);
  font-size: 10px;                  /* small count numeral that fits the rim band */
  font-weight: 600;
}

/* SIDEBAR NAV COUNT PLACEMENT (fix: "badges sit way off near the right border").
   The kit gives .em-side-nav-label flex:1, which expands the label and shoves the
   trailing count hard against the rail's rounded right edge — reading as detached
   from the label it belongs to. Group the count with the label instead: stop the
   label from eating all the space, and let the count sit right after it with a
   small, consistent gap. The count is a muted secondary detail, not a far-right
   rail decoration. */
.em-side-nav-item > .em-side-nav-label { flex: 0 1 auto; }
.em-side-nav-item > .em-side-nav-trailing {
  margin-left: var(--space-xs);     /* small gap from the label, not pinned to the edge */
}

/* SIDEBAR NAV COUNT = HIGHLIGHTED FILLED CHIP (user request 2026-06-09).
   The nav counts read as proper badges: the kit's theme-aware variant FILL
   (destructive = rose tint, secondary = surface) carries the colour, a neutral
   hairline RING gives the circular highlight (per LOCKED rule: borders are neutral
   --line, never gold/accent — colour lives in the fill, not the edge), and the
   numeral stays legible in BOTH modes via the kit's flipping ink tokens. Shaped as
   a min-22px circle that grows to a pill for 2+ digits. NOTE: this deliberately
   re-dresses the nav count (the global strip rule above no longer touches it); the
   bell/quick-add counters stay bare numerals on their host circle. */
.em-side-nav-trailing .em-badge {
  min-width: 22px;
  min-height: 22px;
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-pill);          /* circle for 1 digit, pill for more */
  box-shadow: inset 0 0 0 1px var(--line);     /* neutral hairline highlight ring */
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
/* Fills + theme-legible ink (kit status tokens flip automatically dark↔light) */
.em-side-nav-trailing .em-badge[data-variant="destructive"] {
  background: var(--status-rose-tint);
  color: var(--status-rose-ink);
}
.em-side-nav-trailing .em-badge[data-variant="secondary"] {
  background: var(--surface-2);
  color: var(--tx);
}
/* On the ACTIVE (emerald) nav row, keep the ring readable against the pill bg */
.em-side-nav-item[data-state="active"] .em-side-nav-trailing .em-badge {
  box-shadow: inset 0 0 0 1px var(--on-emerald);
}

/* Place the bare numeral in the bell circle's UPPER-RIGHT quadrant — in the band between
   the centered ~20px glyph and the 44px circle rim, clear of BOTH (user spec: inside the
   circle, near the top-right, not touching the bell and not overhanging the border).
   Fixed insets land it in that band; the badge box is ~10px so it sits cleanly.
   Same rule for every counter wrapper → consistent everywhere. */
.em-notification-bell-badge,
.em-quick-add-badge {
  z-index: 2;
  top: 7px;                         /* down from the rim, into the upper band */
  right: 8px;                       /* in from the rim, clear of the glyph */
  left: auto;
  bottom: auto;
  pointer-events: none;
}