/* ==========================================================
   KIOS BUMDes SEJAHTERA — tema hijau tua, putih, aksen emas
   ========================================================== */
:root{
  --green-900:#0f3d24; --green-800:#14532d; --green-700:#166534;
  --green-600:#1a7f41; --green-100:#e7f4ec; --green-50:#f3faf5;
  --gold:#d4a017; --gold-light:#f2c94c; --gold-soft:#fdf6e3;
  --ink:#1c2b21; --muted:#6b7c72; --line:#e2e8e4;
  --bg:#f6f8f7; --card:#ffffff;
  --danger:#c0392b; --warn:#b7791f; --ok:#166534;
  --shadow:0 1px 3px rgba(15,61,36,.08),0 6px 18px rgba(15,61,36,.06);
  --radius:14px;
  --sidebar-w:246px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.hidden{display:none!important}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--green-700)}
h1,h2,h3,h4{line-height:1.25}

/* ================= LOGIN ================= */
.login-screen{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 700px at 80% -10%,#1a7f41 0%,transparent 60%),
             linear-gradient(150deg,var(--green-900) 0%,var(--green-800) 55%,#0b2e1b 100%);
}
.login-screen::after{
  content:"";position:absolute;inset:auto -10% -35% -10%;height:55%;
  background:linear-gradient(90deg,transparent,rgba(212,160,23,.16),transparent);
  transform:rotate(-6deg);
}
.login-card{
  position:relative;z-index:1;width:100%;max-width:400px;background:#fff;
  border-radius:22px;padding:34px 30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  border-top:5px solid var(--gold);
}
.login-brand{text-align:center;margin-bottom:24px}
.login-logo{width:66px;height:66px;margin-bottom:10px}
.login-brand h1{font-size:21px;letter-spacing:.4px;color:var(--green-900);text-transform:uppercase}
.login-brand h1 span{color:var(--gold);display:block;font-size:25px;letter-spacing:2px}
.login-loc{font-size:12.5px;color:var(--muted);margin-top:6px}
.login-note{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:13px;font-weight:600;color:var(--green-900);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green-600);box-shadow:0 0 0 3px rgba(26,127,65,.14)
}
.form-error{
  background:#fdecea;color:var(--danger);border:1px solid #f5c6c0;border-radius:10px;
  padding:10px 12px;font-size:13.5px;margin-bottom:12px;
}
.form-hint{font-size:12.5px;color:var(--muted);margin-top:-6px;margin-bottom:12px}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:11px;border:1.5px solid transparent;
  font-weight:600;cursor:pointer;background:var(--green-100);color:var(--green-800);
  transition:transform .06s,filter .15s,background .15s;user-select:none;text-decoration:none;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--green-800);color:#fff}
.btn-primary:hover{background:var(--green-700);filter:none}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#3d2c00}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--green-600);color:var(--green-800);filter:none}
.btn-danger{background:#fdecea;color:var(--danger);border-color:#f5c6c0}
.btn-ghost{background:transparent;color:inherit}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:9px}
.btn-lg{padding:15px 20px;font-size:16.5px;border-radius:13px;letter-spacing:.6px}
.btn-block{width:100%}
.icon-btn{background:none;border:none;font-size:19px;cursor:pointer;padding:6px 9px;border-radius:9px;color:inherit}
.icon-btn:hover{background:rgba(0,0,0,.07)}

/* ================= LAYOUT ================= */
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,var(--green-900),var(--green-800));
  color:#fff;padding:10px 14px;box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.topbar-title{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.topbar-title strong{font-size:15px;letter-spacing:.5px}
.page-title{font-size:11.5px;color:var(--gold-light);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);padding:5px 10px;border-radius:30px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#3d2c00;display:grid;place-items:center;font-weight:800;font-size:13px}
.user-meta{display:flex;flex-direction:column;line-height:1.1}
.user-meta b{font-size:12.5px}
.user-meta i{font-size:10.5px;color:var(--gold-light);font-style:normal}
.sync-dot{width:9px;height:9px;border-radius:50%;background:#57d38c;box-shadow:0 0 0 3px rgba(87,211,140,.25)}
.sync-dot.off{background:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,.25)}
.sync-dot.sync{background:var(--gold-light);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:60;
  background:linear-gradient(180deg,var(--green-900),#0b2e1b);color:#dfeee5;
  display:flex;flex-direction:column;transform:translateX(-100%);
  transition:transform .22s ease;overflow-y:auto;
}
.sidebar.open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.3)}
.sidebar-head{display:flex;align-items:center;gap:10px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.side-logo{width:38px;height:38px}
.sidebar-head b{display:block;font-size:14px;color:#fff;letter-spacing:.6px}
.sidebar-head span{font-size:12.5px;color:var(--gold-light);letter-spacing:2px;font-weight:700}
.menu{list-style:none;padding:12px 10px;flex:1}
.menu li a{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:11px;
  color:#cfe4d7;text-decoration:none;font-weight:600;font-size:14.2px;margin-bottom:3px;
  transition:background .14s,color .14s;
}
.menu li a:hover{background:rgba(255,255,255,.08);color:#fff}
.menu li a.active{background:var(--gold);color:#3d2c00;box-shadow:0 4px 14px rgba(212,160,23,.35)}
.menu li a .ico{width:21px;text-align:center;font-size:16px}
.sidebar-foot{padding:14px 18px;font-size:11px;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.08)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}

.main{flex:1;padding:18px;max-width:1400px;width:100%;margin:0 auto}
@media(min-width:1024px){
  .sidebar{transform:translateX(0);position:sticky;top:0;height:100vh}
  .app{flex-direction:row;flex-wrap:wrap}
  .topbar{width:100%;order:0}
  .sidebar{order:1;width:var(--sidebar-w);flex:0 0 var(--sidebar-w)}
  .main{order:2;padding:24px 26px}
  #menu-toggle{display:none}
  .overlay{display:none!important}
}
@media(max-width:600px){
  .main{padding:14px 12px}
  .user-meta{display:none}
  .topbar-title strong{font-size:13.5px}
}

/* ================= CARDS / KPI ================= */
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.page-head h2{font-size:21px;color:var(--green-900)}
.page-head p{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card h3{font-size:15.5px;color:var(--green-900);margin-bottom:12px;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.grid{display:grid;gap:13px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.kpi{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green-600);
  border-radius:12px;padding:13px 14px;box-shadow:var(--shadow);
}
.kpi.gold{border-left-color:var(--gold)}
.kpi.red{border-left-color:var(--danger)}
.kpi.amber{border-left-color:var(--warn)}
.kpi .lbl{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.kpi .val{font-size:21px;font-weight:800;color:var(--green-900);margin-top:3px;word-break:break-word}
.kpi.gold .val{color:#8a6a00}
.kpi.red .val{color:var(--danger)}
.kpi .sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.section-title{font-size:14px;font-weight:800;color:var(--green-900);text-transform:uppercase;letter-spacing:.5px;margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ================= TABLE ================= */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:13.6px;min-width:640px}
thead th{
  background:var(--green-800);color:#fff;text-align:left;padding:11px 12px;font-size:12.4px;
  font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:2;text-transform:uppercase;letter-spacing:.3px;
}
tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--green-50)}
tbody tr:last-child td{border-bottom:none}
tfoot td{padding:11px 12px;font-weight:800;background:var(--gold-soft);border-top:2px solid var(--gold)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mid{text-align:center}
.code{font-family:Consolas,"Courier New",monospace;font-weight:700;color:var(--green-800)}
.row-inactive{opacity:.5}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;flex-wrap:wrap}

/* ================= BADGE / STATUS ================= */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge-ok{background:#e3f5e9;color:var(--ok)}
.badge-warn{background:#fdf1dc;color:var(--warn)}
.badge-danger{background:#fdecea;color:var(--danger)}
.badge-info{background:#e8f0fe;color:#1a49a0}
.badge-gold{background:var(--gold-soft);color:#8a6a00}
.badge-muted{background:#eef1ef;color:var(--muted)}

/* ================= TOOLBAR / FILTER ================= */
.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end;margin-bottom:14px}
.toolbar .field{margin-bottom:0;min-width:150px;flex:1;max-width:260px}
.toolbar .field.search{max-width:none;flex:2}
.chip-row{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:8px 14px;border-radius:30px;border:1.5px solid var(--line);background:#fff;
  font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:.14s;
}
.chip:hover{border-color:var(--green-600);color:var(--green-800)}
.chip.active{background:var(--green-800);border-color:var(--green-800);color:#fff}

/* ================= FORM TRANSAKSI ================= */
.trx-layout{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:960px){.trx-layout{grid-template-columns:400px 1fr}}
.trx-form .field{margin-bottom:12px}
.trx-type{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.trx-type label{
  display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;
  padding:16px 8px;border-radius:13px;border:2px solid var(--line);background:#fff;
  cursor:pointer;font-weight:800;font-size:15px;transition:.15s;
}
.trx-type label small{font-weight:500;font-size:11.5px;color:var(--muted)}
.trx-type input{display:none}
.trx-type label.sel-in{border-color:var(--green-600);background:var(--green-100);color:var(--green-800)}
.trx-type label.sel-out{border-color:var(--gold);background:var(--gold-soft);color:#8a6a00}
.pay-toggle{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pay-toggle label{padding:11px;text-align:center;border:2px solid var(--line);border-radius:11px;cursor:pointer;font-weight:700;font-size:14px;background:#fff}
.pay-toggle input{display:none}
.pay-toggle label.sel{border-color:var(--green-700);background:var(--green-100);color:var(--green-800)}
.total-box{
  background:linear-gradient(135deg,var(--green-900),var(--green-700));color:#fff;
  border-radius:13px;padding:14px 16px;margin:14px 0;display:flex;justify-content:space-between;align-items:center;
}
.total-box .lbl{font-size:12.5px;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.total-box .val{font-size:26px;font-weight:800;color:var(--gold-light)}
.total-box.credit{background:linear-gradient(135deg,#7a4a00,var(--gold))}
.total-box.credit .val{color:#fff}
.info-line{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
.info-line b{color:var(--green-900)}
.success-box{
  background:var(--green-50);border:1.5px solid var(--green-600);border-radius:14px;
  padding:18px;text-align:center;animation:pop .25s ease;
}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.success-box .big{font-size:19px;font-weight:800;color:var(--green-800);margin:6px 0}
.success-box .trxno{font-family:Consolas,monospace;font-size:17px;background:#fff;border:1.5px dashed var(--green-600);padding:8px 14px;border-radius:9px;display:inline-block;margin:8px 0;font-weight:700}

/* ================= MODAL ================= */
.modal-root{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,30,18,.55)}
.modal-box{
  position:relative;background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:90vh;
  display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.4);animation:pop .18s ease;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16.5px;color:var(--green-900)}
.modal-body{padding:18px;overflow-y:auto}
.modal-body .field{margin-bottom:13px}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
@media(max-width:560px){.modal-box{max-width:100%}.modal-actions .btn{flex:1}}

/* ================= TOAST ================= */
.toast-root{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;width:calc(100% - 32px);max-width:440px}
.toast{
  padding:13px 16px;border-radius:12px;color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.3);animation:slideup .22s ease;display:flex;gap:9px;align-items:flex-start;
}
@keyframes slideup{from{transform:translateY(20px);opacity:0}}
.toast.ok{background:linear-gradient(135deg,var(--green-800),var(--green-600))}
.toast.err{background:linear-gradient(135deg,#a02b1e,#c0392b)}
.toast.warn{background:linear-gradient(135deg,#8a6a00,var(--gold))}
.toast.info{background:linear-gradient(135deg,#123,#2b4)}

/* ================= MISC ================= */
.loading{padding:50px;text-align:center;color:var(--muted);font-size:14.5px}
.empty{padding:36px 16px;text-align:center;color:var(--muted);font-size:14px}
.empty .big{font-size:34px;margin-bottom:8px}
.text-ok{color:var(--ok);font-weight:700}
.text-danger{color:var(--danger);font-weight:700}
.text-muted{color:var(--muted)}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.flex{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:9px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{
  padding:11px 17px;background:none;border:none;border-bottom:3px solid transparent;
  font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;font-size:14.5px;margin-bottom:-2px;
}
.tabs button.active{color:var(--green-800);border-bottom-color:var(--gold)}
.progress{height:8px;background:var(--line);border-radius:8px;overflow:hidden;min-width:90px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green-600),var(--gold));border-radius:8px}
.note{background:var(--gold-soft);border:1px solid #f0e0b0;border-radius:11px;padding:11px 14px;font-size:13.3px;color:#6b5300}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px;max-height:280px;overflow-y:auto;padding:4px}
.perm-item{display:flex;gap:8px;align-items:center;font-size:13.3px;background:var(--green-50);padding:8px 10px;border-radius:9px}
.perm-item input{width:17px;height:17px;accent-color:var(--green-700)}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.stat-strip .kpi{padding:10px 12px}
.stat-strip .kpi .val{font-size:17.5px}
.login-logo{filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}