/* ============================================================
   Sahakar Shakti
   Brand system + layout
   ============================================================ */

:root {
  --aubergine: #3D2C5E;
  --lavender:  #A78BDA;
  --amethyst:  #7B5FAF;
  --midnight:  #2C1F45;
  --mist:      #EEE8F8;
  --canvas:    #FFFFFF;
  --paper:     #FFFFFF;
  --stone:     #888780;
  --ink:       #2C2C2A;
  --green:     #1A5F4A;
  --coral:     #C94F3D;
  --ochre:     #D4A94A;
  /* Pastel set for the home Portfolio donut — lighter colour load on the page */
  --portfolio-current: #BBA7DD;
  --portfolio-overdue: #E8D29A;
  --portfolio-npa:     #E5A99C;

  --border:    #E5E0EE;
  --border-soft: #F0EBF5;

  --shadow-sm: 0 1px 2px rgba(60, 44, 94, 0.05);
  --shadow-md: 0 4px 12px rgba(60, 44, 94, 0.08);
  --shadow-lg: 0 8px 24px rgba(60, 44, 94, 0.12);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;

  --sidebar-w: 240px;
  --sidebar-collapsed-w: 64px;
  --header-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: var(--aubergine); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--canvas) 0%, var(--mist) 100%);
  padding: 20px;
}
.login-card {
  background: var(--paper);
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo img { max-width: 200px; height: auto; }
.login-title {
  font-size: 28px; font-weight: 700; color: var(--aubergine);
  text-align: center; margin-bottom: 4px;
}
.login-subtitle {
  font-size: 13px; color: var(--stone);
  text-align: center; margin-bottom: 32px;
}
.login-hint {
  margin-top: 16px; padding: 10px 12px;
  background: var(--mist); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--amethyst);
  text-align: center;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: #F8F5FF;
  color: var(--ink);
  border-right: 1px solid var(--border);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease;
}
.sidebar.collapsed {
  width: var(--sidebar-collapsed-w);
}
.sidebar-logo {
  position: relative;
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; min-height: 84px;
}
.sidebar.collapsed .sidebar-logo { min-height: 44px; padding: 8px 0; justify-content: center; }
.sidebar.collapsed .sidebar-hamburger { position: static; }
.sidebar-logo-img {
  display: block; max-width: 160px; max-height: 80px;
  width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply;
}
.sidebar-logo-img-sm { display: none; }
.sidebar-hamburger {
  position: absolute; top: 6px; left: 6px;
}

.sidebar-brand-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--stone);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}

.sidebar-hamburger {
  background: none; border: none; cursor: pointer;
  color: var(--stone); padding: 4px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  position: absolute; top: 6px; left: 6px;
}
.sidebar-hamburger:hover { background: var(--mist); color: var(--aubergine); }

.nav-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 2px;
  cursor: pointer;
  user-select: none;
}
.nav-section-header:hover .nav-section-label { color: var(--aubergine); }
.nav-section-label {
  font-size: 10px; text-transform: uppercase;
  color: var(--stone); letter-spacing: 0.8px;
  white-space: nowrap; overflow: hidden;
}
.nav-section-arrow {
  font-size: 14px; color: var(--stone);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  flex-shrink: 0; line-height: 1;
}
.nav-section-arrow.is-collapsed { transform: rotate(0deg); }
.nav-section-header-collapsed .nav-section-label,
.nav-section-header-collapsed .nav-section-arrow { opacity: 0; }
.nav-section-items { overflow: hidden; }
.nav-section-items.hidden { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; margin: 1px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink); cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s;
  white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: var(--mist); color: var(--aubergine); }
.nav-item.active {
  background: var(--aubergine);
  color: #fff;
  font-weight: 500;
}
.nav-item.active:hover { background: var(--midnight); }
.nav-item.nav-item-locked {
  /* Position-modules gate (RBA, 2026-05-27). The entry still renders
     so the operator sees what exists in the platform, but the colour
     drops and the cursor flags that clicking won't navigate. */
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--stone);
}

/* Position list — link in the leftmost column. Was an inline
   onmouseover/onmouseout in the legacy code; lifted into CSS so the
   src/ Track A no-inline-handler rule stays clean. */
.ss-pos-link:hover {
  border-bottom-color: var(--aubergine) !important;
}
.nav-item.nav-item-locked:hover {
  background: transparent;
  color: var(--stone);
}
.nav-item .ico {
  width: 18px; text-align: center; flex-shrink: 0; font-size: 15px;
}
.sidebar.collapsed .nav-item {
  justify-content: center; margin: 1px 6px; padding: 10px 0;
}
.sidebar.collapsed .nav-item span:not(.ico) { display: none; }
.nav-spacer { flex: 1; }

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  transition: margin-left 0.2s ease;
}
.main.sidebar-collapsed { margin-left: var(--sidebar-collapsed-w); }

.topbar {
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
  gap: 16px;
}
.topbar .search {
  flex: 1; max-width: 420px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  font-size: 13px;
}
.topbar .search:focus { outline: 2px solid var(--lavender); outline-offset: -2px; background: var(--paper); }
.topbar-spacer { flex: 1; }
.topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  position: relative;
}
.topbar-btn:hover { background: var(--mist); border-color: var(--lavender); }
.topbar-btn .badge-dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--coral); color: white;
  border-radius: 8px; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.topbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.topbar-user:hover { background: var(--mist); }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--aubergine); color: var(--paper);
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
}
.user-meta { font-size: 12px; line-height: 1.3; }
.user-meta .name { font-weight: 500; color: var(--ink); }
.user-meta .role { color: var(--stone); font-size: 11px; }

.sysdate-banner {
  background: var(--ochre); color: var(--midnight);
  padding: 6px 16px; font-size: 12px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.sysdate-banner button {
  padding: 2px 10px; background: rgba(44,31,69,0.1);
  border: 1px solid var(--midnight); border-radius: 4px;
  color: var(--midnight); cursor: pointer; font-size: 11px;
}

.content {
  padding: 24px 28px;
  max-width: 100%;
}
.page-title {
  font-size: 22px; font-weight: 700; color: var(--aubergine);
  margin-bottom: 4px;
}
.page-sub {
  color: var(--stone); font-size: 13px; margin-bottom: 20px;
}
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 16px; flex-wrap: wrap;
}
.page-header .page-title, .page-header .page-sub { margin-bottom: 0; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   CARDS, TILES, KPIS
   ============================================================ */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 12px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.kpi {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--amethyst);
}
.kpi.green::before { background: var(--green); }
.kpi.coral::before { background: var(--coral); }
.kpi.ochre::before { background: var(--ochre); }
.kpi .label {
  font-size: 11px; text-transform: uppercase;
  color: var(--stone); letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.kpi .value {
  font-size: 22px; font-weight: 700; color: var(--aubergine);
}
.kpi .delta {
  font-size: 11px; color: var(--stone); margin-top: 4px;
}
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--coral); }
.kpi .action-link {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: var(--amethyst); font-weight: 500;
  cursor: pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.btn:hover { background: var(--mist); border-color: var(--lavender); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.user-menu-item { padding: 9px 12px; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.user-menu-item:hover { background: var(--mist); }
.drawer-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}
.btn-primary {
  background: var(--aubergine); color: var(--paper); border-color: var(--aubergine);
}
.btn-primary:hover { background: var(--midnight); border-color: var(--midnight); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--mist); }
.btn-danger {
  background: var(--coral); color: var(--paper); border-color: var(--coral);
}
.btn-danger:hover { background: #b0442f; }
.btn-success {
  background: var(--green); color: var(--paper); border-color: var(--green);
}
.btn-success:hover { background: #0f4a38; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 20px; font-size: 14px; }
.btn-block { width: 100%; justify-content: center; }
/* Compact square icon-only button — used next to form inputs for scan /
   fetch / pull actions. No label, tooltip via title=. */
.btn-icon {
  padding: 0;
  width: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon svg { width: 14px; height: 14px; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
  font-size: 12px; font-weight: 500; color: var(--ink);
}
.form-label .req { color: var(--coral); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--lavender);
  box-shadow: 0 0 0 3px rgba(167,139,218,0.15);
}
.form-textarea { resize: vertical; min-height: 70px; }
.form-hint { font-size: 11px; color: var(--stone); margin-top: 2px; }
.form-error { font-size: 11px; color: var(--coral); margin-top: 2px; }
.form-row-action {
  display: flex; gap: 8px;
}
.form-input-with-btn {
  display: flex; gap: 6px;
}
.form-input-with-btn .form-input { flex: 1; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
fieldset legend {
  font-weight: 600; color: var(--aubergine);
  padding: 0 8px; font-size: 13px;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-wrap.overflow { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data thead th {
  background: var(--mist);
  color: var(--aubergine);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
table.data tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
table.data tbody tr:hover { background: var(--canvas); cursor: pointer; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data .td-num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .td-actions { text-align: right; white-space: nowrap; }

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--stone);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state .msg { margin-bottom: 16px; font-size: 14px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--mist);
  color: var(--aubergine);
  white-space: nowrap;
}
.badge-green { background: #DDEDE7; color: var(--green); }
.badge-coral { background: #F9DDD7; color: var(--coral); }
.badge-ochre { background: #F5E8CC; color: #8B6A1E; }
.badge-stone { background: #EAE9E5; color: var(--stone); }
.badge-lavender { background: var(--mist); color: var(--amethyst); }
.badge-aubergine { background: var(--aubergine); color: var(--paper); }

/* ============================================================
   FILTERS & LIST CONTROLS
   ============================================================ */
.list-controls {
  display: flex; gap: 10px; margin-bottom: 14px;
  flex-wrap: wrap; align-items: center;
}
.list-controls .search-box {
  flex: 1; min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--paper);
}
.list-controls select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13px;
  min-width: 140px;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--mist);
  color: var(--amethyst);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}
.chip.active { background: var(--aubergine); color: var(--paper); }
.chip-group { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--stone);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
}
.tab:hover { color: var(--aubergine); }
.tab.active {
  color: var(--aubergine);
  border-bottom-color: var(--aubergine);
  font-weight: 600;
}
.tab.disabled, .tab[style*="cursor:not-allowed"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   MODAL & DRAWER
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(44, 31, 69, 0.5);
  z-index: 1000;
  display: grid; place-items: center;
  padding: 20px;
  animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  animation: slideUp 0.2s;
}
.modal.wide { max-width: 920px; }
.modal.xxwide { max-width: 1150px; }
.modal.narrow { max-width: 440px; }

/* SahAI side tray — non-modal Drawer variant. Sits on the right;
   form behind stays interactive (noBackdrop). Width adapts to
   viewport so the lead form (max 820px) stays at least partially
   visible on a 13" laptop. */
.drawer.sahai-tray {
  width: 440px;
  max-width: 92vw;
  background: var(--paper);
  display: flex; flex-direction: column;
}
@media (max-width: 1280px) {
  .drawer.sahai-tray { width: 400px; }
}
@media (max-width: 1100px) {
  .drawer.sahai-tray { width: 360px; }
}
.sahai-welcome {
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--mist), #ece0ff);
  border: 1px solid var(--lavender);
  border-radius: var(--radius);
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.sahai-chat {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px;
}
.sahai-msg {
  font-size: 13px; line-height: 1.5;
  padding: 8px 12px; border-radius: 12px;
  max-width: 92%;
}
.sahai-msg.user  { align-self: flex-end;   background: var(--mist); color: var(--ink); border-bottom-right-radius: 4px; }
.sahai-msg.bot   { align-self: flex-start; background: var(--canvas); color: var(--ink); border-bottom-left-radius: 4px; border: 1px solid var(--border-soft); }
.sahai-msg.note  { align-self: stretch; background: #FFF8E1; color: #7A5C12; font-size: 12px; border: 1px solid #E5D28A; border-radius: 8px; }
.sahai-chips {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.sahai-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--paper); border: 1px solid var(--border-soft);
  border-radius: 8px; font-size: 12px;
}
.sahai-chip .label { color: var(--stone); font-weight: 600; min-width: 110px; flex-shrink: 0; }
.sahai-chip .value { color: var(--ink); flex: 1; min-width: 0; word-break: break-word; }
.sahai-chip .actions { display: flex; gap: 4px; }
.sahai-chip .accept { background: #E0F0E6; color: var(--green); border: 1px solid #A6D8B2; padding: 2px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.sahai-chip .reject { background: #FBE9E7; color: var(--coral); border: 1px solid #F0B8B2; padding: 2px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.sahai-chip.accepted { opacity: 0.65; }
.sahai-chip.accepted .actions { display: none; }
.sahai-chip.accepted .value::after { content: '  ✓ pushed'; color: var(--green); font-size: 10px; font-weight: 600; }
.sahai-chip.rejected { opacity: 0.5; text-decoration: line-through; }
.sahai-input-row {
  border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 8px;
  display: flex; gap: 6px; align-items: flex-end;
}
.sahai-input-row textarea {
  flex: 1; resize: none;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  min-height: 56px; max-height: 140px;
}
.sahai-input-row textarea:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 2px rgba(167,139,255,0.18); }
.sahai-actions-row {
  display: flex; gap: 6px; margin-top: 6px;
}

/* Document viewer — disables the usual "save" affordances. Not
   foolproof (screenshots, dev-tools bypass), but blocks casual
   download. Rendered canvas + context-menu off + drag off +
   selection off. Surrounding keyboard shortcuts are intercepted
   by JS while the modal is open. */
.doc-viewer-stage {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.doc-viewer-stage canvas {
  display: block;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.doc-viewer-stage .doc-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--canvas);
  border-radius: 6px;
}
.doc-viewer-meta {
  font-size: 11px;
  color: var(--stone);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { color: var(--aubergine); font-size: 16px; }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--stone); font-size: 20px;
  width: 28px; height: 28px; border-radius: 4px;
}
.modal-close:hover { background: var(--mist); color: var(--ink); }
.modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--canvas);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(44,31,69,0.4);
  z-index: 990;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100%;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  z-index: 991;
  display: flex; flex-direction: column;
  animation: slideLeft 0.2s;
}
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-header h3 { color: var(--aubergine); font-size: 15px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position: fixed; top: 70px; right: 24px;
  z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 360px;
}
.toast {
  background: var(--paper);
  border-left: 4px solid var(--amethyst);
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: slideInRight 0.2s;
  font-size: 13px;
}
@keyframes slideInRight { from { transform: translateX(120%); } to { transform: translateX(0); } }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--coral); }
.toast.warning { border-left-color: var(--ochre); }
.toast .title { font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.toast .msg { color: var(--stone); font-size: 12px; }

/* ============================================================
   STEPPER / WIZARD
   ============================================================ */
.stepper {
  display: flex; align-items: center;
  margin-bottom: 28px;
  padding: 16px; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.step { display: flex; align-items: center; gap: 10px; flex: 1; }
.step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mist); color: var(--amethyst);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.step.active .step-num { background: var(--aubergine); color: var(--paper); }
.step.done .step-num { background: var(--green); color: var(--paper); }
.step-label { font-size: 12px; color: var(--stone); }
.step.active .step-label { color: var(--aubergine); font-weight: 600; }
.step.done .step-label { color: var(--green); }
.step-line {
  flex: 0 0 24px; height: 2px;
  background: var(--border);
  margin: 0 4px;
}
.step.done + .step-line { background: var(--green); }

/* ============================================================
   CHARTS
   ============================================================ */
.chart-wrap { position: relative; height: 240px; }
.chart-legend {
  display: flex; gap: 16px; font-size: 12px;
  color: var(--stone); margin-top: 10px; flex-wrap: wrap;
}
.chart-legend .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle;
}

/* ============================================================
   PROFILE LAYOUT (split with audit sidebar)
   ============================================================ */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
.profile-main { min-width: 0; }
.profile-aside {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  height: fit-content;
  position: sticky; top: calc(var(--header-h) + 20px);
}
.profile-aside h4 {
  font-size: 12px; text-transform: uppercase;
  color: var(--stone); letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.audit-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
}
.audit-item:last-child { border-bottom: none; }
.audit-item .who { font-weight: 500; color: var(--ink); }
.audit-item .what { color: var(--stone); margin: 2px 0; }
.audit-item .when { font-size: 11px; color: var(--lavender); }

/* Audit trail — minimal inline preview (2 latest entries, no scroll,
   no download). Download is only available in the gated System Audit
   view (Settings → System Audit, restricted to LL / L0 IT). */
.audit-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.audit-header h4 { margin: 0; }
.audit-box {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--canvas); padding: 2px 10px;
  /* No scroll — visible content is capped at 2 rows by the renderer. */
  overflow: hidden;
}
.audit-box.audit-collapsed { /* legacy class kept for backwards compat */ }
.audit-box .audit-item {
  padding: 6px 0; font-size: 11px;
}
.audit-box .audit-item .who  { font-size: 11px; font-weight: 600; }
.audit-box .audit-item .what { font-size: 11px; margin: 1px 0; }
.audit-box .audit-item .when { font-size: 10px; }
.audit-empty {
  font-size: 11px; color: var(--stone); text-align: center; padding: 14px 0;
}
.audit-more-note {
  margin-top: 6px; padding: 4px 2px;
  font-size: 11px; color: var(--stone); font-style: italic;
}
/* Legacy classes — retained as no-ops so any cached HTML doesn't error. */
.audit-toggle {
  margin-top: 6px; padding: 4px 2px;
  background: transparent; border: none;
  color: var(--aubergine); font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(61,44,94,0.3);
  text-underline-offset: 3px;
}
.audit-toggle:hover { text-decoration-color: var(--aubergine); }

.profile-header {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap;
}
.profile-header .name {
  font-size: 20px; font-weight: 700; color: var(--aubergine);
}
.profile-header .meta {
  font-size: 12px; color: var(--stone); margin-top: 4px;
}
.profile-header .meta span { margin-right: 12px; }

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
}
.kv-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.kv-row .k { font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.3px; }
.kv-row .v { color: var(--ink); }

/* ============================================================
   HELPERS
   ============================================================ */
.text-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.text-muted { color: var(--stone); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-coral { color: var(--coral); }
.text-green { color: var(--green); }
.text-amethyst { color: var(--amethyst); }
.flex { display: flex; }
.flex-gap-6 { gap: 6px; }
.flex-gap-10 { gap: 10px; }
.flex-gap-16 { gap: 16px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.w-100 { width: 100%; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* Policy badges */
.policy-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.policy-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.policy-badge.pass { background: #DDEDE7; color: var(--green); }
.policy-badge.fail { background: #F9DDD7; color: var(--coral); }
.policy-badge.skip { background: #EAE9E5; color: var(--stone); }

.notification-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  display: flex; gap: 10px;
}
.notification-item:hover { background: var(--canvas); }
.notification-item.unread { background: var(--mist); }
.notification-item .ico {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mist); color: var(--aubergine);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notification-item .body { font-size: 12.5px; flex: 1; }
.notification-item .body .title { font-weight: 500; color: var(--ink); }
.notification-item .body .msg { color: var(--stone); margin: 2px 0; }
.notification-item .body .when { color: var(--lavender); font-size: 11px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .sidebar { width: var(--sidebar-collapsed-w); padding: 16px 6px; }
  .sidebar-logo .product, .sidebar-logo .company, .nav-section { display: none; }
  .nav-item { justify-content: center; padding: 10px; }
  .nav-item span:not(.ico) { display: none; }
  .main { margin-left: var(--sidebar-collapsed-w); }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-aside { position: static; }
}

/* Hamburger trigger lives in the topbar; only visible at narrow widths
   where the sidebar slides off-screen. */
.topbar-hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--ink); padding: 6px; border-radius: 6px;
  align-items: center; justify-content: center;
  margin-right: 4px;
}
.topbar-hamburger:hover { background: var(--mist); color: var(--aubergine); }

/* Backdrop for the mobile slide-in sidebar — never visible until the
   .app gains .mobile-nav-open at the narrow breakpoint. */
.mobile-nav-backdrop { display: none; }

@media (max-width: 767px) {
  .topbar-hamburger { display: inline-flex; }

  /* Sidebar becomes a slide-in overlay; full label width when open so
     nav items are touch-targets, not icon-only. */
  .sidebar {
    display: flex;
    width: var(--sidebar-w);
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 200;
  }
  .sidebar-logo .product, .sidebar-logo .company, .nav-section { display: block; }
  .sidebar .nav-item { justify-content: flex-start; padding: 10px 14px; }
  .sidebar .nav-item span:not(.ico) { display: inline; }

  .app.mobile-nav-open .sidebar { transform: translateX(0); }

  .mobile-nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .app.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .main { margin-left: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; }
  .topbar .search,
  .topbar-search-wrap { display: none; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* PDF preview area */
.doc-preview {
  background: white;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
  font-family: Georgia, serif;
}
.doc-preview h1 { color: var(--aubergine); margin-bottom: 8px; }
.doc-preview .doc-header {
  border-bottom: 2px solid var(--aubergine);
  padding-bottom: 12px; margin-bottom: 20px;
}

/* ============================================================
   LIFECYCLE STRIP — 3-stage journey chain
   ============================================================ */
.lifecycle-strip {
  display: flex; align-items: stretch;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0;
  margin-bottom: 14px; overflow: hidden;
}
.lcs-stage {
  flex: 1; padding: 10px 16px; min-width: 0;
  border-right: 1px solid var(--border);
  transition: background 0.15s;
}
.lcs-stage:last-child { border-right: none; }
.lcs-stage.current { background: var(--mist); }
.lcs-stage.clickable { cursor: pointer; }
.lcs-stage.clickable:hover { background: var(--mist); }
.lcs-stage.empty { opacity: 0.45; }
.lcs-label {
  font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--stone); margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
.lcs-label .lcs-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--border);
}
.lcs-stage.current .lcs-dot { background: var(--aubergine); }
.lcs-stage.done .lcs-dot    { background: var(--green); }
.lcs-id {
  font-size: 11px; font-weight: 600; font-family: monospace;
  color: var(--ink); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 2px;
}
.lcs-stage.current .lcs-id { color: var(--aubergine); }
.lcs-status { font-size: 10px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcs-arrow {
  display: flex; align-items: center; padding: 0 8px;
  color: var(--border); font-size: 14px; flex-shrink: 0;
  border-right: 1px solid var(--border);
}

/* Lifecycle banners */
.lifecycle-banner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-radius: var(--radius-sm);
  margin-bottom: 14px; font-size: 13px;
  flex-wrap: wrap; gap: 8px;
}
.lifecycle-banner.converted {
  background: #FEF9EC; border-left: 3px solid var(--ochre);
  border: 1px solid #F0D88A; border-left-width: 3px;
}
.lifecycle-banner.booked {
  background: #ECFAF4; border-left: 3px solid var(--green);
  border: 1px solid #9ED4B8; border-left-width: 3px;
}
.lifecycle-banner .lbanner-msg { font-weight: 500; flex: 1; }
.lifecycle-banner .lbanner-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ============================================================
   ACTIVITIES / TIMELINE
   ============================================================ */
.timeline { padding-left: 24px; position: relative; }
.timeline::before {
  content: ''; position: absolute;
  left: 7px; top: 6px; bottom: 0;
  width: 2px; background: var(--border);
}
.timeline-item {
  position: relative; margin-bottom: 12px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 14px;
}
.timeline-item::before {
  content: ''; position: absolute;
  left: -20px; top: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--paper);
  background: var(--amethyst);
}
.timeline-item.type-call::before    { background: var(--green); }
.timeline-item.type-visit::before   { background: var(--aubergine); }
.timeline-item.type-note::before    { background: var(--stone); }
.timeline-item.type-whatsapp::before{ background: #25D366; }
.timeline-item.type-email::before   { background: var(--ochre); }
.ti-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.ti-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--amethyst); }
.ti-time { font-size: 10px; color: var(--stone); }
.ti-summary { font-size: 13px; font-weight: 500; color: var(--ink); }
.ti-detail  { font-size: 12px; color: var(--stone); margin-top: 3px; }
.ti-outcome { display: inline-block; margin-top: 5px; font-size: 11px; padding: 1px 8px; border-radius: 8px; background: var(--mist); color: var(--amethyst); }

/* ============================================================
   READINESS BAR
   ============================================================ */
.readiness-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.readiness-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.readiness-fill.low    { background: var(--coral); }
.readiness-fill.mid    { background: var(--ochre); }
.readiness-fill.high   { background: var(--green); }

/* ============================================================
   DISBURSEMENT READINESS CHECKLIST
   ============================================================ */
.disb-check-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.disb-check-row:last-child { border-bottom: none; }
.disb-check-label { flex: 1; font-size: 13px; }
.disb-check-toggle {
  width: 20px; height: 20px; border-radius: 4px;
  border: 2px solid var(--border); background: var(--paper);
  cursor: pointer; display: grid; place-items: center;
  flex-shrink: 0; font-size: 11px; color: white;
  transition: all 0.15s;
}
.disb-check-toggle.checked { background: var(--green); border-color: var(--green); }

/* Print */
@media print {
  .sidebar, .topbar, .sysdate-banner, .page-header-actions { display: none; }
  .main { margin-left: 0; }
  .content { padding: 0; }
}

/* ============================================================
   MAIN TABS — segmented pill control (primary navigation)
   ============================================================ */
.main-tabs {
  display: flex; gap: 3px;
  background: var(--mist);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 20px;
}
.main-tab {
  flex: 1; text-align: center;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--stone);
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}
.main-tab:hover { color: var(--aubergine); background: rgba(255,255,255,0.55); }
.main-tab.active {
  background: var(--paper);
  color: var(--aubergine);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.main-tab.tab-disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}

/* ============================================================
   SUB-TABS — outlined chip pills (secondary navigation)
   ============================================================ */
.sub-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.sub-tab {
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 12px; font-weight: 500;
  color: var(--stone);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: all 0.15s;
  white-space: nowrap;
  user-select: none;
}
.sub-tab:hover { border-color: var(--lavender); color: var(--aubergine); }
.sub-tab.active {
  background: var(--aubergine);
  color: #fff;
  border-color: var(--aubergine);
}

/* ============================================================
   LEAD PROFILE — tabbed layout
   ============================================================ */
.lead-hero {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lead-hero-name { font-size: 20px; font-weight: 700; color: var(--aubergine); }
.lead-hero-meta { font-size: 12px; color: var(--stone); margin-top: 3px; }
.lead-hero-meta span { margin-right: 14px; }

.lead-kpis {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.lead-kpi-chip {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 12px; flex-shrink: 0;
}
.lead-kpi-chip .lkc-label { color: var(--stone); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }
.lead-kpi-chip .lkc-val { color: var(--ink); font-weight: 600; font-size: 14px; }
.lead-kpi-chip.accent { border-color: var(--aubergine); background: var(--mist); }
.lead-kpi-chip.accent .lkc-val { color: var(--aubergine); }

.lead-tab-content { min-height: 320px; }

.section-header {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.section-header-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--mist); color: var(--aubergine);
  display: grid; place-items: center; font-size: 15px; flex-shrink: 0;
}
.section-header-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.section-header-sub { font-size: 11px; color: var(--stone); margin-top: 1px; }

/* Document rows */
.doc-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--stone);
  padding: 14px 0 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.doc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft); gap: 12px;
}
.doc-row:last-child { border-bottom: none; }
.doc-name { font-size: 13px; flex: 1; }
.doc-status-badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 8px; }
.doc-status-pending { background: #F5E8CC; color: #8B6A1E; }
.doc-status-uploaded { background: #DDEDE7; color: var(--green); }
.doc-status-verified { background: var(--mist); color: var(--amethyst); }

/* Lead summary card (above audit) */
.lead-summary-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 14px;
}
.lead-summary-card .lsc-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--stone); margin-bottom: 10px;
}
.lead-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--border-soft); font-size: 12px;
}
.lead-summary-row:last-child { border-bottom: none; }
.lead-summary-row .lsr-k { color: var(--stone); }
.lead-summary-row .lsr-v { font-weight: 500; color: var(--ink); text-align: right; }

/* Qualification result inline */
.qual-result-bar {
  border-radius: 6px; padding: 10px 14px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ============================================================
   WIZARD UX IMPROVEMENTS
   ============================================================ */
.wiz-progress {
  height: 3px; background: var(--border); border-radius: 2px;
  margin-bottom: 20px; overflow: hidden;
}
.wiz-progress-fill {
  height: 100%; background: var(--aubergine); border-radius: 2px;
  transition: width 0.3s ease;
}

.wiz-section {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
}
.wiz-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--amethyst);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.wiz-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Required-card inline validation + amount-in-words */
.wiz-field-invalid {
  border-color: var(--coral) !important;
  background: #FDF0EE;
}
.wiz-field-invalid:focus {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.15) !important;
}
.wiz-field-err {
  display: none;
  font-size: 11px;
  color: var(--coral);
  margin-top: 4px;
  line-height: 1.4;
}
.wiz-amount-words {
  display: none;
  font-size: 11px;
  color: var(--amethyst);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}

/* Consent status shown as an interactive button-chip. Subtle
   elevation + hover state signal it's actionable (send / re-send
   consent SMS), matching the Product / Verification chips it sits
   beside. */
.wiz-consent-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.12s ease, transform 0.08s ease, filter 0.12s ease;
}
.wiz-consent-btn:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  filter: brightness(0.98);
}
.wiz-consent-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* Universal "editable value" button used in side-panel summary rows.
   One consistent shape and colour for every actionable cell — Status,
   Consent, RM in Lead profile; the same pattern carries over to
   Application and Loan side panels. The inner content can still be a
   state-coloured chip (status badge, consent chip) — the button frame
   itself is uniform so the user can scan and recognise "this is
   editable" everywhere in the app. */
.lsr-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border-radius: 8px;
  background: var(--mist);
  border: 1px solid var(--border);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.lsr-edit-btn:hover {
  background: #E0D5F2;
  border-color: var(--lavender);
  box-shadow: 0 2px 5px rgba(123, 95, 175, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lsr-edit-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.lsr-edit-btn .lsr-edit-pen {
  font-size: 11px;
  color: var(--amethyst);
  opacity: 0.65;
  transition: opacity 0.12s ease;
}
.lsr-edit-btn:hover .lsr-edit-pen { opacity: 1; }
/* Tighten the inner status / consent chip so it nests cleanly inside
   the button frame without doubling up its own border halo. */
.lsr-edit-btn .lsr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

table.table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.table thead th {
  background: var(--mist); color: var(--ink); font-weight: 600;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; white-space: nowrap;
}
table.table tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
table.table tbody tr:last-child td { border-bottom: none; }
table.table tbody tr:hover { background: var(--canvas); }

/* ── Collections module ── */
.coll-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: opacity 0.1s;
}
.coll-alert:hover { opacity: 0.85; }
.coll-alert.coral   { background: #FDF0EE; border-color: var(--coral); color: var(--coral); }
.coll-alert.ochre   { background: #FDF8EC; border-color: var(--ochre); color: #8B6A1E; }

/* Action timeline */
.coll-timeline { padding: 4px 0; }
.coll-tl-item  {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft); position: relative;
}
.coll-tl-item.last { border-bottom: none; }
.coll-tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--mist); display: grid; place-items: center;
  font-size: 14px; flex-shrink: 0; margin-top: 2px;
}
.coll-tl-body { flex: 1; min-width: 0; }
.coll-tl-header {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.coll-tl-type  { font-size: 13px; font-weight: 600; color: var(--ink); }
.coll-tl-date  { font-size: 11px; color: var(--stone); margin-left: auto; white-space: nowrap; }
.coll-tl-notes { font-size: 12px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.coll-tl-followup { font-size: 11px; color: var(--amethyst); margin-top: 3px; }

/* Payment link send channel tiles */
.coll-send-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.coll-send-option:hover { border-color: var(--amethyst); background: var(--mist); }
.coll-send-icon { font-size: 22px; flex-shrink: 0; line-height: 1; margin-top: 1px; }

/* ── Inline field-level verification indicators ── */
/* Green verified state */
.vi-ok {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--green); font-size: 11px; font-weight: 600;
  background: #EDFAF5; border-radius: 20px;
  padding: 2px 8px; white-space: nowrap; cursor: default;
  border: 1px solid #86EFAC; flex-shrink: 0;
}
.vi-label { font-size: 10px; font-weight: 500; }
.vi-data  { font-size: 10px; color: var(--stone); font-weight: 400; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* Failed state */
.vi-fail {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--coral); font-size: 11px; font-weight: 600;
  background: #FDF0EE; border-radius: 20px;
  padding: 2px 8px; border: 1px solid #FCA5A5; flex-shrink: 0;
}

/* Loading */
.vi-loading {
  display: inline-flex; align-items: center;
  padding: 2px 8px; background: var(--mist);
  border-radius: 20px; border: 1px solid var(--border);
}

/* Prerequisite message */
.vi-prereq {
  font-size: 10px; color: var(--stone); font-style: italic; flex-shrink: 0;
}

/* Action buttons — small inline chip style */
.vi-btn {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500; font-family: inherit;
  padding: 3px 9px; border-radius: 20px; cursor: pointer;
  white-space: nowrap; border: 1px solid var(--border);
  background: var(--canvas); color: var(--aubergine);
  transition: border-color 0.1s, background 0.1s;
  flex-shrink: 0;
}
.vi-btn:hover { border-color: var(--amethyst); background: var(--mist); }
.vi-btn:disabled { opacity: 0.5; cursor: default; }

/* Primary variant — for initial validates */
.vi-primary {
  background: var(--aubergine); color: #fff; border-color: var(--aubergine);
}
.vi-primary:hover { background: var(--midnight); border-color: var(--midnight); }

/* ==========================================================================
   Lead Journey Shell — stepped header for create wizard / edit / profile
   ========================================================================== */
.ljs-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px 16px 4px;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  margin: 6px 0 18px 0;
  box-shadow: none;
}
.ljs-step-label { color: var(--stone); }
.ljs-step-meta  { color: var(--stone); }
.ljs-shell .ljs-product { color: var(--ink); font-weight: 600; }
.ljs-shell .ljs-close   { color: var(--stone); }
.ljs-shell .ljs-close:hover { color: var(--ink); }
.ljs-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  /* Room for the active-step halo (box-shadow) so overflow-x:auto
     doesn't clip it on the y-axis. */
  padding: 5px 0;
}
.ljs-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 78px;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
}
.ljs-circle {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  transition: width 0.15s ease, height 0.15s ease;
}
/* Active step — same size as siblings, marked by a lighter-purple halo
   on the circumference so all circles share a baseline and labels stay
   aligned. */
.ljs-step-active .ljs-circle {
  box-shadow: 0 0 0 3px var(--lavender);
}
/* Solid fill from the bottom — height set inline by the renderer */
.ljs-circle-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: height 0.2s ease, background 0.2s ease;
}
.ljs-circle-num {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}
.ljs-step-label {
  font-size: 11px;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  white-space: nowrap;
  margin-top: 2px;
}
.ljs-step-meta {
  font-size: 10px;
  color: var(--stone, #7d7c8e);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ljs-connector {
  flex: 0 1 32px;
  height: 2px;
  margin: 13px 2px 0 2px;
  border-radius: 2px;
  min-width: 18px;
  background: var(--border) !important;
}
.ljs-step-active .ljs-step-label { color: var(--midnight) !important; font-weight: 700 !important; }
.ljs-step-active .ljs-step-meta  { color: var(--midnight); font-weight: 600; }
.ljs-step-label { font-weight: 500; }
.ljs-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ljs-product {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1a1d2e);
}
.ljs-close {
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--stone, #7d7c8e);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ljs-close:hover { color: var(--ink, #1a1d2e); }

/* Step body — large title + blurb + form area, matches the reference design */
.ljs-step-body { padding: 22px 24px; max-width: 1080px; margin: 0 auto; }
.ljs-step-title { font-size: 28px; font-weight: 700; color: var(--ink, #1a1d2e); margin: 0 0 8px 0; line-height: 1.15; }
.ljs-step-blurb { font-size: 14px; color: var(--stone, #7d7c8e); margin: 0 0 24px 0; line-height: 1.5; }

/* Step-scoped wizard — hide cards whose data-step doesn't include the active id.
   The wizard root carries data-active-step="<id>"; each section card carries
   data-step="basics identity entity" (space-separated list of step ids it
   belongs to). Sections without data-step are always visible. */
.wiz-form[data-active-step] [data-step]:not([data-step~=""]) { display: block; }
.wiz-form[data-active-step="basics"]      [data-step]:not([data-step~="basics"])      { display: none; }
.wiz-form[data-active-step="identity"]    [data-step]:not([data-step~="identity"])    { display: none; }
.wiz-form[data-active-step="entity"]      [data-step]:not([data-step~="entity"])      { display: none; }
.wiz-form[data-active-step="income"]      [data-step]:not([data-step~="income"])      { display: none; }
.wiz-form[data-active-step="financials"]  [data-step]:not([data-step~="financials"])  { display: none; }
.wiz-form[data-active-step="property"]    [data-step]:not([data-step~="property"])    { display: none; }
.wiz-form[data-active-step="vehicle"]     [data-step]:not([data-step~="vehicle"])     { display: none; }
.wiz-form[data-active-step="gold"]        [data-step]:not([data-step~="gold"])        { display: none; }
.wiz-form[data-active-step="primarySecurity"] [data-step]:not([data-step~="primarySecurity"]) { display: none; }
.wiz-form[data-active-step="loan"]        [data-step]:not([data-step~="loan"])        { display: none; }
.wiz-form[data-active-step="promoters"]   [data-step]:not([data-step~="promoters"])   { display: none; }
.wiz-form[data-active-step="obligations"] [data-step]:not([data-step~="obligations"]) { display: none; }
.wiz-form[data-active-step="documents"]   [data-step]:not([data-step~="documents"])   { display: none; }
.wiz-form[data-active-step="eligibility"] [data-step]:not([data-step~="eligibility"]) { display: none; }
.wiz-form[data-active-step="remarks"]     [data-step]:not([data-step~="remarks"])     { display: none; }

/* Pass 8 — read-only wizard (Lead Profile sub-tab routes here). Disables
   inputs / chips / dropdowns / file uploads; verify icons stay clickable
   so a stale PAN/Bureau can be re-pulled without entering edit mode
   (consent gate still applies). + Add / × Remove and Save buttons hide
   via JS conditional in their respective renderers. */
.wiz-form.wiz-readonly input,
.wiz-form.wiz-readonly select,
.wiz-form.wiz-readonly textarea {
  pointer-events: none;
  background: var(--canvas);
  opacity: 0.85;
}
/* Chips and pills preserve their natural pressed/unpressed background
   so the selected chip still reads as 'midnight + white text' instead
   of canvas + invisible white text (was the cause of empty-looking Yes
   chip on PSL when selected in read mode). */
.wiz-form.wiz-readonly .ljs-chip,
.wiz-form.wiz-readonly .ljs-pill {
  pointer-events: none;
  opacity: 0.85;
}
.wiz-form.wiz-readonly input[type="file"] { display: none; }
.wiz-form.wiz-readonly .btn-icon[onclick*="_wizFetch"],
.wiz-form.wiz-readonly .btn-icon[onclick*="_leadVerify"],
.wiz-form.wiz-readonly .btn-icon[onclick*="PostSaveFetch"] {
  pointer-events: auto;
  opacity: 1;
}
/* Hide list-action buttons (+ Add / x Remove) for repeatable cards in
   read-only mode. User reads but cannot add or remove entries — must
   enter edit mode first. */
.wiz-form.wiz-readonly button[onclick*="_wizCoappAdd"],
.wiz-form.wiz-readonly button[onclick*="_wizCoappRemove"],
.wiz-form.wiz-readonly button[onclick*="_wizPromoterAdd"],
.wiz-form.wiz-readonly button[onclick*="_wizPromoterRemove"],
.wiz-form.wiz-readonly button[onclick*="_wizCollateralAdd"],
.wiz-form.wiz-readonly button[onclick*="_wizCollateralRemove"],
.wiz-form.wiz-readonly button[onclick*="_wizPrimarySecurityAdd"],
.wiz-form.wiz-readonly button[onclick*="_wizPrimarySecurityRemove"],
.wiz-form.wiz-readonly button[onclick*="_wizGoldRowAdd"],
.wiz-form.wiz-readonly button[onclick*="_wizGoldRemove"],
.wiz-form.wiz-readonly button[onclick*="_wizDocAdd"] {
  display: none;
}
/* Visibility helpers — wiz-edit-hint shows ONLY in readonly mode (text
   guiding the user to press Edit). wiz-edit-only shows ONLY in edit
   mode (text shown next to live + Add buttons). */
.wiz-edit-hint { display: none; }
.wiz-form.wiz-readonly .wiz-edit-hint { display: block; }
.wiz-form.wiz-readonly .wiz-edit-only { display: none; }

/* Pill-style picker — borrower type, constitution, etc.
   Tightened per the fintruster reference: smaller tiles, soft-purple
   active state that doesn't overpower, lighter typography. */
.ljs-pill-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.ljs-pill {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  font: inherit;
  color: var(--ink);
}
.ljs-pill:hover { border-color: var(--amethyst); }
.ljs-pill[aria-pressed="true"] {
  border-color: var(--amethyst);
  background: var(--mist);
  color: var(--aubergine);
  box-shadow: 0 0 0 1px var(--amethyst) inset;
}
.ljs-pill-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ljs-pill-sub   { font-size: 11px; color: var(--stone); margin-top: 2px; line-height: 1.2; }
.ljs-pill[aria-pressed="true"] .ljs-pill-sub { color: var(--amethyst); }
.ljs-pill-more {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--stone);
  font-size: 12px;
  font-weight: 500;
}
.ljs-pill-more:hover { color: var(--aubergine); border-color: var(--amethyst); }

/* Smaller, round chip picker — used for Purpose, etc. */
.ljs-chip-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ljs-chip {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ljs-chip:hover { border-color: var(--amethyst); }
.ljs-chip[aria-pressed="true"] {
  background: var(--midnight);
  color: #fff;
  border-color: var(--midnight);
}
.ljs-chip-more {
  border: 0;
  background: transparent;
  color: var(--stone);
  padding: 7px 8px;
}
.ljs-chip-more:hover { color: var(--aubergine); }

/* Result-strip area to the right of the PAN input — fills with the
   API-extracted name + match/mismatch chip after verify runs. */
.wiz-pan-result {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--mist);
  font-size: 12px;
  color: var(--stone);
  border: 1px dashed var(--border);
}
/* Variant used by the Aadhaar verified-details bar — taller, top-
   aligned content, more padding. Renders inside a stretched grid
   column so it spans label + input vertical space and grows downward
   when rich content (resident name, mobile, DOB, address, photo) lands. */
.wiz-pan-result--tall {
  min-height: 64px;
  align-items: flex-start;
  padding: 10px 14px;
  width: 100%;
  flex: 1;
}
/* The placeholder text inside an empty --tall variant should still
   look vertically centred-ish (no rich content to anchor to). */
.wiz-pan-result--tall > span[style*="opacity:0.7"] {
  align-self: center;
}
.wiz-pan-result.is-active { background: var(--mist); border-style: solid; border-color: var(--amethyst); color: var(--ink); }

/* Highlighted Applied Amount input — typography-led emphasis so it reads
   as the principal loan parameter without overlapping the lavender
   "selected radio card" treatment used by Borrower consent above it. */
.wiz-amount-input {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-width: 2px;
  border-color: var(--aubergine);
}
.wiz-amount-input:focus { border-color: var(--amethyst); }
.wiz-amount-input::placeholder { font-weight: 400; font-size: 14px; color: var(--stone); }
.wiz-pan-result .pan-name  { font-weight: 600; color: var(--ink); }
.wiz-pan-result .pan-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
}
.wiz-pan-result .pan-badge.match    { background: #DDEDE7; color: var(--green); }
.wiz-pan-result .pan-badge.mismatch { background: #F9DDD7; color: var(--coral); }

/* Step body footer — Save & exit, Continue */
.ljs-step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border-soft, #e5e2f1);
  background: #fff;
  position: sticky;
  bottom: 0;
}
.ljs-step-footer .ljs-save-exit {
  border: none;
  background: transparent;
  color: var(--stone, #7d7c8e);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.ljs-step-footer .ljs-save-exit:hover { color: var(--ink, #1a1d2e); }

/* ============================================================
   HOME DASHBOARD — role-templated layout
   ============================================================ */
.home {
  --home-line: var(--border);
  --home-soft: #FBF9FF;
  --home-soft-2: #FAF8FE;
  --home-shadow: 0 8px 22px rgba(60, 44, 94, 0.035);
}

.home-role-header {
  padding: 4px 2px 12px;
  margin-bottom: 12px;
}
.home-role-header h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 700;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 16px;
  margin-bottom: 16px;
}

.home-panel {
  background: #FFFFFF;
  border: 1px solid var(--home-line);
  border-radius: 14px;
  box-shadow: var(--home-shadow);
  overflow: hidden;
}
.home-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--home-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.home-panel-header h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.home-panel-header p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--stone);
}
.home-panel-body { padding: 14px 16px 16px; }
.home-panel-body.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

.home-graphic-card {
  background:
    radial-gradient(circle at 12% 12%, #FFFFFF 0, #FFFFFF 18%, transparent 19%),
    linear-gradient(135deg, var(--home-soft-2), #FFFFFF);
  border: 1px solid var(--home-line);
  border-radius: 14px;
  padding: 16px;
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
.home-graphic-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-graphic-card > p {
  margin: 0 0 14px;
  color: var(--stone);
  font-size: 12px;
}
.home-portfolio-graphic {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 4px;
}
.home-donut2-wrap { display: grid; justify-items: center; gap: 10px; width: 100%; }
.home-donut2-canvas { position: relative; width: 138px; height: 138px; }
.home-donut2-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; line-height: 1.15; }
.home-donut2-center strong { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.home-donut2-center span { font-size: 9px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }
.home-donut2-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 10px; font-size: 11px; }
.home-donut2-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--stone); }
.home-donut2-chip .home-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-donut-wrap { display: grid; justify-items: center; gap: 10px; }
.home-donut-legend {
  display: grid;
  gap: 4px;
  font-size: 11px;
  width: 100%;
}
.home-donut-legend .home-leg-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--stone);
}
.home-donut-legend .home-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--portfolio-current);
}
.home-donut-legend .home-leg-dot.ochre { background: var(--portfolio-overdue); }
.home-donut-legend .home-leg-dot.coral { background: var(--portfolio-npa); }
.home-donut-legend .home-leg-dot.green { background: var(--green); }
.home-donut-legend .home-leg-dot.amethyst { background: var(--amethyst); }
.home-donut-legend .home-leg-val { font-weight: 700; color: var(--ink); }
.home-donut {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 65%, var(--ochre) 65% 82%, var(--coral) 82% 100%);
  display: grid;
  place-items: center;
  margin: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.home-donut.admin {
  background: conic-gradient(var(--amethyst) 0 58%, var(--aubergine) 58% 80%, var(--ochre) 80% 100%);
}
.home-donut.rm {
  background: conic-gradient(#237B7B 0 72%, var(--green) 72% 86%, var(--ochre) 86% 100%);
}
.home-donut-inner {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 6px 14px rgba(60, 44, 94, 0.08);
}
.home-donut-inner strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.home-donut-inner span {
  color: var(--stone);
  font-size: 10px;
  display: block;
  margin-top: 2px;
}
.home-graphic-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: center;
  align-self: stretch;
}
.home-stat.dark {
  background: var(--aubergine);
  border-color: var(--aubergine);
}
.home-stat.dark label { color: rgba(255,255,255,0.7); }
.home-stat.dark strong { color: #FFFFFF; }
.home-stat.coral {
  background: var(--coral);
  border-color: var(--coral);
}
.home-stat.coral label { color: rgba(255,255,255,0.75); }
.home-stat.coral strong { color: #FFFFFF; }
.home-stat {
  border: 1px solid var(--home-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 11px;
}
.home-stat label {
  display: block;
  font-size: 10px;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  margin-bottom: 4px;
}
.home-stat strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.home-pipeline-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}
.home-stage {
  border: 1px solid var(--home-line);
  background: var(--home-soft-2);
  border-radius: 13px;
  padding: 14px 12px;
  position: relative;
  min-height: 96px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.home-stage:hover { background: var(--mist); }
.home-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--amethyst);
  z-index: 2;
}
.home-stage label {
  color: var(--stone);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.home-stage strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0 4px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.home-stage span {
  color: var(--stone);
  font-size: 11px;
  line-height: 1.3;
}

.home-quick-card {
  background: linear-gradient(135deg, var(--home-soft-2), #FFFFFF);
  border: 1px solid var(--home-line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.home-quick-title {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.home-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
/* Quick-action cards (.home-qa) — large title + glyph, no subtext */
.home-qa {
  border: 1px solid var(--home-line);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 20px;
  min-height: 124px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(60, 44, 94, 0.05), 0 8px 18px rgba(60, 44, 94, 0.04);
}
.home-qa:hover {
  box-shadow: 0 6px 14px rgba(60, 44, 94, 0.10), 0 14px 32px rgba(60, 44, 94, 0.10);
  transform: translateY(-2px);
  border-color: var(--lavender);
}
.home-qa:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(60, 44, 94, 0.08);
}
.home-qa::before { content: none; }
.home-qa::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--stone);
  font-size: 16px;
  font-weight: 700;
  opacity: 0.5;
  transition: transform 0.18s, opacity 0.18s, color 0.18s;
}
.home-qa:hover::after {
  transform: translateX(3px);
  opacity: 1;
  color: var(--aubergine);
}
.home-qa.green::before  { background: var(--green); }
.home-qa.ochre::before  { background: var(--ochre); }
.home-qa.coral::before  { background: var(--coral); }
.home-qa.blue::before   { background: var(--amethyst); }
/* Modern look: uniform white cards; the accent lives in a tinted icon chip. */
.home-qa-glyph {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  background: #ECE7F6;
  color: var(--aubergine);
}
.home-qa.green .home-qa-glyph  { background: #DCEDE4; color: var(--green); }
.home-qa.ochre .home-qa-glyph  { background: #F3E7C8; color: var(--ochre); }
.home-qa.coral .home-qa-glyph  { background: #F7DED7; color: var(--coral); }
.home-qa.blue  .home-qa-glyph  { background: #E4DCF3; color: var(--amethyst); }
.home-qa-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.home-kpi {
  border: 1px solid var(--home-line);
  background: #FFFFFF;
  border-radius: 16px;
  padding: 18px 18px 18px 22px;
  min-height: 128px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 6px rgba(60, 44, 94, 0.05), 0 8px 18px rgba(60, 44, 94, 0.04);
}
.home-kpi:hover {
  box-shadow: 0 6px 14px rgba(60, 44, 94, 0.10), 0 14px 32px rgba(60, 44, 94, 0.10);
  transform: translateY(-2px);
  border-color: var(--lavender);
}
.home-kpi:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(60, 44, 94, 0.08);
}
.home-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: var(--aubergine);
}
.home-kpi::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--stone);
  font-size: 16px;
  font-weight: 700;
  opacity: 0.5;
  transition: transform 0.18s, opacity 0.18s, color 0.18s;
}
.home-kpi:hover::after {
  transform: translateX(3px);
  opacity: 1;
  color: var(--aubergine);
}
.home-kpi.green::before  { background: var(--green); }
.home-kpi.ochre::before  { background: var(--ochre); }
.home-kpi.coral::before  { background: var(--coral); }
.home-kpi.blue::before   { background: var(--amethyst); }
.home-kpi label {
  display: block;
  color: var(--stone);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  padding-right: 24px;
}
.home-kpi strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1;
}
.home-kpi small {
  display: block;
  color: var(--stone);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 6px;
}

.home-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.5fr);
  gap: 16px;
  margin-bottom: 16px;
}

.home-work-table { display: grid; gap: 8px; }
.home-work-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  padding: 11px 12px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s;
}
.home-work-row:hover { background: var(--mist); }
.home-work-name strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.home-work-name span {
  color: var(--stone);
  font-size: 12px;
  line-height: 1.35;
}
.home-work-task {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
}
.home-work-task small {
  display: block;
  color: var(--stone);
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}
.home-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.home-chip.purple { color: var(--aubergine); background: var(--mist); }
.home-chip.ochre  { color: #8B6A1E;          background: #FCF1D8; }
.home-chip.coral  { color: var(--coral);     background: #F9DDD7; }
.home-chip.green  { color: var(--green);     background: #DCEEE6; }
.home-chip.blue   { color: var(--amethyst);  background: var(--mist); }
/* Work-queue "days pending" pill — neutral, turns coral when over TAT. */
.home-pending {
  display: inline-flex; align-items: center; width: fit-content; white-space: nowrap;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  color: var(--stone); background: var(--mist);
}
.home-pending.over { color: var(--coral); background: #F9DDD7; }

.home-empty {
  padding: 22px;
  text-align: center;
  color: var(--green);
  font-size: 13px;
  background: var(--home-soft-2);
  border: 1px dashed var(--home-line);
  border-radius: 12px;
}

.home-small-link {
  color: var(--aubergine);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.home-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.home-tab {
  border: 1px solid var(--home-line);
  background: var(--home-soft-2);
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--stone);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.home-tab:hover { color: var(--ink); }
.home-tab.active {
  background: var(--aubergine);
  color: #FFFFFF;
  border-color: var(--aubergine);
}

.home-reminder-list { display: grid; gap: 8px; }
.home-reminder {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--home-line);
  border-radius: 12px;
  background: var(--home-soft-2);
  cursor: pointer;
  transition: background 0.15s;
}
.home-reminder:hover { background: var(--mist); }
.home-reminder.live {
  background: #FFF1ED;
  border-color: #F4C9C0;
  box-shadow: 0 0 0 1px rgba(201, 79, 61, 0.12), 0 6px 14px rgba(201, 79, 61, 0.08);
}
.home-reminder.live:hover { background: #FCE4DF; }
.home-reminder.live strong { color: var(--coral); }
.home-time-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--aubergine);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
}
.home-time-badge.ochre { background: #FCF1D8; color: #8B6A1E; }
.home-time-badge.coral { background: #F9DDD7; color: var(--coral); }
.home-reminder strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.home-reminder span {
  color: var(--stone);
  font-size: 12px;
  line-height: 1.35;
}

.home-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.home-quick {
  border: 1px solid var(--home-line);
  background: #FBF8FF;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--aubergine);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.home-quick:hover { background: var(--mist); border-color: var(--lavender); }
.home-quick.alert { background: #FFF5F3; color: var(--coral); border-color: #F4C9C0; }
.home-quick.alert:hover { background: #FCE4DF; }

@media (max-width: 1180px) {
  .home-hero-grid,
  .home-work-grid { grid-template-columns: 1fr; }
  .home-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .home-pipeline-flow { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 720px) {
  .home-kpi-strip { grid-template-columns: 1fr; }
  .home-pipeline-flow { grid-template-columns: 1fr; }
  .home-stage:not(:last-child)::after { display: none; }
  .home-portfolio-graphic { grid-template-columns: 1fr; }
  .home-role-header { grid-template-columns: 1fr; }
  .home-graphic-stats { grid-template-columns: 1fr 1fr; }
  .home-work-row { grid-template-columns: 1fr; }
}