/* ============================================================
   E-ABSEN MADRASAH - STYLESHEET UTAMA
   Tema: Hijau Kemenag Premium, Mobile-First, Glassmorphism
============================================================ */

:root {
  --hijau-kemenag: #006633;
  --hijau-kemenag-dark: #004d26;
  --hijau-kemenag-light: #00854A;
  --putih: #FFFFFF;
  --abu-muda: #F5F7FA;
  --emas: #FFD54F;
  --emas-dark: #F5B301;

  --text-main: #1B2430;
  --text-muted: #6B7684;
  --border-color: #E7EBF0;

  --bg-body: var(--abu-muda);
  --bg-card: var(--putih);
  --bg-glass: rgba(255, 255, 255, 0.65);

  --shadow-soft: 0 4px 24px rgba(0, 51, 26, 0.08);
  --shadow-card: 0 8px 30px rgba(0, 51, 26, 0.10);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --font-main: 'Poppins', sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
  --text-main: #EAF0F6;
  --text-muted: #9AA7B5;
  --border-color: #253038;

  --bg-body: #10161C;
  --bg-card: #182028;
  --bg-glass: rgba(24, 32, 40, 0.65);

  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior-y: contain;
}

body {
  font-family: var(--font-main);
  background: var(--bg-body);
  color: var(--text-main);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, color .3s ease;
  padding-bottom: calc(70px + var(--safe-bottom));
}

@media (min-width: 992px) {
  body { padding-bottom: 0; }
}

a { text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); font-weight: 600; color: var(--text-main); }

/* ---------------- Scrollbar ---------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--hijau-kemenag-light); border-radius: 10px; }

/* ---------------- Splash Screen ---------------- */
#splash-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(160deg, var(--hijau-kemenag) 0%, var(--hijau-kemenag-dark) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#splash-screen.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#splash-screen .splash-logo {
  width: 96px; height: 96px; border-radius: 26px; background: var(--putih);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  animation: splashPop .7s cubic-bezier(.34,1.56,.64,1);
}
#splash-screen .splash-logo i { font-size: 44px; color: var(--hijau-kemenag); }
#splash-screen h4 { color: #fff; margin-top: 20px; font-weight: 600; letter-spacing: .3px; }
#splash-screen p { color: rgba(255,255,255,.75); font-size: 13px; margin-top: -8px; }
#splash-screen .splash-loader {
  margin-top: 24px; width: 140px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.25); overflow: hidden; position: relative;
}
#splash-screen .splash-loader::after {
  content: ''; position: absolute; top:0; left:-40%; width: 40%; height: 100%;
  background: var(--emas); border-radius: 4px;
  animation: splashLoad 1.1s ease-in-out infinite;
}
@keyframes splashPop { 0% { transform: scale(.4); opacity:0;} 100% { transform: scale(1); opacity: 1;} }
@keyframes splashLoad { 0% { left: -40%; } 100% { left: 100%; } }

/* ---------------- Utility: Glass Card ---------------- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,.35);
}
[data-theme="dark"] .glass { border-color: rgba(255,255,255,.06); }

.card-app {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, background .3s ease;
}
.card-app:hover { box-shadow: var(--shadow-card); }
.card-app.pressable:active { transform: scale(.98); }

/* ---------------- Buttons ---------------- */
.btn-brand {
  background: var(--hijau-kemenag);
  border: none; color: #fff; font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  transition: background .2s ease, transform .15s ease;
  box-shadow: 0 6px 18px rgba(0,102,51,.28);
}
.btn-brand:hover, .btn-brand:focus { background: var(--hijau-kemenag-light); color: #fff; }
.btn-brand:active { transform: scale(.97); }

.btn-gold {
  background: var(--emas); border: none; color: #402D00; font-weight: 600;
  border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(255,213,79,.35);
}
.btn-gold:hover { background: var(--emas-dark); color: #402D00; }

.btn-outline-brand {
  border: 1.5px solid var(--hijau-kemenag); color: var(--hijau-kemenag);
  border-radius: var(--radius-sm); background: transparent; font-weight: 500;
}
.btn-outline-brand:hover { background: var(--hijau-kemenag); color: #fff; }

.btn, .form-control, .form-select { font-family: var(--font-main); border-radius: var(--radius-sm); }
.form-control, .form-select {
  background: var(--bg-card); color: var(--text-main); border: 1.5px solid var(--border-color);
  padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--hijau-kemenag); box-shadow: 0 0 0 .2rem rgba(0,102,51,.12);
  background: var(--bg-card); color: var(--text-main);
}
.form-control::placeholder { color: var(--text-muted); }

/* ---------------- Login Page ---------------- */
.login-wrapper {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,213,79,.25), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(255,255,255,.15), transparent 40%),
    linear-gradient(160deg, var(--hijau-kemenag) 0%, var(--hijau-kemenag-dark) 100%);
}
.login-card {
  width: 100%; max-width: 420px;
  background: rgba(255,255,255,.92);
  border-radius: 26px;
  padding: 36px 30px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(20px);
  animation: fadeUp .6s ease;
}
[data-theme="dark"] .login-card { background: rgba(24,32,40,.92); }
@keyframes fadeUp { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform:none; } }

.login-logo {
  width: 74px; height: 74px; border-radius: 20px; margin: 0 auto 14px;
  background: var(--hijau-kemenag); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,102,51,.35);
}
.login-logo i { color: #fff; font-size: 32px; }

.captcha-box {
  background: var(--abu-muda); border: 1.5px dashed var(--hijau-kemenag);
  border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 700;
  letter-spacing: 2px; color: var(--hijau-kemenag); user-select: none;
  font-size: 18px; text-align: center;
}
[data-theme="dark"] .captcha-box { background: #0e1418; }

/* ---------------- Topbar ---------------- */
.app-topbar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--bg-glass); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.app-topbar .brand-mini { display:flex; align-items:center; gap:10px; }
.app-topbar .brand-mini .logo-sm {
  width: 38px; height: 38px; border-radius: 11px; background: var(--hijau-kemenag);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.app-topbar .brand-mini span { font-weight: 600; font-size: 15px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main);
  position: relative; transition: background .2s;
}
.icon-btn:active { background: var(--abu-muda); }
.icon-btn .badge-dot {
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background: var(--emas); border: 2px solid var(--bg-card);
}

/* ---------------- Sidebar (Desktop) ---------------- */
.app-sidebar {
  display: none;
}
@media (min-width: 992px) {
  .app-sidebar {
    display: flex; flex-direction: column;
    position: fixed; top:0; left:0; bottom:0; width: 260px; z-index: 1040;
    background: var(--hijau-kemenag);
    padding: 22px 16px;
    overflow-y: auto;
  }
  .app-sidebar .sidebar-brand { display:flex; align-items:center; gap:12px; color:#fff; margin-bottom: 30px; padding: 0 6px;}
  .app-sidebar .sidebar-brand .logo-sm { width:42px; height:42px; border-radius:12px; background:#fff; display:flex;align-items:center;justify-content:center;}
  .app-sidebar .sidebar-brand .logo-sm i { color: var(--hijau-kemenag); font-size: 20px;}
  .app-sidebar .sidebar-brand strong { font-size: 15px; line-height: 1.2; display:block; }
  .app-sidebar .sidebar-brand small { color: rgba(255,255,255,.7); }

  .nav-side { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 4px; }
  .nav-side a {
    display:flex; align-items:center; gap:12px; color: rgba(255,255,255,.78);
    padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 500;
    transition: background .2s, color .2s;
  }
  .nav-side a i { width: 20px; text-align:center; font-size: 16px; }
  .nav-side a:hover { background: rgba(255,255,255,.10); color: #fff; }
  .nav-side a.active { background: var(--emas); color: #3c2c00; font-weight: 600; }

  .main-content { margin-left: 260px; }
}

/* ---------------- Bottom Navigation (Mobile) ---------------- */
.bottom-nav {
  position: fixed; left:0; right:0; bottom:0; z-index: 1050;
  background: var(--bg-glass); backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-color);
  display: flex; justify-content: space-around; align-items:center;
  padding: 8px 4px calc(8px + var(--safe-bottom));
}
@media (min-width: 992px) { .bottom-nav { display: none; } }
.bottom-nav a {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color: var(--text-muted); font-size: 10.5px; font-weight: 500; flex:1; padding: 4px 0;
  transition: color .2s;
}
.bottom-nav a i { font-size: 19px; }
.bottom-nav a.active { color: var(--hijau-kemenag); }
.bottom-nav a.fab-center {
  margin-top: -30px;
}
.bottom-nav a.fab-center .fab-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(150deg, var(--emas), var(--emas-dark));
  display:flex; align-items:center; justify-content:center; color:#402D00;
  box-shadow: 0 10px 24px rgba(255,213,79,.5);
  font-size: 22px;
}

/* ---------------- Stat Cards ---------------- */
.stat-card {
  border-radius: var(--radius-lg); padding: 18px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-card);
}
.stat-card i.bg-icon { position:absolute; right:-6px; bottom:-10px; font-size:70px; opacity:.18; }
.stat-card h3 { color:#fff; font-size: 26px; margin-bottom:0; }
.stat-card span.label { font-size: 12.5px; opacity: .9; }
.stat-card.c1 { background: linear-gradient(135deg, var(--hijau-kemenag), var(--hijau-kemenag-dark)); }
.stat-card.c2 { background: linear-gradient(135deg, #2A9D8F, #1c6d63); }
.stat-card.c3 { background: linear-gradient(135deg, #E9B949, #c98f1c); color:#3c2c00;}
.stat-card.c3 h3 { color:#3c2c00; }
.stat-card.c4 { background: linear-gradient(135deg, #E76F51, #b4492f); }

/* ---------------- Table / DataTable custom ---------------- */
.table-app thead th {
  background: var(--abu-muda); color: var(--text-muted); font-weight: 600; font-size:12.5px;
  text-transform: uppercase; letter-spacing:.4px; border: none;
}
[data-theme="dark"] .table-app thead th { background: #10161c; }
.table-app td, .table-app th { vertical-align: middle; padding: 12px 14px; }
.table-app tbody tr { border-bottom: 1px solid var(--border-color); }
.table-app { color: var(--text-main); }

.badge-status { padding: 5px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.badge-hadir { background:#E4F6EC; color:#0F8A45; }
.badge-terlambat { background:#FFF3D6; color:#B8860B; }
.badge-alpa { background:#FDE7E7; color:#C0392B; }
.badge-izin, .badge-sakit { background:#E7EEFB; color:#2A5AD8; }
[data-theme="dark"] .badge-hadir{background:#123322;} [data-theme="dark"] .badge-terlambat{background:#3a2c0c;}
[data-theme="dark"] .badge-alpa{background:#3a1717;} [data-theme="dark"] .badge-izin,[data-theme="dark"] .badge-sakit{background:#152244;}

/* ---------------- Loading Overlay ---------------- */
.loading-overlay {
  position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 9998;
  display:flex; align-items:center; justify-content:center;
}
.loading-spinner {
  width: 46px; height:46px; border-radius:50%; border:4px solid rgba(255,255,255,.35);
  border-top-color: var(--emas); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Fade/slide transitions ---------------- */
.page-fade { animation: pageFade .35s ease; }
@keyframes pageFade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ---------------- Misc ---------------- */
.text-brand { color: var(--hijau-kemenag) !important; }
.bg-brand { background: var(--hijau-kemenag) !important; }
.text-gold { color: var(--emas-dark) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }
.shadow-soft { box-shadow: var(--shadow-soft) !important; }

.empty-state { text-align:center; padding: 40px 16px; color: var(--text-muted); }
.empty-state i { font-size: 48px; opacity:.35; margin-bottom: 12px; display:block; }

.camera-frame {
  position: relative; border-radius: var(--radius-lg); overflow:hidden;
  border: 3px solid var(--hijau-kemenag); background: #000;
}
.camera-frame video, .camera-frame canvas, .camera-frame img { width:100%; display:block; }
.camera-frame .scan-ring {
  position:absolute; inset: 10%; border: 3px dashed var(--emas); border-radius: 50%; opacity:.7;
  pointer-events:none;
}

@media (max-width: 991.98px) {
  .main-content { padding-top: 4px; }
}