/* ─── Ubuntu ─────────────────────────────────────────────────── */
@font-face { font-family:'Ubuntu'; src:url('fonts/Ubuntu-Regular.ttf') format('truetype'); font-weight:300 500; font-style:normal; font-display:swap; }
@font-face { font-family:'Ubuntu'; src:url('fonts/Ubuntu-Italic.ttf') format('truetype'); font-weight:300 500; font-style:italic; font-display:swap; }
@font-face { font-family:'Ubuntu'; src:url('fonts/Ubuntu-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ─── Tokens — light ─────────────────────────────────────────── */
:root {
  /* canvas */
  --bg:            #eef2ef;
  --surface:       #ffffff;
  --surface-2:     #f5f8f6;
  --surface-3:     #ecf1ee;

  /* text */
  --ink:           #0b1c12;
  --ink-2:         #2d4235;
  --muted:         #5c7367;
  --subtle:        #8da898;

  /* borders */
  --line:          #d6e4dc;
  --line-2:        #bfd2c7;

  /* brand */
  --brand:         #1a6b45;
  --brand-mid:     #145537;
  --brand-deep:    #0c3320;
  --brand-tint:    #e6f4ed;
  --brand-glow:    rgba(26,107,69,.18);

  /* accent */
  --gold:          #c49222;
  --gold-tint:     #fdf4e0;
  --gold-glow:     rgba(196,146,34,.22);

  /* status */
  --ok:            #0e7a46;    --ok-bg:     #e4f5ec;
  --warn:          #9a5f0c;    --warn-bg:   #fef3e2;
  --danger:        #c0281c;    --danger-bg: #fce8e7;
  --info:          #1568a4;    --info-bg:   #e2eef9;

  /* shadows */
  --sh-xs: 0 1px 4px rgba(11,28,18,.06);
  --sh-sm: 0 3px 14px rgba(11,28,18,.09);
  --sh:    0 10px 38px rgba(11,28,18,.12);
  --sh-lg: 0 22px 64px rgba(11,28,18,.18);
  --sh-xl: 0 36px 90px rgba(11,28,18,.24);

  /* shape */
  --r-xs:   4px;
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* motion */
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.16,1,.3,1);
  --t:       .2s;

  /* sidebar (always dark) */
  --sb-bg:      #0b1610;
  --sb-surface: #112018;
  --sb-line:    #1c3024;
  --sb-ink:     #c0d8c8;
  --sb-muted:   #5a7864;
  --sb-active:  #30d688;
  --sb-act-bg:  rgba(48,214,136,.12);
  --sb-hover:   rgba(255,255,255,.05);
  --sb-w:       264px;
}

/* ─── Tokens — dark ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0b1410;
  --surface:   #101d15;
  --surface-2: #152219;
  --surface-3: #1a2a1f;
  --ink:       #d6ede0;
  --ink-2:     #8fb89e;
  --muted:     #618070;
  --subtle:    #3d5846;
  --line:      #1e3128;
  --line-2:    #2c4436;
  --brand:     #30d688;
  --brand-mid: #1fa864;
  --brand-deep:#117840;
  --brand-tint:rgba(48,214,136,.1);
  --brand-glow:rgba(48,214,136,.2);
  --gold:      #e2b84a;
  --gold-tint: rgba(226,184,74,.1);
  --ok:        #2dbe7e;  --ok-bg:     rgba(45,190,126,.12);
  --warn:      #e0a040;  --warn-bg:   rgba(224,160,64,.12);
  --danger:    #e05252;  --danger-bg: rgba(224,82,82,.12);
  --info:      #4da4e8;  --info-bg:   rgba(77,164,232,.12);
  --sh:        0 10px 38px rgba(0,0,0,.36);
  --sh-lg:     0 22px 64px rgba(0,0,0,.52);
  --sh-xl:     0 36px 90px rgba(0,0,0,.64);
  --sb-bg:     #060d08;
  --sb-surface:#0c1610;
  --sb-line:   #162418;
}

/* ─── Reset / base ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body {
  font-family:'Ubuntu',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  transition:background .35s,color .35s;
}

body:not(:has(.dashboard:not([hidden]))) {
  background:
    radial-gradient(ellipse 80% 60% at 60% 0%, rgba(26,107,69,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(196,146,34,.05) 0%, transparent 50%),
    var(--bg);
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; }
p { margin-top:0; }

/* financial numerals */
.num { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ─── Typography scale ───────────────────────────────────────── */
h1 {
  font-size:clamp(40px,5.6vw,78px);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.03em;
  margin-bottom:22px;
}
h2 {
  font-size:clamp(26px,2.8vw,44px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:14px;
}
h3 { font-size:17px; font-weight:700; line-height:1.3; margin-bottom:4px; }
h4 { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }

/* ─── Loader ─────────────────────────────────────────────────── */
.page-loader {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#040a06;
  transition:opacity .65s var(--ease), visibility .65s;
}
.page-loader.loader-done { opacity:0; visibility:hidden; pointer-events:none; }

.loader-bg-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(26,107,69,.07) 1px,transparent 1px),
    linear-gradient(rgba(26,107,69,.07) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 65% 65% at 50% 50%,#000 30%,transparent 100%);
}
.loader-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.loader-particle  {
  position:absolute; bottom:-12px; border-radius:50%;
  animation:lpRise linear infinite; opacity:0;
}
@keyframes lpRise {
  0%   { transform:translateY(0) scale(.5); opacity:0; }
  6%   { opacity:.8; }
  88%  { opacity:.2; }
  100% { transform:translateY(-110vh) scale(1.8); opacity:0; }
}

.loader-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.loader-logo-wrap {
  position:relative; width:116px; height:116px;
  display:flex; align-items:center; justify-content:center;
}
.loader-logo-img {
  width:58px; height:58px; object-fit:contain; position:relative; z-index:3;
  filter:drop-shadow(0 0 22px rgba(48,214,136,.5));
  animation:lBreathe 2.6s ease-in-out infinite;
}
@keyframes lBreathe { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.07);opacity:.88} }

.loader-ring { position:absolute; border-radius:50%; border:2px solid transparent; }
.loader-ring-outer { inset:0; border-top-color:#30d688; border-right-color:rgba(48,214,136,.2); animation:lSpin 1.5s linear infinite; }
.loader-ring-inner { inset:14px; border-bottom-color:var(--gold); border-left-color:rgba(196,146,34,.18); animation:lSpin .85s linear infinite reverse; }
.loader-ring-pulse { inset:26px; border:1.5px solid rgba(48,214,136,.15); animation:lPulse 2.2s ease-in-out infinite; }
@keyframes lSpin  { to{transform:rotate(360deg)} }
@keyframes lPulse { 0%,100%{transform:scale(1);opacity:.3} 50%{transform:scale(1.12);opacity:.8} }

.loader-brand-name  { color:#fff; font-size:24px; font-weight:700; letter-spacing:-.02em; animation:lUp .5s var(--spring) .2s both; }
.loader-status-text { color:rgba(255,255,255,.45); font-size:11px; letter-spacing:.12em; text-transform:uppercase; min-height:15px; animation:lUp .5s var(--spring) .35s both; transition:opacity .28s; }

.loader-progress-track { width:200px; height:2px; background:rgba(255,255,255,.09); border-radius:var(--r-pill); overflow:hidden; animation:lUp .5s var(--spring) .5s both; }
.loader-progress-fill  { height:100%; width:0%; border-radius:var(--r-pill); background:linear-gradient(90deg,#30d688,var(--gold)); transition:width .5s var(--ease); box-shadow:0 0 14px rgba(48,214,136,.65); }

@keyframes lUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ─── Entry animations ───────────────────────────────────────── */
@keyframes aUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes aLeft { from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:translateX(0)} }
@keyframes aIn   { from{opacity:0} to{opacity:1} }
@keyframes aPop  { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }

[data-animate] { opacity:0; }
[data-animate].is-visible { animation-fill-mode:both; animation-duration:.7s; animation-timing-function:var(--spring); }
[data-animate="fade-up"].is-visible   { animation-name:aUp; }
[data-animate="fade-left"].is-visible { animation-name:aLeft; }
[data-animate="fade-in"].is-visible   { animation-name:aIn; }
[data-animate="scale-in"].is-visible  { animation-name:aPop; }
[data-animate-delay="1"].is-visible   { animation-delay:.1s; }
[data-animate-delay="2"].is-visible   { animation-delay:.22s; }
[data-animate-delay="3"].is-visible   { animation-delay:.34s; }
[data-animate-delay="4"].is-visible   { animation-delay:.46s; }

/* ─── App shell ──────────────────────────────────────────────── */
.app-shell { min-height:100vh; }

/* ─── Topbar ─────────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:200;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px;
  margin:12px auto 0;
  width:min(1500px, calc(100% - 28px));
  min-height:68px;
  padding:8px 16px;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.72);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
  transition:background var(--t),box-shadow var(--t);
}

/* ─── Brand ──────────────────────────────────────────────────── */
.brand, .sidebar-brand {
  display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
}
.brand-logo { width:40px; height:40px; object-fit:contain; }
.brand strong, .sidebar-brand strong { display:block; font-size:14px; font-weight:700; line-height:1.1; }
.brand small, .sidebar-brand small   { display:block; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; opacity:.6; }

/* ─── Main nav pill ──────────────────────────────────────────── */
.main-nav {
  display:flex; justify-content:center; gap:2px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface-2);
}
.main-nav a {
  min-height:36px; display:inline-flex; align-items:center;
  padding:0 16px; border-radius:var(--r-pill);
  color:var(--muted); font-size:13px; font-weight:500;
  transition:color var(--t), background var(--t);
}
.main-nav a:hover { color:var(--ink); background:rgba(26,107,69,.08); }
.main-nav a.active { color:var(--brand); background:var(--brand-tint); font-weight:700; }

/* ─── Actions row ────────────────────────────────────────────── */
.topbar-actions,
.hero-actions,
.workspace-actions {
  display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.button, .icon-button {
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.button {
  min-height:40px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 18px; border-radius:var(--r-sm);
  font-weight:700; font-size:13.5px; letter-spacing:-.01em;
  white-space:nowrap;
}
.button:hover  { transform:translateY(-1px); }
.button:active { transform:translateY(0); opacity:.9; }

.button.primary {
  color:#fff;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow:0 2px 10px var(--brand-glow);
  border-color:transparent;
}
.button.primary:hover {
  box-shadow:0 5px 18px var(--brand-glow);
  background:linear-gradient(135deg, var(--brand-mid) 0%, var(--brand-deep) 100%);
}

.button.ghost {
  color:var(--ink-2); background:var(--surface);
  border-color:var(--line);
}
.button.ghost:hover {
  background:var(--surface-2); border-color:var(--line-2);
  color:var(--ink);
}
.button.ghost.danger { color:var(--danger); border-color:rgba(192,40,28,.25); }
.button.ghost.danger:hover { background:var(--danger-bg); border-color:rgba(192,40,28,.45); }

.button.light {
  color:#0a1f12; background:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.45);
}
.button.large { min-height:50px; padding:0 26px; font-size:15px; }

.icon-button {
  width:40px; height:40px; display:inline-grid; place-items:center;
  border-radius:var(--r-sm); color:var(--ink);
  background:var(--surface); border-color:var(--line); flex-shrink:0;
}
.icon-button:hover  { background:var(--surface-2); transform:translateY(-1px); }
.icon-button:active { transform:scale(.95); }
.wfull { width:100%; }

/* theme toggle */
[data-theme-toggle] .icon-moon { display:none; }
[data-theme-toggle] .icon-sun  { display:block; }
[data-theme="dark"] [data-theme-toggle] .icon-sun  { display:none; }
[data-theme="dark"] [data-theme-toggle] .icon-moon { display:block; }

/* notif dot */
.notif-btn { position:relative; }
.notif-dot {
  position:absolute; top:8px; right:8px;
  width:7px; height:7px; border-radius:50%;
  background:#e74c3c; border:2px solid var(--surface);
  animation:nPulse 2.4s ease-in-out infinite;
}
@keyframes nPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}
  50%{box-shadow:0 0 0 5px rgba(231,76,60,0)}
}

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) 420px;
  align-items:end; gap:32px;
  min-height:calc(100vh - 96px);
  padding:80px max(24px,calc((100vw - 1500px)/2)) 64px;
  overflow:hidden;
}

.hero-media {
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(115deg, rgba(5,14,9,.95) 0%, rgba(10,34,20,.72) 48%, rgba(8,26,16,.88) 100%),
    var(--desk-brand-image, url('../public/image/brand.png')) center/cover no-repeat;
}

.hero-grid-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(48,214,136,.04) 1px,transparent 1px),
    linear-gradient(rgba(48,214,136,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 70% at 20% 60%,#000 10%,transparent 65%);
}

/* floating ambient numbers */
.hero-ambient {
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.hero-ambient span {
  position:absolute;
  font-size:clamp(60px,8vw,120px);
  font-weight:700;
  color:rgba(48,214,136,.04);
  letter-spacing:-.04em;
  line-height:1;
  user-select:none;
}
.hero-ambient span:nth-child(1) { top:12%; right:8%;  animation:ambFloat 9s ease-in-out infinite; }
.hero-ambient span:nth-child(2) { top:58%; right:22%; animation:ambFloat 12s ease-in-out 2s infinite; }
.hero-ambient span:nth-child(3) { top:30%; right:42%; animation:ambFloat 7s ease-in-out 4s infinite; font-size:clamp(40px,4vw,70px); }
@keyframes ambFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

.hero-content {
  position:relative; z-index:2;
  max-width:780px; color:#fff; padding-bottom:48px;
}

.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.eyebrow::before {
  content:''; display:block; width:20px; height:2px;
  background:currentColor; border-radius:var(--r-pill); flex-shrink:0;
}
.hero .eyebrow { color:#f0c97a; }

.hero-content p {
  max-width:640px;
  color:rgba(255,255,255,.72);
  font-size:17px; line-height:1.75;
}

/* ─── Hero card (glassy) ─────────────────────────────────────── */
.hero-card {
  position:relative; z-index:2;
  margin-bottom:24px;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 24px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  color:#fff;
}

.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.card-head span { color:rgba(255,255,255,.5); font-size:11px; font-weight:500; }
.card-head strong { font-size:17px; font-weight:700; }

.pulse-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.pulse-grid div {
  padding:12px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
}
.pulse-grid small { display:block; font-size:10px; font-weight:500; color:rgba(255,255,255,.5); letter-spacing:.06em; text-transform:uppercase; }
.pulse-grid strong { display:block; font-size:26px; font-weight:700; margin-top:4px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

.mini-chart {
  height:100px; display:grid; grid-template-columns:repeat(7,1fr); align-items:end; gap:6px;
  margin-top:16px; padding:10px;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.mini-chart span {
  display:block; height:var(--bar-h,50%);
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,rgba(48,214,136,.9),rgba(26,107,69,.7));
  animation:barGrow .8s var(--spring) both; transition:opacity .15s;
}
.mini-chart span:hover { opacity:.6; }
@keyframes barGrow { from{height:0!important} to{height:var(--bar-h,50%)} }

/* ─── Surface cards (generic) ────────────────────────────────── */
.panel, .product-card, .request-panel, .kpi-card {
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  box-shadow:var(--sh-xs);
}

/* ─── Sections ───────────────────────────────────────────────── */
.section {
  width:min(1500px,calc(100% - 28px));
  margin:0 auto; padding:96px 0;
}
.section.dense { padding-bottom:52px; }
.section-title { max-width:740px; margin-bottom:36px; }
.section-copy  { color:var(--muted); font-size:16px; line-height:1.8; }

/* ─── Product cards ──────────────────────────────────────────── */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.product-card {
  min-height:270px; padding:30px;
  position:relative; overflow:hidden;
  transition:transform var(--t),box-shadow var(--t);
}
.product-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg,rgba(26,107,69,.04),rgba(196,146,34,.04));
  opacity:0; transition:opacity var(--t);
}
.product-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
.product-card:hover::after { opacity:1; }

.product-card.accent {
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 100%);
  border-color:rgba(48,214,136,.2); color:#fff;
}
.product-card.accent::after { display:none; }
.product-card.accent p { color:rgba(255,255,255,.68); }

/* top accent bar on hovered card */
.product-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  opacity:0; transition:opacity var(--t);
}
.product-card:hover::before { opacity:1; }
.product-card.accent::before { opacity:1; background:rgba(255,255,255,.2); }

.product-icon {
  width:48px; height:48px;
  display:grid; place-items:center; margin-bottom:22px;
  border-radius:var(--r-sm);
  background:var(--gold-tint); color:var(--gold);
  border:1px solid rgba(196,146,34,.2);
}
.product-card.accent .product-icon { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.2); }

.product-card p { color:var(--muted); line-height:1.7; font-size:14px; }
.product-card strong { display:block; margin-top:22px; font-size:19px; font-weight:700; }

/* ─── Process / timeline ─────────────────────────────────────── */
.split { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:56px; align-items:start; }
.timeline { display:grid; gap:12px; }
.timeline-item {
  display:grid; grid-template-columns:50px 1fr; gap:18px; padding:20px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.timeline-item:hover { transform:translateX(5px); border-color:var(--brand); box-shadow:var(--sh-sm); }
.timeline-item > span {
  width:44px; height:44px; display:grid; place-items:center; flex-shrink:0;
  border-radius:var(--r-sm); color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  font-weight:700; font-size:12px; letter-spacing:.04em;
}
.timeline-item p { margin:0; color:var(--muted); line-height:1.65; font-size:13.5px; }

/* ─── Request / loan form ────────────────────────────────────── */
.request-panel {
  display:grid; grid-template-columns:.72fr 1fr; gap:36px;
  padding:36px; margin-bottom:80px;
}
.request-copy p { color:var(--muted); line-height:1.75; margin-bottom:22px; }

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

label { display:grid; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

input, select, textarea {
  width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); outline:none;
  transition:border-color var(--t),box-shadow var(--t);
}
input, select { height:44px; padding:0 14px; font-size:14px; }
textarea { min-height:108px; padding:12px 14px; resize:vertical; font-size:14px; }

input:focus, select:focus, textarea:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-glow);
}
input::placeholder, textarea::placeholder { color:var(--subtle); }

.full { grid-column:1/-1; }
.form-status { grid-column:1/-1; color:var(--ok); font-weight:700; font-size:13px; }

/* ─── Dashboard layout ───────────────────────────────────────── */
.dashboard {
  display:grid;
  grid-template-columns:var(--sb-w) minmax(0,1fr);
  min-height:100vh;
}
.dashboard[hidden],[hidden] { display:none !important; }

/* ─── Sidebar (dark always) ──────────────────────────────────── */
.sidebar {
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding:0; overflow-y:auto; overflow-x:hidden;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-line);
  transition:background .35s;
}

.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sb-line);
}
.sidebar-brand .brand-logo { width:34px; height:34px; border-radius:var(--r-sm); }
.sidebar-brand strong { color:var(--sb-ink); font-size:14px; }
.sidebar-brand small  { color:var(--sb-muted); font-size:9px; letter-spacing:.14em; }

.side-nav {
  display:flex; flex-direction:column; gap:1px;
  flex:1; padding:14px 10px;
  overflow-y:auto;
}
.side-nav a {
  display:flex; align-items:center; gap:10px;
  min-height:40px; padding:0 12px;
  border-radius:var(--r-sm);
  color:var(--sb-muted); font-size:13px; font-weight:500;
  border:1px solid transparent;
  position:relative;
  transition:color var(--t),background var(--t),border-color var(--t);
}
.side-nav a svg { flex-shrink:0; opacity:.6; transition:opacity var(--t), transform var(--t); }
.side-nav a:hover { color:var(--sb-ink); background:var(--sb-hover); }
.side-nav a:hover svg { opacity:1; transform:scale(1.05); }
.side-nav a.active {
  color:var(--sb-active); background:var(--sb-act-bg);
  border-color:rgba(48,214,136,.15); font-weight:600;
}
.side-nav a.active svg { opacity:1; }
.side-nav a.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:0 3px 3px 0;
  background:var(--sb-active);
  box-shadow:0 0 12px rgba(48,214,136,.6);
}

/* nav section label */
.nav-section-label {
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sb-muted); padding:14px 12px 5px; opacity:.5;
}

.nav-badge {
  margin-left:auto; min-width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
  border-radius:var(--r-pill);
  background:rgba(48,214,136,.18); color:var(--sb-active);
  font-size:10px; font-weight:700;
}

/* ─── Sidebar user profile ───────────────────────────────────── */
.sidebar-user {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-top:1px solid var(--sb-line);
  background:rgba(255,255,255,.02);
}
.sidebar-user .avatar.sm {
  width:32px; height:32px; font-size:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--brand-mid), var(--brand-deep));
  box-shadow:0 2px 8px rgba(48,214,136,.25);
}
.sidebar-user-info {
  flex:1; min-width:0;
}
.sidebar-user-info strong {
  display:block; font-size:12.5px; font-weight:600;
  color:var(--sb-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user-info small {
  display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sb-muted); margin-top:1px;
}
.sidebar-user-menu {
  width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:none; border:1px solid transparent; cursor:pointer;
  color:var(--sb-muted); flex-shrink:0;
  transition:color var(--t), background var(--t), border-color var(--t);
}
.sidebar-user-menu:hover {
  color:var(--sb-ink); background:var(--sb-hover); border-color:var(--sb-line);
}

/* ─── Workspace ──────────────────────────────────────────────── */
.workspace {
  padding:0; background:var(--bg);
  min-height:100vh; overflow:hidden;
  transition:background .35s;
}

.workspace-head {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 28px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 1px 0 var(--line), var(--sh-xs);
  position:sticky; top:0; z-index:50;
}
.workspace-head .eyebrow {
  margin-bottom:2px; font-size:9.5px;
  color:var(--brand); letter-spacing:.18em;
}
.workspace-head .eyebrow::before { background:var(--brand); }
.workspace-head h2 {
  margin-bottom:2px; font-size:18px; line-height:1.2; letter-spacing:-.02em;
}
.workspace-head p  { margin:0; color:var(--muted); font-size:12px; }

.workspace-body { padding:22px 28px; }

/* ─── KPI cards ──────────────────────────────────────────────── */
.kpi-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;
}

.kpi-card {
  position:relative; overflow:hidden;
  width:100%; text-align:left; padding:20px 20px 16px; cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}

/* colored top bar per card type */
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand), rgba(26,107,69,.4));
  border-radius:var(--r) var(--r) 0 0;
}
.kpi-card:nth-child(2)::before { background:linear-gradient(90deg, var(--gold), rgba(196,146,34,.4)); }
.kpi-card:nth-child(3)::before { background:linear-gradient(90deg, var(--info), rgba(21,104,164,.4)); }
.kpi-card.danger::before       { background:linear-gradient(90deg, var(--danger), rgba(192,40,28,.4)); }

/* subtle icon bubble in top-right */
.kpi-card::after {
  content:''; position:absolute; top:-20px; right:-20px;
  width:80px; height:80px; border-radius:50%;
  background:var(--brand-tint); opacity:.55;
  transition:opacity var(--t), transform var(--t);
}
.kpi-card:nth-child(2)::after { background:var(--gold-tint); }
.kpi-card:nth-child(3)::after { background:var(--info-bg); }
.kpi-card.danger::after       { background:var(--danger-bg); }
.kpi-card:hover::after { opacity:.85; transform:scale(1.15); }

.kpi-card span {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.kpi-card strong {
  display:block; margin:12px 0 6px;
  font-size:32px; font-weight:700; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink);
  transition:color var(--t);
}
.kpi-card small { display:block; font-size:11.5px; color:var(--muted); line-height:1.5; }

.kpi-card.danger { border-color:rgba(192,40,28,.22); }
.kpi-card:hover  { transform:translateY(-3px); box-shadow:var(--sh); }
.kpi-card:hover strong { color:var(--brand); }
.kpi-card.danger:hover strong { color:var(--danger); }

/* trend chip */
.kpi-trend {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill);
  margin-top:4px;
}
.kpi-trend.up   { color:var(--ok); background:var(--ok-bg); }
.kpi-trend.down { color:var(--danger); background:var(--danger-bg); }

/* ─── Panels ─────────────────────────────────────────────────── */
.panel {
  padding:0; overflow:hidden;
  transition:box-shadow var(--t), border-color var(--t);
}
.panel:hover { box-shadow:var(--sh-sm); border-color:var(--line-2); }

.panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.panel-head h3 { margin:0; font-size:14.5px; font-weight:700; }
.panel-head p  { margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }

.panel-body { padding:18px 20px; }

/* ─── View transitions ───────────────────────────────────────── */
.view { display:none; }
.view.is-active { display:block; animation:vEnter .4s var(--spring) both; }
.view.is-exiting { animation:vExit .18s var(--ease) both; }
@keyframes vEnter { from{opacity:0;transform:translateY(16px) scale(.99)} to{opacity:1;transform:none} }
@keyframes vExit  { from{opacity:1} to{opacity:0} }

/* ─── Insight panel ──────────────────────────────────────────── */
.insight-panel { margin-bottom:18px; }
.insight-panel .panel-head {
  background:linear-gradient(135deg,var(--brand-tint),var(--surface));
}
.insight-panel .panel-body {
  background:linear-gradient(145deg, var(--brand-tint) 0%, color-mix(in srgb, var(--brand-tint) 30%, var(--surface)) 100%);
}

/* ─── Detail / payment / report / settings grids ─────────────── */
.detail-grid, .payment-strip, .report-grid, .settings-grid { display:grid; gap:12px; }
.detail-grid    { grid-template-columns:repeat(3,1fr); }
.payment-strip  { grid-template-columns:repeat(3,1fr); }
.report-grid    { grid-template-columns:repeat(2,1fr); }
.settings-grid  { grid-template-columns:repeat(3,1fr); }

.detail-grid article, .payment-strip article, .report-grid article {
  padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2);
  transition:border-color var(--t),transform var(--t);
}
.detail-grid article:hover, .payment-strip article:hover, .report-grid article:hover {
  border-color:var(--brand); transform:translateY(-2px);
}

.detail-grid span, .payment-strip span, .report-grid span {
  display:block; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.detail-grid strong, .payment-strip strong, .report-grid strong {
  display:block; font-size:22px; font-weight:700; margin:7px 0 3px;
  line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.detail-grid small, .payment-strip small, .report-grid small { color:var(--muted); font-size:11.5px; }

/* ─── Dashboard grid ─────────────────────────────────────────── */
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr); gap:16px; align-items:start; }
.dashboard-grid > .panel:first-child { grid-row:span 2; }
.view-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.65fr); gap:16px; align-items:start; }
.view-layout--single { grid-template-columns:1fr; }
.detail-page-panel {
  max-width:1180px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  border-radius:var(--r);
}
.detail-page-panel .panel-head {
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
}
.detail-page-panel .panel-head h3 { font-size:18px; }
.detail-page-panel .panel-head p { max-width:58ch; }
.loan-detail-panel.detail-page-panel .loan-detail-body {
  display:grid;
  grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);
  align-items:start;
  min-height:520px;
}
.loan-detail-panel.detail-page-panel .loan-detail-body[hidden] { display:none; }
.loan-detail-panel.detail-page-panel .profile-card {
  position:sticky;
  top:18px;
  grid-row:1 / span 4;
  align-self:start;
  min-height:520px;
  align-content:start;
  justify-items:start;
  gap:12px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:0;
  text-align:left;
}
.loan-detail-panel.detail-page-panel .profile-card .avatar {
  width:68px;
  height:68px;
  font-size:20px;
}
.loan-detail-panel.detail-page-panel .profile-card strong[data-loan-name] {
  display:block;
  font-size:22px;
  line-height:1.15;
  margin-top:4px;
}
.loan-detail-panel.detail-page-panel .profile-card small {
  display:block;
  margin-top:6px;
  line-height:1.45;
}
.loan-detail-panel.detail-page-panel .profile-card .status { margin-top:4px; }
.loan-detail-panel.detail-page-panel .detail-tabs,
.loan-detail-panel.detail-page-panel .detail-tab-content,
.loan-detail-panel.detail-page-panel .loan-actions {
  grid-column:2;
}
.loan-detail-panel.detail-page-panel .detail-tabs {
  padding:14px 18px;
  background:var(--surface);
}
.loan-detail-panel.detail-page-panel .detail-tab-content { min-height:310px; }
.loan-detail-panel.detail-page-panel .detail-tab-content .signal-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:20px;
}
.loan-detail-panel.detail-page-panel .detail-tab-content .signal-list div {
  display:grid;
  align-content:space-between;
  min-height:92px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
}
.loan-detail-panel.detail-page-panel .detail-tab-content .signal-list div:last-child {
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
}
.loan-detail-panel.detail-page-panel .detail-tab-content .signal-list strong {
  margin-top:10px;
  font-size:17px;
  line-height:1.25;
}
.loan-detail-panel.detail-page-panel .detail-tab-content .signal-list span,
.request-detail-panel.detail-page-panel .signal-list span {
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.loan-detail-panel.detail-page-panel .loan-actions {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.loan-detail-panel.detail-page-panel .loan-actions .wfull { width:auto; min-width:180px; }
.loan-detail-panel.detail-page-panel .loan-actions-row { min-width:360px; }
.request-detail-panel.detail-page-panel .request-detail-body {
  display:grid;
  grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);
  align-items:start;
  min-height:520px;
}
.request-detail-panel.detail-page-panel .request-detail-body[hidden] { display:none; }
.request-detail-panel.detail-page-panel .profile-card {
  position:sticky;
  top:18px;
  grid-row:1 / span 4;
  align-self:start;
  min-height:520px;
  align-content:start;
  justify-items:start;
  gap:12px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:0;
  text-align:left;
}
.request-detail-panel.detail-page-panel .profile-card .avatar {
  width:68px;
  height:68px;
  font-size:20px;
}
.request-detail-panel.detail-page-panel .profile-card strong[data-req-name-label] {
  display:block;
  font-size:22px;
  line-height:1.15;
  margin-top:4px;
}
.request-detail-panel.detail-page-panel .profile-card small {
  display:block;
  margin-top:6px;
  line-height:1.45;
}
.request-detail-panel.detail-page-panel .profile-card .status { margin-top:4px; }
.request-detail-panel.detail-page-panel .signal-list,
.request-detail-panel.detail-page-panel .req-checklist-section,
.request-detail-panel.detail-page-panel .req-detail-actions {
  grid-column:2;
}
.request-detail-panel.detail-page-panel .signal-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:20px;
}
.request-detail-panel.detail-page-panel .signal-list div {
  display:grid;
  align-content:space-between;
  min-height:92px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
}
.request-detail-panel.detail-page-panel .signal-list div:last-child {
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
}
.request-detail-panel.detail-page-panel .signal-list strong {
  margin-top:10px;
  font-size:17px;
  line-height:1.25;
}
.request-detail-panel.detail-page-panel .req-checklist-section {
  margin:0 20px 20px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
}
.request-detail-panel.detail-page-panel .req-checklist-section h4 {
  margin:0 0 12px;
  font-size:13px;
}
.request-detail-panel.detail-page-panel .check-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:0;
  margin:0;
}
.request-detail-panel.detail-page-panel .req-detail-actions {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.request-detail-panel.detail-page-panel .req-detail-actions .wfull { width:auto; min-width:190px; }
.request-detail-panel.detail-page-panel .req-detail-row { min-width:300px; }
.reports-stack { display:grid; gap:16px; }

/* ─── Tables ─────────────────────────────────────────────────── */
.table-wrap { overflow:auto; border-radius:var(--r-sm); }
table { width:100%; min-width:660px; border-collapse:collapse; }

thead tr {
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-3) 100%);
}
th {
  padding:10px 14px; text-align:left;
  border-bottom:1.5px solid var(--line);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  position:sticky; top:0;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--surface-3) 100%);
}
th:first-child { padding-left:18px; }
td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; }
td:first-child { padding-left:18px; }
td small { display:block; margin-top:2px; font-size:11px; color:var(--muted); }
td strong { font-weight:700; }

tbody tr { transition:background var(--t); }
tbody tr:hover { background:var(--brand-tint) !important; cursor:pointer; }
tbody tr.is-selected { background:var(--brand-tint) !important; }
tbody tr:last-child td { border-bottom:0; }

/* ─── Status badges ──────────────────────────────────────────── */
.table-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
}
.pager-summary,
.pager-actions {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.pager-summary select {
  min-width:72px;
  height:34px;
  padding:0 28px 0 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
  font-size:13px;
  outline:none;
}
.pager-count {
  color:var(--ink-2);
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pager-btn {
  width:34px;
  height:34px;
}
.pager-btn:disabled {
  opacity:.42;
  cursor:not-allowed;
  transform:none;
}

.status {
  display:inline-flex; align-items:center; gap:5px;
  min-height:24px; padding:0 10px;
  border-radius:var(--r-pill);
  font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
.status::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; background:currentColor; }
.status.ok     { color:var(--ok);     background:var(--ok-bg); }
.status.warn   { color:var(--warn);   background:var(--warn-bg); }
.status.danger { color:var(--danger); background:var(--danger-bg); }

/* ─── Donut ──────────────────────────────────────────────────── */
.donut-row { display:grid; grid-template-columns:136px 1fr; gap:20px; align-items:center; padding:8px 0; }
.donut {
  width:136px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  background:conic-gradient(var(--brand) 0% 92%, var(--line) 92% 100%);
  box-shadow:0 0 0 6px var(--surface), 0 0 0 7px var(--line);
}
.donut span {
  width:96px; aspect-ratio:1; display:grid; place-items:center;
  border-radius:50%; background:var(--surface);
  font-size:24px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ─── Signal list ────────────────────────────────────────────── */
.signal-list, .queue-list { display:grid; gap:0; }
.signal-list div, .queue-list article {
  padding:13px 0; border-bottom:1px solid var(--line);
}
.signal-list div:last-child, .queue-list article:last-child { border-bottom:0; padding-bottom:0; }
.signal-list div { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.signal-list span { color:var(--muted); font-size:12.5px; }
.signal-list strong { font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.queue-list strong { display:block; margin:5px 0 3px; font-size:13.5px; font-weight:700; }
.queue-list p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.55; }

/* ─── Toolbar ────────────────────────────────────────────────── */
.toolbar {
  display:grid; grid-template-columns:minmax(220px,1fr) 170px 182px;
  gap:8px; padding:14px 20px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}

/* ─── Profile card ───────────────────────────────────────────── */
.profile-card {
  display:grid; justify-items:center; gap:8px;
  padding:22px 20px 18px; margin:0;
  background:linear-gradient(160deg,var(--brand-tint),color-mix(in srgb,var(--gold-tint) 60%,var(--surface)));
  border-bottom:1px solid var(--line);
  text-align:center;
}
.avatar {
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:50%; font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  box-shadow:0 4px 16px var(--brand-glow);
  letter-spacing:.02em;
}
.avatar.sm {
  width:34px; height:34px; font-size:12px;
  box-shadow:0 2px 8px var(--brand-glow);
}
.profile-card small { color:var(--muted); font-size:12px; }

/* ─── Kanban ─────────────────────────────────────────────────── */
.request-kanban { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:20px; }
.kanban-column {
  display:grid; gap:10px; align-content:start;
  min-height:380px; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2);
}
.kanban-column h4 { margin:0 0 8px; }
.kanban-column article {
  display:grid; gap:5px; padding:13px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); box-shadow:var(--sh-xs);
  transition:transform var(--t),box-shadow var(--t);
}
.kanban-column article:hover { transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:var(--brand); }
.kanban-column span, .kanban-column small { color:var(--muted); font-size:11.5px; }
.kanban-column strong { font-size:13.5px; font-weight:700; }

/* ─── Check list / stack form ────────────────────────────────── */
.check-list, .stack-form { display:grid; gap:10px; }
.check-list { padding:0 20px; margin-bottom:16px; }
.stack-form { padding:0 20px 20px; }

.check-list label, .stack-form label:has(input[type="checkbox"]) {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:13px; font-weight:500;
  color:var(--ink-2); text-transform:none; letter-spacing:0;
  transition:border-color var(--t),background var(--t);
}
.check-list label:hover { border-color:var(--brand); background:var(--brand-tint); }

input[type="checkbox"] { width:16px; height:16px; accent-color:var(--brand); flex-shrink:0; }

/* ─── Payment strip ──────────────────────────────────────────── */
.payment-strip { padding:16px 20px; }

/* ─── Spark bars ─────────────────────────────────────────────── */
.spark { display:grid; gap:6px; margin-top:14px; }
.spark i { display:block; height:6px; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--brand),var(--gold)); }
.spark.danger i { background:linear-gradient(90deg,var(--danger),var(--warn)); }

/* ─── Settings ───────────────────────────────────────────────── */
.settings-grid .stack-form {
  padding:18px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2);
}

/* ─── Login modal ────────────────────────────────────────────── */
.login-modal {
  width:min(420px,calc(100% - 28px)); padding:0;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-xl);
  animation:mEnter .42s var(--spring) both;
}
@keyframes mEnter { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:none} }
.login-modal::backdrop {
  background:rgba(5,12,8,.72);
  backdrop-filter:blur(12px) saturate(150%);
  animation:bIn .3s ease both;
}
@keyframes bIn { from{opacity:0} to{opacity:1} }

/* top accent strip on modal */
.login-modal::before {
  content:''; display:block; height:4px;
  background:linear-gradient(90deg,var(--brand),var(--gold));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

.login-box { position:relative; padding:28px 28px 32px; display:grid; gap:14px; }
.login-box p { color:var(--muted); line-height:1.65; font-size:13px; margin:0; }
.close { position:absolute; top:14px; right:14px; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width:1120px) {
  .topbar { grid-template-columns:1fr; gap:10px; }
  .main-nav, .topbar-actions { justify-content:flex-start; }
  .hero, .split, .request-panel, .dashboard, .dashboard-grid, .view-layout { grid-template-columns:1fr; }
  .hero-card { width:min(100%,540px); }
  .product-grid, .kpi-grid, .detail-grid, .payment-strip, .report-grid, .settings-grid, .request-kanban { grid-template-columns:repeat(2,1fr); }
  .toolbar { grid-template-columns:1fr; padding:12px 16px 0; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; padding:0; }
  .sidebar-brand { flex:0 0 auto; border-right:1px solid var(--sb-line); border-bottom:0; padding:14px 16px; }
  .side-nav { flex:1; flex-direction:row; padding:8px 12px; overflow-x:auto; gap:2px; }
  .side-nav a { flex-shrink:0; }
  .side-nav a.active::after { display:none; }
  .sidebar-footer { flex:0 0 auto; padding:8px 12px; border-top:0; border-left:1px solid var(--sb-line); }
  .nav-section-label { display:none; }
  .workspace-head, .workspace-body { padding:18px; }
  .loan-detail-panel.detail-page-panel .loan-detail-body,
  .request-detail-panel.detail-page-panel .request-detail-body {
    grid-template-columns:minmax(230px,.38fr) minmax(0,1fr);
  }
  .loan-detail-panel.detail-page-panel .detail-tab-content .signal-list,
  .request-detail-panel.detail-page-panel .signal-list,
  .request-detail-panel.detail-page-panel .check-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:860px) {
  .loan-detail-panel.detail-page-panel .loan-detail-body,
  .request-detail-panel.detail-page-panel .request-detail-body {
    grid-template-columns:1fr;
  }
  .loan-detail-panel.detail-page-panel .profile-card,
  .request-detail-panel.detail-page-panel .profile-card {
    position:static;
    grid-row:auto;
    min-height:auto;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .loan-detail-panel.detail-page-panel .detail-tabs,
  .loan-detail-panel.detail-page-panel .detail-tab-content,
  .loan-detail-panel.detail-page-panel .loan-actions,
  .request-detail-panel.detail-page-panel .signal-list,
  .request-detail-panel.detail-page-panel .req-checklist-section,
  .request-detail-panel.detail-page-panel .req-detail-actions {
    grid-column:1;
  }
  .loan-detail-panel.detail-page-panel .detail-tab-content .signal-list,
  .request-detail-panel.detail-page-panel .signal-list,
  .request-detail-panel.detail-page-panel .check-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px) {
  .topbar { width:calc(100% - 18px); margin-top:9px; }
  .main-nav { overflow-x:auto; }
  .hero { min-height:auto; padding:56px 16px 40px; }
  .hero-ambient { display:none; }
  h1 { font-size:38px; }
  .product-grid, .kpi-grid, .loan-form, .donut-row, .detail-grid, .payment-strip, .report-grid, .settings-grid, .request-kanban { grid-template-columns:1fr; }
  .section { width:calc(100% - 18px); padding:64px 0; }
  .request-panel, .login-box { padding:18px; }
  .workspace-head { flex-direction:column; align-items:flex-start; }
  .toolbar { grid-template-columns:1fr; }
  .table-pagination {
    align-items:stretch;
    flex-direction:column;
  }
  .pager-summary,
  .pager-actions {
    justify-content:space-between;
  }
  .pager-count { text-align:center; }
  .loan-detail-panel.detail-page-panel .detail-tab-content .signal-list,
  .request-detail-panel.detail-page-panel .signal-list,
  .request-detail-panel.detail-page-panel .check-list {
    grid-template-columns:1fr;
  }
  .loan-detail-panel.detail-page-panel .loan-actions,
  .loan-detail-panel.detail-page-panel .loan-actions-row,
  .request-detail-panel.detail-page-panel .req-detail-actions,
  .request-detail-panel.detail-page-panel .req-detail-row {
    flex-direction:column;
    align-items:stretch;
    min-width:0;
  }
  .loan-detail-panel.detail-page-panel .loan-actions .wfull,
  .loan-detail-panel.detail-page-panel .loan-actions-row .button,
  .request-detail-panel.detail-page-panel .req-detail-actions .wfull,
  .request-detail-panel.detail-page-panel .req-detail-row .button {
    width:100%;
  }
  .request-detail-panel.detail-page-panel .req-checklist-section { margin:0 16px 16px; }
  .schedule-preview { overflow-x:auto; padding:16px; }
  .schedule-row { min-width:620px; }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════════════════════════ */
.auth-screen {
  display:grid;
  grid-template-columns:45fr 55fr;
  min-height:100dvh;
}

/* ─── Brand panel (left, always dark) ───────────────────────── */
.auth-brand {
  position:relative;
  background:#081409;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.auth-brand-media {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 75%, rgba(26,107,69,.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 15%, rgba(48,214,136,.13) 0%, transparent 55%);
}
.auth-brand-grid {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(48,214,136,.055) 1px, transparent 1px),
    linear-gradient(rgba(48,214,136,.055) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 100%);
}
.auth-brand-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }

.auth-brand-body {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  height:100%; padding:40px 48px;
  justify-content:space-between;
}

.auth-brand-top {
  display:flex; align-items:center; justify-content:space-between;
}
.auth-brand-logo {
  display:flex; align-items:center; gap:10px;
}
.auth-brand-logo img {
  width:36px; height:36px; border-radius:var(--r-sm);
}
.auth-brand-logo span {
  font-size:17px; font-weight:700; color:#fff; letter-spacing:-.01em;
}
.auth-brand-badge {
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(48,214,136,.7);
  background:rgba(48,214,136,.1);
  border:1px solid rgba(48,214,136,.22);
  padding:4px 11px; border-radius:var(--r-pill);
}

.auth-brand-headline { padding:0; }
.auth-eyebrow {
  display:block; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(48,214,136,.65); margin-bottom:18px;
}
.auth-brand-headline h1 {
  color:#fff;
  font-size:clamp(28px,3vw,50px);
  line-height:1.03; letter-spacing:-.025em;
  margin-bottom:18px; max-width:17ch;
}
.auth-brand-sub {
  font-size:14px; line-height:1.68;
  color:rgba(192,216,200,.68); max-width:38ch;
}

.auth-brand-features {
  display:flex; flex-direction:column; gap:12px;
  padding-top:28px;
  border-top:1px solid rgba(48,214,136,.13);
}
.auth-feature {
  display:flex; align-items:center; gap:12px;
  font-size:13.5px; color:rgba(192,216,200,.75); line-height:1.45;
}
.auth-feature-icon {
  width:24px; height:24px; border-radius:50%;
  background:rgba(48,214,136,.15); color:#30d688;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ─── Form panel (right) ─────────────────────────────────────── */
.auth-panel {
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); padding:52px 32px;
  position:relative;
}
.auth-panel::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--gold), var(--brand));
  background-size:200% 100%;
  animation:shiftGrad 4s linear infinite;
}
@keyframes shiftGrad {
  0%   { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
.auth-panel-inner { width:100%; max-width:400px; }

.auth-panel-header { margin-bottom:32px; }
.auth-panel-logo {
  width:46px; height:46px; border-radius:var(--r-sm); margin-bottom:20px;
  box-shadow:0 4px 16px var(--brand-glow);
}
.auth-panel-header h2 {
  font-size:24px; font-weight:700; letter-spacing:-.025em;
  margin-bottom:6px; color:var(--ink);
}
.auth-panel-header p { font-size:13.5px; color:var(--muted); margin:0; line-height:1.5; }

.auth-form { display:flex; flex-direction:column; gap:18px; margin-bottom:20px; }

.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-field label { font-size:13px; font-weight:500; color:var(--ink-2); }
.auth-field-row { display:flex; align-items:center; justify-content:space-between; }

.auth-input-wrap { position:relative; display:flex; align-items:center; }
.auth-input-wrap input {
  width:100%; height:46px;
  padding:0 44px 0 40px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-size:14px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.auth-input-wrap input:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-glow);
}
.auth-input-wrap input::placeholder { color:var(--subtle); }

.auth-input-icon {
  position:absolute; left:13px;
  color:var(--muted); pointer-events:none; flex-shrink:0;
}
.auth-pw-toggle {
  position:absolute; right:12px;
  background:none; border:none; cursor:pointer;
  color:var(--muted); padding:4px; line-height:0;
  border-radius:var(--r-xs);
  transition:color .15s;
}
.auth-pw-toggle:hover { color:var(--ink); }

.auth-forgot {
  font-size:12px; color:var(--brand); font-weight:500;
  transition:opacity .15s;
}
.auth-forgot:hover { opacity:.72; }

.auth-submit { margin-top:4px; }

.auth-divider {
  display:flex; align-items:center; gap:14px;
  color:var(--subtle); font-size:12px;
  margin:0 0 20px;
}
.auth-divider::before, .auth-divider::after {
  content:''; flex:1; height:1px; background:var(--line);
}

.auth-loan-cta {
  width:100%; display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:var(--surface-2);
  border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; text-align:left;
  transition:border-color .2s var(--ease), background .2s, box-shadow .2s;
}
.auth-loan-cta:hover {
  background:var(--brand-tint);
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-glow);
}
.auth-loan-cta-icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .2s, color .2s;
}
.auth-loan-cta:hover .auth-loan-cta-icon {
  background:var(--brand); color:#fff;
}
.auth-loan-cta strong { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.auth-loan-cta span   { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.auth-loan-cta-arrow  {
  margin-left:auto; color:var(--muted); flex-shrink:0;
  transition:transform .2s var(--spring), color .2s;
}
.auth-loan-cta:hover .auth-loan-cta-arrow { transform:translateX(3px); color:var(--brand); }

.auth-copyright { font-size:11px; color:var(--subtle); text-align:center; margin-top:28px; }

/* ═══════════════════════════════════════════════════════════════
   REQUEST SCREEN
══════════════════════════════════════════════════════════════ */
.req-screen {
  position:relative; min-height:100dvh;
  background:var(--bg); display:flex; flex-direction:column;
}
.req-bg {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(26,107,69,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(196,146,34,.04) 0%, transparent 50%);
}
.req-bg-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(90deg, rgba(26,107,69,.04) 1px, transparent 1px),
    linear-gradient(rgba(26,107,69,.04) 1px, transparent 1px);
  background-size:52px 52px;
}

.req-topbar {
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px; height:60px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.req-back {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:var(--muted);
  background:none; border:none; cursor:pointer;
  padding:6px 10px 6px 4px; border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.req-back:hover { color:var(--ink); background:var(--surface-2); }

.req-topbar-brand {
  display:flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}
.req-logo { width:28px; height:28px; border-radius:6px; }
.req-topbar-spacer { width:80px; }

.req-body {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 320px;
  gap:28px; max-width:1080px;
  margin:0 auto; padding:36px 32px 64px;
  width:100%;
}

/* Card */
.req-card {
  background:var(--surface);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.req-card-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; padding:32px 36px 28px;
  border-bottom:1px solid var(--line);
}
.req-eyebrow {
  display:block; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px;
}
.req-card-head h2 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; color:var(--ink); }
.req-card-head p  { font-size:13px; color:var(--muted); margin:0; max-width:44ch; line-height:1.55; }

/* Step indicator */
.req-steps { display:flex; align-items:center; flex-shrink:0; padding-top:4px; }
.req-step {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; font-size:11px; font-weight:500; color:var(--subtle);
  transition:color .2s;
}
.req-step span {
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  background:var(--surface);
  transition:background .25s, border-color .25s, color .25s;
}
.req-step.is-active { color:var(--brand); }
.req-step.is-active span { background:var(--brand); border-color:var(--brand); color:#fff; }
.req-step.is-done { color:var(--ok); }
.req-step.is-done span { background:var(--ok-bg); border-color:var(--ok); color:var(--ok); }

.req-step-line {
  width:38px; height:2px; background:var(--line);
  margin:0 4px 16px; border-radius:1px;
  transition:background .25s;
}
.req-step-line.is-done { background:var(--ok); }

/* Form */
.req-form { padding:32px 36px; }
.req-section { border:none; padding:0; margin:0; display:none; }
.req-section.is-active { display:block; }
.req-section legend { font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:20px; padding:0; }

.req-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px; }
.req-field { display:flex; flex-direction:column; gap:7px; }
.req-field--full { grid-column:1 / -1; }
.req-field label { font-size:13px; font-weight:500; color:var(--ink-2); }
.req-field abbr  { color:var(--danger); text-decoration:none; }

.req-field input,
.req-field select,
.req-field textarea {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-size:14px; outline:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.req-field input:focus,
.req-field select:focus,
.req-field textarea:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-glow);
}
.req-field.has-error input,
.req-field.has-error select,
.req-field.has-error textarea {
  border-color:var(--danger);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent);
}
.req-error {
  margin:0;
  color:var(--danger);
  font-size:11.5px;
  line-height:1.45;
  font-weight:600;
}
.req-field input::placeholder,
.req-field textarea::placeholder { color:var(--subtle); }
.req-field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7367' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px; cursor:pointer;
}
.req-field textarea { min-height:90px; resize:vertical; line-height:1.55; }

.req-actions {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line);
}

/* Submit spinner */
.req-submit-btn { position:relative; min-width:180px; }
.req-submit-spinner {
  display:none; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
.req-submit-btn.is-loading .req-submit-label { opacity:0; }
.req-submit-btn.is-loading .req-submit-spinner { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Success */
.req-success {
  padding:60px 36px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.req-success-icon {
  width:72px; height:72px; border-radius:50%;
  background:var(--ok-bg); color:var(--ok);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:8px;
}
.req-success h2 { font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-bottom:4px; }
.req-success p  { font-size:14px; color:var(--muted); max-width:40ch; line-height:1.6; margin:0; }
.req-success-ref {
  font-size:13px; color:var(--muted);
  background:var(--surface-2); padding:10px 20px;
  border-radius:var(--r-sm); border:1px solid var(--line);
  margin:8px 0;
}
.req-success-ref strong { color:var(--brand); font-variant-numeric:tabular-nums; }

/* Aside */
.req-info { display:flex; flex-direction:column; gap:16px; }
.req-info-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; box-shadow:var(--sh-xs);
}
.req-info-card h4 { margin-bottom:16px; }

.req-product-list { display:flex; flex-direction:column; gap:14px; }
.req-product { display:flex; align-items:center; gap:12px; }
.req-product-icon {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.req-product strong { display:block; font-size:13px; font-weight:600; color:var(--ink); }
.req-product span   { display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.req-steps-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.req-steps-list li { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--ink-2); }
.req-steps-list li span {
  width:24px; height:24px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand);
  font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.req-info-trust {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 16px;
}
.req-info-trust svg { color:var(--ok); flex-shrink:0; }

/* ─── Auth / Request responsive ──────────────────────────────── */
@media (max-width:960px) {
  .auth-screen { grid-template-columns:1fr; }
  .auth-brand  { display:none; }
  .auth-panel  { min-height:100dvh; }
  .req-body    { grid-template-columns:1fr; }
  .req-info    { display:none; }
}
@media (max-width:640px) {
  .auth-panel  { padding:36px 20px; }
  .req-topbar  { padding:0 16px; }
  .req-body    { padding:20px 16px 48px; }
  .req-card-head { padding:22px 20px 18px; flex-direction:column; }
  .req-form    { padding:22px 20px; }
  .req-grid    { grid-template-columns:1fr; }
  .req-actions { flex-direction:column-reverse; gap:10px; }
  .req-actions .button { width:100%; justify-content:center; }
  .req-success { padding:40px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS DROPDOWN
══════════════════════════════════════════════════════════════ */
.notif-wrap { position:relative; }
.notif-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  width:340px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); z-index:200;
  overflow:hidden;
  animation:dropIn .2s var(--spring) both;
}
@keyframes dropIn {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.notif-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.notif-head h4 { margin:0; color:var(--ink); font-size:12px; letter-spacing:.1em; }
.notif-mark-read {
  font-size:11px; font-weight:500; color:var(--brand);
  background:none; border:none; cursor:pointer; padding:0;
  transition:opacity .15s;
}
.notif-mark-read:hover { opacity:.7; }
.notif-list { max-height:340px; overflow-y:auto; }
.notif-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  transition:background .15s; cursor:default;
  position:relative;
}
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--surface-2); }
.notif-item.unread { background:var(--brand-tint); }
.notif-item.unread::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--brand); border-radius:0 2px 2px 0;
}
.notif-icon {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.notif-icon.ok      { background:var(--ok-bg);     color:var(--ok);     }
.notif-icon.warn    { background:var(--warn-bg);    color:var(--warn);   }
.notif-icon.danger  { background:var(--danger-bg);  color:var(--danger); }
.notif-item strong  { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.notif-item p       { font-size:12px; color:var(--muted); margin:0 0 4px; line-height:1.5; }
.notif-item time    { font-size:11px; color:var(--subtle); }

/* ═══════════════════════════════════════════════════════════════
   LOAN DETAIL PANEL + REQUEST DETAIL PANEL
══════════════════════════════════════════════════════════════ */
.detail-empty {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px;
  padding:48px 24px; text-align:center; height:100%;
  min-height:240px;
}
.empty-icon-wrap {
  width:52px; height:52px; border-radius:var(--r);
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--subtle);
}
.detail-empty p { font-size:13px; color:var(--muted); max-width:26ch; line-height:1.55; margin:0; }

/* Tab navigation */
.detail-tabs {
  display:flex; gap:2px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.tab-btn {
  padding:6px 14px; font-size:12px; font-weight:500;
  color:var(--muted); background:none; border:none; cursor:pointer;
  border-radius:var(--r-sm); transition:color .15s, background .15s;
}
.tab-btn:hover { color:var(--ink); background:var(--surface); }
.tab-btn.is-active { color:var(--brand); background:var(--surface); box-shadow:var(--sh-xs); }

.detail-tab-content { display:none; }
.detail-tab-content.is-active { display:block; }

/* Loan action buttons */
.loan-actions { padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; }
.loan-actions-row { display:flex; gap:8px; }
.loan-actions-row .button { flex:1; justify-content:center; }

/* History list */
.history-list { padding:20px; display:flex; flex-direction:column; gap:10px; }
.history-item {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
}
.history-item:last-child { border-bottom:1px solid var(--line); }
.history-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--line); flex-shrink:0; margin-top:4px;
}
.history-dot.ok     { background:var(--ok);     }
.history-dot.warn   { background:var(--warn);   }
.history-dot.danger { background:var(--danger); }
.history-item strong { display:block; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.history-item time   { font-size:11px; color:var(--subtle); }

/* Schedule preview */
.schedule-preview { padding:20px; overflow:auto; }
.schedule-row {
  display:grid; grid-template-columns:28px 1fr 1fr 1fr 1fr;
  gap:8px; padding:10px 12px; border-bottom:1px solid var(--line);
  font-size:12px; color:var(--ink-2);
  min-width:640px;
  background:var(--surface);
}
.schedule-row.header {
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--surface-2);
}
.schedule-row:first-child { border-radius:var(--r-sm) var(--r-sm) 0 0; }
.schedule-row:last-child { border-radius:0 0 var(--r-sm) var(--r-sm); }
.schedule-row:last-child { border-bottom:none; }

/* Request filter tabs */
.req-filter-tabs {
  display:flex; align-items:center; gap:2px;
  padding:10px 20px; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.req-filter-tabs::-webkit-scrollbar { display:none; }
.rtab {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; font-size:12px; font-weight:500;
  color:var(--muted); background:none; border:none;
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;
  transition:color .15s, background .15s; flex-shrink:0;
}
.rtab:hover { color:var(--ink); background:var(--surface-2); }
.rtab.is-active { color:var(--brand); background:var(--brand-tint); }
.tab-count {
  font-size:10px; font-weight:700; padding:1px 6px;
  border-radius:var(--r-pill); background:var(--surface-2);
  color:var(--muted); min-width:18px; text-align:center;
}
.rtab.is-active .tab-count { background:rgba(26,107,69,.15); color:var(--brand); }

/* Request detail actions */
.req-checklist-section { padding:16px 20px 0; }
.req-checklist-section h4 { margin-bottom:10px; }
.req-detail-actions { padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; }
.req-detail-row { display:flex; gap:8px; }
.req-detail-row .button { flex:1; justify-content:center; }

/* Clickable table rows */
[data-loan-row], [data-request-row], [data-overdue-row] {
  cursor:pointer; transition:background .15s;
}
[data-loan-row]:hover, [data-request-row]:hover, [data-overdue-row]:hover { background:var(--brand-tint); }
[data-loan-row].is-selected, [data-request-row].is-selected {
  background:var(--brand-tint);
  box-shadow:inset 3px 0 0 var(--brand);
}

.overdue-detail-modal .generic-modal-head p {
  margin:4px 0 0; color:var(--muted); font-size:12px;
}
.overdue-detail-grid {
  margin-top:14px; grid-template-columns:repeat(2,minmax(0,1fr));
}
.overdue-recovery-plan {
  margin-top:14px;
}

/* ═══════════════════════════════════════════════════════════════
   USERS VIEW
══════════════════════════════════════════════════════════════ */
.user-cell { display:flex; align-items:center; gap:10px; }
.user-cell strong { display:block; font-size:13px; font-weight:500; color:var(--ink); }
.user-cell small  { display:block; font-size:11px; color:var(--muted); }
.avatar.sm { width:32px; height:32px; font-size:11px; border-radius:8px; flex-shrink:0; }
.role-badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase;
}
.role-badge.admin   { background:var(--danger-bg); color:var(--danger); }
.role-badge.manager { background:var(--warn-bg);   color:var(--warn);   }
.role-badge.officer { background:var(--brand-tint); color:var(--brand); }
.role-badge.viewer  { background:var(--surface-2);  color:var(--muted); }
.button.ghost.sm { padding:5px 12px; font-size:12px; }

/* ═══════════════════════════════════════════════════════════════
   LOAN WIZARD OVERLAY
══════════════════════════════════════════════════════════════ */
.loan-wizard {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.wizard-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}
.wizard-panel {
  position:relative; z-index:1;
  display:flex;
  width:100%; max-width:980px; height:min(88vh,720px);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sh-xl);
  animation:wizardIn .35s var(--spring) both;
}
@keyframes wizardIn {
  from { opacity:0; transform:scale(.95) translateY(20px); }
  to   { opacity:1; transform:none; }
}

/* Wizard sidebar */
.wizard-sidebar {
  width:240px; flex-shrink:0;
  background:#0a1510;
  display:flex; flex-direction:column;
  padding:32px 24px;
}
.wiz-brand {
  display:flex; align-items:center; gap:10px;
  margin-bottom:44px;
}
.wiz-logo { width:32px; height:32px; border-radius:8px; }
.wiz-brand span { font-size:15px; font-weight:700; color:#fff; }

.wiz-nav { display:flex; flex-direction:column; }
.wiz-nav-step {
  display:flex; align-items:center; gap:14px;
  cursor:default; padding:4px 0;
}
.wiz-nav-num {
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(48,214,136,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:rgba(192,216,200,.4);
  flex-shrink:0;
  transition:border-color .25s, background .25s, color .25s;
}
.wiz-nav-step.is-active .wiz-nav-num {
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.wiz-nav-step.is-done .wiz-nav-num {
  background:rgba(48,214,136,.15); border-color:rgba(48,214,136,.4); color:rgba(48,214,136,.8);
}
.wiz-nav-label strong { display:block; font-size:13px; font-weight:600; color:rgba(192,216,200,.5); line-height:1.2; transition:color .25s; }
.wiz-nav-label span   { display:block; font-size:11px; color:rgba(96,120,100,.7); margin-top:1px; }
.wiz-nav-step.is-active .wiz-nav-label strong { color:#fff; }
.wiz-nav-step.is-done   .wiz-nav-label strong { color:rgba(192,216,200,.7); }

.wiz-nav-connector {
  width:2px; height:28px; margin:4px 0 4px 14px;
  background:rgba(48,214,136,.12); border-radius:1px;
  transition:background .25s;
}
.wiz-nav-connector.is-done { background:rgba(48,214,136,.35); }

/* Wizard body */
.wizard-body {
  flex:1; display:flex; flex-direction:column;
  background:var(--surface); position:relative; overflow:hidden;
}
.wizard-progress-track {
  height:3px; background:var(--line); flex-shrink:0;
}
.wizard-progress-fill {
  height:100%; background:var(--brand);
  transition:width .45s var(--spring); width:25%;
  border-radius:0 2px 2px 0;
}
.wizard-close-btn {
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted);
  transition:color .15s, background .15s;
}
.wizard-close-btn:hover { color:var(--ink); background:var(--line); }

/* Wizard panes */
.wiz-pane {
  flex:1; overflow-y:auto; padding:36px 40px 0;
  display:none;
  animation:paneIn .3s var(--spring) both;
}
.wiz-pane.is-active { display:block; }
.wiz-pane.is-exiting {
  display:block;
  animation:paneOut .2s var(--ease) both;
}
@keyframes paneIn {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:none; }
}
@keyframes paneOut {
  from { opacity:1; transform:translateX(0); }
  to   { opacity:0; transform:translateX(-20px); }
}
.wiz-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand); margin-bottom:8px;
}
.wiz-pane-head h2 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; color:var(--ink); }
.wiz-pane-head p  { font-size:13px; color:var(--muted); margin-bottom:24px; }

.wiz-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 20px; }
.wiz-field { display:flex; flex-direction:column; gap:6px; }
.wiz-field--full { grid-column: 1 / -1; }
.wiz-field label { font-size:13px; font-weight:500; color:var(--ink-2); }
.wiz-field abbr  { color:var(--danger); text-decoration:none; }
.wiz-field input,
.wiz-field select {
  width:100%; padding:10px 13px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-size:14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none; appearance:none;
}
.wiz-field input:focus,
.wiz-field select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow);
}
.wiz-field select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c7367' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px;
}

/* Borrower search */
.borrower-search-wrap { position:relative; margin-bottom:16px; }
.borrower-search-field {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface);
  color:var(--muted);
}
.borrower-search-field svg { flex-shrink:0; }
.borrower-search-field input {
  flex:1; border:none; outline:none; background:transparent;
  color:var(--ink); font-size:14px;
}
.borrower-results {
  position:absolute; top:100%; left:0; right:0; z-index:10;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--sh);
  overflow:hidden; margin-top:4px;
}
.borrower-result-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer;
  transition:background .15s;
}
.borrower-result-item:hover { background:var(--brand-tint); }
.borrower-result-item strong { display:block; font-size:13px; color:var(--ink); }
.borrower-result-item small  { display:block; font-size:11px; color:var(--muted); }
.borrower-result-item.is-selected { background:var(--brand-tint); }

.wiz-divider {
  display:flex; align-items:center; gap:14px;
  font-size:11px; color:var(--subtle); margin-bottom:20px;
}
.wiz-divider::before,.wiz-divider::after { content:''; flex:1; height:1px; background:var(--line); }

/* Product cards */
.wiz-product-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wiz-product-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:20px 18px; background:var(--surface-2);
  border:2px solid var(--line); border-radius:var(--r);
  cursor:pointer; text-align:left; transition:border-color .2s, background .2s, box-shadow .2s, transform .2s var(--spring);
}
.wiz-product-card:hover { border-color:var(--brand-mid); background:var(--brand-tint); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.wiz-product-card.is-selected { border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 3px var(--brand-glow); }
.wiz-product-icon {
  width:42px; height:42px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.wiz-product-icon.brand { background:var(--brand-tint); color:var(--brand); }
.wiz-product-icon.gold  { background:var(--gold-tint);  color:var(--gold); }
.wiz-product-icon.info  { background:var(--info-bg);    color:var(--info); }
.wiz-product-card strong { font-size:14px; font-weight:600; color:var(--ink); }
.wiz-product-card span   { font-size:12px; color:var(--muted); }
.wiz-product-card small  { font-size:11px; color:var(--subtle); margin-top:2px; }

/* Amount chips */
.amount-chips { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.chip {
  padding:5px 12px; font-size:12px; font-weight:500;
  color:var(--muted); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-pill);
  cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.chip:hover { color:var(--brand); border-color:var(--brand); background:var(--brand-tint); }
.chip.is-active { color:var(--brand); border-color:var(--brand); background:var(--brand-tint); }

/* Term selector */
.term-selector { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.term-btn {
  padding:8px 18px; font-size:13px; font-weight:500;
  color:var(--muted); background:var(--surface-2);
  border:1.5px solid var(--line); border-radius:var(--r-pill);
  cursor:pointer; transition:all .15s;
}
.term-btn:hover { color:var(--brand); border-color:var(--brand); background:var(--brand-tint); }
.term-btn.is-active { color:#fff; background:var(--brand); border-color:var(--brand); }

/* Schedule preview box */
.schedule-preview-box {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden;
}
.schedule-preview-box .schedule-row { font-size:12px; padding:8px 14px; }
.schedule-preview-box .schedule-row.header { font-size:11px; background:var(--surface-3); }
.schedule-placeholder { padding:16px 14px; font-size:12px; color:var(--subtle); }

/* Review card */
.review-card {
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:0; overflow:hidden; margin-bottom:20px;
}
.review-section { padding:16px 20px; border-bottom:1px solid var(--line); }
.review-section:last-child { border-bottom:none; }
.review-section h4 { margin-bottom:12px; }
.review-row { display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.review-row span { font-size:13px; color:var(--muted); }
.review-row strong { font-size:13px; color:var(--ink); font-weight:500; }

.wiz-confirm-check {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--ink-2); cursor:pointer; line-height:1.5;
}
.wiz-confirm-check input { margin-top:2px; flex-shrink:0; accent-color:var(--brand); }

/* Wizard footer */
.wizard-footer {
  display:flex; align-items:center; gap:10px;
  padding:16px 40px; border-top:1px solid var(--line);
  background:var(--surface); flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════════ */
.search-overlay {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:flex-start; justify-content:center;
  padding:80px 20px 20px;
}
.search-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
}
.search-box {
  position:relative; z-index:1;
  width:100%; max-width:580px;
  background:var(--surface);
  border-radius:var(--r-lg); border:1px solid var(--line);
  box-shadow:var(--sh-xl); overflow:hidden;
  animation:wizardIn .25s var(--spring) both;
}
.search-input-wrap {
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.search-icon { color:var(--muted); flex-shrink:0; }
.search-input-wrap input {
  flex:1; border:none; outline:none; background:transparent;
  color:var(--ink); font-size:16px;
}
.search-input-wrap input::placeholder { color:var(--subtle); }
.search-kbd {
  padding:3px 8px; font-size:11px; font-weight:500;
  color:var(--subtle); background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-xs);
  cursor:pointer; flex-shrink:0; letter-spacing:.04em;
}
.search-results { max-height:420px; overflow-y:auto; }
.search-hint { padding:24px; font-size:13px; color:var(--muted); text-align:center; margin:0; }
.search-section-label {
  padding:10px 18px 6px; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--subtle);
}
.search-result {
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; cursor:pointer; transition:background .12s;
}
.search-result:hover { background:var(--brand-tint); }
.search-result:hover .search-result-arrow { opacity:1; }
.search-result-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:var(--surface-2); color:var(--muted);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.search-result strong { display:block; font-size:13px; color:var(--ink); }
.search-result span   { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
.search-result-arrow  { margin-left:auto; opacity:0; color:var(--muted); transition:opacity .12s; }

/* ─── Wizard/overlay responsive ──────────────────────────────── */
@media (max-width:860px) {
  .wizard-sidebar { display:none; }
  .wiz-grid { grid-template-columns:1fr; }
  .wiz-product-cards { grid-template-columns:1fr; }
  .wiz-pane { padding:24px 20px 0; }
  .wizard-footer { padding:16px 20px; }
  .loan-wizard { padding:0; }
  .wizard-panel { max-width:100%; height:100dvh; border-radius:0; }
  .notif-dropdown { width:300px; }
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mini-action {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 999px;
  padding: 0 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-action:hover {
  color: #fff;
  background: var(--brand);
}

/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .28s var(--spring), opacity .2s;
  max-width: 340px;
  line-height: 1.45;
  pointer-events: none;
}
.toast.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.toast-ok     { background: var(--ok);     }
.toast-warn   { background: var(--warn);   }
.toast-danger { background: var(--danger); }

/* ─── Generic Modal ──────────────────────────────────────────── */
.generic-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.generic-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 18, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s;
}
.generic-modal.is-open .generic-modal-backdrop { opacity: 1; }
.generic-modal-box {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(.97);
  opacity: 0;
  transition: transform .28s var(--spring), opacity .22s;
  overflow: hidden;
}
.generic-modal.is-open .generic-modal-box {
  transform: none;
  opacity: 1;
}
.generic-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.generic-modal-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.generic-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.generic-modal-close:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.generic-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.generic-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.generic-modal-footer .delete-zone {
  margin-right: auto;
}

/* Modal form fields */
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modal-field.full { grid-column: 1 / -1; }
.modal-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.modal-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.modal-field textarea {
  height: 80px;
  padding: 10px 12px;
  resize: vertical;
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.modal-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c7367' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

@media (max-width: 540px) {
  .generic-modal { padding: 12px; }
  .generic-modal-box { max-width: 100%; }
  .modal-fields-grid { grid-template-columns: 1fr; }
  .toast { right: 16px; bottom: 16px; left: 16px; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — DRAWER SIDEBAR + RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop, shown on mobile */
.mob-menu-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.mob-menu-btn:hover  { background: var(--surface-3); }
.mob-menu-btn:active { transform: scale(.95); }

/* Sidebar overlay backdrop */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.sidebar-overlay.is-open { opacity: 1; pointer-events: auto; }

/* "New loan" button text — hidden on tiny screens */
.btn-label { /* visible by default */ }

/* ─── ≤ 768 px : mobile layout ─────────────────────────────── */
@media (max-width: 768px) {

  /* Show hamburger + backdrop */
  .mob-menu-btn    { display: flex; }
  .sidebar-overlay { display: block; }

  /* Dashboard: full-width, no sidebar column */
  .dashboard { grid-template-columns: 1fr !important; }

  /* Sidebar: fixed off-canvas drawer, overrides the 1120px horizontal rules */
  .sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 264px !important; height: 100dvh !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    z-index: 99;
    transform: translateX(-100%);
    transition: transform .28s var(--ease), box-shadow .28s;
    overflow-y: auto !important; overflow-x: hidden !important;
  }
  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0,0,0,.35);
  }

  /* Reset sidebar-brand from 1120px horizontal rule */
  .sidebar-brand {
    flex: none !important;
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid var(--sb-line) !important;
    padding: 18px 16px !important;
  }

  /* Reset side-nav from 1120px horizontal rule */
  .side-nav {
    flex: 1 !important;
    flex-direction: column !important;
    padding: 12px 10px !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    gap: 1px !important;
  }
  .side-nav a { flex-shrink: initial !important; }

  /* Restore section labels hidden by 1120px rule */
  .nav-section-label { display: block !important; }

  /* Reset sidebar-footer from 1120px horizontal rule */
  .sidebar-footer {
    flex: none !important;
    border-top: 1px solid var(--sb-line) !important;
    border-left: none !important;
    padding: 10px 12px !important;
  }

  /* Workspace header: compact */
  .workspace-head { padding: 12px 16px !important; gap: 10px; }
  .workspace-body { padding: 14px !important; }
  .workspace-actions { gap: 6px !important; }

  /* Notifications: prevent viewport overflow */
  .notif-dropdown {
    width: min(320px, calc(100vw - 32px)) !important;
    right: 0 !important;
  }

  /* KPI grid: 2 columns on tablet/large mobile */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Tables: smooth momentum scroll on iOS */
  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* Wizard: full-screen on mobile */
  .wizard-panel { height: 100dvh !important; }

  /* Dashboard grid panels: single column */
  .dashboard-grid { gap: 12px; }
}

/* ─── ≤ 480 px : small phones ──────────────────────────────── */
@media (max-width: 480px) {

  /* KPI: single column */
  .kpi-grid { grid-template-columns: 1fr !important; }

  /* Workspace title area: strip eyebrow + subtitle, shrink h2 */
  .workspace-head .eyebrow { display: none; }
  .workspace-head p         { display: none; }
  .workspace-head h2        { font-size: 15px !important; margin: 0; }

  /* New loan button: icon only (hide text label) */
  .btn-label { display: none; }

  /* New loan: tighter padding when label is hidden */
  [data-open-wizard] { padding: 0 12px !important; }

  /* Notifications: anchor to viewport edges on tiny screens */
  .notif-dropdown {
    position: fixed !important;
    left: 12px !important; right: 12px !important;
    width: auto !important; top: auto !important;
  }

  /* Toolbar: single-column, tight padding */
  .toolbar { padding: 10px 12px 12px !important; }

  /* Workspace body: minimal padding */
  .workspace-body { padding: 10px !important; }

  /* Panels: reduce internal padding */
  .panel-body { padding: 14px 14px !important; }

  /* Schedule preview: ensure it scrolls */
  .schedule-preview { padding: 10px !important; }
}