/* notif */
.notif-panel{position:fixed;top:var(--th);right:0;width:320px;max-height:calc(100vh - var(--th));overflow-y:auto;background:var(--bg2);border:1px solid var(--bdr2);border-top:none;border-radius:0 0 0 var(--rad2);z-index:300;display:none;animation:fadein .15s;box-shadow:-4px 8px 24px rgba(0,0,0,.5)}
.notif-panel.open{display:block}
.notif-hdr{padding:10px 14px;font-size:10px;font-family:var(--mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bdr);cursor:pointer}
.notif-item:hover{background:var(--bg3)}
.ni-ico{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ni-txt{font-size:11px;color:var(--txt2);line-height:1.4}
.ni-time{font-size:9px;color:var(--txt4);font-family:var(--mono);margin-top:3px}

/* ── LOGIN ── */
#login-wrap{position:fixed;inset:0;background:var(--bg0);z-index:9999;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--bg2);border:1px solid var(--bdr2);border-radius:16px;padding:40px;width:360px;position:relative;overflow:hidden}
.login-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--green))}
[data-theme="light"] .login-box::before{background:linear-gradient(90deg,var(--teal),var(--amber))}
.login-logo{font-family:var(--body);font-size:26px;font-weight:700;color:var(--teal);letter-spacing:-.2px;margin-bottom:4px}
.login-sub{font-size:11px;color:var(--txt3);font-family:var(--mono);margin-bottom:28px}
.login-label{font-size:9px;color:var(--txt3);text-transform:uppercase;letter-spacing:.7px;font-family:var(--mono);display:block;margin-bottom:5px}
.login-inp{width:100%;background:var(--bg3);border:1px solid var(--bdr2);border-radius:var(--rad);padding:9px 12px;font-size:13px;color:var(--txt);font-family:var(--body);outline:none;margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
.login-inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
[data-theme="light"] .login-inp{background:var(--bg3);color:var(--txt)}
[data-theme="light"] .login-inp::placeholder{color:var(--txt4)}
.login-roles{display:flex;gap:6px;margin-bottom:18px}
.role-btn{flex:1;padding:6px;border-radius:var(--rad);font-size:11px;font-family:var(--mono);cursor:pointer;border:1px solid var(--bdr2);background:var(--bg3);color:var(--txt3);transition:all .15s;text-align:center}
.role-btn:hover{color:var(--teal);border-color:var(--teal)}
.role-btn.active{color:var(--teal);border-color:var(--teal);background:var(--teal-dim)}
.login-btn{width:100%;padding:10px;background:var(--amber);color:#0a0a0a;border:none;border-radius:var(--rad);font-size:13px;font-family:var(--body);font-weight:600;cursor:pointer;letter-spacing:.3px;transition:all .15s}
.login-btn:hover{background:var(--amber2)}
[data-theme="light"] .login-btn{color:#fffdf8}

/* ── SIDEBAR OVERRIDES ── */
.logo-dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.logo-mark{color:var(--teal)}
.sb-logo::after{background:linear-gradient(90deg,var(--teal),var(--green),transparent)}
[data-theme="light"] .sb-logo::after{background:linear-gradient(90deg,var(--teal),rgba(80,50,10,.15),transparent)}
.nav-item.active{background:var(--teal-dim);color:var(--teal);border-left-color:var(--teal)}
.avatar{background:var(--teal-dim);border:1px solid var(--teal);color:var(--teal)}
[data-theme="light"] .avatar{background:rgba(7,121,160,.10);border-color:rgba(7,121,160,.30);color:var(--teal)}
#sidebar-credit span{color:var(--teal)}
[data-theme="light"] #sidebar{background:var(--bg1);border-right-color:var(--bdr)}
[data-theme="light"] .topbar{background:var(--bg1);border-bottom-color:var(--bdr)}
[data-theme="light"] .icon-btn{background:var(--bg3);border-color:var(--bdr);color:var(--txt2)}
[data-theme="light"] .icon-btn:hover{background:var(--bg4);color:var(--txt)}
[data-theme="light"] .pill-live{background:rgba(61,122,10,.10);border-color:rgba(61,122,10,.20);color:var(--green)}

/* ── SNACKBAR ── */
#snack{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--bdr2);color:var(--txt);padding:8px 20px;border-radius:20px;font-size:12px;font-family:var(--mono);display:none;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.4)}
[data-theme="light"] #snack{background:var(--bg2);border-color:var(--bdr2);color:var(--txt);box-shadow:0 4px 20px rgba(80,50,10,.18)}

/* ══════════════════════════════════════════════════════════
   LAP-CLASSIC — HIGH CONTRAST DARK MODE
   Semua styling di bawah ini tidak mengubah JS sama sekali.
   Hanya CSS yang mengontrol tampilan .lap-classic dan turunannya.
   ══════════════════════════════════════════════════════════ */

/* ── Wrapper utama laporan ── */
.lap-classic {
  background:    var(--bg1);
  border:        1.5px solid rgba(34,211,238,.25);
  border-radius: var(--rad2);
  padding:       20px 22px;
  position:      relative;
  overflow:      hidden;
}

/* Accent bar atas — cyan ke lime, ciri khas High Contrast */
.lap-classic::before {
  content:  '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height:   3px;
  background: linear-gradient(90deg, var(--teal), var(--green), transparent);
}

/* Light mode: border coklat warm, accent bar cyan ke amber */
[data-theme="light"] .lap-classic {
  background:   var(--bg2);
  border-color: rgba(7,121,160,.20);
  box-shadow:   0 1px 4px rgba(80,50,10,.08);
}
[data-theme="light"] .lap-classic::before {
  background: linear-gradient(90deg, var(--teal), var(--amber), transparent);
}

/* ── Header laporan: judul dan subtitle ── */
.lap-h1 {
  font-family:    var(--body);
  font-size:      15px;
  font-weight:    600;
  color:          var(--txt);
  letter-spacing: -.1px;
  margin-bottom:  3px;
  padding-top:    6px; /* beri jarak dari accent bar */
}

.lap-h2 {
  font-family:    var(--mono);
  font-size:      10px;
  color:          var(--txt3);
  margin-bottom:  16px;
  letter-spacing: .3px;
}

/* Divider bawah header — garis tipis cyan */
.lap-h1 + .lap-h2 {
  padding-bottom: 12px;
  border-bottom:  0.5px solid rgba(34,211,238,.15);
  margin-bottom:  14px;
}
[data-theme="light"] .lap-h1 + .lap-h2 {
  border-bottom-color: rgba(7,121,160,.12);
}

/* ── Metric summary cards — inline style override via CSS specificity ──
   JS memakai inline style, tapi kita bisa override beberapa hal via
   class .lap-classic >[div]>[div] targeting */

/* Container metric grid */
.lap-classic > div:first-of-type {
  margin-bottom: 14px;
}

/* Tiap metric card di dalam lap-classic:
   Kita perkuat border dan background agar lebih kontras */
.lap-classic > div:first-of-type > div {
  background:    var(--bg3) !important;
  border:        1px solid rgba(34,211,238,.18) !important;
  border-radius: var(--rad2) !important;
  padding:       13px 12px !important;
  position:      relative;
  overflow:      hidden;
}

/* Accent bar atas tiap metric — cyan tipis */
.lap-classic > div:first-of-type > div::before {
  content:  '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height:   2px;
  background: var(--teal);
  opacity:  .6;
}

/* Label metric */
.lap-classic > div:first-of-type > div > div:first-child {
  color: var(--txt3) !important;
}

/* Sub metric */
.lap-classic > div:first-of-type > div > div:last-child {
  color: var(--txt4) !important;
  font-size: 10px !important;
}

/* Light mode metric cards */
[data-theme="light"] .lap-classic > div:first-of-type > div {
  background:   var(--bg3) !important;
  border-color: rgba(7,121,160,.15) !important;
  box-shadow:   0 1px 3px rgba(80,50,10,.06);
}

/* ── Tabel laporan ── */

/* Wrapper tabel: beri border cyan dan radius */
.lap-classic table {
  border-radius: var(--rad2);
  overflow:      hidden;
  border:        1px solid rgba(34,211,238,.18) !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Thead: background lebih gelap, teks lebih terang */
.lap-classic table thead tr {
  background:   var(--bg0) !important;
  border-bottom: 2px solid rgba(34,211,238,.35) !important;
}

/* Semua th: teks lebih terang agar kontras */
.lap-classic table thead th {
  color:        var(--teal) !important;
  background:   var(--bg0) !important;
  padding:      9px 10px !important;
  font-size:    9px !important;
  letter-spacing: .8px !important;
  font-family:  var(--mono) !important;
  text-transform: uppercase !important;
}

/* Baris ganjil dan genap — zebra striping High Contrast */
.lap-classic table tbody tr:nth-child(odd) {
  background: var(--bg1) !important;
}
.lap-classic table tbody tr:nth-child(even) {
  background: var(--bg2) !important;
}

/* Sub-row detail (hidden row) */
.lap-classic table tbody tr[id^="lap-detail-row"] {
  background: var(--bg3) !important;
}

/* Hover row */
.lap-classic table tbody tr:not([id^="lap-detail-row"]):hover {
  background: rgba(34,211,238,.05) !important;
}

/* Semua td */
.lap-classic table tbody td {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

/* Footer total: bg lebih gelap, border cyan tebal */
.lap-classic table tfoot tr {
  background:   var(--bg0) !important;
  border-top:   2px solid rgba(34,211,238,.35) !important;
}

/* Light mode tabel */
[data-theme="light"] .lap-classic table {
  border-color: rgba(7,121,160,.15) !important;
}
[data-theme="light"] .lap-classic table thead tr {
  background:   var(--bg3) !important;
  border-bottom-color: rgba(7,121,160,.25) !important;
}
[data-theme="light"] .lap-classic table thead th {
  color:      var(--teal) !important;
  background: var(--bg3) !important;
}
[data-theme="light"] .lap-classic table tbody tr:nth-child(odd) {
  background: var(--bg2) !important;
}
[data-theme="light"] .lap-classic table tbody tr:nth-child(even) {
  background: var(--bg3) !important;
}
[data-theme="light"] .lap-classic table tbody td {
  border-bottom-color: rgba(80,50,10,.07) !important;
}
[data-theme="light"] .lap-classic table tfoot tr {
  background:   var(--bg3) !important;
  border-top-color: rgba(7,121,160,.25) !important;
}
[data-theme="light"] .lap-classic table tbody tr:not([id^="lap-detail-row"]):hover {
  background: rgba(7,121,160,.04) !important;
}

/* ── Badge di dalam laporan ── */
.lap-classic .badge {
  font-size:   9px;
  font-family: var(--mono);
  font-weight: 600;
  padding:     2px 7px;
  border-radius: 4px;
}
.lap-classic .b-green  { background: rgba(163,230,53,.14); color: var(--green) }
.lap-classic .b-red    { background: rgba(248,113,113,.14); color: var(--red) }
.lap-classic .b-yellow { background: rgba(252,211,77,.14); color: var(--yellow) }
.lap-classic .b-amber  { background: rgba(251,191,36,.14); color: var(--amber) }
.lap-classic .b-teal   { background: rgba(34,211,238,.14); color: var(--teal) }

[data-theme="light"] .lap-classic .b-green  { background: rgba(61,122,10,.12);  color: var(--green) }
[data-theme="light"] .lap-classic .b-red    { background: rgba(192,40,42,.12);  color: var(--red) }
[data-theme="light"] .lap-classic .b-yellow { background: rgba(154,107,0,.12);  color: var(--yellow) }
[data-theme="light"] .lap-classic .b-amber  { background: rgba(184,115,16,.12); color: var(--amber) }
[data-theme="light"] .lap-classic .b-teal   { background: rgba(7,121,160,.12);  color: var(--teal) }

/* ── Tombol expand ▸ di dalam tabel ── */
.lap-classic table button {
  background: none !important;
  border:     none !important;
  color:      var(--teal) !important;
  cursor:     pointer;
  font-size:  12px;
  padding:    2px 4px;
  transition: color .12s;
}
.lap-classic table button:hover {
  color: var(--green) !important;
}

/* ── Area kosong / empty state ── */
.lap-classic [colspan] {
  text-align: center;
  color:      var(--txt3);
  font-size:  12px;
  padding:    20px;
}

/* ── Print mode: tetap bersih di kertas ── */
@media print {
  .lap-classic {
    background: white !important;
    color:      #111  !important;
    border:     none  !important;
  }
  .lap-classic::before { display: none }
  .lap-classic table thead tr  { background: #f0f0f0 !important }
  .lap-classic table thead th  { color: #333 !important }
  .lap-classic table tfoot tr  { background: #f0f0f0 !important }
  .lap-classic table tbody tr:nth-child(odd)  { background: white !important }
  .lap-classic table tbody tr:nth-child(even) { background: #fafafa !important }
  .lap-classic .b-green  { background: #e0f5e0 !important; color: #1a6a1a !important }
  .lap-classic .b-red    { background: #fde8e8 !important; color: #a31a1a !important }
  .lap-classic .b-yellow { background: #fff8e0 !important; color: #7a5a00 !important }
  .lap-classic .b-amber  { background: #fff3cc !important; color: #7a4800 !important }
}