:root{--bg:#f1f4f8;--card:#fff;--ink:#1c2733;--mut:#64748b;--line:#d5dce5;--acc:#1f4e79;--acc2:#15395a;--acc3:#e6edf5;--warn:#b42318;--ok:#067647;--side-w:245px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}

/* ===== Struktur Sidebar + Header Formal ===== */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--side-w);
  background:var(--acc2);
  color:#fff;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(255,255,255,.08);
  position:sticky;      /* Membuat sidebar menempel saat scroll */
  top:0;               /* Menempel tepat di batas atas layar */
  height:100vh;        /* Tinggi penuh sesuai layar */
  overflow-y:auto;     /* Jika menu sangat banyak, sidebar bisa di-scroll terpisah */
}
.brand{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12)}
.brand img{height:38px;width:auto;image-rendering:-webkit-optimize-contrast}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-title{font-weight:700;font-size:14px;letter-spacing:.4px;color:#fff}
.brand-sub{font-size:11.5px;color:#a8c3de;font-weight:400}

.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:#8fb2d4;padding:18px 20px 8px}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.side-nav a{display:flex;align-items:center;gap:10px;color:#d2e1f0;text-decoration:none;padding:10px 14px;border-radius:6px;font-weight:500;font-size:13.5px;transition:background .15s,color .15s}
.side-nav a .dot{width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0}
.side-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.side-nav a.on{background:var(--acc);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 #8fb8e0}
.side-nav a.on .dot{background:#8fb8e0}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:13px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.top-title{display:flex;flex-direction:column;line-height:1.3}
.top-title strong{font-size:16px;color:var(--acc2);font-weight:600}
.top-title small{font-size:12px;color:var(--mut)}
.top-meta{font-size:12.5px;color:var(--mut);background:var(--bg);padding:5px 12px;border-radius:5px;border:1px solid var(--line);white-space:nowrap}

main{width:100%;max-width:1360px;margin:22px auto;padding:0 22px}
h1{font-size:20px;margin:0 0 14px;color:var(--acc2)}
h2{font-size:16px;margin:0 0 12px;color:var(--acc2)}

/* ===== Kartu & pesan ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.flash{background:#e7f1fb;border:1px solid #b5d2ee;padding:10px 14px;border-radius:6px;margin-bottom:14px}
.flash.err{background:#fdecea;border-color:#f3b5af;color:#7a1710}
.hint{color:var(--mut);font-size:12px;font-weight:400}

/* ===== Tabel ===== */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--acc3);font-weight:600;font-size:12.5px;color:var(--acc2);text-transform:none;white-space:nowrap}
tbody tr:nth-child(even) td{background:#fafbfd}
tbody tr:hover td{background:#f0f5fa}
td.r,th.r{text-align:right}
th small{font-weight:400;color:var(--mut);display:block}
small.sub{display:block;color:var(--mut)}

/* Daftar SPD */
.lst-wrap{overflow-x:auto;padding:0}
.lst{font-size:13px}
.lst th,.lst td{padding:8px 8px}
.lst .nw,.nw{white-space:nowrap}
.lst .aksi-col{white-space:nowrap;width:1%}
.lst .total-row td{background:var(--acc3)!important;font-weight:700}
.search{display:flex;gap:6px}
.search input{min-width:260px}

/* ===== Form ===== */
label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:3px;font-weight:600}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid #b9c4d0;border-radius:5px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc2e6;border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.span2{grid-column:span 2}
.info{background:var(--acc3);border-radius:5px;padding:8px 10px;font-size:13px;color:var(--acc2);min-height:38px}
.badge{font-size:12px;padding:2px 9px;border-radius:10px;background:var(--acc3);color:var(--acc2)}

/* ===== Tombol ===== */
.btn{display:inline-block;background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:5px;padding:8px 16px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.sec{background:#fff;color:var(--acc)}
.btn.sec:hover{background:var(--acc3)}
.btn.del{background:#fff;color:var(--warn);border-color:var(--warn)}
.btn.del:hover{background:#fdecea}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.6;cursor:default}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.actions.nowrap{flex-wrap:nowrap;flex-direction:row}
.tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;flex-wrap:wrap}

/* ===== Dropdown pencarian pegawai ===== */
.pick{position:relative}
.pick-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:start}
.rombongan-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;margin-bottom:8px;align-items:start}
.pk-list{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;border:1px solid var(--line);border-radius:6px;max-height:280px;overflow:auto;box-shadow:0 8px 20px rgba(16,24,40,.15);margin-top:2px}
.pk-list.open{display:block}
.pk-item{padding:7px 10px;cursor:pointer;border-bottom:1px solid #eef1f5}
.pk-item:last-child{border-bottom:0}
.pk-item.act,.pk-item:hover{background:var(--acc3)}
.pk-item small{display:block;color:var(--mut);font-size:12px}
.pk-empty{padding:10px;color:var(--mut)}

/* ===== Modal ===== */
dialog.modal{border:0;border-radius:10px;padding:0;width:min(680px,94vw);box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(15,23,42,.5)}
.modal-h{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--acc3)}
.modal-h h2{margin:0}
.modal-b{padding:18px}
.modal-f{padding:12px 18px;border-top:1px solid var(--line);background:#fafbfd}

/* ===== Rekap Biaya SPD ===== */
.rekap-wrap{overflow-x:auto}
.rekap{width:100%;border-collapse:collapse;font-size:11.5px}
.rekap th,.rekap td{border:1px solid #9aa7b5;padding:6px 7px;vertical-align:top;background:transparent!important}
.rekap th{background:#e3eaf2!important;text-align:center;vertical-align:middle;color:var(--ink)}
.rekap .tengah{text-align:center}
.rekap .angka{text-align:right;white-space:nowrap}
.judul-tabel{font-size:14px;margin:18px 0 6px;padding:6px 12px;background:var(--acc);color:#fff;border-radius:5px;letter-spacing:.5px}
.judul-wilayah td{background:#edf1f6!important;font-weight:700}
.total-wilayah td{background:#f3f3f3!important;font-weight:700}
.total-kelompok td{background:#dde6f0!important;font-weight:700}
.grand-box{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;background:#cfdcea;border-color:#9fb6cf}
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filter input{min-width:160px}
.kop{text-align:center;margin-bottom:16px}
.kop h2{font-size:17px;margin:0 0 4px;color:#000}
.kop p{font-size:12.5px;margin:4px 0}
.ringkasan{display:flex;justify-content:flex-end;gap:25px;margin-bottom:10px;font-size:13px}
.ttd-rekap{width:100%;margin:30px 0 20px;display:flex;justify-content:space-between;page-break-inside:avoid;break-inside:avoid}
.ttd-kolom{width:42%;text-align:center;font-size:12.5px;line-height:1.6;page-break-inside:avoid;break-inside:avoid}
.ttd-jarak{height:70px}

/* HEADER TABEL REKAP */
table.rekap {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

table.rekap th {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-align: center;
    vertical-align: middle;
    line-height: 1.2;
    padding: 7px 4px;
    font-size: 9pt;
}

table.rekap th:nth-child(1) { width: 30px; }
table.rekap th:nth-child(14) { width: 55px; }
table.rekap th:nth-child(15) { width: 90px; }

/* ===== Cetak rekap ===== */
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff!important;color:#000!important;font-size:10px}
  .no-print,.tools,.top,.sidebar,aside,header,nav,footer{display:none!important}
  .app-shell,.main-wrap{display:block!important}
  main{max-width:none!important;margin:0!important;padding:0!important}
  .card{border:none!important;box-shadow:none!important;padding:0!important}
  .rekap-wrap{overflow:visible!important}
  .rekap{font-size:8px}
  .rekap th,.rekap td{padding:3px 4px}
  .judul-tabel,.judul-wilayah td,.total-wilayah td,.total-kelompok td,.rekap th,.grand-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .judul-tabel{break-after:avoid;page-break-after:avoid}
  .rekap thead{display:table-header-group}
  .rekap tr,.ttd-rekap,.ttd-kolom,.grand-box{page-break-inside:avoid;break-inside:avoid}
  .ttd-rekap{margin-top:20px}
}

/* ===== Responsif Layar Kecil ===== */
@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%;position:static;height:auto}
  .nav-label{display:none}
  .side-nav{flex-direction:row;flex-wrap:wrap;padding:8px 12px}
  .top-meta{display:none}
  main{padding:0 14px}
}

@media (max-width:700px){
  .pick-row{grid-template-columns:1fr 1fr}.pick-row>.pick,.pick-row>div:first-child{grid-column:1/-1}
  .rombongan-row{grid-template-columns:1fr 1fr 1fr}.rombongan-row>div:first-child{grid-column:1/-1}
  .span2{grid-column:auto}
}