:root{
  --navy:#16324A; --navy-2:#0F2438; --blue:#2C6CA0; --blue-light:#EAF2F9;
  --orange:#E8822E; --orange-light:#FDEEDF;
  --ink:#1E2A33; --muted:#5B6B79; --line:#DBE3EA; --bg:#EEF2F6; --surface:#FFFFFF;
  --success:#2E9E6B; --success-bg:#E4F6EE;
  --warning:#C7791A; --warning-bg:#FDEEDF;
  --danger:#C13E3E; --danger-bg:#FBE7E7;
  --slate:#64748B; --slate-bg:#EEF1F5;
}
*{box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);margin:0;}
.font-head{font-family:'IBM Plex Sans',sans-serif;}
.font-mono{font-family:'IBM Plex Mono',monospace;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#C3CEDA;border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* title-block corner marks — signature motif referencing engineering drawings */
.tblock{position:relative;}
.tblock::before,.tblock::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;}
.tblock::before{top:-1px;left:-1px;border-top:2px solid var(--orange);border-left:2px solid var(--orange);}
.tblock::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--orange);border-right:2px solid var(--orange);}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;}
.btn{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13px;border-radius:7px;padding:8px 14px;cursor:pointer;border:1px solid transparent;transition:.12s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-2);}
.btn-accent{background:var(--orange);color:#fff;}
.btn-accent:hover{background:#D2721F;}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-outline:hover{background:var(--bg);}
.btn-ghost{background:transparent;color:var(--muted);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:#fff;color:var(--danger);border-color:#F0C6C6;}
.btn-danger:hover{background:var(--danger-bg);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-sm{padding:5px 10px;font-size:12px;}

.badge{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid transparent;}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.b-gray{background:var(--slate-bg);color:var(--slate);}
.b-amber{background:var(--warning-bg);color:var(--warning);}
.b-blue{background:var(--blue-light);color:var(--blue);}
.b-green{background:var(--success-bg);color:var(--success);}
.b-red{background:var(--danger-bg);color:var(--danger);}

input,select,textarea{font-family:'Inter',sans-serif;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%;background:#fff;color:var(--ink);}
input:focus,select:focus,textarea:focus{outline:2px solid #BCD4E9;border-color:var(--blue);}
label.flabel{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:block;}

table{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line);background:#F7F9FB;white-space:nowrap;}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle;}
.tbl tr:hover td{background:#FAFBFC;}
.tbl-row-click{cursor:pointer;}

.navitem{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;color:#C9D6E3;font-size:13px;font-weight:500;cursor:pointer;transition:.12s;}
.navitem:hover{background:#1F3E58;color:#fff;}
.navitem.active{background:var(--orange);color:#fff;}
.navitem svg{flex-shrink:0;}

.modal-overlay{position:fixed;inset:0;background:rgba(15,24,36,.55);display:flex;align-items:flex-start;justify-content:center;z-index:50;overflow-y:auto;padding:28px 16px;}
.modal-box{background:#fff;border-radius:12px;max-width:960px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);}

.qdoc{background:#fff;font-family:'Inter',sans-serif;font-size:11.5px;color:#111;padding:26px 30px;width:100%;position:relative;}
.qdoc table{border:1px solid #333;}
.qdoc th,.qdoc td{border:1px solid #333;padding:5px 7px;}
.qdoc .qhead-row td{border:none;padding:2px 0;}

.stamp-svg{position:absolute;width:118px;height:118px;transform:translate(-50%,-50%) rotate(-11deg);opacity:.85;pointer-events:none;}

.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:9px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:80;display:flex;align-items:center;gap:8px;}

.kpi-card{background:linear-gradient(180deg,#fff, #FBFCFD);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.risk-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}

#print-area{display:none;}
@media print{
  body *{visibility:hidden;}
  #print-area, #print-area *{visibility:visible;}
  #print-area{display:block !important;position:absolute;left:0;top:0;width:100%;}
}

/* =========================================================
   RESPONSIVE (tablet & mobile) — desktop (>=1024px) tidak berubah.
   Sidebar -> drawer, tabel scroll horizontal di dalam kartu,
   grid -> 2/1 kolom, modal & form ramah layar sentuh.
   ========================================================= */
.nav-burger,.nav-overlay{display:none;}
html,body{max-width:100%;}
@media (max-width:1023px){
  .app-aside{position:fixed;top:0;bottom:0;left:0;z-index:70;transform:translateX(-100%);transition:transform .2s ease;width:272px;max-width:86vw;box-shadow:none;}
  .app-aside.open{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.35);}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(15,24,36,.5);z-index:65;opacity:0;pointer-events:none;transition:opacity .2s;}
  .nav-overlay.open{opacity:1;pointer-events:auto;}
  .nav-burger{display:inline-flex;padding:8px 10px;margin-right:10px;flex-shrink:0;}
  .app-header{padding-left:14px;padding-right:14px;height:auto;min-height:60px;}
  .app-title{min-width:0;flex:1;}
  .app-title>div:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .app-main{padding:16px 14px;}
  .navitem{padding:12px 14px;}
}
@media (max-width:1023px){
  /* tabel: scroll horizontal di dalam kartu, bukan di seluruh halaman */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .card table:not(.qdoc table){min-width:560px;}
  .modal-box table:not(.qdoc table){min-width:0;}
  .modal-box .card{overflow-x:auto;}
  .modal-box .card table:not(.qdoc table){min-width:520px;}
}
@media (max-width:767px){
  .user-meta{display:none;}
  .app-title>div:nth-child(2){display:none;}
  .app-header-right{gap:8px !important;}
  .app-header-right>.h-8{display:none;}
  .app-main [class*="grid-cols-3"],.app-main [class*="grid-cols-4"],.app-main [class*="grid-cols-5"],.app-main [class*="grid-cols-6"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .modal-box [class*="grid-cols-"]{grid-template-columns:minmax(0,1fr) !important;}
  [class*="col-span-"]{grid-column:1 / -1 !important;}
  .modal-overlay{padding:0;align-items:stretch;}
  .modal-box{border-radius:0;min-height:100%;max-width:100% !important;}
  .modal-box div[style*="max-width:900px"]{overflow-x:auto;}
  .modal-box .qdoc{min-width:640px;}
  .app-main .flex.items-center.justify-between,.modal-box .flex.items-center.justify-between{flex-wrap:wrap;gap:8px;}
  input,select,textarea{font-size:16px;padding:10px 12px;}   /* cegah auto-zoom iOS */
  .btn{min-height:40px;padding:9px 14px;}
  .btn-sm{min-height:36px;padding:7px 11px;}
  .toast{left:12px;right:12px;bottom:12px;}
  .kpi-card{padding:12px 13px;}
  #bellDropdown,.card[style*="width:340px"]{width:min(340px,calc(100vw - 28px)) !important;right:-60px !important;}
}
@media (max-width:479px){
  .app-main [class*="grid-cols-"]{grid-template-columns:minmax(0,1fr) !important;}
  .app-main .kpi-grid,.app-main [class*="grid-cols-"]:has(>.kpi-card){grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media print{ .app-aside,.nav-overlay,.app-header{display:none !important;} }