/* portal-theme.css — Tema Bento "Soft Premium + Clay" BERSAMA (LANGKAH 1: tokens + clay komponen).
   Di-link SETELAH <style> inline & portal-polish.css di tiap halaman → menang (last-in-source).
   Tujuan: samakan tampilan halaman lama dgn index.html/admin_program.html TANPA ubah layout/markup/JS.
   CSS murni — tak menyentuh fungsi/RLS. Cabut <link> ini = kembali ke tema lama (reversibel).
   Status-color = nilai kanonik §7 (habis dark #E05050, BUKAN #FF7A7A). */

:root{
  --bg:#F1F0F8; --card:#FBFAFF; --tint:#F6F3FE; --soft:#EEEBF8; --input:#EFEDF7; --border:#E7E3F2;
  --accent:#5535C0; --accent-grad:linear-gradient(135deg,#7B3FE4,#5535C0); --accent-dim:rgba(85,53,192,0.12);
  --text:#16131F; --text2:#5C5670; --muted:#9A95AD;
  --ada:#059669; --sisa:#C9870A; --habis:#C0392B;
  --clay:9px 9px 24px rgba(92,64,170,.13), -7px -7px 18px rgba(255,255,255,.92);
  --clay-lg:16px 18px 46px rgba(92,64,170,.18), -12px -12px 30px rgba(255,255,255,.96);
  --clay-sm:4px 4px 11px rgba(92,64,170,.10), -3px -3px 9px rgba(255,255,255,.85);
  --clay-in:inset 3px 3px 7px rgba(92,64,170,.16), inset -2px -2px 6px rgba(255,255,255,.85);
  --shadow:var(--clay); --card-shadow:var(--clay);
  --topbar-bg:rgba(241,240,248,.86); --tray-border:transparent;
  --hero-glow:rgba(123,63,228,.10); --ring-track:rgba(255,255,255,.22);
  --theme-btn-bg:#EEEBF8; --theme-btn-border:transparent;
}
body.dark{
  --bg:#0C0B12; --card:#17151F; --tint:#1B1828; --soft:#1A1826; --input:#1C1A28; --border:rgba(255,255,255,.07);
  --accent:#9B6BF0; --accent-grad:linear-gradient(135deg,#9B6BF0,#6A39D0); --accent-dim:rgba(123,63,228,0.18);
  --text:#F0EDFA; --text2:#9A93B3; --muted:#6B6580;
  --ada:#10B981; --sisa:#E8A020; --habis:#E05050;
  --clay:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --clay-lg:0 28px 64px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.07), 0 0 34px rgba(123,63,228,.14);
  --clay-sm:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
  --clay-in:inset 3px 3px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(155,107,255,.16), 0 0 12px rgba(123,63,228,.14);
  --shadow:var(--clay); --card-shadow:var(--clay);
  --topbar-bg:rgba(12,11,18,.82); --tray-border:rgba(255,255,255,.06);
  --hero-glow:rgba(123,63,228,.22); --ring-track:rgba(255,255,255,.16);
  --theme-btn-bg:#1A1826; --theme-btn-border:transparent;
}

/* ===== Kartu → clay (mayoritas page pakai .card{box-shadow:var(--shadow)} → otomatis clay via token;
   baris ini menjaga page yang TIDAK pakai var, mis. admin_sales) ===== */
.card{ box-shadow:var(--clay) !important; border-color:var(--tray-border); }

/* ===== Topbar ===== */
.tb-badge{ background-color:var(--soft); border:none; box-shadow:var(--clay-in); color:var(--accent); }
.theme-toggle{ background-color:var(--soft); border:none; box-shadow:var(--clay-in); }
.theme-opt.active{ background:var(--accent-grad); color:#fff; box-shadow:0 4px 12px rgba(123,63,228,.35); }
.tb-avatar{ box-shadow:0 5px 14px rgba(123,63,228,.35); }
.tb-out{ background-color:var(--card); border:1px solid var(--tray-border); box-shadow:var(--clay-sm); transition:transform .14s,color .14s; }
.tb-out:hover{ color:var(--accent); transform:translateY(-1px); }
.tb-out:active{ transform:translateY(1px) scale(.95); box-shadow:var(--clay-in); }
.tb-bell{ background-color:var(--card); border:1px solid var(--tray-border); box-shadow:var(--clay-sm); transition:transform .14s,color .14s; }
.tb-bell:hover{ color:var(--accent); transform:translateY(-1px); }
.tb-link{ background-color:var(--card); border:1px solid var(--tray-border); box-shadow:var(--clay-sm); }
.tb-link:hover{ color:var(--accent); border-color:var(--tray-border); }

/* ===== Badge status (Ada/Sisa/Habis & ON TRACK/HAMPIR/DI BAWAH) → clay-sm, tanpa garis ===== */
.status-badge{ box-shadow:var(--clay-sm); border:none; }

/* ===== Input / select / search → clay inset (background-color saja, JANGAN shorthand: jaga panah select custom) ===== */
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=email], input[type=password], textarea, select,
.sd-search, .sd-sel, .lb-search{ background-color:var(--input); box-shadow:var(--clay-in); border:1px solid var(--tray-border); }

/* ===== Scrollbar tray bertema accent-grad ===== */
.lb-scroll, .sd-scroll, .wide-scroll{ scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.lb-scroll::-webkit-scrollbar, .sd-scroll::-webkit-scrollbar, .wide-scroll::-webkit-scrollbar{ width:11px; height:11px; }
.lb-scroll::-webkit-scrollbar-track, .sd-scroll::-webkit-scrollbar-track, .wide-scroll::-webkit-scrollbar-track{ background:var(--input); border-radius:10px; box-shadow:var(--clay-in); }
.lb-scroll::-webkit-scrollbar-thumb, .sd-scroll::-webkit-scrollbar-thumb, .wide-scroll::-webkit-scrollbar-thumb{ background:var(--accent-grad); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }