/* =====================================================================
   DABA — "Cosmic" dark theme.

   Layered OVER app.css, so app.css keeps every layout rule and this file
   only repaints. Remove the <link> to this file in includes/header.php to
   go straight back to the light theme; nothing else needs touching.
   ===================================================================== */

:root{
  /* --- brand ramp, pushed into neon --- */
  --p-900:#12082b;
  --p-800:#1b0e3f;
  --p-700:#2a1560;
  --p-600:#7b3fe4;
  --p-500:#9d5cff;
  --p-300:#c4a4ff;
  --p-200:#3a2470;
  --p-100:#2b1a57;
  --p-50:#241549;
  --accent:#ffb43a;

  /* --- neon accents used by the stat tiles --- */
  --n-blue:#4ea8ff;
  --n-pink:#ff5fc8;
  --n-cyan:#3ee0d0;
  --n-orange:#ff8a3d;
  --n-violet:#a970ff;
  --n-lime:#7ee787;

  /* --- ink + surfaces --- */
  --ink:#f2ecff;
  --ink-2:#c6b9e6;
  --ink-3:#9384bb;
  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.08);
  --bg:#150a34;
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.09);

  /* --- status, brightened for a dark ground --- */
  --good:#5ce9a6;  --good-bg:rgba(50,220,150,.14);
  --warn:#ffc75a;  --warn-bg:rgba(255,180,58,.15);
  --bad:#ff7a8a;   --bad-bg:rgba(255,90,110,.15);
  --info:#6fc0ff;  --info-bg:rgba(80,170,255,.15);
  --neutral:#b0a3d0; --neutral-bg:rgba(255,255,255,.09);

  --r-sm:10px; --r:14px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(0,0,0,.28), 0 8px 24px rgba(10,4,30,.32);
  --sh-2:0 10px 34px rgba(10,4,30,.5);
  --sh-3:0 24px 60px rgba(5,2,20,.62);
  --glow:0 0 0 1px rgba(255,255,255,.07), 0 12px 40px rgba(123,63,228,.22);
}

/* ------------------------------------------------------- the backdrop ---- */
body{
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(123,63,228,.55), transparent 62%),
    radial-gradient(900px 560px at 92% 6%,    rgba(255,95,200,.28), transparent 60%),
    radial-gradient(1000px 700px at 78% 96%,  rgba(62,224,208,.16), transparent 62%),
    linear-gradient(178deg,#1d0f47 0%,#150a34 44%,#0d0524 100%);
  background-attachment:fixed;
  color:var(--ink);
}
/* a very faint starfield, painted once behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 14% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 11%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 37% 62%, #ffe9ff, transparent),
    radial-gradient(1.1px 1.1px at 86% 44%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 24% 84%, #d8ecff, transparent),
    radial-gradient(1.2px 1.2px at 57% 35%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 77%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 5% 54%,  #ffd9f4, transparent);
  background-repeat:repeat;
  background-size:520px 420px,430px 380px,610px 510px,380px 460px,
                  560px 440px,470px 400px,640px 520px,500px 480px;
}
.shell,.auth,.public-head,.public-main,.public-foot{position:relative;z-index:1}

a{color:var(--p-300)}
a:hover{color:#e4d5ff}
h1,h2,h3,h4{color:var(--ink)}
.muted,.small.muted{color:var(--ink-3)}

/* ----------------------------------------------------------- sidebar ---- */
.sidebar{
  background:linear-gradient(180deg,rgba(38,18,84,.92),rgba(18,8,43,.96));
  backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.09);
  box-shadow:1px 0 40px rgba(0,0,0,.35);
}
.brand img{background:rgba(255,255,255,.95);border-radius:10px}
.brand-name{background:linear-gradient(92deg,#fff,#c9a6ff);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.nav-link{color:rgba(233,224,255,.76);border-radius:12px}
.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-link.active{
  background:linear-gradient(96deg,rgba(157,92,255,.42),rgba(255,95,200,.22));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 20px rgba(123,63,228,.34);
}
.nav-link.active::before{background:var(--n-pink);box-shadow:0 0 10px var(--n-pink)}
.nav-link .count,.nav-sub .count{
  background:linear-gradient(120deg,var(--n-pink),#ff9de0);color:#2b0a22;
  box-shadow:0 0 12px rgba(255,95,200,.5)}
.nav-subs{border-left:1px solid rgba(255,255,255,.12)}
.nav-sub.active{background:rgba(157,92,255,.22)}
.side-foot{border-top-color:rgba(255,255,255,.12)}
.avatar{background:linear-gradient(140deg,var(--p-600),var(--n-pink));color:#fff;
  box-shadow:0 0 14px rgba(157,92,255,.45)}

/* ------------------------------------------------------------ topbar ---- */
.topbar{
  background:rgba(24,12,56,.62);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 6px 26px rgba(8,3,24,.35);
}
.topbar h1{color:#fff}
.topbar .crumb{color:var(--p-300)}
.menu-btn{color:#fff}
.icon-btn{color:var(--ink-2)}
.icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.16)}
.icon-btn .dot-count{background:var(--n-pink);color:#2b0a22;border-color:rgba(24,12,56,.9);
  box-shadow:0 0 10px rgba(255,95,200,.6)}
.quick-search{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;color:var(--ink-2)}
.quick-search:focus-within{border-color:var(--p-500);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(157,92,255,.22)}
.quick-search input{color:var(--ink)}
.quick-search input::placeholder{color:var(--ink-3)}
.profile-btn{color:var(--ink-2);border-radius:20px}
.profile-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.profile-btn .avatar.sm{background:linear-gradient(140deg,var(--p-600),var(--n-pink))}
.profile-btn .caret{color:var(--ink-3)}

/* ------------------------------------------------------------- cards ---- */
.card,fieldset,.preview-card,.step,.product,.notif,.msg,.note-block,.readonly-panel{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  backdrop-filter:blur(16px);
  box-shadow:var(--glow);
}
.card{padding:20px 22px}
.card-head h2{color:#fff}
.card-head .sub,.card .small.muted{color:var(--ink-3)}
.card-accent{border-top:1px solid rgba(255,255,255,.12);
  box-shadow:var(--glow),inset 0 3px 0 0 var(--n-violet)}
.card-accent-red{box-shadow:var(--glow),inset 0 3px 0 0 var(--bad)}
.card-accent-green{box-shadow:var(--glow),inset 0 3px 0 0 var(--good)}
legend{color:#fff;background:transparent}
fieldset{padding:20px 22px 8px}

/* --------------------------------------------------------- stat tiles ---- */
/* Each tile in a row takes the next neon in the cycle, the way the four
   cards in the reference each carry their own colour. */
.tile{
  background:var(--surface);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);backdrop-filter:blur(16px);
  box-shadow:var(--glow);position:relative;overflow:hidden;
}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 0%,var(--tint,rgba(157,92,255,.22)),transparent 58%)}
.tile>*{position:relative;z-index:1}
.tile-ico{background:var(--tint-solid,rgba(157,92,255,.22));
  color:var(--tint-ink,#c9a6ff);border-radius:13px;
  box-shadow:0 0 18px var(--tint-solid,rgba(157,92,255,.3))}
.tile-label{color:var(--ink-3)}
.tile-value{color:#fff;text-shadow:0 0 22px rgba(157,92,255,.35)}
.tile-sub{color:var(--ink-3)}

.tiles>*:nth-child(4n+1),.grid>*:nth-child(4n+1) .tile,.tile-link:nth-child(4n+1)>.tile{
  --tint:rgba(78,168,255,.26); --tint-solid:rgba(78,168,255,.22); --tint-ink:#8fcaff}
.tiles>*:nth-child(4n+2),.grid>*:nth-child(4n+2) .tile,.tile-link:nth-child(4n+2)>.tile{
  --tint:rgba(255,95,200,.26); --tint-solid:rgba(255,95,200,.22); --tint-ink:#ff9ddd}
.tiles>*:nth-child(4n+3),.grid>*:nth-child(4n+3) .tile,.tile-link:nth-child(4n+3)>.tile{
  --tint:rgba(62,224,208,.24); --tint-solid:rgba(62,224,208,.2);  --tint-ink:#7ff0e4}
.tiles>*:nth-child(4n+4),.grid>*:nth-child(4n+4) .tile,.tile-link:nth-child(4n+4)>.tile{
  --tint:rgba(255,138,61,.26); --tint-solid:rgba(255,138,61,.22); --tint-ink:#ffb183}

/* status tiles still win over the cycle, so good/bad stays readable */
.tile-good{--tint:rgba(92,233,166,.24);--tint-solid:var(--good-bg);--tint-ink:var(--good)}
.tile-warn{--tint:rgba(255,199,90,.24);--tint-solid:var(--warn-bg);--tint-ink:var(--warn)}
.tile-bad{--tint:rgba(255,122,138,.24);--tint-solid:var(--bad-bg);--tint-ink:var(--bad)}
.tile-brand{
  background:linear-gradient(140deg,rgba(123,63,228,.55),rgba(255,95,200,.3));
  border-color:rgba(255,255,255,.18);
  --tint:rgba(255,255,255,.14);--tint-solid:rgba(255,255,255,.18);--tint-ink:#fff}
.tile-brand .tile-label,.tile-brand .tile-sub{color:rgba(255,255,255,.8)}
.tile-link:hover>.tile{box-shadow:var(--glow),0 14px 40px rgba(157,92,255,.3)}

/* --------------------------------------------------------- hero stat ---- */
.hero-stat{
  background:linear-gradient(126deg,rgba(123,63,228,.62) 0%,rgba(90,40,180,.5) 46%,rgba(255,95,200,.34) 100%);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;
  box-shadow:0 18px 54px rgba(60,20,140,.42),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(18px);
}
.hero-stat::after{background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%)}
.hero-ico{background:rgba(255,255,255,.2);box-shadow:0 0 22px rgba(255,255,255,.18)}
.hero-label{color:rgba(255,255,255,.72)}
.hero-value{color:#fff;text-shadow:0 0 30px rgba(255,255,255,.3)}
.hero-sub,.hero-chip span{color:rgba(255,255,255,.76)}
.hero-chip strong{color:#fff}
.hero,.auth-brand,.quote{
  background:linear-gradient(140deg,rgba(123,63,228,.6),rgba(30,14,70,.9));
  border:1px solid rgba(255,255,255,.12);border-radius:22px}

/* ------------------------------------------------------------ tables ---- */
table{color:var(--ink-2)}
th{color:var(--p-300);border-bottom-color:rgba(255,255,255,.14);background:transparent}
td{border-bottom-color:rgba(255,255,255,.07);color:var(--ink-2)}
td strong,td b{color:#fff}
tbody tr:hover{background:rgba(157,92,255,.12)}
td .sub,.pc-fields dt{color:var(--ink-3)}
tfoot th{background:rgba(157,92,255,.12);border-top-color:rgba(255,255,255,.16);color:var(--ink-2)}
tfoot th.right{color:#fff}
/* The scroll-edge fades were painted white. They only blend if the strip they
   cover is a flat colour, so the table panel gets one — which also gives the
   long tables the solid panel look the reference has. */
.table-wrap{
  background-color:#241549;
  background-image:
    linear-gradient(to right,#241549 40%,rgba(36,21,73,0)),
    linear-gradient(to left, #241549 40%,rgba(36,21,73,0)),
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.45),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.45),rgba(0,0,0,0));
  background-position:left center,right center,left center,right center;
  background-repeat:no-repeat;
  background-size:30px 100%,30px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll}
.card.flush .table-wrap{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* ------------------------------------------------------- scrollbars ---- */
/* Firefox */
html{scrollbar-color:rgba(157,92,255,.55) rgba(255,255,255,.06);scrollbar-width:thin}
.side-nav,.table-wrap,.menu-pop{scrollbar-color:rgba(157,92,255,.45) transparent}
/* Chromium / WebKit */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(157,92,255,.75),rgba(255,95,200,.6));
  border-radius:20px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(180,110,255,.95),rgba(255,120,215,.8));
  background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.side-nav::-webkit-scrollbar{width:8px}
.side-nav::-webkit-scrollbar-track{background:transparent}

/* ------------------------------------------------------------ badges ---- */
.badge{border:1px solid transparent;font-weight:700}
.badge-green {background:var(--good-bg);   color:var(--good);   border-color:rgba(92,233,166,.32)}
.badge-red   {background:var(--bad-bg);    color:var(--bad);    border-color:rgba(255,122,138,.32)}
.badge-amber {background:var(--warn-bg);   color:var(--warn);   border-color:rgba(255,199,90,.32)}
.badge-blue  {background:var(--info-bg);   color:var(--info);   border-color:rgba(111,192,255,.32)}
.badge-purple{background:rgba(157,92,255,.2);color:#c9a6ff;     border-color:rgba(157,92,255,.36)}
.badge-grey  {background:var(--neutral-bg);color:var(--neutral);border-color:rgba(255,255,255,.14)}
.badge::before{box-shadow:0 0 8px currentColor}
.chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--ink-2)}

/* ----------------------------------------------------------- buttons ---- */
.btn{border-radius:20px;font-weight:650}
.btn-primary{
  background:linear-gradient(120deg,#7b3fe4 0%,#b44bff 55%,#ff5fc8 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 6px 22px rgba(150,60,220,.45)}
.btn-primary:hover{box-shadow:0 8px 30px rgba(180,75,255,.6);filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:var(--p-500);color:#fff}
.btn-success{background:linear-gradient(120deg,#1f9c6d,#3ee0a0);color:#062418;
  box-shadow:0 6px 20px rgba(62,224,160,.32)}
.btn-danger{background:linear-gradient(120deg,#c0344a,#ff6b84);color:#fff;
  box-shadow:0 6px 20px rgba(255,107,132,.3)}
.pager a,.pager span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
  color:var(--ink-2);border-radius:12px}
.pager a:hover{border-color:var(--p-500);color:#fff;background:rgba(157,92,255,.18)}
.pager .current{background:linear-gradient(120deg,var(--p-600),var(--n-pink));
  border-color:transparent;color:#fff}

/* ------------------------------------------------------------- forms ---- */
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],input[type=tel],input[type=file],select,textarea{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:var(--ink);border-radius:12px;
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  border-color:var(--p-500);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(157,92,255,.24)}
input[type=file]{background:rgba(255,255,255,.05)}
select{background-color:rgba(255,255,255,.07);color:var(--ink)}
/* the native dropdown list is drawn by the OS — keep it readable */
select option{background:#22124d;color:#f2ecff}
label{color:var(--ink-2)}
.hint,.note,.form-actions .note{color:var(--ink-3)}
.filters{background:var(--surface);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);padding:14px 16px;backdrop-filter:blur(14px)}
.form-actions{background:rgba(24,12,56,.82);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);padding:12px 16px;
  box-shadow:0 -6px 26px rgba(8,3,24,.4)}
.switch,.check{color:var(--ink-2)}
.check input,.choice input{accent-color:var(--p-500)}
.choice{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-radius:14px}
.choice:hover{background:rgba(157,92,255,.14);border-color:var(--p-500)}
.choice.on,.choice:has(input:checked){background:rgba(157,92,255,.2);border-color:var(--p-500);
  box-shadow:0 0 0 1px var(--p-500),0 6px 20px rgba(157,92,255,.24)}
.c-label{color:#fff}
.c-note{color:var(--ink-3)}
.answer-list li{background:rgba(255,255,255,.06);border-radius:12px}
.a-label{color:var(--ink-2)}
.quiz-form legend{color:#fff}

/* ------------------------------------------------------------ alerts ---- */
.alert{border:1px solid transparent;backdrop-filter:blur(10px);border-radius:14px}
.alert-success{background:var(--good-bg);border-color:rgba(92,233,166,.3);color:var(--good)}
.alert-error  {background:var(--bad-bg); border-color:rgba(255,122,138,.3);color:var(--bad)}
.alert-info   {background:var(--info-bg);border-color:rgba(111,192,255,.3);color:var(--info)}
.alert-warning{background:var(--warn-bg);border-color:rgba(255,199,90,.3); color:var(--warn)}
.alert strong{color:inherit}
.alert-row{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.alert-row.alert-critical{background:var(--bad-bg); color:var(--bad)}
.alert-row.alert-warning {background:var(--warn-bg);color:var(--warn)}
.alert-row.alert-info    {background:var(--info-bg);color:var(--info)}

/* ------------------------------------------------------------ charts ---- */
.bar-fill{background:linear-gradient(180deg,#ff5fc8 0%,#b44bff 48%,#4ea8ff 100%);
  box-shadow:0 0 16px rgba(180,75,255,.4)}
.bar-label{color:var(--ink-3)}
.bd-track,.progress,.place-bar{background:rgba(255,255,255,.1)}
.bd-fill,.progress-fill,.place-bar>span{box-shadow:0 0 12px currentColor}
.progress-fill{background:linear-gradient(90deg,#4ea8ff,#b44bff,#ff5fc8)}
.progress-fill.pf-good{background:linear-gradient(90deg,#2fbf88,#5ce9a6)}
.progress-fill.pf-warn{background:linear-gradient(90deg,#e0a12c,#ffc75a)}
.progress-fill.pf-bad {background:linear-gradient(90deg,#d9455c,#ff7a8a)}
.bd-green{background:#5ce9a6}.bd-red{background:#ff7a8a}.bd-amber{background:#ffc75a}
.bd-blue{background:#6fc0ff}.bd-purple{background:#b44bff}.bd-grey{background:#9384bb}
.dot-green{background:#5ce9a6}.dot-red{background:#ff7a8a}.dot-amber{background:#ffc75a}
.dot-blue{background:#6fc0ff}.dot-purple{background:#b44bff}.dot-grey{background:#9384bb}
.bd-label{color:var(--ink-2)}.bd-value{color:#fff}.bd-pct{color:var(--ink-3)}
.donut .d-value{fill:#fff}
.donut .d-label{fill:var(--ink-3)}
.donut-legend .l{color:var(--ink-2)}
.donut-legend .v{color:#fff}
.donut-legend .p{color:var(--ink-3)}
.spark-purple{color:#c07bff}.spark-green{color:#5ce9a6}.spark-red{color:#ff7a8a}
.chart figcaption{color:var(--ink-3)}
.score-green{color:var(--good)}.score-amber{color:var(--warn)}
.score-red{color:var(--bad)}.score-grey{color:var(--ink-3)}

/* --------------------------------------------------- portfolio tiles ---- */
.pf{background:var(--surface);border:1px solid rgba(255,255,255,.12);
  border-left-width:3px;border-radius:16px;backdrop-filter:blur(14px);box-shadow:var(--sh-1)}
.pf:hover{background:rgba(255,255,255,.1);box-shadow:0 12px 34px rgba(123,63,228,.32);
  transform:translateY(-2px)}
.pf-name{color:#fff}
.pf-sub,.pf-count span{color:var(--ink-3)}
.pf-count strong{color:#fff}
.pf-count .pf-value{color:var(--p-300)}
.pf-blue  {border-left-color:var(--n-blue)}   .pf-blue .pf-ico  {background:var(--info-bg);color:var(--info)}
.pf-green {border-left-color:var(--good)}     .pf-green .pf-ico {background:var(--good-bg);color:var(--good)}
.pf-amber {border-left-color:var(--n-orange)} .pf-amber .pf-ico {background:var(--warn-bg);color:var(--warn)}
.pf-grey  {border-left-color:#7e72a8}         .pf-grey .pf-ico  {background:var(--neutral-bg);color:var(--neutral)}
.pf-purple{border-left-color:var(--n-violet)} .pf-purple .pf-ico{background:rgba(157,92,255,.2);color:#c9a6ff}
.pf-tabs .tab-n{background:rgba(157,92,255,.22);color:#c9a6ff}
.pf-tabs a.on .tab-n{background:linear-gradient(120deg,var(--p-600),var(--n-pink));color:#fff}

/* ------------------------------------------------- lender preview cards -- */
.preview-card:hover{box-shadow:0 14px 40px rgba(123,63,228,.3)}
.pc-head{border-bottom:1px solid rgba(255,255,255,.1)}
.pc-blue {background:rgba(78,168,255,.16)}  .pc-blue .pc-portfolio {color:#8fcaff}
.pc-green{background:rgba(92,233,166,.14)}  .pc-green .pc-portfolio{color:var(--good)}
.pc-amber{background:rgba(255,180,58,.16)}  .pc-amber .pc-portfolio{color:var(--warn)}
.pc-grey {background:rgba(255,255,255,.08)} .pc-grey .pc-portfolio {color:var(--neutral)}
.pc-portfolio{color:#c9a6ff}
.pc-no{color:var(--ink-2)}
.pc-fields dd{color:var(--ink)}
.pc-amount{color:#fff;text-shadow:0 0 18px rgba(157,92,255,.5)}
.pc-foot{border-top-color:rgba(255,255,255,.1)}

/* ----------------------------------------------------- odds and ends ---- */
.kv{border-bottom-color:rgba(255,255,255,.08)}
.kv span{color:var(--ink-3)}
.kv strong{color:#fff}
.kv .neg{color:var(--bad)}
.dl dt,.listing-figures span{color:var(--p-300)}
.dl dd,.listing-figures strong{color:var(--ink)}
.tabs{border-bottom-color:rgba(255,255,255,.12)}
.tabs a{color:var(--ink-3)}
.tabs a:hover{color:#fff}
.tabs a.on{color:#fff;border-bottom-color:var(--n-pink);
  text-shadow:0 0 16px rgba(255,95,200,.5)}
.timeline{border-left-color:rgba(255,255,255,.14)}
.timeline li::before{background:var(--p-500);box-shadow:0 0 10px var(--p-500)}
.timeline .when{color:var(--ink-3)}
.empty,.empty-state{color:var(--ink-3)}
.empty-state h3{color:#fff}
.empty-state .empty-ico{background:rgba(157,92,255,.18);color:#c9a6ff;
  box-shadow:0 0 24px rgba(157,92,255,.3)}
.stepbar span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--ink-3)}
.stepbar span.on{background:linear-gradient(120deg,rgba(157,92,255,.35),rgba(255,95,200,.25));
  color:#fff;border-color:transparent}
.notif.unread{border-left:3px solid var(--n-pink);background:rgba(255,95,200,.1)}
.notif .n-ico{background:rgba(157,92,255,.2);color:#c9a6ff}
.notif .n-title{color:#fff}
.menu-pop{background:rgba(30,16,68,.97);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:var(--sh-3)}
.menu-pop button,.menu-pop a{color:var(--ink-2)}
.menu-pop button:hover,.menu-pop a:hover{background:rgba(157,92,255,.22);color:#fff}
.menu-pop button.danger{color:var(--bad)}
.menu-pop button.danger:hover{background:rgba(255,122,138,.18)}
.menu-pop .menu-head{border-bottom-color:rgba(255,255,255,.12)}
.menu-pop .menu-head strong{color:#fff}
.menu[open]>summary{background:rgba(157,92,255,.2);border-color:var(--p-500);color:#fff}
.menu-note button{background:rgba(157,92,255,.24);color:#c9a6ff}
.msg-staff{background:rgba(157,92,255,.14);border-color:rgba(157,92,255,.3)}
.msg-head .sub{color:var(--ink-3)}
.msg-body{color:var(--ink-2)}
.readonly-panel{background:rgba(255,255,255,.05)}
.plain-list li{border-bottom-color:rgba(255,255,255,.08)}
.back{color:var(--ink-3)}
.back:hover{color:#fff}
.bid-section h3,.bid-terms h4{color:var(--p-300)}
.bid-section{border-top-color:rgba(255,255,255,.1)}
.bid-detail{border-top-color:rgba(255,255,255,.12)}
details.bid-more>summary{color:var(--p-300)}
.offer-best{box-shadow:inset 0 0 0 2px var(--good),0 0 26px rgba(92,233,166,.22)}
.app-foot{color:var(--ink-3)}
.scrim{background:rgba(8,3,24,.66);backdrop-filter:blur(3px)}
.auth-form{background:rgba(24,12,56,.55);backdrop-filter:blur(18px)}
.auth-foot{color:var(--ink-3)}
.public-head{background:rgba(24,12,56,.7);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1)}
.public-nav a{color:var(--ink-2)}
.brand-link{color:#fff}
.brand-link .brand-name{color:#fff}
.brand-link .brand-sub{color:var(--ink-3)}
.public-foot{background:rgba(12,5,32,.85);color:var(--ink-2)}
.doc-viewer{background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.12)}
.doc-viewer-bar{border-bottom-color:rgba(255,255,255,.12)}
.doc-viewer-bar strong{color:#fff}
.doc-viewer-body{background:rgba(255,255,255,.05)}
.doc-viewer-body iframe,.doc-viewer-body img{border-color:rgba(255,255,255,.16)}
.place:hover{background:rgba(157,92,255,.16);border-color:rgba(255,255,255,.14)}
.place.on{background:rgba(157,92,255,.22);border-color:var(--p-500)}
.place-name{color:#fff}
.place-n{color:var(--ink-3)}
.place-n strong{color:var(--ink)}
.place-bar>span{background:linear-gradient(90deg,#4ea8ff,#b44bff)}

/* =====================================================================
   Printed paperwork stays on white paper. The loan offer, the schedule
   and the readiness report are signed documents, not screens.
   ===================================================================== */
.doc{
  background:#fff;color:#1a1721;border:1px solid #e0dce9;
  box-shadow:0 20px 50px rgba(0,0,0,.4);border-radius:6px}
.doc h1,.doc h2,.doc h3,.doc .doc-org{color:#2e1550}
.doc h2{color:#6b6478}
.doc table,.doc td,.doc th{color:#1a1721;border-color:#e0dce9;background:transparent}
.doc th{color:#6b6478}
.doc tbody tr:hover{background:#f6f4fa}
.doc .doc-meta,.doc .sign-line{color:#6b6478}
.doc .terms{color:#3b3846}
.doc .stamp{border-color:#12694a;color:#12694a}
.doc .table-wrap{background:none}
.doc strong,.doc b,.doc td strong{color:#1a1721}

@media print{
  body{background:#fff!important;color:#1a1721!important}
  body::before{display:none!important}
  .card,.tile,fieldset,.doc{background:#fff!important;color:#1a1721!important;
    box-shadow:none!important;border-color:#ccc!important;backdrop-filter:none!important}
  .table-wrap{background:none!important}
  th,td,.dl dd,.kv strong,h1,h2,h3{color:#1a1721!important}
  th,.dl dt{color:#555!important}
}

/* --------------------------------------------------------- responsive ---- */
@media(max-width:900px){
  .card{padding:16px;border-radius:16px}
  .sidebar{box-shadow:var(--sh-3)}
}

/* ── "Select loan portfolio" in the lender sidebar ───────────────────── */
/* LENDERS DASHBOARD LAYOUT1 asks for the portfolio picker as a dropdown in
   the sidebar, sitting under the Loan portfolios link. */
.nav-select{margin:2px 12px 8px 40px;display:grid;gap:4px}
.nav-select label{
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-300);font-weight:700;margin:0}
.nav-select select{
  height:34px;padding:0 28px 0 10px;font-size:.84rem;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:var(--ink)}
.nav-select select:focus{
  border-color:var(--p-500);background:rgba(255,255,255,.14);
  box-shadow:0 0 0 3px rgba(157,92,255,.24)}
@media(max-width:900px){.nav-select{margin-left:34px}}

/* ── Colour-coded portfolio tabs ──────────────────────────────────────── */
/* The class comes from loan_portfolios.colour, so a tab glows in the same
   colour as its portfolio card and preview-card header. */
.pf-tabs a.tab-blue  {color:#8fcaff}
.pf-tabs a.tab-green {color:var(--good)}
.pf-tabs a.tab-amber {color:var(--warn)}
.pf-tabs a.tab-grey  {color:var(--neutral)}
.pf-tabs a.tab-purple{color:var(--p-300)}
.pf-tabs a.tab-blue:hover,.pf-tabs a.tab-green:hover,.pf-tabs a.tab-amber:hover,
.pf-tabs a.tab-grey:hover,.pf-tabs a.tab-purple:hover{color:#fff}
.pf-tabs a.tab-blue.on  {color:#fff;border-bottom-color:#4ea8ff}
.pf-tabs a.tab-green.on {color:#fff;border-bottom-color:var(--good)}
.pf-tabs a.tab-amber.on {color:#fff;border-bottom-color:var(--warn)}
.pf-tabs a.tab-grey.on  {color:#fff;border-bottom-color:var(--neutral)}
.pf-tabs a.tab-purple.on{color:#fff;border-bottom-color:var(--n-pink)}
.pf-tabs a.tab-blue  .tab-n{background:rgba(78,168,255,.18);color:#8fcaff}
.pf-tabs a.tab-green .tab-n{background:rgba(92,233,166,.16);color:var(--good)}
.pf-tabs a.tab-amber .tab-n{background:rgba(255,180,58,.18);color:var(--warn)}
.pf-tabs a.tab-grey  .tab-n{background:rgba(255,255,255,.10);color:var(--neutral)}
.pf-tabs a.tab-blue.on  .tab-n{background:#4ea8ff;color:#140a28}
.pf-tabs a.tab-green.on .tab-n{background:var(--good);color:#140a28}
.pf-tabs a.tab-amber.on .tab-n{background:var(--warn);color:#140a28}
.pf-tabs a.tab-grey.on  .tab-n{background:var(--neutral);color:#140a28}

.section-title{color:var(--p-300)}

/* --- PNG province map, on the dark ground ----------------------------- */
.pmap-t{stroke:rgba(255,255,255,.12)}
.pmap-0{fill:rgba(255,255,255,.05)}
.pmap-1{fill:rgba(123,63,228,.30)}
.pmap-2{fill:rgba(123,63,228,.52)}
.pmap-3{fill:#7b3fe4}
.pmap-4{fill:#9d5cff}
.pmap-n{fill:var(--ink)}
.pmap-l{fill:var(--ink-3)}
.pmap-3 ~ .pmap-n,.pmap-4 ~ .pmap-n{fill:#fff}
.pmap-3 ~ .pmap-l,.pmap-4 ~ .pmap-l{fill:rgba(255,255,255,.85)}
a.pmap-a:hover .pmap-t{stroke:var(--p-300);stroke-width:2}
.pmap-sw.pmap-0{background:rgba(255,255,255,.07)}
.pmap-sw.pmap-1{background:rgba(123,63,228,.30)}
.pmap-sw.pmap-2{background:rgba(123,63,228,.52)}
.pmap-sw.pmap-3{background:#7b3fe4}
.pmap-sw.pmap-4{background:#9d5cff}

/* ------------------------------------------------------ the forms pack ---- */
/* app.css declares these seven tokens with light-theme values. Repainting
   them here is the whole of the dark treatment: every derived total, tinted
   panel and section heading in the pack follows automatically. */
:root{
  --form-head:var(--p-300);
  --form-panel:rgba(255,255,255,.04);
  --form-total-bg:rgba(157,92,255,.13);
  --form-total-ink:#efe6ff;
  --form-total-line:rgba(157,92,255,.55);
  --form-total-strong:rgba(157,92,255,.2);
  --form-pre-bg:rgba(157,92,255,.16);
  --form-pre-ink:var(--p-300);
}

/* The balance sheet's two columns want a hairline between them on a dark
   ground — without it the assets and liabilities read as one long list. */
@media(min-width:901px){
  .form-body.is-ledger>.side-right{border-left:1px solid var(--line);padding-left:26px}
}

/* A read-only form is still a form, not greyed-out furniture: staff and
   lenders read these figures closely, so they keep full contrast. */
.form-body input:disabled,.form-body select:disabled,.form-body textarea:disabled{
  border-color:rgba(255,255,255,.1)}

/* ---------------------------------------------------- province panel ---- */
:root{
  --pg-0:rgba(255,255,255,.05);
  --pg-1:rgba(123,63,228,.30);
  --pg-2:rgba(123,63,228,.52);
  --pg-3:#7b3fe4;
  --pg-4:#9d5cff;
}
.pgrid-t{border-color:rgba(255,255,255,.12)}
a.pgrid-t:hover{border-color:var(--p-300)}