/* ==========================================================================
   CAPEX Dashboard — token warna + app shell (sidebar/topbar). Dipakai SEMUA halaman.
   Palet korporat: navy, biru KS, cyan, silver. Satu keluarga huruf: Plus Jakarta Sans.
   File ini dipakai oleh SEMUA halaman. Ubah warna/ukuran di :root saja.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand */
  --ks-navy-950:#071A30;
  --ks-navy-900:#0B2545;
  --ks-navy-800:#10325C;
  --ks-navy-700:#173F72;
  --ks-blue:#0057B8;          /* biru korporat — aksi utama */
  --ks-blue-600:#0A63C9;
  --ks-blue-050:#EAF2FC;
  --ks-cyan:#00A1D1;          /* aksen */
  --ks-cyan-300:#7FD4F2;
  --ks-cyan-050:#E6F6FC;
  --ks-silver-500:#8A97A8;
  --ks-silver-300:#C5CDD8;
  --ks-silver-200:#DDE3EA;
  --ks-silver-100:#ECF0F4;
  --ks-silver-050:#F5F7FA;

  /* Surfaces & ink */
  --bg:#F2F4F7;
  --surface:#FFFFFF;
  --surface-2:#F7F9FB;
  --line:#E3E8EE;
  --line-strong:#CBD3DD;
  --ink:#0E1B2C;
  --ink-2:#42526A;
  --ink-3:#6E7C8F;

  /* Status (selalu bersama ikon/teks, bukan warna saja) */
  --good:#1E8A5A;   --good-bg:#E7F5EE;
  --warn:#B7700A;   --warn-bg:#FCF2E1;
  --bad:#C23A2E;    --bad-bg:#FBEAE8;
  --info:#0057B8;   --info-bg:#EAF2FC;

  /* Categorical chart slots (tervalidasi CVD) */
  --c1:#0057B8; --c2:#00A1D1; --c3:#B08A3E; --c4:#7A6FB5; --c5:#3FA37C; --c6:#D9822B;

  /* Type */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;

  /* Shape */
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(11,37,69,.06),0 1px 1px rgba(11,37,69,.04);
  --shadow-2:0 8px 24px rgba(11,37,69,.10),0 2px 6px rgba(11,37,69,.06);
  --shadow-3:0 24px 60px rgba(7,26,48,.28);

  /* Shell */
  --sb-w:264px; --sb-w-rail:76px; --tb-h:60px;
  --gutter:28px;
}

html.ks-shell,html.ks-shell body{box-sizing:border-box}
.ks-sidebar *,.ks-topbar *,.ks-modal *,.ks-sidebar *::before,.ks-sidebar *::after,.ks-topbar *::before,.ks-topbar *::after{box-sizing:border-box}
.ks-sidebar,.ks-topbar,.ks-modal,.ks-toast,.ks-tip{font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
.ks-sidebar p,.ks-topbar p,.ks-modal h3,.ks-modal p{margin:0}

/* ==========================================================================
   APP SHELL (disuntik oleh ks-shell.js)
   ========================================================================== */
html.ks-shell body{padding:calc(var(--tb-h) + 24px) var(--gutter) 32px calc(var(--sb-w) + var(--gutter));
  min-height:100vh;transition:padding-left .22s ease}
html.ks-shell.ks-rail body{padding-left:calc(var(--sb-w-rail) + var(--gutter))}
html.ks-shell.ks-sb-hidden body{padding-left:var(--gutter)}

.ks-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sb-w);z-index:900;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--ks-navy-900) 0%,var(--ks-navy-950) 100%);color:#D7E1EE;
  transition:width .22s ease,transform .22s ease;overflow:hidden}
/* garis "rolled steel" di tepi kanan sidebar */
.ks-sidebar::after{content:"";position:absolute;top:0;right:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--ks-cyan) 0%,var(--ks-blue) 45%,rgba(197,205,216,.55) 100%)}
html.ks-rail .ks-sidebar{width:var(--sb-w-rail)}
html.ks-sb-hidden .ks-sidebar{transform:translateX(-100%)}

.ks-brand{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;height:var(--tb-h);padding:0 20px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.07);text-decoration:none;color:#fff;position:relative}
.ks-brand-full{display:block;height:21px;width:auto;max-width:100%;object-fit:contain;object-position:left center;align-self:flex-start}
.ks-brand-mark{display:none;width:30px;height:30px;object-fit:contain}
.ks-brand-app{font-size:11.5px;font-weight:600;color:#93A6BF;white-space:nowrap;letter-spacing:.01em}

.ks-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.ks-nav-group+.ks-nav-group{margin-top:18px}
.ks-nav-label{padding:0 10px 6px;font-size:11.5px;font-weight:600;color:#7F93AE;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ks-nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding:8px 10px;margin:2px 0;
  border-radius:8px;color:#C9D5E4;text-decoration:none;font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:background .15s,color .15s}
.ks-nav a svg{flex:none;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ks-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.ks-nav a[aria-current="page"]{background:linear-gradient(90deg,rgba(0,161,209,.20),rgba(0,87,184,.10));color:#fff;font-weight:600}
.ks-nav a[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ks-cyan)}
.ks-nav a[aria-current="page"] svg{color:var(--ks-cyan-300);opacity:1}
.ks-nav a .ks-nav-txt{overflow:hidden;text-overflow:ellipsis}
.ks-nav a.is-sub{padding-left:14px;font-size:13px}
.ks-nav a.is-sub svg{width:17px;height:17px}
.ks-nav a.is-disabled{opacity:.45;pointer-events:none}

.ks-sb-foot{flex:none;padding:12px;border-top:1px solid rgba(255,255,255,.07)}
.ks-sb-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:#93A6BF;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-align:left}
.ks-sb-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.ks-sb-btn svg{flex:none;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
html.ks-rail .ks-sb-btn[data-act="rail"] svg{transform:rotate(180deg)}

/* Rail (mode ikon) */
html.ks-rail .ks-brand{padding:0;align-items:center}
html.ks-rail .ks-brand-full,html.ks-rail .ks-brand-app{display:none}
html.ks-rail .ks-brand-mark{display:block}
html.ks-rail .ks-nav-label,
html.ks-rail .ks-nav .ks-nav-txt,
html.ks-rail .ks-sb-btn span{opacity:0;width:0;pointer-events:none}
html.ks-rail .ks-nav-label{height:10px;padding:0}
html.ks-rail .ks-nav a,html.ks-rail .ks-nav a.is-sub{justify-content:center;padding:8px 0;gap:0}
html.ks-rail .ks-sb-btn{justify-content:center;gap:0}
.ks-tip{position:fixed;z-index:2000;padding:7px 10px;border-radius:6px;background:var(--ks-navy-900);color:#fff;font-size:12.5px;font-weight:600;
  pointer-events:none;box-shadow:var(--shadow-2);white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.ks-tip.on{opacity:1;transform:none}

/* Topbar */
.ks-topbar{position:fixed;top:0;right:0;left:var(--sb-w);height:var(--tb-h);z-index:800;display:flex;align-items:center;gap:14px;
  padding:0 var(--gutter) 0 16px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);transition:left .22s ease}
html.ks-rail .ks-topbar{left:var(--sb-w-rail)}
html.ks-sb-hidden .ks-topbar{left:0}
.ks-icon-btn{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ks-icon-btn:hover{background:var(--ks-silver-100);color:var(--ks-navy-900)}
.ks-icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ks-crumb{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.ks-crumb small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-crumb b{font-size:15px;font-weight:700;color:var(--ks-navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-tb-spacer{flex:1}
.ks-env{flex:none;margin-left:6px;padding:3px 10px;border-radius:999px;background:#FCF2E1;color:#B7700A;border:1px solid #F1C98A;font:700 11.5px var(--font);letter-spacing:.04em}
.ks-tb-logo{display:none;flex:none;height:22px;width:auto;margin-right:4px}
html.ks-sb-hidden .ks-tb-logo{display:block}
.ks-tb-logo+.ks-crumb{padding-left:14px;border-left:1px solid var(--line)}
html:not(.ks-sb-hidden) .ks-tb-logo+.ks-crumb{padding-left:0;border-left:0}

/* Ikon info + tooltip definisi */
.ks-info{display:inline-grid;place-items:center;width:16px;height:16px;padding:0;margin-left:2px;border:1px solid currentColor;border-radius:50%;background:none;color:var(--ink-3);
  font:700 10px/1 var(--font);cursor:help;opacity:.75;vertical-align:1px;flex:none}
.ks-info:hover,.ks-info:focus-visible{opacity:1;color:var(--ks-blue)}
.ks-tip.wrap{white-space:normal;max-width:300px;font-weight:500;line-height:1.45;transform:none}

/* Kotak pencarian tabel */
.ks-search{position:relative;display:inline-flex;align-items:center;min-width:220px}
.ks-search svg{position:absolute;left:11px;width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.ks-search input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);font:500 13.5px var(--font);color:var(--ink)}
.ks-search input:focus{outline:none;border-color:var(--ks-blue);box-shadow:0 0 0 3px rgba(0,87,184,.14)}
.ks-searchbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);font-family:var(--font)}
.ks-searchbar .ks-count{font-size:12.5px;color:var(--ink-3)}
.ks-searchbar select{height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);font:500 13px var(--font);color:var(--ink)}

/* Kop cetak (hanya muncul saat print/PDF) */
.ks-print-head{display:none}
.ks-tb-actions{display:flex;align-items:center;gap:6px}
.ks-tb-sep{width:1px;height:26px;background:var(--line);margin:0 4px}
.ks-today{font-size:12.5px;color:var(--ink-3);white-space:nowrap}

.ks-user{position:relative}
.ks-user-btn{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ks-user-btn:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.ks-avatar{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ks-navy-900);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ks-cyan)}
.ks-user-meta{line-height:1.15;text-align:left}
.ks-user-meta b{display:block;font-size:13px;font-weight:600;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-user-meta span{display:block;font-size:11.5px;color:var(--ink-3)}
.ks-user-btn>svg{width:16px;height:16px;stroke:var(--ink-3);fill:none;stroke-width:2}
.ks-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;padding:8px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.ks-user.open .ks-menu{opacity:1;visibility:visible;transform:none}
.ks-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ks-menu-head b{display:block;font-size:14px}
.ks-menu-head span{font-size:12.5px;color:var(--ink-3)}
.ks-menu button,.ks-menu a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:13.5px;text-decoration:none;cursor:pointer;text-align:left}
.ks-menu button:hover,.ks-menu a:hover{background:var(--ks-silver-100)}
.ks-menu button.danger{color:var(--bad)}
.ks-menu svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ks-backdrop{position:fixed;inset:0;z-index:850;background:rgba(7,26,48,.45);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}

/* Mobile: sidebar jadi off-canvas */
@media (max-width:960px){
  :root{--gutter:16px}
  html.ks-shell body,html.ks-shell.ks-rail body,html.ks-shell.ks-sb-hidden body{padding-left:var(--gutter)}
  .ks-sidebar,html.ks-rail .ks-sidebar{width:var(--sb-w);transform:translateX(-100%)}
  html.ks-rail .ks-brand{padding:0 20px;align-items:flex-start}
  html.ks-rail .ks-brand-full,html.ks-rail .ks-brand-app{display:block}
  html.ks-rail .ks-brand-mark{display:none}
  html.ks-rail .ks-nav-label,html.ks-rail .ks-nav .ks-nav-txt,html.ks-rail .ks-sb-btn span{opacity:1;width:auto;pointer-events:auto}
  html.ks-rail .ks-nav a{justify-content:flex-start;padding:8px 10px;gap:12px}
  html.ks-nav-open .ks-sidebar{transform:none;box-shadow:var(--shadow-3)}
  html.ks-nav-open .ks-backdrop{opacity:1;visibility:visible}
  .ks-topbar,html.ks-rail .ks-topbar,html.ks-sb-hidden .ks-topbar{left:0;padding:0 12px}
  .ks-sb-btn[data-act="rail"]{display:none}
  .ks-user-meta,.ks-today,.ks-tb-sep{display:none}
  .ks-tb-logo{display:block;height:18px}
  .ks-crumb small{display:none}
  .ks-user-btn{padding:3px;border-color:transparent}
  .ks-user-btn>svg{display:none}
}
@media (max-width:560px){
  .ks-crumb small{display:none}
  .ks-tb-actions .ks-hide-sm,.ks-topbar>.ks-hide-sm{display:none}
}

/* Modal */
.ks-modal{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,26,48,.5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.ks-modal.open{opacity:1;visibility:visible}
.ks-modal-box{display:flex;flex-direction:column;width:min(1100px,100%);max-height:86vh;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-3);overflow:hidden;transform:translateY(8px) scale(.99);transition:transform .2s}
.ks-modal.open .ks-modal-box{transform:none}
.ks-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.ks-modal-head h3{font-size:17px;font-weight:700;color:var(--ks-navy-900)}
.ks-modal-head p{margin-top:3px;font-size:13px;color:var(--ink-3)}
.ks-modal-body{overflow:auto;flex:1}
.ks-modal-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ks-navy-900)}
.ks-modal-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 22px;border-bottom:1px solid var(--line)}
.ks-modal-kpis>div{padding:10px 14px;border-radius:10px;background:var(--surface-2)}
.ks-modal-kpis small{display:block;font-size:12px;color:var(--ink-3)}
.ks-modal-kpis b{font-size:18px}
@media (max-width:700px){.ks-modal{padding:0}.ks-modal-box{max-height:100vh;height:100vh;border-radius:0}.ks-modal-body .tbl{min-width:680px}}

/* Toast */
.ks-toast{position:fixed;left:50%;bottom:24px;z-index:4000;transform:translate(-50%,16px);padding:10px 16px;border-radius:10px;background:var(--ks-navy-900);color:#fff;font-size:13px;font-weight:600;box-shadow:var(--shadow-2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ks-toast.on{opacity:1;transform:translate(-50%,0)}
.ks-toast.err{background:var(--bad)}


/* Tombol aksi di topbar (dipakai juga oleh halaman lama) */
.ks-tb-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font:600 13px var(--font);cursor:pointer;white-space:nowrap;box-shadow:none;width:auto;position:static;transition:background .15s,border-color .15s}
.ks-tb-actions .btn:hover{background:var(--ks-silver-050);border-color:var(--ks-silver-500)}
.ks-tb-actions .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.ks-tb-actions .btn-primary{background:var(--ks-blue);border-color:var(--ks-blue);color:#fff}
.ks-tb-actions .btn-primary:hover{background:#004A9E;border-color:#004A9E}
.ks-tb-actions .btn:disabled{opacity:.5;cursor:not-allowed}
.ks-tb-actions .btn::after{display:none!important}

@media print{
  .ks-sidebar,.ks-topbar,.ks-backdrop,.ks-tip,.ks-toast,.ks-searchbar,.ks-info{display:none!important}
  .ks-print-head{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:0 0 10px;margin-bottom:14px;border-bottom:2px solid #0B2545;font-family:var(--font)}
  .ks-print-head img{height:28px}
  .ks-print-head div{text-align:right;font-size:11px;color:#42526A;line-height:1.4}
  .ks-print-head b{display:block;font-size:13px;color:#0B2545}
  html.ks-shell body{padding:0!important}
}