/* ==========================================================================
   Activ Paisa — Admin portal styles
   Layered on top of the site's design tokens in css/styles.css.
   ========================================================================== */

/* ---------- console scale ----------
   The portal had grown nine font sizes inside a 0.2rem band (.86, .84, .82,
   .8, .78, .76, .74, .72, .62) and weights up to 800 — so nothing had a
   settled rank and everything shouted a little. Four sizes and three weights
   cover the whole console.

   The weight ceiling is 600. styles.css already says why, one floor up:
   "600, never 800 — weight is the loudest thing on a page." That rule was
   being kept on the public site and broken all through here. */
body.admin {
  --at-micro: .6875rem;   /* 11px — uppercase eyebrows, badges          */
  --at-small: .78125rem;  /* 12.5px — table cells, captions, meta       */
  --at-base:  .875rem;    /* 14px — body copy, controls, nav            */
  --at-lead:  1rem;       /* 16px — card titles, section heads          */
  --at-title: 1.3125rem;  /* 21px — page title                          */
  --at-value: 1.75rem;    /* 28px — KPI figures                         */

  --aw-regular: 400;
  --aw-medium:  500;
  --aw-semi:    600;

  /* Optical tracking. Small text needs a touch of positive tracking to stay
     open; large text needs negative or it looks loose. */
  --atrack-micro: .055em;
  --atrack-title: -.018em;
  --atrack-value: -.028em;

  /* Elevation, and what earns it.

     Every panel here carried a drop shadow, so nothing was actually raised —
     a shadow under a thing that cannot move is decoration, and a screen of
     softly floating rectangles is the exact texture of a template. Height is
     information: a resting panel is defined by its seam and nothing else, a
     shadow appears when a surface genuinely sits above the page, and it only
     grows for the things that truly float over it — menus, modals, popovers,
     a card under the cursor. */
  --ael-0: 0 0 0 1px rgba(22, 35, 59, .07);
  /* A 1px contact shadow and no more. Seam alone cut the panel into the page
     like a hole; this much sets it on top of it, and is invisible until you
     take it away. */
  --ael-1: 0 0 0 1px rgba(22, 35, 59, .08), 0 1px 2px rgba(22, 35, 59, .05);
  --ael-2: 0 0 0 1px rgba(22, 35, 59, .09), 0 4px 10px rgba(22, 35, 59, .05),
           0 12px 28px rgba(22, 35, 59, .05);
  --ael-3: 0 0 0 1px rgba(22, 35, 59, .10), 0 10px 24px rgba(22, 35, 59, .09),
           0 32px 64px rgba(22, 35, 59, .12);
  /* The public site's --sh-xl is a 70px blur tuned for a landing page. On a
     dropdown 40px from the button that opened it, it reads as fog. */
  --sh-xl: var(--ael-3);

  /* 16px on a card at this density is a bubble. macOS panels sit near 12,
     and every control in the console is already 8-9. */
  --r-md: 12px;
  --r-lg: 16px;

  /* One curve, one duration. Ease-out only: UI should decelerate into place,
     never ease in — easing in reads as lag. */
  --aease: cubic-bezier(.32, .72, 0, 1);
  --adur: .18s;

  /* ---------- console palette ----------
     A deep violet chrome wrapped around a cold grey canvas is the default
     look of a generated dashboard, and it is the first thing anyone here
     notices. This desk is read for eight hours at a stretch: the chrome goes
     light and quiet, colour is spent only on state and on the row you are
     standing in, and the neutrals carry a trace of the brand's navy so the
     greys agree with the blue instead of sitting next to it. */
  --bg: #F1F4F9;
  --surface: #FFFFFF;
  --surface-alt: #F3F6FA;
  --ink: #16233B;
  --ink-2: #4C5D77;
  /* 5.0:1 on white, 4.6:1 on --surface-alt, 4.5:1 on the page ground. The
     muted ink carries captions, table meta and the nav's section labels at
     11-12.5px, so it has to clear AA on every ground it actually sits on,
     not just on white. */
  --ink-3: #5F7089;
  --line: rgba(22, 35, 59, .10);
  --line-strong: rgba(22, 35, 59, .18);
  --tint: #EAF2FB;

  /* The sidebar as tokens, not literals: dark mode then swaps nine values
     rather than re-stating fourteen rules. */
  --side-bg: #FFFFFF;
  --side-line: var(--line);
  --side-ink: var(--ink);
  --side-ink-2: var(--ink-2);
  --side-ink-3: var(--ink-3);
  --side-hover-bg: var(--surface-alt);
  --side-active-bg: var(--tint);
  --side-active-ink: var(--primary-600);
  /* On a light panel the mark can just be itself — violet and blue — instead
     of being flattened to a white silhouette. */
  --side-logo-filter: none;

  /* Native widgets — the date picker and its calendar glyph, scrollbars,
     select popups — take their colours from this, not from our tokens. The
     console picks its own theme, so it has to say which one it is rather
     than leaving them on the OS setting. */
  color-scheme: light;

  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}
html[data-admin-theme="dark"] body.admin,
html[data-admin-theme="dark"] {
  --ael-0: 0 0 0 1px rgba(255, 255, 255, .06);
  --ael-1: 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .28);
  --ael-2: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .32),
           0 12px 28px rgba(0, 0, 0, .3);
  --ael-3: 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 24px rgba(0, 0, 0, .45),
           0 32px 64px rgba(0, 0, 0, .45);
}

/* One focus ring for the whole console. Keyboard only — :focus-visible keeps
   it off mouse clicks, which is why the old outline-less buttons felt fine to
   click and were invisible to tab through. */
body.admin :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* The press and hover states above are motion. Anyone who has asked their OS
   for less of it gets the states without the movement — the feedback stays,
   the animation goes. */
@media (prefers-reduced-motion: reduce) {
  body.admin, body.admin * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body.admin .btn:active,
  body.admin .a-icon-btn:active,
  body.admin a.a-card:active, body.admin button.a-card:active,
  body.admin a.a-kpi:active, body.admin button.a-kpi:active { transform: none; }
}

/* ---------- console control sizing ----------
   The public site's .btn is a 50px, fully-rounded pill and its fields are 52px
   with a 16px radius — right for a landing page, wrong for a dense back-office
   console where controls sit in toolbars and table rows. Scope a compact form
   to the portal rather than editing the shared components. */
body.admin .btn {
  min-height: 36px;
  padding: 0 var(--sp-4);
  border-radius: 9px;
  font-size: var(--at-base);
  font-weight: var(--aw-medium);
  letter-spacing: -.005em;
  transition: background var(--adur) var(--aease), border-color var(--adur) var(--aease),
              color var(--adur) var(--aease), transform var(--adur) var(--aease);
}
/* Press, don't fade. `opacity: .82` on :active greys the label as well as the
   fill; a small scale reads as the button taking the push. */
body.admin .btn:active { opacity: 1; transform: scale(.97); }
body.admin .btn-sm { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--at-small); }
body.admin .btn-block { width: 100%; }
body.admin input:not([type]), body.admin input[type="text"], body.admin input[type="tel"],
body.admin input[type="email"], body.admin input[type="date"],
body.admin input[type="number"], body.admin input[type="password"],
body.admin input[type="search"], body.admin select, body.admin textarea {
  height: 36px;
  border-radius: 9px;
  font-size: var(--at-base);
  transition: border-color var(--adur) var(--aease), box-shadow var(--adur) var(--aease);
}
body.admin textarea { height: auto; min-height: 80px; }
body.admin select { padding-right: 36px; background-position: right 12px center; }
body.admin .field > label { font-size: var(--at-small); font-weight: var(--aw-medium); margin-bottom: 6px; }
/* the login card keeps roomier fields — it is a landing surface, not a toolbar */
body.admin-login .btn { min-height: 46px; }
body.admin-login input[type="email"], body.admin-login input[type="password"] { height: 48px; }

/* ---------- layout ---------- */
.a-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

/* ====================================================
   Sidebar — one deep surface, no ornament
   ====================================================
   This was a three-stop violet→blue gradient with two decorative blurred
   circles painted over it and a 20px drop shadow down its edge. Three
   separate devices, none of them carrying information, and together they are
   the single most template-looking thing in the console.

   What replaces them: one settled tone drawn from the brand's own
   --secondary, a hairline seam instead of a shadow, and colour spent only on
   the item you are actually on. The navigation is a list of places, so it
   should read as a list, and the eye should land on the highlighted row
   rather than on the background behind it. */
.a-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  /* Pinned to the viewport while the page scrolls under it. The window is
     the scroller (see the scroll save/restore in app.js, which reads
     window.scrollY), and `.a-shell` is a grid whose row grows to the height
     of the content — so a sidebar sized `min-height: 100vh` grew with that
     row and slid up out of view along with it. On a long page like the
     dashboard the whole navigation scrolled off the screen.
     `height` rather than `min-height`: sticky needs a box that stops at the
     viewport, and `.a-nav` already carries `overflow-y: auto`, so a nav list
     taller than the screen scrolls inside the pinned sidebar with the brand
     header and Sign out staying put. */
  position: sticky;
  top: 0;
  height: 100vh;
  /* Mobile browsers count the retracted address bar in `vh`, which would
     hide Sign out under it; `dvh` is the live viewport and wins where it is
     supported. */
  height: 100dvh;
  background: var(--side-bg);
  /* A seam, not a shadow. A cast shadow implies the panel floats above the
     page; it is flush with it. */
  border-right: 1px solid var(--side-line);
  overflow: hidden;
  /* `position: relative` used to sit here, after the sticky above, and won
     on source order — which is how a sticky sidebar silently stayed
     unstuck. Sticky is itself a positioned value, so it remains the
     containing block for any absolutely positioned descendant that relied
     on the old `relative`. */
}

/* Brand header */
.a-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--side-line);
  position: relative;
}
.a-side-brand img.a-brand-logo {
  height: 32px;
  width: auto;
  filter: var(--side-logo-filter);
}
.a-side-brand-wordmark {
  font-size: .95rem;
  font-weight: var(--aw-semi);
  color: var(--side-ink);
  letter-spacing: -.01em;
}

.a-detail-head { display: grid; gap: 10px; padding-bottom: 4px; }
.a-detail-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.a-detail-meta { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.a-detail-meta span { white-space: nowrap; }
.a-detail-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.a-detail-layout > .a-card { min-width: 0; }
.a-detail-span-12 { grid-column: span 12; }
.a-detail-span-8 { grid-column: span 8; }
.a-detail-span-6 { grid-column: span 6; }
.a-detail-span-4 { grid-column: span 4; }
.a-overview-grid {
  display: grid;
  /* auto-fit rather than a hard 3: five pills left a dead cell in row two */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.a-overview-pill {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-alt);
}
.a-overview-pill-label { color: var(--ink-3); font-size: .72rem; font-weight: var(--aw-semi); text-transform: uppercase; letter-spacing: .05em; }
.a-overview-pill strong { font-size: .94rem; line-height: 1.3; }
.a-person-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.a-person-meta { display: grid; min-width: 0; gap: 2px; }
.a-person-meta strong { font-size: 1rem; }
.a-person-meta span { color: var(--ink-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-detail-actions--header { margin-left: auto; justify-content: flex-end; }
.a-detail-status-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.a-detail-select {
  min-width: 184px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: .82rem;
}
.a-docs { display: grid; gap: 10px; }
.a-doc { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.a-doc-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-alt); color: var(--primary); flex-shrink: 0; }
.a-doc-mid { display: grid; min-width: 0; flex: 1; gap: 4px; }
.a-doc-mid span { color: var(--ink-3); font-size: .74rem; line-height: 1.35; }

/* User section */
.a-side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin: 10px 10px 4px;
  border-radius: var(--r-sm);
  background: var(--side-hover-bg);
  position: relative;
}
.a-side-user-info { min-width: 0; flex: 1; }
.a-side-user-name { color: var(--side-ink); font-size: var(--at-base); font-weight: var(--aw-medium); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.a-side-user .a-role { margin-top: 2px; display: inline-block; }

/* Nav */
.a-nav { flex: 1; padding: 10px 12px; overflow-y: auto; }
.a-nav::-webkit-scrollbar { width: 4px; }
.a-nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
/* Section eyebrow. Was 800 weight at .14em tracking — at 10px that is not a
   label, it is a row of separated letters. Dropped to medium with tracking
   the eye can still read as a word. */
.a-nav-label {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .15em;
  color: var(--side-ink-3); font-weight: var(--aw-semi); padding: 28px 14px 10px;
}
/* Four, not one: the rail reads as a list of destinations rather than a
   block of text, and it is what makes room for a 14px-radius selected pill
   without it touching its neighbours. */
.a-nav ul { display: grid; gap: 4px; }
/* A nav group with no heading. `.a-nav-label` above carries the 18px that
   separates one group from the next, so a group that renders no label has to
   carry it here or its first item sits 1px under the previous group. */
.a-nav-ungrouped { margin-top: 28px; }
.a-nav-ungrouped:first-child { margin-top: 0; }
.a-nav-item { position: relative; }
.a-nav-link {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 14px;
  color: var(--side-ink-2); font-size: 1.0625rem; font-weight: var(--aw-medium); width: 100%;
  transition: background var(--adur) var(--aease), color var(--adur) var(--aease);
  position: relative;
}
/* A fixed slot rather than the glyph's own width, so every label starts on
   the same vertical line whatever shape sits beside it — a funnel is
   narrower than a bank, and left to themselves the labels stepped in and
   out by a couple of pixels down the rail. */
.a-nav-link svg {
  color: var(--side-ink-2); flex-shrink: 0; width: 24px; height: 24px;
  transition: color var(--adur) var(--aease);
}
.a-nav-link:hover { background: var(--side-hover-bg); color: var(--side-ink); text-decoration: none; }
.a-nav-link:hover svg { color: var(--side-ink); }
/* The selected row is a tinted pill with a rule on the rail's own edge.
   This reverses an earlier decision here — "a filled shape, not a tinted row
   with a stripe bolted to its left edge" — at the founder's direction, from
   a reference design. The stripe is flush with the sidebar edge rather than
   with the pill, which is what stops it reading as a bolted-on afterthought:
   it belongs to the rail, and the pill belongs to the row. */
.a-nav-item.is-active .a-nav-link {
  background: var(--side-active-bg);
  color: var(--side-active-ink);
  font-weight: var(--aw-semi);
}
.a-nav-item.is-active .a-nav-link svg { color: var(--side-active-ink); }
.a-nav-item.is-active::before {
  content: '';
  position: absolute;
  /* Out to the rail's edge, cancelling `.a-nav`'s 12px of padding. */
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--side-active-ink);
}
.a-nav-item.is-hidden { display: none; }
/* Red, not brand blue: on a rail whose selected state is blue, a blue count
   reads as another piece of navigation rather than as something unread. */
.a-side-dot {
  margin-left: auto; color: #fff; font-size: .75rem; font-weight: var(--aw-semi);
  background: var(--danger); border-radius: 99px; padding: 2px 8px; min-width: 22px;
  text-align: center; line-height: 1.45;
}

/* Footer */
.a-side-foot {
  padding: 14px 12px 18px;
  border-top: 1px solid var(--side-line);
  margin-top: auto;
}
/* Sign out reads in the same voice as the rest of the rail — same size,
   same weight, same icon slot. It is separated by the rule above it, not by
   being quieter than everything else. */
.a-side-foot .a-nav-link { color: var(--side-ink-2); font-size: 1.0625rem; }
.a-side-foot .a-nav-link:hover { color: var(--side-ink); background: var(--side-hover-bg); }

/* ---------- main column ---------- */
.a-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.a-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  /* Opaque, not translucent-blurred: the page behind is a flat colour, so the
     backdrop-filter bought nothing and cost text crispness — promoting the bar
     to its own composited layer drops subpixel antialiasing on the title. */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.a-top-h h1 { font-size: var(--at-title); font-weight: var(--aw-semi); letter-spacing: var(--atrack-title); line-height: 1.2; }
.a-top-h p { color: var(--ink-3); font-size: var(--at-small); margin-top: 2px; }
.a-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.a-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 32px; height: 32px; padding: 6px;
}
.a-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); }

.a-icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  color: var(--ink-2);
  transition: background var(--adur) var(--aease), color var(--adur) var(--aease), transform var(--adur) var(--aease);
}
.a-icon-btn:hover { background: var(--surface-alt); color: var(--ink); }
.a-icon-btn:active { transform: scale(.92); }
.a-bell { position: relative; }
.a-bell-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  background: var(--danger); color: #fff;
  font-size: .62rem; font-weight: var(--aw-semi); display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.a-user-btn { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; }
.a-user-btn:hover { background: var(--surface-alt); }
.a-user-btn > svg { color: var(--ink-3); }

/* 32px gutter and a 24px stack. The old 26/22 was close enough to the 8px
   grid to look like the grid and far enough off to never quite settle. */
.a-content { padding: 32px; display: grid; align-content: start; gap: 24px; max-width: 1280px; width: 100%; }
/* Without this, one wide table sets the whole column's minimum width and the
   page scrolls sideways; with it the table scrolls inside its own wrap. */
.a-content > * { min-width: 0; }

.a-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.a-section-head h2 { font-size: var(--at-lead); font-weight: var(--aw-semi); letter-spacing: -.012em; }
.a-section-head .btn { margin-left: auto; }

/* ---------- kpi cards ---------- */
.a-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.a-kpi {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--ael-1);
  transition: box-shadow var(--adur) var(--aease), transform var(--adur) var(--aease);
}
/* Ops builds these tiles as <button> so they can be opened. A button does
   not inherit the page font and centres its text, so without this the
   clickable tiles did not match the ones next to them. */
button.a-kpi { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
/* Only the tiles that actually open something respond. A hover state on a
   static tile is a promise the tile cannot keep — and the old rule applied to
   every .a-kpi, so half the dashboard invited a click that did nothing. */
a.a-kpi:hover, button.a-kpi:hover { box-shadow: var(--ael-2); }
a.a-kpi:active, button.a-kpi:active { transform: scale(.99); }
/* block, not inline: three call sites build these from <span>/<strong>
   and one from <p>. Without this the label and the value share a line
   ("NEEDS ACTION0") for every caller that does not use <p>. */
.a-kpi-label { display: block; color: var(--ink-3); font-size: var(--at-small); font-weight: var(--aw-medium); text-transform: none; letter-spacing: 0; }
.a-kpi-value { display: block; font-size: var(--at-value); font-weight: var(--aw-semi); letter-spacing: var(--atrack-value); margin: 6px 0 6px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-word; }
.a-kpi-sub { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: var(--at-small); }
/* A KPI whose value carries a band — the lead score's Green/Amber/Red. The
   tone names match the chip classes (`a-chip-warn`), so `warn` maps to
   --warning here rather than to a variable of its own. */
.a-kpi-value.is-success { color: var(--success, #059669); }
.a-kpi-value.is-warn { color: var(--warning, #D97706); }
.a-kpi-value.is-danger { color: var(--danger, #DC2626); }
.a-delta { font-weight: var(--aw-semi); }
.a-delta.is-up { color: var(--success); }
.a-delta.is-down { color: var(--danger); }

/* ---------- business funnel (Task 21) ----------
   One row per stage, width proportional to the share of the top of the
   funnel. Uses the existing tokens rather than introducing a palette. */
.a-funnel-row { margin-bottom: 14px; }
.a-funnel-row:last-child { margin-bottom: 0; }
.a-funnel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
  font-size: .84rem; color: var(--ink-2);
}
.a-funnel-head strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.a-funnel-track {
  height: 10px; border-radius: 999px;
  background: var(--surface-alt); overflow: hidden;
}
.a-funnel-fill {
  height: 100%; border-radius: 999px;
  background: var(--primary);
  transition: width .25s ease;
}

/* ---------- pipeline strip ----------
   One row of counts across the funnel; each cell deep-links the list. */
.a-pipe-strip {
  display: grid;
  /* 132px rather than 112: at the old width "Obligation Verification" and
     "Application Created" each wrapped to two lines while their neighbours
     sat on one, so the row of numbers above them no longer lined up. */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--ael-1);
  overflow: hidden;
}
.a-pipe-cell {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 14px 16px;
  color: inherit;
  border-left: 1px solid var(--line);
  transition: background var(--adur) var(--aease);
}
.a-pipe-cell:first-child { border-left: 0; }
.a-pipe-cell:hover { background: var(--surface-alt); text-decoration: none; }
.a-pipe-n { font-size: 1.375rem; font-weight: var(--aw-semi); letter-spacing: var(--atrack-value); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* Nineteen uppercase micro-labels in one strip was a wall of tracked-out
   capitals. Sentence case reads at a glance and is what the status is
   actually called everywhere else in the console. */
.a-pipe-l { color: var(--ink-3); font-size: var(--at-small); font-weight: var(--aw-regular); text-transform: none; letter-spacing: 0; line-height: 1.3; }

/* ---------- dashboard headline ----------
   Two rows of four. The first carries what the business has done and is
   given the weight to match; the second is today's operating numbers and
   deliberately sits quieter, so the eye lands on the money first rather
   than on whichever tile happens to hold the biggest digit. */
.a-kpi-hero .a-kpi { padding: 20px; }
.a-kpi-hero .a-kpi-value { font-size: calc(var(--at-value) * 1.18); }
/* The money is the headline of the headline. One accent, on one tile —
   an accent on all four is no accent at all. */
.a-kpi-hero .a-kpi:first-child { box-shadow: var(--ael-2); }
.a-kpi-hero .a-kpi:first-child .a-kpi-value { color: var(--primary, var(--ink)); }
.a-kpi-sec { margin-top: -4px; }
.a-kpi-sec .a-kpi-value { font-size: calc(var(--at-value) * 0.82); color: var(--ink-2, var(--ink)); }

/* The month-on-month chip. Up is green and down is red because all four
   metrics it sits on (leads, applications, approved, disbursed) are ones
   where more is better — this is not a general-purpose delta. */
.a-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: var(--aw-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.a-delta.is-up { background: color-mix(in srgb, var(--success, #059669) 12%, transparent); color: var(--success, #059669); }
.a-delta.is-down { background: color-mix(in srgb, var(--danger, #DC2626) 12%, transparent); color: var(--danger, #DC2626); }
.a-delta.is-flat { background: var(--surface-alt); color: var(--ink-3); }
.a-delta-arrow { font-size: .8rem; line-height: 1; }
/* The sub-line now holds a chip and a sentence; at tile width they wrap
   rather than pushing the chip off the edge. */
.a-kpi-sub { flex-wrap: wrap; row-gap: 4px; }

/* The stage strip lives in a card now, so an empty stage can be hidden
   behind a control without the row losing its edges. */
.a-pipe-card .a-pipe-strip { box-shadow: none; border: 1px solid var(--line); }
.a-pipe-cell.is-empty .a-pipe-n { color: var(--ink-3); }
.a-pipe-more {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--at-small);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.a-pipe-more:hover { color: var(--ink); }

@media (max-width: 900px) {
  .a-kpi-hero .a-kpi-value { font-size: var(--at-value); }
}

/* ---------- cards & charts ---------- */
/* The border and the box-shadow's own 1px ring were drawing the same line
   twice, one over the other — which is why the card edge read slightly muddy
   rather than crisp. The ring is now the only edge. */
.a-card {
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--ael-1);
}
/* A card is not a button. Lifting one on hover promises a click that most of
   them do not accept — so only the ones that are actually interactive move. */
a.a-card, button.a-card {
  transition: box-shadow var(--adur) var(--aease), transform var(--adur) var(--aease);
}
a.a-card:hover, button.a-card:hover { box-shadow: var(--ael-2); }
a.a-card:active, button.a-card:active { transform: scale(.995); }

.a-card-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 20px 20px 0;
}
.a-card-head > * { min-width: 0; }
.a-card-title { font-size: var(--at-lead); font-weight: var(--aw-semi); letter-spacing: -.012em; }
.a-card-head .ci-link { font-size: var(--at-small); }
.a-card-body { padding: 12px 20px 20px; }
.a-card-body > :last-child { margin-bottom: 0; }
.a-acard-actions { padding: 4px 20px 18px; display: flex; gap: 10px; }

.a-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* start-aligned so a short card keeps its height instead of stretching to its
   neighbour, and the odd last card spans rather than leaving a half-row hole */
.a-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.a-chart-grid > *, .a-lower-grid > * { min-width: 0; }
.a-lower-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.a-canvas-box { min-height: 230px; min-width: 0; overflow: hidden; }
.a-canvas-box canvas { max-width: 100%; display: block; }
/* The funnel sizes itself to its row count rather than a fixed chart height. */
.a-canvas-auto { min-height: 0; }

/* ---------- tables ---------- */
.a-table-wrap { overflow-x: auto; }
.a-table {
  width: 100%; border-collapse: collapse; font-size: var(--at-small);
  /* Figures line up down a column instead of wandering — the one typographic
     detail that separates a finance table from a spreadsheet screenshot. */
  font-variant-numeric: tabular-nums;
}
/* The header was a filled grey band, which walls the data off from its own
   labels. It is now the same surface as the rows, set apart by weight and a
   single hairline — the labels sit above the data rather than in a box on top
   of it. */
.a-table th {
  text-align: left; font-weight: var(--aw-semi); color: var(--ink-3);
  font-size: var(--at-micro); text-transform: uppercase; letter-spacing: var(--atrack-micro);
  padding: 13px 14px; border-bottom: 1px solid var(--line); background: transparent;
  white-space: nowrap;
}
/* label + sort caret on one line — as inline boxes the caret dropped below */
.a-table th > .a-th-label { display: inline-block; vertical-align: middle; }
.a-table td { padding: 15px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table tbody tr.is-clickable { cursor: pointer; }
.a-table tbody tr { transition: background var(--adur) var(--aease); }
.a-table tbody tr:hover { background: var(--surface-alt); }
.a-row-check { width: 16px; height: 16px; accent-color: var(--primary); }

/* ---- Lender mark ----
   The partner's own logo where we ship one, an initials tile in its brand
   colour where we do not. Lives here rather than in leads.css because three
   screens draw it — the lead pipeline's offer cards, Bank policies, and the
   lead detail — and only one of them loads that file. Rendered by
   lenderMark() in js/lender-brands.js. */
.lc-lender-mark {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em;
}
/* A fixed letterbox, not a shrink-to-fit box: an SVG that carries only a
   viewBox (CSB's and YES Bank's do) has no intrinsic size, so in an
   auto-width box it collapsed to nothing, while a near-square PNG (Finzy's
   is 320x208) spilled over the row below. One frame, `object-fit: contain`,
   and every ratio sits centred inside it undistorted. */
/* A fixed 104x38 letterbox — the marks are every shape: wide lockups
   (CSB's is 720x214), near-square ones (Finzy's PNG is 320x208), and SVGs
   carrying only a viewBox and so no intrinsic size at all (CSB, YES Bank).
   One frame holds all of them. */
.lc-lender-mark-img {
  width: 104px; height: 38px;
  background: #fff; border: 1px solid var(--line); padding: 3px 6px;
}
/* The caps are the frame's content box in pixels (104-12-2 by 38-6-2), not
   percentages: inside a centred grid item the containing block height is
   indefinite, so `height: 100%` and `max-height: 100%` were both dropped
   and a 320x208 mark rendered 59px tall in a 38px box, over the row below. */
.lc-lender-mark img {
  max-width: 90px; max-height: 30px; width: auto; height: auto;
  object-fit: contain; display: block;
}

.a-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.a-who-text { display: grid; min-width: 0; }
.a-who-text strong { font-weight: var(--aw-medium); font-size: var(--at-base); white-space: nowrap; letter-spacing: -.008em; }
.a-who-text span { color: var(--ink-3); font-size: var(--at-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-owner { display: flex; }
/* Was a filled blue pill competing with the status chips beside it. A count
   is context, not status — it recedes. */
.a-count-pill {
  font-size: var(--at-small); font-weight: var(--aw-medium); color: var(--ink-2);
  background: transparent; padding: 0; white-space: nowrap;
}
.a-td-empty { color: var(--ink-3); text-align: center; padding: 40px 14px; font-size: var(--at-base); }
.a-table-foot { display: flex; justify-content: center; padding: 14px 0 4px; }

/* ---------- pagination ---------- */
.a-pager { display: flex; gap: 6px; align-items: center; }
.a-page-btn {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-2); font-size: .84rem; font-weight: 600;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.a-page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.a-page-btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.a-page-btn:disabled { opacity: .4; cursor: default; }

/* ---------- filters ---------- */
/* A toolbar, not a card. It used to be a bordered, shadowed panel sitting
   above another bordered, shadowed panel — two competing containers for what
   is really one strip of controls. Now it is just the controls, on the page
   ground, and the table below is the only card in view. */
.a-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0; background: transparent;
  border: 0; border-radius: 0;
  box-shadow: none;
}
/* The search absorbs the slack so the selects and the actions stay on one
   line — fixed at 320px it forced the action buttons onto a second row and
   left a band of empty toolbar above them. */
.a-search { position: relative; flex: 1 1 200px; min-width: 170px; display: flex; align-items: center; }
.a-search svg { position: absolute; left: 11px; color: var(--ink-3); pointer-events: none; }

/* ---------- Leads workspace ---------- */
.lead-overview {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  padding-bottom: 2px;
}
.lead-overview-tab {
  display: grid; gap: 4px; min-width: 156px; padding: 14px 18px;
  text-align: left; color: var(--ink-3); background: transparent;
  border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.lead-overview-tab strong { color: inherit; font-size: 1.05rem; }
.lead-overview-tab span { font-size: .75rem; }
.lead-overview-tab:hover, .lead-overview-tab.is-active { color: var(--primary); }
.lead-overview-tab.is-active { border-bottom-color: var(--primary); }
.lead-overview-meta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lead-workmode { color: var(--ink-3); font-size: .78rem; }
.lead-page-heading { margin-top: 2px; }
.lead-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.lead-toolbar .a-search { flex: 1 1 240px; }
.lead-stage-filters {
  display: flex; align-items: center; gap: 7px; flex: 1 1 100%;
  overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin;
}
.lead-stage-chip, .lead-filter-action {
  flex: 0 0 auto; min-height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font-size: .78rem; cursor: pointer; white-space: nowrap;
}
.lead-stage-chip:hover, .lead-stage-chip.is-active, .lead-filter-action:hover,
.lead-filter-action.is-active { border-color: var(--primary); color: var(--primary); background: var(--tint); }
.lead-filter-action { margin-left: auto; }
.lead-drawer-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end;
  background: rgba(15, 23, 42, .28); animation: lead-drawer-fade .18s ease-out;
}
.lead-drawer {
  width: min(720px, 94vw); height: 100%; overflow-y: auto; background: var(--surface);
  box-shadow: -12px 0 36px rgba(15, 23, 42, .18);
  animation: lead-drawer-in .22s ease-out;
}
.lead-drawer-header {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start;
  gap: 16px; padding: 24px 26px 18px; background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.lead-drawer-identity { min-width: 0; flex: 1; }
.lead-drawer-identity h2 { font-size: 1.25rem; margin-bottom: 5px; overflow-wrap: anywhere; }
.lead-drawer-close {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink-2); font-size: 1.55rem; line-height: 1; cursor: pointer;
}
.lead-drawer-close:hover { color: var(--danger); border-color: var(--danger); }
.lead-drawer-tabs {
  position: sticky; top: 79px; z-index: 2; display: flex; gap: 4px; overflow-x: auto;
  padding: 0 26px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.lead-drawer-tab {
  min-height: 48px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--ink-3); font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.lead-drawer-tab:hover, .lead-drawer-tab.is-active { color: var(--primary); }
.lead-drawer-tab.is-active { border-bottom-color: var(--primary); }
.lead-drawer-pane { padding: 20px 26px 32px; }
.lead-drawer-grid { display: grid; gap: 16px; }
.lead-drawer-grid .a-card { min-width: 0; }
@keyframes lead-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lead-drawer-in { from { transform: translateX(22px); } to { transform: translateX(0); } }

@media (max-width: 700px) {
  .lead-overview-meta { width: 100%; margin-left: 0; justify-content: space-between; }
  .lead-toolbar { align-items: stretch; }
  .lead-filter-action { margin-left: 0; }
  .lead-drawer { width: 100%; }
  .lead-drawer-tabs { top: 79px; padding: 0 16px; }
  .lead-drawer-header { padding: 18px 16px 14px; }
  .lead-drawer-pane { padding: 16px 16px 28px; }
}
.a-search input {
  height: 36px; padding-left: 34px; width: 100%;
  border: 1px solid var(--line); border-radius: 9px;
  font-size: var(--at-base);
}
.a-filters select { height: 36px; flex: 0 0 auto; width: auto; min-width: 0; font-size: var(--at-base); }
/* The site-wide field rule in styles.css is `width: 100%` — right for a form
   column, wrong for a toolbar. The selects were already opted out; a bare
   <input> dropped in as a filter (Tasks uses two) still took a full row each,
   which is what pushed the Tasks board down the page behind two empty bands. */
.a-filters > input { height: 36px; flex: 0 1 168px; width: auto; min-width: 120px; font-size: var(--at-base); }
.a-clear-btn {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2);
}
.a-clear-btn:hover { border-color: var(--primary); color: var(--primary); }
.a-filter-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* a bare icon next to a solid button reads as unfinished — give it an edge */
.a-icon-btn-outline {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.a-icon-btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }

/* ---------- bulk bar ---------- */
.a-bulk {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r-md);
  background: var(--tint); border: 1px solid var(--primary);
  box-shadow: var(--sh-md);
  position: sticky; bottom: 16px;
}
.a-bulk-count { font-weight: var(--aw-semi); color: var(--secondary); font-size: .86rem; }
.a-bulk select { width: 240px; height: 40px; }

/* ---------- feeds / hotlists ---------- */
/* minmax(0,…): the track must not inherit the row's min-content width, or a
   long customer name plus a status chip widens the whole dashboard */
.a-feed { display: grid; grid-template-columns: minmax(0, 1fr); }
.a-feed-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
  color: inherit;
}
.a-feed-row:hover { text-decoration: none; background: var(--surface-alt); border-radius: 8px; }
.a-feed-row:last-child { border-bottom: 0; }
.a-feed-mid { display: grid; min-width: 0; flex: 1; }
.a-feed-mid strong { font-weight: var(--aw-semi); font-size: .9rem; }
.a-feed-mid span { color: var(--ink-3); font-size: .78rem; }

.a-hotlist { display: grid; grid-template-columns: minmax(0, 1fr); }
.a-hotlist li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.a-hotlist li:last-child { border-bottom: 0; }
.a-hot-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.a-hot-row:hover { text-decoration: none; }
.a-hot-info { display: grid; min-width: 0; }
.a-hot-name { font-weight: var(--aw-semi); font-size: .88rem; }
.a-hot-ref { color: var(--ink-3); font-size: .78rem; }
.a-hot-empty { color: var(--ink-3); font-size: .85rem; }
.a-actlist { list-style: none; display: grid; gap: 2px; }
.a-actlist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; }
.a-actlist li > div { min-width: 0; overflow-wrap: anywhere; }
.a-act-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-alt); color: var(--primary); flex-shrink: 0; }
.a-actlist strong { font-size: .85rem; }
.a-act-sub { color: var(--ink-3); font-size: .76rem; display: block; }

/* ---------- credit profile (application detail) ---------- */
.a-credit-score { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a-credit-num { font-size: 1.9rem; font-weight: var(--aw-semi); line-height: 1; }
.a-credit-cap { display: block; color: var(--ink-3); font-size: .74rem; margin-top: 4px; }
.a-credit-odds { margin-top: 14px; }
.a-credit-odds-label { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; margin-bottom: 6px; }
.a-credit-odds-label span { color: var(--ink-3); }
.a-credit-track { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.a-credit-fill { height: 100%; border-radius: inherit; background: var(--success); }
.a-credit-fill.is-mid { background: var(--warning); }
.a-credit-factors { list-style: none; display: grid; margin-top: 12px; }
.a-credit-factors li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.a-credit-factors li:last-child { border-bottom: 0; }
.a-credit-factors li > div { display: grid; min-width: 0; }
.a-credit-factors strong { font-size: .84rem; }
.a-credit-factors li > div span { color: var(--ink-3); font-size: .76rem; overflow-wrap: anywhere; }
.a-credit-note { color: var(--ink-3); font-size: .74rem; margin-top: 10px; }
/* A consent affirmation. A checkbox rather than a toggle switch on purpose:
   a toggle reads as a setting that can be flipped back, and this is a
   statement about something that happened on a call. */
.a-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0; font-size: .82rem; color: var(--ink-2);
  cursor: pointer; line-height: 1.45;
}
.a-check input { margin-top: 2px; flex: none; }

/* The bureau's authentication question. Read aloud to the applicant, so
   it outweighs the prose around it. */
.a-credit-question {
  font-size: .95rem; font-weight: 600; color: var(--ink-1);
  margin: 12px 0; padding: 10px 12px;
  border-left: 3px solid var(--brand); background: var(--surface-2);
  border-radius: 0 6px 6px 0;
}

/* ---------- Credit bureau panel ---------- */
/* The score button and its modal. The key/value result walker these
   classes also dressed went with the FinRep proxy it rendered. */
.a-verify-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.admin .a-verify-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 12px 10px;
  font-size: .75rem;
  line-height: 1.25;
  text-align: center;
  /* A two-word label must be allowed to wrap in a half-width cell;
     .btn's blanket `nowrap` pushed it out of the border instead. */
  white-space: normal;
  border: 1px solid var(--line);
  transition: all .2s ease;
}
.a-verify-btn:hover {
  border-color: var(--primary);
  background: var(--tint);
  color: var(--primary);
}
.a-verify-btn svg { flex-shrink: 0; }

.a-verify-result {
  display: grid;
  gap: 12px;
  padding: 12px 0;
}
.a-verify-result h3 {
  font-size: 1rem;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
}
.a-verify-result .a-success { color: var(--success, #059669); }
.a-verify-result .a-warning { color: var(--warning, #D97706); }
.a-verify-result .a-danger { color: var(--danger, #DC2626); }
.a-verify-result .a-muted { color: var(--ink-3); font-size: .9rem; }

/* Segmented control — the trend granularity switch */
.a-seg {
  display: inline-flex; gap: 2px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.a-seg::-webkit-scrollbar { display: none; }
.a-seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; border-radius: 999px;
  padding: 5px 12px; font-size: .78rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap;
}
.a-seg-btn:hover { color: var(--ink); }
.a-seg-btn.is-on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }

/* ---------- empty state ---------- */
.a-empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 44px 20px;
}
/* Was a 64px blue rounded square holding a rupee glyph. A coloured tile
   around an icon is ornament standing in for content — the glyph alone, in
   the muted ink, says "nothing here yet" without shouting it. */
.a-empty-icon { display: grid; place-items: center; color: var(--ink-3); opacity: .5; }
.a-empty-title { font-weight: var(--aw-semi); font-size: .98rem; }
.a-empty-sub { color: var(--ink-3); font-size: .84rem; max-width: 420px; }
.a-empty .btn { margin-top: 8px; }

/* ---------- chips & roles ---------- */
/* Status chips. Weight 700 on a saturated fill made every one of them shout
   at the same volume, so a row of five said nothing. Medium weight, a calmer
   fill and a hairline of the chip's own colour: legible at a glance, quiet
   until you look at it. The dot carries the colour; the text stays readable. */
.a-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--at-small); font-weight: var(--aw-medium);
  padding: 3px 9px 3px 8px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.45;
}
.a-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
/* The tinted hairline went. A fill, a dot and a ring is three devices saying
   one thing, and at 12.5px the ring only muddies the chip's edge. */
.a-chip-info      { background: var(--surface-alt); color: var(--ink-2); }
.a-chip-warn      { background: var(--warning-bg); color: var(--warning); }
.a-chip-success   { background: var(--success-bg); color: var(--success); }
.a-chip-danger    { background: var(--danger-bg); color: var(--danger); }

/* Abandoned tab: the facts a half-finished form left behind, as a wrapping
   row of chips so five details still fit one table cell. */
.a-abandoned-facts { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }

/* ---------- lead CSV import ---------- */
.a-import-intro { margin: 0 0 14px; line-height: 1.55; }
.a-import-cols { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.a-import-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }

/* The dropzone is the control; the native file input stays hidden. Dashed
   border and a quiet fill until a file lands, then it reads as "chosen". */
.a-csv-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 16px; border: 1.5px dashed var(--line-strong, var(--line));
  border-radius: var(--r-md, 10px); background: var(--surface-alt);
  text-align: center; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.a-csv-drop:hover, .a-csv-drop:focus-visible, .a-csv-drop.is-over {
  border-color: var(--primary); background: var(--tint);
}
.a-csv-drop.has-file { border-style: solid; border-color: var(--success); }
.a-csv-drop-icon { color: var(--ink-2); display: flex; }
.a-csv-drop-icon svg { width: 22px; height: 22px; }
.a-csv-drop-title { font-weight: var(--aw-medium, 500); color: var(--ink); }

.a-import-report { margin-top: 14px; }
.a-import-summary { display: flex; gap: 6px; margin-bottom: 8px; }
.a-import-problems {
  max-height: 180px; overflow-y: auto; margin-top: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md, 10px);
}
.a-import-problem {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 12px; font-size: var(--at-small);
}
.a-import-problem + .a-import-problem { border-top: 1px solid var(--line); }
.a-import-rowno { color: var(--ink-3, var(--ink-2)); white-space: nowrap; font-weight: var(--aw-medium, 500); }

.a-import-actions { align-items: center; }
.a-import-sample {
  margin-right: auto; font-size: var(--at-small);
  color: var(--primary); text-decoration: none;
}
.a-import-sample:hover { text-decoration: underline; }

.a-role {
  display: inline-block; font-size: var(--at-micro); font-weight: var(--aw-semi);
  color: var(--secondary); background: var(--tint);
  padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: var(--atrack-micro);
}

/* ---------- avatar ---------- */
.a-avatar {
  /* JS normally sets an explicit size; these keep it round rather than
     collapsing to zero when it does not. */
  width: 32px; height: 32px;
  border-radius: 50%; color: #fff; font-weight: var(--aw-medium);
  display: grid; place-items: center; flex-shrink: 0; font-size: .75rem;
  letter-spacing: .01em;
  /* Was a drop shadow plus an inset dark edge plus a 1.5px white ring — three
     effects on a 32px circle. A flat disc is cleaner at this size and does not
     shimmer when a table of them scrolls. */
}

/* ---------- dropdown menu ---------- */
.a-menu {
  z-index: 120; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-xl);
  padding: 6px;
}
.a-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font-size: .85rem; font-weight: 500; color: var(--ink);
  padding: 9px 12px; border-radius: 9px;
}
.a-menu-item:hover { background: var(--surface-alt); }
.a-menu-item.is-danger { color: var(--danger); }
.a-menu-item svg { color: var(--ink-3); }
.a-menu-head { padding: 6px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.a-menu-head strong { display: block; font-size: .9rem; }
.a-menu-head span { color: var(--ink-3); font-size: .76rem; }
.a-menu-empty { padding: 14px; color: var(--ink-3); font-size: .84rem; text-align: center; }

/* bell dropdown — a distinct namespace from .a-notif-* below (the full
   notifications page), which used to share these class names and silently
   clobber this layout the moment the page's rules loaded after them. */
.a-notifmenu-item {
  display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 11px 12px; border-radius: 10px; position: relative;
}
.a-notifmenu-item:hover { background: var(--surface-alt); }
.a-notifmenu-item.is-unread { background: var(--tint); }
.a-notifmenu-item.is-unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); position: absolute; right: 12px; top: 14px; }
.a-notifmenu-t { display: flex; justify-content: space-between; gap: 12px; }
.a-notifmenu-t strong { font-size: .82rem; }
.a-notifmenu-t span { color: var(--ink-3); font-size: .72rem; white-space: nowrap; }
.a-notifmenu-b { color: var(--ink-2); font-size: .78rem; line-height: 1.4; }

/* notifications page */
.a-notif-list { display: grid; gap: 8px; }
.a-notif-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.a-notif-item:hover { background: var(--surface-alt); border-color: var(--primary-light); box-shadow: var(--sh-sm); }
.a-notif-item.is-unread { background: var(--tint); border-color: var(--primary); }
.a-notif-item.is-unread::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); position: absolute; right: 12px; top: 14px; }
.a-notif-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-alt); color: var(--primary); flex-shrink: 0; }
.a-notif-item.is-unread .a-notif-icon { background: var(--primary); color: #fff; }
.a-notif-content { min-width: 0; }
.a-notif-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.a-notif-header strong { font-size: .86rem; color: var(--ink); line-height: 1.3; }
.a-notif-at { color: var(--ink-3); font-size: .72rem; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.a-notif-body { color: var(--ink-2); font-size: .8rem; line-height: 1.5; margin: 0; }
.a-notif-actions { display: flex; align-items: center; gap: 4px; margin-left: 12px; flex-shrink: 0; }
.a-notif-markread, .a-notif-open { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink-2); transition: background .1s ease, color .1s ease; }
.a-notif-markread:hover { background: var(--tint); color: var(--primary); }
.a-notif-open:hover { background: var(--surface-alt); color: var(--primary); }
.a-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.a-section-head h2 { font-size: 1.25rem; font-weight: var(--aw-semi); color: var(--ink); }
.a-pill-unread { background: var(--primary); color: #fff; font-weight: 600; font-size: .75rem; padding: 4px 10px; border-radius: 999px; }
.a-refresh-btn { transition: transform .2s ease; }
.a-refresh-btn.spinning { transform: rotate(360deg); }
.a-empty-centered { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 16px; }
.a-empty-centered .a-empty-icon { color: var(--ink-3); opacity: .5; }
.a-empty-centered .a-empty-title { font-size: 1.05rem; }
.a-empty-centered .a-empty-sub { max-width: 360px; }
.a-empty-centered .btn { margin-top: 8px; }
.a-mark-all-btn { margin-top: 16px; justify-self: center; }

/* skeleton & content transitions */
@keyframes skeleton-pulse {
  0% { opacity: .4; }
  50% { opacity: .8; }
  100% { opacity: .4; }
}
.a-skeleton-wrap { display: grid; gap: 16px; padding: 20px 0; }
.a-skeleton-title { height: 28px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface) 50%, var(--surface-alt) 75%); background-size: 200% 100%; max-width: 300px; }
.a-skeleton-card { height: 120px; border-radius: 12px; background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface) 50%, var(--surface-alt) 75%); background-size: 200% 100%; }
.a-content-fade-in { animation: content-fade-in .18s ease-out; }
@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* .a-shell grid already defined at line 7 */

/* ---------- modal ----------
   Stacking, in one place, because the pieces are in three files and got out
   of step: the Leads slide-out sits at 1000/1001 (css/leads.css) and every
   dialog raised *from inside it* was left down here at 200 — so pressing
   Qualify lead, or rejecting a document, opened a modal behind the panel
   that covered it. Nothing appeared to happen.

     1000/1001  slide-out panel
     2000       modal + the new-lead modal (.lc-modal-back)
     2100       confirm — it can be raised on top of a modal
     3000       toasts — they report the outcome of whatever is on screen,
                so they are above all of it (css/styles.css)

   Anchored popups (.a-menu, .a-gs-menu at 120) stay put: they belong to the
   topbar, which the panel is allowed to cover. */
.a-modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .5);
  display: grid; place-items: center; padding: 22px;
  backdrop-filter: blur(2px);
}
.a-modal {
  width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-xl);
}
.a-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 6px; }
.a-modal-title { font-size: 1.05rem; }
.a-modal-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink-2); }
.a-modal-x:hover { background: var(--surface-alt); color: var(--ink); }
.a-modal-body { padding: 16px 22px 22px; }

/* ---------- required-reason prompt ---------- */
.a-reason-form { display: grid; gap: 8px; }
.a-reason-form .a-muted { font-size: .86rem; line-height: 1.5; margin-bottom: 4px; }
.a-field-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.a-reason-input {
  width: 100%; padding: 10px 12px; resize: vertical; min-height: 90px;
  font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.a-reason-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.a-reason-error { font-size: .8rem; color: var(--danger); }
.a-reason-count { font-size: .74rem; color: var(--ink-3); text-align: right; }
.a-reason-form .a-kactions { justify-content: flex-end; margin-top: 10px; }

.a-confirm-backdrop {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(15, 23, 42, .55);
  display: grid; place-items: center; padding: 22px;
}
.a-kcard {
  max-width: 400px; width: 100%;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-xl);
  padding: 26px; text-align: center;
  display: grid; justify-items: center; gap: 6px;
}
.a-kicon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--success-bg); color: var(--success); margin-bottom: 8px;
}
.a-kicon.is-danger { background: var(--danger-bg); color: var(--danger); }
.a-ktitle { font-size: 1.02rem; }
.a-kbody { color: var(--ink-2); font-size: .86rem; line-height: 1.5; }
.a-kactions { display: flex; gap: 10px; margin-top: 18px; }

/* ---------- login ---------- */
/* ---------- sign-in screen ----------
   Built to the approved design at 2000 × 956 and scaled as one piece.
   `--u` is one pixel of that design — the smaller of the width and height
   ratios — so the composition keeps its proportions on any desktop window
   and always fits it, instead of reflowing into a layout the design never
   showed (the laptop over the copy, the page taller than the screen).
   `--r` is the same unit for the form, floored so it stays legible.
   Colours are fixed: this screen has one look in both admin themes. */
.a-login {
  --u: min(0.05vw, 0.1046vh);
  /* .72px keeps the form readable on a 1280×720 laptop; above that `--r`
     equals `--u`, so the form scales exactly with the rest of the design. */
  --r: max(0.72px, var(--u));
  /* minmax(0, …): a plain fr track grows to its content's minimum width, so
     the card widened the right column and cut the canvas off on the left. */
  display: grid; grid-template-columns: minmax(0, 61.5fr) minmax(0, 38.5fr); min-height: 100vh;
}
.a-brand-logo { height: 48px; width: auto; filter: brightness(0) invert(1); }

/* ---- left panel: a 1230 × 956 canvas, centred ---- */
.a-login-art {
  display: grid; place-items: center; overflow: hidden; min-height: 100vh;
  color: #C9D2EC;
  background:
    radial-gradient(55% 45% at 72% 42%, rgba(88, 80, 236, .30) 0%, transparent 70%),
    radial-gradient(45% 40% at 8% 100%, rgba(59, 130, 246, .14) 0%, transparent 70%),
    linear-gradient(160deg, #0A0F2E 0%, #0F1A4A 55%, #0B1540 100%);
}
.a-lg-canvas { position: relative; width: calc(1230 * var(--u)); height: calc(956 * var(--u)); }

.a-lg-copy { position: absolute; z-index: 2; left: calc(80 * var(--u)); top: calc(62 * var(--u)); width: calc(520 * var(--u)); }
.a-lg-brand { display: block; width: calc(356 * var(--u)); }
.a-lg-logo {
  display: block; width: 100%; aspect-ratio: 640 / 145;
  /* The real mark in its real blue. "activ" is #200058 in the file, which
     disappears on navy, so it is reversed to white — the standard lockup on
     a dark ground. 48.67% is the measured gap between the two words
     (columns 303–320 of 640). */
  background: linear-gradient(90deg, #FFFFFF 0 48.67%, #0068B0 48.67% 100%);
  -webkit-mask: url('../assets/brand/logo-640.png') no-repeat left center / contain;
          mask: url('../assets/brand/logo-640.png') no-repeat left center / contain;
}
.a-lg-tagline {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  margin: calc(10 * var(--u)) 0 0;
  font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u));
  letter-spacing: .3em; text-transform: uppercase; color: #C9D2EC;
}
.a-lg-tagline::after {
  content: ""; width: calc(72 * var(--u)); height: calc(2 * var(--u));
  margin-top: calc(-8 * var(--u)); border-radius: 2px; background: #6D6BFA;
}
.a-lg-title {
  margin: calc(40 * var(--u)) 0 0;
  font-size: calc(53 * var(--u)); line-height: calc(57 * var(--u));
  font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.a-lg-title span { display: block; white-space: nowrap; }
.a-lg-grad {
  background: linear-gradient(90deg, #8B5CF6 0%, #5E8BFF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.a-lg-lead {
  margin: calc(24 * var(--u)) 0 0; width: calc(470 * var(--u));
  font-size: calc(21 * var(--u)); line-height: calc(29 * var(--u)); color: #C9D2EC;
}
.a-lg-features { list-style: none; padding: 0; margin: calc(32 * var(--u)) 0 0; display: grid; gap: calc(14 * var(--u)); }
.a-lg-features li { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.a-lg-feature-ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(12 * var(--u));
  background: rgba(124, 108, 250, .2); color: #B4BCFF;
  box-shadow: inset 0 0 0 1px rgba(165, 180, 252, .1);
}
.a-lg-feature-ic svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.a-lg-features strong { display: block; font-size: calc(19.5 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 600; color: #fff; }
.a-lg-features li div span { display: block; margin-top: calc(5 * var(--u)); font-size: calc(16.5 * var(--u)); line-height: calc(22 * var(--u)); color: #B7C1DD; }

.a-lg-foot {
  position: absolute; z-index: 2; left: calc(80 * var(--u)); right: calc(60 * var(--u));
  top: calc(884 * var(--u)); height: calc(40 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(16 * var(--u)); color: #C9D2EC;
}
.a-lg-badges { display: flex; align-items: center; }
.a-lg-badge { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)); font-size: calc(15.5 * var(--u)); color: #E4E9F7; }
.a-lg-badge svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.a-lg-badge + .a-lg-badge { border-left: 1px solid rgba(201, 210, 236, .35); }
.a-lg-badge:last-child { padding-right: 0; }

/* ---- the scene (decoration; sample figures, hidden from screen readers) ---- */
.a-lg-visual { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---- tagline and handwritten note, top right ----
   Placed at the design's own coordinates. The brush underline and the small
   tick are drawn as SVG so they taper like a marker stroke; a rounded border
   cannot. The hand is the system's own script face — web fonts are blocked by
   the site's content-security policy (font-src 'self'). */
.a-lg-empower {
  position: absolute; left: calc(988 * var(--u)); top: calc(64 * var(--u));
  display: grid; font-size: calc(19.5 * var(--u)); line-height: calc(26 * var(--u));
  font-weight: 400; letter-spacing: .005em; color: #E6E9F5;
}
.a-lg-empower-bar {
  width: calc(44 * var(--u)); height: calc(4 * var(--u)); margin-top: calc(24 * var(--u));
  border-radius: 99px; background: linear-gradient(90deg, #7C5CF6, #4F8BFF);
}
.a-lg-script {
  position: absolute; z-index: 3; left: calc(994 * var(--u)); top: calc(166 * var(--u));
  display: grid; justify-items: start;
  font-family: "Bradley Hand", "Segoe Print", "Ink Free", cursive;
  font-size: calc(30 * var(--u)); line-height: calc(35 * var(--u)); font-weight: 700; color: #F4F6FF;
  transform: rotate(-12deg); transform-origin: left top;
}
.a-lg-script-line { white-space: nowrap; }
.a-lg-script-line:nth-child(2) { margin-left: calc(18 * var(--u)); }
.a-lg-script-line:nth-child(3) { margin-left: calc(52 * var(--u)); }
.a-lg-script-line:nth-child(4) { margin-left: calc(34 * var(--u)); }
.a-lg-script-tick {
  position: absolute; left: calc(22 * var(--u)); top: calc(30 * var(--u)); width: calc(26 * var(--u)); height: calc(12 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M2 8 C 6 3, 12 2, 18 3' stroke='%238B7BFF' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.a-lg-script-swoosh {
  position: absolute; left: calc(46 * var(--u)); top: calc(142 * var(--u)); width: calc(124 * var(--u)); height: calc(16 * var(--u));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236D5BF6'/%3E%3Cstop offset='1' stop-color='%234F8BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 12 C 28 6, 78 3, 118 5 C 82 8, 36 11, 5 15 Z' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.a-lg-laptop {
  position: absolute; left: calc(596 * var(--u)); top: calc(300 * var(--u)); width: calc(590 * var(--u));
  transform: perspective(calc(2200 * var(--u))) rotateX(8deg) rotateY(-12deg) rotateZ(7deg);
  filter: drop-shadow(0 calc(40 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .5));
}
.a-lg-screen {
  display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; height: calc(390 * var(--u));
  border: calc(12 * var(--u)) solid #0C0F22; border-radius: calc(18 * var(--u));
  overflow: hidden; background: #F4F6FB;
}
.a-lg-screen svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.a-lg-base {
  height: calc(24 * var(--u)); margin: 0 calc(-30 * var(--u));
  border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u));
  background: linear-gradient(#3B4058, #171A28);
}
.a-lg-side { display: grid; align-content: start; gap: calc(4 * var(--u)); padding: calc(18 * var(--u)) calc(10 * var(--u)); background: #0E1638; }
.a-lg-logo-sm { width: calc(116 * var(--u)); margin: 0 0 calc(18 * var(--u)) calc(6 * var(--u)); }
.a-lg-side-item {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(7 * var(--u));
  font-size: calc(10.5 * var(--u)); color: #C9D2EC; white-space: nowrap;
}
.a-lg-side-item.is-active { background: #3B4BDB; color: #fff; }
.a-lg-main { display: grid; align-content: start; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); min-width: 0; }
.a-lg-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.a-lg-kpi {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(15 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u));
  background: #fff; box-shadow: 0 1px 3px rgba(15, 27, 61, .08);
}
.a-lg-kpi-ic { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(7 * var(--u)); color: #fff; }
.a-lg-kpi-ic svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.a-lg-kpi-ic.is-blue { background: #3B82F6; }
.a-lg-kpi-ic.is-amber { background: #F59E0B; }
.a-lg-kpi-ic.is-green { background: #22C55E; }
.a-lg-kpi-ic.is-violet { background: #7C3AED; }
.a-lg-kpi-body { display: grid; flex: 1; min-width: 0; }
.a-lg-kpi-label { font-size: calc(7.5 * var(--u)); color: #6B7593; }
.a-lg-kpi-value { font-size: calc(18 * var(--u)); font-weight: 700; color: #0F1B3D; }
.a-lg-kpi-delta { align-self: end; font-size: calc(7.5 * var(--u)); color: #16A34A; }
.a-lg-recent { padding: calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: #fff; box-shadow: 0 1px 3px rgba(15, 27, 61, .08); }
.a-lg-recent-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; color: #0F1B3D; }
.a-lg-recent-all { font-size: calc(8.5 * var(--u)); font-weight: 500; color: #3B4BDB; }
.a-lg-row {
  display: grid; grid-template-columns: 1.3fr 1.1fr 1fr .9fr; align-items: center;
  padding: calc(7 * var(--u)) 0; border-top: 1px solid #EEF1F7;
  font-size: calc(8.5 * var(--u)); color: #34405E; white-space: nowrap;
}
.a-lg-row-head { border-top: 0; color: #6B7593; }
.a-lg-row-who { display: flex; align-items: center; gap: calc(5 * var(--u)); color: #3B4BDB; }
.a-lg-row-who span { color: #34405E; }
.a-lg-row svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.a-lg-pill { display: inline-block; padding: calc(2 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); font-size: calc(7.5 * var(--u)); }
.a-lg-pill.is-warn { background: #FEF3C7; color: #B45309; }
.a-lg-pill.is-success { background: #DCFCE7; color: #15803D; }
.a-lg-pill.is-violet { background: #EDE9FE; color: #6D28D9; }
.a-lg-pill.is-info { background: #EEF1F7; color: #475569; }


/* ---- right panel ---- */
.a-login-right {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: calc(24 * var(--r));
  padding: calc(66 * var(--r)) calc(58 * var(--r)) calc(40 * var(--r)) calc(84 * var(--r));
  background: #F3F5FA; color: #0F1B3D;
}
/* width: 100% with the design width as the cap — not the other way round. A
   fixed width sets the column's minimum, so on a phone the card (490px)
   plus its gutters pushed the page to 522px wide. */
.a-login-card {
  width: 100%; max-width: calc(628 * var(--r));
  margin: auto 0;
  background: #fff; border: 1px solid rgba(15, 27, 61, .05);
  border-radius: calc(24 * var(--r));
  box-shadow: 0 calc(24 * var(--r)) calc(60 * var(--r)) rgba(15, 27, 61, .07);
  padding: calc(50 * var(--r)) calc(46 * var(--r)) calc(30 * var(--r));
}
.a-lg-welcome {
  display: flex; align-items: center; gap: calc(22 * var(--r)); margin: 0;
  font-size: calc(41 * var(--r)); line-height: calc(50 * var(--r));
  font-weight: 700; letter-spacing: -.02em; color: #0F1B3D;
}
.a-login-hint { margin: calc(12 * var(--r)) 0 0; font-size: calc(19.5 * var(--r)); line-height: calc(26 * var(--r)); color: #55607A; }
.a-login-form { margin-top: calc(30 * var(--r)); }

.a-lg-field { margin: 0 0 calc(28 * var(--r)); }
/* body.admin-login prefix: `body.admin .field > label` sizes every admin
   label down to 12.5px and would otherwise win. */
body.admin-login .a-lg-field > label {
  display: block; margin-bottom: calc(10 * var(--r));
  font-size: calc(17.5 * var(--r)); line-height: calc(22 * var(--r)); font-weight: 600; color: #0F1B3D;
}
body.admin-login .a-lg-field .error:empty { display: none; }
.a-lg-input { position: relative; display: flex; align-items: center; }
.a-lg-input-ic { position: absolute; left: calc(20 * var(--r)); display: grid; color: #1F2A44; pointer-events: none; }
.a-lg-input-ic svg, .a-lg-eye svg { width: calc(24 * var(--r)); height: calc(24 * var(--r)); }
body.admin-login .a-lg-input input {
  width: 100%; min-width: 0; height: calc(64 * var(--r));
  padding: 0 calc(60 * var(--r)) 0 calc(72 * var(--r));
  font-size: calc(18.5 * var(--r)); color: #0F1B3D;
  background: #fff; border: calc(1.5 * var(--r)) solid #D5DBE8; border-radius: calc(10 * var(--r));
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.admin-login .a-lg-input input::placeholder { color: #7A849C; }
body.admin-login .a-lg-input input:focus {
  outline: none; border-color: #2F4FE0; box-shadow: 0 0 0 calc(3 * var(--r)) rgba(47, 79, 224, .12);
}
.a-lg-field.has-error .a-lg-input input { border-color: #DC2626; }
.a-lg-field .error { margin-top: calc(6 * var(--r)); font-size: calc(15 * var(--r)); color: #DC2626; }
.a-lg-eye {
  position: absolute; right: calc(14 * var(--r)); display: grid; place-items: center;
  width: calc(40 * var(--r)); height: calc(40 * var(--r)); border-radius: calc(8 * var(--r)); color: #1F2A44;
}
.a-lg-eye:hover { background: #EEF1F7; }

.a-lg-options {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--r)); flex-wrap: wrap;
  margin: calc(-4 * var(--r)) 0 calc(28 * var(--r));
}
.a-lg-remember { display: inline-flex; align-items: center; gap: calc(14 * var(--r)); font-size: calc(18.5 * var(--r)); color: #0F1B3D; cursor: pointer; }
.a-lg-remember input { width: calc(24 * var(--r)); height: calc(24 * var(--r)); margin: 0; accent-color: #2350D9; }
.a-lg-forgot { font-size: calc(18.5 * var(--r)); font-weight: 600; color: #2350D9; }

body.admin-login .a-lg-submit {
  min-height: calc(64 * var(--r)); padding: 0 calc(24 * var(--r)); border-radius: calc(10 * var(--r));
  background: #2350D9; font-size: calc(21 * var(--r)); font-weight: 600;
}
body.admin-login .a-lg-submit:hover { background: #1D44BF; }
.a-lg-submit-inner { display: inline-flex; align-items: center; gap: calc(16 * var(--r)); }
.a-lg-submit svg { width: calc(24 * var(--r)); height: calc(24 * var(--r)); }
.a-lg-submit.is-loading .a-lg-submit-inner { visibility: hidden; }

.a-lg-or {
  display: flex; align-items: center; gap: calc(18 * var(--r));
  margin: calc(28 * var(--r)) 0 calc(26 * var(--r));
  font-size: calc(16.5 * var(--r)); color: #55607A; white-space: nowrap;
}
.a-lg-or::before, .a-lg-or::after { content: ""; flex: 1; height: 1px; background: #DFE3EC; }

.a-lg-secure {
  display: flex; align-items: center; gap: calc(16 * var(--r));
  min-height: calc(78 * var(--r));
  padding: calc(12 * var(--r)) calc(20 * var(--r)) calc(12 * var(--r)) calc(22 * var(--r));
  border-radius: calc(12 * var(--r)); background: #F3F5FA;
}
.a-lg-secure-ic { display: grid; place-items: center; flex-shrink: 0; color: #3B3FC7; }
.a-lg-secure-ic svg { width: calc(34 * var(--r)); height: calc(34 * var(--r)); }
.a-lg-secure strong { display: block; font-size: calc(16.5 * var(--r)); line-height: calc(22 * var(--r)); font-weight: 600; color: #0F1B3D; }
.a-lg-secure div > span { display: block; margin-top: calc(6 * var(--r)); font-size: calc(14 * var(--r)); line-height: calc(19 * var(--r)); color: #55607A; }

.a-lg-legal {
  align-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: calc(16 * var(--r));
  padding-right: calc(22 * var(--r)); font-size: calc(16 * var(--r)); color: #55607A;
}
.a-lg-legal-sep { color: #B8C0D2; }

.a-login-error { margin-top: calc(14 * var(--r)); font-size: calc(16 * var(--r)); font-weight: 500; color: #DC2626; }

/* The left panel is hidden at 1120px and below (see the shell's media query
   further down); the form then uses ordinary sizes. */
@media (max-width: 1120px) {
  .a-login { --r: .9px; }
  .a-login-right { min-height: 100vh; padding: 40px 24px; }
  .a-lg-legal { padding-right: 0; }
}
@media (max-width: 560px) {
  .a-login { --r: .78px; }
  .a-login-right { padding: 24px 16px; }
  .a-lg-or { white-space: normal; }
  .a-lg-legal { justify-content: center; }
}
.a-demo { margin-top: 26px; border-top: 1px dashed var(--line-strong); padding-top: 20px; }
.a-demo-label { font-size: .78rem; color: var(--ink-3); margin-bottom: 10px; }
.a-demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.a-demo-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  text-align: left;
}
.a-demo-chip:hover { border-color: var(--primary); background: var(--tint); }
.a-demo-chip div { display: grid; min-width: 0; }
.a-demo-chip strong { font-size: .76rem; }
.a-demo-chip small { color: var(--ink-3); font-size: .68rem; }

/* ---------- detail page ---------- */
.a-back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: .84rem; font-weight: 600; }
.a-back-link:hover { color: var(--primary); text-decoration: none; }
.a-detail-head { display: grid; gap: 4px; }
.a-detail-id { display: flex; align-items: center; gap: 12px; }
.a-detail-id h2 { font-size: 1.4rem; letter-spacing: -.01em; }
.a-detail-meta { color: var(--ink-2); font-size: .9rem; }
.a-detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.a-detail-left, .a-detail-right { display: grid; gap: 16px; }
/* one definition, not two: a 1fr/2fr split stranded the value halfway across
   a wide card, so the label column is capped instead. */
.a-dl { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 8px 16px; font-size: .85rem; }
.a-dl dt { color: var(--ink-3); }
.a-dl dd { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.a-cust-row { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.a-cust-row strong { font-size: 1rem; display: block; }
.a-cust-sub { color: var(--ink-3); font-size: .82rem; }

.a-docs { display: grid; gap: 8px; }
.a-doc { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.a-doc-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-alt); color: var(--primary); flex-shrink: 0; }
.a-doc-mid { display: grid; min-width: 0; flex: 1; justify-items: start; gap: 3px; }
.a-doc-mid strong { font-size: var(--at-base); font-weight: var(--aw-medium); }
.a-doc-mid span { color: var(--ink-3); font-size: var(--at-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* A grid item fills its track, so the status chip was stretching into a
   full-width bar the width of the document row. */
.a-doc-mid .a-chip { justify-self: start; }
.a-doc-dl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--ink-2); }
.a-doc-dl:hover { background: var(--surface-alt); color: var(--primary); }
.a-doc-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.a-doc-actions { margin-top: 12px; }
.a-doc-status { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.a-doc-status.is-new { color: var(--primary); background: var(--tint); }
.a-doc-status.is-verified { color: var(--success, #14804B); background: rgba(20,128,75,.12); }
.a-doc-status.is-rejected { color: var(--danger, #B42318); background: rgba(180,35,24,.12); }
.a-card-head-right { display: flex; align-items: center; gap: 6px; }
.a-filter-right { margin-left: auto; }
.a-gsearch { position: relative; flex: 0 1 300px; display: flex; align-items: center; }
.a-gsearch-ic { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; display: flex; }
.a-gsearch input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; font-size: .84rem;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.a-gsearch input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.a-gs-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 340px; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(2, 6, 23, .16); padding: 6px; z-index: 120;
}
.a-gs-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--ink); }
.a-gs-row:hover { background: var(--surface-alt); }
.a-gs-row svg { color: var(--primary); flex-shrink: 0; }
.a-gs-row strong { display: block; font-size: .84rem; }
.a-gs-row span { color: var(--ink-3); font-size: .74rem; }
.a-gs-empty { padding: 12px; color: var(--ink-3); font-size: .82rem; text-align: center; }

/* ==========================================================================
   Status bar — the pipeline as one horizontal, clickable strip above the app
   ========================================================================== */
.a-statusbar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--sh-sm);
  padding: 14px 16px 12px; margin: 0 0 16px;
}
.a-statusbar-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.a-statusbar-head h2 {
  margin: 0; font-size: var(--at-micro); font-weight: var(--aw-semi); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: var(--atrack-micro);
}
.a-statusbar-now { display: inline-flex; }
.a-statusbar-lock { font-size: var(--at-small); color: var(--ink-3); }
/* The row that puts Reject in the right corner. The `margin-left: auto` on
   the button is what does the work; it needs a flex parent to do it in. */
.a-statusbar-actions { display: flex; align-items: center; margin-bottom: 10px; }
.a-statusbar-reject { margin-left: auto; }

/* Scrolls sideways rather than wrapping, so "where is this application" stays
   one line at any panel width. */
.a-statustrack { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.a-statusflow {
  display: flex; align-items: stretch; gap: 2px;
  list-style: none; margin: 0; padding: 0; min-width: max-content;
}
.a-statusflow li { display: flex; align-items: center; }
.a-statusflow li:not(:last-child)::after {
  content: '\2192'; margin: 0 2px; color: var(--line-strong); font-size: .8rem;
}
.a-stage {
  display: flex; align-items: center; gap: 7px;
  font: inherit; font-size: .78rem; color: var(--ink-2);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.a-stage:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--line); color: var(--ink); }
.a-stage:disabled { cursor: default; }
.a-stage:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.a-stage-dot {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  background: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.a-statusflow li.is-done .a-stage { color: var(--success); }
.a-statusflow li.is-done .a-stage-dot { background: var(--success); }
.a-statusflow li.is-current .a-stage {
  color: var(--primary); font-weight: var(--aw-semi);
  border-color: var(--primary); background: var(--tint);
}
.a-statusflow li.is-current .a-stage-dot { background: var(--primary); }
/* Closed Lost is an exit, not a milestone — it never reads as success. */
.a-statusflow li.is-lost.is-current .a-stage {
  color: var(--danger); border-color: var(--danger); background: var(--danger-bg);
}
.a-statusflow li.is-lost.is-current .a-stage-dot { background: var(--danger); }
/* A stage the API says is not reachable yet — no lender chosen, no bank
   application number recorded. It stays on the track (the reader still needs
   to see where the case is going) but reads as unavailable, and its title
   carries the API's own sentence saying what is missing. */
.a-statusflow li.is-blocked .a-stage { opacity: .42; cursor: not-allowed; }
.a-statusflow li.is-blocked .a-stage-dot { background: var(--line); }

.a-stepper { display: flex; gap: 10px; margin: 6px 0 20px; padding: 0; flex-wrap: wrap; }
.a-stepper li {
  flex: 0 1 auto; position: relative; padding: 6px 10px;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .75rem; color: var(--ink-3); font-weight: 500;
  border-bottom: 2px solid transparent;
}
.a-stepper li svg { display: none; }
.a-stepper li.is-done { color: var(--success); border-bottom-color: var(--success); }
.a-stepper li.is-current { color: var(--primary); font-weight: var(--aw-semi); border-bottom-color: var(--primary); }
.a-detail-layout .a-stepper { margin: 0 0 14px; gap: 6px; }
.a-detail-layout .a-stepper li { padding: 4px 8px; font-size: .7rem; }
.a-Status-note { margin-top: 6px; }
.a-status-actions, .a-assign-row { display: flex; align-items: center; gap: 10px; }
.a-status-actions select, .a-assign-row select { width: 100%; height: 42px; }

.a-timeline { display: grid; gap: 6px; }
.a-timeline li { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.a-tl-dot {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--tint); color: var(--primary); flex-shrink: 0; margin-top: 2px;
}
.a-tl-text { display: block; font-size: .86rem; }
.a-tl-at { color: var(--ink-3); font-size: .74rem; }

.a-notes { display: grid; gap: 10px; }
.a-notes-compact { gap: 8px; }
.a-note { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-alt); border-radius: 12px; padding: 10px 12px; }
.a-note-meta { color: var(--ink-3); font-size: .72rem; display: block; }
.a-note p { font-size: .85rem; margin-top: 2px; }
.a-ta { width: 100%; min-height: 96px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px; resize: vertical; }

.a-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.a-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- misc pages ---------- */
.a-settings-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  max-width: 1000px;
  align-items: start;
}
.a-settings-full {
  grid-column: span 2;
}
.a-enabled { color: var(--success); font-size: .8rem; font-weight: var(--aw-semi); }
.a-disabled { color: var(--ink-3); font-size: .8rem; }
.a-muted { color: var(--ink-3); font-size: .8rem; margin-top: 8px; }
.a-ta { font-family: inherit; }
.ci-link { font-size: .84rem; font-weight: 600; }

/* Premium Settings & Theme Cards */
.a-theme-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.a-theme-card {
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  background: var(--surface);
  transition: all .2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.a-theme-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.a-theme-card.is-active {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--primary);
}
.a-theme-preview {
  height: 64px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: flex;
  overflow: hidden;
}
.a-theme-preview-sidebar {
  width: 24px;
  height: 100%;
}
.a-theme-preview-body {
  flex: 1;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a-theme-preview-bar {
  height: 6px;
  border-radius: 3px;
  width: 60%;
}
.a-theme-preview-box {
  flex: 1;
  border-radius: 4px;
  border: 1px dashed var(--line);
}

/* Light preview colours */
.a-theme-card[data-theme="light"] .a-theme-preview-sidebar { background: #FFFFFF; box-shadow: inset -1px 0 0 rgba(22, 35, 59, .12); }
.a-theme-card[data-theme="light"] .a-theme-preview-body { background: #F1F4F9; }
.a-theme-card[data-theme="light"] .a-theme-preview-bar { background: #DDE5EF; }
.a-theme-card[data-theme="light"] .a-theme-preview-box { background: #FFFFFF; }

/* Dark preview colours */
.a-theme-card[data-theme="dark"] .a-theme-preview-sidebar { background: #111C30; }
.a-theme-card[data-theme="dark"] .a-theme-preview-body { background: #0F172A; }
.a-theme-card[data-theme="dark"] .a-theme-preview-bar { background: #263349; }
.a-theme-card[data-theme="dark"] .a-theme-preview-box { background: #1B2740; }

.a-theme-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}
.a-theme-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all .15s ease;
}
.a-theme-card.is-active .a-theme-check {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Pulsing Status dot */
.a-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  background: var(--success-bg);
  color: var(--success);
}
.a-status-dot-pulse {
  width: 8px;
  height: 8px;
  background-color: var(--success);
  border-radius: 50%;
  position: relative;
}
.a-status-dot-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--success);
  animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  opacity: 0;
}
@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 0; }
  50% { opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Settings user profile card detail grid */
.a-settings-profile-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.a-settings-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* without this a status pill in the value slot stretches the full column */
  align-items: flex-start;
}
.a-settings-info-label {
  font-size: .72rem;
  font-weight: var(--aw-semi);
  text-transform: uppercase;
  color: var(--ink-3);
  letter-spacing: .05em;
}
.a-settings-info-val {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

/* ==========================================================================
   Dark theme — flips the surface/ink ramp on the portal chrome only
   ========================================================================== */
/* Both selectors, like the elevation block above: the light palette is
   declared on `body.admin`, so tokens set on `html` alone are inherited by
   the body and then immediately overwritten by its own light values. The
   attribute was on the element and every variable under it still resolved
   light — dark mode set the flag and changed nothing below the body. */
html[data-admin-theme="dark"],
html[data-admin-theme="dark"] body.admin {
  color-scheme: dark;
  --bg: #0F172A;
  --surface: #111C30;
  --surface-alt: #1B2740;
  --ink: #E2E8F0;
  --ink-2: #CBD5E1;
  --ink-3: #64748B;
  --line: #263349;
  --line-strong: #334155;
  --tint: #17223F;

  --side-bg: #0C1526;
  --side-line: rgba(255, 255, 255, .07);
  --side-ink: #F1F5F9;
  --side-ink-2: rgba(226, 232, 240, .74);
  --side-ink-3: rgba(226, 232, 240, .44);
  --side-hover-bg: rgba(255, 255, 255, .06);
  --side-active-bg: rgba(255, 255, 255, .12);
  --side-active-ink: #FFFFFF;
  --side-logo-filter: brightness(0) invert(1);
}
/* Brand blue on a near-black rail is too low-contrast to count as a badge. */
html[data-admin-theme="dark"] .a-side-dot { background: #8BC2F0; color: #12002E; }
/* The sidebar is dark in both themes and keeps its own gradient — it used to be
   flattened to `background: inherit` here, which erased it. */
html[data-admin-theme="dark"] .a-topbar { background: var(--surface); }
/* --tint goes near-black in dark, so the role pill's dark ink on it was
   unreadable; the badge flips to a light-on-dark treatment instead. */
html[data-admin-theme="dark"] .a-role { background: rgba(139,194,240,.16); color: #A8CBEF; }
/* The count is plain text now, not a filled pill — left blue it read as a
   link sitting next to the heading. */
html[data-admin-theme="dark"] .a-count-pill { color: var(--ink-3); }
html[data-admin-theme="dark"] .a-notif-item.is-unread { color: #A8CBEF; }
html[data-admin-theme="dark"] .a-table tbody tr:hover { background: #16233A; }
html[data-admin-theme="dark"] .a-chip-warn { background: rgba(217, 119, 6, .16); }
/* --danger-bg stays a near-white pink, which reads as a hole punched in the
   dark bar; the lost stage flips to light-on-dark like the other chips. */
html[data-admin-theme="dark"] .a-statusflow li.is-lost.is-current .a-stage {
  background: rgba(220, 38, 38, .16);
}
html[data-admin-theme="dark"] .a-chip-success { background: rgba(5, 150, 105, .18); }
html[data-admin-theme="dark"] .a-chip-danger { background: rgba(220, 38, 38, .16); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .a-shell { grid-template-columns: 1fr; }
  .a-main { display: block; }
  .a-burger { display: flex; }
  .a-sidebar {
    position: fixed; z-index: 90; left: 0; top: 0;
    width: min(84vw, 300px); transform: translateX(-104%);
    transition: transform .22s var(--ease);
  }
  body.a-nav-open .a-sidebar { transform: translateX(0); box-shadow: var(--sh-xl); }
  .a-content { padding: 20px 18px; }
  .a-login { grid-template-columns: 1fr; }
  .a-login-art { display: none; }
  .a-detail-layout { grid-template-columns: 1fr; }
  .a-detail-span-12, .a-detail-span-8, .a-detail-span-6, .a-detail-span-4 { grid-column: auto; }
  .a-detail-actions--header { margin-left: 0; justify-content: flex-start; }
  .a-notif-item { grid-template-columns: 44px 1fr; }
  .a-notif-actions { display: none; }
  .a-notif-item.is-unread::before { right: 8px; top: 10px; width: 6px; height: 6px; }
}
@media (max-width: 1000px) {
  .a-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .a-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .a-chart-grid, .a-lower-grid { grid-template-columns: 1fr; }
  .a-settings-grid { grid-template-columns: 1fr; }
  .a-settings-full { grid-column: auto; }
  .a-cust-row { flex-wrap: wrap; }
  .a-gsearch { display: none; }
}
@media (max-width: 620px) {
  .a-kpi-grid { grid-template-columns: 1fr; }
  .a-pipe-strip { grid-template-columns: repeat(2, 1fr); }
  .a-pipe-cell:nth-child(2n+1) { border-left: 0; }
  .a-pipe-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .a-form-grid { grid-template-columns: 1fr; }
  .a-top-h p { display: none; }
  .a-filters .a-search { flex-basis: 100%; }
  .a-topbar { padding: 12px 16px; }
  .a-detail-id h2 { font-size: 1.15rem; }
  .a-detail-meta { font-size: .8rem; gap: 6px 10px; }
  .a-overview-grid { grid-template-columns: 1fr; }
  .a-user-btn > svg { display: none; }
  .a-notif-item { grid-template-columns: 40px 1fr; padding: 12px; gap: 10px; }
  .a-notif-header { flex-direction: column; gap: 2px; }
  .a-notif-at { font-size: .7rem; }
  .a-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .a-section-head h2 { font-size: 1.1rem; }
  .a-pill-unread { font-size: .7rem; padding: 3px 8px; }
  .a-refresh-btn { width: 36px; height: 36px; }
}
@media (max-width: 480px) {
  .a-login-card { padding: 24px 18px; }
  .a-card { border-radius: 14px; }
  .a-table-wrap { overflow-x: auto; }
  .a-table { min-width: 600px; }
  .a-detail-actions { gap: 6px; }
  .a-act-btn { padding: 0 8px; font-size: .78rem; }
  .a-act-btn span { display: none; }
  .a-act-btn svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .a-nav-link, .a-page-btn, .toast { transition-duration: .01ms; }
}
body.admin-login { background: var(--bg); }
@media print {
  body { background: #fff; }
  .a-sidebar, .a-topbar, .a-detail-actions, .a-nav, .toast, .a-back-link { display: none !important; }
  .a-main { margin: 0; padding: 24px; }
  .a-page { max-width: none; }
  .a-detail-layout { grid-template-columns: 1fr; }
  .a-card { break-inside: avoid; box-shadow: none; border-color: #ddd; }
}

.a-detail-actions {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.a-act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; height: 34px; padding: 0 10px;
  border-radius: 9px; font-size: .82rem; font-weight: 600;
  background: var(--surface-alt); color: var(--ink-2);
  border: 1px solid var(--line); cursor: pointer;
}
.a-act-btn:hover { background: var(--surface-alt); color: var(--accent); border-color: var(--accent); }
.a-act-btn svg { flex: none; }

/* ==========================================================================
   Application Detail — Refined layout (v2)
   ========================================================================== */

/* ---- Two-column detail grid ---- */
.a-detail-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
.a-detail-left-v2,
.a-detail-right-v2 { display: grid; gap: 16px; }

/* ---- Compact header bar ---- */
.a-detail-head-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.a-detail-head-v2 .a-back-link { flex-shrink: 0; }
.a-detail-title-block { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.a-detail-title-block h2 { font-size: 1.25rem; letter-spacing: -.015em; white-space: nowrap; }
.a-detail-subtitle {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--ink-3); font-size: .82rem;
}
.a-detail-subtitle span::after { content: '·'; margin-left: 8px; opacity: .45; }
.a-detail-subtitle span:last-child::after { content: ''; margin-left: 0; }
.a-detail-actions-v2 {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-left: auto; flex-shrink: 0;
}

/* ---- Vertical status pipeline ---- */
.a-status-pipeline {
  list-style: none;
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
}
.a-status-pipeline li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  padding: 0 0 18px 0;
}
.a-status-pipeline li:last-child { padding-bottom: 0; }
.a-status-pipeline li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.a-status-pipeline li:last-child::before { display: none; }

.a-sp-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  margin-top: 1px;
  transition: background .15s ease, border-color .15s ease;
}
.a-status-pipeline li.is-done .a-sp-dot {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.a-status-pipeline li.is-current .a-sp-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--tint);
}
.a-status-pipeline li.is-done::before { background: var(--success); opacity: .3; }

.a-sp-label { display: grid; gap: 1px; padding-top: 1px; }
.a-sp-label strong { font-size: .83rem; font-weight: 600; color: var(--ink-3); line-height: 1.3; }
.a-status-pipeline li.is-done .a-sp-label strong { color: var(--success); }
.a-status-pipeline li.is-current .a-sp-label strong { color: var(--primary); font-weight: var(--aw-semi); }
.a-sp-label span { font-size: .72rem; color: var(--ink-3); }

/* ---- Status update row (inline in status card) ---- */
.a-status-update-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.a-status-update-row select {
  flex: 1;
  min-width: 0;
  height: 36px;
  font-size: .83rem;
}
.a-status-update-row .btn { flex-shrink: 0; white-space: nowrap; }

/* ---- Inline notes form ---- */
.a-inline-note-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.a-note-ta {
  width: 100%;
  min-height: 72px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  font-size: .85rem;
  line-height: 1.5;
  transition: border-color .15s ease;
}
.a-note-ta:focus { outline: none; border-color: var(--primary); }
.a-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ---- Compact overview pills (3-col on sidebar, 2-col on mobile) ---- */
.a-overview-grid-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.a-overview-pill-sm {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-alt);
}
.a-overview-pill-sm-label { color: var(--ink-3); font-size: .68rem; font-weight: var(--aw-semi); text-transform: uppercase; letter-spacing: .05em; }
.a-overview-pill-sm strong { font-size: .88rem; }

/* ---- History-only timeline (no stepper) ---- */
.a-tl-list { display: grid; gap: 4px; padding: 0; }
.a-tl-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.a-tl-item:last-child { border-bottom: 0; }
.a-tl-ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary);
  margin-top: 1px;
}
.a-tl-body { display: grid; gap: 1px; flex: 1; min-width: 0; }
.a-tl-body strong { font-size: .83rem; line-height: 1.4; }
.a-tl-body span { color: var(--ink-3); font-size: .72rem; }

/* ---- Responsive overrides for new layout ---- */
@media (max-width: 1120px) {
  .a-detail-grid-v2 { grid-template-columns: 1fr; }
  .a-detail-actions-v2 { margin-left: 0; }
}
@media (max-width: 620px) {
  .a-detail-head-v2 { flex-direction: column; align-items: flex-start; gap: 10px; }
  .a-detail-actions-v2 { width: 100%; }
  .a-overview-grid-sm { grid-template-columns: 1fr; }
  .a-status-update-row { flex-direction: column; align-items: stretch; }
  .a-status-update-row .btn { width: 100%; justify-content: center; }
}

/* ---- CIBIL score readout ---- */
.a-cibil-score {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 20px; margin-bottom: 12px;
  background: var(--surface-alt); border-radius: var(--r-md);
  border-left: 4px solid var(--ink-3);
}
.a-cibil-n { font-size: 2.6rem; font-weight: var(--aw-semi); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.a-cibil-band { font-size: .82rem; font-weight: var(--aw-semi); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
/* The band carries the meaning, so it carries the colour. */
.a-cibil-score.is-excellent { border-left-color: var(--success); }
.a-cibil-score.is-excellent .a-cibil-n { color: var(--success); }
.a-cibil-score.is-good { border-left-color: var(--primary); }
.a-cibil-score.is-good .a-cibil-n { color: var(--primary); }
.a-cibil-score.is-fair { border-left-color: var(--warning); }
.a-cibil-score.is-fair .a-cibil-n { color: var(--warning); }
.a-cibil-score.is-poor { border-left-color: var(--danger); }
.a-cibil-score.is-poor .a-cibil-n { color: var(--danger); }

/* A score in a table cell: the number leads, the band explains it. */
.a-cibil-cell { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.a-cibil-cell strong { font-variant-numeric: tabular-nums; font-size: .9rem; }
.a-cibil-cell span { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.a-cibil-success strong { color: var(--success); }
.a-cibil-warn strong { color: var(--warning); }
.a-cibil-danger strong { color: var(--danger); }
/* The intake estimate sits under the bureau score and must not compete with it. */
.a-credit-score.is-secondary { opacity: .7; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ==========================================================================
   Bank policies

   A policy is a document, not a row of scalars: it has sections, and three
   rule tables under them. These give it the structure that made the flat
   sixteen-row definition list unreadable.
   ========================================================================== */

/* Several small facts in one cell — "FOIR x3", "grid x21", "CIBIL 720+".
   Wraps rather than overflowing, because a lender can carry all three. */
.a-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Secondary text inside a table cell. `.a-muted` carries a top margin meant
   for paragraphs, which pushed cell text off its own baseline. */
.a-cell-muted { color: var(--ink-3); font-size: .8rem; }

/* Section heading inside a policy card. Sits between the card title and the
   definition list, so it is deliberately quieter than either. */
.a-rule-head {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 10px;
  font-size: .74rem; font-weight: var(--aw-semi); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.a-rule-head:first-child { margin-top: 4px; }
.a-rule-head + .a-dl,
.a-rule-head + .a-table-wrap { margin-bottom: 4px; }
.a-rule-head + .a-table-wrap + .btn { margin-top: 10px; }

/* The two "who / how much" lists are short and unrelated, so on a wide card
   they sit side by side rather than leaving half the width empty. */
.a-policy-cols { display: grid; gap: 0 40px; margin-top: 16px; }
.a-policy-cols .a-rule-head { margin-top: 18px; }
@media (min-width: 1000px) {
  .a-policy-cols { grid-template-columns: 1fr 1fr; }
  .a-policy-cols .a-rule-head { margin-top: 4px; }
}

/* A superseded version: collapsed by default so the live policy is not
   buried under its own history. */
.a-version { border-top: 1px solid var(--line); }
.a-version:first-of-type { border-top: 0; }
.a-version > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 2px; cursor: pointer; list-style: none;
}
.a-version > summary::-webkit-details-marker { display: none; }
.a-version > summary::before {
  content: "\25B8"; color: var(--ink-3); font-size: .8rem;
  transition: transform .15s ease;
}
.a-version[open] > summary::before { transform: rotate(90deg); }
.a-version > summary:hover { color: var(--primary); }
.a-version-body { padding: 4px 2px 18px 18px; }

/* The second product row of a lender that lends more than one: the elbow
   ties it to the row above, the muted name keeps it readable on its own. */
.a-row-continues {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center; color: var(--ink-3);
}
.a-row-continues::before {
  content: ""; width: 9px; height: 9px;
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-bottom-left-radius: 3px; margin-bottom: 4px;
}

/* The lender header on the detail page reuses the table's identity block at
   a larger size. */
.a-section-head .a-who-text h2 { font-size: 1.25rem; font-weight: var(--aw-semi); }
.a-section-head .a-who-text span { color: var(--ink-3); font-size: .8rem; }

/* ==========================================================================
   Credit & obligations

   The panel a bureau pull is read and corrected in. Every figure on it feeds
   FOIR, so provenance is visual: a hand-entered row and a bureau row must
   never look alike.
   ========================================================================== */

/* The two numbers the rest of the card explains. */
.a-credit-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
.a-credit-kpi {
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-alt);
}
@media (max-width: 560px) {
  .a-credit-head { grid-template-columns: 1fr; }
}

/* "A score with no tradelines" and "no bureau configured" are the two states
   that get eligibility wrong in the dangerous direction, so they are called
   out rather than left to a muted paragraph. */
.a-credit-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin: 0 0 12px;
  border-radius: 10px;
  background: var(--warning-bg); color: var(--warning);
  font-size: .82rem; line-height: 1.5;
}
.a-credit-warn svg { flex: 0 0 auto; margin-top: 1px; }

/* A label and its explanation in one cell. As bare inline siblings they ran
   together — "Credit cardSBI Card", "\u20b96,000/mo5% of outstanding". */
.a-stack { display: grid; gap: 2px; min-width: 0; }
.a-stack-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* A closed account is history, not an obligation: present but recessive. */
.a-table tbody tr.is-muted-row { opacity: .55; }
.a-table tbody tr.is-muted-row:hover { opacity: 1; }

/* An intro line above the first field of a modal. `.a-muted` carries only a
   top margin, so without this it sat on the label below it. */
.a-modal-intro { margin-bottom: 16px; line-height: 1.5; }

/* ---------- settings toggle switch ---------- */
.a-toggle-grid { display: grid; gap: 10px; }
.a-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.a-toggle-label { font-size: .88rem; }
.a-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; }
.a-toggle input { opacity: 0; width: 0; height: 0; }
.a-toggle-sw { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 12px; }
.a-toggle-sw::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: white; border-radius: 50%; transition: transform .15s; }
.a-toggle input:checked + .a-toggle-sw { background: var(--accent); }
.a-toggle input:checked + .a-toggle-sw::before { transform: translateX(16px); }

/* ---------- lead detail page ---------- */
.a-detail-right { display: grid; gap: 16px; }
.a-detail-section-title { font-weight: var(--aw-semi); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 2px; }
.a-detail-col { min-width: 0; }
.a-detail-col-right { }
.a-tab-strip { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.a-tab-btn { padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; border-radius: 8px 8px 0 0; }
.a-tab-btn:hover { color: var(--ink); background: var(--surface-alt); }
.a-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.a-tab-body { }
.a-consents-cust-row.is-selected { background: var(--accent-bg, #e6f7f7); }
.a-tab-subhead { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 14px 0 8px; }

/* ==========================================================================
   Previously unstyled surfaces
   --------------------------------------------------------------------------
   These classes were being rendered by the page controllers with no rule
   behind any of them, so the markup fell back to bare block layout. The Tasks
   board was the worst of it: five kanban columns stacked vertically down the
   page, task cards with no card, and a drawer that laid itself out inline
   instead of over the page. Audit severity was being set as a class and then
   painted no differently from a routine row.
   ========================================================================== */

/* ---------- kanban ---------- */
.a-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 1fr);
  gap: 14px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 6px;
}
.a-kanban-col {
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding: 12px;
  min-width: 0;
}
.a-col-head { margin-bottom: 10px; }
.a-col-title-row {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--at-base); font-weight: var(--aw-semi); letter-spacing: -.008em;
}
.a-col-count {
  color: var(--ink-3); font-weight: var(--aw-regular);
  font-variant-numeric: tabular-nums;
}
.a-kanban-body { display: grid; gap: 8px; min-height: 40px; }
.a-kanban-empty { font-size: var(--at-small); color: var(--ink-3); padding: 10px 2px; }

.a-task-card {
  display: grid; gap: 7px; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--surface);
  border: 0; border-radius: var(--r-sm);
  padding: 12px;
  box-shadow: var(--ael-1);
  transition: box-shadow var(--adur) var(--aease), transform var(--adur) var(--aease);
}
.a-task-card:hover { box-shadow: var(--ael-2); }
.a-task-card:active { transform: scale(.99); }
/* Urgency is a left edge, not a red card — a board of red cards is a board
   with no priorities. */
.a-task-card.is-urgent { box-shadow: var(--ael-1), inset 3px 0 0 var(--danger); }
.a-task-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-task-type { font-size: var(--at-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--atrack-micro); }
.a-task-due { margin-left: auto; font-size: var(--at-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.a-task-due.is-overdue { color: var(--danger); font-weight: var(--aw-medium); }
.a-task-title strong { font-size: var(--at-base); font-weight: var(--aw-medium); line-height: 1.35; letter-spacing: -.008em; }
.a-task-desc {
  font-size: var(--at-small); color: var(--ink-2); line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.a-task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--at-small); color: var(--ink-3); }
.a-task-link { color: var(--primary); font-variant-numeric: tabular-nums; }

/* ---------- slide-over drawer ---------- */
.a-drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .28);
  animation: a-fade var(--adur) var(--aease);
}
.a-drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: var(--ael-3);
  animation: a-slide-in .26s var(--aease);
}
.a-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.a-drawer-head strong { font-size: var(--at-lead); font-weight: var(--aw-semi); letter-spacing: -.012em; }
.a-drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
@keyframes a-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes a-slide-in { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- odds and ends the controllers ask for ---------- */
/* Reference numbers, PANs, hashes — anything you read character by character. */
.a-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .95em; letter-spacing: -.01em;
}
.a-unassigned { color: var(--ink-3); font-style: normal; }
.a-filter-label { font-size: var(--at-small); font-weight: var(--aw-medium); color: var(--ink-2); }
.a-pager-info { font-size: var(--at-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.a-row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.a-stage-label { min-width: 0; }
/* Removable filter chips. The × is a button inside the chip, so it needs its
   own hit area rather than inheriting the chip's padding. */
.a-chip-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a-chip-x {
  display: grid; place-items: center; width: 16px; height: 16px;
  margin: 0 -3px 0 1px; border-radius: 50%; color: inherit; opacity: .55;
  transition: opacity var(--adur) var(--aease), background var(--adur) var(--aease);
}
.a-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
/* The SSE tail's "connected" indicator. */
.a-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
}
.a-policy-col { display: grid; gap: 4px; min-width: 0; }
.a-rule-summary { font-size: var(--at-small); color: var(--ink-2); line-height: 1.45; }
/* Retention dry-run / sweep output: machine output, so it keeps its own
   monospace block rather than being reflowed as prose. */
.a-sweep-result { display: grid; gap: 8px; }
.a-sweep-output {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--at-small); line-height: 1.55;
  background: var(--surface-alt); border-radius: var(--r-sm);
  padding: 12px 14px; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* ==========================================================================
   AMS — the journey strip
   Where a case actually is, as one row. Status is carried by shape (a mark)
   as well as colour, so it survives a monochrome screen and colour-blind
   readers; the SLA flag is a separate mark again rather than a third hue.
   ========================================================================== */
.a-journey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
.a-journey-step {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  text-align: left;
}
.a-journey-step:hover { border-color: var(--ink-2); }
.a-journey-step:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.a-journey-mark { font-size: 11px; line-height: 1; }
.a-journey-label { white-space: nowrap; }

.a-journey-step.is-success { border-color: var(--success); color: var(--success); }
.a-journey-step.is-info    { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.a-journey-step.is-danger  { border-color: var(--danger); color: var(--danger); }
.a-journey-step.is-muted   { color: var(--ink-2); }
.a-journey-step.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.a-journey-step.is-optional { border-style: dashed; }

.a-journey-sla {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--aw-semi);
  line-height: 15px;
  text-align: center;
  color: #fff;
}
.a-journey-sla-breached { background: var(--danger); }
.a-journey-sla-at_risk  { background: var(--warning); }

.a-journey-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.a-journey-stage {
  font-weight: 600;
  text-transform: capitalize;
}
.a-journey-next { color: var(--ink-2); font-size: 13px; }
.a-journey-blocker {
  margin: 0 0 12px;
  padding: 8px 11px;
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}
.a-pending-with {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
}

/* one step, in its modal */
.a-step-fields {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 13.5px;
}
.a-step-fields dt { color: var(--ink-2); }
.a-step-fields dd { margin: 0; text-transform: capitalize; }
.a-step-blocker {
  margin: 0 0 14px;
  padding: 8px 11px;
  border-left: 3px solid var(--danger);
  background: var(--danger-bg);
  font-size: 13px;
  border-radius: 0 4px 4px 0;
}
.a-step-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- AMS: the five figures, lender queries, the disbursal gate ---------- */
/* Side by side, because an approved figure alone says nothing about what was
   sanctioned against it. */
.a-terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.a-term {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.a-term.is-empty { opacity: .55; border-style: dashed; }
.a-term-kind {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.a-term-amount { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.a-term-meta { font-size: .75rem; color: var(--ink-2); }
.a-term-status {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
}

.a-query-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-query {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warning);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.a-query.is-overdue { border-left-color: var(--danger); }
.a-query-text { margin: 0; font-size: .875rem; }
.a-query-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: .78rem;
  color: var(--ink-2);
}

.a-prereq { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.a-prereq li {
  display: grid;
  grid-template-columns: 18px minmax(140px, auto) 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: .84rem;
}
.a-prereq-mark { font-weight: var(--aw-semi); text-align: center; }
.a-prereq-pass .a-prereq-mark { color: var(--success); }
.a-prereq-fail .a-prereq-mark { color: var(--danger); }
.a-prereq-not_required { color: var(--ink-3); }
.a-prereq-not_required .a-prereq-mark { color: var(--ink-3); }
.a-prereq-detail { color: var(--ink-2); font-size: .8rem; }

/* ---- AMS: workflow configuration and the exception queue --------------- */
.a-wf-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.a-wf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.a-wf-seq {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--primary);
  font-size: .72rem;
  font-weight: var(--aw-semi);
  line-height: 22px;
  text-align: center;
  flex: none;
}
.a-wf-label { flex: 1 1 140px; font-weight: 500; font-size: .875rem; }
.a-wf-row input[type="number"] { width: 84px; }
.a-wf-req { display: flex; align-items: center; gap: 5px; font-size: .8rem; white-space: nowrap; }
.a-wf-add { margin-bottom: 14px; }

.a-exc-list { display: grid; gap: 10px; }
.a-exc {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 6px 6px 0;
  background: var(--surface);
  display: grid;
  gap: 8px;
  justify-items: start;
}
.a-exc-danger { border-left-color: var(--danger); }
.a-exc-warn   { border-left-color: var(--warning); }
.a-exc-info   { border-left-color: var(--primary); }
.a-exc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--ink-2);
}
.a-exc-type { font-weight: 600; text-transform: capitalize; color: var(--ink); }
.a-exc-code { font-size: .72rem; }
.a-exc-desc { margin: 0; font-size: .875rem; }
.a-exc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--ink-2);
}
.a-exc-resolution {
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--success-bg);
  color: var(--ink-2);
  font-size: .8rem;
}

/* ---- AMS: the sticky application header --------------------------------
   Requirement 7 — the ten things that must never leave the screen. Sticky
   rather than merely at the top: an operator on the documents tab still has
   to be able to answer "whose is this and what is it waiting on" without
   scrolling back up. Facts only; no control sits in a bar that is always
   under the cursor. */
.a-detail-head-v2 {
  position: sticky;
  top: 0;
  z-index: 40;                 /* above page content, far below the modal
                                  layers documented at the top of this file */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* Deliberately no negative margin to bleed into the shell's padding: the
     first attempt used `margin: 0 calc(-1 * 20px)` against a padding token
     that does not exist, so the bar sat wider than its container and the
     page scrolled sideways at 430px and 768px. Staying inside the content
     box costs a few pixels of background at the edges and costs nothing
     else. */
  padding: 12px 0;
}
.a-detail-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  width: 100%;
}
.a-detail-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.a-detail-fact-k {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.a-detail-fact-v {
  font-size: .82rem;
  color: var(--ink);
  text-transform: capitalize;
  /* Long values truncate rather than wrapping the whole bar onto a third
     row — the point of the strip is that it stays small. */
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-detail-fact-wide { flex: 1 1 220px; }
.a-detail-fact-wide .a-detail-fact-v { max-width: none; }
.a-detail-fact-wide.is-blocked .a-detail-fact-k,
.a-detail-fact-wide.is-blocked .a-detail-fact-v { color: var(--danger); }

@media (max-width: 720px) {
  /* Nothing sticks on a phone: the bar would eat a third of the viewport. */
  .a-detail-head-v2 { position: static; }
  .a-detail-ops { gap: 6px 14px; }
}

/* ---- AMS: document versions ------------------------------------------- */
.a-doc-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.a-chip-muted { background: var(--surface-alt); color: var(--ink-2); }
.a-doc-reason {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  color: var(--danger);
}

/* ---- AMS list: the lead pipeline's row, plus a select box ---------------
   Every other class on that list is the LMS's own (css/leads.css) and is
   deliberately not restated here. What AMS has and the pipeline does not is
   bulk moves and "export just these", which need one checkbox per row —
   so this is the same grid with one narrow column in front of it, at each
   of the pipeline's own breakpoints. */
.lp-row.a-row-sel {
  grid-template-columns:
    30px minmax(140px, 1fr) minmax(170px, 1.4fr) minmax(130px, 1.1fr)
    minmax(120px, 1fr) minmax(110px, .9fr) 90px;
}
.lp-col-check { display: flex; align-items: center; justify-content: center; }

@media (max-width: 1100px) {
  .lp-row.a-row-sel {
    grid-template-columns:
      26px minmax(110px, 1fr) minmax(140px, 1.4fr) minmax(105px, 1.1fr)
      minmax(100px, 1fr) minmax(95px, .9fr) 80px;
  }
}

@media (max-width: 800px) {
  /* .lp-col-detail and .lp-col-assign are hidden at this width by
     leads.css, so the row is down to four columns and a checkbox. */
  .lp-row.a-row-sel {
    grid-template-columns: 26px minmax(95px, 1fr) minmax(120px, 1.5fr) minmax(90px, 1fr) 80px;
  }
}

/* --- Credit panel: what the report says ---------------------------------
   The definition grid used by the assessment, profile and portfolio blocks.
   Lives here rather than in leads.css because the credit panel mounts on
   thirteen admin pages and admin/lead.html does not load leads.css — the
   `lp-dl` grid it would otherwise have reused is invisible on half of them. */
.a-credit-dl {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 5px 14px;
  font-size: .82rem;
  margin: 8px 0 14px;
}
.a-credit-dl dt { color: var(--ink-3); }
.a-credit-dl dd { color: var(--ink); font-weight: var(--aw-semi); margin: 0; }
/* A figure that should stop someone: 90+ DPD, arrears, a write-off, a FOIR
   past every lender's cap. */
.a-credit-dl dd.is-bad { color: var(--danger); }
@media (max-width: 640px) {
  .a-credit-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .a-credit-dl dt { font-size: .72rem; }
  .a-credit-dl dd { margin: 0 0 6px; }
}
.a-credit-sub {
  font-size: .8rem;
  font-weight: var(--aw-semi);
  margin: 18px 0 2px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}

/* The assessment grade. Deliberately not the green/amber/red of the CIBIL
   risk band: that band decides whether a lead may walk on, this grade is a
   blend of five components and decides nothing on its own. Same palette
   would invite reading one as the other. */
/* The lead score's band. Green / Amber / Red are the grades the scorecard
   returns (services/credit_metrics.GRADES); the four older names are kept
   because a grade stored on a lead before the bands were renamed still
   draws, rather than falling through to an unstyled chip. */
.a-grade-green      { background: var(--success-bg); color: var(--success); }
.a-grade-amber      { background: var(--warning-bg); color: var(--warning); }
.a-grade-red        { background: var(--danger-bg); color: var(--danger); }
.a-grade-strong     { background: var(--success-bg); color: var(--success); }
.a-grade-acceptable { background: var(--surface-alt); color: var(--ink-2); }
.a-grade-marginal   { background: var(--warning-bg); color: var(--warning); }
.a-grade-weak       { background: var(--danger-bg); color: var(--danger); }

/* A closed account is dimmed as historical — unless it carries the evidence
   the report was pulled for. A written-off account is closed by definition,
   so muting it to 55% hides the worst finding in the file behind the
   styling for "this no longer matters". */
.a-table tbody tr.is-muted-row:has(.a-chip-danger) { opacity: 1; }

/* ---- the Lead Engine journey -------------------------------------------
   The founder's eight product steps, above the raw stage strip. Deliberately
   quiet: it orients, it is not the control — moving a lead is still the stage
   picker's job. Wraps rather than scrolls, because eight labels do not fit a
   phone in one line and a strip you have to drag sideways is one nobody
   reads. */
.a-journey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.a-journey-step {
  font-size: 11.5px;
  line-height: 1;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  white-space: nowrap;
}
.a-journey-step.is-done {
  color: var(--text);
  border-color: var(--border-strong, var(--border));
}
.a-journey-step.is-here {
  color: #fff;
  background: var(--brand, #0C6E6E);
  border-color: var(--brand, #0C6E6E);
  font-weight: 600;
}

/* A finding count that opens to its reasons. Twenty-nine lenders times five
   lists is not a table anybody reads flat, and a bare count is not something
   anybody can act on. */
.a-finding-count {
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  list-style: none;
}
.a-finding-count::-webkit-details-marker { display: none; }
.a-finding-count::after { content: ' \25BE'; color: var(--muted); }
.a-finding-list {
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--muted);
  max-width: 46ch;
}
.a-finding-list li { margin-bottom: 4px; }

/* Where the lead's form was filled in, by IP — a quiet evidence line under
   the number, beside the pincode the person chose to type. */
.a-geo-line { font-size: var(--at-small); margin-top: 2px; }
.a-geo-locate { color: var(--primary); text-decoration: none; }
.a-geo-locate:hover { text-decoration: underline; }