:root{--bg:#0f172a;--card:#111827;--card2:#1f2937;--text:#f8fafc;--muted:#cbd5e1;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--blue:#38bdf8;--border:#334155}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.container{max-width:1100px;margin:auto;padding:16px}.topbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}.brand{font-size:22px;font-weight:800}.nav{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:14px;padding:12px 16px;background:var(--card2);color:var(--text);font-weight:700;display:inline-block;cursor:pointer}.btn-primary{background:var(--blue);color:#082f49}.btn-green{background:var(--green);color:#052e16}.btn-red{background:var(--red);color:#450a0a}.btn-yellow{background:var(--yellow);color:#451a03}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.stat .label{color:var(--muted);font-size:14px}.stat .num{font-size:38px;font-weight:900;margin-top:6px}.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}.blue{color:var(--blue)}.section{margin-top:14px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.search{width:100%;padding:15px;border-radius:14px;border:1px solid var(--border);background:#020617;color:white;font-size:17px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}.row-missing{background:rgba(239,68,68,.10)}.badge{padding:6px 10px;border-radius:999px;font-size:13px;font-weight:800}.badge-red{background:rgba(239,68,68,.2);color:#fecaca}.badge-green{background:rgba(34,197,94,.2);color:#bbf7d0}.badge-yellow{background:rgba(245,158,11,.2);color:#fde68a}.login-box{max-width:420px;margin:70px auto}.input{width:100%;padding:14px;border-radius:12px;border:1px solid var(--border);background:#020617;color:white;margin:8px 0 14px;font-size:16px}.alert{padding:12px;border-radius:14px;margin:10px 0;background:rgba(56,189,248,.15);border:1px solid rgba(56,189,248,.4)}.danger{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.topbar{display:block}.nav{margin-top:12px}.stat .num{font-size:32px}.table th:nth-child(4),.table td:nth-child(4){display:none}}@media(max-width:520px){.grid{grid-template-columns:1fr}.container{padding:10px}.btn{width:100%;text-align:center}.table th,.table td{padding:10px 6px;font-size:14px}}
.avatar{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.25)}
.mini{background:rgba(15,23,42,.75);border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:14px;color:#e2e8f0}
small{font-size:12px;color:#cbd5e1}
.stat-hadir {
  border-left: 5px solid #16a34a;
}

.stat-belum {
  border-left: 5px solid #dc2626;
}

.stat-izin {
  border-left: 5px solid #f59e0b;
}

.stat-sakit {
  border-left: 5px solid #2563eb;
}

.stat-green .value{color:#16a34a;}
.stat-red .value{color:#dc2626;}
.stat-yellow .value{color:#f59e0b;}
.stat-blue .value{color:#2563eb;}
.stat-gray .value{color:#374151;}

/* FIX LAPORAN STAT CARD */
.grid-cards .stat-card {
  background: #ffffff !important;
  color: #111827 !important;
}

.grid-cards .stat-card .label {
  color: #374151 !important;
  font-weight: 700;
}

.grid-cards .stat-card .value {
  color: #111827 !important;
  font-size: 30px;
  font-weight: 900;
}

.grid-cards .stat-green .value {
  color: #16a34a !important;
}

.grid-cards .stat-red .value {
  color: #dc2626 !important;
}

.grid-cards .stat-yellow .value {
  color: #f59e0b !important;
}

.grid-cards .stat-blue .value {
  color: #2563eb !important;
}

.grid-cards .stat-gray .value {
  color: #374151 !important;
}
/* FORCE FIX LAPORAN */
.stat-card {
  background: #ffffff !important;
  color: #111827 !important;
}

.stat-card .label {
  color: #374151 !important;
  font-size: 14px;
  font-weight: 700;
}

.stat-card .value {
  color: #111827 !important;
  font-size: 32px;
  font-weight: 900;
}

/* warna status */
.stat-green .value { color: #16a34a !important; }
.stat-red .value { color: #dc2626 !important; }
.stat-yellow .value { color: #f59e0b !important; }
.stat-blue .value { color: #2563eb !important; }
.stat-gray .value { color: #374151 !important; }