/* =====================================================================
   Tema "iBanKo": kanvas abu lembut, panel putih membulat besar, tombol pill hitam,
   kartu pastel (mint / peach / biru), ikon Bootstrap Icons.
   Dimuat SETELAH app.css, jadi hanya menimpa tampilan - struktur & logika tidak berubah.
   ===================================================================== */
:root{
  --ink:#14131F; --ink-2:#2C2B3A; --muted:#8C8C99; --line:#EDEDF0;
  --canvas:#EBEBEB; --panel:#F4F3F3; --surface:#fff;
  --mint:#E8FAEF; --mint-ink:#1E9D57; --peach:#FFEFE6; --peach-ink:#E0773F; --sky:#E9EFFF; --sky-ink:#4A6FE0; --lilac:#F1EEFF;
  --brand:var(--ink); --brand-dark:var(--ink-2); --brand-soft:#EDEDF0;
  --radius-xl:36px; --sbw:268px;
}
html{ scroll-behavior:smooth; }
body{
  font-family:'Plus Jakarta Sans','Inter',sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased;
  background:var(--canvas); background-image:none; min-height:100vh;
}
::selection{ background:#14131F; color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:#D5D5DB transparent; }

/* ---------- kerangka: panel besar membulat ---------- */
.shell{
  display:flex; max-width:1600px; margin:24px auto; background:var(--panel); border-radius:var(--radius-xl);
  box-shadow:0 40px 90px -40px rgba(20,19,31,.28), 0 2px 0 rgba(255,255,255,.7) inset; min-height:calc(100vh - 48px);
  overflow:clip; position:relative;
}
.main-wrap{ background:#fff; border-radius:var(--radius-xl) 0 0 var(--radius-xl); min-width:0; }
.shell.sb-hidden.mode-pinned .main-wrap, .shell.sb-hidden.mode-rail .main-wrap{ border-radius:0; }
.topbar{ background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); padding:16px 36px; }
.topbar .page-title{ font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); }
.content{ padding:30px 40px 72px; }
@media (max-width:899px){
  .shell{ margin:0; border-radius:0; min-height:100vh; }
  .main-wrap{ border-radius:0 !important; margin:0 !important; box-shadow:none !important; }
  .topbar{ padding:12px 16px; } .content{ padding:20px 16px 56px; }
}

/* ---------- ikon bulat (topbar) ---------- */
.icon-btn{ width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #E8E8EC; color:var(--ink); transition:.15s; }
.icon-btn:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.bi{ line-height:1; vertical-align:-.125em; }

/* ---------- sidebar ---------- */
.sb{ background:transparent; color:var(--ink); }
.sb-pinned{ position:sticky; top:24px; height:calc(100vh - 48px); width:var(--sbw); flex-shrink:0; border:0; align-self:flex-start; }
.sb-rail{ position:sticky; top:24px; height:calc(100vh - 48px); width:88px; flex-shrink:0; border:0; align-self:flex-start; z-index:40; }
.shell.sb-hidden.mode-pinned .sb, .shell.sb-hidden.mode-rail .sb{ display:none; }

/* mode melayang: kartu sidebar terpisah, mengambang di atas kanvas abu */
.shell.mode-floating{ max-width:none; margin:0; background:transparent; box-shadow:none; border-radius:0; overflow:visible; padding:24px; min-height:100vh; }
.shell.mode-floating .sb-floating{
  position:fixed; top:24px; bottom:24px; left:24px; width:var(--sbw); background:#fff; border-radius:30px; z-index:50; transform:none;
  box-shadow:0 30px 70px -26px rgba(20,19,31,.35); border:1px solid rgba(20,19,31,.04); overflow:hidden; transition:transform .28s ease, opacity .2s;
}
.shell.mode-floating .main-wrap{
  margin-left:calc(var(--sbw) + 24px); border-radius:32px; min-height:calc(100vh - 48px); box-shadow:0 30px 80px -40px rgba(20,19,31,.3);
  transition:margin .28s ease; overflow:clip;
}
.shell.mode-floating.sb-hidden .sb-floating{ transform:translateX(-130%); opacity:0; pointer-events:none; }
.shell.mode-floating.sb-hidden .main-wrap{ margin-left:0; }

/* layar kecil: sidebar selalu berupa laci melayang */
@media (max-width:899px){
  .shell, .shell.mode-floating{ padding:0; }
  .sb, .sb-pinned, .sb-rail, .shell.mode-floating .sb-floating{
    position:fixed !important; top:12px; bottom:12px; left:12px; width:300px; max-width:calc(100vw - 24px); height:auto; z-index:60;
    border-radius:28px; background:#fff; box-shadow:0 30px 80px -20px rgba(20,19,31,.45); transition:transform .25s ease; display:flex !important;
  }
  .shell.sb-hidden .sb{ transform:translateX(-125%); }
  .shell .sb{ transform:none; }
}
.sb-backdrop{ background:rgba(20,19,31,.35); backdrop-filter:blur(2px); }

.sb-head{ padding:26px 22px 8px; }
.sb-logo{ font-weight:800; font-size:20px; letter-spacing:-.03em; gap:10px; }
.sb-logo .mark{ width:34px; height:34px; border-radius:11px; background:var(--ink); color:#fff; font-size:17px; }
.sb-modes{ background:#ECEBEB; border-radius:999px; padding:3px; }
.sb-floating .sb-modes{ background:#F1F1F3; }
.sb-modes button{ width:28px; height:26px; border-radius:999px; color:#8C8C99; font-size:14px; }
.sb-modes button:hover{ color:var(--ink); }
.sb-modes button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.1); }

.sb-profile{ text-align:center; padding:14px 22px 14px; border-bottom:1px solid rgba(20,19,31,.07); margin:0 22px 6px; }
.sb-profile .avatar-initials{ width:72px; height:72px; font-size:24px; margin:0 auto 10px; box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 8px 22px -8px rgba(20,19,31,.35); }
.sb-profile b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.sb-profile span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

.sb-search{ margin:10px 20px 6px; background:rgba(255,255,255,.75); border:1px solid rgba(20,19,31,.06); border-radius:999px; padding:8px 14px; }
.sb-floating .sb-search{ background:#F6F6F7; }
.sb-scroll{ padding:6px 14px 10px; }
.sb-item{ color:var(--muted); font-weight:500; border-radius:999px; padding:9px 14px; gap:12px; }
.sb-item:hover{ background:rgba(255,255,255,.8); color:var(--ink); }
.sb-floating .sb-item:hover{ background:#F6F6F7; }
.sb-item.active{ background:#fff; color:var(--ink); font-weight:700; box-shadow:0 4px 14px -6px rgba(20,19,31,.25); }
.sb-floating .sb-item.active{ background:var(--ink); color:#fff; box-shadow:none; }
.sb-group-head{ color:#6B6B78; font-weight:600; border-radius:999px; padding:9px 14px; }
.sb-group-head:hover{ background:rgba(255,255,255,.8); color:var(--ink); }
.sb-floating .sb-group-head:hover{ background:#F6F6F7; }
.sb-group-head.has-active{ color:var(--ink); font-weight:700; }
.sb-group-head .lbl .bi{ font-size:17px; }
.sb-sub{ margin:2px 0 8px 26px; padding-left:10px; border-left:1.5px solid rgba(20,19,31,.1); }
.sb-sub .sb-item{ padding:6px 12px; font-size:13px; }
.sb-foot{ border-top:1px solid rgba(20,19,31,.07); margin:0 22px; padding:14px 0 18px; }
.sb-signout{ display:flex; align-items:center; gap:10px; width:100%; color:#6B6B78; font-weight:600; font-size:13.5px; padding:6px 0; padding-left:18px; margin-top:10px;}
.sb-signout:hover{ color:#C22F3A; }
.rail-btn{ border-radius:50%; width:46px; height:46px; color:#6B6B78; }
.rail-btn:hover{ background:#fff; color:var(--ink); }
.rail-btn.active{ background:var(--ink); color:#fff; }
.rail-btn .bi{ font-size:19px; }
.flyout .box{ border-radius:20px; border:1px solid var(--line); }
.sb-rail .sb-head{ padding:22px 0 8px; }


/* ===== perbaikan sidebar: satu baris, indikator expand/collapse jelas ===== */
:root{ --on-ink:#fff; }
.sb-search{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.sb-search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; font-size:13px; color:var(--ink); }
.sb-item, .sb-group-head{ white-space:nowrap; line-height:1.25; }
.sb-item .txt, .sb-group-head .txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align: left; }
.sb-item > .bi, .sb-group-head .lbl > .bi{ flex:none; width:20px; text-align:center; }
.sb-group-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
.sb-group-head .lbl{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.sb-group-head .sb-chev{ flex:none; min-width:0; max-width:24px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(20,19,31,.07); color:#6B6B78; font-size:11px; transition:transform .2s ease, background .2s, color .2s; }
.sb-group-head:hover .sb-chev{ background:rgba(20,19,31,.14); color:var(--ink); }
.sb-group-head .sb-chev.open{ transform:rotate(180deg); background:var(--ink); color:var(--on-ink); }
.sb-sub{ margin:2px 0 8px 22px; padding-left:8px; }
.sb-sub .sb-item{ gap:10px; padding:7px 12px; }
.sb-sub .sb-item::before{ content:''; flex:none; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.3; }
.sb-sub .sb-item.active::before{ opacity:1; }
.sb-logo{ display:flex; align-items:center; }

/* ---------- tombol & input (pill) ---------- */
.btn-primary{ background:var(--ink); color:#fff; border-radius:999px; padding:10px 22px; font-weight:700; box-shadow:0 8px 20px -10px rgba(20,19,31,.55); transition:.15s; }
.btn-primary:hover{ background:var(--ink-2); color:#fff; transform:translateY(-1px); }
.btn-outline{ background:#fff; color:var(--ink); border:1px solid #E1E1E6; border-radius:999px; padding:10px 22px; font-weight:700; transition:.15s; }
.btn-outline:hover{ background:#F6F6F7; border-color:#CFCFD6; }
.btn-sm{ border-radius:999px !important; padding:7px 16px !important; }
.btn-danger{ border-radius:999px; background:#fff; color:#C22F3A; border:1px solid #F5C6CB; padding:7px 16px; font-weight:700; }
.btn-danger:hover{ background:#FDE9EA; }
.input-field{ background:#F6F6F7; border:1px solid transparent; border-radius:16px; padding:10px 16px; color:var(--ink); }
.input-field:focus{ background:#fff; border-color:var(--ink); box-shadow:0 0 0 4px rgba(20,19,31,.07); }
select.input-field{ border-radius:999px; }
textarea.input-field{ border-radius:18px; }
input[type=checkbox]{ accent-color:var(--ink); }
input[type=radio]{ accent-color:var(--ink); }

/* ---------- kartu ---------- */
.card-soft{ background:#fff; border:1px solid #EFEFF2; border-radius:28px; box-shadow:0 1px 0 rgba(20,19,31,.02); }
.kpi-grid{ gap:16px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.kpi-card{ border:0; border-radius:26px; padding:20px 22px; background:var(--mint); box-shadow:0 14px 30px -20px rgba(30,157,87,.55); position:relative; }
.kpi-card:nth-child(4n+2){ background:var(--peach); box-shadow:0 14px 30px -20px rgba(224,119,63,.55); }
.kpi-card:nth-child(4n+3){ background:var(--sky); box-shadow:0 14px 30px -20px rgba(74,111,224,.55); }
.kpi-card:nth-child(4n+4){ background:var(--lilac); box-shadow:0 14px 30px -20px rgba(109,93,251,.45); }
.kpi-card .lbl{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; color:rgba(20,19,31,.5); }
.kpi-card .val{ font-size:25px; font-weight:800; letter-spacing:-.02em; margin-top:10px; }
.kpi-card .sub{ color:rgba(20,19,31,.45); }
.kpi-card.dark, .kpi-grid .kpi-card.dark{ background:var(--ink); color:#fff; box-shadow:0 18px 36px -18px rgba(20,19,31,.7); }
.kpi-card.dark .lbl, .kpi-card.dark .sub{ color:rgba(255,255,255,.6); }

/* ---------- tabel ---------- */
.dt-wrapper{ border:1px solid #EFEFF2; border-radius:22px; }
.dt-table thead th{ background:#FAFAFA; color:#8C8C99; font-weight:700; text-transform:none; letter-spacing:0; font-size:12px; padding:14px 18px; border-bottom:1px solid #EFEFF2; }
.dt-table tbody td{ padding:14px 18px; border-bottom:1px solid #F3F3F5; }
.dt-table tbody tr:hover td{ background:#FAFAFB; }
.dt-table tbody tr:hover td.dt-freeze{ background:#FAFAFB; }
.dt-table thead th.dt-freeze{ background:#FAFAFA; }
.dt-freeze{ box-shadow:1px 0 0 0 #EFEFF2; }
.dt-sort-ic{ color:var(--ink); }
.status-pill{ font-weight:700; }

/* ---------- elemen lain ---------- */
.stepper .st{ background:#F1F1F3; color:#9A9AA5; }
.stepper .st.done{ background:var(--mint); color:var(--mint-ink); }
.stepper .st.now{ background:var(--ink); color:#fff; }
.note-box{ border-radius:16px; }
.pill-toggle{ background:#F1F1F3; } .pill-toggle a.active{ color:var(--ink); }
.menu-panel{ border-radius:20px; border:1px solid var(--line); box-shadow:0 24px 50px -18px rgba(20,19,31,.3); }
.menu-panel a:hover{ background:#F6F6F7; color:var(--ink); }
.avatar-initials{ box-shadow:0 0 0 2px #fff; }
.legend-chip, .chip{ border-radius:999px; }
.mbar-simple i{ background:var(--ink); }
.cal-cell.today{ box-shadow:inset 0 0 0 2px var(--ink); }
.yr-d.today, .tg-dayhead.today .num{ background:var(--ink); }
a{ color:inherit; }

/* menimpa warna ungu Tailwind arbitrary yang tersebar di view */
.text-\[\#6D5DFB\], .text-\[\#4C3FD0\]{ color:var(--ink) !important; }
.bg-\[\#F7F7FB\], .bg-\[\#F3F4F8\]{ background-color:#F6F6F7 !important; }
.bg-\[\#EFECFF\], .bg-\[\#EFEDFB\], .bg-\[\#E7E5FF\]{ background-color:#EDEDF0 !important; }
.hover\:bg-\[\#F3F4F8\]:hover{ background-color:#EDEDF0 !important; }
.border-\[\#EEF0F4\], .border-\[\#E4E0FF\]{ border-color:#EFEFF2 !important; }
.text-\[\#15132b\]{ color:var(--ink) !important; }
@media print{ .shell{ margin:0; box-shadow:none; border-radius:0; background:#fff; } .main-wrap{ border-radius:0; } }
.bg-\[\#6D5DFB\]{ background-color:var(--ink) !important; }


/* ===== dashboard HR: kalender mini ===== */
.mini-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mini-cal .mc-h{ text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); padding:4px 0; text-transform:uppercase; letter-spacing:.04em; }
.mini-cal .mc-h.wk{ color:#E5525F; }
.mini-cal .mc-d{ position:relative; height:42px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.mini-cal .mc-d.out{ opacity:.35; }
.mini-cal .mc-d.wk .n{ color:#E5525F; }
.mini-cal .mc-d:hover{ background:rgba(20,19,31,.05); }
.mini-cal .mc-d.hol-national{ background:rgba(229,82,95,.14); } .mini-cal .mc-d.hol-national .n{ color:#E5525F; font-weight:800; }
.mini-cal .mc-d.hol-company{ background:rgba(242,169,59,.18); } .mini-cal .mc-d.hol-company .n{ color:#C98312; font-weight:800; }
.mini-cal .mc-d.today{ background:var(--ink); } .mini-cal .mc-d.today .n{ color:var(--on-ink) !important; font-weight:800; }
.mini-cal .dots{ display:flex; gap:2px; height:5px; margin-top:2px; }
.mini-cal .dots i{ width:5px; height:5px; border-radius:50%; display:block; }
.lg{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
html[data-theme="dark"] .mini-cal .mc-d:hover{ background:rgba(255,255,255,.07); }


/* ===== komponen dashboard ===== */
:root{ --surface-2:#F6F6F7; }
.sec-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sec-head h2{ font-weight:800; font-size:16px; letter-spacing:-.01em; }
.sec-head .sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.pill-link{ display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(20,19,31,.06); color:var(--ink); white-space:nowrap; }
.pill-link:hover{ background:var(--ink); color:var(--on-ink); }
.li{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.li:last-child{ border-bottom:0; }
.li .t{ font-weight:700; font-size:13.5px; } .li .s{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.empty{ padding:26px 0; text-align:center; color:var(--muted); font-size:13px; }
.bar{ height:8px; border-radius:99px; background:rgba(20,19,31,.08); overflow:hidden; } .bar > i{ display:block; height:100%; border-radius:99px; background:#22C55E; }
.tint-mint{ background:var(--mint); } .tint-peach{ background:var(--peach); } .tint-sky{ background:var(--sky); } .tint-lilac{ background:var(--lilac); }
.tile{ border-radius:20px; padding:16px; }
.tile .k{ font-size:11.5px; font-weight:600; color:rgba(20,19,31,.5); } .tile .v{ font-size:20px; font-weight:800; margin-top:6px; letter-spacing:-.02em; } .tile .n{ font-size:12px; margin-top:2px; color:rgba(20,19,31,.55); }
.attn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.attn{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:20px; text-decoration:none; color:inherit; background:#F6F6F7; }
.attn:hover{ box-shadow:0 10px 24px -14px rgba(20,19,31,.45); transform:translateY(-1px); }
.attn .ic{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; background:rgba(255,255,255,.75); }
.attn .c{ font-size:22px; font-weight:800; line-height:1; letter-spacing:-.02em; } .attn .l{ font-size:12.5px; font-weight:700; margin-top:5px; } .attn .h{ font-size:11px; color:rgba(20,19,31,.55); margin-top:2px; }
.attn.red{ background:#FDE9EA; } .attn.red .ic{ color:#C22F3A; } .attn.amber{ background:#FFF3D9; } .attn.amber .ic{ color:#B7791F; }
.attn.blue{ background:#E9EFFF; } .attn.blue .ic{ color:#4A6FE0; } .attn.green{ background:#E8FAEF; } .attn.green .ic{ color:#1E9D57; }
.insight{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5; }
.insight:last-child{ border-bottom:0; }
.insight .ic{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; background:#F1F1F3; }
.insight .ic.red{ background:#FDE9EA; color:#C22F3A; } .insight .ic.amber{ background:#FFF3D9; color:#B7791F; } .insight .ic.green{ background:#E8FAEF; color:#1E9D57; } .insight .ic.blue{ background:#E9EFFF; color:#4A6FE0; }
.ess-btn{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:20px; border:1px solid var(--line); background:var(--surface,#fff); font-weight:700; font-size:13px; text-decoration:none; color:inherit; }
.ess-btn:hover{ border-color:var(--ink); } .ess-btn .ic{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--lilac); }
.delta{ font-size:11.5px; font-weight:700; } .delta.up{ color:#1E9D57; } .delta.down{ color:#C22F3A; }
@media screen{
html[data-theme="dark"] .attn{ background:#23232F; } html[data-theme="dark"] .attn .ic{ background:rgba(255,255,255,.08); }
html[data-theme="dark"] .attn.red{ background:rgba(229,82,95,.16); } html[data-theme="dark"] .attn.red .ic{ color:#FF8A93; }
html[data-theme="dark"] .attn.amber{ background:rgba(242,169,59,.14); } html[data-theme="dark"] .attn.amber .ic{ color:#F6C26B; }
html[data-theme="dark"] .attn.blue{ background:rgba(91,140,255,.16); } html[data-theme="dark"] .attn.blue .ic{ color:#8EAEFF; }
html[data-theme="dark"] .attn.green{ background:rgba(46,204,113,.14); } html[data-theme="dark"] .attn.green .ic{ color:#5BD58F; }
html[data-theme="dark"] .attn .h, html[data-theme="dark"] .tile .k, html[data-theme="dark"] .tile .n{ color:rgba(255,255,255,.55); }
html[data-theme="dark"] .pill-link{ background:rgba(255,255,255,.08); } html[data-theme="dark"] .pill-link:hover{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .bar{ background:rgba(255,255,255,.1); }
html[data-theme="dark"] .insight .ic{ background:#2B2B3A; }
html[data-theme="dark"] .insight .ic.red{ background:rgba(229,82,95,.18); color:#FF8A93; } html[data-theme="dark"] .insight .ic.amber{ background:rgba(242,169,59,.16); color:#F6C26B; }
html[data-theme="dark"] .insight .ic.green{ background:rgba(46,204,113,.16); color:#5BD58F; } html[data-theme="dark"] .insight .ic.blue{ background:rgba(91,140,255,.18); color:#8EAEFF; }
html[data-theme="dark"] .ess-btn{ background:var(--surface); } html[data-theme="dark"] .ess-btn .ic{ background:rgba(130,110,255,.18); }
html[data-theme="dark"] .tile .v{ color:#F2F2F7; }
}

/* =====================================================================
   DARK MODE  (html[data-theme="dark"]) - hanya di layar; cetak slip gaji tetap terang
   ===================================================================== */
.theme-toggle .bi-sun-fill{ display:none; }
html[data-theme="dark"] .theme-toggle .bi-sun-fill{ display:inline-block; }
html[data-theme="dark"] .theme-toggle .bi-moon-stars-fill{ display:none; }

@media screen{
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#F2F2F7; --ink-2:#D8D8E2; --on-ink:#14131F; --muted:#9A9AAB; --line:#2B2B3A;
  --canvas:#0D0D13; --panel:#14141C; --surface:#1B1B25; --surface-2:#23232F;
  --mint:rgba(46,204,113,.14); --peach:rgba(255,138,76,.14); --sky:rgba(91,140,255,.16); --lilac:rgba(130,110,255,.16);
  --brand:#F2F2F7; --brand-dark:#D8D8E2; --brand-soft:#2B2B3A;
}
html[data-theme="dark"] body{ background:var(--canvas); color:var(--ink); }
html[data-theme="dark"] .shell{ background:var(--panel); box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset; }
html[data-theme="dark"] .main-wrap{ background:var(--surface); }
html[data-theme="dark"] .shell.mode-floating{ background:transparent; box-shadow:none; }
html[data-theme="dark"] .shell.mode-floating .main-wrap{ box-shadow:0 30px 80px -40px rgba(0,0,0,.9); }
html[data-theme="dark"] .topbar{ background:rgba(27,27,37,.9); border-bottom-color:var(--line); }
html[data-theme="dark"] .topbar .page-title{ color:var(--ink); }
html[data-theme="dark"] .icon-btn{ background:var(--surface-2); border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .icon-btn:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }

/* sidebar */
html[data-theme="dark"] .sb{ color:var(--ink); }
html[data-theme="dark"] .shell.mode-floating .sb-floating, html[data-theme="dark"] .sb-backdrop + aside{ background:var(--surface); border-color:var(--line); box-shadow:0 30px 70px -26px rgba(0,0,0,.9); }
@media (max-width:899px){ html[data-theme="dark"] .sb, html[data-theme="dark"] .sb-pinned, html[data-theme="dark"] .sb-rail{ background:var(--surface); } }
html[data-theme="dark"] .sb-modes{ background:#2A2A38; }
html[data-theme="dark"] .sb-floating .sb-modes{ background:#2A2A38; }
html[data-theme="dark"] .sb-modes button{ color:#9A9AAB; }
html[data-theme="dark"] .sb-modes button.on{ background:#3A3A4C; color:var(--ink); box-shadow:none; }
html[data-theme="dark"] .sb-logo{ color:var(--ink); }
html[data-theme="dark"] .sb-logo .mark{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .sb-profile{ border-bottom-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .sb-profile .avatar-initials{ box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 8px 22px -8px rgba(0,0,0,.8); }
html[data-theme="dark"] .sb-search, html[data-theme="dark"] .sb-floating .sb-search{ background:var(--surface-2); border-color:var(--line); color:var(--muted); }
html[data-theme="dark"] .sb-search input{ color:var(--ink); }
html[data-theme="dark"] .sb-item{ color:#9A9AAB; }
html[data-theme="dark"] .sb-item:hover, html[data-theme="dark"] .sb-floating .sb-item:hover, html[data-theme="dark"] .sb-group-head:hover, html[data-theme="dark"] .sb-floating .sb-group-head:hover{ background:rgba(255,255,255,.06); color:var(--ink); }
html[data-theme="dark"] .sb-item.active{ background:#2B2B3C; color:var(--ink); box-shadow:none; }
html[data-theme="dark"] .sb-floating .sb-item.active{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .sb-group-head{ color:#B4B4C2; }
html[data-theme="dark"] .sb-group-head.has-active{ color:var(--ink); }
html[data-theme="dark"] .sb-group-head .sb-chev{ background:rgba(255,255,255,.08); color:#B4B4C2; }
html[data-theme="dark"] .sb-group-head .sb-chev.open{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .sb-sub{ border-left-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .sb-foot{ border-top-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .sb-signout{ color:#B4B4C2; }
html[data-theme="dark"] .sb-signout:hover{ color:#FF7A85; }
html[data-theme="dark"] .rail-btn{ color:#B4B4C2; }
html[data-theme="dark"] .rail-btn:hover{ background:rgba(255,255,255,.07); color:var(--ink); }
html[data-theme="dark"] .rail-btn.active{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .flyout .box{ background:var(--surface); border-color:var(--line); }

/* tombol & input */
html[data-theme="dark"] .btn-primary{ background:var(--ink); color:var(--on-ink); box-shadow:0 8px 20px -10px rgba(0,0,0,.8); }
html[data-theme="dark"] .btn-primary:hover{ background:#fff; color:var(--on-ink); }
html[data-theme="dark"] .btn-outline{ background:transparent; color:var(--ink); border-color:#3A3A4C; }
html[data-theme="dark"] .btn-outline:hover{ background:var(--surface-2); border-color:#555569; }
html[data-theme="dark"] .btn-danger{ background:transparent; color:#FF8A93; border-color:rgba(255,138,147,.4); }
html[data-theme="dark"] .btn-danger:hover{ background:rgba(229,82,95,.15); }
html[data-theme="dark"] .input-field{ background:var(--surface-2); color:var(--ink); border-color:transparent; }
html[data-theme="dark"] .input-field:focus{ background:#2A2A38; border-color:var(--ink); box-shadow:0 0 0 4px rgba(255,255,255,.08); }
html[data-theme="dark"] ::placeholder{ color:#6E6E80; }
html[data-theme="dark"] select option{ background:#23232F; color:var(--ink); }
html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=file]{ color-scheme:dark; }

/* kartu, KPI, tabel */
html[data-theme="dark"] .card-soft{ background:var(--surface); border-color:var(--line); box-shadow:none; }
html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .kpi-card:nth-child(n){ box-shadow:none; color:var(--ink); }
html[data-theme="dark"] .kpi-card .lbl{ color:rgba(255,255,255,.6); }
html[data-theme="dark"] .kpi-card .sub{ color:rgba(255,255,255,.45); }
html[data-theme="dark"] .kpi-card.dark, html[data-theme="dark"] .kpi-grid .kpi-card.dark{ background:var(--ink); color:var(--on-ink); box-shadow:none; }
html[data-theme="dark"] .kpi-card.dark .lbl, html[data-theme="dark"] .kpi-card.dark .sub{ color:rgba(20,19,31,.6); }
html[data-theme="dark"] .dt-wrapper{ border-color:var(--line); }
html[data-theme="dark"] .dt-table thead th, html[data-theme="dark"] .dt-table thead th.dt-freeze{ background:#20202B; color:#9A9AAB; border-bottom-color:var(--line); }
html[data-theme="dark"] .dt-table tbody td{ background:var(--surface); border-bottom-color:#262633; }
html[data-theme="dark"] .dt-table tbody tr:hover td, html[data-theme="dark"] .dt-table tbody tr:hover td.dt-freeze{ background:#212130; }
html[data-theme="dark"] .dt-freeze{ box-shadow:1px 0 0 0 var(--line); }
html[data-theme="dark"] .dt-sort-link{ color:#9A9AAB; } html[data-theme="dark"] .dt-sort-link:hover{ color:var(--ink); }

/* status & elemen kecil */
html[data-theme="dark"] .status-pill.amber{ background:rgba(242,169,59,.16); color:#F6C26B; }
html[data-theme="dark"] .status-pill.green{ background:rgba(46,204,113,.16); color:#5BD58F; }
html[data-theme="dark"] .status-pill.blue{ background:rgba(91,140,255,.18); color:#8EAEFF; }
html[data-theme="dark"] .status-pill.gray{ background:rgba(255,255,255,.08); color:#B4B4C2; }
html[data-theme="dark"] .status-pill.red{ background:rgba(229,82,95,.18); color:#FF8A93; }
html[data-theme="dark"] .stepper .st{ background:#262633; color:#7E7E90; }
html[data-theme="dark"] .stepper .st.done{ background:rgba(46,204,113,.16); color:#5BD58F; }
html[data-theme="dark"] .stepper .st.now{ background:var(--ink); color:var(--on-ink); }
html[data-theme="dark"] .note-box{ background:rgba(242,169,59,.10); border-color:rgba(242,169,59,.3); color:#F6D58B; }
html[data-theme="dark"] .pill-toggle{ background:#262633; } html[data-theme="dark"] .pill-toggle a{ color:#9A9AAB; }
html[data-theme="dark"] .pill-toggle a.active{ background:#3A3A4C; color:var(--ink); box-shadow:none; }
html[data-theme="dark"] .menu-panel{ background:var(--surface); border-color:var(--line); box-shadow:0 24px 50px -18px rgba(0,0,0,.85); }
html[data-theme="dark"] .menu-panel a{ color:#C4C4D0; } html[data-theme="dark"] .menu-panel a:hover{ background:var(--surface-2); color:var(--ink); }
html[data-theme="dark"] .avatar-initials{ box-shadow:0 0 0 2px var(--surface); }
html[data-theme="dark"] .legend-chip{ background:var(--surface-2); color:#C4C4D0; }
html[data-theme="dark"] .chip.off{ background:#2B2B3A; color:#9A9AAB; }
html[data-theme="dark"] .mbar-simple{ background:#2B2B3A; }

/* kalender & roster */
html[data-theme="dark"] .cal-grid, html[data-theme="dark"] .tg-scroll, html[data-theme="dark"] .roster-wrap{ background:var(--surface); border-color:var(--line); }
html[data-theme="dark"] .cal-head, html[data-theme="dark"] .tg-top{ background:#20202B; border-bottom-color:var(--line); color:#9A9AAB; }
html[data-theme="dark"] .cal-cell{ background:var(--surface); border-color:#262633; }
html[data-theme="dark"] .cal-cell.out{ background:#16161E; } html[data-theme="dark"] .cal-cell.wk, html[data-theme="dark"] .tg-col.wk, html[data-theme="dark"] .tg-allcell.wk, html[data-theme="dark"] .roster-table td.rc.wk{ background:#1E1B24; }
html[data-theme="dark"] .cal-day{ color:#C4C4D0; }
html[data-theme="dark"] .yr-d{ color:#C4C4D0; } html[data-theme="dark"] a.yr-d:hover{ background:#2B2B3A; }
html[data-theme="dark"] .yr-d.hol, html[data-theme="dark"] .roster-table thead th.hol, html[data-theme="dark"] .roster-table td.rc.hol{ background:rgba(229,82,95,.16); color:#FF8A93; }
html[data-theme="dark"] .tg-allday, html[data-theme="dark"] .tg-hour{ background:var(--surface); }
html[data-theme="dark"] .tg-dayhead{ color:#C4C4D0; border-right-color:#262633; }
html[data-theme="dark"] .tg-corner, html[data-theme="dark"] .tg-hours, html[data-theme="dark"] .tg-col, html[data-theme="dark"] .tg-allcell{ border-right-color:#262633; }
html[data-theme="dark"] .tg-col{ background-image:repeating-linear-gradient(to bottom, #2A2A38 0, #2A2A38 1px, transparent 1px, transparent 56px); }
html[data-theme="dark"] .roster-table th, html[data-theme="dark"] .roster-table td{ background:var(--surface); border-bottom-color:#262633; border-right-color:#262633; }
html[data-theme="dark"] .roster-table thead th{ background:#20202B; color:#9A9AAB; }
html[data-theme="dark"] .roster-table thead th.wk{ background:#261E26; color:#FF8A93; }
html[data-theme="dark"] .roster-table td.rc:hover{ background:#2B2B3A; }
html[data-theme="dark"] .cell-menu{ background:var(--surface); border-color:var(--line); } html[data-theme="dark"] .cell-menu button:hover{ background:var(--surface-2); }

/* utilitas Tailwind yang dipakai di view */
html[data-theme="dark"] .bg-white{ background-color:var(--surface) !important; }
html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800{ color:#F2F2F7 !important; }
html[data-theme="dark"] .text-gray-700{ color:#E0E0EA !important; }
html[data-theme="dark"] .text-gray-600{ color:#C4C4D0 !important; }
html[data-theme="dark"] .text-gray-500{ color:#A6A6B6 !important; }
html[data-theme="dark"] .text-gray-400{ color:#8A8A9B !important; }
html[data-theme="dark"] .text-gray-300{ color:#555569 !important; }
html[data-theme="dark"] .hover\:text-gray-600:hover{ color:#F2F2F7 !important; }
html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-\[\#F3F4F8\], html[data-theme="dark"] .border-\[\#EEF0F4\],
html[data-theme="dark"] .border-\[\#F0F0F4\], html[data-theme="dark"] .border-\[\#EEECFA\], html[data-theme="dark"] .border-\[\#E4E0FF\]{ border-color:var(--line) !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-\[\#F3F4F8\]:hover, html[data-theme="dark"] .hover\:bg-\[\#FAFAFF\]:hover{ background-color:var(--surface-2) !important; }
html[data-theme="dark"] .hover\:bg-red-50:hover{ background-color:rgba(229,82,95,.16) !important; }
html[data-theme="dark"] .bg-\[\#F7F7FB\], html[data-theme="dark"] .bg-\[\#F3F4F8\], html[data-theme="dark"] .bg-\[\#F1F1F5\]{ background-color:var(--surface-2) !important; }
html[data-theme="dark"] .bg-\[\#EFECFF\], html[data-theme="dark"] .bg-\[\#EFEDFB\], html[data-theme="dark"] .bg-\[\#E7E5FF\], html[data-theme="dark"] .bg-\[\#E7E5F5\]{ background-color:#2B2B3C !important; }
html[data-theme="dark"] .bg-\[\#FDE9EA\]{ background-color:rgba(229,82,95,.16) !important; color:#FF8A93 !important; }
html[data-theme="dark"] .bg-\[\#E4F8EC\]{ background-color:rgba(46,204,113,.16) !important; color:#5BD58F !important; }
html[data-theme="dark"] .bg-\[\#FFF8E6\]{ background-color:rgba(242,169,59,.12) !important; color:#F6D58B !important; }
html[data-theme="dark"] .text-\[\#C22F3A\], html[data-theme="dark"] .text-red-500, html[data-theme="dark"] .text-red-400{ color:#FF8A93 !important; }
html[data-theme="dark"] .text-green-600, html[data-theme="dark"] .text-\[\#1A9A5D\]{ color:#5BD58F !important; }
html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-\[\#A5690A\]{ color:#F6C26B !important; }
html[data-theme="dark"] .text-\[\#7A5B00\]{ color:#F6D58B !important; }
html[data-theme="dark"] .bg-\[\#14131F\], html[data-theme="dark"] .bg-\[\#6D5DFB\]{ background-color:var(--ink) !important; color:var(--on-ink) !important; }
html[data-theme="dark"] .bg-\[\#15132b\]{ background-color:#0D0D13 !important; }

/* style inline di beberapa view */
html[data-theme="dark"] [style*="background:#FAFAFB"], html[data-theme="dark"] [style*="background:#FAF9FF"], html[data-theme="dark"] [style*="background:#FBFAFF"]{ background:#1F1F2B !important; }
html[data-theme="dark"] [style*="background:#fff;border:1.5px dashed"]{ background:var(--surface) !important; }
html[data-theme="dark"] [style*="border-color:#C9C4FF"]{ border-color:#3A3A4C !important; }
}


/* =====================================================================
   SIDEBAR v2 - tanpa animasi & overlay, teks selalu terbaca
   (ditaruh paling akhir agar menang atas aturan sidebar sebelumnya)
   ===================================================================== */
.sb, .sb *, .sb-backdrop{ transition:none !important; animation:none !important; }
.sb-backdrop{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.sb{ color:#14131F; }
.sb .txt{ display:block; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; }

/* teks menu: warna eksplisit (tidak bergantung variabel) */
.sb .sb-item, .sb .sb-group-head, .sb .rail-btn{ color:#4B4B5A !important; opacity:1 !important; }
.sb .sb-item:hover, .sb .sb-group-head:hover, .sb .rail-btn:hover{ color:#14131F !important; background:rgba(20,19,31,.06); }
.sb .sb-item.active{ color:#14131F !important; background:#fff; font-weight:700; box-shadow:0 2px 8px -3px rgba(20,19,31,.28); }
.sb .sb-group-head.has-active{ color:#14131F !important; font-weight:700; }
.sb .rail-btn.active{ background:#14131F; color:#fff !important; }
.sb-floating .sb-item.active{ background:#14131F; color:#fff !important; box-shadow:none; }
.sb-profile b, .sb-logo, .sb-logo .txt{ color:#14131F !important; }
.sb-profile span{ color:#8C8C99 !important; }
.sb-search, .sb-search input{ color:#14131F; }
.sb-search input::placeholder{ color:#9A9AA6; }
.sb .sb-signout{ color:#5A5A68 !important; }
.sb .sb-signout:hover{ color:#C22F3A !important; }

/* mode menempel & ringkas: bagian dari kerangka, tidak melayang di atas konten */
.sb-pinned{ position:sticky; top:24px; height:calc(100vh - 48px); width:var(--sbw); flex:0 0 var(--sbw); align-self:flex-start; display:flex; flex-direction:column; overflow:hidden; }
.sb-rail{ position:sticky; top:24px; height:calc(100vh - 48px); width:88px; flex:0 0 88px; align-self:flex-start; display:flex; flex-direction:column; overflow:visible; }
.shell.sb-hidden.mode-pinned .sb, .shell.sb-hidden.mode-rail .sb{ display:none !important; }

/* mode melayang: kartu putih menempel (sticky) di sisi kiri di atas kanvas abu - tidak menutupi konten */
.shell.mode-floating{ display:flex; gap:24px; align-items:flex-start; padding:24px; max-width:none; margin:0; background:transparent; box-shadow:none; border-radius:0; overflow:visible; }
.shell.mode-floating .sb-floating{
  position:sticky !important; top:24px; left:auto; bottom:auto; transform:none !important; opacity:1 !important;
  width:var(--sbw); flex:0 0 var(--sbw); height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:30px; border:1px solid rgba(20,19,31,.05); box-shadow:0 24px 60px -28px rgba(20,19,31,.35); z-index:20;
}
.shell.mode-floating .main-wrap{ flex:1 1 auto; min-width:0; margin:0 !important; border-radius:32px; min-height:calc(100vh - 48px); box-shadow:0 24px 70px -40px rgba(20,19,31,.3); overflow:clip; }
.shell.mode-floating.sb-hidden .sb-floating{ display:none !important; }

/* layar sempit: sidebar = laci; hanya tampil bila dibuka lewat tombol di topbar */
@media (max-width:899px){
  .shell, .shell.mode-floating{ display:block; padding:0; margin:0; border-radius:0; box-shadow:none; background:var(--panel); }
  .shell .sb, .shell.mode-floating .sb-floating{
    position:fixed !important; top:12px; bottom:12px; left:12px; right:auto; width:min(300px, calc(100vw - 24px)); height:auto; flex:none;
    display:flex !important; flex-direction:column; overflow:hidden; z-index:60; background:#fff; border-radius:24px; transform:none !important;
    box-shadow:0 30px 80px -20px rgba(20,19,31,.45);
  }
  .shell.sb-hidden .sb, .shell.mode-floating.sb-hidden .sb-floating{ display:none !important; }
  .shell .main-wrap, .shell.mode-floating .main-wrap{ margin:0 !important; border-radius:0 !important; box-shadow:none; min-height:100vh; }
}

/* ---- tema gelap ---- */
@media screen{
html[data-theme="dark"] .sb{ color:#F2F2F7; }
html[data-theme="dark"] .sb .sb-item, html[data-theme="dark"] .sb .sb-group-head, html[data-theme="dark"] .sb .rail-btn{ color:#C4C4D0 !important; }
html[data-theme="dark"] .sb .sb-item:hover, html[data-theme="dark"] .sb .sb-group-head:hover, html[data-theme="dark"] .sb .rail-btn:hover{ color:#fff !important; background:rgba(255,255,255,.08); }
html[data-theme="dark"] .sb .sb-item.active{ color:#fff !important; background:#2B2B3C; box-shadow:none; }
html[data-theme="dark"] .sb .sb-group-head.has-active{ color:#fff !important; }
html[data-theme="dark"] .sb .rail-btn.active, html[data-theme="dark"] .sb-floating .sb-item.active{ background:#F2F2F7; color:#14131F !important; }
html[data-theme="dark"] .sb-profile b, html[data-theme="dark"] .sb-logo, html[data-theme="dark"] .sb-logo .txt{ color:#F2F2F7 !important; }
html[data-theme="dark"] .sb-search, html[data-theme="dark"] .sb-search input{ color:#F2F2F7; }
html[data-theme="dark"] .sb .sb-signout{ color:#C4C4D0 !important; }
html[data-theme="dark"] .shell.mode-floating .sb-floating{ background:var(--surface); border-color:var(--line); box-shadow:0 24px 60px -28px rgba(0,0,0,.9); }
@media (max-width:899px){ html[data-theme="dark"] .shell .sb, html[data-theme="dark"] .shell.mode-floating .sb-floating{ background:var(--surface); } }
}

.kpi-card .val.good{ color:#1E9D57; } .kpi-card .val.bad{ color:#C22F3A; }
@media screen{ html[data-theme="dark"] .kpi-card .val.good{ color:#5BD58F; } html[data-theme="dark"] .kpi-card .val.bad{ color:#FF8A93; } }