/* ============================================================
   HOMIUM ORIGINATOR FLOW — Design System (Dashboard Refresh)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IvyPresto+Display:ital,wght@0,300;0,400;0,700;1,300&family=Inter:wght@300;400;500;600&display=swap');

/* ---- Variables — MD3 tonal palette from Homium green seed ---- */
:root {
  /* Primary tonal (seed: #1D3D2A) */
  --color-primary:       #1D3D2A;   /* tone ~25 — brand anchor */
  --color-primary-dark:  #001F0F;   /* tone 10 */
  --color-primary-light: #2D6048;   /* tone 40 */
  --color-accent:        #3D7A52;   /* tone 50 */
  --color-accent-dark:   #2D5C3D;
  --color-accent-light:  #5A9470;

  /* MD3 tonal containers */
  --color-primary-container:      #B6ECC9;   /* tone 90 — light mint */
  --color-on-primary-container:   #002110;   /* tone 10 */
  --color-secondary-container:    #CDEAE0;   /* neutral-variant 90 */
  --color-on-secondary-container: #06201A;   /* neutral-variant 10 */

  /* MD3 surface containers (warm-neutral) */
  --color-bg:           #F3F2EC;   /* surface-container-low */
  --color-surface:      #EDECEA;   /* surface-container */
  --color-card:         #FFFFFF;   /* surface-container-lowest */
  --color-surface-high: #E8E7E2;   /* surface-container-high */

  /* MD3 outline tokens */
  --color-border:       #C3D0CC;   /* outline-variant */
  --color-border-light: #D9E4E1;   /* softer outline */

  --color-text:           #1A1A18;
  --color-text-secondary: #4B5563;
  --color-text-muted:     #9CA3AF;
  --color-text-inverse:   #FFFFFF;

  --color-success:    #16A34A;
  --color-success-bg: #DCFCE7;
  --color-warning:    #D97706;
  --color-warning-bg: #FEF3C7;
  --color-danger:     #DC2626;
  --color-danger-bg:  #FEE2E2;
  --color-info:       #2563EB;
  --color-info-bg:    #DBEAFE;
  --color-purple:     #7C3AED;
  --color-purple-bg:  #EDE9FE;

  /* MD3 shape scale */
  --radius-sm:   4px;    /* extra-small = 4dp */
  --radius:      8px;    /* small       = 8dp */
  --radius-lg:   12px;   /* medium      = 12dp */
  --radius-xl:   16px;   /* large       = 16dp */
  --radius-2xl:  28px;   /* extra-large = 28dp (dialogs) */
  --radius-full: 9999px;

  /* MD3 elevation shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:    0 2px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-xl: 0 12px 32px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);

  --topnav-height: 58px;

  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'IvyPresto Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'Fira Code', monospace;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

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

#app { min-height: 100vh; display: flex; flex-direction: column; }

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   TOP NAV
   ============================================================ */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topnav-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 24px;
  z-index: 100;
}

.topnav-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topnav-logo img {
  height: 26px;
  display: block;
}

.topnav-logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.topnav-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-primary-container);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.topnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.topnav-link:hover {
  color: var(--color-primary);
  background: rgba(29,61,42,0.08);
}

.topnav-link.active {
  color: var(--color-on-primary-container);
  background: var(--color-primary-container);
  font-weight: 600;
}

.topnav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.topnav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}

.topnav-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.topnav-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.topnav-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.topnav-role-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

.topnav-profile {
  position: relative;
  cursor: pointer;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  display: none;
}
.profile-dropdown.open { display: block; }

.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
}
.profile-dropdown-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text);
}
.profile-dropdown-item:hover { background: rgba(29,61,42,0.04); }
.profile-dropdown-item-danger { color: var(--color-danger); }
.profile-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.topnav-switch {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: all 0.15s;
  border: 1px solid var(--color-border);
  background: transparent;
}
.topnav-switch:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-container); }

/* ---- Main Content ---- */
.main-content {
  padding-top: var(--topnav-height);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
}

.page-header {
  background: var(--color-bg);
  padding: 28px 40px 0;
}

.page-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.page-header-left { display: flex; flex-direction: column; gap: 4px; }

.page-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.page-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 400;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-body {
  padding: 28px 40px;
  flex: 1;
}
.page-body > .page-header { padding: 0; margin: -28px -40px 20px; padding: 28px 40px 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  min-height: 40px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  transition: background 0.15s, box-shadow 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  letter-spacing: 0.1em;
}

.btn-sm  { padding: 6px 16px; min-height: 32px; font-size: 12px; }
.btn-xs  { padding: 3px 10px; min-height: 24px; font-size: 11px; border-radius: 12px; }
.btn-lg  { padding: 12px 28px; font-size: 14px; }

/* MD3 Filled button */
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-light); }

.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: var(--color-accent-dark); }

/* MD3 Outlined button */
.btn-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-secondary:hover { background: rgba(29,61,42,0.08); }

.btn-outline-primary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-outline-primary:hover { background: rgba(29,61,42,0.08); }

/* MD3 Text button */
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: rgba(29,61,42,0.08); color: var(--color-text); }

/* MD3 Filled (danger) */
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; }

.btn-danger-ghost { background: transparent; color: var(--color-danger); border: 1px solid var(--color-danger-bg); }
.btn-danger-ghost:hover { background: var(--color-danger-bg); }

.btn-impersonate { background: #F5C518; color: #1a1a1a; border: none; font-weight: 600; }
.btn-impersonate:hover { background: #E5B508; }

.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-icon {
  padding: 8px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: rgba(29,61,42,0.08); color: var(--color-text); }

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
}

.card-subtitle {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ---- Stat Row (inline, no card chrome) ---- */
.stat-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 28px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat-item {
  flex: 1;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--color-border);
}
.stat-item:last-child { border-right: none; }

.stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Legacy stat-grid/stat-card kept for backward compat */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card-header { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.stat-icon svg { width: 16px; height: 16px; }
.stat-change { font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 3px; }
.stat-change.up { color: var(--color-success); }
.stat-change.neutral { color: var(--color-text-muted); }

/* ============================================================
   TABLES
   ============================================================ */

.table-container {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table-toolbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-toolbar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
}

table { width: 100%; border-collapse: collapse; }

thead th {
  background: var(--color-card);
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--color-text); }
thead th.sortable::after { content: ' ↕'; opacity: 0.4; }
thead th.sort-asc::after  { content: ' ↑'; opacity: 1; }
thead th.sort-desc::after { content: ' ↓'; opacity: 1; }

tbody tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.1s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(29,61,42,0.04); }
tbody tr.clickable { cursor: pointer; }
tbody tr.row-selected { background: var(--color-primary-container) !important; }

tbody td {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  vertical-align: middle;
}

.table-empty { padding: 52px 20px; text-align: center; }
.table-empty-icon { width: 36px; height: 36px; margin: 0 auto 10px; opacity: 0.25; }
.table-empty p { font-size: 13px; color: var(--color-text-secondary); }

.cell-primary { font-weight: 600; color: var(--color-text); }
.cell-secondary { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }
.cell-link { color: var(--color-primary); font-weight: 500; cursor: pointer; }
.cell-link:hover { text-decoration: underline; }

.table-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
}

.table-count { font-size: 12px; color: var(--color-text-muted); }

/* ============================================================
   KANBAN BOARD
   ============================================================ */

.kanban-board {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 16px;
}

.kanban-col {
  flex: 1;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
}

.kanban-col-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kanban-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.kanban-card {
  background: var(--color-card);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

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

.kanban-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.kanban-card-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.kanban-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.kanban-card-amount {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
}

.kanban-card-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

.kanban-empty {
  background: transparent;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ============================================================
   BADGES — STATUS PILLS
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-active,    .pill-active    { color: var(--color-success); }
.badge-invited,   .pill-invited   { color: var(--color-info); }
.badge-pending,   .pill-pending   { color: var(--color-warning); }
.badge-suspended, .pill-suspended { color: var(--color-danger); }
.badge-failed,    .pill-failed    { color: var(--color-danger); }
.badge-verified,  .pill-verified  { color: var(--color-success); }
.badge-kyc,       .pill-kyc       { color: var(--color-purple); }
.badge-2fa,       .pill-2fa       { color: var(--color-warning); }
.badge-neutral,   .pill-neutral   { color: var(--color-text-secondary); }
.badge-info,      .pill-info      { color: var(--color-info); }
.badge-progress,  .pill-progress  { color: #0369A1; }
.badge-submitted, .pill-submitted { color: #7E22CE; }
.badge-docutech,  .pill-docutech  { color: #854D0E; }
.badge-complete,  .pill-complete  { color: var(--color-success); }
.badge-expired,   .pill-expired   { color: #475569; }
.badge-appraisal, .pill-appraisal { color: #C2410C; }

/* ============================================================
   ROLE CHIPS
   ============================================================ */

.role-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-left: 3px solid currentColor;
}

.role-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; }

.role-sys-admin   { background: #E8EAF6; color: #3730A3; }
.role-prog-admin  { background: #E8F5E9; color: #1A6B30; }
.role-lo          { background: #E3F0FF; color: #1D4ED8; }
.role-lp          { background: #FFF8E1; color: #854D0E; }
.role-investor    { background: var(--color-purple-bg); color: var(--color-purple); }
.role-operator    { background: #FDE8EC; color: #BE123C; }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

.form-group { display: flex; flex-direction: column; gap: 6px; }

label { font-size: 12px; font-weight: 600; color: var(--color-text); }

.input, .select-input, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-card);
  transition: border-color 0.15s;
  outline: none;
}

.input:focus, .select-input:focus, textarea:focus {
  border: 2px solid var(--color-primary);
  padding: 9px 11px;
  box-shadow: none;
}

.input::placeholder { color: var(--color-text-muted); }
.input-sm { padding: 5px 10px; font-size: 12px; }

.input-search {
  padding-left: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px center;
  background-color: var(--color-card);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-full { grid-column: 1 / -1; }
.form-hint { font-size: 11px; color: var(--color-text-muted); }
.form-error { font-size: 11px; color: var(--color-danger); }

.checkbox-group { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-group input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }

.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--color-text);
  background: #fff;
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--color-accent); }

/* Multi-filter chips */
.filter-chip-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.filter-chip-remove {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(6,32,26,0.15);
  color: var(--color-on-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  border: none;
  padding: 0;
}
.filter-chip-remove:hover { background: rgba(6,32,26,0.25); }

.btn-add-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px dashed var(--color-accent);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-add-filter:hover { background: var(--color-accent); color: #fff; }

.filter-dropdown {
  position: absolute;
  z-index: 300;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 8px;
  animation: slideUp 0.15s ease;
}

.filter-dropdown-item {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.filter-dropdown-item:hover { background: var(--color-bg); }

/* Filter bar (dashboard) */
.filter-bar { display: flex; align-items: center; gap: 8px; flex: 1; }
.filter-search {
  padding: 6px 10px; font-size: 13px; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-card); color: var(--color-text);
  width: 180px; outline: none; transition: border-color 0.15s;
}
.filter-search:focus { border-color: var(--color-primary); }
.filter-search::placeholder { color: var(--color-text-muted); }
.filter-btn-group { display: flex; gap: 4px; }
.filter-btn {
  padding: 5px 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-card); color: var(--color-text-secondary);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.filter-btn:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.filter-btn.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(29,61,42,0.05); }
.filter-popover {
  position: absolute; z-index: 300; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 160px; max-height: 240px; overflow-y: auto;
  top: 100%; left: 0; margin-top: 4px;
}
.filter-popover-item {
  padding: 6px 10px; border-radius: var(--radius); font-size: 13px; cursor: pointer; transition: background 0.1s;
}
.filter-popover-item:hover { background: var(--color-bg); }

/* Section type tags */
.section-tag { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 10px; }
.section-tag-origination { background: rgba(29,78,216,0.1); color: #1D4ED8; }
.section-tag-investor { background: rgba(29,61,42,0.1); color: #1D3D2A; }
.section-tag-platform { background: rgba(198,149,43,0.1); color: #C6952B; }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.45);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.modal {
  background: var(--color-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s ease;
}

.modal-lg { max-width: 680px; }
.modal-xl { max-width: 860px; }

.modal-header {
  padding: 22px 26px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.modal-subtitle { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; }

.modal-close {
  padding: 4px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: all 0.15s;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.modal-close:hover { background: var(--color-surface); color: var(--color-text); }

.modal-body { padding: 20px 26px; }
.modal-footer {
  padding: 14px 26px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   SIDE PANEL
   ============================================================ */

.side-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,15,0.25);
  z-index: 150;
  animation: fadeIn 0.15s ease;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100vh;
  background: var(--color-card);
  box-shadow: var(--shadow-xl);
  z-index: 151;
  display: flex;
  flex-direction: column;
  animation: slideRight 0.2s ease;
  overflow-y: auto;
}

.side-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--color-card);
  z-index: 1;
}

.side-panel-body { padding: 20px 24px; flex: 1; }

.panel-section { margin-bottom: 24px; }
.panel-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.panel-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  color: var(--color-text);
}
.panel-field:last-child { border-bottom: none; }
.panel-field-label { color: var(--color-text-muted); flex-shrink: 0; min-width: 110px; }
.side-panel-title { font-family: var(--font-heading); font-size: 20px; font-weight: 300; color: var(--color-text); }
.side-panel-subtitle { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.side-panel-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: var(--color-card);
  position: sticky;
  bottom: 0;
}

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
  gap: 0;
  overflow-x: auto;
}

.tab-item {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  white-space: nowrap;
}

.tab-item:hover { color: var(--color-text); }
.tab-item.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 500; }

/* ============================================================
   ONBOARDING FLOWCHART
   ============================================================ */

.flowchart {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 12px;
  margin: 4px 0;
}

.flowchart-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 80px;
}

.flowchart-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: all 0.2s;
  flex-shrink: 0;
}

.flowchart-circle.fc-complete { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.flowchart-circle.fc-active   { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(29,61,42,0.12); }
.flowchart-circle.fc-failed   { background: var(--color-danger);  border-color: var(--color-danger);  color: #fff; }

.flowchart-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.3;
  max-width: 72px;
}
.flowchart-label.fc-complete { color: var(--color-success); font-weight: 600; }
.flowchart-label.fc-active   { color: var(--color-primary); font-weight: 600; }
.flowchart-label.fc-failed   { color: var(--color-danger);  font-weight: 600; }

.flowchart-arrow {
  width: 28px;
  height: 2px;
  background: var(--color-border);
  position: relative;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.flowchart-arrow.fc-done { background: var(--color-success); }
.flowchart-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid var(--color-border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.flowchart-arrow.fc-done::after { border-left-color: var(--color-success); }

/* ============================================================
   TIMELINE
   ============================================================ */

.timeline { position: relative; padding-left: 24px; }
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-card);
  z-index: 1;
}

.timeline-dot.complete { background: var(--color-success); border-color: var(--color-success); }
.timeline-dot.active   { background: var(--color-primary); border-color: var(--color-primary); }
.timeline-dot.pending  { background: var(--color-card); border-color: var(--color-border); }
.timeline-dot.failed   { background: var(--color-danger);  border-color: var(--color-danger); }

.timeline::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--color-border);
}

.timeline-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.timeline-meta  { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.timeline-note {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--color-info-bg);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--color-info);
  border-left: 3px solid var(--color-info);
}

/* ============================================================
   PERMISSION MATRIX
   ============================================================ */

.permission-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.permission-matrix th {
  padding: 8px 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.permission-matrix th:first-child { text-align: left; min-width: 160px; }
.permission-matrix td { padding: 8px 12px; border: 1px solid var(--color-border); text-align: center; vertical-align: middle; }
.permission-matrix td:first-child { text-align: left; font-weight: 500; background: var(--color-bg); }
.permission-matrix tr:hover td { background: #F3F2ED; }
.permission-matrix tr:hover td:first-child { background: #ECEAE3; }
.perm-check { width: 15px; height: 15px; accent-color: var(--color-primary); cursor: pointer; }
.perm-na { color: var(--color-text-muted); font-size: 16px; }

/* ============================================================
   WIZARD STEPS
   ============================================================ */

.wizard-steps {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.wizard-step.complete:not(:last-child)::after { background: var(--color-success); }

.wizard-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  z-index: 1;
  transition: all 0.2s;
}

.wizard-step.complete .wizard-step-circle { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.wizard-step.active  .wizard-step-circle  { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(29,61,42,0.12); }

.wizard-step-label { font-size: 11px; font-weight: 500; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
.wizard-step.active .wizard-step-label   { color: var(--color-primary); font-weight: 600; }
.wizard-step.complete .wizard-step-label { color: var(--color-success); }

.wizard-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 20px;
}

.wizard-icon {
  width: 44px;
  height: 44px;
  background: var(--color-info-bg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.wizard-icon svg { width: 22px; height: 22px; }

.wizard-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: 6px;
}

.wizard-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 20px; }

.system-note {
  padding: 12px 16px;
  background: #FFF8E7;
  border: 1px solid #FDE68A;
  border-radius: var(--radius);
  font-size: 12px;
  color: #92400E;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
}
.system-note-icon { flex-shrink: 0; }

/* ============================================================
   ROLE SELECTOR (Landing)
   ============================================================ */

.role-select-page {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.role-select-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.role-select-header img {
  height: 26px;
  display: block;
}

.role-select-header-text h1 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
}

.role-select-header-text p { font-size: 12px; color: var(--color-text-muted); }

.role-select-body {
  flex: 1;
  padding: 52px 40px;
  max-width: 1060px;
  margin: 0 auto;
  width: 100%;
}

.role-select-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  text-align: center;
}

.role-select-subtitle { font-size: 14px; color: var(--color-text-muted); margin-bottom: 36px; text-align: center; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

.role-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}

.role-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(29,61,42,0.10);
  transform: translateY(-2px);
}

.role-card-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 2px;
}

.role-card-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; }

.role-scope-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 6px;
  align-self: flex-start;
}

.role-card-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-select-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

.role-demo-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 24px;
  position: sticky;
  top: 24px;
}

.role-demo-box-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.role-demo-box p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

.role-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

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

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

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.activity-item:last-child { border-bottom: none; }

.activity-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-content { flex: 1; font-size: 12px; color: var(--color-text); line-height: 1.5; }
.activity-content strong { font-weight: 600; }
.activity-time { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

/* ============================================================
   INFO ROWS
   ============================================================ */

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-row { display: flex; flex-direction: column; gap: 3px; }
.info-label { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.info-value { font-size: 13px; color: var(--color-text); font-weight: 500; }

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.alert-icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.alert-info    { background: var(--color-info-bg);    color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-warning { background: var(--color-warning-bg); color: #92400E; border: 1px solid #FDE68A; }
.alert-success { background: var(--color-success-bg); color: #14532D; border: 1px solid #BBF7D0; }
.alert-danger  { background: var(--color-danger-bg);  color: #7F1D1D; border: 1px solid #FECACA; }

/* ============================================================
   VERTICAL FLOWCHART (profile onboarding progress)
   ============================================================ */

.vflow { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }

.vflow-item { display: flex; align-items: flex-start; gap: 12px; position: relative; }

.vflow-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }

.vflow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-card);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
  position: relative;
}

.vflow-dot.vf-complete { background: var(--color-success); border-color: var(--color-success); }
.vflow-dot.vf-active   { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29,61,42,0.12); }
.vflow-dot.vf-failed   { background: var(--color-danger);  border-color: var(--color-danger); }

.vflow-connector { width: 2px; flex: 1; min-height: 20px; background: var(--color-border); margin: 2px 0; }
.vflow-connector.vf-done { background: var(--color-success); }

.vflow-label { font-size: 13px; font-weight: 400; color: var(--color-text-muted); padding: 0 0 20px; line-height: 1.4; }
.vflow-label.vf-complete { color: var(--color-success); font-weight: 500; }
.vflow-label.vf-active   { color: var(--color-primary); font-weight: 700; }
.vflow-label.vf-failed   { color: var(--color-danger);  font-weight: 500; }
.vflow-item:last-child .vflow-label { padding-bottom: 4px; }

/* ============================================================
   PERMISSIONS — policy cards
   ============================================================ */

.perm-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-card);
}

.perm-role-sidebar { border-right: 1px solid var(--color-border); background: var(--color-bg); }

.perm-role-item {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
  transition: all 0.12s;
}
.perm-role-item:hover { background: var(--color-card); color: var(--color-text); }
.perm-role-item.active { background: var(--color-card); color: var(--color-primary); font-weight: 700; border-left: 3px solid var(--color-primary); padding-left: 13px; }

.perm-content { overflow: hidden; display: flex; flex-direction: column; }
.perm-content-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
}

/* Matrix collapsible toggle */
.perm-matrix-section { border-bottom: 1px solid var(--color-border); }
.perm-matrix-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font);
  transition: background 0.1s;
}
.perm-matrix-toggle:hover { background: var(--color-bg); color: var(--color-text); }
.perm-matrix-toggle .chevron { font-size: 10px; transition: transform 0.15s; }
.perm-matrix-toggle .chevron.open { transform: rotate(180deg); }
.perm-matrix-body { border-top: 1px solid var(--color-border); }

/* Per-card matrix toggle button */
.perm-matrix-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 11px; font-weight: 600; color: var(--color-text-muted);
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 3px 10px; cursor: pointer; font-family: var(--font); transition: all 0.1s;
}
.perm-matrix-toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.perm-card-matrix-body {
  margin-top: 10px; border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; background: var(--color-card);
}

/* Policy list — full-width stacked cards */
.perm-policy-list { display: flex; flex-direction: column; gap: 0; }

.perm-policy-card {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-card);
}
.perm-policy-card:last-child { border-bottom: none; }

.perm-card-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--color-border-light);
}
.perm-card-title-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.perm-policy-name  { font-size: 13px; font-weight: 700; color: var(--color-text); }
.perm-policy-desc  { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
.perm-policy-badge {
  font-size: 10px; font-weight: 600; padding: 1px 7px;
  border-radius: 99px; letter-spacing: 0.04em;
}
.perm-badge-default { background: var(--color-primary-container); color: var(--color-primary); }
.perm-badge-custom  { background: #EDE8F0; color: #6B3FA0; }
.perm-card-actions  { margin-left: auto; display: flex; gap: 4px; }
.perm-btn-danger    { color: var(--color-danger) !important; }

/* Assigned users sub-section */
.perm-assigned-section { padding: 10px 20px 10px; background: var(--color-bg); }
.perm-add-section      { padding: 10px 20px 14px; background: var(--color-bg); border-top: 1px solid var(--color-border-light); }
.perm-section-label    { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 6px; }

.perm-assigned-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--color-border-light); }
.perm-assigned-row:last-child { border-bottom: none; }
.perm-assigned-info { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.perm-assigned-name { font-size: 12px; font-weight: 500; color: var(--color-text); }
.perm-assigned-co   { font-size: 11px; color: var(--color-text-muted); }
.perm-no-assigned   { font-size: 12px; color: var(--color-text-muted); padding: 4px 0 2px; }
.perm-remove-btn    { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--color-text-muted); line-height: 1; padding: 0 2px; }
.perm-remove-btn:hover { color: var(--color-danger); }
.perm-add-btn       { flex-shrink: 0; }
.perm-user-search-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.perm-user-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; border-bottom: 1px solid var(--color-border-light); }
.perm-user-row:last-child { border-bottom: none; }

.perm-empty-state { padding: 24px 20px; font-size: 13px; color: var(--color-text-muted); }

/* Policy tag in user table */
.policy-tag {
  display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 6px;
  background: var(--color-primary-container); color: var(--color-primary);
  border-radius: 99px; white-space: nowrap; margin: 1px 2px 1px 0;
}

.perm-matrix-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid var(--color-border); gap: 8px; }

/* ============================================================
   BRANCHES — sub-branch
   ============================================================ */

.subbranch-row td:first-child { padding-left: 32px; }
.subbranch-indicator { font-size: 11px; color: var(--color-text-muted); margin-right: 4px; }

/* ============================================================
   LOAN CARDS
   ============================================================ */

.loan-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.15s;
}
.loan-card:hover { border-color: #B8B5AE; box-shadow: var(--shadow-md); }

.loan-card-main { flex: 1; min-width: 0; }
.loan-card-id { font-size: 11px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.loan-card-borrower { font-size: 14px; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.loan-card-address { font-size: 12px; color: var(--color-text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loan-card-meta { text-align: right; }
.loan-amount { font-family: var(--font-heading); font-size: 15px; font-weight: 400; color: var(--color-text); }
.loan-program { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ============================================================
   MISC UTILITIES
   ============================================================ */

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

.section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 12px;
}

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 20px; text-align: center; }
.empty-state-icon { width: 36px; height: 36px; margin: 0 auto 12px; opacity: 0.2; }
.empty-state h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 300; color: var(--color-text); margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--color-text-secondary); max-width: 300px; margin-bottom: 20px; }

.avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-sm { width: 26px; height: 26px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 17px; }

.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.w-full { width: 100%; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.breadcrumb-sep { opacity: 0.5; }
.breadcrumb-current { color: var(--color-text); font-weight: 500; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .topnav { padding: 0 16px; }
  .topnav-links { display: none; }
  .page-header { padding: 20px 16px 0; }
  .page-body { padding: 20px 16px; }
  .stat-row { flex-direction: column; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .stat-item:last-child { border-bottom: none; }
  .form-grid { grid-template-columns: 1fr; }
  .side-panel { width: 100%; }
  .kanban-board { flex-direction: column; }
  .kanban-col { min-width: auto; max-width: 100%; }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B8B5AE; }

/* ============================================================
   MODE SWITCHER DROPDOWN
   ============================================================ */
.topnav-mode-dropdown {
  position: relative;
  margin-left: 12px;
}
.mode-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: background 0.15s;
}
.mode-dropdown-trigger:hover {
  background: #163020;
}
.mode-dropdown-caret {
  font-size: 9px;
  color: rgba(255,255,255,0.7);
}
.mode-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.mode-dropdown-menu.open {
  display: block;
}
.mode-dropdown-item {
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.12s;
}
.mode-dropdown-item:hover {
  background: rgba(29,61,42,0.04);
}
.mode-dropdown-item.active {
  color: var(--color-primary);
  font-weight: 600;
  background: #F0F7F3;
}

/* ============================================================
   IMPERSONATION BANNER
   ============================================================ */
.impersonation-banner {
  background: #FEF3C7;
  border-bottom: 1px solid #F59E0B;
  color: #92400E;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-family: var(--font-body);
  position: sticky;
  top: var(--topnav-height);
  z-index: 90;
}
.impersonation-banner strong {
  font-weight: 700;
}
.impersonation-banner .btn {
  background: transparent;
  border-color: #F59E0B;
  color: #92400E;
  font-size: 12px;
  padding: 4px 10px;
}
.impersonation-banner .btn:hover {
  background: #FEF3C7;
  border-color: #D97706;
}

/* ============================================================
   USER SEARCH DROPDOWN (Permissions policy cards)
   ============================================================ */
.usd-wrapper {
  position: relative;
  margin-bottom: 10px;
}
.usd-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s;
}
.usd-trigger:hover {
  border-color: var(--color-primary);
}
.usd-panel {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
  z-index: 100;
}
.usd-panel.open {
  display: flex;
}

/* ============================================================
   DATA PLATFORM TAB BAR
   ============================================================ */
.dp-tabbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 32px;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--topnav-height);
  z-index: 80;
}
.dp-tab {
  padding: 12px 18px;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.dp-tab:hover {
  color: var(--color-primary);
}
.dp-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   ONBOARDING BANNER (on Users page)
   ============================================================ */
.onboarding-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 24px;
  margin-bottom: 20px;
  gap: 16px;
}
.onboarding-banner-stats {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.onboarding-stat {
  flex: 1;
  text-align: center;
  padding: 0 12px;
}
.onboarding-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.onboarding-stat-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
}
.onboarding-stat-active {
  color: var(--color-success);
}
.onboarding-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}
.onboarding-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

/* ---- Section Sub-tabs ---- */
.section-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border); padding: 0 24px; background: var(--color-card); }
.section-tab { padding: 11px 18px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s, border-color 0.12s; }
.section-tab:hover { color: var(--color-text); }
.section-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: 6px; padding: 14px 24px 0; font-size: 13px; color: var(--color-text-secondary); }
.breadcrumb-link { color: var(--color-primary); cursor: pointer; text-decoration: none; font-weight: 500; }
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--color-text); font-weight: 500; }

/* ---- Stub / Placeholder ---- */
.stub-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.stub-placeholder-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.25; }
.stub-placeholder h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 300; color: var(--color-text); margin-bottom: 6px; }
.stub-placeholder p { font-size: 13px; color: var(--color-text-muted); max-width: 340px; }

/* ============================================================
   ONBOARDING ANALYTICS
   ============================================================ */
.analytics-section {
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden;
}
.analytics-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; user-select: none;
}
.analytics-header:hover { background: var(--color-bg); }
.analytics-title { font-weight: 700; font-size: 14px; color: var(--color-text); }
.analytics-toggle { font-size: 11px; color: var(--color-text-muted); }
.analytics-body { padding: 0 20px 20px; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analytics-card {
  background: var(--color-bg); border-radius: var(--radius);
  padding: 14px 16px; border: 1px solid var(--color-border);
}
.analytics-card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 10px;
}
.funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.funnel-label { font-size: 12px; color: var(--color-text-secondary); width: 110px; flex-shrink: 0; }
.funnel-bar-bg {
  flex: 1; height: 18px; background: var(--color-border); border-radius: 9px; overflow: hidden;
}
.funnel-bar-fill {
  height: 100%; border-radius: 9px; transition: width 0.3s ease;
}
.funnel-count { font-size: 12px; font-weight: 600; color: var(--color-text); width: 28px; text-align: right; }
.metric-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.metric-row-label { color: var(--color-text-secondary); }
.metric-row-value { font-weight: 600; color: var(--color-text); }
.metric-row-highlight { font-weight: 700; color: var(--color-primary); border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 8px; }
.dropoff-item { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.dropoff-label { color: var(--color-text-secondary); }
.dropoff-value { font-weight: 600; }
.dropoff-value.warn { color: var(--color-danger); }
.company-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 12px; }
.company-row-name { color: var(--color-text); font-weight: 500; }
.company-row-stat { color: var(--color-text-secondary); }
.company-row-icon { font-size: 14px; }

/* ============================================================
   PERMISSIONS — Save Bar
   ============================================================ */
.perm-save-bar {
  position: sticky; bottom: 0; background: var(--color-card);
  border-top: 2px solid var(--color-primary); padding: 12px 20px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  z-index: 10;
}
.perm-save-bar-msg { flex: 1; font-size: 12px; color: var(--color-warning); font-weight: 500; }
.perm-matrix-toggle {
  display: flex; align-items: center; gap: 6px; padding: 8px 0; margin: 8px 0 4px;
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
  cursor: pointer; user-select: none; border: none; background: none;
}
.perm-matrix-toggle:hover { color: var(--color-text); }
.perm-matrix-toggle .chevron { font-size: 10px; transition: transform 0.15s; }
.perm-matrix-toggle .chevron.open { transform: rotate(180deg); }
.perm-desc-editable {
  font-size: 12px; color: var(--color-text-secondary); line-height: 1.4;
  cursor: text; padding: 2px 4px; border-radius: var(--radius); margin-top: 2px;
  border: 1px solid transparent; transition: border-color 0.15s;
}
.perm-desc-editable:hover { border-color: var(--color-border); }
.perm-desc-input {
  font-size: 12px; width: 100%; padding: 4px 6px; margin-top: 2px;
  border: 1px solid var(--color-primary); border-radius: var(--radius);
  background: var(--color-card); color: var(--color-text); outline: none;
}

/* ============================================================
   DASH INSIGHT CARD — Unified stats + analytics container
   ============================================================ */

.dash-insight-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
/* Strip the stat-row's own card styling when nested inside */
.dash-insight-card .stat-row {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* Analytics band — secondary tier, visually distinct */
.analytics-band { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.analytics-band-header {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 20px;
  border-bottom: 1px solid var(--color-border-light);
}
.analytics-band-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
.analytics-band-body { display: flex; gap: 0; padding: 20px 24px; }

/* Three-column layout */
.analytics-col { flex: 1; padding: 0 24px; }
.analytics-col:first-child { padding-left: 0; }
.analytics-col:last-child  { padding-right: 0; }
.analytics-col-narrow { flex: 0 0 155px; }
.analytics-col-divider { width: 1px; background: var(--color-border); align-self: stretch; flex-shrink: 0; }
.analytics-col-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 14px;
}
.analytics-col-hint {
  font-size: 9px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--color-text-muted); opacity: 0.75; margin-left: 4px;
}

/* Funnel rows */
.analytics-funnel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 4px; margin: 0 -4px 4px;
  border-radius: 3px; cursor: pointer; transition: background 0.1s;
}
.analytics-funnel-row:hover  { background: rgba(0,0,0,0.04); }
.analytics-funnel-row.active { background: var(--color-primary-container); }
.analytics-funnel-label { font-size: 11px; font-weight: 400; color: var(--color-text-secondary); width: 90px; flex-shrink: 0; }
.analytics-funnel-bar-bg { flex: 1; height: 7px; background: rgba(0,0,0,0.07); border-radius: 2px; overflow: hidden; }
.analytics-funnel-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.analytics-funnel-count { font-size: 11px; font-weight: 500; color: var(--color-text); width: 18px; text-align: right; }
.analytics-funnel-pct { font-size: 10px; font-weight: 400; color: var(--color-text-muted); width: 32px; text-align: right; }

/* Stage duration column */
.analytics-time-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 11px;
  border-bottom: 1px solid var(--color-border-light);
}
.analytics-time-row:last-child { border-bottom: none; }
.analytics-time-total { margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--color-border) !important; }
.analytics-time-label { color: var(--color-text-secondary); font-weight: 400; }
.analytics-time-value { color: var(--color-text); font-weight: 500; }

/* Stage filter badge */
.analytics-stage-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; padding: 1px 7px;
  background: var(--color-primary); color: white;
  border-radius: 99px; vertical-align: middle;
}
.analytics-stage-clear { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; padding: 0 0 0 2px; font-size: 12px; line-height: 1; }
.analytics-stage-clear:hover { color: white; }

/* Company progress rows */
.company-progress-row { border-bottom: 1px solid var(--color-border-light); cursor: pointer; border-radius: 4px; transition: background 0.1s; }
.company-progress-row:last-child { border-bottom: none; }
.company-progress-row:hover, .company-progress-row.expanded { background: rgba(0,0,0,0.03); }
.company-row-main { display: flex; align-items: center; gap: 10px; padding: 7px 4px; }
.company-progress-bar-bg { flex: 1; height: 5px; background: var(--color-border); border-radius: 99px; overflow: hidden; }
.company-progress-bar-fill { height: 100%; background: var(--color-primary); border-radius: 99px; transition: width 0.4s; }
.company-progress-stat { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; }
.company-expand-chevron { font-size: 10px; color: var(--color-text-muted); width: 10px; text-align: center; }

/* Expanded user list per company */
.analytics-user-list { padding: 4px 4px 8px; border-top: 1px solid var(--color-border-light); }
.analytics-user-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 4px; }
.analytics-user-row:hover { background: rgba(255,255,255,0.7); }
.analytics-user-info { flex: 1; min-width: 0; }
.analytics-user-name { font-size: 12px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-user-email { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-user-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Inline action buttons */
.analytics-action-btn {
  font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: white; color: var(--color-text-secondary);
  cursor: pointer; font-family: var(--font); white-space: nowrap;
  transition: all 0.1s; line-height: 1.4;
}
.analytics-action-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.analytics-action-btn:disabled { opacity: 0.6; cursor: default; border-color: var(--color-border); }
.analytics-action-btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); font-weight: 500; }
.analytics-action-btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: white; }

/* Compact company progress rows */
.co-prog-row { border-bottom: 1px solid var(--color-border-light); cursor: pointer; border-radius: 4px; transition: background 0.1s; }
.co-prog-row:last-child { border-bottom: none; }
.co-prog-row:hover, .co-prog-row.expanded { background: rgba(255,255,255,0.55); }
.co-prog-main { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.co-prog-name { font-size: 12px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-prog-meta { font-size: 10px; color: var(--color-text-muted); margin-top: 2px; }
.co-prog-bar-bg { width: 64px; height: 5px; background: var(--color-border); border-radius: 99px; overflow: hidden; flex-shrink: 0; }
.co-prog-bar-fill { height: 100%; background: var(--color-primary); border-radius: 99px; transition: width 0.4s; }
.co-prog-stat { font-size: 11px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }
.co-expand-chevron { font-size: 10px; color: var(--color-text-muted); width: 10px; text-align: center; flex-shrink: 0; }

/* ============================================================
   Onboarding Flow Wizard
   ============================================================ */
.ob-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow-y: auto; padding: 24px;
}
.ob-logo { margin-bottom: 28px; text-align: center; }
.ob-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%; max-width: 460px;
  box-shadow: var(--shadow-card);
}
.ob-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.ob-title { font-size: 20px; font-weight: 700; color: var(--color-text); text-align: center; margin-bottom: 8px; }
.ob-subtitle { font-size: 14px; color: var(--color-text-muted); text-align: center; margin-bottom: 28px; line-height: 1.5; }
.ob-email-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 99px; padding: 5px 14px;
  font-size: 13px; color: var(--color-text);
}
.ob-code-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.ob-code-input {
  width: 44px; height: 52px; text-align: center;
  font-size: 22px; font-weight: 700; font-family: var(--font);
  border: 1.5px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card); color: var(--color-text);
  outline: none; transition: border-color 0.15s;
}
.ob-code-input:focus { border-color: var(--color-primary); }
.ob-btn-primary {
  width: 100%; padding: 13px;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: opacity 0.15s;
}
.ob-btn-primary:hover { opacity: 0.88; }
.ob-btn-ghost {
  width: 100%; padding: 10px;
  background: none; color: var(--color-text-muted);
  border: none; font-size: 13px; font-family: var(--font);
  cursor: pointer; margin-top: 12px;
}
.ob-btn-ghost:hover { color: var(--color-text); text-decoration: underline; }
.ob-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: 28px; }
.ob-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-border); transition: background 0.2s;
}
.ob-dot.done { background: var(--color-primary); }
.ob-dot.current { background: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-field-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 5px; }
.ob-tos {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: var(--color-text-muted);
  margin-bottom: 20px; line-height: 1.4;
}
.ob-securitize-card {
  border: 1px solid #2563EB; border-radius: var(--radius);
  padding: 18px 20px; background: #EFF6FF; text-align: center;
  margin-bottom: 20px;
}
.ob-pending-card {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 24px; text-align: center; margin-bottom: 16px;
}

/* ============================================================
   COMPANY PERMISSIONS WORKBENCH
   ============================================================ */

/* ---- Layout ---- */
.pw-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  min-height: calc(100vh - var(--topnav-height) - 120px);
  margin: -20px;  /* bleed into page-body padding */
}

.pw-sidebar {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 16px 0;
  overflow-y: auto;
}

.pw-main {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  overflow-y: auto;
}

/* ---- Sidebar tree ---- */
.pw-tree-company {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer; border-radius: 0;
  border-left: 3px solid transparent;
  transition: background .1s;
}
.pw-tree-company:hover { background: var(--color-border-light); }
.pw-tree-company.pw-tree-active {
  background: #fff;
  border-left-color: var(--color-primary);
}
.pw-tree-co-icon {
  width: 28px; height: 28px; border-radius: var(--radius);
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pw-tree-co-name  { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-tree-co-sub   { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }

.pw-tree-divider  { height: 1px; background: var(--color-border); margin: 10px 0; }
.pw-tree-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-text-muted);
  padding: 0 16px 6px;
}

.pw-tree-branch-wrap { margin-bottom: 2px; }
.pw-tree-branch {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 8px; cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .1s;
}
.pw-tree-branch:hover { background: var(--color-border-light); }
.pw-tree-branch.pw-tree-active { background: #fff; border-left-color: var(--color-primary); }
.pw-tree-branch-toggle {
  width: 18px; height: 18px; display: flex; align-items: center;
  justify-content: center; color: var(--color-text-muted); flex-shrink: 0;
  border-radius: 3px;
}
.pw-tree-branch-toggle:hover { background: var(--color-border); color: var(--color-text); }
.pw-tree-branch-icon {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--color-border); color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pw-tree-branch-name { font-size: 12px; font-weight: 600; line-height: 1.2; }
.pw-tree-branch-sub  { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }

.pw-tree-users { padding-left: 32px; }
.pw-tree-user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 4px; cursor: pointer;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: background .1s;
}
.pw-tree-user:hover { background: var(--color-border-light); }
.pw-tree-user.pw-tree-active { background: #fff; border-left-color: var(--color-accent); }
.pw-tree-user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pw-avatar-lg { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.pw-tree-user-name { font-size: 12px; font-weight: 500; line-height: 1.2; }
.pw-tree-user-sub  { font-size: 10px; margin-top: 1px; }
.pw-tree-user-info { min-width: 0; }

/* ---- Badges ---- */
.pw-badge-custom  { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: #e8f5ee; color: var(--color-accent); }
.pw-badge-inherit { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 10px; background: var(--color-border); color: var(--color-text-muted); }
.pw-tag           { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.pw-unsaved-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--color-warning-bg); color: var(--color-warning); margin-left: 8px; }

/* ---- Main panel ---- */
.pw-panel-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
  flex-shrink: 0;
}
.pw-panel-breadcrumb  { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.pw-breadcrumb-link   { cursor: pointer; color: var(--color-text-muted); }
.pw-breadcrumb-link:hover { color: var(--color-primary); text-decoration: underline; }
.pw-breadcrumb-sep    { color: var(--color-border); }
.pw-panel-title       { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.pw-panel-subtitle    { font-size: 12px; color: var(--color-text-secondary); }

.pw-panel-body { padding: 24px 28px; flex: 1; overflow-y: auto; }

.pw-section { margin-bottom: 32px; }
.pw-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.pw-section-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }

.pw-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.pw-template-selector-row { display: flex; align-items: center; gap: 10px; }
.pw-template-select {
  padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: 13px;
  background: #fff; color: var(--color-text); min-width: 220px;
  cursor: pointer;
}
.pw-template-select:focus { outline: none; border-color: var(--color-primary); }
.pw-template-desc { font-size: 12px; color: var(--color-text-secondary); margin-top: 8px; }
.pw-clear-btn { white-space: nowrap; }

.pw-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-size: 12px; box-sizing: border-box;
}
.pw-input:focus { outline: none; border-color: var(--color-primary); }

/* ---- Inheritance chain ---- */
.pw-inherit-chain {
  display: flex; align-items: stretch; gap: 0;
  background: var(--color-surface); border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.pw-inherit-node {
  flex: 1; padding: 12px 14px;
  border-right: 1px solid var(--color-border);
  transition: background .15s;
}
.pw-inherit-node:last-child { border-right: none; }
.pw-inherit-node.pw-inherit-active { background: #fff; }
.pw-inherit-node.pw-inherit-dim { opacity: .55; }
.pw-inherit-node.pw-inherit-result { background: var(--color-primary); color: #fff; }
.pw-inherit-node.pw-inherit-result .pw-inherit-level { color: rgba(255,255,255,.7); }
.pw-inherit-arrow {
  display: flex; align-items: center; padding: 0 4px;
  font-size: 14px; color: var(--color-text-muted);
  flex-shrink: 0; align-self: center;
}
.pw-inherit-level { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 4px; }
.pw-inherit-value { font-size: 12px; font-weight: 600; }

/* ---- Propagation table ---- */
.pw-prop-table { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.pw-prop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
}
.pw-prop-row:last-child { border-bottom: none; }
.pw-prop-branch  { font-weight: 600; min-width: 130px; }
.pw-prop-template { flex: 1; color: var(--color-text-secondary); font-size: 12px; }
.pw-prop-badge   { min-width: 120px; }
.pw-prop-users   { min-width: 50px; text-align: right; }

/* ---- Users list ---- */
.pw-user-list { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.pw-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #fff;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer; transition: background .1s;
}
.pw-user-row:last-child { border-bottom: none; }
.pw-user-row:hover { background: #f8f7f3; }
.pw-user-row.pw-user-row-active { background: #eef6f1; }

/* ---- Affect note ---- */
.pw-affect-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-warning);
  background: var(--color-warning-bg); border-radius: var(--radius);
  padding: 8px 12px; margin-top: 12px;
}

/* ---- Permission matrix ---- */
.pw-matrix-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pw-matrix { width: 100%; border-collapse: collapse; background: #fff; }
.pw-matrix thead th { background: var(--color-surface); }
.pw-matrix-action {
  font-size: 10px; font-weight: 600; text-align: center;
  padding: 8px 4px; color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  min-width: 64px;
}
.pw-matrix-scope {
  font-size: 11px; padding: 6px 12px;
  color: var(--color-text-secondary); white-space: nowrap;
  border-right: 1px solid var(--color-border-light);
  background: var(--color-surface); font-weight: 500;
}
.pw-matrix-cell { text-align: center; padding: 5px 4px; border-bottom: 1px solid var(--color-border-light); }
.pw-matrix tbody tr:last-child td { border-bottom: none; }
.pw-matrix tbody tr:hover td { background: #f8f7f3; }
.pw-matrix tbody tr:hover .pw-matrix-scope { background: var(--color-border-light); }

/* ---- Matrix value symbols ---- */
.perm-cell-grant   { color: var(--color-success); font-weight: 700; font-size: 13px; }
.perm-cell-deny    { color: var(--color-danger);  font-weight: 700; font-size: 13px; }
.perm-cell-inherit { color: var(--color-text-muted); font-size: 13px; }

/* ---- 3-state toggle ---- */
.btn-group-3state { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--color-border); }
.btn-group-3state button { padding: 3px 7px; font-size: 11px; border: none; background: var(--color-bg); color: var(--color-text-muted); cursor: pointer; border-right: 1px solid var(--color-border); line-height: 1.2; }
.btn-group-3state button:last-child { border-right: none; }
.btn-group-3state button:hover { background: var(--color-surface); }
.btn-group-3state button.active-grant   { background: var(--color-success-bg); color: var(--color-success); font-weight: 600; }
.btn-group-3state button.active-deny    { background: var(--color-danger-bg);  color: var(--color-danger);  font-weight: 600; }
.btn-group-3state button.active-inherit { background: var(--color-surface); color: var(--color-text-secondary); font-weight: 600; }

/* ---- Save bar ---- */
.pw-save-bar {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 28px;
  border-top: 1px solid var(--color-border);
  background: #fff;
  flex-shrink: 0;
}

/* ============================================================
   LOP — Token Cards
   ============================================================ */
.lop-token-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.lop-token-card {
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.lop-token-card-dark {
  background: var(--color-primary);
  color: #fff;
}
.lop-token-card-light {
  background: #fff;
  border: 1px solid var(--color-border);
}
.lop-token-card-ticker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 10px;
}
.lop-token-card-dark .lop-token-card-ticker { color: rgba(255,255,255,0.75); }
.lop-token-card-light .lop-token-card-ticker { color: var(--color-text-muted); }
.lop-token-card-price {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.lop-token-card-dark .lop-token-card-price { color: #fff; }
.lop-token-card-label {
  font-size: 11px;
  opacity: 0.7;
}
.lop-token-card-dark .lop-token-card-label { color: rgba(255,255,255,0.65); }
.lop-token-card-light .lop-token-card-label { color: var(--color-text-muted); }

/* ============================================================
   LOP — SAN Pool Summary Grid
   ============================================================ */
.san-pool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
}
.san-pool-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.san-pool-stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.san-pool-stat-label .pool-info-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 9px;
  text-align: center;
  line-height: 13px;
  color: var(--color-text-muted);
  margin-left: 3px;
  cursor: help;
  vertical-align: middle;
}

/* ============================================================
   LOP — Pool Summary Dashboard Section
   ============================================================ */
.pool-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.pool-summary-header .card-title { margin-bottom: 0; }
.pool-summary-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pool-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.pool-filter-chip-x {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1;
}
.pool-filter-chip-x:hover { color: var(--color-danger); }
.pool-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.pool-filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pool-filter-btn svg { width: 14px; height: 14px; }

/* ---- Map ---- */
.pool-map-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.pool-map-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}
.pool-map-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.pool-map-svg-wrap { flex: 1; min-width: 0; }
.pool-map-svg {
  width: 100%;
  height: auto;
  display: block;
}
.pool-map-svg path {
  stroke: #FFFFFF;
  stroke-width: 0.8;
  transition: opacity 0.15s;
  cursor: default;
}
.pool-map-svg path:hover {
  opacity: 0.75;
  stroke-width: 1.4;
}
.pool-map-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
  padding-top: 24px;
}
.pool-map-legend-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  white-space: nowrap;
}
.pool-map-legend-bar {
  width: 14px;
  height: 160px;
  border-radius: 4px;
  background: linear-gradient(to bottom, #1D3D2A, #2E7D32, #66BB6A, #A5D6A7, #E8F5E9);
}
.pool-map-legend-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
  margin-right: 6px;
}
.pool-map-legend-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pool-map-legend-tick {
  width: 6px;
  border-top: 1px solid var(--color-text-muted);
}

/* ---- Charts 2x2 grid ---- */
.pool-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pool-chart-card {
  background: var(--color-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius, 8px);
  padding: 20px;
}
.pool-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}
.pool-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pool-bar-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: right;
  white-space: nowrap;
}
.pool-bar-track {
  height: 18px;
  background: var(--color-surface);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
}
.pool-bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.3s ease;
}
.pool-bar-fill-blue { background: #4A7B9D; }
.pool-bar-fill-gold { background: #D4B896; }
.pool-chart-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-left: 80px;
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pool-charts-grid { grid-template-columns: 1fr; }
  .san-pool-grid { grid-template-columns: repeat(2, 1fr); }
  .pool-map-wrap { flex-direction: column; }
  .pool-map-legend { flex-direction: row; align-items: center; }
  .pool-map-legend-bar { width: 160px; height: 14px; background: linear-gradient(to right, #E8F5E9, #66BB6A, #2E7D32, #1D3D2A); }
  .pool-map-legend-labels { flex-direction: row; width: 160px; height: auto; }
}

/* ============================================================
   LOP — Filter Tabs (Applications)
   ============================================================ */
.lop-filter-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
  margin-top: 8px;
}
.lop-filter-tab {
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
  user-select: none;
}
.lop-filter-tab:hover { color: var(--color-text); }
.lop-filter-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   Administration Nav Dropdown
   ============================================================ */
.admin-nav-wrap {
  position: relative;
  display: inline-block;
}
.admin-nav-btn {
  background: none;
  border: none;
  font-family: inherit;
}
.admin-nav-btn.active {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
}
.admin-nav-caret {
  transition: transform 0.15s;
  flex-shrink: 0;
}
.admin-nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
.admin-nav-menu.open { display: block; }
.admin-nav-menu.open ~ .admin-nav-btn .admin-nav-caret,
.admin-nav-wrap:has(.admin-nav-menu.open) .admin-nav-caret { transform: rotate(180deg); }
.admin-nav-item {
  padding: 9px 16px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.1s;
}
.admin-nav-item:hover { background: rgba(29,61,42,0.08); }
.admin-nav-item.active { background: var(--color-primary-container); color: var(--color-on-primary-container); font-weight: 600; }

/* ============================================================
   Application Detail Layout
   ============================================================ */
.app-detail-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  min-height: 600px;
}
.app-detail-sidebar {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  overflow-y: auto;
}
.app-detail-sidebar-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 16px 16px 8px;
}
.app-detail-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text-secondary);
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s;
  line-height: 1.3;
}
.app-detail-step:hover { background: rgba(0,0,0,0.03); color: var(--color-text); }
.app-detail-step.active {
  background: rgba(29, 61, 42, 0.07);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}
.app-detail-step-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}
.app-detail-step-completed .app-detail-step-icon {
  background: var(--color-success);
  color: #fff;
}
.app-detail-step-in_progress .app-detail-step-icon {
  background: var(--color-primary);
  color: #fff;
}
.app-detail-step-pending .app-detail-step-icon {
  background: var(--color-border);
  color: var(--color-text-muted);
}
.app-detail-step-label { flex: 1; }
.app-detail-main {
  padding: 24px 28px;
  overflow-y: auto;
}
.app-header-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.app-header-address {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.app-header-citystate {
  font-size: 13px;
  color: var(--color-text-muted);
}
.app-step-section {
  background: #fff;
}
.app-step-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}
.app-step-subsection-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.app-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.app-detail-table thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 7px 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.app-detail-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
}
.app-detail-table td:first-child { color: var(--color-text-secondary); }
.app-detail-table td:last-child { text-align: right; font-weight: 500; }
.app-detail-table tbody tr:last-child td { border-bottom: none; }

/* Badge variants */
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-neutral { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* ============================================================
   Notification Bell
   ============================================================ */
.topnav-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background 0.12s, color 0.12s;
  margin-right: 4px;
  flex-shrink: 0;
}
.topnav-notif:hover { background: var(--color-surface); color: var(--color-text); }
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  background: #DC2626;
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}
.notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 360px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 300;
  overflow: hidden;
}
.notif-panel.open { display: block; }
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border-light);
  transition: background 0.1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item-clickable { cursor: pointer; }
.notif-item-clickable:hover { background: var(--color-surface); }
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.notif-dot-action  { background: #DC2626; }
.notif-dot-sent    { background: #3B82F6; }
.notif-dot-complete{ background: #10B981; }
.notif-dot-info    { background: #9CA3AF; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-msg {
  font-size: 12px;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 4px;
}
.notif-item-meta { display: flex; align-items: center; gap: 8px; }
.notif-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}
.notif-tag-action  { background: #FEE2E2; color: #DC2626; }
.notif-tag-sent    { background: #DBEAFE; color: #1D4ED8; }
.notif-tag-complete{ background: #D1FAE5; color: #065F46; }
.notif-tag-info    { background: var(--color-surface); color: var(--color-text-muted); }
.notif-time { font-size: 11px; color: var(--color-text-muted); }

/* ============================================================
   Administration Dashboard
   ============================================================ */
.admin-dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.admin-dash-kpi {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.admin-dash-kpi-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 6px;
}
.admin-dash-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 3px;
}
.admin-dash-kpi-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}
.admin-dash-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
}
.admin-dash-main { min-width: 0; }
.admin-dash-sidebar { min-width: 0; }
.admin-dash-quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-dash-quicklink {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  background: var(--color-bg);
}
.admin-dash-quicklink:hover { background: var(--color-surface); border-color: var(--color-primary); }
.admin-dash-quicklink-icon { font-size: 18px; flex-shrink: 0; }
.admin-dash-quicklink-label { font-size: 12px; font-weight: 700; color: var(--color-text); margin-bottom: 3px; }
.admin-dash-quicklink-desc  { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }

/* Activity feed */
.activity-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
}
.activity-feed-item:last-child { border-bottom: none; }
.activity-feed-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.activity-feed-body { flex: 1; color: var(--color-text); line-height: 1.4; }
.activity-feed-time { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; }

/* ============================================================
   Dashboard — KPI Cards + Pipeline
   ============================================================ */
.lop-kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.lop-kpi-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.lop-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 6px;
}
.lop-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 3px;
}
.lop-kpi-sub { font-size: 12px; color: var(--color-text-muted); }

.dashboard-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  margin-bottom: 0;
}
.dashboard-main { min-width: 0; }
.dashboard-sidebar { min-width: 0; }

.pipeline-stages { display: flex; flex-direction: column; gap: 10px; }
.pipeline-stage-row {
  display: grid;
  grid-template-columns: 140px 1fr 36px 110px;
  align-items: center;
  gap: 12px;
}
.pipeline-stage-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.pipeline-stage-bar-wrap {
  background: var(--color-surface);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.pipeline-stage-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.pipeline-stage-count { font-size: 13px; font-weight: 700; color: var(--color-text); text-align: right; }
.pipeline-stage-value { font-size: 12px; color: var(--color-text-muted); text-align: right; }

/* ============================================================
   Applications — Filter Tab Counts
   ============================================================ */
.lop-filter-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  margin-left: 4px;
  color: var(--color-text-muted);
}
.lop-filter-tab-count.active {
  background: rgba(29, 61, 42, 0.1);
  border-color: transparent;
  color: var(--color-primary);
}

/* Sort, pagination, bulk action bar */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { color: var(--color-primary); }
.sort-icon { font-size: 10px; opacity: 0.35; margin-left: 2px; }
.sort-icon.active { opacity: 1; color: var(--color-primary); }
.app-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
}
.app-pagination-info {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.app-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--color-primary-container);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

/* Days-in-stage badges */
.days-badge { font-size: 12px; font-weight: 600; }
.days-badge-ok   { color: #059669; }
.days-badge-warn { color: #D97706; }
.days-badge-alert { color: #DC2626; }

/* Loan progress dots */
.loan-progress-dots { display: flex; gap: 3px; align-items: center; }
.loan-progress-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-border);
}
.loan-progress-dot.done    { background: var(--color-primary); }
.loan-progress-dot.current {
  background: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(29, 61, 42, 0.2);
}

/* Needs-attention row */
.row-needs-attention td:first-child { border-left: 3px solid #DC2626; }
.row-needs-attention { background: #FFF8F8; }

/* ============================================================
   Application Detail — Redesigned
   ============================================================ */

/* Sticky loan context bar */
.loan-context-bar {
  position: sticky;
  top: var(--topnav-height);
  z-index: 50;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 24px;
  margin: -28px -40px 20px -40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
}
.loan-context-bar .context-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.loan-context-bar .context-address {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.loan-context-bar .context-address-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.loan-context-bar .context-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}
.loan-context-bar .context-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.loan-context-bar .context-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.loan-context-bar .context-chip-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.loan-context-bar .context-chip.chip-danger {
  border-color: var(--color-danger);
  background: rgba(220, 38, 38, 0.06);
}
.loan-context-bar .context-chip.chip-danger .context-chip-label { color: var(--color-danger); }

.app-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.app-detail-header-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 200px;
}
.app-detail-header-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
}
.app-detail-header-meta-row span { color: var(--color-text-muted); }

/* Horizontal stepper */
.app-stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.app-stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  min-width: 72px;
}
.app-stepper-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 5px;
  z-index: 1;
  position: relative;
  transition: background 0.15s;
}
.app-stepper-dot.done    { background: var(--color-primary); color: #fff; }
.app-stepper-dot.current { background: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px rgba(29,61,42,0.15); }
.app-stepper-dot.pending { background: var(--color-border); color: var(--color-text-muted); }
.app-stepper-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.2;
  max-width: 60px;
}
.app-stepper-step.current .app-stepper-label { color: var(--color-primary); font-weight: 600; }
.app-stepper-step.done .app-stepper-label    { color: var(--color-text-secondary); }
.app-stepper-line {
  position: absolute;
  top: 13px;
  left: calc(50% + 13px);
  right: calc(-50% + 13px);
  height: 2px;
  background: var(--color-border);
}
.app-stepper-line.done { background: var(--color-primary); }

/* Workstream detail text beneath stepper labels */
.app-stepper-detail {
  font-size: 9px;
  font-weight: 600;
  margin-top: 2px;
  text-align: center;
  white-space: nowrap;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Application detail body */
.app-detail-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}
.app-detail-content {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-height: 400px;
}

/* Communications panel */
.app-comms-panel {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.app-comms-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.app-comms-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.app-comms-item:last-child { border-bottom: none; }
.comms-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.comms-tag-sent     { background: #DBEAFE; color: #1D4ED8; }
.comms-tag-done     { background: #D1FAE5; color: #065F46; }
.comms-tag-due      { background: #FEF3C7; color: #92400E; }
.app-key-date-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--color-border-light);
}
.app-key-date-row:last-child { border-bottom: none; }
.app-key-date-row span { color: var(--color-text-muted); }

/* Appraisal grid */
.app-appraisal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.app-appraisal-field-label { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; font-weight: 600; letter-spacing: 0.03em; }
.app-appraisal-field-value { font-size: 14px; color: var(--color-text); font-weight: 500; }

/* Conditions checklist */
.app-conditions { display: flex; flex-direction: column; gap: 8px; }
.app-condition-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: default;
}

/* Enhanced condition rows with expand */
.condition-row-enhanced {
  border-bottom: 1px solid var(--color-border-light);
  padding: 8px 0;
  cursor: pointer;
}
.condition-row-enhanced:last-child { border-bottom: none; }
.condition-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.condition-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, padding 0.2s ease;
  padding: 0 0 0 28px;
}
.condition-expand.open {
  max-height: 120px;
  padding: 8px 0 4px 28px;
}

/* ============================================================
   Notification identifier line
   ============================================================ */
.notif-loan-id {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ============================================================
   Dashboard — Program Performance Cards
   ============================================================ */
.dash-programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.dash-program-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.dash-program-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}
.dash-program-company {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.dash-program-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.dash-program-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.dash-program-stat-lbl {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.dash-program-stages {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
}
.dash-program-stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.dash-program-stage-label {
  width: 100px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.dash-program-stage-bar-wrap {
  flex: 1;
  background: var(--color-surface);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}
.dash-program-stage-bar { height: 100%; border-radius: 3px; }
.dash-program-stage-count {
  width: 20px;
  text-align: right;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.dash-attn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEE2E2;
  color: #DC2626;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 8px;
}

/* ============================================================
   Dashboard — Attention Queue + Branch Performance
   ============================================================ */
.dash-mid-row {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.dash-attn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash-attn-table th {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  padding: 6px 10px; border-bottom: 1px solid var(--color-border); text-align: left;
}
.dash-attn-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border-light); }
.dash-attn-table tbody tr:last-child td { border-bottom: none; }
.dash-attn-ok {
  display: flex; align-items: center; gap: 8px;
  padding: 20px; font-size: 13px; color: var(--color-success);
}

/* ============================================================
   Admin Dashboard — Onboarding Funnel
   ============================================================ */
.admin-funnel-row {
  display: grid;
  grid-template-columns: 160px 1fr 40px 40px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.admin-funnel-row:last-child { border-bottom: none; }
.admin-funnel-label { font-size: 12px; color: var(--color-text-secondary); }
.admin-funnel-bar-wrap {
  background: var(--color-surface);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.admin-funnel-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.admin-funnel-count { font-size: 13px; font-weight: 700; text-align: right; color: var(--color-text); }
.admin-funnel-pct { font-size: 11px; text-align: right; color: var(--color-text-muted); }

/* ============================================================
   Dashboard — Vertical Bar Chart (Pipeline by Stage)
   ============================================================ */
.pipeline-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 4px;
}
.pipeline-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.pipeline-bar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}
.pipeline-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.pipeline-bar-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 6px;
  line-height: 1.3;
}
.pipeline-bar-value {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 2px;
}

/* ── Horizontal stage bar chart (Pipeline by Stage) ── */
.horiz-stage-chart { display: flex; flex-direction: column; gap: 10px; }
.horiz-stage-row { display: grid; grid-template-columns: 120px 1fr 32px 60px; align-items: center; gap: 10px; }
.horiz-stage-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; text-align: right; }
.horiz-stage-track { background: var(--color-surface); border-radius: 4px; height: 12px; overflow: hidden; }
.horiz-stage-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.horiz-stage-count { font-size: 13px; font-weight: 700; color: var(--color-text); text-align: center; }
.horiz-stage-value { font-size: 11px; color: var(--color-text-muted); text-align: right; }

/* ── Program filter tabs (Pipeline by Stage) ── */
.dash-prog-tabs { display: flex; gap: 4px; }
.dash-prog-tab { padding: 4px 16px; font-size: 12px; font-weight: 500; border: 1px solid var(--color-border); border-radius: 20px; background: transparent; color: var(--color-text-secondary); cursor: pointer; letter-spacing: 0.05em; }
.dash-prog-tab:hover { background: rgba(29,61,42,0.08); color: var(--color-text); }
.dash-prog-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Company/Branch table rows ── */
.dash-co-row { cursor: pointer; background: var(--color-surface); }
.dash-co-row:hover { background: var(--color-surface-hover, #F1F5F9); }
.dash-co-row td { padding-top: 10px; padding-bottom: 10px; }
.dash-branch-row td { padding-top: 7px; padding-bottom: 7px; }
.dash-co-caret { font-size: 9px; color: var(--color-text-muted); width: 12px; display: inline-block; }

/* ============================================================
   MOBILE VIEW SYSTEM
   ============================================================ */

/* ── Variables ── */
.mobile-shell {
  --mobile-bottom-nav-height: 64px;
  --mobile-card-radius: 12px;
  --mobile-touch-min: 48px;
}

/* ── View Mode Toggle (role-select page) ── */
.view-mode-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.view-mode-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.view-mode-toggle {
  position: relative;
  display: flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  padding: 3px;
  cursor: pointer;
  user-select: none;
  gap: 0;
}
.view-mode-opt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-full, 9999px);
  transition: color 0.18s;
  white-space: nowrap;
}
.view-mode-opt.active { color: var(--color-text); }
.view-mode-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.view-mode-slider.mobile { transform: translateX(100%); }
.view-mode-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ── Mobile Shell ── */
.mobile-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--color-bg);
  position: relative;
  box-shadow: 0 0 0 1px var(--color-border);
}
.mobile-main {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--mobile-bottom-nav-height);
}

/* ── Bottom Nav ── */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: var(--mobile-bottom-nav-height);
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  z-index: 200;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-nav-track {
  display: flex;
  height: 100%;
  align-items: stretch;
  justify-content: space-around;
}
.mobile-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-height: var(--mobile-touch-min);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.15s;
  padding: 8px 4px;
  font-family: inherit;
}
.mobile-nav-tab.active { color: var(--color-primary); }
.mobile-nav-tab.active .mobile-nav-icon-bg {
  background: rgba(29,61,42,0.1);
}
.mobile-nav-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-icon-bg {
  border-radius: 12px;
  padding: 4px 10px;
  transition: background 0.15s;
}
.mobile-nav-badge {
  position: absolute;
  top: -1px;
  right: 3px;
  width: 7px;
  height: 7px;
  background: var(--color-danger, #DC2626);
  border-radius: 50%;
  border: 2px solid var(--color-card);
}
.mobile-nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Mobile Page Header ── */
.m-page-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}
.m-page-header-left { display: flex; align-items: center; gap: 10px; }
.m-page-title {
  font-family: var(--font-heading, 'IvyPresto Display', serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.m-page-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.m-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  background: var(--color-primary-container, #B6ECC9);
  color: var(--color-primary-dark, #001F0F);
}

/* ── KPI Strip ── */
.m-kpi-strip {
  display: grid;
  gap: 10px;
  padding: 14px 14px 4px;
}
.m-kpi-strip.cols-2 { grid-template-columns: repeat(2, 1fr); }
.m-kpi-strip.cols-3 { grid-template-columns: repeat(3, 1fr); }
.m-kpi-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mobile-card-radius);
  padding: 14px 10px;
  text-align: center;
}
.m-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.m-kpi-value.accent-danger { color: var(--color-danger, #DC2626); }
.m-kpi-value.accent-warning { color: var(--color-warning, #D97706); }
.m-kpi-value.accent-success { color: var(--color-success, #16A34A); }
.m-kpi-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.3;
  font-weight: 500;
}
.m-kpi-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Section Headers ── */
.m-section {
  padding: 14px 14px 6px;
}
.m-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 6px;
}
.m-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.m-section-count {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ── List Items ── */
.m-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}
.m-list-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mobile-card-radius);
  padding: 13px 14px;
  min-height: var(--mobile-touch-min);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.m-list-item:active { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.m-list-item.attention {
  border-left: 3px solid var(--color-warning, #D97706);
}
.m-list-item.danger {
  border-left: 3px solid var(--color-danger, #DC2626);
}
.m-list-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.m-list-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-list-item-id {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  flex-shrink: 0;
}
.m-list-item-sub {
  font-size: 12px;
  color: var(--color-text-secondary, #6B7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-list-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  gap: 8px;
}
.m-list-item-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  flex-shrink: 0;
}
.m-days-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9999px;
  background: var(--color-warning-bg, #FEF3C7);
  color: var(--color-warning, #D97706);
  flex-shrink: 0;
}
.m-days-badge.ok {
  background: var(--color-surface, #F8F9FA);
  color: var(--color-text-muted);
}

/* ── Stage Group Headers (LO list) ── */
.m-stage-group-header {
  padding: 12px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-secondary, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.m-stage-count-badge {
  background: var(--color-surface, #F8F9FA);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 9999px;
}

/* ── Filter Pills ── */
.m-filter-strip {
  display: flex;
  gap: 6px;
  padding: 10px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.m-filter-strip::-webkit-scrollbar { display: none; }
.m-filter-pill {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-text-secondary, #6B7280);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.m-filter-pill.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.m-filter-pill:not(.active):hover {
  background: rgba(29,61,42,0.06);
  color: var(--color-text);
}

/* ── Search ── */
.m-search-wrap { padding: 4px 14px 8px; }
.m-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-card);
  color: var(--color-text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.m-search-input:focus { border-color: var(--color-primary); }
.m-search-input::placeholder { color: var(--color-text-muted); }

/* ── Alert Cards ── */
.m-alert-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-alert-card {
  background: #FFFBEB;
  border: 1px solid #F59E0B;
  border-radius: var(--mobile-card-radius);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.m-alert-card.danger {
  background: #FEF2F2;
  border-color: #EF4444;
}
.m-alert-card.info {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.m-alert-icon { flex-shrink: 0; margin-top: 1px; }
.m-alert-body { flex: 1; min-width: 0; }
.m-alert-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.m-alert-sub { font-size: 11px; color: var(--color-text-secondary, #6B7280); margin-top: 3px; line-height: 1.4; }
.m-alert-action {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

/* ── Activity Feed ── */
.m-activity-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.m-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light, #F0EFEA);
  min-height: var(--mobile-touch-min);
}
.m-activity-item:last-child { border-bottom: none; }
.m-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-container, #B6ECC9);
  border: 2px solid var(--color-primary, #1D3D2A);
  flex-shrink: 0;
  margin-top: 5px;
}
.m-activity-body { flex: 1; min-width: 0; }
.m-activity-text { font-size: 12px; color: var(--color-text); line-height: 1.4; }
.m-activity-time { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ── Pipeline Bar Summary ── */
.m-pipeline-bars {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-pipeline-row {
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  align-items: center;
  gap: 10px;
}
.m-pipeline-label {
  font-size: 11px;
  color: var(--color-text-secondary, #6B7280);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-pipeline-track {
  background: var(--color-surface, #F8F9FA);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}
.m-pipeline-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary-light, #2D6048);
  min-width: 4px;
  transition: width 0.3s;
}
.m-pipeline-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

/* ── Profile ── */
.m-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.m-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.m-profile-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}
.m-profile-role {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
  text-align: center;
}
.m-info-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mobile-card-radius);
  margin: 14px 14px 0;
  overflow: hidden;
}
.m-info-row {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border-light, #F0EFEA);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--mobile-touch-min);
  gap: 12px;
}
.m-info-row:last-child { border-bottom: none; }
.m-info-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.m-info-value {
  font-size: 13px;
  color: var(--color-text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-profile-actions {
  padding: 16px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-btn {
  width: 100%;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--mobile-card-radius);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  text-align: center;
}
.m-btn:hover { opacity: 0.88; }
.m-btn-primary { background: var(--color-primary); color: #fff; }
.m-btn-secondary {
  background: var(--color-surface, #F8F9FA);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* ── Notifications (full screen) ── */
.m-notif-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}
.m-notif-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mobile-card-radius);
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: var(--mobile-touch-min);
  cursor: pointer;
  transition: border-color 0.15s;
}
.m-notif-item:active { border-color: var(--color-primary); }
.m-notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.m-notif-icon.action { background: #FEE2E2; color: #DC2626; }
.m-notif-icon.sent   { background: #DBEAFE; color: #2563EB; }
.m-notif-icon.complete { background: #D1FAE5; color: #16A34A; }
.m-notif-icon.info   { background: var(--color-surface); color: var(--color-text-muted); }
.m-notif-body { flex: 1; min-width: 0; }
.m-notif-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.m-notif-msg { font-size: 12px; color: var(--color-text-secondary, #6B7280); margin-top: 2px; line-height: 1.4; }
.m-notif-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.m-notif-loan-id {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono, monospace);
}
.m-notif-time {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.m-notif-dot {
  font-size: 10px;
  color: var(--color-text-muted);
}

/* ── Company rows (operator mobile) ── */
.m-co-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--mobile-card-radius);
  overflow: hidden;
}
.m-co-row {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  min-height: var(--mobile-touch-min);
}
.m-co-name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.m-co-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.m-co-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.m-onboard-pill {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9999px;
}
.m-onboard-pill.green { background: #D1FAE5; color: #065F46; }
.m-onboard-pill.amber { background: #FEF3C7; color: #92400E; }
.m-onboard-pill.red   { background: #FEE2E2; color: #991B1B; }
.m-co-detail {
  padding: 0 14px 12px;
  border-top: 1px solid var(--color-border-light, #F0EFEA);
  display: none;
}
.m-co-detail.open { display: block; }
.m-co-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 12px;
  color: var(--color-text-secondary, #6B7280);
  border-bottom: 1px solid var(--color-border-light, #F0EFEA);
}
.m-co-detail-row:last-child { border-bottom: none; }
.m-co-detail-val { font-weight: 600; color: var(--color-text); }

/* ── Misc utility ── */
.m-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.m-empty-icon {
  font-size: 32px;
  margin-bottom: 10px;
  opacity: 0.4;
}
.m-spacer { height: 12px; }

/* ── Back button ── */
.m-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-surface, #F8F9FA);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text);
  transition: background 0.15s;
}
.m-back-btn:active { background: var(--color-border); }

/* ── Vertical Stepper ── */
.m-stepper {
  padding: 0 14px 8px;
  display: flex;
  flex-direction: column;
}
.m-stepper-step {
  display: flex;
  align-items: stretch;
  min-height: 44px;
}
.m-stepper-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  flex-shrink: 0;
}
.m-stepper-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-muted);
  transition: all 0.2s;
}
.m-stepper-step.done .m-stepper-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-size: 12px;
}
.m-stepper-step.current .m-stepper-dot {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(29,61,42,0.15);
}
.m-stepper-line {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin: 3px 0;
  min-height: 12px;
}
.m-stepper-step.done .m-stepper-line {
  background: var(--color-primary);
}
.m-stepper-content {
  flex: 1;
  padding: 3px 0 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-stepper-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.m-stepper-step.done .m-stepper-label { color: var(--color-text); }
.m-stepper-step.current .m-stepper-label { color: var(--color-text); font-weight: 600; }
.m-stepper-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 9999px;
  background: var(--color-primary);
  color: #fff;
}
.m-stepper-check {
  font-size: 10px;
  color: var(--color-success);
  font-weight: 500;
}

/* ── Document action buttons (small) ── */
.m-btn-sm {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.m-btn-sm:hover { opacity: 0.88; }
.m-btn-sm-primary {
  background: var(--color-primary);
  color: #fff;
}
.m-btn-sm-secondary {
  background: var(--color-surface, #F8F9FA);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* ============================================================
   ENRICHED STEP CONTENT — Upload, Process Tracker, Compliance
   ============================================================ */

/* Upload dropzone */
.upload-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-dropzone:hover,
.upload-dropzone.dragover {
  border-color: var(--color-primary);
  background: rgba(29,61,42,0.03);
}
.upload-dropzone-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.upload-dropzone-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.upload-dropzone-hint {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Upload doc table */
.upload-doc-table {
  width: 100%;
  border-collapse: collapse;
}
.upload-doc-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.upload-doc-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-light, #f0efe9);
  font-size: 13px;
  color: var(--color-text);
  vertical-align: middle;
}
.upload-doc-table tr:last-child td {
  border-bottom: none;
}
.upload-action-link {
  font-size: 12px;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.upload-action-link:hover {
  text-decoration: underline;
}
.upload-action-zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-info, #2563EB);
  cursor: pointer;
}
.upload-action-zone:hover {
  text-decoration: underline;
}

/* Process tracker */
.process-tracker {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 20px;
}
.process-tracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.process-tracker-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}
.process-tracker-progress {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.process-tracker-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-light, #f0efe9);
}
.process-tracker-task:last-child {
  border-bottom: none;
}
.process-tracker-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 700;
}
.process-tracker-check.done {
  background: var(--color-success);
  color: #fff;
}
.process-tracker-check.active {
  background: var(--color-info, #2563EB);
  color: #fff;
}
.process-tracker-check.pending {
  background: var(--color-border);
  color: var(--color-text-muted);
}
.process-tracker-task-label {
  flex: 1;
  font-size: 13px;
  color: var(--color-text);
  min-width: 0;
}
.process-tracker-task-label.done {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.process-tracker-validate-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
}
.process-tracker-validate-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Step summary metric strip */
.step-summary-strip {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.step-summary-strip.cols-3 { grid-template-columns: repeat(3, 1fr); }
.step-summary-strip.cols-4 { grid-template-columns: repeat(4, 1fr); }
.step-summary-strip.cols-5 { grid-template-columns: repeat(5, 1fr); }
.step-summary-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.step-summary-metric-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Compliance grid */
.compliance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.compliance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  font-size: 13px;
}
.compliance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.compliance-dot.pass { background: var(--color-success); }
.compliance-dot.fail { background: var(--color-danger); }
.compliance-dot.pending { background: var(--color-warning); }

/* Disclosure timeline */
.disclosure-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 20px;
  position: relative;
}
.disclosure-timeline-step {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 24px;
}
.disclosure-timeline-step::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border);
}
.disclosure-timeline-step:first-child::before { left: 50%; }
.disclosure-timeline-step:last-child::before  { right: 50%; }
.disclosure-timeline-step.done::before { background: var(--color-success); }
.disclosure-timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  z-index: 1;
}
.disclosure-timeline-dot.done { background: var(--color-success); }
.disclosure-timeline-dot.active { background: var(--color-info, #2563EB); }
.disclosure-timeline-dot.pending { background: var(--color-border); }
.disclosure-timeline-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 4px;
}
.disclosure-timeline-date {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* 4-column form grid */
.form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.form-grid-4 .form-full { grid-column: 1 / -1; }
.form-grid-4 .form-half { grid-column: span 2; }

/* Info callout */
.step-info-callout {
  padding: 14px 16px;
  background: #EFF6FF;
  border-radius: var(--radius-lg);
  border: 1px solid #BFDBFE;
  font-size: 13px;
  color: #1E40AF;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.step-info-callout-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

/* Step completion list (for Step 8) */
.step-completion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-completion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light, #f0efe9);
  font-size: 13px;
}
.step-completion-item:last-child { border-bottom: none; }
.step-completion-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.step-completion-icon.done {
  background: var(--color-success);
  color: #fff;
}
.step-completion-icon.pending {
  background: var(--color-border);
  color: var(--color-text-muted);
}
.step-completion-label { flex: 1; }
.step-completion-date {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Condition category header */
.condition-category-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--color-border);
  margin-top: 8px;
}
.condition-category-header:first-child { margin-top: 0; }

/* Doc package summary bar */
.doc-package-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: 16px;
}
.doc-package-stat {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.doc-package-stat strong {
  font-weight: 700;
  color: var(--color-text);
}
.doc-package-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.doc-package-bar-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ================================================================
   ORIGINATIONS VIEW — Enhanced List + Detail
   ================================================================ */

/* ── Filter Tabs ── */
.orig-filter-tabs { display: flex; gap: 2px; background: var(--color-surface); border-radius: 8px; padding: 3px; margin-bottom: 16px; width: fit-content; }
.orig-filter-tab {
  padding: 7px 18px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s;
}
.orig-filter-tab:hover { color: var(--color-text); }
.orig-filter-tab.active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── Table Enhancements ── */
.orig-table-row { cursor: pointer; transition: background 0.1s; }
.orig-table-row:hover { background: rgba(29, 61, 42, 0.04); }
.orig-table-search { width: 100%; padding: 6px 8px; font-size: 11px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); margin-top: 4px; }
.orig-table-search:focus { outline: none; border-color: var(--color-primary); }
.orig-col-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.orig-col-sort:hover { color: var(--color-primary); }
.orig-progress-bar { width: 60px; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 6px; }
.orig-progress-bar-fill { height: 100%; background: var(--color-success); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════════
   UNIFIED DETAIL VIEW — shared by Originations & Applications
   ══════════════════════════════════════════════════════════════ */

/* ── Back button ── */
.ud-back-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 16px;
}
.ud-back-btn:hover { text-decoration: underline; }

/* ── Context Header ── */
.ud-context-header {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 20px 24px; margin-bottom: 16px;
}
.ud-context-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.ud-context-address { font-size: 20px; font-weight: 700; color: var(--color-text); }
.ud-context-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.ud-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--color-info); color: var(--color-info); background: var(--color-info-bg);
}
.ud-status-pill.completed { border-color: var(--color-success); color: #065F46; background: var(--color-success-bg); }
.ud-status-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ud-context-chips {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
.ud-chip { display: flex; flex-direction: column; min-width: 100px; }
.ud-chip-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ud-chip-value { font-size: 14px; font-weight: 700; color: var(--color-text); }
.ud-chip-value.warn { color: var(--color-danger); }
.ud-chip-value.tbd { color: var(--color-text-muted); }

/* ── Integrated Progress Bar (inside context header) ── */
.ud-progress-strip { margin-top: 16px; }
.ud-progress-bar-segmented {
  display: flex; height: 6px; border-radius: 3px; gap: 2px;
  margin-bottom: 10px; position: relative;
}
.ud-progress-segment {
  height: 100%; border-radius: 3px; transition: all 0.2s; cursor: pointer;
  position: relative; overflow: visible;
}
.ud-progress-segment.done { background: var(--color-success); }
.ud-progress-segment.current { background: var(--color-info); animation: ud-pulse 2s ease-in-out infinite; }
.ud-progress-segment.pending { background: var(--color-border); }
@keyframes ud-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
/* Rich tooltip card on segment hover */
.ud-progress-segment-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--color-text); font-size: 12px;
  padding: 10px 14px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
  min-width: 180px;
}
.ud-progress-segment-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
.ud-progress-segment:hover .ud-progress-segment-tip { opacity: 1; }
.ud-progress-segment:hover { filter: brightness(1.15); height: 10px; margin-top: -2px; z-index: 21; }
/* Tooltip inner layout */
.ud-seg-tip-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ud-seg-tip-icon {
  width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ud-seg-tip-icon svg { width: 12px; height: 12px; stroke: #fff; fill: none; }
.ud-seg-tip-icon.done { background: var(--color-success); }
.ud-seg-tip-icon.current { background: var(--color-info); }
.ud-seg-tip-icon.pending { background: var(--color-border); }
.ud-seg-tip-icon.pending svg { stroke: var(--color-text-muted); }
.ud-seg-tip-name { font-weight: 700; font-size: 12px; }
.ud-seg-tip-status { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.ud-seg-tip-status.done { background: var(--color-success-bg); color: #065F46; }
.ud-seg-tip-status.current { background: var(--color-info-bg); color: var(--color-info); }
.ud-seg-tip-status.pending { background: var(--color-surface); color: var(--color-text-muted); }
.ud-seg-tip-progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-text-muted); }
.ud-seg-tip-bar { flex: 1; height: 3px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.ud-seg-tip-bar-fill { height: 100%; border-radius: 2px; background: var(--color-success); }
/* Deadline in action banner — right-aligned next to button */
.ud-action-banner-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.ud-action-banner-deadline { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; text-align: right; }
.ud-action-banner-deadline.overdue { color: var(--color-danger); font-weight: 600; }
.ud-action-banner-deadline.soon { color: var(--color-warning); font-weight: 600; }
/* Stage label row below the bar */
.ud-progress-meta {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
}
.ud-progress-stage-icon {
  width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-info); flex-shrink: 0;
}
.ud-progress-stage-icon svg { width: 14px; height: 14px; stroke: #fff; fill: none; }
.ud-progress-stage-icon.done { background: var(--color-success); }
.ud-progress-stage-label { font-weight: 700; color: var(--color-text); }
.ud-progress-stage-count { color: var(--color-text-muted); font-weight: 600; }
.ud-progress-overall { margin-left: auto; color: var(--color-text-muted); font-weight: 600; font-size: 11px; }

/* ── Action Banner (between header and content) ── */
.ud-action-banner {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid var(--color-warning); border-left: 4px solid var(--color-warning);
  border-radius: 10px; padding: 12px 18px; margin-bottom: 16px;
}
.ud-action-banner.complete {
  border-color: var(--color-success); border-left-color: var(--color-success);
}
.ud-action-banner-icon {
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--color-warning-bg); color: var(--color-warning); font-size: 16px; flex-shrink: 0;
}
.ud-action-banner.complete .ud-action-banner-icon { background: var(--color-success-bg); color: var(--color-success); }
.ud-action-banner-body { flex: 1; min-width: 0; }
.ud-action-banner-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-warning); margin-bottom: 1px; }
.ud-action-banner.complete .ud-action-banner-label { color: var(--color-success); }
.ud-action-banner-text { font-size: 14px; font-weight: 700; color: var(--color-text); }
.ud-action-banner-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.ud-action-banner-btn {
  padding: 7px 18px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: none; background: var(--color-primary); color: #fff;
  cursor: pointer; white-space: nowrap; transition: background 0.12s;
}
.ud-action-banner-btn:hover { filter: brightness(1.1); }

/* ── Content Grid (main + sidebar) ── */
.ud-content-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }

/* ── Content Tabs ── */
.ud-content-tabs { display: flex; gap: 2px; background: var(--color-surface); border-radius: 8px; padding: 3px; margin-bottom: 16px; width: fit-content; }
.ud-content-tab {
  padding: 7px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: all 0.12s;
}
.ud-content-tab:hover { color: var(--color-text); }
.ud-content-tab.active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── Content Main ── */
.ud-content-main { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.ud-content-section { padding: 20px 24px; }
.ud-content-section + .ud-content-section { border-top: 1px solid var(--color-surface); }
.ud-section-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ud-section-count { font-size: 11px; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); padding: 2px 8px; border-radius: 10px; }

/* ── Task Rows ── */
.ud-task-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--color-surface);
}
.ud-task-row:last-child { border-bottom: none; }
.ud-task-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.ud-task-icon.done { background: #16A34A; color: #fff; }
.ud-task-icon.active { background: var(--color-info); color: #fff; font-size: 8px; }
.ud-task-icon.pending { border: 2px solid var(--color-border); background: #fff; }
.ud-task-label { flex: 1; font-size: 13px; }
.ud-task-label.done { color: var(--color-text-muted); }
/* Owner avatar — compact circle with initials */
.ud-task-owner {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: -0.02em; flex-shrink: 0;
  background: var(--color-surface); color: var(--color-text-muted);
  position: relative; cursor: default;
}
.ud-task-owner.lo { background: #EDE9FE; color: #6D28D9; }
.ud-task-owner.am { background: #DBEAFE; color: #1E40AF; }
.ud-task-owner.borrower { background: #FEF3C7; color: #92400E; }
.ud-task-owner.system { background: var(--color-surface); color: var(--color-text-muted); }
/* Tooltip for owner full name */
.ud-task-owner-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--color-text); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.12s; z-index: 10;
}
.ud-task-owner-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 3px solid transparent; border-top-color: var(--color-text);
}
.ud-task-owner:hover .ud-task-owner-tip { opacity: 1; }
.ud-task-action {
  padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--color-primary); color: var(--color-primary); background: transparent;
  cursor: pointer; white-space: nowrap; transition: all 0.12s;
}
.ud-task-action:hover { background: var(--color-primary); color: #fff; }
.ud-task-action.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Info Grid ── */
.ud-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.ud-info-item { padding: 6px 0; }
.ud-info-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ud-info-value { font-size: 14px; font-weight: 600; color: var(--color-text); margin-top: 1px; }
.ud-info-value.tbd { color: var(--color-text-muted); }

/* ── Document Rows ── */
.ud-doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-surface); }
.ud-doc-row:last-child { border-bottom: none; }
.ud-doc-icon { width: 32px; height: 32px; border-radius: 6px; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(--color-text-muted); }
.ud-doc-info { flex: 1; }
.ud-doc-name { font-size: 13px; font-weight: 600; }
.ud-doc-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.ud-doc-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.ud-doc-badge.approved { background: var(--color-success-bg); color: #065F46; }
.ud-doc-badge.pending { background: var(--color-warning-bg); color: #92400E; }
.ud-doc-badge.missing { background: var(--color-danger-bg); color: #991B1B; }

/* ── File Drop Zone ── */
.ud-dropzone {
  border: 2px dashed var(--color-border); border-radius: 10px; padding: 24px;
  text-align: center; margin-bottom: 16px; transition: all 0.15s;
  background: var(--color-surface); cursor: pointer;
}
.ud-dropzone:hover, .ud-dropzone.dragover {
  border-color: var(--color-primary); background: rgba(29,61,42,0.04);
}
.ud-dropzone-icon { font-size: 28px; color: var(--color-text-muted); margin-bottom: 6px; }
.ud-dropzone.dragover .ud-dropzone-icon { color: var(--color-primary); }
.ud-dropzone-text { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.ud-dropzone-text span { color: var(--color-primary); text-decoration: underline; cursor: pointer; }
.ud-dropzone-hint { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* ── Right Sidebar Panels ── */
.ud-sidebar-panel {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.ud-sidebar-panel-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); padding: 14px 16px 8px;
}
.ud-sidebar-item { padding: 8px 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; }
.ud-sidebar-item + .ud-sidebar-item { border-top: 1px solid var(--color-surface); }
.ud-sidebar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ud-sidebar-dot.red { background: var(--color-danger); }
.ud-sidebar-dot.amber { background: var(--color-warning); }
.ud-sidebar-dot.green { background: #16A34A; }
.ud-sidebar-dot.blue { background: var(--color-info); }
.ud-sidebar-item-text { flex: 1; }
.ud-sidebar-item-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.ud-sidebar-kv { padding: 8px 16px; display: flex; justify-content: space-between; font-size: 13px; }
.ud-sidebar-kv + .ud-sidebar-kv { border-top: 1px solid var(--color-surface); }
.ud-sidebar-kv-label { color: var(--color-text-muted); }
.ud-sidebar-kv-value { font-weight: 600; color: var(--color-text); }
.ud-sidebar-kv-value.warn { color: var(--color-danger); }

/* ── Progress bar (inline) ── */
.ud-progress-bar { height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.ud-progress-fill { height: 100%; background: var(--color-success); border-radius: 2px; }

/* ── Stage section (in tasks tab, collapsible) ── */
.ud-stage-section { }
.ud-stage-section.in-progress { border-left: 3px solid var(--color-info); }
.ud-stage-section-header { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ud-stage-section-header .ud-section-title { margin-bottom: 0; }
.ud-stage-section-toggle { font-size: 12px; color: var(--color-text-muted); margin-left: auto; transition: transform 0.15s; }
.ud-stage-section-toggle.open { transform: rotate(90deg); }

/* ── History/Activity ── */
.ud-timeline { position: relative; padding-left: 24px; }
.ud-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--color-border); }
.ud-timeline-item { position: relative; padding-bottom: 16px; }
.ud-timeline-dot {
  position: absolute; left: -20px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--color-primary); border: 2px solid #fff;
}
.ud-timeline-content { font-size: 13px; color: var(--color-text); }
.ud-timeline-time { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

/* ============================================================
   INVESTOR PROSPECT DASHBOARD
   ============================================================ */

/* ── Body wrapper ── */
.prospect-body {
  padding: 32px 40px 40px;
}

/* ── Hero ── */
.prospect-hero {
  background: linear-gradient(135deg, #1D3D2A 0%, #2D6048 60%, #3D7A52 100%);
  color: #fff;
  padding: 48px 40px 40px;
}
.prospect-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
}
.prospect-hero-text { flex: 1; }
.prospect-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.prospect-hero-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #fff;
}
.prospect-tagline {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 520px;
}
.prospect-hero-stats {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}
.prospect-hero-stat {
  text-align: center;
  padding: 16px 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  min-width: 90px;
}
.prospect-hero-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.prospect-hero-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Sections ── */
.prospect-section {
  margin-bottom: 36px;
}
.prospect-section:last-child {
  margin-bottom: 0;
}
.prospect-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.prospect-section-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 20px;
}
.prospect-section-header .prospect-section-title {
  margin-bottom: 0;
}

/* ── Program Overview Cards ── */
.prospect-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.prospect-program-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  border-left: 4px solid var(--color-primary);
}
.prospect-program-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.prospect-program-geo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.prospect-program-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 20px;
}
.prospect-program-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  margin-bottom: 20px;
}
.prospect-program-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 12px;
}
.prospect-pm-label {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.prospect-pm-value {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.prospect-program-params {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.prospect-program-params span {
  background: var(--color-bg);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Borrower Profile Comparison ── */
.prospect-comparison {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.prospect-comparison-col {
  flex: 1;
  padding: 24px;
}
.prospect-comparison-before {
  background: #fafafa;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border-right: 1px solid var(--color-border);
}
.prospect-comparison-after {
  background: rgba(29, 61, 42, 0.04);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border: 2px solid var(--color-primary);
  border-left: none;
}
.prospect-comparison-arrow {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #fafafa;
}
.prospect-comp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.prospect-comp-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prospect-comp-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.prospect-comp-bold {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text);
}
.prospect-comp-green {
  color: var(--color-primary) !important;
}
.prospect-comp-gap {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-danger);
}
.prospect-comp-affordable {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}
.prospect-comp-headline {
  text-align: center;
  padding: 20px 24px 4px;
  font-size: 14px;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
  margin-top: 0;
}
.prospect-comp-headline strong {
  font-weight: 700;
  color: var(--color-text);
}

/* ── Impact Summary ── */
.prospect-impact-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 24px;
}
.prospect-gap-visual {
  background: rgba(29, 61, 42, 0.04);
  border: 1px solid rgba(29, 61, 42, 0.15);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}
.prospect-gap-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.prospect-gap-value {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.prospect-gap-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Borrower Stories ── */
.prospect-stories-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.prospect-story-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.prospect-story-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-bg);
  color: var(--color-text-muted);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  border: 1px solid var(--color-border);
}
.prospect-story-headline {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.3;
}
.prospect-story-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── 30-Year Projections ── */
.prospect-projections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.prospect-chart-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px 16px;
}
.prospect-chart-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.prospect-chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.prospect-chart-text {
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-primary);
}
.prospect-chart-xaxis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 6px;
  padding: 0 10px;
}
.prospect-chart-topval {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.prospect-chart-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.prospect-legend-line {
  display: inline-block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  vertical-align: middle;
  margin-right: 4px;
}

/* ── Bar chart (Active Homeowners) ── */
.prospect-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
}
.prospect-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}
.prospect-bar {
  width: 100%;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.3s;
}
.prospect-bar-year {
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Projection note ── */
.prospect-proj-note {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── CTA ── */
.prospect-cta {
  background: linear-gradient(135deg, #1D3D2A 0%, #2D6048 100%);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
}
.prospect-cta-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 12px;
}
.prospect-cta-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.prospect-cta .btn-primary {
  background: #fff;
  color: var(--color-primary);
  font-weight: 600;
  border: none;
}
.prospect-cta .btn-primary:hover {
  background: rgba(255,255,255,0.9);
}

/* ── Role chip for investor_prospect ── */
.role-investor-prospect {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .prospect-hero-inner { flex-direction: column; }
  .prospect-hero-stats { flex-wrap: wrap; }
  .prospect-programs-grid { grid-template-columns: 1fr; gap: 16px; }
  .prospect-comparison { flex-direction: column; }
  .prospect-comparison-before { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-right: none; border-bottom: 1px solid var(--color-border); }
  .prospect-comparison-after { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-left: 2px solid var(--color-primary); border-top: none; }
  .prospect-comparison-arrow { justify-content: center; padding: 8px; background: transparent; }
  .prospect-comparison-arrow svg { transform: rotate(90deg); }
  .prospect-stories-grid { grid-template-columns: 1fr; }
  .prospect-projections-grid { grid-template-columns: 1fr; }
  .prospect-body { padding: 24px 16px 32px; }
  .prospect-hero { padding: 32px 20px; }
  .prospect-cta { padding: 32px 20px; }
}