/* Main application stylesheet — intentionally kept outside index.html. */
@media print {
  body.printing-surat * { visibility: hidden !important; }
  body.printing-surat #suratPreview,
  body.printing-surat #suratPreview * { visibility: visible !important; }
  body.printing-surat #suratPreview { position: absolute; left:0; top:0; width:100%; margin:0; padding:0; background:#fff !important; border:0 !important; overflow:visible !important; }
  body.printing-surat .paper { width:794px !important; min-height:1123px !important; margin:0 auto !important; box-shadow:none !important; }
  @page { size:A4 portrait; margin:0; }
}@media print{
  html,body{margin:0!important;padding:0!important;width:210mm!important;background:#fff!important}
  body.printing-surat #suratPreview{display:block!important;width:210mm!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
  body.printing-surat #suratPreview .kop img{width:18mm!important;height:18mm!important;object-fit:contain!important}
  body.printing-surat #suratPreview .kop .kop-logo-kabupaten{left:0!important;right:auto!important}
  body.printing-surat #suratPreview .kop .kop-logo-sekolah{right:0!important;left:auto!important}
  body.printing-surat #suratPreview .kop{min-height:27mm!important;padding-left:22mm!important;padding-right:22mm!important;padding-bottom:2.5mm!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  body.printing-surat #suratPreview .kop .addr,body.printing-surat #suratPreview .kop .mail{font-size:8.5pt!important;font-style:italic!important;line-height:1.3!important;word-break:break-word!important;overflow-wrap:break-word!important}
  body.printing-surat #suratPreview .kop .prov{font-size:13.5pt!important;line-height:1.15!important;word-break:break-word!important;overflow-wrap:break-word!important}
  body.printing-surat #suratPreview .kop .school{max-width:100%!important;line-height:1.2!important;word-break:break-word!important;overflow-wrap:break-word!important}
}

/* ==============================================================
   SPMU_OTOMATIS — extracted application styles
   Kept outside index.html so the portable UI remains modular.
   ============================================================== */

:root{font-family:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif;color:#0f172a;background:#f8fafc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 8% 0%,#dbeafe 0,transparent 34%),radial-gradient(ellipse at 100% 8%,#ede9fe 0,transparent 30%),#f8fafc}.app{max-width:1480px;margin:auto;padding:26px 28px 18px}.card{background:rgba(255,255,255,.94);border:1px solid #e3e9f4;border-radius:22px;padding:22px;box-shadow:0 12px 36px rgba(35,53,94,.07);margin-bottom:18px;transition:transform .22s,box-shadow .22s}.card:hover{box-shadow:0 16px 42px rgba(35,53,94,.11);transform:translateY(-2px)}.hero{position:relative;overflow:hidden;color:white;background:linear-gradient(120deg,#101d43,#243b80 58%,#5368ce);border:0;padding:30px}.hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid #ffffff22;border-radius:50%;right:-65px;top:-180px;box-shadow:0 0 0 35px #ffffff09,0 0 0 75px #ffffff07}.top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;position:relative;z-index:1}.title{margin:8px 0 10px;font-size:clamp(23px,3vw,36px);line-height:1.14;letter-spacing:-.8px;max-width:850px}.muted{color:#71809b}.hero .muted{color:#d5def8;max-width:760px;line-height:1.6}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800;color:#b9c9ff}.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#ffffff18;border:1px solid #ffffff30;color:#f4f7ff;font-size:12px;font-weight:800;white-space:nowrap}.creator{margin-top:18px;font-size:12px;color:#cbd7ff}.creator strong{color:white;letter-spacing:1px}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{border:1px solid transparent;border-radius:12px;padding:12px 17px;font-weight:800;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .16s}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 7px 16px #1e3a8a22}.btn:active:not(:disabled){transform:scale(.96)}.btn.primary{background:linear-gradient(135deg,#3159d9,#5946d8);color:#fff;box-shadow:0 7px 18px #3854c733}.btn.secondary{background:#f0f3fb;color:#43516e;border-color:#e0e6f1}.btn.success{background:#e6f8ef;color:#08784a;border-color:#c8f0d9}.btn:disabled{opacity:.42;cursor:not-allowed}input[type=file]{max-width:100%;border:1px solid #dce4f1;background:#f8faff;padding:11px;border-radius:12px;color:#53617c}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.metric{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#f7f9ff);border:1px solid #e5eaf4;border-radius:17px;padding:16px}.metric:after{content:"";position:absolute;width:58px;height:58px;border-radius:50%;background:#e8edff;right:-18px;bottom:-25px}.metric span{font-size:12px;font-weight:700;color:#7886a0}.metric b{display:block;font-size:clamp(19px,2vw,26px);margin-top:8px;color:#1b2a4b;overflow-wrap:anywhere}.status{white-space:pre-wrap;background:#111d3b;color:#e3eaff;border-radius:14px;padding:15px;min-height:54px;line-height:1.5;border:1px solid #26365f}.table-wrap{overflow:auto;border:1px solid #e4e9f2;border-radius:15px}.result-table-wrap{max-height:min(430px,55vh);overflow:auto;overscroll-behavior:contain}.result-table-wrap .data-table thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 #e4e9f2}.result-table-wrap::-webkit-scrollbar{width:9px;height:9px}.result-table-wrap::-webkit-scrollbar-thumb{background:#cbd5e7;border-radius:999px}.result-table-wrap::-webkit-scrollbar-track{background:#f4f6fb}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px}.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid #edf0f6;text-align:left;vertical-align:top}.data-table th{background:#f5f7fc;position:sticky;top:0;color:#5b6882;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.data-table tbody tr:hover{background:#f7f9ff}.num{text-align:right!important;white-space:nowrap;font-variant-numeric:tabular-nums}.warn{background:#fff8e7;color:#946200;border:1px solid #f5dfa1;padding:11px 13px;border-radius:12px;margin-top:10px}.danger{background:#fff0ef;color:#a42d2d;border:1px solid #ffd0cc;padding:11px 13px;border-radius:12px;margin-top:10px}.hint{font-size:13px;color:#77839a;line-height:1.55}.small{font-size:12px;color:#8490a5}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.empty{padding:36px!important;text-align:center;color:#8994a8}.footer{font-size:12px;color:#8994a8;text-align:center;padding:10px}.section-title{font-size:16px;font-weight:850;color:#223253}.section-sub{font-size:12px;color:#8994a8;margin-top:5px}.steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.step{display:flex;align-items:center;gap:8px;color:#d8e1ff;font-size:12px}.step i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff20;border:1px solid #ffffff40;font-weight:800}.upload-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.upload-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#edf2ff;color:#3855c7;font-size:21px}.search{width:min(100%,320px);border:1px solid #dfe6f2;border-radius:11px;padding:11px 13px;background:#fbfcff;color:#1d2b49;outline:none}.search:focus,input[type=file]:focus{border-color:#7891ed;box-shadow:0 0 0 3px #718cf022}.state-chip{display:inline-flex;align-items:center;gap:6px;color:#08784a;background:#e8f8ef;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800}@media(max-width:1050px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.app{padding:12px}.card{padding:16px;border-radius:17px}.hero{padding:22px}.top{flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{padding:12px}.metric b{font-size:19px}.controls>*{width:100%}.controls .btn{width:100%}.search{width:100%}}
.tabs{display:flex;gap:8px;margin:0 0 18px;padding:6px;background:#e9eef8;border:1px solid #dce4f1;border-radius:16px;position:sticky;top:10px;z-index:20}.tab-btn{flex:1;border:0;border-radius:11px;padding:13px 16px;background:transparent;color:#5b6882;font-weight:850;cursor:pointer;transition:.18s;position:relative}.tab-btn.active{background:#fff;color:#233a78;box-shadow:0 5px 14px #233a7818}.tab-btn:disabled{opacity:.45;cursor:not-allowed}.tab-btn.locked:after{content:" 🔒"}.tab-panel{display:none}.tab-panel.active{display:block}.tab-lock-note{font-size:11px;margin-top:5px;color:#8a5a00}.bku-group .card:last-child,.surat-group .card:last-child{margin-bottom:18px}

.surat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:11px;font-weight:800;color:#65728b;text-transform:uppercase;letter-spacing:.4px}
.manual-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#fff3e6;color:#a35b00;font-size:9px;font-weight:900;letter-spacing:.3px;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;border:1px solid #dce4f1;border-radius:11px;padding:10px 12px;background:#fbfcff;color:#1d2b49;font:inherit}.field textarea{min-height:70px;resize:vertical}.surat-preview{margin-top:18px;border:1px solid #dfe5ef;border-radius:16px;background:#eef2f7;padding:20px;overflow:auto}.paper{width:794px;min-height:1123px;margin:auto;background:#fff;box-shadow:0 8px 28px #17203318;padding:44px 48px 42px;font-family:Arial,Helvetica,sans-serif;color:#000}.kop{position:relative;min-height:88px;text-align:center;border-bottom:3px double #000;padding:0 70px 8px;box-sizing:border-box;width:100%;max-width:100%}.kop img{position:absolute;left:0;top:0;width:68px;height:70px;object-fit:contain}.kop .prov{font-size:16px;font-weight:700;word-break:break-word;overflow-wrap:break-word}.kop .school{font-size:18px;font-weight:700;margin-top:2px;word-break:break-word;overflow-wrap:break-word;max-width:100%}.kop .addr,.kop .mail{font-size:10px;line-height:1.35;word-break:break-word;overflow-wrap:break-word}.paper h2{text-align:center;font-size:16px;margin:20px 0 4px;text-decoration:underline}.paper .nomor{text-align:center;font-size:12px;margin-bottom:20px}.paper p{font-size:12px;line-height:1.55;margin:8px 0}.identity{margin:14px 0 10px}.identity .line{display:grid;grid-template-columns:145px 12px minmax(0,1fr);margin:5px 0;font-size:12px}.identity .line>span:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word}.payment{margin-top:12px}.payment .row{display:grid;grid-template-columns:145px 12px minmax(0,1fr);margin:7px 0;font-size:12px;align-items:start}.payment .row>span:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap;line-height:1.5}.payment .long-text{text-align:justify}.payment .manual-text{line-height:1.5}.payment .amount{font-weight:700}.payment .terbilang{text-transform:capitalize;font-style:italic}.uraian-list{margin:0;padding:0;list-style:none}.uraian-list .uraian-item{display:grid;grid-template-columns:7mm minmax(0,1fr);column-gap:2mm;margin:1.4mm 0;line-height:1.45;text-align:left}.uraian-list .uraian-no{font-weight:700;text-align:left}.uraian-list .uraian-text{min-width:0;overflow-wrap:anywhere;word-break:break-word}.sign{width:220px;margin-left:auto;text-align:center;margin-top:25px;font-size:12px}.sign img{width:150px;height:100px;object-fit:contain;display:block;margin:2px auto -2px}.sign .name{font-weight:700;text-decoration:underline} .surat-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.surat-next{min-width:150px}
.surat-next-info{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#71809b;font-weight:700}
.surat-next-info b{color:#3159d9}
.surat-note{font-size:12px;color:#71809b;line-height:1.5;margin-top:9px}@media(max-width:900px){.surat-grid{grid-template-columns:1fr}.paper{transform-origin:top left;margin:0;width:794px}}

/* Surat Perintah: A4 fisik, satu halaman, dengan tanda tangan terkunci di kanan bawah. */
.paper{position:relative;width:210mm;height:297mm;min-height:297mm;margin:auto;background:#fff;box-shadow:0 8px 28px #17203318;padding:8mm 15mm 48mm;font-family:Arial,Helvetica,sans-serif;color:#000;overflow:hidden;box-sizing:border-box;break-inside:avoid;page-break-inside:avoid}
.kop{min-height:27mm;padding:0 22mm 2.5mm;text-align:center;border-bottom:3px double #000;box-sizing:border-box;width:100%;max-width:100%}
.kop img{left:0;top:1mm;width:18mm;height:18mm}
.kop .prov{font-size:13.5pt;font-weight:700;line-height:1.15;word-break:break-word;overflow-wrap:break-word}.kop .school{font-size:14pt;font-weight:700;line-height:1.2;margin-top:2px;word-break:break-word;overflow-wrap:break-word;max-width:100%}.kop .addr,.kop .mail{font-size:8.5pt;line-height:1.35;word-break:break-word;overflow-wrap:break-word}
.sign{position:absolute;right:15mm;bottom:10mm;width:62mm;margin:0;text-align:center;font-size:12px;z-index:5}
.sign img{width:48mm;height:27mm;object-fit:contain;display:block;margin:2px auto -2px}
@media screen and (max-width:900px){.paper{margin:0;width:210mm;height:297mm;min-height:297mm;transform-origin:top left}}
@media print{
  html,body{width:210mm!important;min-width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body.printing-surat .app,body.printing-surat .card{margin:0!important;padding:0!important;background:#fff!important;box-shadow:none!important;border:0!important}
  body.printing-surat #suratPreview{position:fixed!important;left:0!important;top:0!important;width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;border:0!important}
  body.printing-surat .paper{position:relative!important;left:0!important;top:0!important;width:210mm!important;height:297mm!important;min-height:297mm!important;margin:0!important;padding:8mm 15mm 48mm!important;box-shadow:none!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important}
  body.printing-surat .sign{position:absolute!important;right:15mm!important;bottom:10mm!important}
  @page{size:A4 portrait;margin:0!important}
}

/* ================================================================
   SURAT PERINTAH — FORMAT FISIK A4 FINAL
   Semua ukuran berikut memakai pt/mm agar hasil browser print = A4.
   ================================================================ */
.paper{
  position:relative;
  width:210mm!important;
  height:297mm!important;
  min-height:297mm!important;
  margin:0 auto;
  padding:11mm 15mm 36mm;
  box-sizing:border-box;
  background:#fff;
  color:#000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12pt;
  line-height:1.35;
  overflow:visible;
  box-shadow:0 8px 28px #17203318;
}
.kop{
  position:relative;
  min-height:27mm;
  padding:0 22mm 2.5mm;
  text-align:center;
  border-bottom:3px double #000;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
}
.kop img{position:absolute;left:0;top:1mm;width:18mm;height:18mm;object-fit:contain}
.kop .prov{font-size:13.5pt;line-height:1.15;font-weight:700;word-break:break-word;overflow-wrap:break-word}
.kop .school{font-size:14pt;line-height:1.2;font-weight:700;margin-top:1mm;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.kop .kab{font-size:12pt;line-height:1.15;font-weight:700;margin-top:.5mm}
.kop .addr,.kop .mail{font-size:8.5pt!important;line-height:1.3;font-weight:400;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.kop .addr{margin-top:1.5mm}.kop .mail{margin-top:.5mm}
.paper h2{text-align:center;font-size:12pt;line-height:1.2;margin:6mm 0 1.5mm;text-decoration:underline;font-weight:700}
.paper .nomor{text-align:center;font-size:12pt;line-height:1.2;margin-bottom:6mm}
.paper p{font-size:12pt;line-height:1.4;margin:3mm 0}
.identity{margin:4mm 0 3mm}
.identity .line{display:grid;grid-template-columns:36mm 5mm 1fr;margin:1.8mm 0;font-size:12pt;line-height:1.3}
.payment{margin-top:4mm}.payment .row{display:grid;grid-template-columns:48mm 5mm 1fr;margin:2.2mm 0;font-size:12pt;line-height:1.3}
.payment .amount{font-weight:700}.payment .terbilang{text-transform:capitalize;font-style:italic}
.sign{width:62mm;margin:14mm 0 0 auto;text-align:center;font-size:12pt;line-height:1.25}
.sign img{width:48mm;height:27mm;object-fit:contain;display:block;margin:1mm auto -1mm}
.sign .name{font-weight:700;text-decoration:underline}
@media screen and (max-width:900px){.paper{margin:0;width:210mm!important;height:297mm!important;min-height:297mm!important;transform-origin:top left}}
@media print{
  html,body{width:210mm!important;height:297mm!important;min-width:210mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body.printing-surat .app{width:210mm!important;margin:0!important;padding:0!important;background:#fff!important}
  body.printing-surat .app>section:not(:has(#suratPreview)),body.printing-surat .app>.footer{display:none!important}
  body.printing-surat #suratPreview{display:block!important;position:absolute!important;left:0!important;top:0!important;width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important;border:0!important}
  body.printing-surat #suratPreview .paper{display:block!important;width:210mm!important;height:auto!important;min-height:297mm!important;margin:0!important;padding:11mm 15mm 22mm!important;box-shadow:none!important;overflow:visible!important;page-break-after:auto!important;break-after:auto!important;page-break-inside:auto!important;break-inside:auto!important}
  body.printing-surat #suratPreview .page-footer{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:5mm!important;text-align:center!important;font-size:9pt!important;font-style:italic!important}
  body.printing-surat #suratPreview .page-footer:after{content:"Halaman " counter(page)}
  @page{size:A4 portrait;margin:0}
}

.kop .school{text-transform:uppercase}
.kop .addr,.kop .mail{font-size:9pt!important;font-style:italic!important}.kop .addr,.kop .mail{font-weight:400}
.sign{position:static!important;width:62mm;margin:14mm 0 0 auto!important;text-align:center}
.page-footer{display:none}
@media print{
  body.printing-surat #suratPreview .sign{position:static!important;width:62mm!important;margin:14mm 0 0 auto!important}
}

.mr-loading-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(238,244,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mr-loading-overlay.show{display:flex;animation:mrFadeIn .18s ease-out}
.mr-loading-card{width:min(420px,92vw);background:#ffffff;border:1px solid #e4ebfb;border-radius:24px;padding:30px 28px 26px;text-align:center;box-shadow:0 30px 70px rgba(36,86,178,.2)}
.mr-loading-avatar{position:relative;width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffffff,#eef4ff);border:1px solid #dde6fa;box-shadow:0 14px 30px rgba(49,89,217,.14)}
.mr-spinner{width:42px;height:42px;border-radius:50%;border:4px solid #e3ebfb;border-top-color:#2563eb;border-right-color:#42a5f5;animation:mrSpin .85s linear infinite}
.mr-check{width:46px;height:46px;animation:mrPop .4s ease both}
.mr-check path{fill:none;stroke:#16a36a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:46;stroke-dashoffset:46;animation:mrDraw .45s .08s ease forwards}
.mr-x{width:46px;height:46px;animation:mrPop .4s ease both}
.mr-x path{fill:none;stroke:#e5484d;stroke-width:5;stroke-linecap:round;stroke-dasharray:38;stroke-dashoffset:38;animation:mrDraw .4s ease forwards}
.mr-loading-title{font-size:13px;font-weight:900;letter-spacing:2px;color:#2563eb}
.mr-loading-text{margin-top:9px;font-size:15.5px;font-weight:800;color:#0f1f3d}
.mr-loading-detail{margin-top:7px;font-size:12px;color:#6b7a9c;line-height:1.5;min-height:34px}
.mr-loading-bar{height:8px;margin-top:18px;border-radius:999px;background:#eaf0fb;overflow:hidden;border:1px solid #dde6f6}
.mr-loading-bar span{display:block;height:100%;width:5%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#42a5f5);transition:width .22s ease}
.mr-loading-overlay.success .mr-loading-avatar{background:linear-gradient(145deg,#ffffff,#eafaf1);border-color:#c7ecd6}
.mr-loading-overlay.success .mr-loading-title{color:#0e8a52}
.mr-loading-overlay.success .mr-loading-text{color:#0e8a52}
.mr-loading-overlay.error .mr-loading-avatar{background:linear-gradient(145deg,#ffffff,#fff1f0);border-color:#ffd2cf}
.mr-loading-overlay.error .mr-loading-title{color:#c1353a}
.mr-loading-overlay.error .mr-loading-text{color:#c1353a}
@keyframes mrSpin{to{transform:rotate(360deg)}}
@keyframes mrPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mrDraw{to{stroke-dashoffset:0}}
@keyframes mrFadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.mr-spinner,.mr-check,.mr-x{animation:none!important}.mr-loading-bar span{transition:none}}

.auto-status{margin:0 0 14px;padding:11px 13px;border:1px solid #dce4f1;border-radius:12px;background:#f7f9fd;color:#66738b;font-size:12px;font-weight:700}.auto-status-ok{background:#eaf8f0;border-color:#c9edd6;color:#13784a}.auto-status-warn{background:#fff7e7;border-color:#f2dda6;color:#8a5a00}.auto-tag{display:inline-flex;align-items:center;margin-left:6px;padding:2px 6px;border-radius:999px;background:#eaf0ff;color:#3659b8;font-size:9px;letter-spacing:.5px;font-weight:900}.field input[readonly]{background:#f1f5fb;color:#203252;border-color:#d7e0ef;font-weight:700;cursor:default}

/* ==========================================================
   SURAT DINAMIS: setiap halaman adalah A4 mandiri.
   Konten dipaginasi berdasarkan tinggi DOM aktual, bukan
   perkiraan jumlah baris.
   ========================================================== */
.surat-pages{display:flex;flex-direction:column;gap:20px;align-items:center}
.surat-page{
  position:relative;
  width:210mm!important;
  height:297mm!important;
  min-height:297mm!important;
  box-sizing:border-box;
  margin:0;
  padding:11mm 15mm 17mm;
  background:#fff;
  color:#000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12pt;
  line-height:1.35;
  box-shadow:0 8px 28px #17203318;
  overflow:hidden;
}
.surat-page-content{
  height:269mm;
  overflow:hidden;
}
.surat-page-footer{
  position:absolute;left:15mm;right:15mm;bottom:4mm;min-height:9mm;
  display:grid;grid-template-columns:minmax(34mm,1fr) minmax(55mm,1.6fr) minmax(28mm,auto);
  align-items:center;gap:3mm;border-top:1px solid #aaa;padding:1.5mm 0 0;
  box-sizing:border-box;font-size:7.5pt;font-style:italic;line-height:1.2;z-index:20;background:#fff;
}
.surat-page-footer .sf-bku{justify-self:start;white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.surat-page-footer .sf-category{justify-self:center;text-align:center;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.surat-page-footer .sf-page{justify-self:end;white-space:nowrap}
.surat-page .page-block{break-inside:avoid;page-break-inside:avoid}
.surat-page .uraian-table-block{break-inside:auto;page-break-inside:auto}
.surat-page .surat-uraian-table{break-inside:auto;page-break-inside:auto}
.surat-page .kop{position:relative;min-height:27mm;padding:0 22mm 3mm;text-align:center;border-bottom:3px double #000;box-sizing:border-box;width:100%;max-width:100%}
.surat-page .kop img{position:absolute;left:0;top:1mm;width:18mm;height:18mm;object-fit:contain}
.surat-page .kop .prov{font-size:13.5pt;font-weight:700;line-height:1.15;word-break:break-word;overflow-wrap:break-word}
.surat-page .kop .school{font-size:14pt;font-weight:700;line-height:1.2;margin-top:2px;text-transform:uppercase;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.surat-page .kop .kab{font-size:12pt;font-weight:700;line-height:1.15}
.surat-page .kop .addr,.surat-page .kop .mail{font-size:8.5pt;line-height:1.35;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.surat-page h2{text-align:center;font-size:15pt;line-height:1.2;margin:7mm 0 1.5mm;text-decoration:underline}
.surat-page .nomor{text-align:center;font-size:11pt;line-height:1.2;margin-bottom:8mm}
.surat-page p{font-size:11pt;line-height:1.45;margin:4mm 0}
.surat-page .identity{margin:4mm 0 3mm}
.surat-page .identity .line{display:grid;grid-template-columns:42mm 5mm minmax(0,1fr);margin:2.5mm 0;font-size:11pt;line-height:1.35}
.surat-page .identity .line>span:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.surat-page .payment{margin-top:4mm}
.surat-page .payment .row{display:grid;grid-template-columns:42mm 5mm minmax(0,1fr);margin:3mm 0;font-size:11pt;line-height:1.4;align-items:start}
.surat-page .payment .row>span:last-child,.surat-page .payment .row>div:last-child{min-width:0;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.surat-page .payment .long-text{text-align:justify}
.surat-page .payment .amount{font-weight:700}
.surat-page .payment .terbilang{text-transform:capitalize;font-style:italic}
.surat-page .uraian-list{margin:0;padding:0;list-style:none}
.surat-page .uraian-item{display:grid;grid-template-columns:7mm minmax(0,1fr);column-gap:2mm;margin:1.1mm 0;line-height:1.4;text-align:left}
.surat-page .uraian-no{font-weight:700;text-align:left}
.surat-page .uraian-text{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.surat-page .sign{width:62mm;margin:14mm 0 0 auto;text-align:center;font-size:11pt;line-height:1.25}
.surat-page .sign img{width:48mm;height:27mm;object-fit:contain;display:block;margin:1mm auto -1mm}
.surat-page .sign .name{font-weight:700;text-decoration:underline}
.surat-page .continued-note{font-size:10pt;font-style:italic;margin:0 0 3mm;color:#333}
/* Tata letak pembayaran: semua label, tanda titik dua, dan nilai berada pada kolom yang konsisten. */
.surat-page .payment{margin:0}
.surat-page .payment-heading{margin:5mm 0 2.5mm!important}
.surat-page .payment .row{display:grid;grid-template-columns:52mm 5mm minmax(0,1fr);column-gap:1.5mm;align-items:start;margin:2.6mm 0;font-size:11pt;line-height:1.4}
.surat-page .payment .row>b,.surat-page .payment .row>.colon{white-space:nowrap}
.surat-page .payment .row>.colon{text-align:center}
.surat-page .payment .row>span:last-child,.surat-page .payment .row>div:last-child{min-width:0}
.surat-page .manual-text,.surat-page .payment .row>span:last-child{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.surat-page .amount{white-space:nowrap}
.surat-page .uraian-heading-block{margin-top:1mm}
.surat-page .uraian-label-row{margin-bottom:1mm!important}
.surat-page .uraian-item-wrap{margin-left:58.5mm}
.surat-page .uraian-item{display:grid;grid-template-columns:7mm minmax(0,1fr);column-gap:2mm;margin:1.4mm 0;line-height:1.45;text-align:left}
.surat-page .uraian-no{font-weight:700;text-align:left}
.surat-page .uraian-text{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.surat-page .sign-block{margin-top:2mm}
@media(max-width:900px){
  .surat-page{transform-origin:top left}
}
@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  body.printing-surat .surat-preview{padding:0!important;background:#fff!important;border:0!important;overflow:visible!important}
  body.printing-surat .surat-pages{display:block!important}
  body.printing-surat .surat-page{
    width:210mm!important;height:297mm!important;min-height:297mm!important;
    margin:0!important;padding:11mm 15mm 17mm!important;
    box-shadow:none!important;overflow:hidden!important;
    break-after:page!important;page-break-after:always!important;
  }
  body.printing-surat .surat-page:last-child{break-after:auto!important;page-break-after:auto!important}
  @page{size:A4 portrait;margin:0!important}
}

.version-badge-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:13px}.version-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#eef2ff;color:#314cba;border:1px solid #d8e0ff;font-size:10px;font-weight:900;letter-spacing:.5px}.raw-total-row{display:flex;justify-content:flex-end;gap:16px;align-items:center;padding:13px 4px 0;font-size:13px;color:#65728b}.raw-total-row b{font-size:16px;color:#1b2a4b}.raw-table{min-width:980px}.tax-table{min-width:1050px}.tax-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.tax-siplah{border-color:#d8e4ff;background:linear-gradient(145deg,#fff,#f4f7ff)}.tax-nonsiplah{border-color:#d8efdf;background:linear-gradient(145deg,#fff,#f4fbf6)}.tax-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f7f9fd;border:1px solid #e4e9f2;color:#66738b;font-size:12px;line-height:1.55}.tax-type{display:inline-flex;padding:4px 8px;border-radius:999px;background:#f0f3fb;color:#43516e;font-size:10px;font-weight:900}.surat-uraian-table-wrap{margin:1mm 0 0;width:100%;max-width:100%}.surat-uraian-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:9.5pt}.surat-uraian-table th,.surat-uraian-table td{border:1px solid #000;padding:1.4mm 1.6mm;vertical-align:top;line-height:1.28}.surat-uraian-table th{font-weight:700;text-align:center;font-size:8pt;line-height:1.25;padding:1.2mm 0.9mm;overflow-wrap:break-word;word-break:break-word}.surat-uraian-table th:nth-child(1),.surat-uraian-table td:nth-child(1){width:9mm;text-align:center}.surat-uraian-table td:nth-child(2){text-align:left;overflow-wrap:anywhere;word-break:break-word}.surat-uraian-table .uraian-nama{display:block;font-weight:600}.surat-uraian-table .uraian-spesifikasi{display:block;font-size:8pt;font-weight:400;line-height:1.25;margin-top:0.3mm}.surat-uraian-table th:nth-child(3),.surat-uraian-table td:nth-child(3){width:26mm;text-align:center}.surat-uraian-table .cell-banyaknya{font-size:9pt;overflow-wrap:anywhere;word-break:break-word}.surat-uraian-table th:nth-child(4),.surat-uraian-table td:nth-child(4){width:25mm;text-align:right;white-space:nowrap}.surat-uraian-table th:nth-child(5),.surat-uraian-table td:nth-child(5){width:28mm;text-align:right;white-space:nowrap}.surat-uraian-table tfoot td{font-weight:700}.surat-uraian-table tfoot td:last-child{text-align:right}.surat-uraian-empty{font-style:italic}.tax-print-note{font-size:10px}
@media(max-width:1050px){.tax-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.tax-summary-grid{grid-template-columns:1fr}}

.logo-kabupaten-status{display:flex;align-items:center;gap:10px;min-height:44px;border:1px solid #dce4f1;background:#f8faff;border-radius:14px;padding:8px 10px;color:#43516e}
.logo-kabupaten-status img{width:42px;height:42px;object-fit:contain;flex:none}
/* Dua logo kop harus mempunyai posisi yang saling terpisah. Selector dibuat lebih spesifik
   agar mengalahkan aturan .surat-page .kop img yang menetapkan left:0. */
.surat-page .kop .kop-logo{position:absolute;top:1mm;width:18mm;height:18mm;object-fit:contain;display:block}
.surat-page .kop .kop-logo-kabupaten{left:0!important;right:auto!important}
.surat-page .kop .kop-logo-sekolah{right:0!important;left:auto!important}
.surat-page .kop{padding-left:22mm;padding-right:22mm;box-sizing:border-box;width:100%;max-width:100%}
@media(max-width:900px){.logo-kabupaten-status{min-height:52px}}

.surat-bku-box{position:absolute;top:4mm;right:7mm;width:22mm;min-width:22mm;height:6mm;padding:0 2mm;box-sizing:border-box;border:1.25px solid #000;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-size:9pt;font-weight:700;color:#000;background:#fff;z-index:10}

/* ==========================================================
   TAB 2 — SURAT PERINTAH: tampilan dua kolom (info | pratinjau)
   ========================================================== */
#tabSurat{--sv-blue:#1e9bd7;--sv-blue-soft:#e8f5fc;--sv-ink:#111827;--sv-mute:#6b7280;--sv-line:#e6ebf2}
#tabSurat .sv-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:22px;align-items:start}
#tabSurat .sv-left,#tabSurat .sv-right{align-self:start;margin-top:0}
#tabSurat .sv-left{display:flex;flex-direction:column;gap:18px;min-width:0}
#tabSurat .sv-right{min-width:0;position:sticky;top:78px}
#tabSurat .sv-card{background:#fff;border:1px solid var(--sv-line);border-radius:16px;padding:22px;box-shadow:0 4px 18px rgba(30,41,59,.05);margin:0}
#tabSurat .sv-card-title{margin:0 0 16px;font-size:12.5px;font-weight:500;color:var(--sv-blue);letter-spacing:.1px}
#tabSurat .sv-fields{display:flex;flex-direction:column;gap:15px}

/* field: label kecil abu-abu, nilai tebal seperti "Informasi Dokumen" */
#tabSurat .field{gap:3px}
#tabSurat .field label{font-size:11.5px;font-weight:500;color:var(--sv-mute);text-transform:none;letter-spacing:0}
#tabSurat .field input,#tabSurat .field select,#tabSurat .field textarea{
  border:0;border-bottom:1px dashed #d3dae6;border-radius:0;background:transparent;padding:3px 0;
  font-size:12.5px;font-weight:700;color:var(--sv-ink);outline:none;box-shadow:none;transition:border-color .15s,background .15s}
#tabSurat .field input:hover:not([readonly]),#tabSurat .field select:hover:not(:disabled),#tabSurat .field textarea:hover:not([readonly]){border-bottom-color:#9fb3c8}
#tabSurat .field input:focus:not([readonly]),#tabSurat .field select:focus,#tabSurat .field textarea:focus:not([readonly]){border-bottom-color:var(--sv-blue);box-shadow:none}
#tabSurat .field input[readonly],#tabSurat .field textarea[readonly]{border-bottom-color:transparent;background:transparent;color:var(--sv-ink);cursor:default}
#tabSurat .field select{cursor:pointer;padding-right:4px}
#tabSurat .field select:disabled{cursor:not-allowed;color:#9aa5b5}
#tabSurat .field textarea{min-height:56px;padding:8px 10px;border:1px solid var(--sv-line);border-radius:10px;background:#f8fafc;font-weight:600;line-height:1.45}
#tabSurat .field textarea[readonly]{background:#f8fafc;border-color:var(--sv-line);color:#374151}
#tabSurat .field textarea:focus:not([readonly]){border-color:var(--sv-blue);background:#fff}

/* Riwayat isian "Harap Dibayar Kepada" & "Untuk Pembayaran" kini benar-benar
   tampil sebagai dropdown kustom. Sebelumnya keempat baris di bawah memaksa
   SEMUA kotak saran disembunyikan (!important), sehingga riwayat yang sudah
   terkumpul tidak pernah bisa dipakai. Aturan tampilannya ada di bagian
   "Riwayat isian ..." (lihat .ss-wrap / .ss-toggle / .surat-suggestion-box). */
#tabSurat .field input[type=file]{font-weight:500;font-size:11.5px;border:1px dashed #cfd8e6;border-radius:10px;padding:8px;background:#f8fafc;color:var(--sv-mute)}
#tabSurat .field .small{font-size:11px;color:#8b95a7;line-height:1.5;margin-top:2px;font-weight:400}
#tabSurat .auto-tag,#tabSurat .manual-tag{margin-left:5px;padding:1px 6px;font-size:8px;vertical-align:1px}
#tabSurat .auto-tag{background:var(--sv-blue-soft);color:#187aa8}
#tabSurat .logo-kabupaten-status{border:1px solid var(--sv-line);border-radius:10px;background:#f8fafc;padding:8px 10px;font-size:12px}
#tabSurat .logo-kabupaten-status img{width:34px;height:34px}

/* status hijau seperti "Sudah TTD Kepala Sekolah" */
#tabSurat .auto-status{display:inline-block;margin:0;padding:3px 10px;border-radius:999px;background:#eef1f5;border:0;color:#5b6678;font-size:10.5px;font-weight:600;line-height:1.5}
#tabSurat .auto-status-ok{background:#3b8f3b;color:#fff}
#tabSurat .auto-status-warn{background:#fff3d6;color:#8a5a00}
#tabSurat .surat-next-info{margin-top:10px;font-size:11.5px;font-weight:400;color:var(--sv-mute);line-height:1.6;flex-wrap:wrap}
#tabSurat .surat-next-info b{color:var(--sv-ink)}
#tabSurat .surat-note{font-size:11px;color:#8b95a7;line-height:1.55;margin-top:14px}

/* kartu pratinjau */
#tabSurat .sv-viewer-card{padding:22px 22px 24px}
#tabSurat .sv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#tabSurat .sv-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0}
#tabSurat .sv-pill{appearance:none;border:1px solid var(--sv-blue);background:#fff;color:var(--sv-blue);border-radius:999px;padding:5px 15px;font:inherit;font-size:11.5px;font-weight:600;line-height:1.4;cursor:pointer;min-width:0;transition:background .15s,color .15s,opacity .15s,transform .12s}
#tabSurat .sv-pill:hover:not(:disabled){background:var(--sv-blue-soft)}
#tabSurat .sv-pill:active:not(:disabled){transform:scale(.96)}
#tabSurat .sv-pill-active,#tabSurat .sv-pill-active:hover:not(:disabled){background:var(--sv-blue);color:#fff}
#tabSurat .sv-pill:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
#tabSurat .sv-pill-sm{padding:4px 13px;font-size:11px;border-color:#a9d9f0}
#tabSurat .sv-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#tabSurat .sv-nav,#tabSurat .sv-zoom{display:flex;align-items:center;gap:8px}
#tabSurat .sv-info{font-size:11px;color:#374151}
#tabSurat .sv-info b{font-weight:700;color:var(--sv-ink)}
#tabSurat .sv-round{appearance:none;width:24px;height:24px;border-radius:50%;border:1px solid #a9d9f0;background:#fff;color:var(--sv-blue);font-size:14px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
#tabSurat .sv-round:hover:not(:disabled){background:var(--sv-blue-soft)}
#tabSurat .sv-round:disabled{opacity:.42;cursor:not-allowed}

/* area abu-abu tempat kertas putih ditampilkan */
#tabSurat .sv-stage{position:relative;background:#e9ecef;border-radius:10px;height:clamp(460px,calc(100vh - 250px),1000px);overflow:auto;overscroll-behavior:contain}
#tabSurat .sv-stage::-webkit-scrollbar{width:9px;height:9px}
#tabSurat .sv-stage::-webkit-scrollbar-thumb{background:#c3cad5;border-radius:999px}
#tabSurat .sv-stage #suratPreview{margin:0;border:0;border-radius:0;background:transparent;padding:24px;overflow:visible;width:max-content;min-width:100%;box-sizing:border-box}
#tabSurat .sv-stage .surat-pages{margin:0 auto;width:max-content}
#tabSurat .sv-stage .surat-page{zoom:var(--sv-zoom,1);box-shadow:0 2px 12px rgba(15,23,42,.18)}
#tabSurat .sv-stage .surat-page.sv-hidden{display:none!important}
#tabSurat .sv-empty{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:30px;color:#7c8797;font-size:12.5px;line-height:1.6}
#tabSurat #suratPreview[style*="none"]~.sv-empty{display:flex}

@media(max-width:1100px){#tabSurat .sv-layout{grid-template-columns:1fr}#tabSurat .sv-right{position:static;order:-1}#tabSurat .sv-stage{height:min(70vh,760px)}}
@media(max-width:650px){#tabSurat .sv-card{padding:16px;border-radius:14px}#tabSurat .sv-stage #suratPreview{padding:12px}}

/* Small layout refinements moved out of index.html */
.hint-top{margin-top:12px}.summary-toolbar{margin-bottom:13px}.table-top{margin-top:14px}.raw-table-top{margin-top:14px}


#tabSurat .surat-draft-savebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding:12px 13px;border:1px solid #dce8f2;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f6faff)}
#tabSurat .surat-draft-savebar>div{min-width:0}
#tabSurat .surat-draft-savebar b{display:block;font-size:11.5px;color:#29405f}
#tabSurat .surat-draft-save-status{margin-top:4px;font-size:10.5px;line-height:1.45;color:#8a96a8}
#tabSurat .surat-draft-save-status.ok{color:#08784a;font-weight:700}
#tabSurat .surat-draft-save-status.error{color:#a42d2d;font-weight:700}
#tabSurat .surat-save-data-btn{flex:0 0 auto;background:linear-gradient(135deg,#0f7a5b,#158f6b);color:#fff;border-color:#0f7a5b;padding:9px 13px;font-size:11.5px;font-weight:800}
@media(max-width:650px){#tabSurat .surat-draft-savebar{align-items:stretch;flex-direction:column}#tabSurat .surat-save-data-btn{width:100%}}

/* ==========================================================
   PEKERJAAN BKU — SIMPAN / BUKA LOKAL
   ========================================================== */
.project-save-btn{background:linear-gradient(135deg,#0f7a5b,#158f6b);color:#fff;box-shadow:0 7px 18px #0f7a5b22}
.project-open-trigger{background:#eef3ff;color:#294ca4;border-color:#d6e1ff}
.project-save-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:#70809b}
.project-save-row>span:first-child{font-weight:800;color:#364766}
.project-save-status{padding:5px 9px;border-radius:999px;background:#f1f4f9;color:#75839a;font-weight:700}
.project-save-status.ok{background:#e8f8ef;color:#08784a}
.project-save-status.dirty{background:#fff7e5;color:#8b5a00}
.project-save-status.error{background:#fff0ef;color:#a42d2d}
.project-save-status.warn{background:#fff7e5;color:#8b5a00}
.project-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(9,18,42,.58);backdrop-filter:blur(7px)}
.project-modal.show{display:flex;animation:projectFadeIn .16s ease-out}
.project-modal-card{width:min(760px,96vw);max-height:min(760px,92vh);overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #d9e3f4;border-radius:22px;box-shadow:0 28px 80px rgba(16,29,67,.28)}
.project-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 16px;border-bottom:1px solid #e7edf7;background:linear-gradient(180deg,#fbfcff,#f6f8fd)}
.project-modal-title{font-size:19px;font-weight:900;color:#223253}
.project-modal-subtitle{margin-top:5px;font-size:12px;line-height:1.5;color:#7987a0}
.project-modal-close{width:36px;height:36px;border:1px solid #dce4f1;border-radius:11px;background:#fff;color:#5f6d87;font-size:25px;line-height:1;cursor:pointer}
.project-save-box{padding:16px 22px;border-bottom:1px solid #e8edf5;background:#fbfcff}
.project-save-box label{display:block;font-size:12px;font-weight:850;color:#3a4968;margin-bottom:7px}
.project-save-input-row{display:flex;gap:9px;align-items:center}
.project-name-input{flex:1;min-width:0;border:1px solid #d8e1ef;background:#fff;border-radius:12px;padding:12px 13px;font-size:14px;color:#203252;outline:none}
.project-name-input:focus{border-color:#7891ed;box-shadow:0 0 0 3px #718cf022}
.project-list{padding:14px 18px;overflow:auto;min-height:120px}
.project-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 12px;border:1px solid #e3e9f3;border-radius:15px;background:#fff;margin-bottom:9px}
.project-item.active{border-color:#aac0ff;background:#f7f9ff;box-shadow:0 4px 16px rgba(49,89,217,.06)}
.project-main{min-width:0;display:flex;flex-direction:column;gap:4px}
.project-main b{font-size:13px;color:#293a5c;overflow-wrap:anywhere}
.project-main span{font-size:11px;color:#8692a8;line-height:1.45;overflow-wrap:anywhere}
.project-actions{display:flex;gap:7px;flex:0 0 auto}
.project-open-btn{background:#edf3ff;color:#294ca4;border-color:#d8e3ff;padding:9px 12px;font-size:12px}
.project-delete-btn{background:#fff0ef;color:#a42d2d;border-color:#ffd0cc;padding:9px 12px;font-size:12px}
.project-download-btn{background:#eef9f3;color:#16734d;border-color:#cfe9dc;padding:9px 12px;font-size:12px}
.project-empty{padding:36px 18px;text-align:center;border:1px dashed #d9e2ef;border-radius:15px;color:#8591a7;background:#fafcff;font-size:13px}
.project-empty.error{color:#a42d2d;background:#fff5f4;border-color:#ffd0cc}
.project-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-top:1px solid #e8edf5;background:#fbfcff}
.project-backup-all-status{margin-top:4px;font-size:10.5px;color:#71809a;line-height:1.4}
.project-backup-all-btn{background:linear-gradient(135deg,#294ca4,#3c63c8);color:#fff;border-color:#294ca4;box-shadow:0 6px 16px rgba(41,76,164,.16);font-weight:800}
.controls .project-backup-all-btn{box-shadow:none}
.project-backup-all-btn:disabled{opacity:.65;cursor:wait}
.project-foot-actions{justify-content:flex-end}
@keyframes projectFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.project-save-input-row{flex-direction:column;align-items:stretch}.project-save-input-row .btn{width:100%}.project-item{align-items:stretch;flex-direction:column}.project-actions{width:100%}.project-actions .btn{flex:1}.project-modal-foot{align-items:stretch;flex-direction:column}.project-foot-actions{width:100%;align-items:stretch}.project-foot-actions .btn{flex:1}.project-modal-foot .btn{min-width:0}}


/* ==========================================================
   CETAK / PDF MASSAL
   ========================================================== */
.surat-actions{flex-wrap:wrap}
.sv-pill-batch{font-weight:800}
.batch-print-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(13,24,44,.55);backdrop-filter:blur(4px)}
.batch-print-card{width:min(980px,96vw);max-height:90vh;display:flex;flex-direction:column;background:#fff;border:1px solid #dbe3ef;border-radius:18px;box-shadow:0 24px 70px rgba(18,35,63,.22);overflow:hidden}
.batch-print-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #edf1f6}
.batch-print-title{font-size:18px;font-weight:900;color:#15243d}.batch-print-subtitle{margin-top:4px;color:#6a7790;font-size:12px;line-height:1.45}
.batch-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 20px 8px}.batch-filter.active{font-weight:900;border-color:#6a86c7;background:#edf3ff;color:#284a98}.batch-count{margin-left:auto;font-weight:900;color:#35435a}
.batch-print-hint{margin:0 20px 10px;padding:9px 11px;border-radius:10px;background:#f6f8fc;border:1px solid #e4e9f2;color:#66738b;font-size:12px}
.batch-print-list{padding:0 20px 12px;overflow:auto;display:grid;gap:8px}
.batch-item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e1e7f0;border-radius:12px;background:#fff;cursor:pointer}.batch-item.ready{border-color:#cbe8d6;background:#fbfffc}.batch-item.not-ready{background:#fffafa}.batch-item input{width:18px;height:18px}.batch-main{min-width:0;display:flex;flex-direction:column;gap:3px}.batch-main b{font-size:13px;color:#17253f}.batch-main span{font-size:11px;color:#6d7a91;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-status{font-size:11px;font-weight:900;white-space:nowrap}.batch-item.ready .batch-status{color:#13804b}.batch-item.not-ready .batch-status{color:#b34747}.batch-empty{padding:30px;text-align:center;color:#748199;border:1px dashed #ccd5e4;border-radius:12px}
.batch-print-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid #edf1f6;background:#fafbfd}.batch-foot-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.batch-print-card{width:100%;max-height:94vh}.batch-print-foot{flex-direction:column;align-items:stretch}.batch-foot-actions{justify-content:stretch}.batch-foot-actions .btn{flex:1}.batch-count{margin-left:0}.batch-item{grid-template-columns:24px minmax(0,1fr)}.batch-status{grid-column:2}}

/* ===== KWITANSI ===== */
.surat-page.kwitansi-page{font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;font-size:11pt;line-height:1.35;padding:18mm 20mm 17mm}
.kwitansi-page .kwitansi-content{height:262mm;overflow:hidden}.kwitansi-page .kw-title{text-align:center;font-size:17pt;font-weight:700;font-style:italic;letter-spacing:.12em;margin:0 0 9mm}
.kwitansi-page .kw-row{display:grid;grid-template-columns:44mm 5mm minmax(0,1fr);align-items:start;margin:0 0 2.6mm;font-size:11pt;line-height:1.4}
.kwitansi-page .kw-row .kw-c{text-align:left}
.kwitansi-page .kw-row .kw-v{min-width:0;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
.kwitansi-page .kw-row .kw-v.kw-bold{font-weight:700}
.kwitansi-page .kw-row .kw-v.kw-italic{font-style:italic}
.kwitansi-page .kw-row.kw-cont{margin-top:-1mm}
.kwitansi-page .kw-box{display:inline-block;box-sizing:border-box;min-width:82mm;margin:9mm 0 0 3mm;padding:4.5mm 5mm;border:1px solid #000;border-right-width:2px;border-bottom-width:2px;font-style:italic;font-weight:700;font-size:12pt;white-space:nowrap}
.kwitansi-page .kw-box .kw-box-sep{display:inline-block;margin-left:10mm}
.kwitansi-page .kw-sign{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:6mm;margin-top:12mm;text-align:center;font-size:11pt;line-height:1.3}
.kwitansi-page .kw-sign .kw-space{height:24mm;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kwitansi-page .kw-sign .kw-space img{max-width:100%;max-height:24mm;object-fit:contain;display:block}
.kwitansi-page .kw-sign .kw-name{font-weight:700;text-decoration:underline;min-height:1.3em;overflow-wrap:anywhere}
.kwitansi-page .kw-sign .kw-nip{font-size:10pt;min-height:1.3em}

.batch-doc-row{align-items:center;gap:14px}.batch-doc-row label{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;cursor:pointer}


/* ===== Sidebar + Dashboard additions ===== */
.workspace-shell{display:flex;gap:18px;align-items:stretch;margin-top:18px;min-width:0}
.app-sidebar{width:245px;flex:0 0 245px;background:rgba(255,255,255,.94);border:1px solid #e3e9f4;border-radius:22px;box-shadow:0 12px 36px rgba(35,53,94,.07);padding:16px;display:flex;flex-direction:column;transition:width .25s,flex-basis .25s,padding .25s,opacity .25s;overflow:hidden;position:sticky;top:18px;height:calc(100vh - 36px);max-height:900px}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.sidebar-brand{font-weight:900;letter-spacing:1.5px;color:#243b80}.sidebar-toggle{border:1px solid #e1e7f2;background:#f5f7fc;color:#52617d;border-radius:10px;width:38px;height:38px;cursor:pointer;font-size:18px}.sidebar-label{font-size:10px;font-weight:900;letter-spacing:1.7px;color:#9aa6bb;margin:0 8px 9px}.sidebar-nav{display:flex;flex-direction:column;gap:7px}.side-btn{width:100%;border:1px solid transparent;background:transparent;color:#53617b;padding:12px 11px;border-radius:13px;display:flex;align-items:center;gap:11px;text-align:left;font-weight:800;cursor:pointer;transition:.18s}.side-btn:hover:not(:disabled){background:#f2f5fc;color:#243b80}.side-btn.active{background:linear-gradient(135deg,#3159d9,#5946d8);color:#fff;box-shadow:0 8px 20px #3854c733}.side-btn:disabled{opacity:.45;cursor:not-allowed}.side-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:#edf1fa;font-size:11px;font-weight:900;flex:0 0 27px}.side-btn.active .side-icon{background:#ffffff22;color:#fff}.sidebar-foot{margin-top:auto;padding:13px 8px;color:#7d89a0;font-size:10px;line-height:1.5}.sidebar-foot small{font-size:9px}.workspace-main{flex:1;min-width:0}.workspace-main>.tab-panel{margin-top:0}.workspace-shell.sidebar-collapsed .app-sidebar{width:0;flex-basis:0;padding-left:0;padding-right:0;border-width:0;opacity:0}.workspace-shell.sidebar-collapsed{gap:0}
.category-field{margin-bottom:12px;max-width:720px}.category-field label{display:block;font-size:12px;font-weight:900;color:#4f5d77;margin-bottom:7px}.category-field select{width:100%;border:1px solid #dce4f1;background:#f8faff;color:#263451;padding:11px 12px;border-radius:12px;font:inherit;outline:none}.category-field select:focus{border-color:#6a7ee0;box-shadow:0 0 0 3px #596dd51a}.category-field .required{color:#d43b57}.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(120deg,#101d43,#243b80 58%,#5368ce);color:#fff;border:0}.dashboard-hero h2{margin:5px 0 7px;font-size:30px}.dashboard-hero p{margin:0;color:#d7e0fb}.dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.dash-metric{background:rgba(255,255,255,.95);border:1px solid #e3e9f4;border-radius:17px;padding:17px;box-shadow:0 12px 30px rgba(35,53,94,.06)}.dash-metric span{font-size:12px;font-weight:800;color:#7886a0}.dash-metric b{display:block;margin-top:7px;font-size:22px;color:#1b2a4b;overflow-wrap:anywhere}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.chart-card{margin-bottom:0}.bar-chart{padding-top:8px}.dash-bar-row{margin:15px 0 21px}.dash-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#596780;margin-bottom:8px}.dash-bar-label b{color:#1d2c4c}.dash-bar-track{height:12px;border-radius:999px;background:#edf1f8;overflow:hidden}.dash-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3159d9,#6b5cda);min-width:2px}.dashboard-detail{margin-bottom:0}.dashboard-detail .table-wrap{margin-top:12px}
@media(max-width:1050px){.app-sidebar{width:205px;flex-basis:205px}.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:760px){.workspace-shell{display:block}.app-sidebar{position:relative;top:auto;width:100%;height:auto;max-height:none;margin-bottom:14px}.workspace-shell.sidebar-collapsed .app-sidebar{width:100%;height:0;margin:0;padding-top:0;padding-bottom:0;overflow:hidden}.sidebar-nav{display:grid;grid-template-columns:1fr 1fr}.sidebar-foot{display:none}.dashboard-metrics{grid-template-columns:1fr 1fr}}

/* Sidebar: tombol buka tetap tersedia saat sidebar disembunyikan */
.sidebar-reopen{position:fixed;left:14px;top:92px;z-index:1200;width:42px;height:42px;border:1px solid #dce4f2;border-radius:12px;background:rgba(255,255,255,.97);color:#52617d;box-shadow:0 10px 28px rgba(35,53,94,.16);cursor:pointer;font-size:19px;display:none;align-items:center;justify-content:center}
.sidebar-reopen:hover{background:#f2f5fc;color:#243b80}
.workspace-shell.sidebar-collapsed .sidebar-reopen{display:flex}
.surat-category-field{margin-top:4px;padding-top:12px;border-top:1px solid #edf1f7}
@media(max-width:760px){.sidebar-reopen{top:82px;left:10px}.workspace-shell.sidebar-collapsed .sidebar-reopen{display:flex}}

/* ===== Sidebar full-height kiri ===== */
@media(min-width:761px){
  .app{padding-left:245px;box-sizing:border-box;transition:padding-left .25s ease}
  .app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:245px;
    height:100vh;
    max-height:none;
    flex:0 0 245px;
    box-sizing:border-box;
    border-radius:0 18px 18px 0;
    border-left:0;
    border-top:0;
    border-bottom:0;
    z-index:1100;
    padding:18px 16px;
    box-shadow:8px 0 28px rgba(35,53,94,.09);
  }
  .workspace-shell{margin-top:18px}
  .workspace-shell.sidebar-collapsed .app-sidebar{width:0;left:0;padding-left:0;padding-right:0}
  .app:has(.workspace-shell.sidebar-collapsed){padding-left:0}
  .sidebar-reopen{left:14px;top:18px}
}

/* Penyempurnaan ruang kerja dan tampilan kategori */
.app{max-width:100%;padding:16px 18px 14px}
.workspace-shell{gap:12px;margin-top:12px}
.app-sidebar{width:218px;flex-basis:218px;padding:13px}
.workspace-main{width:calc(100% - 230px);min-width:0}
#tabSurat .sv-layout{grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:12px}
#tabSurat .sv-card{padding:14px;border-radius:13px}
#tabSurat .sv-left{gap:12px}
#tabSurat .sv-viewer-card{padding:14px}
#tabSurat .sv-stage{height:clamp(520px,calc(100vh - 150px),1100px)}
.dashboard-view-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.view-switch{display:inline-flex;gap:5px;padding:4px;border-radius:12px;background:#edf1f8;border:1px solid #e1e7f2}
.view-switch-btn{border:0;border-radius:9px;padding:9px 15px;background:transparent;color:#5b6882;font-weight:800;cursor:pointer;transition:transform .16s,background .16s,color .16s,box-shadow .16s}
.view-switch-btn:hover{transform:translateY(-1px)}
.view-switch-btn:active{transform:scale(.96)}
.view-switch-btn.active{background:#fff;color:#2949ad;box-shadow:0 3px 10px #233a7818}
#categoryDataView[hidden],#categoryChartView[hidden]{display:none!important}
.dashboard-category-data{margin-bottom:18px}
.dashboard-category-data .data-table{min-width:0}
@media(max-width:1100px){.workspace-main{width:calc(100% - 230px)}#tabSurat .sv-layout{grid-template-columns:1fr}#tabSurat .sv-right{position:static;order:-1}}
@media(max-width:760px){.app{padding:10px}.workspace-shell{gap:8px}.app-sidebar{width:64px;flex-basis:64px;padding:8px}.workspace-main{width:calc(100% - 72px)}.app-sidebar .sidebar-label,.app-sidebar .side-btn>span:not(.side-icon),.app-sidebar .sidebar-foot,.app-sidebar .sidebar-brand{display:none}.app-sidebar .side-btn{justify-content:center;padding:9px 5px}.app-sidebar .sidebar-head{justify-content:center}.app-sidebar .sidebar-toggle{width:36px}.dashboard-grid{grid-template-columns:1fr}}

/* ===== Perbaikan responsif: area kerja mengikuti sidebar ===== */
@media (min-width: 761px) {
  .app {
    max-width: 100%;
    padding: 16px 18px 14px;
  }
  .workspace-shell {
    width: calc(100% - 230px);
    margin-left: 230px;
    transition: width .28s ease, margin-left .28s ease;
  }
  .workspace-main {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
  .workspace-shell.sidebar-collapsed {
    width: 100%;
    margin-left: 0;
  }
  .workspace-shell.sidebar-collapsed .workspace-main {
    width: 100%;
    flex: 1 1 100%;
  }
}
@media (max-width: 760px) {
  .workspace-shell {
    width: 100%;
    margin-left: 0;
  }
  .workspace-main {
    width: 100%;
    min-width: 0;
  }
}

/* ===== SIDEBAR RESPONSIF — MODE TERBUKA / MODE KOMPAK ===== */
.sidebar-collapsed-title{
  display:none;
  flex:1;
  min-height:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  text-align:center;
  color:#fff;
  font-weight:950;
  line-height:1.35;
  user-select:none;
  overflow:hidden;
  text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.sidebar-collapsed-logo{
  width:54px;
  height:54px;
  flex:0 0 54px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.22));
}
.sidebar-collapsed-title > span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:clamp(40px,12vw,68px);
  letter-spacing:.16em;
  white-space:normal;
  text-align:center;
}
@media (min-width:761px){
  .app-sidebar{transition:width .28s ease,flex-basis .28s ease,padding .28s ease,background .28s ease,box-shadow .28s ease,border-color .28s ease;}
  .workspace-shell{transition:width .28s ease,margin-left .28s ease;}
  .workspace-shell:not(.sidebar-collapsed){width:calc(100% - 230px);margin-left:230px;}
  .workspace-shell.sidebar-collapsed{width:calc(100% - 100px);margin-left:100px;gap:12px;}
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:88px;
    flex-basis:88px;
    padding:12px 8px;
    opacity:1;
    left:0;
    border:0;
    border-radius:0 20px 20px 0;
    background:linear-gradient(180deg,#3159d9 0%,#243b80 58%,#1b2d64 100%);
    box-shadow:8px 0 30px rgba(36,59,128,.24);
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{display:flex;}
  .workspace-shell.sidebar-collapsed .sidebar-head,
  .workspace-shell.sidebar-collapsed .sidebar-label,
  .workspace-shell.sidebar-collapsed .sidebar-nav,
  .workspace-shell.sidebar-collapsed .sidebar-foot{display:none;}
  .workspace-shell:not(.sidebar-collapsed) .sidebar-collapsed-title{display:none;}
  .workspace-shell.sidebar-collapsed .sidebar-reopen{display:flex;left:22px;top:16px;width:52px;height:38px;border-color:#ffffff55;background:#ffffff18;color:#fff;box-shadow:none;backdrop-filter:blur(5px);}
  .workspace-shell.sidebar-collapsed .sidebar-reopen:hover{background:#ffffff2b;color:#fff;}
  .workspace-shell:not(.sidebar-collapsed) .sidebar-reopen{display:none;}
}
@media (max-width:760px){
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:100%;
    height:66px;
    padding:8px 12px;
    margin:0 0 8px;
    border:0;
    border-radius:16px;
    opacity:1;
    background:linear-gradient(100deg,#3159d9,#243b80 62%,#1b2d64);
    box-shadow:0 10px 26px rgba(36,59,128,.22);
  }
  .workspace-shell.sidebar-collapsed .sidebar-head,
  .workspace-shell.sidebar-collapsed .sidebar-label,
  .workspace-shell.sidebar-collapsed .sidebar-nav,
  .workspace-shell.sidebar-collapsed .sidebar-foot{display:none;}
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{display:flex;flex-direction:row;writing-mode:horizontal-tb;transform:none;min-height:auto;font-size:clamp(10px,3vw,16px);padding:0 48px 0 8px;white-space:nowrap;justify-content:flex-start;gap:9px;}
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title > span{writing-mode:horizontal-tb;transform:none;font-size:inherit;letter-spacing:.1em;overflow:hidden;text-overflow:ellipsis;}
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-logo{width:42px;height:42px;flex-basis:42px;}
  .workspace-shell.sidebar-collapsed .sidebar-reopen{display:flex;right:12px;left:auto;top:14px;width:40px;height:38px;border-color:#ffffff55;background:#ffffff18;color:#fff;box-shadow:none;}
}


/* ===== Final: identitas SIAP BOS menyatu dengan sidebar kompak ===== */
@media (min-width: 761px){
  /* Panel kiri dan kanan Surat Perintah dimulai pada garis atas yang sama. */
  #tabSurat .sv-right{
    top:12px;
  }

  /* Sidebar ditutup -> tetap menyisakan rail kiri yang menjadi rumah logo + teks. */
  .workspace-shell.sidebar-collapsed{
    width:calc(100% - 90px);
    margin-left:90px;
    gap:12px;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:78px;
    flex-basis:78px;
    padding:0;
    opacity:1;
    left:0;
    top:0;
    bottom:0;
    height:100vh;
    border:0;
    border-radius:0 18px 18px 0;
    background:linear-gradient(180deg,#3159d9 0%,#243b80 58%,#1b2d64 100%);
    box-shadow:8px 0 30px rgba(36,59,128,.24);
    overflow:hidden;
    z-index:1100;
  }

  .workspace-shell.sidebar-collapsed .sidebar-head,
  .workspace-shell.sidebar-collapsed .sidebar-label,
  .workspace-shell.sidebar-collapsed .sidebar-nav,
  .workspace-shell.sidebar-collapsed .sidebar-foot{
    display:none;
  }

  /* Identitas benar-benar berada di dalam rail kiri, bukan banner di atas halaman. */
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    bottom:16px;
    width:auto;
    min-width:0;
    height:auto;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:#fff;
    text-align:center;
    writing-mode:horizontal-tb;
    transform:none;
    white-space:normal;
    overflow:hidden;
    text-shadow:0 2px 12px rgba(0,0,0,.2);
    z-index:1;
  }

  /* Logo tetap tegak/upright, teks mengikuti arah vertikal sidebar. */
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-logo{
    width:28px;
    height:28px;
    flex:0 0 28px;
    object-fit:contain;
    transform:none;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title > span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:10px;
    line-height:1.15;
    letter-spacing:.12em;
    white-space:nowrap;
    text-align:center;
    max-height:calc(100vh - 92px);
    overflow:hidden;
  }

  /* Tombol buka berada di bagian atas rail kompak. */
  .workspace-shell.sidebar-collapsed .sidebar-reopen{
    display:flex;
    left:18px;
    right:auto;
    top:16px;
    width:42px;
    height:38px;
    z-index:2;
    border:1px solid #ffffff55;
    background:#ffffff18;
    color:#fff;
    box-shadow:none;
    backdrop-filter:blur(5px);
  }
  .workspace-shell.sidebar-collapsed .sidebar-reopen:hover{
    background:#ffffff2b;
    color:#fff;
  }
}

@media (max-width:760px){
  /* Pada mobile, identitas tetap horizontal karena sidebar berubah menjadi bar atas. */
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:100%;
    height:66px;
    padding:8px 12px;
    margin:0 0 8px;
    border:0;
    border-radius:16px;
    opacity:1;
    background:linear-gradient(100deg,#3159d9,#243b80 62%,#1b2d64);
    box-shadow:0 10px 26px rgba(36,59,128,.22);
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{
    position:static;
    width:auto;
    min-height:auto;
    padding:0 48px 0 8px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    overflow:hidden;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-logo{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title > span{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:clamp(10px,3vw,16px);
    letter-spacing:.1em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .workspace-shell.sidebar-collapsed .sidebar-reopen{
    display:flex;
    right:12px;
    left:auto;
    top:14px;
    width:40px;
    height:38px;
    border:1px solid #ffffff55;
    background:#ffffff18;
    color:#fff;
    box-shadow:none;
  }
}

/* =========================================================
   SIDEBAR FINAL FIX — tombol tetap berada DI DALAM sidebar
   ========================================================= */
@media (min-width: 761px){
  /* Area kerja mengikuti lebar sidebar terbuka. */
  .workspace-shell{
    width:calc(100% - 230px);
    margin-left:230px;
    gap:12px;
    transition:width .28s ease, margin-left .28s ease;
  }
  .workspace-main{
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }

  /* Sidebar terbuka. */
  .app-sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:230px;
    height:100vh;
    max-height:none;
    flex:0 0 230px;
    box-sizing:border-box;
    margin:0;
    border:0;
    border-radius:0 18px 18px 0;
    padding:18px 14px;
    z-index:1100;
    overflow:hidden;
    background:rgba(255,255,255,.96);
    box-shadow:8px 0 28px rgba(35,53,94,.10);
  }
  .app-sidebar .sidebar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
  }
  .app-sidebar .sidebar-toggle{
    position:relative;
    z-index:2100;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    line-height:1;
  }

  /* Saat sidebar ditutup, rail kiri tetap menjadi sidebar. */
  .workspace-shell.sidebar-collapsed{
    width:calc(100% - 78px);
    margin-left:78px;
    gap:12px;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:78px;
    flex-basis:78px;
    padding:0;
    opacity:1;
    background:linear-gradient(180deg,#3159d9 0%,#243b80 58%,#1b2d64 100%);
    border:0;
    border-radius:0 18px 18px 0;
    box-shadow:8px 0 30px rgba(36,59,128,.24);
  }

  /* JANGAN sembunyikan header: tombol buka berada di header sidebar. */
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-head{
    display:flex;
    width:100%;
    min-height:58px;
    margin:0;
    padding:10px 8px 0;
    justify-content:flex-end;
    align-items:flex-start;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-brand,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-label,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-nav,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-foot{
    display:none !important;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle{
    display:grid;
    position:relative;
    z-index:2200;
    width:42px;
    height:38px;
    flex:0 0 42px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:10px;
    background:rgba(255,255,255,.13);
    color:#fff;
    box-shadow:none;
    font-size:20px;
    text-indent:0;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle:hover{
    background:rgba(255,255,255,.22);
    color:#fff;
  }

  /* Logo + teks hanya muncul ketika sidebar kompak. */
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{
    position:absolute;
    left:0;
    right:0;
    top:68px;
    bottom:14px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:auto;
    min-height:0;
    margin:0;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
    color:#fff;
    overflow:hidden;
    z-index:1;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-logo{
    width:27px;
    height:27px;
    flex:0 0 27px;
    object-fit:contain;
    transform:none;
    filter:drop-shadow(0 3px 7px rgba(0,0,0,.22));
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title > span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    display:block;
    font-size:10px;
    line-height:1.15;
    letter-spacing:.12em;
    white-space:nowrap;
    text-align:center;
    max-height:calc(100vh - 98px);
    overflow:hidden;
    text-shadow:0 2px 10px rgba(0,0,0,.20);
  }

  /* Tombol lama yang berada di luar rail tidak dipakai lagi. */
  .sidebar-reopen{
    display:none !important;
  }
}

@media (max-width:760px){
  /* Mobile tetap memiliki tombol sidebar yang jelas. */
  .sidebar-reopen{display:none !important;}
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle{
    display:grid;
    position:absolute;
    right:10px;
    top:10px;
    width:40px;
    height:38px;
    z-index:2200;
  }
}


/* =========================================================
   SIAP BOS = SATU-SATUNYA TOMBOL BUKA/TUTUP SIDEBAR
   ========================================================= */
.sidebar-toggle{
  padding:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#fff;
}
.sidebar-toggle img{
  display:block;
  width:30px;
  height:32px;
  object-fit:contain;
  pointer-events:none;
}
.sidebar-toggle:hover img{
  transform:scale(1.04);
}
.workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle{
  background:rgba(255,255,255,.13);
}
.workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle img{
  width:32px;
  height:34px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
@media (max-width:760px){
  .app-sidebar .sidebar-toggle{
    padding:0;
  }
  .app-sidebar .sidebar-toggle img{
    width:30px;
    height:32px;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle img{
    width:31px;
    height:33px;
  }
}


/* =========================================================
   SIDEBAR FINAL 2 — SIAP BOS logo utama (tombol)
   Teks identitas tetap ada tanpa menambah logo kedua.
   Desktop: sidebar kompak + celah aman dari panel utama.
   Mobile: sidebar berpindah ke atas; mode kompak tetap klikable.
   ========================================================= */
@media (min-width:761px){
  .workspace-shell{
    width:calc(100% - 230px);
    margin-left:230px;
    gap:14px;
  }
  .workspace-shell.sidebar-collapsed{
    width:calc(100% - 82px);
    margin-left:82px;
    gap:14px;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:68px;
    flex-basis:68px;
    padding:0;
    height:100vh;
    left:0;
    top:0;
    bottom:0;
    border:0;
    border-radius:0 16px 16px 0;
    background:linear-gradient(180deg,#3159d9 0%,#243b80 58%,#1b2d64 100%);
    box-shadow:8px 0 28px rgba(36,59,128,.22);
    opacity:1;
    overflow:hidden;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-head{
    display:flex;
    width:100%;
    min-height:0;
    height:60px;
    margin:0;
    padding:9px 0 0;
    justify-content:center;
    align-items:center;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-brand,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-label,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-nav,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-foot{
    display:none !important;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle{
    position:relative;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:0 0 44px;
    padding:0;
    margin:0;
    border:1px solid rgba(255,255,255,.46);
    border-radius:11px;
    background:rgba(255,255,255,.10);
    box-shadow:0 4px 12px rgba(0,0,0,.14);
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle img{
    width:36px;
    height:38px;
    object-fit:contain;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{
    position:absolute;
    left:0;
    right:0;
    top:68px;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0 3px;
    background:none;
    color:#fff;
    overflow:hidden;
    z-index:1;
  }
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title > span{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-size:14px;
    line-height:1.15;
    letter-spacing:.08em;
    white-space:nowrap;
    text-align:center;
    max-height:calc(100vh - 82px);
    overflow:hidden;
    text-shadow:0 2px 10px rgba(0,0,0,.18);
  }
}

@media (max-width:760px){
  .workspace-shell{
    display:block;
    width:100%;
    margin-left:0;
    gap:0;
  }
  .workspace-shell .app-sidebar{
    position:relative;
    left:auto;
    top:auto;
    bottom:auto;
    width:100%;
    height:auto;
    min-height:0;
    margin:0 0 10px;
    padding:10px;
    border:0;
    border-radius:15px;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 26px rgba(35,53,94,.10);
  }
  .workspace-shell .workspace-main{
    width:100%;
    min-width:0;
  }

  /* Mobile terbuka: navigasi tetap berada di atas konten. */
  .workspace-shell:not(.sidebar-collapsed) .app-sidebar .sidebar-head{
    display:flex;
    min-height:42px;
    align-items:center;
    justify-content:space-between;
  }
  .workspace-shell:not(.sidebar-collapsed) .sidebar-collapsed-title{display:none;}
  .workspace-shell:not(.sidebar-collapsed) .sidebar-label{display:block;}
  .workspace-shell:not(.sidebar-collapsed) .sidebar-nav{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
  .workspace-shell:not(.sidebar-collapsed) .sidebar-foot{display:none;}

  /* Mobile tertutup: jangan dibuat height:0; logo tombol harus tetap terlihat dan bisa diklik. */
  .workspace-shell.sidebar-collapsed .app-sidebar{
    width:58px;
    height:58px;
    min-height:58px;
    margin:0 0 10px;
    padding:0;
    border-radius:13px;
    background:linear-gradient(180deg,#3159d9 0%,#243b80 58%,#1b2d64 100%);
    box-shadow:0 8px 20px rgba(36,59,128,.24);
    overflow:hidden;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-head{
    display:flex;
    width:100%;
    height:58px;
    min-height:58px;
    margin:0;
    padding:0;
    align-items:center;
    justify-content:center;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-brand,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-label,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-nav,
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-foot,
  .workspace-shell.sidebar-collapsed .sidebar-collapsed-title{
    display:none;
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle{
    position:relative;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:0 0 46px;
    padding:0;
    margin:0;
    border:1px solid rgba(255,255,255,.48);
    border-radius:11px;
    background:rgba(255,255,255,.10);
    box-shadow:0 4px 12px rgba(0,0,0,.14);
  }
  .workspace-shell.sidebar-collapsed .app-sidebar .sidebar-toggle img{
    width:36px;
    height:38px;
    object-fit:contain;
  }
  .sidebar-toggle:focus-visible{outline:3px solid rgba(49,89,217,.32);outline-offset:2px;}
}

/* Dashboard: rincian pajak, waktu pembaruan, baris total */
.dash-metric small{display:block;margin-top:5px;font-size:11px;font-weight:500;opacity:.75;line-height:1.35}
.dash-updated{margin-top:6px;font-size:12px;opacity:.7}
.dash-total-row td{font-weight:700;border-top:2px solid currentColor}

/* ===== Dashboard v2: tampilan baru ===== */
#tabDashboard{--c1:#3b5bdb;--c2:#7048e8;--c3:#0c8f8f;--c4:#e8590c}
#tabDashboard .dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,#142057 0%,#2441a8 62%,#3b5bdb 100%);color:#fff;border:0;border-radius:20px;padding:24px 28px;box-shadow:0 14px 34px rgba(36,65,168,.28)}
#tabDashboard .dashboard-hero h2{margin:2px 0 6px;font-size:28px;letter-spacing:-.4px;color:#fff}
#tabDashboard .dashboard-hero p{margin:0;color:#d5defc;max-width:560px}
#tabDashboard .dashboard-hero .eyebrow{color:#9fb3ff}
#tabDashboard .dashboard-hero .dash-updated{color:#b9c8ff;opacity:1}
#tabDashboard .dashboard-hero .btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.38)}
#tabDashboard .dashboard-hero .btn:hover{background:rgba(255,255,255,.26)}
#tabDashboard .dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#tabDashboard .dash-metric{position:relative;background:#fff;border:1px solid #e3e9f4;border-radius:18px;padding:18px 18px 16px 22px;overflow:hidden;box-shadow:0 8px 24px rgba(35,53,94,.06);--a:#1f2a5a}
#tabDashboard .dash-metric::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--a)}
#tabDashboard .dash-metric::after{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:var(--a);opacity:.09}
#tabDashboard .dash-metric span{display:block;font-size:12.5px;font-weight:700;color:#5b6882}
#tabDashboard .dash-metric b{display:block;margin-top:8px;font-size:26px;line-height:1.1;font-weight:850;color:var(--a);letter-spacing:-.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#tabDashboard .m-modal{--a:#3b5bdb}#tabDashboard .m-oper{--a:#0c8f8f}#tabDashboard .m-pajak{--a:#e8590c}
#tabDashboard .dash-composition-card{padding:20px 22px}
.comp-bar{display:flex;gap:2px;height:22px;border-radius:999px;overflow:hidden;background:#edf1f8;margin-top:14px}
.comp-bar i{display:block;min-width:0;transition:width .5s ease}
.comp-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12.5px;color:#46536e}
.comp-legend s{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;text-decoration:none}
.comp-legend b{margin-left:6px;color:#16245a}
.comp-empty{margin-top:12px;color:#8591a7;font-size:13px}
.c1{background:#3b5bdb}.c2{background:#7048e8}.c3{background:#0c8f8f}.c4{background:#e8590c}
#tabDashboard .dash-bar-row{margin:16px 0}
#tabDashboard .dash-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:7px}
#tabDashboard .dash-bar-track{height:14px;border-radius:999px;background:#edf1f8;overflow:hidden}
#tabDashboard .dash-bar-track i{display:block;height:100%;border-radius:999px;transition:width .6s ease}
#chartModal .dash-bar-row:nth-child(1) i{background:#3b5bdb}#chartModal .dash-bar-row:nth-child(2) i{background:#7048e8}
#chartOperasional .dash-bar-row:nth-child(1) i{background:#0c8f8f}#chartOperasional .dash-bar-row:nth-child(2) i{background:#e8590c}
.cat-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.cat-pill.c1{background:#e7ecff;color:#2f47b8}.cat-pill.c2{background:#efe8ff;color:#5a35b8}.cat-pill.c3{background:#dff5f3;color:#0a6f6f}.cat-pill.c4{background:#ffe9dc;color:#b84708}
#tabDashboard .dashboard-detail .data-table tbody tr:nth-child(even){background:#f7f9fe}
#tabDashboard .dash-total-row td{background:#eef2fb;color:#16245a;border-top:2px solid #c9d4ee}
@media(max-width:1050px){#tabDashboard .dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#tabDashboard .dashboard-metrics{grid-template-columns:1fr}#tabDashboard .dashboard-hero{padding:18px}}

/* ===== DASHBOARD MODERN (dx-) — khusus #tabDashboard, tidak memengaruhi tab lain ===== */
#tabDashboard .dx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:6px 2px 18px}
#tabDashboard .dx-head h2{margin:6px 0 4px;font-size:clamp(24px,3vw,32px);letter-spacing:-.8px;color:#16213f}
#tabDashboard .dx-head p{margin:0;color:#71809b;font-size:13.5px}
.dx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#3159d9}
.dx-live{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 #10b98166;animation:dxPulse 2s infinite}
@keyframes dxPulse{70%{box-shadow:0 0 0 8px #10b98100}100%{box-shadow:0 0 0 0 #10b98100}}
.dx-head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dx-updated{font-size:12px;color:#8490a5}
.dx-refresh{display:inline-flex;align-items:center;gap:8px;border:1px solid #dfe6f3;background:#fff;color:#2f4ba8;font-weight:800;border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:0 4px 14px rgba(35,53,94,.06);transition:transform .16s,box-shadow .16s}
.dx-refresh:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(35,53,94,.12)}
.dx-refresh:active svg{transform:rotate(180deg);transition:transform .4s}
.dx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.dx-kpi{position:relative;overflow:hidden;background:#fff;border:1px solid #e5eaf4;border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(35,53,94,.06);transition:transform .2s,box-shadow .2s;--c:#3159d9;--bg:#e8eeff}
.dx-kpi:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(35,53,94,.12)}
.dx-kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)}
.dx-kpi.k-modal{--c:#8b5cf6;--bg:#f0eafe}.dx-kpi.k-oper{--c:#0ea5a4;--bg:#dcf6f5}.dx-kpi.k-pajak{--c:#f59e0b;--bg:#fff1d6}
.dx-kpi-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--c);margin-bottom:14px}
.dx-kpi span{display:block;font-size:12px;font-weight:800;color:#7886a0}
.dx-kpi b{display:block;margin:6px 0 4px;font-size:clamp(20px,2vw,26px);letter-spacing:-.5px;color:#16213f;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dx-kpi small{display:block;font-size:11.5px;color:#8490a5;line-height:1.4}
.dx-row{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-bottom:18px}
.dx-row .card{margin-bottom:0}
.dx-donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:16px}
.dx-donut{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;flex:0 0 170px;transition:transform .3s}
.dx-donut:hover{transform:scale(1.03)}
.dx-donut-hole{width:112px;height:112px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;box-shadow:inset 0 0 0 1px #edf0f6}
.dx-donut-hole span{font-size:10.5px;font-weight:800;letter-spacing:1px;color:#8490a5;text-transform:uppercase}
.dx-donut-hole b{font-size:12.5px;color:#16213f;overflow-wrap:anywhere;line-height:1.25}
.dx-legend{list-style:none;margin:0;padding:0;flex:1;min-width:190px;display:grid;gap:10px}
.dx-legend li{display:flex;align-items:center;gap:10px;font-size:13px;color:#4f5d77;padding:9px 11px;border-radius:12px;background:#f7f9fd}
.dx-legend s{width:11px;height:11px;border-radius:4px;flex:0 0 11px}
.dx-legend span{flex:1}.dx-legend b{color:#16213f;font-variant-numeric:tabular-nums}
#tabDashboard .dash-bar-track{height:14px}
#tabDashboard .dashboard-detail .search{margin-left:auto}
#tabDashboard .dash-total-row td{background:#f5f7fc;font-weight:900}
#tabDashboard .comp-empty{padding:26px 10px;color:#8994a8;text-align:center}
@media(max-width:1050px){.dx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dx-row{grid-template-columns:1fr}}
@media(max-width:520px){.dx-kpis{grid-template-columns:1fr}.dx-donut-wrap{justify-content:center}}
@media(prefers-reduced-motion:reduce){.dx-live{animation:none}}

/* ===== PROFIL SEKOLAH ===== */
#tabProfil{--sv-blue:#1e9bd7;--sv-blue-soft:#e8f5fc;--sv-ink:#111827;--sv-mute:#6b7280;--sv-line:#e6ebf2}
#tabProfil .pf-hero{margin-bottom:16px;padding:18px 22px;border-radius:16px;background:linear-gradient(135deg,#eaf4fd,#f4f0ff);border:1px solid #dce6f5}
#tabProfil .pf-hero h2{margin:6px 0 4px;font-size:22px;color:#1f2a5a}
#tabProfil .pf-hero p{margin:0;font-size:12.5px;line-height:1.6;color:#5b6678;max-width:760px}
#tabProfil .pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
#tabProfil .pf-card{background:#fff;border:1px solid var(--sv-line);border-radius:16px;padding:22px;box-shadow:0 4px 18px rgba(30,41,59,.05)}
#tabProfil .pf-title{margin:0 0 16px;font-size:12.5px;font-weight:600;color:var(--sv-blue)}
#tabProfil .pf-fields{display:flex;flex-direction:column;gap:15px}
@media(max-width:1000px){#tabProfil .pf-grid{grid-template-columns:1fr}}
#tabProfil .field{gap:3px}
#tabProfil .field label{font-size:11.5px;font-weight:500;color:var(--sv-mute);text-transform:none;letter-spacing:0}
#tabProfil .field input,#tabProfil .field select,#tabProfil .field textarea{
  border:0;border-bottom:1px dashed #d3dae6;border-radius:0;background:transparent;padding:3px 0;
  font-size:12.5px;font-weight:700;color:var(--sv-ink);outline:none;box-shadow:none;transition:border-color .15s,background .15s}
#tabProfil .field input:hover:not([readonly]),#tabProfil .field select:hover:not(:disabled),#tabProfil .field textarea:hover:not([readonly]){border-bottom-color:#9fb3c8}
#tabProfil .field input:focus:not([readonly]),#tabProfil .field select:focus,#tabProfil .field textarea:focus:not([readonly]){border-bottom-color:var(--sv-blue);box-shadow:none}
#tabProfil .field input[readonly],#tabProfil .field textarea[readonly]{border-bottom-color:transparent;background:transparent;color:var(--sv-ink);cursor:default}
#tabProfil .field select{cursor:pointer;padding-right:4px}
#tabProfil .field select:disabled{cursor:not-allowed;color:#9aa5b5}
#tabProfil .field textarea{min-height:56px;padding:8px 10px;border:1px solid var(--sv-line);border-radius:10px;background:#f8fafc;font-weight:600;line-height:1.45}
#tabProfil .field textarea[readonly]{background:#f8fafc;border-color:var(--sv-line);color:#374151}
#tabProfil .field textarea:focus:not([readonly]){border-color:var(--sv-blue);background:#fff}
#tabProfil .field input[type=file]{font-weight:500;font-size:11.5px;border:1px dashed #cfd8e6;border-radius:10px;padding:8px;background:#f8fafc;color:var(--sv-mute)}
#tabProfil .field .small{font-size:11px;color:#8b95a7;line-height:1.5;margin-top:2px;font-weight:400}
#tabProfil .auto-tag,#tabProfil .manual-tag{margin-left:5px;padding:1px 6px;font-size:8px;vertical-align:1px}
#tabProfil .auto-tag{background:var(--sv-blue-soft);color:#187aa8}

/* ===== ISI SURAT (terstruktur) ===== */
#tabSurat .isi-form{display:flex;flex-direction:column;gap:0}
#tabSurat .isi-group{padding:14px 0;border-top:1px solid var(--sv-line)}
#tabSurat .isi-group:first-child{border-top:0;padding-top:0}
#tabSurat .isi-group-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#tabSurat .isi-group-head b{display:block;font-size:12.5px;color:var(--sv-ink);font-weight:700}
#tabSurat .isi-group-head small{display:block;font-size:10.5px;color:#8b95a7;margin-top:1px}
#tabSurat .isi-step{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sv-blue-soft);color:#187aa8;font-size:11px;font-weight:800}
#tabSurat .isi-fields{display:flex;flex-direction:column;gap:14px}
#tabSurat .field .req{color:#d43b57;font-weight:800}
#tabSurat .surat-category-field{margin:0;padding:0;border-top:0;max-width:none}
#tabSurat .surat-category-field label{font-size:11.5px;font-weight:500;color:var(--sv-mute);margin-bottom:3px}
#tabSurat .surat-category-field select{padding:9px 10px;font-size:12.5px;font-weight:700;border-radius:10px;background:#f8fafc;border:1px solid var(--sv-line)}
#tabSurat .isi-footer{margin-top:4px;padding:14px;border:1px solid #dce8f2;border-radius:13px;background:linear-gradient(180deg,#fbfdff,#f3f8fc);display:flex;flex-direction:column;gap:10px}
#tabSurat .isi-checklist{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#tabSurat .isi-check-head{width:100%;font-size:11px;font-weight:700;color:#8a5a00}
#tabSurat .isi-check-head.ok{color:#08784a}
#tabSurat .isi-chip{padding:2px 9px;border-radius:999px;background:#fff3d6;color:#8a5a00;font-size:10.5px;font-weight:600}
#tabSurat .isi-chip.ok{background:#e3f6ec;color:#0b7a4b}
#tabSurat .isi-footer .surat-draft-save-status{margin:0}
#tabSurat .isi-save-btn{width:100%;background:linear-gradient(135deg,#0f7a5b,#158f6b);color:#fff;border-color:#0f7a5b;padding:11px 14px;font-size:12.5px;font-weight:800}
#tabSurat .isi-save-btn:disabled{background:#d9dfe8;border-color:#d9dfe8;color:#8b95a7;cursor:not-allowed;box-shadow:none;opacity:1}

/* ===== POPUP BERHASIL DISIMPAN ===== */
.saved-modal{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(9,18,42,.55);backdrop-filter:blur(6px)}
.saved-modal.show{display:flex;animation:projectFadeIn .16s ease-out}
.saved-card{width:min(380px,94vw);padding:28px 26px 24px;text-align:center;background:#fff;border-radius:22px;border:1px solid #d9e3f4;box-shadow:0 28px 80px rgba(16,29,67,.35)}
.saved-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:#e3f6ec;color:#0f9b63;font-size:32px;font-weight:900}
.saved-title{font-size:20px;font-weight:900;color:#223253}
.saved-sub{margin-top:6px;font-size:12.5px;color:#7987a0;line-height:1.5}
.saved-label{margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8b95a7}
.saved-bukti{margin-top:4px;padding:10px 14px;border-radius:12px;background:#f1f6fd;border:1px dashed #b8cbe6;font-size:22px;font-weight:900;color:#1f3d8a;letter-spacing:.5px;overflow-wrap:anywhere}
.saved-meta{margin-top:8px;font-size:11.5px;color:#6b7280;min-height:1em}
.saved-ok{margin-top:20px;width:100%}

#tabProfil .field input[readonly]{border-bottom:1px dashed #d3dae6;min-height:26px}
#tabProfil .field input::placeholder{color:#b3bccb;font-weight:500}

/* ==========================================================
   PROFIL SEKOLAH — tampilan mengikuti referensi UI pengguna
   ========================================================== */
#tabProfil{--pf-blue:#2f55d4;--pf-navy:#172653;--pf-line:#e2e8f3;--pf-muted:#7d8aa1;--pf-ink:#18233c}
#tabProfil .pf-hero{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:16px;padding:24px 24px;border:0;border-radius:18px;background:linear-gradient(120deg,#14244e 0%,#233b7c 58%,#5368ce 100%);box-shadow:0 12px 30px rgba(35,53,94,.12);color:#fff;position:relative;overflow:hidden}
#tabProfil .pf-hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-100px;top:-190px;box-shadow:0 0 0 34px rgba(255,255,255,.05),0 0 0 72px rgba(255,255,255,.03)}
#tabProfil .pf-hero>div{position:relative;z-index:1}
#tabProfil .pf-hero .dx-eyebrow{color:#b9c9ff;font-size:10px;letter-spacing:1.7px}
#tabProfil .pf-hero h2{margin:7px 0 5px;font-size:25px;line-height:1.16;color:#fff;letter-spacing:-.3px}
#tabProfil .pf-hero p{margin:0;max-width:720px;font-size:12px;line-height:1.6;color:#d6def6}
#tabProfil .pf-hero-status{flex:0 0 auto;max-width:430px;padding:9px 13px;border-radius:12px;background:#effaf5;color:#08784a;border:1px solid #ccefe0;font-size:11px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.08)}
#tabProfil .pf-identity-state{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;padding:12px 15px;background:#fff;border:1px solid var(--pf-line);border-radius:14px;box-shadow:0 5px 18px rgba(30,41,59,.04)}
#tabProfil .pf-identity-state>div:first-child{display:flex;align-items:center;gap:10px}
#tabProfil .pf-state-dot{width:9px;height:9px;border-radius:50%;background:#26a269;box-shadow:0 0 0 4px #e5f7ee;flex:none}
#tabProfil .pf-identity-state b{display:block;color:#273654;font-size:11.5px}
#tabProfil .pf-identity-state small{display:block;color:#8b95a7;font-size:10.5px;margin-top:2px}
#tabProfil .pf-identity-state .auto-status{margin:0}
#tabProfil .pf-grid{grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:16px;align-items:start}
#tabProfil .pf-card{padding:20px 21px;border-radius:16px;border:1px solid var(--pf-line);box-shadow:0 7px 22px rgba(30,41,59,.055)}
#tabProfil .pf-grid>.pf-card:nth-child(3){grid-column:1/-1}
#tabProfil .pf-title{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:#1f315d;font-size:13px;font-weight:800;letter-spacing:0}
#tabProfil .pf-title-icon{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#edf2ff;color:#3157ce;font-size:9px;font-weight:900}
#tabProfil .pf-title-tag{margin-left:auto;padding:4px 7px;border-radius:999px;background:#edf3ff;color:#3761d5;font-size:8px;font-weight:900;letter-spacing:.35px}
#tabProfil .pf-title-tag.manual{background:#fff3e6;color:#a35b00}
#tabProfil .pf-grid>.pf-card:first-child .pf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:14px}
#tabProfil .pf-grid>.pf-card:nth-child(2) .pf-fields{gap:14px}
#tabProfil .pf-process-next{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:#f5f8ff;border:1px solid #e2e8f5;color:#64728c;font-size:11px}
#tabProfil .pf-process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
#tabProfil .pf-process-grid .field input[type=file]{min-height:42px}
#tabProfil .pf-process-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;padding-top:15px;border-top:1px solid var(--pf-line)}
#tabProfil .pf-process-bottom .surat-note{margin:0;max-width:820px}
#tabProfil .pf-save-btn{flex:none;padding:10px 17px;border-radius:11px;font-size:11.5px;white-space:nowrap}
#tabProfil .pf-card .field input:not([type=file]),#tabProfil .pf-card .field textarea,#tabProfil .pf-card .field select{min-height:35px}
#tabProfil .pf-card .field input[readonly]{background:#f5f7fb;border:1px solid #e1e7f0;border-radius:9px;padding:8px 10px;color:#223252}
#tabProfil .pf-card .field input:not([readonly]):not([type=file]),#tabProfil .pf-card .field select{background:#fff;border:1px solid #dbe3ef;border-radius:9px;padding:8px 10px}
#tabProfil .pf-card .field input:not([readonly]):not([type=file]):focus,#tabProfil .pf-card .field select:focus{border-color:#7790e8;box-shadow:0 0 0 3px rgba(82,103,214,.09)}
#tabProfil .logo-kabupaten-status{min-height:42px;border-radius:10px;background:#f7f9fd;border:1px solid #e1e7f0}

/* ==========================================================
   ISI SURAT — kartu formulir lebih jelas dan tidak membingungkan
   ========================================================== */
#tabSurat{--sv-blue:#2e58d6;--sv-blue-soft:#edf2ff;--sv-ink:#17233d;--sv-mute:#71809a;--sv-line:#e1e7f0}
#tabSurat .sv-layout{grid-template-columns:minmax(390px,450px) minmax(0,1fr);gap:20px}
#tabSurat .sv-isi{padding:20px 21px}
#tabSurat .isi-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:4px;padding-bottom:15px;border-bottom:1px solid var(--sv-line)}
#tabSurat .isi-card-head .sv-card-title{margin:3px 0 4px;font-size:19px;font-weight:850;color:#1b2a4b;letter-spacing:-.2px}
#tabSurat .isi-card-head p{margin:0;max-width:320px;font-size:11px;line-height:1.55;color:#8793a8}
#tabSurat .isi-kicker{font-size:9px;font-weight:900;letter-spacing:1.4px;color:#3962d6}
#tabSurat .isi-required-note{flex:none;padding:6px 9px;border-radius:999px;background:#fff6e8;color:#a35b00;font-size:9.5px;font-weight:800;white-space:nowrap}
#tabSurat .isi-required-note span{color:#df8b16;margin-right:3px}
#tabSurat .isi-group{margin:0 0 10px;padding:15px 13px;border:1px solid #e4e9f2;border-radius:13px;background:#fbfcff}
#tabSurat .isi-group:first-child{margin-top:13px;padding-top:15px}
#tabSurat .isi-group:last-of-type{margin-bottom:11px}
#tabSurat .isi-group-head{margin-bottom:11px}
#tabSurat .isi-step{width:25px;height:25px;background:#eaf0ff;color:#3158d1;border:1px solid #d9e3ff}
#tabSurat .isi-group-head b{font-size:12px;color:#1f2d49}
#tabSurat .isi-group-head small{font-size:10.5px;color:#8793a8}
#tabSurat .isi-fields{gap:11px}
#tabSurat .isi-group .field label{font-size:10.5px;font-weight:800;color:#67758d}
#tabSurat .isi-group .field input,#tabSurat .isi-group .field select,#tabSurat .isi-group .field textarea{background:#fff;border:1px solid #dbe3ee;border-radius:9px;padding:9px 10px;font-size:12px;font-weight:600;color:#1e2b46;min-height:37px}
#tabSurat .isi-group .field input:focus,#tabSurat .isi-group .field select:focus,#tabSurat .isi-group .field textarea:focus{border-color:#6f8ae8;box-shadow:0 0 0 3px rgba(73,98,208,.08);outline:none}
#tabSurat .isi-group .field textarea{min-height:72px;line-height:1.5;resize:vertical}
#tabSurat .isi-group .field textarea[readonly]{background:#f3f6fa;border-color:#e1e7f0;color:#4a5871}
#tabSurat .isi-group .field .small{font-size:10px;line-height:1.45;color:#8b95a7}
#tabSurat .surat-category-field select{background:#f6f8ff!important;border-color:#aebff4!important;color:#263d88!important;font-weight:800!important}
#tabSurat .category-auto-info{font-size:11px;color:#4b6cb7;margin-top:4px;padding:4px 8px;background:#eef2ff;border-radius:6px;border-left:3px solid #6a7ee0}
#tabSurat .habis-pakai-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#374151;cursor:pointer}
#tabSurat .habis-pakai-check input{width:16px;height:16px;accent-color:#4f46e5;cursor:pointer}
#tabSurat .habis-pakai-check span{font-weight:600}
#tabSurat .isi-footer{margin-top:0;padding:13px;border-radius:12px;background:linear-gradient(180deg,#f8fbff,#f0f5fb);border:1px solid #dce5f1;gap:9px}
#tabSurat .isi-save-btn{border-radius:10px;background:linear-gradient(135deg,#3159d9,#5546d8);border-color:#3159d9;padding:11px 14px;font-size:12px;box-shadow:0 7px 16px rgba(49,89,217,.18)}
#tabSurat .isi-checklist{gap:5px}
#tabSurat .isi-chip{font-size:9.5px;padding:3px 8px}
#tabSurat .surat-draft-save-status{font-size:10.5px;color:#7d8aa0}

/* Riwayat isian "Harap Dibayar Kepada" & "Untuk Pembayaran" -----------------
   Nilai yang pernah disimpan tersedia sebagai dropdown: cukup klik bidangnya
   (atau tombol ▾) lalu pilih, tanpa mengetik ulang. Daftarnya permanen. */
#tabSurat .ss-wrap{position:relative;display:block}
/* Saat dropdown terbuka, bidang ini naik ke atas tetangganya agar kotak
   riwayat tidak terpotong oleh kolom/kartu di bawahnya. */
#tabSurat .ss-wrap.ss-open{z-index:130}
#tabSurat .ss-wrap input,#tabSurat .ss-wrap textarea{padding-right:34px}
#tabSurat .ss-toggle{position:absolute;top:6px;right:6px;width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;border:1px solid #dbe3ee;border-radius:7px;
  background:#f4f7fc;color:#5b6b86;cursor:pointer;line-height:1;font-size:9px;transition:background .15s,border-color .15s}
#tabSurat .ss-toggle::before{content:"";width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor}
#tabSurat .ss-toggle:hover{background:#e8eefb;border-color:#b9c9ea;color:#3159d9}
#tabSurat .ss-toggle[aria-expanded="true"]{background:#e4ecfd;border-color:#9db4ee;color:#3159d9}
#tabSurat .surat-suggestion-box{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:120;
  max-height:236px;overflow:auto;padding:4px;background:#fff;border:1px solid #dbe3ee;border-radius:11px;
  box-shadow:0 14px 32px rgba(16,24,40,.16);font-size:12.5px}
#tabSurat .surat-suggestion-box[hidden]{display:none}
#tabSurat .surat-suggestion-box .ss-head{position:sticky;top:-4px;z-index:1;padding:6px 9px 5px;margin:-4px -4px 2px;
  background:#fff;font-size:9.5px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:#94a3b8;
  border-bottom:1px solid #f0f3f8}
#tabSurat .surat-suggestion-box .ss-item{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;
  border-radius:8px;color:#1e2b46;font-weight:600;line-height:1.45;cursor:pointer}
#tabSurat .surat-suggestion-box .ss-item .ss-text{flex:1;min-width:0;overflow-wrap:anywhere}
#tabSurat .surat-suggestion-box .ss-item.active,#tabSurat .surat-suggestion-box .ss-item:hover{background:#eef4ff}
#tabSurat .surat-suggestion-box .ss-item.active{box-shadow:inset 0 0 0 1px #cfdcfb}
#tabSurat .surat-suggestion-box .ss-count{flex:0 0 auto;margin-top:2px;padding:1px 7px;border-radius:999px;
  background:#eef1f6;color:#64748b;font-size:9.5px;font-weight:800}
#tabSurat .surat-suggestion-box .ss-empty{padding:9px;color:#94a3b8;font-size:11.5px;line-height:1.5;font-weight:500}
#tabSurat .surat-suggestion-box .ss-more{padding:6px 9px;margin-top:2px;border-top:1px solid #f0f3f8;
  color:#94a3b8;font-size:10.5px;line-height:1.5;font-weight:500}
@media(max-width:1100px){#tabSurat .sv-layout{grid-template-columns:minmax(340px,410px) minmax(0,1fr)}}
@media(max-width:900px){#tabProfil .pf-grid>.pf-card:first-child .pf-fields{grid-template-columns:1fr}#tabProfil .pf-process-grid{grid-template-columns:1fr}#tabProfil .pf-process-bottom{align-items:stretch;flex-direction:column}#tabProfil .pf-save-btn{width:100%}#tabProfil .pf-hero{align-items:flex-start;flex-direction:column}#tabProfil .pf-hero-status{max-width:none}#tabProfil .pf-identity-state{align-items:flex-start;flex-direction:column}#tabSurat .sv-layout{grid-template-columns:1fr}#tabSurat .sv-right{position:static}}

#tabProfil .pf-hero-status.warn{background:#fff4e6;color:#9a5a00;border-color:#f2d4a5}
#tabProfil .pf-save-btn.profile-saved{background:linear-gradient(135deg,#0f8a61,#159a70);border-color:#0f8a61}

/* Rekap tersimpan — tampilan ringkas, mudah dipindai, dan adaptif */
#tabDashboard .dashboard-detail .table-wrap{overflow:auto;border:1px solid #e5eaf4;border-radius:14px;background:#fff}
#tabDashboard .dashboard-detail .data-table{min-width:820px;border-collapse:separate;border-spacing:0}
#tabDashboard .dashboard-detail .data-table thead th{position:sticky;top:0;z-index:1;background:#f1f5fc;color:#4a5875;font-size:11px;font-weight:900;letter-spacing:.045em;text-transform:uppercase;padding:13px 14px;border-bottom:1px solid #dfe6f2}
#tabDashboard .dashboard-detail .data-table tbody td{padding:13px 14px;vertical-align:middle;border-bottom:1px solid #edf1f7;font-size:12px}
#tabDashboard .dashboard-detail .data-table tbody tr:not(.dash-total-row):hover{background:#eef5ff}
#tabDashboard .dash-job-name{font-weight:850;color:#24365e;line-height:1.45;overflow-wrap:anywhere}
#tabDashboard .dash-payment-purpose{max-width:360px;min-width:180px;white-space:normal;line-height:1.5;color:#52617d;overflow-wrap:anywhere}
#tabDashboard .dashboard-detail .data-table .small{margin-top:4px;color:#8994a9;font-size:10px}
#tabDashboard .dashboard-detail .data-table td.num{font-weight:850;color:#24365e;white-space:nowrap;font-variant-numeric:tabular-nums}
#tabDashboard .dashboard-detail .dash-total-row td{position:sticky;bottom:0;background:#eaf0fc;color:#1c3268;font-weight:900;border-top:2px solid #c8d5f1;border-bottom:0;padding-top:14px;padding-bottom:14px}

/* Data Surat & Kontak: mode terkunci dan edit eksplisit */
#tabProfil .pf-edit-btn{margin-left:auto;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #d7e1f4;border-radius:9px;background:#f4f7ff;color:#3157ce;font-size:19px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
#tabProfil .pf-edit-btn:hover{background:#e8efff;transform:scale(1.06);box-shadow:0 4px 12px #3157ce22}
#tabProfil .pf-edit-btn[hidden]{display:none}
#tabProfil .pf-lock-status{margin-left:4px;padding:5px 8px;border-radius:999px;background:#fff4df;color:#986000;font-size:8px;font-weight:900;letter-spacing:.35px;white-space:nowrap}
#tabProfil .pf-lock-status.is-locked{background:#e7f8ef;color:#16804c}
#tabProfil .pf-card:nth-child(2) input[readonly]{background:#f2f5fa;border-color:#e1e7f0;color:#52617a;cursor:default}


/* Dashboard — Rekap Pajak menggantikan Tren Bulanan */
#tabDashboard .dx-tax-recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
#tabDashboard .dx-tax-box{min-height:142px;padding:18px;border:1px solid #e1e7f1;border-radius:16px;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;box-shadow:0 6px 18px rgba(30,41,59,.045)}
#tabDashboard .dx-tax-box span{font-size:11px;font-weight:850;letter-spacing:.02em;color:#65738b}
#tabDashboard .dx-tax-box b{font-size:23px;line-height:1.2;color:#1d2d4f;font-variant-numeric:tabular-nums;white-space:nowrap}
#tabDashboard .dx-tax-box small{font-size:10px;color:#8a95a8}
#tabDashboard .dx-tax-siplah{border-color:#d8e4ff;background:linear-gradient(145deg,#fff,#f4f7ff)}
#tabDashboard .dx-tax-siplah b{color:#3159d9}
#tabDashboard .dx-tax-nonsiplah{border-color:#d8efdf;background:linear-gradient(145deg,#fff,#f4fbf6)}
#tabDashboard .dx-tax-nonsiplah b{color:#14865a}
@media(max-width:650px){#tabDashboard .dx-tax-recap{grid-template-columns:1fr}}

/* ===== SIAP BOS MODERN TOPBAR + PROFILE AVATAR ===== */
.workspace-main{position:relative}
.workspace-topbar{height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 14px;padding:0 4px 0 8px;position:relative;z-index:30}
.topbar-context{display:flex;align-items:center;gap:9px;color:#6d7890;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.topbar-dot{width:8px;height:8px;border-radius:50%;background:#3159d9;box-shadow:0 0 0 5px #3159d914}
.topbar-actions{display:flex;align-items:center;gap:10px}
/* Tombol pekerjaan di bilah atas: sejajar (satu baris) dengan profil, di sebelah kirinya.
   Tampil di semua tab KECUALI Dashboard — lihat setTab() di js/core.js.
   Ukurannya sengaja ramping: bilah atas hanya punya ~1214px saat sidebar terbuka
   (app max-width 1480px − sidebar 230px − padding). Sudah diukur dengan Chrome:
   versi berlabel butuh ~1030px, jadi masih ada sisa ~180px. Jangan membesarkan
   padding/font tanpa mengukur ulang. */
.topbar-project-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.topbar-project-actions[hidden]{display:none}
.topbar-project-actions .topbar-btn{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:8px 11px;border-radius:10px;font-size:10.5px;font-weight:800;letter-spacing:.01em;
  line-height:1;white-space:nowrap}
.topbar-project-actions .topbar-btn svg{flex:0 0 auto;width:14px;height:14px}
.topbar-project-actions .topbar-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
/* Nama sekolah panjang tidak boleh mendorong tombol keluar layar. */
.profile-trigger{max-width:320px}
/* Penyerap kelebihan: bila bilah atas mulai sesak, yang mengalah adalah judul
   bagian (teksnya dipotong dengan "…"), BUKAN tombol pekerjaan. Tanpa ini,
   bilah atas bisa meluber di lebar menengah (mis. 1400–1500px). */
.workspace-topbar .topbar-context{min-width:0;flex:0 1 auto}
.workspace-topbar .topbar-context>#topbarSectionName{min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Layar sedang: sembunyikan label, sisakan ikon supaya tetap satu baris dengan profil. */
@media(max-width:1340px){
  .topbar-project-actions .topbar-btn span{display:none}
  .topbar-project-actions .topbar-btn{padding:8px 10px}
}
/* Layar sempit: bilah atas terlalu sesak — tombol pekerjaan disembunyikan.
   Padanannya tetap tersedia di dalam tab Surat Perintah (tombol "Simpan Data SPMU"). */
@media(max-width:1000px){
  .topbar-project-actions{display:none}
}
.profile-trigger{display:flex;align-items:center;gap:10px;min-width:205px;padding:5px 8px 5px 6px;border:1px solid #e0e6f1;border-radius:999px;background:rgba(255,255,255,.96);color:#243252;box-shadow:0 7px 20px rgba(35,53,94,.08);cursor:pointer;text-align:left;transition:transform .18s,box-shadow .18s,border-color .18s}
.profile-trigger:hover{transform:translateY(-1px);border-color:#cbd6eb;box-shadow:0 10px 26px rgba(35,53,94,.13)}
.profile-trigger-avatar,.profile-avatar-large{display:grid;place-items:center;flex:none;border-radius:50%;font-weight:900;color:#fff;background:linear-gradient(135deg,#3159d9,#6547d8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)}
.profile-trigger-avatar{width:38px;height:38px;font-size:11px;letter-spacing:.3px}
.profile-trigger-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.profile-trigger-copy b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-trigger-copy small{font-size:9.5px;color:#8994a8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-trigger-chevron{font-size:18px;color:#7f8aa1;line-height:1;margin-right:3px}

/* ===== DASHBOARD COMMAND CENTER ===== */
.dashboard-commandbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:10px 12px;border:1px solid #e3e8f2;border-radius:15px;background:linear-gradient(180deg,#fff,#f9fbff);box-shadow:0 7px 22px rgba(35,53,94,.045)}
.dashboard-quick-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.command-label{font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#8994a8;margin-right:3px}
.command-btn{border:1px solid #dce4f2;background:#fff;color:#34456d;border-radius:10px;padding:8px 11px;font-size:10.5px;font-weight:800;cursor:pointer;transition:.17s}
.command-btn:hover{border-color:#aebfe9;background:#f5f8ff;color:#294aa8;transform:translateY(-1px)}
.dashboard-filter{display:flex;align-items:center;gap:8px}
.dashboard-filter label{font-size:10px;font-weight:800;color:#7c889d}
.dashboard-filter select{min-width:185px;border:1px solid #dce4ef;border-radius:10px;background:#fff;color:#3d4d6e;padding:8px 10px;font-size:10.5px;font-weight:700;outline:none}
.dashboard-filter select:focus{border-color:#718be0;box-shadow:0 0 0 3px rgba(49,89,217,.08)}

/* ===== PROFILE MODAL ===== */
body.profile-modal-open{overflow:hidden}
.profile-modal{position:fixed;inset:0;display:none;z-index:3000}
.profile-modal.open{display:block}
.profile-modal-backdrop{position:absolute;inset:0;background:rgba(12,20,39,.52);backdrop-filter:blur(4px);animation:profileFadeIn .18s ease}
.profile-modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1120px,calc(100vw - 36px));max-height:calc(100vh - 36px);display:flex;flex-direction:column;overflow:hidden;background:#f6f8fc;border:1px solid rgba(255,255,255,.72);border-radius:22px;box-shadow:0 30px 90px rgba(8,17,40,.28);animation:profilePopIn .2s ease}
.profile-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;background:linear-gradient(120deg,#14244e,#2d4aa2 65%,#6547d8);color:#fff;flex:none}
.profile-modal-heading{display:flex;align-items:center;gap:13px;min-width:0}
.profile-avatar-large{width:50px;height:50px;font-size:13px;border:2px solid rgba(255,255,255,.35)}
.profile-modal-head .dx-eyebrow{color:#bdcaff;font-size:9px}
.profile-modal-head h2{margin:4px 0 3px;color:#fff;font-size:21px;letter-spacing:-.3px}
.profile-modal-head p{margin:0;color:#d7def2;font-size:10.5px;line-height:1.45;max-width:680px}
.profile-modal-close{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:25px;line-height:1;cursor:pointer}
.profile-modal-close:hover{background:rgba(255,255,255,.2)}
.profile-modal-status{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:14px 16px 0;padding:10px 13px;background:#fff;border:1px solid #e1e7f0;border-radius:13px;box-shadow:0 5px 18px rgba(30,41,59,.04);flex:none}
.profile-modal-status>div:first-child{display:flex;align-items:center;gap:10px}
.profile-modal-status b{display:block;color:#273654;font-size:11px}
.profile-modal-status small{display:block;color:#8b95a7;font-size:10px;margin-top:2px}
.profile-modal-status .auto-status{margin:0}
.profile-modal-body{overflow:auto;padding:14px 16px 18px}
.profile-modal .pf-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:14px;align-items:start}
.profile-modal .pf-card{background:#fff;padding:18px 19px;border-radius:15px;border:1px solid #e2e8f3;box-shadow:0 6px 20px rgba(30,41,59,.045)}
.profile-modal .pf-grid>.pf-card:nth-child(3){grid-column:1/-1}
.profile-modal .pf-title{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:#1f315d;font-size:12.5px;font-weight:800}
.profile-modal .pf-title-icon{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#edf2ff;color:#3157ce;font-size:9px;font-weight:900}
.profile-modal .pf-title-tag{margin-left:auto;padding:4px 7px;border-radius:999px;background:#edf3ff;color:#3761d5;font-size:8px;font-weight:900;letter-spacing:.35px}
.profile-modal .pf-title-tag.manual{background:#fff3e6;color:#a35b00}
.profile-modal .pf-grid>.pf-card:first-child .pf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;row-gap:12px}
.profile-modal .pf-fields{display:flex;flex-direction:column;gap:12px}
.profile-modal .pf-process-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.profile-modal .pf-process-next{margin:0 0 14px;padding:9px 11px;border-radius:10px;background:#f5f8ff;border:1px solid #e2e8f5;color:#64728c;font-size:10.5px}
.profile-modal .pf-process-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:15px;padding-top:13px;border-top:1px solid #e2e8f3}
.profile-modal .pf-process-bottom .surat-note{margin:0;max-width:800px;font-size:10px;line-height:1.5;color:#7a879c}
.profile-modal .pf-save-btn{flex:none;padding:9px 15px;border-radius:10px;font-size:10.5px;white-space:nowrap}
.profile-modal .pf-card .field input:not([type=file]),.profile-modal .pf-card .field textarea,.profile-modal .pf-card .field select{min-height:34px}
.profile-modal .pf-card .field input[readonly]{background:#f5f7fb;border:1px solid #e1e7f0;border-radius:9px;padding:7px 9px;color:#223252}
.profile-modal .pf-card .field input:not([readonly]):not([type=file]),.profile-modal .pf-card .field select{background:#fff;border:1px solid #dbe3ef;border-radius:9px;padding:7px 9px}
.profile-modal .pf-card .field input:not([readonly]):not([type=file]):focus,.profile-modal .pf-card .field select:focus{border-color:#7790e8;box-shadow:0 0 0 3px rgba(82,103,214,.09);outline:none}
.profile-modal .pf-edit-btn{margin-left:auto;display:inline-grid;place-items:center;width:29px;height:29px;border:1px solid #d7e1f4;border-radius:9px;background:#f4f7ff;color:#3157ce;font-size:18px;line-height:1;cursor:pointer}
.profile-modal .pf-edit-btn[hidden]{display:none}
.profile-modal .pf-lock-status{margin-left:3px;padding:4px 7px;border-radius:999px;background:#fff4df;color:#986000;font-size:8px;font-weight:900;white-space:nowrap}
.profile-modal .pf-lock-status.is-locked{background:#e7f8ef;color:#16804c}
.profile-modal .field label{font-size:10.5px;font-weight:700;color:#68758b}
.profile-modal .field .small{font-size:9.5px;line-height:1.45;color:#8b95a7}
.profile-modal .logo-kabupaten-status{min-height:42px;border-radius:10px;background:#f7f9fd;border:1px solid #e1e7f0}
@keyframes profileFadeIn{from{opacity:0}to{opacity:1}}
@keyframes profilePopIn{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:900px){.profile-modal-card{width:min(100vw - 20px,760px);max-height:calc(100vh - 20px)}.profile-modal .pf-grid{grid-template-columns:1fr}.profile-modal .pf-grid>.pf-card:nth-child(3){grid-column:auto}.profile-modal .pf-grid>.pf-card:first-child .pf-fields,.profile-modal .pf-process-grid{grid-template-columns:1fr}.profile-modal .pf-process-bottom{align-items:stretch;flex-direction:column}.profile-modal .pf-save-btn{width:100%}}
@media(max-width:560px){.workspace-topbar{height:52px}.topbar-context{display:none}.profile-trigger{min-width:0}.profile-trigger-copy{display:none}.profile-trigger-chevron{display:none}.profile-trigger-avatar{width:38px;height:38px}.profile-modal-card{border-radius:16px}.profile-modal-head{padding:14px}.profile-modal-heading .profile-avatar-large{width:42px;height:42px}.profile-modal-head h2{font-size:18px}.profile-modal-head p{display:none}.profile-modal-status{align-items:flex-start;flex-direction:column}.profile-modal-body{padding:10px}.dashboard-commandbar{align-items:stretch}.dashboard-filter{width:100%}.dashboard-filter select{flex:1}}

/* === MOBILE SIDEBAR DRAWER (2026) === */
.mobile-menu-btn{display:none;place-items:center;width:38px;height:38px;border:1px solid #e1e7f2;background:#f5f7fc;color:#52617d;border-radius:10px;cursor:pointer;margin-right:10px;flex:none}
.mobile-menu-btn:hover{background:#eef2fb;color:#243b80}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(12,20,39,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1199;opacity:0;pointer-events:none;transition:opacity .25s ease}
@media (max-width:760px){
  .app{padding:10px}
  .workspace-shell{gap:0}
  .mobile-menu-btn{display:inline-grid}
  .topbar-context{display:none}
  .workspace-topbar{padding:0 10px;height:54px;gap:10px}
  .topbar-actions{gap:8px}
  .profile-trigger{min-width:0;padding:4px;border:none;box-shadow:none;background:transparent}
  .profile-trigger-copy,.profile-trigger-chevron{display:none}
  .profile-trigger-avatar{width:34px;height:34px;font-size:10.5px}
  .topbar-logout-btn{padding:0;width:36px;height:36px;justify-content:center;border-radius:10px}
  .topbar-logout-btn span{display:none}
  .app-sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:280px;max-width:86vw;
    height:100vh;max-height:none;
    transform:translateX(-100%);
    transition:transform .28s ease;
    z-index:1200;
    border-radius:0 18px 18px 0;
    border-left:0;border-top:0;border-bottom:0;
    padding:16px;
    flex:0 0 280px;
    box-shadow:8px 0 28px rgba(35,53,94,.18);
    background:rgba(255,255,255,.98);
  }
  .workspace-shell.sidebar-open .app-sidebar{transform:translateX(0)}
  .workspace-shell.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .workspace-main{width:100%;margin-left:0;min-width:0}
  .app-sidebar .sidebar-label{display:block}
  .app-sidebar .sidebar-brand{display:block}
  .app-sidebar .sidebar-foot{display:none}
  .app-sidebar .sidebar-nav{display:flex;flex-direction:column;gap:7px}
  .app-sidebar .side-btn{justify-content:flex-start;padding:12px 11px}
  .app-sidebar .side-btn>span:not(.side-icon){display:inline}
  .app-sidebar .sidebar-head{justify-content:space-between}
  .app-sidebar .sidebar-toggle{display:inline-grid}
  .sidebar-reopen{display:none !important}
}

/* ==============================================================
   MODERN ENTERPRISE UI UPGRADE (2026)
   SIAP BOS ENTERPRISE EDITION
   ============================================================== */

/* === 1. PORTAL LOGIN (NPSN AUTH) === */
.gov-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(900px 520px at 10% -8%, rgba(37, 99, 235, 0.12) 0%, transparent 55%),
    radial-gradient(820px 500px at 102% 112%, rgba(59, 130, 246, 0.13) 0%, transparent 55%),
    linear-gradient(160deg, #f5f9ff 0%, #eaf1ff 46%, #f8fbff 100%);
  background-color: #eef4ff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  overflow-y: auto;
}

.gov-auth-card {
  background: #ffffff;
  border: 1px solid #e4ebfb;
  border-radius: 28px;
  padding: 44px 38px 34px;
  width: 100%;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(36, 86, 178, 0.18), 0 4px 14px rgba(36, 86, 178, 0.08);
  color: #0f1f3d;
  animation: govCardPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.gov-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #2563eb, #38bdf8, #2563eb);
}

@keyframes govCardPop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.gov-auth-emblems {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.gov-auth-emblem-wrap {
  width: 58px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gov-emblem-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.gov-auth-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.15);
}

.gov-auth-header-copy {
  margin-bottom: 26px;
}

.gov-inst-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: #eaf1ff;
  border: 1px solid #c9dbfb;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #2563eb;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.gov-inst-dot {
  width: 6px;
  height: 6px;
  background: #2563eb;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
}

.gov-app-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #0f1f3d;
  margin: 0 0 4px;
}

.gov-app-subtitle {
  font-size: 12.5px;
  color: #5b6b8c;
  margin: 0 0 6px;
  line-height: 1.5;
  font-weight: 500;
}

.gov-app-meta {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.gov-form-block {
  text-align: left;
  margin-bottom: 22px;
}

.gov-input-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.gov-input-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #33415c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gov-icon {
  color: #2563eb;
  flex-shrink: 0;
}

.gov-code-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: #eef2fb;
  color: #5b6b8c;
  letter-spacing: 0.4px;
  border: 1px solid #dde6f6;
}

.gov-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.gov-npsn-field {
  width: 100%;
  padding: 14px 44px 14px 16px;
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-align: center;
  background: #f7faff;
  border: 1.5px solid #dbe5f7;
  border-radius: 14px;
  color: #0f1f3d;
  outline: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gov-npsn-field::placeholder {
  color: #9aa8c4;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 500;
}

.gov-npsn-field:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.gov-npsn-field.is-invalid {
  border-color: #e5484d !important;
  box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.16) !important;
}

.gov-input-icon-hint {
  position: absolute;
  right: 14px;
  color: #9aa8c4;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.gov-school-preview {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #eef9f1;
  border: 1px solid #bfe9cf;
  border-radius: 12px;
  animation: govFadeIn 0.2s ease;
}

@keyframes govFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.gov-preview-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.gov-preview-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #16a36a;
  color: white;
}

.gov-preview-status {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0e8a52;
}

.gov-preview-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f3d29;
  line-height: 1.35;
}

.gov-preview-kec {
  font-size: 11.5px;
  color: #3f8f66;
  margin-top: 3px;
  font-weight: 600;
}

.gov-auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff0f0;
  border: 1px solid #ffd2d2;
  border-radius: 12px;
  color: #c1353a;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 14px;
  animation: govFadeIn 0.2s ease;
}

.gov-auth-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  margin-bottom: 16px;
}

.gov-auth-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
}

.gov-auth-submit:active:not(:disabled) {
  transform: translateY(0);
}

.gov-auth-submit:disabled {
  opacity: 0.75;
  cursor: wait;
}

.gov-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: govSpin 0.7s linear infinite;
}

@keyframes govSpin {
  to { transform: rotate(360deg); }
}

.gov-auth-links {
  text-align: center;
}

.gov-alt-portal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5b6b8c;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.16s ease;
}

.gov-alt-portal:hover {
  color: #2563eb;
  background: #f1f6ff;
}

.gov-link-arrow {
  transition: transform 0.16s ease;
}

.gov-alt-portal:hover .gov-link-arrow {
  transform: translateX(3px);
}

.gov-auth-trust-footer {
  border-top: 1px solid #e6ecf8;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  color: #6b7a9c;
  font-weight: 500;
  line-height: 1.5;
}

/* === LOGIN LOADING (membaca data NPSN) — blue/white, elegan & modern === */
.npsn-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(238, 244, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

.npsn-loading-overlay.show {
  display: flex;
  animation: mrFadeIn 0.2s ease-out;
}

.npsn-loading-card {
  width: min(380px, 92vw);
  background: #ffffff;
  border: 1px solid #e4ebfb;
  border-radius: 24px;
  padding: 34px 30px 30px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(36, 86, 178, 0.22);
}

.npsn-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 5px solid #e6edfb;
  border-top-color: #2563eb;
  border-right-color: #42a5f5;
  animation: govSpin 0.8s linear infinite;
}

.npsn-loading-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #2563eb;
}

.npsn-loading-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #0f1f3d;
}

.npsn-loading-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: #6b7a9c;
  line-height: 1.5;
}

.npsn-loading-dots {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.npsn-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9dbfb;
  animation: npsnBounce 1.2s ease-in-out infinite;
}

.npsn-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.npsn-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes npsnBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* Inline loader saat mengetik NPSN (lookup real-time) */
.gov-lookup-load {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #eef4ff;
  border: 1px solid #d6e4fb;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  animation: govFadeIn 0.2s ease;
}

.gov-lookup-spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2.5px solid #c9dbfb;
  border-top-color: #2563eb;
  animation: govSpin 0.7s linear infinite;
  flex-shrink: 0;
}

/* === 2. TOPBAR & LOGOUT ENHANCEMENT === */
.topbar-logout-btn {
  margin-left: 8px;
  padding: 7px 14px;
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.topbar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}

.topbar-logout-btn:active {
  transform: translateY(0);
}

/* === 3. SIDEBAR MODUL TERKAIT BADGE & ICONS === */
.side-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 12px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-btn .side-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.side-btn:hover .side-icon {
  background: #e2e8f0;
  color: #1e3a8a;
}

.side-btn.active .side-icon {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.side-btn.side-btn-mon {
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: rgba(239, 246, 255, 0.7);
  margin-top: 4px;
}

.side-btn.side-btn-mon:hover {
  background: rgba(239, 246, 255, 1);
  border-color: rgba(59, 130, 246, 0.4);
}

.side-btn.side-btn-mon .side-icon {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: white;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.3);
}

/* === 4. HERO BANNER MODERNIZATION === */
.hero {
  border-radius: 24px;
  background: linear-gradient(135deg, #0b152e 0%, #1e3a8a 52%, #1e40af 100%) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hero .title {
  font-weight: 900;
  letter-spacing: -0.6px;
}

.hero .steps {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #e2e8f0;
}

.step-num {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-weight: 800;
  font-size: 10px;
}

/* === 5. KPI METRICS CARDS === */
.dx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.dx-kpi {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dx-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.dx-kpi span {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dx-kpi b {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 900;
  color: #0f172a;
  margin: 8px 0 4px;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

.dx-kpi small {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* === 6. DATA TABLES PROFESSIONAL UPGRADE === */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.data-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 13px 16px;
  border-bottom: 1.5px solid #e2e8f0;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  font-weight: 500;
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: #f8fafc !important;
}

.data-table .num {
  font-family: 'JetBrains Mono', 'Plus Jakarta Sans', monospace;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* === BKU KOSONG (NIHIL) VISUAL CARD === */
.bku-empty-cell {
  padding: 42px 24px !important;
  text-align: center;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.bku-empty-callout {
  max-width: 540px;
  margin: 0 auto;
  padding: 28px 24px;
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
  text-align: center;
  animation: bkuFadeIn 0.35s ease;
}

@keyframes bkuFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.bku-empty-callout-icon {
  font-size: 38px;
  margin-bottom: 12px;
  display: inline-block;
  padding: 12px;
  background: #eff6ff;
  border-radius: 50%;
  border: 1px solid #bfdbfe;
  line-height: 1;
}

.bku-empty-callout-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.bku-empty-callout-desc {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  font-weight: 500;
}

/* Brand icon in auth screen */
.gov-brand-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 16px rgba(37, 99, 235, 0.35));
  transition: transform 0.25s ease;
}
.gov-brand-icon-wrap:hover {
  transform: scale(1.05);
}

/* Enhanced badge styling */
.badge-empty-bku {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 5px;
}



/* ===== Dashboard: dropdown periode & rekap tahap/triwulan ===== */
.dash-period-label{margin-left:10px;border-left:1px solid #cbd5e1;padding-left:10px}
.dash-select{border:1px solid #dce4f2;background:#fff;color:#34456d;border-radius:10px;padding:7px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;max-width:100%}
.dash-select:hover{border-color:#aebfe9}
.dash-select:focus{outline:2px solid #bfd0ff;outline-offset:1px}
.dash-recap{margin-bottom:18px}
.dash-recap .section-sub b{color:#2563eb}
.dash-recap-row{cursor:pointer;transition:background .15s}
.dash-recap-row:hover{background:#f5f8ff}
.dash-recap-row.dash-recap-active{background:#eaf0ff;box-shadow:inset 3px 0 0 #2563eb}
.dash-recap-table td .small{display:block;color:#8692a8;font-size:10.5px}
.dash-recap-table td:nth-child(2) .small{display:inline}

/* ===== Surat Perintah: navigasi bulan di atas pratinjau ===== */
.sv-monthnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:9px 12px;border:1px solid #dbe7f7;border-radius:12px;background:#f5f9ff}
.sv-monthnav.busy{opacity:.55;pointer-events:none}
.sv-month-label{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6b7a99;white-space:nowrap}
.sv-month-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.sv-month-chip{appearance:none;border:1px solid #c9d8f0;background:#fff;color:#2b4a8f;border-radius:999px;padding:5px 11px;white-space:nowrap;min-width:44px;text-align:center;font:inherit;font-size:11.5px;font-weight:700;line-height:1.4;cursor:pointer;transition:background .15s,color .15s,transform .12s}
.sv-month-chip:hover{background:#eaf1ff}
.sv-month-chip:active{transform:scale(.96)}
.sv-month-chip.active{background:#2563eb;border-color:#1d4ed8;color:#fff;cursor:default}
.sv-month-chip.unsaved{border-style:dashed;color:#92600a;background:#fff8e6;border-color:#f0c36d;cursor:help}
.sv-month-empty{font-size:11.5px;color:#8692a8;font-style:italic}
@media print{.sv-monthnav{display:none!important}}

/* ===== Dashboard dinamis: Komposisi Belanja & Rekap Pajak ===== */
.dx2-leg{position:relative;overflow:hidden;cursor:pointer;outline:none;padding-bottom:12px!important;transition:background .15s,opacity .2s,transform .15s,box-shadow .15s}
.dx2-leg:hover,.dx2-leg:focus-visible{background:#eef3ff!important;transform:translateX(2px)}
.dx2-leg.on{background:#e8eeff!important;box-shadow:inset 0 0 0 1.5px #3159d9}
.dx2-leg.off{opacity:.45}
.dx2-leg span small,.dx2-types span small{display:block;font-size:10.5px;font-weight:600;color:#8a95a8;margin-top:1px}
.dx2-leg em{font-style:normal;font-size:12px;color:#5b6882;font-variant-numeric:tabular-nums;white-space:nowrap}
.dx2-leg u,.dx2-types u{position:absolute;left:0;bottom:0;height:3px;border-radius:0 3px 3px 0;opacity:.85;transition:width .5s}
.dx-legend{min-width:230px}
.dx2-split{display:flex;height:10px;border-radius:99px;overflow:hidden;background:#edf1f8;margin-top:18px}
.dx2-split i{display:block;height:100%;background:#3159d9;transition:width .5s}
.dx2-split i.o{background:#0ea5a4}
.dx2-split.tax i.o,.dx2-split-l.tax s.o{background:#14865a}
.dx2-split-l{display:flex;gap:16px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;font-weight:700;color:#5b6882}
.dx2-split-l s{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:#3159d9}
.dx2-split-l s.o{background:#0ea5a4}
.dx2-stats,.dx2-taxhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:16px}
.dx2-stats>div,.dx2-taxhead>div{min-width:0;padding:10px 12px;border:1px solid #e6ebf4;border-radius:12px;background:#fbfcff}
.dx2-stats span,.dx2-taxhead span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#7a879e}
.dx2-stats b,.dx2-taxhead b{display:block;margin-top:3px;font-size:14px;color:#16213f;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dx2-taxhead>div:first-child{background:linear-gradient(145deg,#fff,#f1f5ff);border-color:#d8e4ff}
.dx2-taxhead>div:first-child b{font-size:18px;color:#3159d9}
.dx2-sub{margin-top:18px;font-size:12px;font-weight:900;color:#2b3a5e}
.dx2-sub small{font-weight:600;color:#8a95a8}
.dx2-types{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.dx2-types li{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:9px 11px 12px;border-radius:12px;background:#f7f9fd;font-size:13px;color:#4f5d77}
.dx2-types s{width:11px;height:11px;border-radius:4px;flex:0 0 11px}
.dx2-types span{flex:1;min-width:0;font-weight:800;color:#1d2d4f}
.dx2-types b{font-variant-numeric:tabular-nums;color:#16213f}
.dx2-trend{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;height:104px;margin-top:10px}
.dx2-tbar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit}
.dx2-tbar i{display:block;width:100%;max-width:22px;min-height:2px;border-radius:6px 6px 2px 2px;transition:height .5s,opacity .2s,filter .2s}
.dx2-tbar em{font-style:normal;font-size:9.5px;font-weight:800;color:#8a95a8;margin-top:4px;line-height:14px}
.dx2-tbar.dim i{opacity:.25}
.dx2-tbar:hover i{opacity:1;filter:brightness(1.1)}
.dx2-tbar.sel em{color:#3159d9}
.dx-tax-recap-card .dx-tax-recap{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.dx-tax-recap-card .dx-tax-box{min-height:96px}
.dx-tax-recap-card .dx-tax-box b{font-size:21px}
@media(max-width:560px){.dx-tax-recap-card .dx-tax-recap{grid-template-columns:1fr}.dx2-trend{gap:3px}}

/* ===== Panel Impor Dokumen BKU dinamis ===== */
#bkuImportCard{position:relative;transition:box-shadow .2s,border-color .2s}
#bkuImportCard.bkx-drag{border-color:#3159d9;box-shadow:0 0 0 3px #3159d933}
#bkuImportCard.bkx-drag::after{content:"Lepaskan berkas BKU di sini (PDF / XLSX / XLS)";position:absolute;inset:0;z-index:3;display:grid;place-items:center;border-radius:inherit;background:rgba(237,242,255,.93);color:#2949ad;font-weight:900;font-size:15px;pointer-events:none}
.bkx-top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:14px}
.bkx-steps{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.bkx-steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border:1px solid #e1e7f1;border-radius:999px;background:#f7f9fd;font-size:12px;font-weight:800;color:#8592a8;transition:all .2s}
.bkx-steps li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e4e9f3;color:#7a879e;font-size:11px}
.bkx-steps li.active{border-color:#b9c8ff;background:#eef3ff;color:#2949ad}
.bkx-steps li.active b{background:#3159d9;color:#fff}
.bkx-steps li.done{border-color:#bfe8d1;background:#effaf3;color:#08784a}
.bkx-steps li.done b{background:#14a468;color:#fff}
.bkx-steps li.busy b{animation:bkxpulse 1s infinite}
@keyframes bkxpulse{50%{box-shadow:0 0 0 5px #3159d933}}
.bkx-auto{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#5b6882;cursor:pointer}
.bkx-file{display:none;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid #e1e7f1;border-radius:14px;background:#fbfcff}
.bkx-file.show{display:flex}
.bkx-file .ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#3159d9;color:#fff;font-size:10px;font-weight:900}
.bkx-file .ico.x{background:#14865a}
.bkx-file .meta{flex:1;min-width:180px}
.bkx-file .meta b{display:block;font-size:13px;color:#1d2d4f;overflow-wrap:anywhere}
.bkx-file .meta small{font-size:11.5px;color:#8a95a8}
.bkx-pill{padding:4px 10px;border-radius:999px;background:#f1f4f9;color:#75839a;font-size:11px;font-weight:800}
.bkx-pill.ok{background:#e8f8ef;color:#08784a}.bkx-pill.busy{background:#eef3ff;color:#2949ad}.bkx-pill.err{background:#fff0ef;color:#a42d2d}.bkx-pill.warn{background:#fff7e5;color:#8b5a00}
.bkx-swap{padding:6px 11px;border:1px solid #dce4f2;border-radius:9px;background:#fff;color:#34456d;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.bkx-sum{display:none;margin-top:14px}
.bkx-sum.show{display:block}
.bkx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.bkx-tile{min-width:0;padding:11px 13px;border:1px solid #e6ebf4;border-radius:14px;background:#fff}
.bkx-tile span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#7a879e}
.bkx-tile b{display:block;margin-top:3px;font-size:15px;color:#16213f;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bkx-tile small{display:block;margin-top:2px;font-size:11px;color:#8a95a8;overflow-wrap:anywhere}
.bkx-tile.ok{background:#f4fbf6;border-color:#d8efdf}
.bkx-tile.warn{background:#fffaf0;border-color:#f6e3b5}
.bkx-prog{height:6px;margin-top:8px;border-radius:99px;background:#edf1f8;overflow:hidden}
.bkx-prog i{display:block;height:100%;background:linear-gradient(90deg,#3159d9,#14a468);transition:width .4s}
.bkx-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bkx-actions button{padding:8px 13px;border:1px solid #cfdaf5;border-radius:10px;background:#eef3ff;color:#2949ad;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.bkx-actions button:disabled{opacity:.45;cursor:not-allowed}

/* ===== Dashboard simple: persistent summary + three independent views ===== */
#tabDashboard{color:#1e293b;min-width:0}
#tabDashboard [hidden]{display:none!important}
#tabDashboard .card{padding:18px;border-radius:14px;background:#fff;border-color:#e2e8f0;box-shadow:0 2px 8px #0f172a04;margin-bottom:14px}
#tabDashboard .card:hover,#tabDashboard .dx-kpi:hover{transform:none;box-shadow:0 2px 8px #0f172a04}
#tabDashboard .dash-simple-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
#tabDashboard .dash-simple-head h2{font-size:26px;letter-spacing:-.7px;margin:0 0 5px;color:#16213f}
/* Preserve the original branding hero and all five workflow steps. */
#tabDashboard .dash-brand-hero{padding:28px 30px;border-radius:24px;color:#fff;margin-bottom:20px}
#tabDashboard .dash-brand-hero:hover{transform:none}
#tabDashboard .dash-brand-copy{display:flex;gap:16px;align-items:flex-start;min-width:0}
#tabDashboard .dash-brand-copy>div{min-width:0}
#tabDashboard .dash-brand-hero .top{gap:20px;align-items:flex-start}
#tabDashboard .dash-brand-hero .title{color:#fff;font-size:clamp(23px,2.5vw,34px);line-height:1.2;margin:8px 0 10px}
#tabDashboard .dash-brand-hero .muted{color:#d5def8;font-size:13px;line-height:1.6;max-width:760px}
#tabDashboard .dash-brand-hero .creator{color:#cbd7ff;font-size:11px;margin-top:15px}
#tabDashboard .dash-brand-hero .badge{font-size:10px;padding:8px 12px;color:#f4f7ff;align-self:flex-start}
#tabDashboard .dash-brand-hero .steps{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:18px}
#tabDashboard .dash-brand-hero .step{color:#e2e8f0}
@media(max-width:1100px){#tabDashboard .dash-brand-hero .top{flex-wrap:wrap}}
@media(max-width:560px){
  #tabDashboard .dash-brand-hero{padding:20px 17px;border-radius:18px}
  #tabDashboard .dash-brand-hero .title{font-size:22px}
  #tabDashboard .dash-brand-copy{gap:10px}
  #tabDashboard .dash-brand-copy img{width:44px!important;height:44px!important}
  #tabDashboard .dash-brand-hero .eyebrow{font-size:9px;letter-spacing:1px}
  #tabDashboard .dash-brand-hero .muted{font-size:12px}
  #tabDashboard .dash-brand-hero .steps{gap:7px;margin-top:16px;padding-top:14px}
  #tabDashboard .dash-brand-hero .step{font-size:10px;padding:6px 9px}
}
#tabDashboard .dash-simple-head p{font-size:13px;color:#52617a;margin:0 0 4px}
#tabDashboard .dx-updated{font-size:11px;color:#64748b}
#tabDashboard .dash-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#tabDashboard .command-btn,#tabDashboard .dx-refresh{font:700 12px/1.4 Inter,'Plus Jakarta Sans',sans-serif;border-radius:9px;padding:9px 12px;background:#fff;box-shadow:none;color:#334155;border:1px solid #dce4ef;min-height:38px;transform:none}
#tabDashboard .dash-primary{background:#3159d9;color:white;border-color:#3159d9}
#tabDashboard .command-btn:hover,#tabDashboard .dx-refresh:hover{background:#eef3ff;border-color:#aec0f0;transform:none}
#tabDashboard .dash-primary:hover{background:#2548bd;color:white}
#tabDashboard .dx-refresh{gap:6px}
#tabDashboard .dx-refresh svg{width:16px;height:16px}
#tabDashboard .dash-filterbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:14px}
#tabDashboard .dash-filterbar label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#475569}
#tabDashboard .dash-select{font:600 12px/1.4 Inter,sans-serif;padding:8px 10px;max-width:100%;min-width:120px}
#tabDashboard .dash-filter-note{font-size:11px;line-height:1.5;color:#64748b;flex:1;min-width:180px}
#tabDashboard .dx-kpis{gap:12px;margin-bottom:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
#tabDashboard .dx-kpi{padding:16px;border-radius:13px;box-shadow:none;border-color:#e2e8f0}
#tabDashboard .dx-kpi-ico{position:absolute;top:14px;right:13px;width:28px;height:28px;border-radius:8px;margin:0}
#tabDashboard .dx-kpi-ico svg{width:16px;height:16px}
#tabDashboard .dx-kpi span{padding-right:30px;font-size:11px;letter-spacing:0;text-transform:none;color:#52617a;min-height:28px}
#tabDashboard .dx-kpi b{font-size:clamp(17px,1.65vw,23px);line-height:1.3;margin:5px 0 4px;color:#16213f}
#tabDashboard .dx-kpi small{font-size:11px;color:#64748b;line-height:1.5}
#tabDashboard .dash-context{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin:0 2px 15px;font-size:12px;color:#64748b}
#tabDashboard .dash-context b{margin-left:6px;color:#16213f;font-size:14px}
#tabDashboard .dash-view-tabs{display:flex;gap:6px;border-bottom:1px solid #dce4ef;padding-bottom:8px;margin-bottom:16px}
#tabDashboard .dash-view-tabs button{font:700 13px/1.4 Inter,'Plus Jakarta Sans',sans-serif;color:#52617a;background:transparent;padding:10px 16px;border:0;border-radius:9px;cursor:pointer;white-space:nowrap}
#tabDashboard .dash-view-tabs button[aria-selected="true"]{color:#284fca;background:#eaf0ff}
#tabDashboard .dash-view-tabs button:hover{background:#f0f4fc}
#tabDashboard .dash-view-tabs button span{font-size:10px;display:inline-block;margin-left:5px;padding:2px 6px;background:#dce6ff;color:#3159d9;border-radius:5px}
#tabDashboard button:focus-visible,#tabDashboard summary:focus-visible,#tabDashboard select:focus-visible,#tabDashboard tr:focus-visible{outline:2px solid #3159d9;outline-offset:3px}
#tabDashboard .dx-row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}
#tabDashboard .dx-row .card{margin-bottom:0;min-width:0}
#tabDashboard .section-title{font-size:15px;color:#1e293b}
#tabDashboard .section-sub{color:#64748b;line-height:1.5;font-size:11.5px;max-width:700px}
#tabDashboard .dx-donut-wrap{gap:15px;margin-top:14px;flex-wrap:nowrap}
#tabDashboard .dx-donut{width:125px;height:125px;flex:0 0 125px}
#tabDashboard .dx-donut-hole{width:90px;height:90px;padding:7px}
#tabDashboard .dx-donut-hole span{font-size:8px;letter-spacing:0}
#tabDashboard .dx-donut-hole b{font-size:9px;white-space:nowrap}
#tabDashboard .dx-legend{min-width:0;gap:6px}
#tabDashboard .dx-legend li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;gap:3px 8px;padding:9px 10px 12px;font-size:11px}
#tabDashboard .dx-legend s{width:9px;height:9px;grid-row:1;grid-column:1}
#tabDashboard .dx-legend span{grid-column:2;grid-row:1/3;line-height:1.4}
#tabDashboard .dx-legend em{grid-row:1;grid-column:3;font-size:11px}
#tabDashboard .dx-legend b{grid-row:2;grid-column:3;font-size:11px;text-align:right}
#tabDashboard .dx-legend small{font-size:10px;color:#64748b}
#tabDashboard .dx2-split{height:7px;margin-top:12px}
#tabDashboard .dx2-split-l{font-size:11px;color:#52617a}
#tabDashboard .dx-tax-recap{gap:10px;margin-top:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
#tabDashboard .dx-tax-box{min-height:92px;padding:14px 12px;border-radius:11px;box-shadow:none;background:#f8faff}
#tabDashboard .dx-tax-nonsiplah{background:#f4fbf6}
#tabDashboard .dx-tax-box b{font-size:clamp(15px,1.5vw,20px);white-space:normal;overflow-wrap:anywhere}
#tabDashboard .dx-tax-box span{font-size:11px;color:#52617a}
#tabDashboard .dx-tax-box small{font-size:10px;color:#64748b;line-height:1.4}
#tabDashboard .dash-fold{border-top:1px solid #e2e8f0;margin-top:15px;padding-top:12px}
#tabDashboard .dash-fold summary{cursor:pointer;color:#365589;font-size:12px;font-weight:700;line-height:1.5;padding:3px 0;list-style:none}
#tabDashboard .dash-fold summary::before{content:"+";display:inline-block;width:18px;font-size:16px;font-weight:500}
#tabDashboard .dash-fold[open]>summary::before{content:"−"}
#tabDashboard .dash-category-fold{background:#fff;border:1px solid #e2e8f0;padding:13px 17px;border-radius:12px;margin:0 0 12px}
#tabDashboard .dash-category-fold>.dashboard-view-controls{margin-top:14px}
#tabDashboard .dash-help{margin:0;padding:4px 2px;border:0}
#tabDashboard .dash-help p{font-size:12px;line-height:1.7;color:#52617a}
#tabDashboard .dx2-sub{font-size:11.5px}
#tabDashboard .dx2-stats b,#tabDashboard .dx2-taxhead b{font-size:12px}
#tabDashboard .dx2-stats span,#tabDashboard .dx2-taxhead span{color:#64748b}
#tabDashboard .dx2-trend{height:80px}
#tabDashboard .dx2-types{max-height:250px;overflow:auto}
#tabDashboard .dx2-types li{font-size:12px}
#tabDashboard .recap-switch{margin-left:auto}
#tabDashboard .view-switch-btn{font:700 12px/1.4 Inter,sans-serif;padding:8px 12px}
#tabDashboard .dash-detail-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:#52617a}
#tabDashboard .dash-detail-filter select,#tabDashboard .dash-pagination select{font:600 12px/1.4 Inter,sans-serif;border:1px solid #dce4ef;border-radius:8px;padding:8px;background:#fff;color:#334155;max-width:100%}
#tabDashboard #dashTableStatus{margin-left:auto;font-size:11px}
#tabDashboard .dashboard-detail .table-wrap{max-height:min(450px,56vh);overscroll-behavior:contain}
#tabDashboard .dash-recap .table-wrap{max-height:480px;margin-top:8px}
#tabDashboard .data-table th,#tabDashboard .data-table td{padding:10px 12px}
#tabDashboard .cat-pill{white-space:normal;line-height:1.5;font-size:10px}
#tabDashboard .dash-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:#52617a}
#tabDashboard .dash-pagination>div{display:flex;align-items:center;gap:10px}
#tabDashboard .dash-pagination button{padding:8px 10px;font:700 11px Inter,sans-serif;border:1px solid #dce4ef;border-radius:8px;background:#fff;color:#334155;cursor:pointer}
#tabDashboard .dash-pagination button:disabled{opacity:.45;cursor:default}
#tabDashboard .empty{color:#64748b;line-height:1.7}
@media(max-width:1200px){
  #tabDashboard .dx-donut-wrap{flex-wrap:wrap}
  #tabDashboard .dx-donut{width:105px;height:105px;flex-basis:105px;margin:auto}
  #tabDashboard .dx-donut-hole{width:78px;height:78px}
  #tabDashboard .dx-legend{flex-basis:100%}
}
@media(max-width:900px){
  #tabDashboard .dx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tabDashboard .dx-row{grid-template-columns:1fr}
  #tabDashboard .dx-donut-wrap{flex-wrap:nowrap}
  #tabDashboard .dx-legend{flex-basis:auto}
}
@media(max-width:560px){
  #tabDashboard .dash-simple-head h2{font-size:23px}
  #tabDashboard .dash-head-actions{gap:6px}
  #tabDashboard .command-btn,#tabDashboard .dx-refresh{font-size:11px;padding:8px 10px}
  #tabDashboard .dash-filterbar{gap:10px;padding:12px}
  #tabDashboard .dash-filterbar label{width:100%;justify-content:space-between}
  #tabDashboard .dash-filterbar select{max-width:70%}
  #tabDashboard .dash-filter-note{min-width:0}
  #tabDashboard .dx-kpis{gap:8px}
  #tabDashboard .dx-kpi{padding:13px 10px}
  #tabDashboard .dx-kpi span{padding-right:0;min-height:28px}
  #tabDashboard .dx-kpi-ico{display:none}
  #tabDashboard .dx-kpi b{font-size:16px}
  #tabDashboard .dx-kpi small{font-size:10px}
  #tabDashboard .dash-view-tabs{gap:2px}
  #tabDashboard .dash-view-tabs button{padding:9px 8px;font-size:11px;flex:1}
  #tabDashboard .dash-view-tabs button span{margin-left:2px;padding:1px 4px}
  #tabDashboard .dx-donut-wrap{flex-wrap:wrap}
  #tabDashboard .dx-legend{flex-basis:100%}
  #tabDashboard .card{padding:15px}
  #tabDashboard .dx-tax-recap{grid-template-columns:1fr 1fr}
  #tabDashboard .dx-tax-box{padding:12px 9px}
  #tabDashboard .dash-detail-filter label{width:100%}
  #tabDashboard .dash-pagination{align-items:flex-start}
  #tabDashboard .dash-pagination>div{gap:6px}
  #tabDashboard .dashboard-detail .search{width:100%}
}
@media print{#tabDashboard .dash-fold:not([open])>summary{color:#334155}}

/* ==========================================================
   AMBIL BKU DARI ARKAS — di tab BKU (dipindahkan dari panel floating)
   ========================================================== */
#arkasLiveCard .arkas-live-body{padding:4px 2px}
#arkasLiveCard .arkas-live-status{font-size:12px;padding:8px 10px;border-radius:8px;margin-bottom:10px;background:#f1f5f9;color:#475569;font-weight:600}
#arkasLiveCard .arkas-live-status.ok{background:#ecfdf5;color:#065f46}
#arkasLiveCard .arkas-live-status.warn{background:#fffbeb;color:#92400e}
#arkasLiveCard .arkas-live-status.err{background:#fef2f2;color:#991b1b}
#arkasLiveCard .arkas-live-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
#arkasLiveCard .arkas-live-row label{font-size:11px;font-weight:800;color:#475569;white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
#arkasLiveCard .arkas-live-row select{flex:1;min-width:120px;padding:9px 10px;border:1px solid #d7dee6;border-radius:10px;font-size:13px;font-weight:700;color:#0b5e49;background:#fff;cursor:pointer}
#arkasLiveCard .arkas-live-row select:disabled{opacity:.6;cursor:not-allowed;background:#f8fafc;color:#94a3b8}
#arkasLiveCard .arkas-live-pick{font-size:11px;color:#94a3b8;min-width:100px}
#arkasLiveCard .arkas-live-meta{font-size:11px;color:#6b7280;margin:8px 0 0;text-align:center}
#arkasLiveCard .arkas-live-help{margin-top:10px;padding:10px 12px;background:#f8fafc;border:1px solid #eef1f4;border-radius:10px;font-size:11px;color:#475569}
#arkasLiveCard .arkas-live-help code{background:#eef2f6;padding:1px 5px;border-radius:4px;font-size:11px}
#arkasLiveCard .arkas-live-pesan{font-size:11px;color:#475569;line-height:1.5;margin-bottom:6px}
#arkasLiveCard .arkas-live-log{max-height:160px;overflow:auto;background:#f8fafc;border:1px solid #eef1f4;border-radius:10px;padding:8px;margin-top:10px;font-size:11px}
#arkasLiveCard .arkas-live-log .al-line{padding:2px 0}
#arkasLiveCard .arkas-live-log .al-t{color:#9ca3af;margin-right:5px}
#arkasLiveCard .arkas-live-log .ok{color:#0b5e49;font-weight:700}
#arkasLiveCard .arkas-live-log .warn{color:#b45309}
#arkasLiveCard .arkas-live-log .err{color:#b91c1c;font-weight:700}
#arkasLiveCard .arkas-live-foot{margin-top:10px;text-align:center;font-size:11px}
#arkasLiveCard .arkas-live-foot a{color:#14806a;text-decoration:none;cursor:pointer;font-weight:700}
#arkasLiveCard .arkas-live-foot a:hover{text-decoration:underline}

/* ==========================================================
   STOK OPNAME — sorting header
   ========================================================== */
#stokOpnameTable thead th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:18px}
#stokOpnameTable thead th.sortable:hover{background:#e8ecf5}
#stokOpnameTable thead th.sortable::after{content:"⇅";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;color:#9ca3af;opacity:.6}
#stokOpnameTable thead th.sortable.sort-asc::after{content:"▲";color:#3159d9;opacity:1}
#stokOpnameTable thead th.sortable.sort-desc::after{content:"▼";color:#3159d9;opacity:1}