*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#1c1c1e;
  --sidebar:linear-gradient(180deg,#2d0000 0%,#6b0000 100%);
  --sidebar-border:#4a0000;
  --nav-hover:linear-gradient(90deg,#4a3500,#2a1e00);
  --nav-active:linear-gradient(90deg,#5a4000,#3a2800);
  --nav-active-text:#f6c90e;
  --nav-hover-text:#fbbf24;
  --field-bg:#0d0d0f;
  --field-border:#1a4a1a;
  --field-border-active:#00ff88;
  --field-text:#e0e0e0;
  --card-bg:#252528;
  --card-header-bg:#1e1e22;
  --topbar:#1a1a1c;
  --border:#2a2a2e;
  --text:#e0e0e0;
  --text-muted:#6a6a7a;
  --kuning:#f6c90e;
  --merah:#e53e3e;
  --sidebar-w:230px;
}
html,body{height:100%;margin:0;padding:0;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden;}
a{text-decoration:none;color:inherit;}

/* ── SIDEBAR ── */
#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--sidebar);display:flex;flex-direction:column;height:100vh;border-right:1px solid var(--sidebar-border);position:fixed;left:0;top:0;z-index:100;transition:transform .25s;}
#sb-head{padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,0.08);text-align:center;}
.sb-logos{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.sb-logos img{width:46px;height:46px;object-fit:contain;border-radius:8px;}
.sb-satuan{font-size:8px;color:rgba(255,255,255,.35);letter-spacing:1.2px;text-transform:uppercase;font-weight:600;line-height:1.4;}
#sb-nav{flex:1;overflow-y:auto;padding:8px 0;}
#sb-nav::-webkit-scrollbar{width:3px;}
#sb-nav::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:2px;}
.nav-lbl{font-size:8px;color:rgba(255,255,255,.18);letter-spacing:1.5px;text-transform:uppercase;padding:10px 16px 4px;font-weight:600;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;border-radius:6px;margin:1px 8px;color:rgba(255,255,255,.55);font-size:12.5px;text-decoration:none;user-select:none;transition:background .15s,color .15s;border-left:2px solid transparent;}
.nav-item:hover{background:var(--nav-hover);color:var(--nav-hover-text);}
.nav-item.active{background:var(--nav-active);color:var(--nav-active-text);font-weight:700;border-left:2px solid var(--kuning);}
.nav-item.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.nav-icon{font-size:14px;width:18px;text-align:center;}
.nav-soon{margin-left:auto;font-size:8px;background:rgba(255,255,255,.1);padding:2px 5px;border-radius:3px;color:rgba(255,255,255,.4);}
#sb-foot{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7a0000,#e53e3e);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.sb-user .u1{font-size:11px;font-weight:600;color:#c0c0d0;}
.sb-user .u2{font-size:9px;color:#3a3a4a;}
.online-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;margin-left:auto;flex-shrink:0;}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;}

/* ── MAIN ── */
#main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;margin-left:var(--sidebar-w);}

/* ── TOPBAR ── */
#topbar{height:48px;background:var(--topbar);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;flex-shrink:0;gap:10px;}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:4px;font-size:18px;}
.bc{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);}
.bc-cur{color:#fff;font-weight:600;}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.clock-box .tv{font-size:13px;font-weight:700;color:#fff;text-align:right;}
.clock-box .ts{font-size:9px;color:var(--text-muted);text-align:right;}

/* ── CONTENT ── */
#content{flex:1;overflow-y:auto;min-height:0;padding:20px 8px;}
#content::-webkit-scrollbar{width:5px;}
#content::-webkit-scrollbar-thumb{background:#2a2a3a;border-radius:2px;}

/* ── FLASH ── */
.flash-msg{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:10px;}
.flash-success{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25);}
.flash-danger{background:rgba(229,62,62,.12);color:#f87171;border:1px solid rgba(229,62,62,.25);}
.flash-warning{background:rgba(251,191,36,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.25);}

/* ── BACK BTN ── */
.back-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-bottom:14px;padding:5px 10px;border-radius:6px;border:1px solid var(--border);transition:color .15s,border-color .15s;}
.back-btn:hover{color:var(--kuning);border-color:var(--kuning);}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.page-title{font-size:18px;font-weight:700;color:var(--kuning);}
.page-subtitle{font-size:11px;color:var(--text-muted);margin-top:3px;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}

/* ── STAT BOXES ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.stat-box{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.stat-label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.stat-value{font-size:20px;font-weight:800;color:var(--text);}
.stat-value.blue,.stat-value.green{color:var(--kuning);}

/* ── CARDS ── */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:16px;overflow:hidden;}
.card-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--card-header-bg);border-bottom:1px solid var(--border);font-weight:700;font-size:13px;color:var(--kuning);}
.card-body{padding:16px;}
.icon{font-size:14px;}

/* ── FORMS ── */
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.form-control,.form-select{width:100%;background:var(--field-bg);border:1px solid var(--field-border);border-radius:8px;padding:9px 12px;color:var(--field-text);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;}
.form-control:focus,.form-select:focus{border-color:var(--field-border-active);}
.form-control::placeholder{color:#3a3a4a;}
textarea.form-control{resize:vertical;}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:5px;}
.req{color:var(--merah);}
.text-end{text-align:right;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s,transform .1s;}
.btn:hover{opacity:.88;}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,#7a0000,#c0392b);color:#fff;}
.btn-success{background:linear-gradient(135deg,#166534,#22c55e);color:#fff;}
.btn-danger{background:rgba(229,62,62,.2);color:#f87171;border:1px solid rgba(229,62,62,.3);}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border);}
.btn-block{width:100%;justify-content:center;margin-top:6px;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-xs{padding:2px 7px;font-size:11px;border-radius:4px;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;}
.badge-blue{background:rgba(59,130,246,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3);}
.badge-green{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3);}
.badge-gray{background:rgba(255,255,255,.07);color:var(--text-muted);border:1px solid var(--border);}
.badge-orange{background:rgba(245,158,11,.2);color:#f59e0b;border:1px solid rgba(245,158,11,.3);}

/* ── TABLES ── */
.item-table{width:100%;border-collapse:collapse;font-size:12px;}
.item-table th,.item-table td{padding:7px 10px;border-bottom:1px solid var(--border);text-align:left;}
.item-table th{color:var(--text-muted);font-weight:700;font-size:10px;text-transform:uppercase;background:rgba(0,0,0,.2);}
.item-table .center{text-align:center;}
.item-table .right{text-align:right;}

/* ── ENTRY CARDS ── */
.entry-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:12px;overflow:hidden;}
.entry-card-head{display:flex;gap:12px;padding:14px 16px;align-items:flex-start;}
.entry-no{width:28px;height:28px;background:rgba(246,201,14,.15);border:1px solid rgba(246,201,14,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--kuning);flex-shrink:0;}
.entry-info{flex:1;min-width:0;}
.entry-teks{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}
.entry-sp{font-size:11px;color:var(--text-muted);}
.inline-form{margin:0;}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted);}
.empty-icon{font-size:40px;margin-bottom:12px;}
.empty-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;}
.empty-sub{font-size:13px;}

/* ── RADIO ── */
.radio-group{display:flex;flex-direction:column;gap:8px;}
.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer;}
.radio-option input[type=radio]{accent-color:var(--kuning);}
.radio-option label{font-size:13px;color:var(--text);cursor:pointer;}

/* ── ITEM SECTION (RAB) ── */
.item-add-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.item-section{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:10px;}
.item-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.item-section-title{font-size:13px;font-weight:600;color:var(--kuning);}

/* ── RENBUT SEKSI CARDS ── */
.seksi-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;overflow:hidden;}
.seksi-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--card-header-bg);border-bottom:1px solid var(--border);}
.seksi-letter{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#f6c90e;color:#000;font-weight:700;font-size:14px;flex-shrink:0;}
.seksi-name{font-weight:600;font-size:13px;flex:1;min-width:0;word-break:break-word;}
.seksi-subtotal{font-size:12px;color:var(--kuning);font-weight:600;white-space:nowrap;}
.seksi-empty{padding:16px;color:var(--text-muted);font-size:13px;font-style:italic;}
.seksi-footer{padding:8px 16px;border-top:1px solid var(--border);}

/* ── RENBUT ITEM TABLE ── */
.item-renbut-table{width:100%;border-collapse:collapse;font-size:12px;}
.item-renbut-table th,.item-renbut-table td{padding:7px 12px;border-bottom:1px solid var(--border);text-align:left;}
.item-renbut-table th.center{text-align:center;}
.item-renbut-table th.right{text-align:right;}
.item-renbut-table th{color:var(--text-muted);font-weight:600;font-size:11px;background:rgba(0,0,0,.15);}
.item-renbut-table td.center{text-align:center;}
.item-renbut-table td.right{text-align:right;font-variant-numeric:tabular-nums;}
.item-renbut-table tbody tr:last-child td{border-bottom:none;}

/* ── RENBUT INLINE FORM ── */
.item-form{padding:16px;background:rgba(0,0,0,.2);border-top:1px solid var(--border);}
.item-vol-row{display:grid;grid-template-columns:70px 1fr 24px 70px 1fr;gap:8px;align-items:start;margin-top:10px;}
.item-form-btns{display:flex;gap:8px;margin-top:14px;}

/* ── INFO TABLE ── */
.info-table{width:100%;border-collapse:collapse;font-size:13px;}
.info-table td{padding:6px 8px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.05);}
.info-table .info-key{color:var(--text-muted);font-weight:600;white-space:nowrap;width:120px;font-size:12px;}

/* ── FORM EXTRAS ── */
.dasar-label{font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;margin-top:16px;}
.toggle-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--card-header-bg);border-bottom:1px solid var(--border);font-weight:700;font-size:14px;color:var(--kuning);}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;}
.modal-close:hover{background:rgba(255,255,255,.1);}
.modal-body{padding:18px;}
.modal-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  .sb-overlay{display:block;}
  #main{margin-left:0;}
  .hamburger{display:block;}
  .row2,.row3{grid-template-columns:1fr;}
  .item-vol-row{grid-template-columns:1fr 1fr;}
}

/* ── TABLE WRAP & DATA TABLE ── */
.table-wrap{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;overflow-x:auto;margin-top:8px;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table thead th{padding:10px 14px;text-align:left;color:var(--text-muted);font-weight:700;font-size:10px;letter-spacing:.5px;background:#1a1a1c;border-bottom:1px solid var(--border);text-transform:uppercase;white-space:nowrap;}
.data-table thead th.center{text-align:center;}
.data-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s;}
.data-table tbody tr:last-child{border-bottom:none;}
.data-table tbody tr:hover{background:rgba(246,201,14,.04);}
.data-table tbody td{padding:10px 14px;vertical-align:middle;color:var(--text);}
.data-table tbody td.center{text-align:center;}

/* ── ACTIONS & MISC ── */
.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.txt-d{font-size:11px;color:var(--text-muted);}

/* ── TOPBAR LOGO & DIVIDER ── */
.topbar-logos{display:flex;align-items:center;gap:6px;}
.topbar-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;transition:transform .2s;cursor:pointer;} .topbar-logo:hover{transform:scale(1.15);}
.divider-v{width:1px;height:28px;background:var(--border);margin:0 4px;}
.sb-logo-text{font-size:16px;font-weight:800;color:#f6c90e;letter-spacing:1px;margin-bottom:4px;}

/* ── SIDEBAR LOGO CACA ── */
.sb-caca-logo{text-align:center;margin-bottom:6px;}
.sb-caca-logo img{width:120px;height:auto;object-fit:contain;border-radius:8px;transition:transform .2s;cursor:pointer;}
.sb-caca-logo img:hover{transform:scale(1.06);}
.data-table thead th.right{text-align:right;}
.data-table tbody td.right{text-align:right;}

/* ── Tabel RAB lebih compact ── */
.table-wrap { max-width: 900px; }
.data-table thead th { padding: 7px 10px; font-size: 9px; }
.data-table tbody td { padding: 7px 10px; font-size: 12px; }

/* ── Content max-width & center ── */
#content > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
#content > .page-header,
#content > .stat-row,
#content > .entry-card,
#content > .back-btn,
#content > div,
#content > form { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ── Entry card sejajar dengan form ── */
.entry-card { max-width: 100%; }

/* ── Content padding kiri untuk halaman form ── */
#content { padding-left: calc((100% - 900px) / 2 + 22px); padding-right: calc((100% - 900px) / 2 + 22px); }

/* Standar tombol Edit — gunakan class btn-edit */
.btn-edit {
  background: transparent;
  border: 1px solid #87CEEB;
  color: #87CEEB;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.btn-edit:hover { background: rgba(135,206,235,.1); }

/* Nav submenu */
.nav-group .nav-sub { display:none; }
.nav-group.open .nav-sub { display:block; }
.nav-group.open .nav-chevron { transform:rotate(180deg); }
.nav-sub-item { padding-left:32px !important; font-size:12px; }
.nav-group-header { cursor:pointer; }