/**
 * Life360 Design Language — "Horizon" (Phase 81, 2026-10-14)
 * Pension & Life Insurance Administration Platform
 *
 * Overlay on the shared Velzon shell (bootstrap.min.css / app.min.css). The
 * shared files are not edited; this file remaps their --vz-* variables, so
 * Life360 now deliberately diverges from MediSure360 in two places: a deeper
 * primary (#695eef -> #5a4fe0, for a clearer AA margin with white text) and
 * DM Sans body text. Headings stay Outfit. Buttons use the "Custodian" style
 * (square corners, condensed uppercase labels).
 *
 * Spec: DESIGN_MIGRATION_PLAN.md, design/life360-design-directions.html.
 * Dark values arrive in Phase 82; until then the --vz-* remap below is
 * limited to the light theme so Velzon's own dark mode is left intact.
 */
/* Tokens (--l360-*) live in assets/css/l360-tokens.css, loaded just before this file. */

/* Velzon / Bootstrap variables -> Horizon (light theme only until Phase 82) */
:root:not([data-bs-theme="dark"]) {
  --vz-primary: #5a4fe0;
  --vz-primary-rgb: 90, 79, 224;
  --vz-primary-text-emphasis: #4a40c8;
  --vz-primary-bg-subtle: #ecebfd;
  --vz-primary-border-subtle: #c9c4f7;
  --vz-link-color: #5a4fe0;
  --vz-link-color-rgb: 90, 79, 224;
  --vz-link-hover-color: #4a40c8;
  --vz-link-hover-color-rgb: 74, 64, 200;
  --vz-body-bg: #f5f5fb;
  --vz-body-bg-rgb: 245, 245, 251;
  --vz-body-color: #2c2b42;
  --vz-emphasis-color: #17163a;
  --vz-heading-color: #17163a;
  --vz-secondary-color: #6a6886;
  --vz-secondary-color-rgb: 106, 104, 134;
  --vz-border-color: #e3e2f0;
}
:root {
  --vz-font-sans-serif: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Global ---- */
body {
  background-color: var(--l360-bg) !important;
  font-family: var(--l360-font-body);
  color: var(--l360-text);
}

.text-muted { color: var(--l360-slate) !important; }

/* Tabular numerals for codes and amounts */
.l360-num {
  font-family: var(--l360-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Sidebar / App Menu ----
   Intentionally no background/color overrides here: the shared
   app.min.css stock light sidebar renders as-is, matching MediSure360. */
.app-menu { border-right: 1px solid var(--l360-border); }
.app-menu #scrollbar { scrollbar-width: thin; }
.navbar-menu .navbar-nav .nav-link { font-size: 0.84rem; }
.navbar-menu .navbar-nav .nav-sm .nav-link { font-size: 0.78rem; }

.l360-brand-text {
  color: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.l360-brand-tagline {
  color: var(--l360-gold);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sidebar active item (Phase 84): primary text on a soft primary fill */
[data-sidebar="light"] .app-menu {
  --vz-vertical-menu-item-active-color: var(--l360-primary);
  --vz-vertical-menu-item-active-bg: var(--l360-primary-soft);
  --vz-vertical-menu-sub-item-active-color: var(--l360-primary);
}
[data-sidebar="light"] .navbar-menu .navbar-nav .nav-sm .nav-link.active {
  background-color: var(--l360-primary-soft);
  border-radius: var(--l360-radius-btn);
  font-weight: 600;
}

/* ---- Topbar ----
   Phase 84: the stock dark top bar (navy-blue #132649) is retinted to the
   Horizon indigo-navy so it sits with the primary instead of against it. */
/* :root[...] to match app.min.css's own specificity; this file loads later, so it wins */
:root[data-topbar="dark"] {
  --vz-header-bg: #17163a;
  --vz-header-border: #17163a;
  --vz-header-item-bg: #25235a;
  --vz-header-item-sub-color: #b9b6e0;
  --vz-topbar-user-bg: #25235a;
}

/* ---- Cards ---- */
.l360-card {
  border: 1px solid var(--l360-border);
  border-radius: var(--l360-radius);
  box-shadow: var(--l360-shadow);
  background: var(--l360-surface);
  transition: box-shadow 0.2s ease;
}

.l360-card:hover {
  box-shadow: var(--l360-shadow-hover);
}

.l360-card .card-header {
  background: var(--l360-surface);
  color: var(--l360-navy);
  border: none;
  border-bottom: 1px solid var(--l360-border);
  border-radius: var(--l360-radius) var(--l360-radius) 0 0;
  font-weight: 600;
}

.l360-card .card-header i {
  color: var(--l360-gold);
}

/* Detail-page section cards get a slim primary accent (matches MediSure360's msr-section-card) */
.l360-section-card {
  border-left: 3px solid rgba(var(--l360-primary-rgb), 0.35);
}

/* ---- KPI Stat Cards ---- */
.l360-stat-card {
  border: 1px solid var(--l360-border);
  border-radius: var(--l360-radius);
  box-shadow: var(--l360-shadow);
  border-left: 4px solid var(--l360-gold);
  overflow: hidden;
  position: relative;
}

.l360-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(var(--l360-primary-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.l360-stat-card .stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--l360-slate);
}

.l360-stat-card .stat-value {
  font-family: var(--l360-font-display);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--l360-text);
  line-height: 1.2;
}

.l360-stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--l360-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--l360-gold-muted);
  color: var(--l360-gold);
  font-size: 1.4rem;
}

.l360-stat-card.l360-stat-teal { border-left-color: var(--l360-teal); }
.l360-stat-card.l360-stat-teal .stat-icon { background: var(--l360-accent-soft); color: var(--l360-teal); }

.l360-stat-card.l360-stat-navy { border-left-color: var(--l360-navy); }
.l360-stat-card.l360-stat-navy .stat-icon { background: var(--l360-gold-muted); color: var(--l360-navy); }

/* New MediSure360-style KPI (label/value/meta/icon), independent of the border-accent stat-card above */
.l360-kpi .l360-kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--l360-slate);
  margin-bottom: 0.35rem;
}
.l360-kpi .l360-kpi-value {
  font-family: var(--l360-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--l360-text);
  line-height: 1.15;
  margin-bottom: 0;
}
.l360-kpi .l360-kpi-meta {
  font-size: 0.7rem;
  color: var(--l360-slate);
  margin-bottom: 0;
  margin-top: 0.5rem;
}
.l360-kpi .l360-kpi-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  background: var(--l360-gold-muted);
  color: var(--l360-gold);
}
.l360-kpi.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: var(--l360-shadow-hover);
}

/* ---- Buttons ---- (legacy l360-btn-* helpers, now the same as .btn-primary) */
.l360-btn-primary,
.l360-btn-gold {
  background: var(--l360-primary);
  border: 1px solid var(--l360-primary);
  color: #fff;
  border-radius: var(--l360-radius-btn);
  font-family: var(--l360-font-button);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
  box-shadow: none;
  transition: background-color 0.15s ease;
}
.l360-btn-primary:hover,
.l360-btn-gold:hover {
  background: var(--l360-primary-hover);
  border-color: var(--l360-primary-hover);
  color: #fff;
}

/* ---- Badges (legacy solid-fill helpers — kept for existing pages) ---- */
.l360-badge-active,
.badge.l360-active { background-color: var(--l360-success) !important; }
.l360-badge-pending,
.badge.l360-pending { background-color: var(--l360-warning) !important; color: #fff !important; }
.l360-badge-inactive,
.badge.l360-inactive { background-color: var(--l360-danger) !important; }
.l360-badge-review,
.badge.l360-review { background-color: var(--l360-info) !important; }
.l360-badge-closed,
.badge.l360-closed { background-color: var(--l360-slate) !important; }

/* New MediSure360-style dot-indicator pill badges (preferred for new pages) —
   Active/Approved/Paid -> success · Pending/Vetting -> warning ·
   Cancelled/Rejected -> danger · Suspended/On hold -> info · Draft/Inactive -> neutral */
.l360-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.34rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
}
.l360-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}
.l360-badge-success  { color: var(--l360-success); background-color: var(--l360-ok-soft); }
.l360-badge-warning  { color: var(--l360-warning); background-color: var(--l360-warn-soft); }
.l360-badge-danger   { color: var(--l360-danger);  background-color: var(--l360-bad-soft); }
.l360-badge-info     { color: var(--l360-info);    background-color: var(--l360-info-soft); }
.l360-badge-neutral  { color: var(--l360-slate);   background-color: var(--l360-border-soft); }
.l360-badge-primary  { color: var(--l360-gold);    background-color: var(--l360-gold-muted); }
/* Workflow statuses from the Horizon spec: posted to GL, money held in suspense */
.l360-badge-posted   { color: var(--l360-ok);      background-color: var(--l360-ok-soft); }
.l360-badge-suspense { color: var(--l360-accent);  background-color: var(--l360-accent-soft); }

/* Velzon status badges inside pages and modals -> Horizon soft chips (Phase 84).
   Covers the common "badge bg-warning text-dark" / "bg-light text-dark" pairs,
   so text-dark on badges no longer needs touching page by page. The top bar
   notification counter is outside .page-content and keeps its solid fill. */
.page-content .badge.bg-success, .modal .badge.bg-success { background-color: var(--l360-ok-soft) !important; color: var(--l360-ok) !important; }
.page-content .badge.bg-warning, .modal .badge.bg-warning { background-color: var(--l360-warn-soft) !important; color: var(--l360-warn) !important; }
.page-content .badge.bg-danger,  .modal .badge.bg-danger  { background-color: var(--l360-bad-soft) !important;  color: var(--l360-bad) !important; }
.page-content .badge.bg-info,    .modal .badge.bg-info    { background-color: var(--l360-info-soft) !important; color: var(--l360-info) !important; }
.page-content .badge.bg-primary, .modal .badge.bg-primary { background-color: var(--l360-primary-soft) !important; color: var(--l360-primary) !important; }
.page-content .badge.bg-secondary, .modal .badge.bg-secondary,
.page-content .badge.bg-light,   .modal .badge.bg-light,
.page-content .badge.bg-white,   .modal .badge.bg-white   { background-color: var(--l360-border-soft) !important; color: var(--l360-text-soft) !important; }
.page-content .badge.bg-dark,    .modal .badge.bg-dark    { background-color: var(--l360-navy) !important; color: #fff !important; }
.page-content .badge, .modal .badge { font-weight: 500; }

/* text-dark outside badges follows the ink token, so it survives the dark theme */
.text-dark:not(.badge) { color: var(--l360-ink) !important; }

/* ---- Page header ---- */
.l360-page-header {
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-left: 4px solid var(--l360-gold);
  border-radius: var(--l360-radius);
  padding: 1.25rem 1.5rem;
  color: var(--l360-text);
  margin-bottom: 1.5rem;
  box-shadow: var(--l360-shadow);
}

/* Header with actions inside (2026-10-15). 132 pages lay out
     <div class="d-flex …"><div class="l360-page-header flex-grow-1 …">title</div><div>buttons</div></div>
   (and the same row without flex-grow-1 on the report pages) which drew the
   title card with loose, stretched buttons beside it. The row
   itself now becomes the header card, so the buttons sit inside it, centred,
   at their natural height. No page markup changes; browsers without :has()
   keep the previous look. */
.page-content .d-flex:has(> .l360-page-header):has(> :not(.l360-page-header)) {
  background: var(--l360-surface);
  border: 1px solid var(--l360-border);
  border-left: 4px solid var(--l360-primary);
  border-radius: var(--l360-radius);
  box-shadow: var(--l360-shadow);
  padding: 1rem 1.25rem 1rem 1.5rem;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem !important;
}
.page-content .d-flex:has(> .l360-page-header):has(> :not(.l360-page-header)) > .l360-page-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 !important;
  min-width: min(100%, 16rem);
}
.page-content .d-flex:has(> .l360-page-header):has(> :not(.l360-page-header)) > :not(.l360-page-header) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 !important;
}

.l360-page-header h4 {
  margin: 0;
  font-weight: 700;
  color: var(--l360-navy);
}

.l360-page-header p { color: var(--l360-slate); }

.l360-page-header .breadcrumb-item,
.l360-page-header .breadcrumb-item a {
  color: var(--l360-slate);
}

.l360-page-header .breadcrumb-item.active {
  color: var(--l360-gold);
}

/* ---- Forms ---- */
.l360-form-control:focus,
.form-control.l360-focus:focus {
  border-color: var(--l360-gold);
  box-shadow: 0 0 0 0.2rem rgba(var(--l360-primary-rgb), 0.15);
}

.form-label.l360-required::after {
  content: " *";
  color: var(--l360-danger);
}

/* Grouped form sections */
.l360-form-section {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}
.l360-form-section + .l360-form-section {
  border-top: 1px dashed var(--l360-border);
  margin-top: 1rem;
}
.l360-form-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--l360-text);
  margin-bottom: 1rem;
}
.l360-form-section-title i {
  color: var(--l360-gold);
  margin-right: 0.4rem;
  vertical-align: -1px;
}

/* Repeatable-row sub-cards (beneficiaries, contribution lines, etc.) */
.l360-repeat-card {
  background-color: var(--l360-bg-hover);
  border: 1px dashed var(--l360-border);
  border-radius: var(--l360-radius);
  padding: 1rem 1.25rem;
  box-shadow: none;
}
.l360-repeat-card .l360-repeat-row {
  background-color: var(--l360-surface);
  border: 1px solid var(--l360-border-soft);
  border-radius: var(--l360-radius-sm);
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Selectable radio-cards (e.g. member type, scheme type pickers) */
.l360-choice-card {
  border: 1px solid var(--l360-border);
  border-radius: var(--l360-radius);
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background-color: var(--l360-surface);
  height: 100%;
}
.l360-choice-card.active {
  border-color: var(--l360-gold);
  background-color: rgba(var(--l360-primary-rgb), 0.04);
  box-shadow: 0 0 0 1px var(--l360-gold);
}
.l360-choice-card .l360-choice-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--l360-text);
  margin-bottom: 0.15rem;
}
.l360-choice-card .l360-choice-sub {
  font-size: 0.72rem;
  color: var(--l360-slate);
  margin-bottom: 0;
}

/* ---- Auth pages ----
   login.php now owns its own scoped styles (matching MediSure360's
   split-panel design); these helpers are kept for any other auth-style
   page (mfa_setup/mfa_verify/forgot_password) that still references them. */
.l360-auth-bg {
  background: var(--l360-bg);
  min-height: 100vh;
}

.l360-auth-panel {
  background: var(--l360-surface);
  border-radius: var(--l360-radius);
  box-shadow: var(--l360-shadow-md);
  overflow: hidden;
}

.l360-auth-brand {
  background: var(--l360-navy);
  color: #fff;
  position: relative;
}

.l360-auth-brand::before {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(var(--l360-primary-rgb), 0.18);
}

.l360-auth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.l360-auth-feature i {
  color: var(--l360-gold-light);
  font-size: 1.25rem;
}

/* ---- Footer ---- */
.l360-footer {
  border-top: 1px solid var(--l360-border);
  background: var(--l360-surface);
  color: var(--l360-slate);
  font-size: 0.85rem;
}

.l360-footer strong {
  color: var(--l360-navy);
}

/* ---- Tables ---- */
.l360-table thead th {
  background: var(--l360-bg-head);
  color: var(--l360-slate);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--l360-border);
  padding: 0.65rem 1rem;
  white-space: nowrap;
}

.l360-table tbody td {
  padding: 0.7rem 1rem;
  border-color: var(--l360-border-soft);
  vertical-align: middle;
  font-size: 0.8125rem;
  color: var(--l360-text-soft);
}

.l360-table tbody tr:hover {
  background: var(--l360-bg-hover);
}

.l360-table tbody tr:last-child td { border-bottom: 0; }

.l360-table tfoot td {
  background-color: var(--l360-bg-head);
  font-weight: 600;
  color: var(--l360-text);
  border-top: 1px solid var(--l360-border);
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
}

.l360-table .l360-entity {
  font-weight: 500;
  color: var(--l360-text);
  text-decoration: none;
}
.l360-table a.l360-entity:hover { color: var(--l360-gold); }
.l360-table .l360-entity-sub {
  font-size: 0.7rem;
  color: var(--l360-slate);
  margin-top: 1px;
}

/* ---- Finance figures (Phase 83, borrowed from "Custodian") ----
   Add .l360-figures to a finance or reconciliation table. Right-aligned
   cells (.text-end, or .num) are set in DM Mono with tabular numbers so
   columns of KES amounts line up digit for digit. Buttons inside those
   cells keep their own face. */
.l360-figures td.text-end,
.l360-figures th.text-end,
.l360-figures td.num,
.l360-figures th.num,
.l360-figures .l360-num {
  font-family: var(--l360-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}
.l360-figures th.text-end,
.l360-figures th.num { font-family: inherit; }
.l360-figures td.text-end,
.l360-figures td.num { font-size: 0.78rem; letter-spacing: -0.01em; }
.l360-figures tfoot td,
.l360-figures tr.l360-total td {
  font-weight: 600;
  color: var(--l360-ink);
  background-color: var(--l360-bg-head);
  border-top: 1px solid var(--l360-border);
}

/* Compact density: users switch it on in finance modules (density switch
   inserted by assets/js/l360-density.js; choice kept in the browser). */
html[data-l360-density="compact"] .l360-figures > :not(caption) > * > * {
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
html[data-l360-density="compact"] .l360-figures tbody td { font-size: 0.75rem; }
html[data-l360-density="compact"] .l360-figures td.text-end,
html[data-l360-density="compact"] .l360-figures td.num { font-size: 0.74rem; }
html[data-l360-density="compact"] .l360-figures thead th { font-size: 0.65rem; }
html[data-l360-density="compact"] .l360-figures .btn-sm { --vz-btn-padding-y: 0.15rem; }
html[data-l360-density="compact"] .l360-figures .l360-badge { padding: 0.22rem 0.55rem; }
html[data-l360-density="compact"] .l360-figures .l360-entity-sub { display: inline; margin-left: 0.4rem; }

.l360-density-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--l360-border-soft);
  font-size: 0.72rem;
  color: var(--l360-slate);
}
.l360-density-toggle { display: inline-flex; border: 1px solid var(--l360-border); border-radius: var(--l360-radius-btn); overflow: hidden; }
.l360-density-toggle button {
  font-family: var(--l360-font-button);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 0;
  background: var(--l360-surface);
  color: var(--l360-text-soft);
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}
.l360-density-toggle button + button { border-left: 1px solid var(--l360-border); }
.l360-density-toggle button[aria-pressed="true"] { background: var(--l360-primary-soft); color: var(--l360-primary); }
.l360-density-toggle button:focus-visible { outline: 2px solid var(--l360-primary); outline-offset: -2px; }

/* ---- Tabs (record detail pages) — underline style ---- */
.l360-tabs.nav-tabs {
  border-bottom: 1px solid var(--l360-border);
  gap: 0.25rem;
}
.l360-tabs.nav-tabs .nav-link {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--l360-slate);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.7rem 1rem;
  margin-bottom: -1px;
}
.l360-tabs.nav-tabs .nav-link:hover { color: var(--l360-text); }
.l360-tabs.nav-tabs .nav-link.active {
  color: var(--l360-gold);
  border-bottom-color: var(--l360-gold);
  font-weight: 600;
}
.l360-tabs .l360-tab-count {
  font-size: 0.65rem;
  font-weight: 600;
  background-color: var(--l360-border-soft);
  color: var(--l360-slate);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  margin-left: 0.35rem;
}
.l360-tabs .nav-link.active .l360-tab-count {
  background-color: var(--l360-gold-muted);
  color: var(--l360-gold);
}

/* ---- Profile header, avatars, key-value grids, timeline, documents ---- */
.l360-profile-banner {
  background: linear-gradient(135deg, rgba(var(--l360-primary-rgb), 0.08), var(--l360-info-soft));
  border-bottom: 1px solid var(--l360-border);
  border-top-left-radius: calc(var(--l360-radius) - 1px);
  border-top-right-radius: calc(var(--l360-radius) - 1px);
  padding: 1.25rem;
}

.l360-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--l360-gold-muted);
  color: var(--l360-gold);
  font-weight: 600;
  flex-shrink: 0;
}
.l360-avatar-sm { width: 2rem; height: 2rem; font-size: 0.7rem; }
.l360-avatar-lg { width: 4rem; height: 4rem; font-size: 1.25rem; }

.l360-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  margin-bottom: 0;
}
.l360-dl .l360-dl-item dt {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--l360-slate);
  margin-bottom: 0.2rem;
}
.l360-dl .l360-dl-item dd {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--l360-text);
  margin-bottom: 0;
}

.l360-stat-strip { display: flex; flex-wrap: wrap; gap: 2rem; }
.l360-stat-strip .l360-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--l360-slate);
  margin-bottom: 0.15rem;
}
.l360-stat-strip .l360-stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--l360-text);
  margin-bottom: 0;
}

/* Vertical timeline (claim / benefit / policy history) */
.l360-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--l360-border);
}
.l360-timeline li { position: relative; padding: 0 0 1.25rem 1rem; }
.l360-timeline li:last-child { padding-bottom: 0.25rem; }
.l360-timeline li::before {
  content: "";
  position: absolute;
  left: -1.45rem;
  top: 0.25rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--l360-gold);
  border: 2px solid var(--l360-surface);
  box-shadow: 0 0 0 2px rgba(var(--l360-primary-rgb), 0.35);
}
.l360-timeline li.l360-timeline-muted::before {
  background-color: var(--l360-slate-light);
  box-shadow: 0 0 0 2px var(--l360-border);
}
.l360-timeline .l360-timeline-title { font-size: 0.8125rem; font-weight: 600; color: var(--l360-text); margin-bottom: 0.1rem; }
.l360-timeline .l360-timeline-meta { font-size: 0.72rem; color: var(--l360-slate); margin-bottom: 0; }

/* Document tiles */
.l360-doc-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--l360-border);
  border-radius: var(--l360-radius);
  padding: 0.85rem 1rem;
  background-color: var(--l360-surface);
}
.l360-doc-card .l360-doc-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background-color: var(--l360-gold-muted);
  color: var(--l360-gold);
  flex-shrink: 0;
}
.l360-doc-card .l360-doc-name { font-size: 0.8125rem; font-weight: 500; color: var(--l360-text); margin-bottom: 0.1rem; }
.l360-doc-card .l360-doc-meta { font-size: 0.7rem; color: var(--l360-slate); margin-bottom: 0; }

/* Progress bars (benefit utilization, portfolio allocation, etc.) */
.l360-progress { height: 6px; border-radius: 999px; background-color: var(--l360-border-soft); }
.l360-progress .progress-bar { border-radius: 999px; }

/* Search-result / lookup highlight card (e.g. member search on contribution add) */
.l360-lookup-result {
  border: 1px solid rgba(var(--l360-primary-rgb), 0.4);
  background-color: rgba(var(--l360-primary-rgb), 0.04);
  border-radius: var(--l360-radius);
  padding: 0.85rem 1rem;
}

/* Toolbar search box inside card headers */
.l360-toolbar .search-box .form-control {
  background-color: var(--l360-bg-head);
  border-color: var(--l360-bg-head);
  padding-left: 2.2rem;
}
.l360-toolbar .search-box { position: relative; }
.l360-toolbar .search-box .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--l360-slate);
}

/* Pagination */
.l360-pagination .page-link { font-size: 0.78rem; border-color: var(--l360-border); color: var(--l360-text-soft); }
.l360-pagination .page-item.active .page-link { background-color: var(--l360-gold); border-color: var(--l360-gold); }

/* Dropdown menus */
.dropdown-menu {
  border: 1px solid var(--l360-border);
  box-shadow: 0 8px 24px rgba(23, 22, 58, 0.12);
  border-radius: var(--l360-radius-sm);
  font-size: 0.8125rem;
}

/* ---- Setup banner ---- */
.l360-setup-banner {
  background: var(--l360-gold-muted);
  border-left: 4px solid var(--l360-gold);
  border-radius: var(--l360-radius-sm);
}

/* Benefit workflow stepper */
.l360-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.l360-stepper::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--l360-border);
  z-index: 0;
}
.l360-stepper li {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}
.l360-stepper .step-dot {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background: var(--l360-border);
  color: var(--l360-slate);
  margin: 0 auto 8px;
  font-weight: 600;
  font-size: 0.85rem;
}
.l360-stepper li.done .step-dot {
  background: var(--l360-success);
  color: #fff;
}
.l360-stepper li.current .step-dot {
  background: var(--l360-gold);
  color: #fff;
  box-shadow: 0 0 0 4px var(--l360-gold-muted);
}
.l360-stepper .step-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--l360-slate);
}
.l360-stepper li.done .step-label,
.l360-stepper li.current .step-label {
  color: var(--l360-navy);
}
.l360-stepper .step-meta {
  font-size: 0.7rem;
  color: var(--l360-slate-light);
  margin-top: 2px;
}

/* ---- AI Insights Panel ---- */
.l360-insight-item {
  border-left: 4px solid var(--l360-border);
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 0 var(--l360-radius-sm) var(--l360-radius-sm) 0;
  background: var(--l360-bg);
}
.l360-insight-item.risk     { border-left-color: var(--l360-danger);  background: var(--l360-bad-soft); }
.l360-insight-item.alert    { border-left-color: var(--l360-warning); background: var(--l360-warn-soft); }
.l360-insight-item.opportunity { border-left-color: var(--l360-success); background: var(--l360-ok-soft); }
.l360-insight-item.trend    { border-left-color: var(--l360-teal);   background: var(--l360-accent-soft); }
.l360-insight-item.info     { border-left-color: var(--l360-gold);   background: var(--l360-gold-muted); }
.l360-insight-title { font-weight: 600; font-size: 0.85rem; color: var(--l360-navy); margin-bottom: 3px; }
.l360-insight-body  { font-size: 0.8rem; color: var(--l360-slate); line-height: 1.5; }
.l360-insight-priority-high   { font-size: 0.7rem; font-weight: 700; color: var(--l360-danger); }
.l360-insight-priority-medium { font-size: 0.7rem; font-weight: 700; color: var(--l360-warning); }
.l360-insight-priority-low    { font-size: 0.7rem; font-weight: 600; color: var(--l360-slate); }

/* ---- Module dashboard stat cards (secondary colors) ---- */
.l360-stat-card.l360-stat-gold   { background: var(--l360-gold); color: #fff; }
.l360-stat-card.l360-stat-gold .stat-label,
.l360-stat-card.l360-stat-gold .stat-value { color: #fff; }
.l360-stat-card.l360-stat-green  { background: linear-gradient(135deg, var(--l360-success) 0%, #2fae95 100%); color: #fff; }
.l360-stat-card.l360-stat-green .stat-label,
.l360-stat-card.l360-stat-green .stat-value { color: #fff; }
.l360-stat-card.l360-stat-danger { background: linear-gradient(135deg, var(--l360-danger) 0%, #e2704d 100%); color: #fff; }
.l360-stat-card.l360-stat-danger .stat-label,
.l360-stat-card.l360-stat-danger .stat-value { color: #fff; }
.l360-stat-card.l360-stat-slate  { background: linear-gradient(135deg, var(--l360-text-soft) 0%, var(--l360-slate) 100%); color: #fff; }
.l360-stat-card.l360-stat-slate .stat-label,
.l360-stat-card.l360-stat-slate .stat-value { color: #fff; }

/* ---- Enhanced form controls ---- */
.form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--l360-text-soft);
}
.form-control,
.form-select {
  border-color: var(--l360-border);
  border-radius: var(--l360-radius-sm);
  color: var(--l360-text);
}
.form-control:focus, .form-select:focus {
  border-color: var(--l360-gold);
  box-shadow: 0 0 0 0.2rem rgba(var(--l360-primary-rgb), 0.15);
}
.form-text { font-size: 0.72rem; color: var(--l360-slate); }
.input-group-text {
  background: var(--l360-bg-head);
  border-color: var(--l360-border);
  color: var(--l360-navy);
}

/* ---- Buttons (shell-wide) — "Custodian" style ----
   Square corners, condensed uppercase labels, no shadows. Top bar and
   sidebar icon buttons keep the stock shell look. */
.btn {
  --vz-btn-font-family: var(--l360-font-button);
  --vz-btn-font-weight: 600;
  --vz-btn-font-size: 0.8125rem;
  --vz-btn-padding-x: 1rem;
  --vz-btn-border-radius: var(--l360-radius-btn);
  --vz-btn-box-shadow: none;
  --vz-btn-disabled-opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: none;
}
.btn-sm, .btn-group-sm > .btn { --vz-btn-font-size: 0.72rem; --vz-btn-padding-x: 0.7rem; --vz-btn-border-radius: var(--l360-radius-btn); }
.btn-lg, .btn-group-lg > .btn { --vz-btn-font-size: 0.9rem; --vz-btn-border-radius: var(--l360-radius-btn); }
.topbar .btn, .app-menu .btn, .navbar-header .btn {
  font-family: inherit; text-transform: none; letter-spacing: normal;
}

.btn-primary {
  --vz-btn-bg: var(--l360-primary);
  --vz-btn-border-color: var(--l360-primary);
  --vz-btn-hover-bg: var(--l360-primary-hover);
  --vz-btn-hover-border-color: var(--l360-primary-hover);
  --vz-btn-active-bg: var(--l360-primary-active);
  --vz-btn-active-border-color: var(--l360-primary-active);
  --vz-btn-disabled-bg: var(--l360-primary);
  --vz-btn-disabled-border-color: var(--l360-primary);
  --vz-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}
.btn-outline-primary {
  --vz-btn-color: var(--l360-primary);
  --vz-btn-border-color: var(--l360-primary);
  --vz-btn-hover-bg: var(--l360-primary);
  --vz-btn-hover-border-color: var(--l360-primary);
  --vz-btn-active-bg: var(--l360-primary-hover);
  --vz-btn-active-border-color: var(--l360-primary-hover);
  --vz-btn-focus-shadow-rgb: var(--l360-primary-rgb);
}
.btn-success {
  --vz-btn-bg: var(--l360-ok);
  --vz-btn-border-color: var(--l360-ok);
  --vz-btn-hover-bg: #0a6a51;
  --vz-btn-hover-border-color: #0a6a51;
  --vz-btn-active-bg: #085a45;
  --vz-btn-active-border-color: #085a45;
  --vz-btn-disabled-bg: var(--l360-ok);
  --vz-btn-disabled-border-color: var(--l360-ok);
}
/* Secondary action (Velzon "light"): outlined surface */
.btn-light {
  --vz-btn-color: var(--l360-ink);
  --vz-btn-bg: var(--l360-surface);
  --vz-btn-border-color: var(--l360-border);
  --vz-btn-hover-color: var(--l360-ink);
  --vz-btn-hover-bg: var(--l360-raised);
  --vz-btn-hover-border-color: var(--l360-slate-light);
  --vz-btn-active-color: var(--l360-ink);
  --vz-btn-active-bg: var(--l360-border-soft);
  --vz-btn-active-border-color: var(--l360-slate-light);
}
/* Destructive actions are outlined, so they never compete with the primary */
.btn-danger, .btn-outline-danger {
  --vz-btn-color: var(--l360-bad);
  --vz-btn-bg: transparent;
  --vz-btn-border-color: var(--l360-bad);
  --vz-btn-hover-color: #fff;
  --vz-btn-hover-bg: var(--l360-bad);
  --vz-btn-hover-border-color: var(--l360-bad);
  --vz-btn-active-color: #fff;
  --vz-btn-active-bg: var(--l360-bad);
  --vz-btn-active-border-color: var(--l360-bad);
  --vz-btn-disabled-color: var(--l360-bad);
  --vz-btn-disabled-bg: transparent;
  --vz-btn-disabled-border-color: var(--l360-bad);
}
.btn-link {
  --vz-btn-color: var(--l360-primary);
  --vz-btn-hover-color: var(--l360-primary-hover);
  --vz-btn-padding-x: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-icon.btn-sm { width: 1.9rem; height: 1.9rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Report pages (life360_report_header in includes/life360_report_catalog.php) */
.l360-report-crumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--l360-slate); margin-bottom: 0.2rem; }
.l360-report-crumb a { color: var(--l360-primary); text-decoration: none; }
.l360-report-crumb a:hover { text-decoration: underline; }
.l360-report-crumb span { color: var(--l360-slate-light); }
.l360-report-head .l360-page-header h4 i { color: var(--l360-primary); margin-right: 0.45rem; font-weight: 400; }
.l360-report-head .l360-page-header p { color: var(--l360-slate); font-size: 0.82rem; margin-top: 0.15rem; }
.l360-report-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.l360-statement-help { font-size: 0.8rem; color: var(--l360-text-soft); border-top: 1px dashed var(--l360-border); padding-top: 0.75rem; }
.l360-statement-help summary { cursor: pointer; color: var(--l360-primary); font-weight: 600; width: fit-content; }
.l360-statement-help ul { margin: 0.5rem 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.l360-statement-help p { margin: 0; color: var(--l360-slate); }

/* Totals rows on screen tables */
tr.l360-total > td { font-weight: 600; color: var(--l360-ink); background-color: var(--l360-bg-head) !important; border-top: 1px solid var(--l360-border); }
tr.l360-total-strong > td { background-color: var(--l360-primary-soft) !important; }

/* ==== Reports Centre (reports.php) ==== */
.l360-rc-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.l360-rc-search { position: relative; flex: 1 1 18rem; max-width: 28rem; }
.l360-rc-search i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--l360-slate); }
.l360-rc-search input { padding-left: 2.25rem; height: 40px; }
.l360-rc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.l360-rc-chips button { font-family: var(--l360-font-button); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--l360-border); background: var(--l360-surface); color: var(--l360-text-soft); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; }
.l360-rc-chips button[aria-pressed="true"] { background: var(--l360-primary); border-color: var(--l360-primary); color: #fff; }
.l360-rc-chips button:focus-visible { outline: 2px solid var(--l360-primary); outline-offset: 2px; }
.l360-rc-section { margin-bottom: 1.75rem; }
.l360-rc-section > h2 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--l360-font-display); font-size: 1rem; font-weight: 600; color: var(--l360-ink); margin: 0 0 0.75rem; }
.l360-rc-section > h2 i { color: var(--l360-primary); }
.l360-rc-section > h2 small { font-family: var(--l360-font-mono); font-size: 0.7rem; color: var(--l360-slate); background: var(--l360-border-soft); border-radius: 999px; padding: 0.05rem 0.5rem; }
.l360-rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.85rem; }
.l360-rc-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0.85rem; align-items: start; padding: 1rem 1.1rem;
  background: var(--l360-surface); border: 1px solid var(--l360-border); border-radius: var(--l360-radius); color: inherit; text-decoration: none;
  box-shadow: var(--l360-shadow); transition: border-color 0.15s, background-color 0.15s; }
.l360-rc-card:hover { border-color: var(--l360-primary); background: var(--l360-raised); color: inherit; }
.l360-rc-card:focus-visible { outline: 2px solid var(--l360-primary); outline-offset: 2px; }
.l360-rc-ico { width: 2.5rem; height: 2.5rem; border-radius: var(--l360-radius-sm); display: grid; place-items: center; font-size: 1.2rem; background: var(--l360-primary-soft); color: var(--l360-primary); }
.l360-rc-card b { display: block; font-family: var(--l360-font-display); font-size: 0.92rem; font-weight: 600; color: var(--l360-ink); line-height: 1.25; }
.l360-rc-card p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--l360-slate); line-height: 1.4; }
.l360-rc-tag { display: inline-block; margin-top: 0.45rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--l360-info); background: var(--l360-info-soft); border-radius: 999px; padding: 0.1rem 0.5rem; margin-right: 0.25rem; }
.l360-rc-go { color: var(--l360-slate-light); font-size: 1.1rem; align-self: center; transition: transform 0.15s, color 0.15s; }
.l360-rc-card:hover .l360-rc-go { color: var(--l360-primary); transform: translateX(2px); }
.l360-rc-card.is-tool .l360-rc-ico { background: var(--l360-accent-soft); color: var(--l360-accent); }
.l360-rc-empty { color: var(--l360-slate); font-size: 0.85rem; padding: 1rem 0; }
@media (prefers-reduced-motion: reduce) { .l360-rc-card, .l360-rc-go { transition: none; } }

/* ==== Dashboard: "Scheme pulse" (2026-10-15) ====
   Layout: header, tiles beside a "needs a decision" queue, then two- and
   three-column rows of charts. Everything takes colour from the tokens. */
.l360d { display: grid; gap: 1.25rem; }
.l360d-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; }
.l360d-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--l360-primary); }
.l360d-title { font-family: var(--l360-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; color: var(--l360-ink); margin: 0.15rem 0 0; letter-spacing: -0.01em; }
.l360d-asat { font-size: 0.78rem; color: var(--l360-slate); text-align: right; display: grid; }
.l360d-asat span { font-size: 0.7rem; color: var(--l360-slate-light); }

.l360d-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.l360d-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.l360d-tile { position: relative; display: grid; align-content: start; gap: 0.2rem; min-height: 8.25rem; padding: 1rem 1.1rem 2.6rem;
  background: var(--l360-surface); border: 1px solid var(--l360-border); border-radius: var(--l360-radius); color: inherit; text-decoration: none;
  box-shadow: var(--l360-shadow); overflow: hidden; transition: border-color .15s, transform .15s; }
.l360d-tile:hover { border-color: var(--l360-primary); color: inherit; }
.l360d-tile .k { font-size: 0.72rem; font-weight: 600; color: var(--l360-slate); }
.l360d-tile .v { font-family: var(--l360-font-display); font-size: 1.65rem; font-weight: 600; color: var(--l360-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.l360d-tile .v small { font-size: 0.75rem; font-weight: 500; color: var(--l360-slate); }
.l360d-tile .s { font-size: 0.72rem; color: var(--l360-slate); }
.l360d-tile .l360d-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2.4rem; }
.l360d-tile .l360d-spark .p { display: none; } /* stretched to tile width, a dot would distort */
.l360d-spark .l { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.l360d-spark .a { opacity: 0.12; }
.l360d-spark.tone-primary .l, .l360d-spark.tone-primary .p { stroke: var(--l360-primary); fill-opacity: 1; }
.l360d-spark.tone-primary .a, .l360d-spark.tone-primary .p { fill: var(--l360-primary); }
.l360d-spark.tone-accent .l { stroke: var(--l360-accent); }
.l360d-spark.tone-accent .a, .l360d-spark.tone-accent .p { fill: var(--l360-accent); }
.l360d-spark.tone-bad .l { stroke: var(--l360-bad); }
.l360d-spark.tone-bad .a, .l360d-spark.tone-bad .p { fill: var(--l360-bad); }
.l360d-spark .l { fill: none !important; }
.l360d-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.l360d-delta.up { color: var(--l360-ok); }
.l360d-delta.down { color: var(--l360-bad); }

.l360d-card { background: var(--l360-surface); border: 1px solid var(--l360-border); border-radius: var(--l360-radius); box-shadow: var(--l360-shadow); padding: 1rem 1.15rem 1.1rem; min-width: 0; }
.l360d-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.85rem; }
.l360d-card-h h2 { font-family: var(--l360-font-display); font-size: 1rem; font-weight: 600; color: var(--l360-ink); margin: 0; }
.l360d-hint { font-size: 0.72rem; color: var(--l360-slate); }
a.l360d-hint { color: var(--l360-primary); }
.l360d-hint .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 2px 0 6px; vertical-align: 0; }
.l360d-hint .sw.m { background: var(--l360-primary); }
.l360d-hint .sw.f { background: var(--l360-accent); }
.l360d-empty { color: var(--l360-slate); font-size: 0.82rem; margin: 0.5rem 0; }
.l360d-foot { color: var(--l360-slate); font-size: 0.72rem; margin: 0.5rem 0 0; }
.l360d-chart { position: relative; }
.l360d-chart.h-220 { height: 220px; } .l360d-chart.h-280 { height: 280px; } .l360d-chart.h-300 { height: 300px; }

.l360d-row { display: grid; gap: 1.25rem; }
.l360d-row.cols-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.l360d-row.cols-6-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l360d-row.cols-4-4-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l360d-row:empty { display: none; }

/* Needs a decision */
.l360d-attn { padding-bottom: 0.5rem; }
.l360d-count { font-family: var(--l360-font-mono); font-size: 0.75rem; background: var(--l360-primary-soft); color: var(--l360-primary); border-radius: 999px; padding: 0.05rem 0.55rem; }
.l360d-attn ul { list-style: none; margin: 0 -1.15rem; padding: 0; }
.l360d-attn li a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.6rem 1.15rem;
  border-top: 1px solid var(--l360-border-soft); color: var(--l360-text); text-decoration: none; box-shadow: inset 3px 0 0 transparent; }
.l360d-attn li a:hover { background: var(--l360-bg-hover); }
.l360d-attn li.tone-bad a { box-shadow: inset 3px 0 0 var(--l360-bad); }
.l360d-attn li.tone-warn a { box-shadow: inset 3px 0 0 var(--l360-warn); }
.l360d-attn .n { font-family: var(--l360-font-mono); font-size: 1.15rem; font-weight: 500; text-align: right; color: var(--l360-ink); }
.l360d-attn li.tone-bad .n { color: var(--l360-bad); }
.l360d-attn li.tone-warn .n { color: var(--l360-warn); }
.l360d-attn .t { font-size: 0.8rem; font-weight: 500; line-height: 1.3; }
.l360d-attn .t small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--l360-slate); }
.l360d-attn i { color: var(--l360-slate-light); font-size: 1.1rem; }
.l360d-clear { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.8rem; color: var(--l360-slate); padding: 0.5rem 0 0.75rem; }
.l360d-clear i { font-size: 1.5rem; color: var(--l360-ok); }
.l360d-clear b { color: var(--l360-ink); }

/* Allocation bullets */
.l360d-bullets { display: grid; gap: 0.85rem; }
.l360d-bullets .bl, .l360d-funding .fl { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--l360-text); }
.l360d-bullets .bl b, .l360d-funding .fl b { font-family: var(--l360-font-mono); font-weight: 500; color: var(--l360-ink); }
.l360d-bullets .bt, .l360d-funding .ft { position: relative; height: 8px; margin: 0.3rem 0 0.25rem; background: var(--l360-border-soft); border-radius: 2px; }
.l360d-bullets .bt i, .l360d-funding .ft i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--l360-primary); }
.l360d-bullets .b.near .bt i { background: var(--l360-warn); }
.l360d-bullets .b.over .bt i { background: var(--l360-bad); }
.l360d-bullets .bt em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--l360-ink); border-radius: 1px; }
.l360d-bullets .bs, .l360d-funding .fs { font-size: 0.7rem; color: var(--l360-slate); }
.l360d-bullets .b.over .bs b { color: var(--l360-bad); }

/* Funding level */
.l360d-funding { display: grid; gap: 0.85rem; }
.l360d-funding .ft em { position: absolute; top: -4px; bottom: -4px; left: 66.67%; width: 2px; margin-left: -1px; background: var(--l360-ink); }
.l360d-funding .fr.tone-ok .ft i { background: var(--l360-ok); }
.l360d-funding .fr.tone-warn .ft i { background: var(--l360-warn); }
.l360d-funding .fr.tone-bad .ft i { background: var(--l360-bad); }
.l360d-funding .fr.tone-bad .fl b { color: var(--l360-bad); }
.l360d-scale { display: flex; justify-content: space-between; font-family: var(--l360-font-mono); font-size: 0.65rem; color: var(--l360-slate-light); }
.l360d-scale span:nth-child(2) { margin-left: 33%; }

/* Retirement wave summary */
.l360d-wave-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.l360d-wave-sum div { background: var(--l360-bg-head); border-radius: var(--l360-radius-sm); padding: 0.6rem 0.75rem; display: grid; }
.l360d-wave-sum b { font-family: var(--l360-font-display); font-size: 1.35rem; font-weight: 600; color: var(--l360-ink); line-height: 1.1; }
.l360d-wave-sum span { font-size: 0.72rem; color: var(--l360-slate); }
.l360d-wave-sum .warn { background: var(--l360-warn-soft); }
.l360d-wave-sum .warn b { color: var(--l360-warn); }

/* Fund small multiples */
.l360d-funds { list-style: none; margin: 0; padding: 0; display: grid; }
.l360d-funds li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--l360-border-soft); }
.l360d-funds li:first-child { border-top: 0; padding-top: 0; }
.l360d-funds .fn { display: grid; min-width: 0; }
.l360d-funds .fn b { font-family: var(--l360-font-mono); font-size: 0.75rem; font-weight: 500; color: var(--l360-ink); }
.l360d-funds .fn span { font-size: 0.72rem; color: var(--l360-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l360d-funds .l360d-spark { width: 90px; height: 28px; }
.l360d-funds .fv { display: grid; text-align: right; font-size: 0.72rem; }
.l360d-funds .fv b { font-family: var(--l360-font-mono); font-weight: 500; color: var(--l360-ink); font-size: 0.8rem; }

/* Claims heat grid */
.l360d-heat { display: grid; gap: 3px; font-size: 0.72rem; }
.l360d-heat > div { display: grid; grid-template-columns: 7.2rem repeat(4, minmax(0, 1fr)); gap: 3px; }
.l360d-heat .hh span { font-size: 0.65rem; color: var(--l360-slate); text-align: center; font-family: var(--l360-font-mono); }
.l360d-heat [role="rowheader"] { color: var(--l360-text); align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l360d-heat [role="cell"] { height: 2rem; display: grid; place-items: center; border-radius: 3px; font-family: var(--l360-font-mono); font-weight: 500;
  background: color-mix(in srgb, var(--l360-primary) calc(var(--o, 0) * 100%), var(--l360-border-soft)); color: var(--l360-ink); }
.l360d-heat [role="cell"].late { background: color-mix(in srgb, var(--l360-bad) calc(var(--o, 0) * 100%), var(--l360-bad-soft)); }
.l360d-heat [role="cell"][style*="--o:0."] { color: var(--l360-ink); }
.l360d-heat [role="cell"][style*="--o:0.6"], .l360d-heat [role="cell"][style*="--o:0.7"], .l360d-heat [role="cell"][style*="--o:0.8"],
.l360d-heat [role="cell"][style*="--o:0.9"], .l360d-heat [role="cell"][style*="--o:1"] { color: #fff; }

/* Activity feed */
.l360d-feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.l360d-feed li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--l360-border-soft); font-size: 0.78rem; }
.l360d-feed time { font-family: var(--l360-font-mono); font-size: 0.7rem; color: var(--l360-slate); }
.l360d-feed b { font-weight: 600; color: var(--l360-ink); }
.l360d-feed .m { color: var(--l360-slate); }

@media (max-width: 1199.98px) {
  .l360d-top, .l360d-row.cols-8-4 { grid-template-columns: minmax(0, 1fr); }
  .l360d-row.cols-4-4-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .l360d-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l360d-row.cols-6-6, .l360d-row.cols-4-4-4, .l360d-feed { grid-template-columns: minmax(0, 1fr); }
  .l360d-asat { text-align: left; }
}
@media (max-width: 479.98px) { .l360d-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .l360d-tile { transition: none; } }

/* ---- Print ---- */
@media print {
  .app-menu, .topbar, .footer, #ai-insights-card { display: none !important; }
  .main-content { margin: 0 !important; }
  .l360-card { box-shadow: none; border: 1px solid #ddd; }
}