/* ===== SIAKAD UQM — Design System v2 ===== */
:root{
  --primary:#0d5c3f; --primary-dark:#08402b; --primary-darker:#062e20;
  --primary-light:#e7f3ed; --primary-mid:#bfe0cd;
  --gold:#c9a227; --gold-light:#f7ecd0;
  --bg:#eef2f0; --card:#ffffff; --text:#1e2a26; --muted:#6b7f77;
  --border:#dde7e2; --danger:#d33f3f; --danger-bg:#fdecec;
  --warning:#c98a12; --warning-bg:#fdf3dd;
  --info:#2471a3; --info-bg:#e6f1f9;
  --success:#1e8e4f; --success-bg:#e4f6ec;
  --sidebar:#0a3a29; --sidebar-hover:rgba(255,255,255,.09);
  --radius:14px; --radius-sm:9px;
  --shadow:0 2px 10px rgba(13,92,63,.08);
  --shadow-lg:0 10px 30px rgba(13,92,63,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:262px;background:linear-gradient(180deg,var(--sidebar) 0%,var(--primary-darker) 100%);color:#fff;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;z-index:100;transition:transform .25s ease;scrollbar-width:thin}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.sidebar .brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:12px}
.sidebar .brand .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#e8c95a);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.sidebar .brand h1{font-size:16px;font-weight:800;letter-spacing:.02em}
.sidebar .brand small{color:#a9cbbb;font-size:11.5px}
.sidebar nav{padding:10px 10px 20px}
.sidebar .nav-label{padding:14px 12px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#8fb3a3;font-weight:700}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;color:#d4e6dd;font-size:13.8px;border-radius:9px;margin-bottom:1px;transition:background .15s}
.sidebar nav a:hover{background:var(--sidebar-hover);text-decoration:none;color:#fff}
.sidebar nav a.active{background:linear-gradient(90deg,var(--primary),#12805a);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.sidebar nav a .ico{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.sidebar .userbox{padding:14px 20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#cfe3db;background:rgba(0,0,0,.15)}
.sidebar .userbox a{color:var(--gold);font-weight:600}
.main{flex:1;margin-left:262px;padding:26px;min-width:0;max-width:1400px}
.topbar{display:none}

/* ===== Page head ===== */
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-head h2{font-size:24px;font-weight:800;color:var(--primary-dark);display:flex;align-items:center;gap:10px}
.page-head h2 .ph-ico{font-size:26px}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:2px}

/* ===== Stat cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sc,var(--primary))}
.stat .s-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--sb,var(--primary-light));flex-shrink:0}
.stat .num{font-size:27px;font-weight:800;color:var(--text);line-height:1.1}
.stat .lbl{color:var(--muted);font-size:12.5px;margin-top:2px;font-weight:600}

/* ===== Cards ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h3{margin-bottom:14px;font-size:16.5px;font-weight:800;color:var(--primary-dark);display:flex;align-items:center;gap:8px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1000px){.grid-2{grid-template-columns:1fr}}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border)}
thead th{background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#fff;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
thead th:first-child{border-radius:var(--radius) 0 0 0}
thead th:last-child{border-radius:0 var(--radius) 0 0}
tbody tr:nth-child(even){background:#f7faf8}
tbody tr:hover{background:#eef6f1}
tbody tr:last-child td{border-bottom:none}
td.actions{white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge.green{background:var(--success-bg);color:#146c39}
.badge.gray{background:#eef1f0;color:#55645e}
.badge.red{background:var(--danger-bg);color:#a52a2a}
.badge.blue{background:var(--info-bg);color:#1a5a86}
.badge.gold{background:var(--gold-light);color:#8a6d1a}
.badge.orange{background:var(--warning-bg);color:#96690a}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .1s,box-shadow .15s,background .15s;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(180deg,#12905f,var(--primary));color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-danger{background:linear-gradient(180deg,#e05252,var(--danger));color:#fff}
.btn-secondary{background:#e8eeeb;color:var(--text)}
.btn-gold{background:linear-gradient(180deg,#d9b13b,var(--gold));color:#3d2f05}
.btn-sm{padding:6px 13px;font-size:12.5px;border-radius:8px}
a.btn:hover{text-decoration:none}

/* ===== Toolbar / filters ===== */
.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.toolbar input[type=text],.toolbar input[type=date],.toolbar select{padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}

/* ===== Forms ===== */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);max-width:900px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13px;margin-bottom:7px;color:var(--primary-dark)}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:14.5px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
.form-actions{display:flex;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.fieldset{border:1.5px solid var(--border);border-radius:12px;padding:18px;margin-bottom:20px}
.fieldset legend{font-weight:800;color:var(--primary);padding:0 10px;font-size:14px}

/* ===== Alerts / flash ===== */
.alert{padding:13px 18px;border-radius:11px;margin-bottom:18px;font-size:14px;font-weight:600;border-left:5px solid;box-shadow:var(--shadow);animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.alert-error{background:var(--danger-bg);color:#a52a2a;border-color:var(--danger)}
.alert-success{background:var(--success-bg);color:#146c39;border-color:var(--success)}

/* ===== Login ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-darker) 0%,var(--primary) 60%,#12805a 100%);padding:20px;position:relative;overflow:hidden}
.login-wrap::before{content:'🎓';position:absolute;font-size:22rem;opacity:.06;top:-3rem;right:-2rem;transform:rotate(-12deg)}
.login-wrap::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.25),transparent 70%);bottom:-140px;left:-100px}
.login-card{background:#fff;border-radius:20px;padding:40px 38px;width:100%;max-width:410px;box-shadow:0 24px 70px rgba(0,0,0,.35);position:relative;z-index:1;animation:popIn .35s ease}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.login-card .l-logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--gold),#e8c95a);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:16px;box-shadow:0 6px 16px rgba(201,162,39,.4)}
.login-card h1{font-size:23px;color:var(--primary-dark);margin-bottom:4px;font-weight:800}
.login-card>p{color:var(--muted);font-size:14px;margin-bottom:26px}
.login-card .btn{width:100%;justify-content:center;padding:13px}

/* ===== Charts ===== */
.chart-box{position:relative;height:260px}
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ===== Misc ===== */
.empty{padding:36px;text-align:center;color:var(--muted)}
.empty .big{font-size:44px;display:block;margin-bottom:8px}
.pagination{margin-top:12px;color:var(--muted);font-size:13px}
.kop{text-align:center;margin-bottom:18px;border-bottom:3px double var(--primary-dark);padding-bottom:12px}
.kop h2{font-size:19px;color:var(--primary-dark)}
.kop p{font-size:12.5px;color:var(--muted)}
.ttd{display:flex;justify-content:space-between;margin-top:36px;font-size:13.5px}
.ttd div{text-align:center;min-width:180px}
.hamburger{display:none}

/* ===== Responsive ===== */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);width:270px}
  .sidebar.open{transform:translateX(0);box-shadow:20px 0 50px rgba(0,0,0,.3)}
  .main{margin-left:0;padding:16px}
  .topbar{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,var(--sidebar),var(--primary-dark));color:#fff;padding:12px 16px;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.2)}
  .topbar .hamburger{display:block;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}
  .topbar span{font-weight:800}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:none}
  .overlay.show{display:block}
  .page-head h2{font-size:20px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .stat{padding:14px}
  .stat .num{font-size:22px}
  .form-card{padding:18px}
}

/* ===== Print ===== */
@media print{
  .sidebar,.topbar,.overlay,.page-head .btn,.toolbar,.form-actions,.no-print{display:none!important}
  .main{margin:0;padding:0;max-width:none}
  body{background:#fff;font-size:12px}
  .card,.table-wrap{box-shadow:none;border:1px solid #999}
  thead th{background:#eee!important;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stat{box-shadow:none}
  a{color:#000;text-decoration:none}
}