:root{
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-400:#818cf8; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --amber-400:#f6a623; --amber-500:#e8930f;
}
*{box-sizing:border-box;}
body{margin:0;}

/* ---------- CARD ---------- */
.card{background:#fff;border-radius:18px;box-shadow:0 4px 24px -6px rgba(16,24,40,.08);border:1px solid #f1f5f4;overflow:hidden;margin-bottom:24px;}
.card-header{background:linear-gradient(90deg,var(--brand-600),var(--brand-500));color:#fff;padding:16px 22px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;}
.card-body{padding:22px;}

/* ---------- STAT CARDS ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;}
.stat-card{border-radius:18px;padding:22px;color:#fff;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;box-shadow:0 8px 20px -6px rgba(0,0,0,.15);}
.stat-card::after{content:"";position:absolute;right:-20px;bottom:-20px;width:90px;height:90px;background:rgba(255,255,255,.12);border-radius:50%;}
.stat-card .num{font-size:32px;font-weight:800;line-height:1;}
.stat-card .label{font-size:13px;opacity:.92;margin-top:4px;}
.stat-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);}
.stat-teal{background:linear-gradient(135deg,#818cf8,#6366f1);}
.stat-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed);}
.stat-orange{background:linear-gradient(135deg,#fbbf24,#ea8a09);}
@media(max-width:1024px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.stat-grid{grid-template-columns:1fr;}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;padding:11px 20px;border-radius:12px;font-weight:600;cursor:pointer;font-size:14px;text-align:center;transition:all .15s;text-decoration:none;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--brand-500);color:#fff;width:100%;justify-content:center;}
.btn-primary:hover{background:var(--brand-600);}
.btn-block{width:100%;justify-content:center;}
.btn-outline{background:#fff;border:1px solid #e2e8ea;color:#334155;}
.btn-outline:hover{background:#f8fafc;}
.btn-warning{background:var(--amber-400);color:#fff;}
.btn-warning:hover{background:var(--amber-500);}
.btn-danger{background:#ef4444;color:#fff;}
.btn-danger:hover{background:#dc2626;}
.btn-teal{background:var(--brand-500);color:#fff;}
.btn-teal:hover{background:var(--brand-600);}
.btn-blue{background:#2563eb;color:#fff;}
.btn-blue:hover{background:#1d4ed8;}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px;}

/* ---------- FORMS ---------- */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px;}
.form-control{width:100%;padding:11px 14px;border-radius:11px;border:1.5px solid #e2e8ea;background:#f8fafc;font-size:14px;font-family:inherit;color:#1e293b;transition:.15s;}
.form-control:focus{outline:none;border-color:var(--brand-500);background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.12);}
textarea.form-control{resize:vertical;}
.search-box{padding:10px 14px;border-radius:11px;border:1.5px solid #e2e8ea;min-width:220px;font-size:14px;background:#f8fafc;}
.search-box:focus{outline:none;border-color:var(--brand-500);background:#fff;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:600px){.grid-2{grid-template-columns:1fr;}}

/* ---------- TABLE ---------- */
table{width:100%;border-collapse:collapse;}
table th{text-align:left;padding:13px 18px;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid #f1f5f4;color:#64748b;background:#fafcfc;}
table td{padding:14px 18px;border-bottom:1px solid #f1f5f4;font-size:14px;vertical-align:middle;color:#334155;}
table tr:hover td{background:#fafcfc;}
.page-title{font-size:26px;font-weight:800;margin-bottom:18px;color:#1e293b;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}

/* ---------- BADGE ---------- */
.badge{padding:5px 13px;border-radius:20px;font-size:11.5px;font-weight:700;display:inline-block;letter-spacing:.02em;}
.badge-success{background:#d1fae5;color:#047857;}
.badge-danger{background:#fee2e2;color:#b91c1c;}
.badge-warning{background:#fef3c7;color:#b45309;}
.badge-info{background:#dbeafe;color:#1d4ed8;}

/* ---------- ACTION BUTTONS ---------- */
.action-btn{border:none;width:36px;height:36px;border-radius:10px;color:#fff;cursor:pointer;margin-right:5px;display:inline-flex;align-items:center;justify-content:center;transition:.15s;text-decoration:none;}
.action-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.icon-teal{background:var(--brand-500);}
.icon-orange{background:var(--amber-400);}
.icon-blue{background:#2563eb;}
.icon-red{background:#ef4444;}

/* ---------- PAGINATION ---------- */
.pagination{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:16px;flex-wrap:wrap;}
.pagination a,.pagination span{padding:8px 13px;border-radius:9px;background:#fff;border:1px solid #e2e8ea;font-size:13px;color:#475569;text-decoration:none;}
.pagination a:hover{background:#f8fafc;}
.pagination .active{background:var(--brand-500);color:#fff;border-color:var(--brand-500);}

/* ---------- MODAL ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,32,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:22px;max-width:620px;width:100%;max-height:90vh;overflow-y:auto;padding:34px;position:relative;box-shadow:0 25px 60px -12px rgba(0,0,0,.25);animation:modalPop .18s ease;}
.modal-box.wide{max-width:920px;}
@keyframes modalPop{from{opacity:0;transform:scale(.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.modal-close{position:absolute;top:18px;right:18px;background:#f1f5f4;border:none;font-size:16px;cursor:pointer;color:#64748b;width:34px;height:34px;border-radius:10px;}
.modal-close:hover{background:#e2e8ea;}
.modal-icon{width:64px;height:64px;background:linear-gradient(135deg,var(--brand-500),var(--brand-600));border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px;color:#fff;}
.modal-title{text-align:center;font-size:21px;font-weight:800;margin-bottom:20px;color:#1e293b;}

/* ---------- CHIPS ---------- */
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.chip-btn{background:var(--brand-500);color:#fff;border:none;padding:10px 18px;border-radius:24px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;}
.chip-btn:hover{background:var(--brand-600);transform:translateY(-1px);}
.chip-btn.outline{background:#fff;color:var(--brand-500);border:1.5px solid var(--brand-500);}

/* ---------- COLLAPSE ---------- */
.collapse-item{border:1px solid #eef1f2;border-radius:14px;margin-bottom:12px;overflow:hidden;background:#fff;}
.collapse-head{padding:15px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:#fff;font-weight:700;color:#1e293b;transition:.15s;}
.collapse-head:hover{background:#fafcfc;}
.collapse-body{padding:0 20px 20px;display:none;}
.collapse-body.show{display:block;}
.chev{transition:transform .2s;}
.chev.rotate-180{transform:rotate(180deg);}

.stat-mini{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;color:#334155;}

.alert{padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:14px;}
.alert-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;}
.alert-danger{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;}

.divider{display:flex;align-items:center;text-align:center;color:#9aa7ac;margin:18px 0;font-size:13px;}
.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid #e2e8ea;}
.divider:not(:empty)::before{margin-right:.8em;}
.divider:not(:empty)::after{margin-left:.8em;}

/* ---------- PASSWORD TOGGLE (lihat/sembunyikan password) ---------- */
.password-wrapper{position:relative;}
.password-wrapper .form-control{padding-right:44px;}
.password-toggle-btn{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:none;color:#94a3b8;cursor:pointer;font-size:15px;padding:4px;display:flex;align-items:center;}
.password-toggle-btn:hover{color:#475569;}

/* ---------- TOAST POPUP (notifikasi aksi) ---------- */
#toastContainer{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:380px;}
.app-toast{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:14px;box-shadow:0 12px 32px -8px rgba(16,24,40,.18);padding:14px 16px;font-size:14px;font-weight:500;border-left:4px solid var(--brand-500);animation:toastIn .25s ease;position:relative;}
.app-toast.toast-success{border-left-color:#10b981;}
.app-toast.toast-success i{color:#10b981;}
.app-toast.toast-error{border-left-color:#ef4444;}
.app-toast.toast-error i{color:#ef4444;}
.app-toast i{font-size:18px;margin-top:1px;}
.app-toast .toast-close{position:absolute;top:8px;right:10px;background:none;border:none;color:#cbd5e1;cursor:pointer;font-size:13px;}
.app-toast.toast-out{animation:toastOut .25s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(30px);}}

/* ---------- CONFIRM MODAL (pengganti confirm() bawaan browser) ---------- */
.confirm-icon{width:56px;height:56px;border-radius:16px;background:#fef2f2;color:#ef4444;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;}