/* tema-ac.css — Tema "Opsi AC" Sistem Presensi SMK Al Huda (Hijau Zamrud + bottom-nav kaca mengambang)
   SELURUH aturan hanya untuk LAYAR (@media screen): hasil cetak/PDF tetap persis seperti sebelumnya.
   Sumber: /workspace/ui-opsi/tema/_var-AC.css + _dasar.css */
@media screen{
/* ============================================================
   OPSI AC — warna/tipografi/kartu Opsi A "Hijau Zamrud Elegan"
   + bottom-nav gaya Opsi C (kaca mengambang ±12px dari tepi, FAB kotak-bulat)
   diwarnai ulang dengan palet A (FAB zamrud, kaca bernuansa hangat/zamrud).
   Font: Plus Jakarta Sans (self-host) · Ikon: Lucide (ISC) stroke 1.75
   ============================================================ */
:root{
  --o-font:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --o-tracking:-.005em; --o-tracking-head:-.02em; --o-ikon-stroke:1.75;
  --o-radius:16px; --o-radius-sm:12px;
  --o-primary:#0B6B57; --o-primary-strong:#07513F; --o-primary-ink:#0A6450; --o-on-primary:#FFFFFF;
  --o-primary-soft:#E5F1EC; --o-primary-line:#BFDCD0;
  --o-accent:#C9A23F; --o-accent-soft:#F7EFD8; --o-accent-ink:#8A6A16; --o-accent-line:#E8D7A6; --o-on-accent:#2B2208;
  --o-bg:#F6F4EF; --o-bg-page:radial-gradient(900px 420px at 50% -8%,#E3EFE8 0%,rgba(246,244,239,0) 70%),#F6F4EF;
  --o-surface:#FFFFFF; --o-surface-glass:rgba(255,255,255,.82); --o-surface-2:#F4F2EC; --o-surface-3:#EEEBE3;
  --o-border:#E8E4DA; --o-border-strong:#D6D0C3;
  --o-text:#1B1A17; --o-text-2:#3B3934; --o-muted:#6B675E; --o-faint:#858075;
  --o-shadow-sm:0 1px 2px rgba(40,35,20,.05);
  --o-shadow:0 1px 2px rgba(40,35,20,.04),0 6px 20px -6px rgba(40,35,20,.10);
  --o-shadow-lg:0 18px 50px -12px rgba(20,40,30,.28);
  --o-avatar:linear-gradient(140deg,#0E7A63 0%,#0B5A49 100%);
  --o-hero:linear-gradient(140deg,#0D3B31 0%,#0B5A49 55%,#14705B 100%); --o-hero-solid:#0D3B31;
  --o-hadir:#1E8A55; --o-hadir-strong:#16704A; --o-hadir-soft:#E4F3EA; --o-hadir-ink:#17734A; --o-hadir-line:#B9E0C9;
  --o-telat:#C98A1B; --o-telat-soft:#FBF1DA; --o-telat-ink:#8C5C0B; --o-telat-line:#EED9A6;
  --o-izin:#2F6DB0; --o-izin-soft:#E6EEF8; --o-izin-ink:#25588F; --o-izin-line:#C3D5EC;
  --o-alpha:#C2412D; --o-alpha-soft:#FBE8E4; --o-alpha-ink:#A3321F; --o-alpha-line:#F0C3B9;
  --o-tolak:#6E6259; --o-tolak-soft:#EFEBE7; --o-tolak-ink:#5A4F47;
  --o-side-bg:#FBFAF7; --o-side-line:#ECE8DF; --o-side-text:#4A473F; --o-side-head:#1B1A17; --o-side-faint:#8A857A; --o-side-ico:#7D786D;
  --o-side-hover:#F1EEE7; --o-side-active-bg:#0B6B57; --o-side-active-text:#FFFFFF; --o-side-active-ico:#F0D58C; --o-side-active-shadow:0 6px 16px -6px rgba(11,107,87,.55);
  --o-topbar:rgba(251,250,247,.86);
  --o-nav-bg:rgba(252,251,247,.66); --o-nav-line:rgba(255,255,255,.78); --o-nav-blur:22px; --o-nav-shadow:0 14px 36px -12px rgba(16,48,38,.30),0 2px 6px -2px rgba(16,48,38,.08),inset 0 0 0 1px rgba(11,107,87,.07);
  --o-nav-ico:#8E897E; --o-nav-active:#0B6B57; --o-nav-pill:rgba(11,107,87,.10); --o-nav-dot:#C9A23F;
  --o-fab:linear-gradient(150deg,#12846B 0%,#0B5A49 100%); --o-fab-shadow:0 10px 24px -6px rgba(11,90,73,.55),inset 0 1px 0 rgba(255,255,255,.18);
  --o-fab-ring:rgba(250,249,245,.92); --o-on-fab:#FFFFFF; --o-fab-label:#1B1A17;
  --o-sheet-bg:rgba(252,251,247,.80); --o-overlay:rgba(27,26,23,.24);
  --o-gear:#1B1A17; --o-on-gear:#F0D58C;
  --o-chart-1:#0B6B57; --o-chart-2:#C9A23F; --o-chart-track:#E9E5DC; --o-chart-grid:#EEEBE3;
  --o-meta-light:#0B6B57; --o-meta-dark:#0F1513;
}
html[data-theme="dark"]{
  --o-primary:#3DBB97; --o-primary-strong:#2FA081; --o-primary-ink:#6FD6B5; --o-on-primary:#04241B;
  --o-primary-soft:rgba(61,187,151,.13); --o-primary-line:rgba(61,187,151,.30);
  --o-accent:#D9B55B; --o-accent-soft:rgba(217,181,91,.14); --o-accent-ink:#E6C87A; --o-accent-line:rgba(217,181,91,.30); --o-on-accent:#2B2208;
  --o-bg:#0F1513; --o-bg-page:radial-gradient(900px 420px at 50% -8%,#13241E 0%,rgba(15,21,19,0) 70%),#0F1513;
  --o-surface:#161E1B; --o-surface-glass:rgba(22,30,27,.82); --o-surface-2:#1B2521; --o-surface-3:#212C28;
  --o-border:#25312C; --o-border-strong:#33423C;
  --o-text:#ECEAE4; --o-text-2:#D3D0C8; --o-muted:#A6A398; --o-faint:#7B7A72;
  --o-shadow-sm:none; --o-shadow:0 1px 0 rgba(255,255,255,.02) inset,0 10px 30px -14px rgba(0,0,0,.6); --o-shadow-lg:0 20px 60px -14px rgba(0,0,0,.75);
  --o-avatar:linear-gradient(140deg,#2FA081 0%,#0E5E4C 100%);
  --o-hero:linear-gradient(140deg,#0B231D 0%,#0F3A30 60%,#145244 100%); --o-hero-solid:#0B231D;
  --o-hadir:#3FB97A; --o-hadir-strong:#34A06A; --o-hadir-soft:rgba(63,185,122,.14); --o-hadir-ink:#74D7A2; --o-hadir-line:rgba(63,185,122,.32);
  --o-telat:#E3AA45; --o-telat-soft:rgba(227,170,69,.14); --o-telat-ink:#EDC377; --o-telat-line:rgba(227,170,69,.32);
  --o-izin:#6EA6E6; --o-izin-soft:rgba(110,166,230,.14); --o-izin-ink:#9CC2EE; --o-izin-line:rgba(110,166,230,.32);
  --o-alpha:#EC7B69; --o-alpha-soft:rgba(236,123,105,.14); --o-alpha-ink:#F3A193; --o-alpha-line:rgba(236,123,105,.32);
  --o-tolak:#A89A90; --o-tolak-soft:rgba(168,154,144,.14); --o-tolak-ink:#C4B8AF;
  --o-side-bg:#0C1210; --o-side-line:#1E2925; --o-side-text:#B9B6AD; --o-side-head:#ECEAE4; --o-side-faint:#6F6E67; --o-side-ico:#8E8C83;
  --o-side-hover:#18221E; --o-side-active-bg:rgba(61,187,151,.16); --o-side-active-text:#E9FBF4; --o-side-active-ico:#D9B55B; --o-side-active-shadow:inset 0 0 0 1px rgba(61,187,151,.28);
  --o-topbar:rgba(12,18,16,.84);
  --o-nav-bg:rgba(24,33,29,.62); --o-nav-line:rgba(255,255,255,.07); --o-nav-shadow:0 14px 40px -10px rgba(0,0,0,.85),inset 0 0 0 1px rgba(61,187,151,.08);
  --o-nav-ico:#85837B; --o-nav-active:#ECEAE4; --o-nav-pill:rgba(61,187,151,.16); --o-nav-dot:#D9B55B;
  --o-fab:linear-gradient(150deg,#3DBB97 0%,#1F8A6D 100%); --o-fab-shadow:0 10px 26px -6px rgba(61,187,151,.42),inset 0 1px 0 rgba(255,255,255,.22);
  --o-fab-ring:rgba(15,21,19,.88); --o-on-fab:#04241B; --o-fab-label:#ECEAE4;
  --o-sheet-bg:rgba(24,33,29,.78); --o-overlay:rgba(0,0,0,.42);
  --o-gear:#1B2521; --o-on-gear:#D9B55B;
  --o-chart-1:#3DBB97; --o-chart-2:#D9B55B; --o-chart-track:#2A3631; --o-chart-grid:#222D29;
}


/* ============================================================
   DASAR BERSAMA (dipakai opsi A/B/C) — hanya warna/tipografi/bentuk.
   Tidak mengubah layout. Semua nilai dari variabel --o-* di atas.
   Prefix "html:root:root" = html:root:root  -> lebih spesifik dari theme.css lama.
   ============================================================ */
html:root:root{color-scheme:light}
html:root:root[data-theme="dark"]{color-scheme:dark}
html:root:root body,html:root:root[data-theme="dark"] body,html:root:root .absen-shell{background:var(--o-bg-page)!important;background-attachment:fixed!important;color:var(--o-text);font-family:var(--o-font)!important;font-feature-settings:"cv11","ss01";letter-spacing:var(--o-tracking)}
html:root:root[data-theme="dark"] .absen-shell{background:transparent!important}
html:root:root button,html:root:root input,html:root:root select,html:root:root textarea{font-family:inherit}
html:root:root .font-mono{font-family:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace!important;letter-spacing:0}
html:root:root h1,html:root:root h2,html:root:root h3,html:root:root .font-semibold.text-slate-900,html:root:root .text-lg.font-semibold{letter-spacing:var(--o-tracking-head)}

/* ---------- permukaan ---------- */
html:root:root .bg-white,html:root:root .bg-white\/60,html:root:root .bg-white\/80,html:root:root .bg-white\/90,html:root:root .bg-white\/95,html:root:root .glass,html:root:root .card,html:root:root .dash-card,html:root:root .dash-stat{background-color:var(--o-surface)!important;border-color:var(--o-border)!important}
html:root:root .glass,html:root:root .bg-white\/80{background-color:var(--o-surface-glass)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
html:root:root[data-theme="dark"] .bg-white,html:root:root[data-theme="dark"] .glass,html:root:root[data-theme="dark"] .card,html:root:root[data-theme="dark"] .dash-card,html:root:root[data-theme="dark"] .dash-stat,html:root:root[data-theme="dark"] .bg-white\/80,html:root:root[data-theme="dark"] .bg-white\/95{color:var(--o-text)!important}
html:root:root .card,html:root:root .dash-card{border:1px solid var(--o-border)!important;border-radius:var(--o-radius)!important;box-shadow:var(--o-shadow)!important}
html:root:root .dash-stat{border-radius:var(--o-radius-sm)!important;box-shadow:var(--o-shadow-sm)!important;padding:12px 8px!important}
html:root:root .dash-stat b{font-size:20px!important;font-weight:700;color:var(--o-text)!important;letter-spacing:-.02em}
html:root:root .dash-stat span{color:var(--o-muted)!important;font-size:10.5px!important;font-weight:500}
html:root:root .dash-card h2{color:var(--o-text)!important;font-size:14px!important;font-weight:700!important;letter-spacing:-.01em}
html:root:root .dash-card .sub{color:var(--o-faint)!important}
html:root:root .rounded-2xl{border-radius:var(--o-radius)!important}
html:root:root .rounded-3xl{border-radius:calc(var(--o-radius) + 6px)!important}
html:root:root .rounded-xl{border-radius:var(--o-radius-sm)!important}
html:root:root .shadow-sm,html:root:root .shadow-md,html:root:root .shadow-lg{box-shadow:var(--o-shadow)!important}
html:root:root .shadow-2xl{box-shadow:var(--o-shadow-lg)!important}
html:root:root .shadow-blue-200,html:root:root .shadow-md.shadow-blue-200,html:root:root .shadow-slate-200\/80{--tw-shadow-color:transparent!important;box-shadow:var(--o-shadow-sm)!important}
html:root:root .bg-slate-50,html:root:root .bg-gray-50,html:root:root .bg-slate-50\/60,html:root:root .bg-slate-50\/80,html:root:root .bg-slate-50\/90{background-color:var(--o-surface-2)!important}
html:root:root .bg-slate-100{background-color:var(--o-surface-3)!important;color:inherit}
html:root:root .bg-slate-200{background-color:var(--o-border)!important}
html:root:root[data-theme="dark"] .bg-slate-50,html:root:root[data-theme="dark"] .bg-slate-100,html:root:root[data-theme="dark"] .bg-gray-50{color:var(--o-text-2)!important;box-shadow:none!important}
html:root:root .border-slate-100,html:root:root .border-slate-200,html:root:root .border-slate-200\/80,html:root:root .border-gray-200,html:root:root .border-white\/70,html:root:root .border-t,html:root:root .border-b{border-color:var(--o-border)!important}

/* ---------- teks ---------- */
html:root:root .text-slate-900,html:root:root .text-slate-800,html:root:root .text-gray-900,html:root:root .text-gray-800,html:root:root[data-theme="dark"] h1,html:root:root[data-theme="dark"] h2,html:root:root[data-theme="dark"] h3{color:var(--o-text)!important}
html:root:root .text-slate-700,html:root:root .text-slate-600,html:root:root .text-gray-700,html:root:root .text-gray-600{color:var(--o-text-2)!important}
html:root:root .text-slate-500{color:var(--o-muted)!important}
html:root:root .text-slate-400,html:root:root .text-slate-300{color:var(--o-faint)!important}
html:root:root .bg-slate-900 .text-slate-300,html:root:root .from-slate-900 .text-slate-300{color:rgba(255,255,255,.72)!important}

/* ---------- warna utama (mengganti indigo/blue/brand) ---------- */
html:root:root .bg-indigo-600,html:root:root .bg-indigo-500,html:root:root .bg-blue-600,html:root:root .bg-blue-500,html:root:root .bg-brand-600,html:root:root[data-theme="dark"] .bg-indigo-600{background-color:var(--o-primary)!important;color:var(--o-on-primary)!important}
html:root:root .hover\:bg-indigo-700:hover,html:root:root .hover\:bg-blue-700:hover{background-color:var(--o-primary-strong)!important}
html:root:root .text-indigo-600,html:root:root .text-indigo-700,html:root:root .text-blue-600,html:root:root .text-blue-700,html:root:root .text-brand-600,html:root:root[data-theme="dark"] .text-indigo-600{color:var(--o-primary-ink)!important}
html:root:root .bg-indigo-50,html:root:root .bg-blue-50,html:root:root .bg-indigo-100,html:root:root .bg-blue-100{background-color:var(--o-primary-soft)!important;color:var(--o-primary-ink)!important;border-color:var(--o-primary-line)!important}
html:root:root .border-indigo-200,html:root:root .border-blue-200,html:root:root .border-blue-400,html:root:root .border-indigo-100{border-color:var(--o-primary-line)!important}
html:root:root .ring-indigo-500,html:root:root .focus\:ring-indigo-500:focus{--tw-ring-color:var(--o-primary)!important}
html:root:root input:focus,html:root:root select:focus,html:root:root textarea:focus{outline:none;border-color:var(--o-primary)!important;box-shadow:0 0 0 3px var(--o-primary-soft)!important}
html:root:root[data-theme="dark"] input,html:root:root[data-theme="dark"] select,html:root:root[data-theme="dark"] textarea{background-color:var(--o-surface-2)!important;color:var(--o-text)!important;border-color:var(--o-border-strong)!important}
/* avatar/inisial gradient */
html:root:root .bg-gradient-to-br.from-blue-600,html:root:root .bg-gradient-to-br.from-indigo-500,html:root:root .bg-gradient-to-br.from-indigo-600{background-image:var(--o-avatar)!important;color:var(--o-on-primary)!important}
/* hero gelap (kartu kamera absen) & header rekap */
html:root:root .bg-gradient-to-br.from-slate-900,html:root:root .bg-slate-900.rounded-3xl{background-image:var(--o-hero)!important;background-color:var(--o-hero-solid)!important}
html:root:root header.sticky.bg-gradient-to-r,html:root:root[data-theme="dark"] header.sticky.bg-gradient-to-r{background:var(--o-hero)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--o-shadow)!important;border:0!important}
html:root:root .text-teal-100{color:rgba(255,255,255,.72)!important}
html:root:root header.sticky.bg-gradient-to-r a{border-radius:999px!important}

/* ---------- status (hadir / terlambat / izin / alpha / ditolak) ---------- */
html:root:root .bg-emerald-500,html:root:root .bg-green-500,html:root:root .bg-emerald-600{background-color:var(--o-hadir)!important}
html:root:root .hover\:bg-emerald-600:hover{background-color:var(--o-hadir-strong)!important}
html:root:root .bg-emerald-50,html:root:root .bg-emerald-50\/60,html:root:root .bg-green-50,html:root:root .bg-emerald-100{background-color:var(--o-hadir-soft)!important;color:var(--o-hadir-ink)!important}
html:root:root .text-emerald-500,html:root:root .text-emerald-600,html:root:root .text-emerald-700,html:root:root .text-emerald-800,html:root:root .text-green-600,html:root:root .text-green-700{color:var(--o-hadir-ink)!important}
html:root:root .border-emerald-100,html:root:root .border-emerald-200,html:root:root .border-emerald-300,html:root:root .border-green-200{border-color:var(--o-hadir-line)!important}
html:root:root .bg-amber-50,html:root:root .bg-yellow-50,html:root:root .bg-amber-100{background-color:var(--o-telat-soft)!important;color:var(--o-telat-ink)!important}
html:root:root .text-amber-600,html:root:root .text-amber-700,html:root:root .text-amber-800,html:root:root .text-amber-900,html:root:root .text-amber-950{color:var(--o-telat-ink)!important}
html:root:root .border-amber-100,html:root:root .border-amber-200,html:root:root .border-amber-300{border-color:var(--o-telat-line)!important}
html:root:root .bg-amber-500{background-color:var(--o-telat)!important}
html:root:root .bg-sky-50,html:root:root .bg-cyan-50{background-color:var(--o-izin-soft)!important;color:var(--o-izin-ink)!important}
html:root:root .text-sky-600,html:root:root .text-sky-700,html:root:root .text-sky-900,html:root:root .text-sky-950{color:var(--o-izin-ink)!important}
html:root:root .border-sky-200,html:root:root .border-sky-100{border-color:var(--o-izin-line)!important}
html:root:root .bg-red-50,html:root:root .bg-rose-50{background-color:var(--o-alpha-soft)!important;color:var(--o-alpha-ink)!important}
html:root:root .text-red-500,html:root:root .text-red-600,html:root:root .text-red-700,html:root:root .text-red-800,html:root:root .text-rose-600{color:var(--o-alpha-ink)!important}
html:root:root .border-red-100,html:root:root .border-red-200{border-color:var(--o-alpha-line)!important}
html:root:root .hover\:bg-red-50:hover{background-color:var(--o-alpha-soft)!important}
html:root:root .bg-red-500,html:root:root .bg-red-600{background-color:var(--o-alpha)!important}
html:root:root .bg-orange-50,html:root:root .bg-orange-50\/60{background-color:var(--o-accent-soft)!important;color:var(--o-accent-ink)!important}
html:root:root .text-orange-600,html:root:root .text-orange-700{color:var(--o-accent-ink)!important}
html:root:root .border-orange-100,html:root:root .border-orange-200{border-color:var(--o-accent-line)!important}
/* kelas status siap pakai (untuk dipakai bertahap di markup) */
.st-hadir{color:var(--o-hadir-ink);background:var(--o-hadir-soft)}
.st-terlambat{color:var(--o-telat-ink);background:var(--o-telat-soft)}
.st-izin{color:var(--o-izin-ink);background:var(--o-izin-soft)}
.st-alpha{color:var(--o-alpha-ink);background:var(--o-alpha-soft)}
.st-ditolak{color:var(--o-tolak-ink);background:var(--o-tolak-soft)}

/* ---------- tabel ---------- */
html:root:root thead th,html:root:root[data-theme="dark"] thead th{background:var(--o-surface-2)!important;color:var(--o-muted)!important;font-weight:600;letter-spacing:.02em}
html:root:root[data-theme="dark"] table{color:var(--o-text-2)!important}

/* ---------- sidebar (desktop admin) ---------- */
html:root:root #appSidebar,html:root:root[data-theme="dark"] #appSidebar,html:root:root[data-theme="dark"] aside{background:var(--o-side-bg)!important;border-color:var(--o-side-line)!important;color:var(--o-side-text)}
html:root:root #appSidebar .text-slate-500,html:root:root #appSidebar .text-slate-400{color:var(--o-side-faint)!important}
html:root:root #appSidebar .text-slate-900,html:root:root #appSidebar .text-slate-800{color:var(--o-side-head)!important}
html:root:root #appSidebar a.text-slate-600{color:var(--o-side-text)!important}
html:root:root #appSidebar a.text-slate-600:hover,html:root:root #appSidebar .nav-group-toggle:hover,html:root:root[data-theme="dark"] #appSidebar a:hover,html:root:root[data-theme="dark"] #appSidebar .nav-group-toggle:hover{background:var(--o-side-hover)!important;color:var(--o-side-head)!important}
html:root:root #appSidebar a.bg-slate-900,html:root:root[data-theme="dark"] #appSidebar a.bg-slate-900{background:var(--o-side-active-bg)!important;color:var(--o-side-active-text)!important;box-shadow:var(--o-side-active-shadow)!important}
html:root:root #appSidebar a.bg-slate-900 .ikon{color:var(--o-side-active-ico)!important;opacity:1}
html:root:root #appSidebar a{border-radius:var(--o-radius-sm)!important}
html:root:root #appSidebar .border-b,html:root:root #appSidebar .border-t,html:root:root #appSidebar .border-slate-100,html:root:root #appSidebar .border-slate-200{border-color:var(--o-side-line)!important}
html:root:root #appSidebar .bg-white,html:root:root #appSidebar .bg-slate-50{background:transparent!important}
html:root:root .app-main > header:not(.lg\:hidden),html:root:root[data-theme="dark"] .app-main > header:not(.lg\:hidden){background:var(--o-topbar)!important;border-color:var(--o-border)!important;-webkit-backdrop-filter:blur(14px) saturate(1.5)!important;backdrop-filter:blur(14px) saturate(1.5)!important}
html:root:root[data-theme="dark"] header.lg\:hidden.sticky{background:transparent!important;backdrop-filter:none!important}
html:root:root #userMenuDropdown{border-radius:var(--o-radius)!important;box-shadow:var(--o-shadow-lg)!important;padding:6px!important}
html:root:root #userMenuDropdown a,html:root:root #userMenuDropdown button{border-radius:var(--o-radius-sm)!important}
html:root:root #userMenuDropdown .hover\:bg-slate-50:hover,html:root:root[data-theme="dark"] #userMenuDropdown .hover\:bg-slate-50:hover{background:var(--o-surface-2)!important;color:var(--o-text)!important}
html:root:root[data-theme="dark"] .hover\:bg-slate-50:hover,html:root:root[data-theme="dark"] .hover\:bg-slate-100:hover{background:var(--o-surface-3)!important;color:var(--o-text)!important}

/* ---------- ikon (Lucide, stroke konsisten) ---------- */
.ikon{width:1.15em;height:1.15em;stroke-width:var(--o-ikon-stroke);flex-shrink:0;vertical-align:-.18em}
html:root:root #appSidebar .ikon-wrap{display:inline-flex;align-items:center;justify-content:center;opacity:1!important}
html:root:root #appSidebar .ikon-wrap .ikon{width:18px;height:18px;color:var(--o-side-ico)}
.o-ico-bulat{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:var(--o-primary-soft);color:var(--o-primary-ink);margin-bottom:6px}
.o-ico-bulat .ikon{width:18px;height:18px}
.o-ico-bulat.pulang{background:var(--o-accent-soft);color:var(--o-accent-ink)}
.dash-stat .o-stat-ico{display:block;margin:0 auto 4px;width:16px;height:16px;color:var(--o-primary-ink);opacity:.9}

/* ---------- tombol tema (terang/gelap) ---------- */
.o-tema-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--o-border);background:var(--o-surface-2);color:var(--o-text-2);flex-shrink:0;transition:background .2s,color .2s}
.o-tema-btn:hover{color:var(--o-primary-ink);background:var(--o-primary-soft)}
.o-tema-btn .ikon{width:17px;height:17px}
.o-tema-btn .i-sun{display:none}
html[data-theme="dark"] .o-tema-btn .i-sun{display:block}
html[data-theme="dark"] .o-tema-btn .i-moon{display:none}
header.bg-gradient-to-r .o-tema-btn{width:30px;height:30px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
.o-tema-switch{margin-left:auto;width:30px;height:17px;border-radius:999px;background:var(--o-border-strong);position:relative;transition:background .2s}
.o-tema-switch::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
html[data-theme="dark"] .o-tema-switch{background:var(--o-primary)}
html[data-theme="dark"] .o-tema-switch::after{transform:translateX(13px)}
html:root:root a.bg-slate-100.rounded-full[href="logout.php"]{background:var(--o-surface-2)!important;color:var(--o-text-2)!important;border:1px solid var(--o-border);display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px!important}

/* ---------- bottom nav + FAB ---------- */
html:root:root nav.fixed.bottom-0,html:root:root[data-theme="dark"] nav.fixed.bottom-0{background:var(--o-nav-bg)!important;border-color:var(--o-nav-line)!important;-webkit-backdrop-filter:blur(var(--o-nav-blur)) saturate(1.8)!important;backdrop-filter:blur(var(--o-nav-blur)) saturate(1.8)!important;box-shadow:var(--o-nav-shadow)!important}
html:root:root .bn-tab,html:root:root[data-theme="dark"] .bn-tab{color:var(--o-nav-ico)!important;padding:9px 0 7px!important;gap:4px!important;position:relative}
html:root:root .bn-tab svg{width:22px!important;height:22px!important;stroke-width:var(--o-ikon-stroke)!important}
html:root:root .bn-tab span{font-size:10.5px!important;font-weight:600!important;letter-spacing:0!important}
html:root:root .bn-tab.text-indigo-600,html:root:root[data-theme="dark"] .bn-tab.text-indigo-600{color:var(--o-nav-active)!important}
html:root:root .bn-tab.text-indigo-600 svg{background:var(--o-nav-pill);border-radius:999px;padding:3px 14px;width:52px!important;height:28px!important;margin:-3px 0}
html:root:root .bn-tab:disabled{opacity:.32!important}
html:root:root .bn-tab .bg-amber-500,html:root:root .bn-tab [class*="bg-amber"]{background:var(--o-accent)!important;color:var(--o-on-accent)!important}
html:root:root .bn-fab{background:var(--o-fab)!important;box-shadow:var(--o-fab-shadow)!important;width:58px!important;height:58px!important;border:4px solid var(--o-fab-ring)!important;color:var(--o-on-fab)!important}
html:root:root .bn-fab svg{width:24px!important;height:24px!important;stroke-width:var(--o-ikon-stroke)!important}
html:root:root .bn-fab span{color:var(--o-fab-label)!important;font-weight:700!important;bottom:-20px!important}
html:root:root #bnOverlay{background:var(--o-overlay)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html:root:root #bnSheet > div,html:root:root[data-theme="dark"] #bnSheet > div{background:var(--o-sheet-bg)!important;border:1px solid var(--o-border)!important;-webkit-backdrop-filter:blur(20px) saturate(1.6)!important;backdrop-filter:blur(20px) saturate(1.6)!important;border-radius:calc(var(--o-radius) + 2px)!important;box-shadow:var(--o-shadow-lg)!important;min-width:210px}
html:root:root #bnBody{padding:6px!important}
html:root:root .bn-link,html:root:root[data-theme="dark"] .bn-link{color:var(--o-text)!important;font-weight:500;border-radius:var(--o-radius-sm)!important;padding:10px 12px!important;gap:12px!important}
html:root:root .bn-link:active,html:root:root .bn-link:hover{background:var(--o-primary-soft)!important}
html:root:root .bn-ico{width:32px!important;height:32px!important;padding:7px;border-radius:10px;background:var(--o-primary-soft);color:var(--o-primary-ink)!important;stroke-width:var(--o-ikon-stroke)!important}
html:root:root button.bg-slate-800.rounded-full.fixed,html:root:root button.fixed.bg-slate-800{background:var(--o-gear)!important;color:var(--o-on-gear)!important;box-shadow:var(--o-shadow-lg)!important;border:1px solid var(--o-border)}
html:root:root span.rounded-full,html:root:root .text-\[11px\].rounded-full{white-space:nowrap}
html:root:root button.bg-slate-800:not(.fixed),html:root:root button.bg-slate-900:not(.fixed){background:var(--o-surface-3)!important;color:var(--o-text)!important;border:1px solid var(--o-border-strong)!important}
html:root:root .bn-fab.text-indigo-600,html:root:root .bn-fab.text-slate-500,html:root:root .bn-fab.text-slate-400,html:root:root[data-theme="dark"] .bn-fab{color:var(--o-on-fab)!important}
html:root:root[data-theme="dark"] .bg-emerald-500.text-white,html:root:root[data-theme="dark"] button.bg-emerald-500{color:var(--o-on-hadir,#04140C)!important}
/* banner halaman mandiri (rekap murid) & tombol teal */
html:root:root .bg-indigo-700.text-white,html:root:root .bg-indigo-800.text-white{background:var(--o-hero)!important;color:#fff!important}
html:root:root .bg-indigo-700 .text-indigo-200,html:root:root .bg-indigo-700 .text-indigo-100{color:rgba(255,255,255,.72)!important}
html:root:root .bg-teal-600{background-color:var(--o-primary)!important;color:var(--o-on-primary)!important}
html:root:root .hover\:bg-teal-700:hover{background-color:var(--o-primary-strong)!important}
html:root:root .bg-indigo-700 .o-tema-btn{width:30px;height:30px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff}
html:root:root a[href="logout.php"] .ikon{width:14px;height:14px}
html:root:root .bg-orange-500,html:root:root .bg-orange-600{background-color:var(--o-accent)!important;color:var(--o-on-accent)!important}
html:root:root .hover\:bg-orange-600:hover,html:root:root .hover\:bg-orange-700:hover{background-color:var(--o-accent)!important;filter:brightness(.94)}
html:root:root .text-orange-500{color:var(--o-accent-ink)!important}
/* rekap-guru-gps tampilan vertikal (bulanan) — selaraskan dengan palet tema */
html:root:root[data-theme="dark"] .rekap-vertikal .rv-libur td{background:var(--o-surface-2)!important;color:var(--o-faint)!important}
html:root:root[data-theme="dark"] .rekap-vertikal tbody tr{border-color:var(--o-border)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .rv-ket{color:var(--o-muted)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .rv-stat{background:var(--o-surface-2)!important;border-color:var(--o-border)!important;color:var(--o-text)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-slate-800{color:var(--o-text)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-slate-500{color:var(--o-muted)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-indigo-700{color:var(--o-primary-ink)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-red-600{color:var(--o-alpha-ink)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-amber-700{color:var(--o-telat-ink)!important}
html:root:root[data-theme="dark"] .rekap-vertikal .text-emerald-700{color:var(--o-hadir-ink)!important}
/* === Perbaikan kontras 19/10/2026b ===
   1) Hover baris tabel: kelas Tailwind ber-opasitas (hover:bg-slate-50/80, /50, hover:bg-gray-50/…) tidak terpetakan,
      sehingga di mode gelap baris yang disorot jadi abu terang (rgba(248,250,252,.8)) dengan teks terang. Dicocokkan lewat [class*=…]. */
html:root:root [class*="hover:bg-slate-50"]:hover,html:root:root [class*="hover:bg-gray-50"]:hover{background-color:var(--o-surface-2)!important}
html:root:root[data-theme="dark"] [class*="hover:bg-slate-50"]:hover,html:root:root[data-theme="dark"] [class*="hover:bg-gray-50"]:hover,html:root:root[data-theme="dark"] [class*="hover:bg-slate-100"]:hover,html:root:root[data-theme="dark"] [class*="hover:bg-gray-100"]:hover,html:root:root[data-theme="dark"] [class*="hover:bg-slate-200"]:hover{background-color:var(--o-surface-3)!important}
html:root:root[data-theme="dark"] [class*="hover:bg-indigo-50"]:hover{background-color:var(--o-primary-soft)!important}
/* 2) Mode gelap: latar pastel (…-50/NN, …-100) yang belum terpetakan → versi "soft" tema */
html:root:root[data-theme="dark"] .bg-red-100,html:root:root[data-theme="dark"] .bg-red-50\/40,html:root:root[data-theme="dark"] .bg-red-50\/60,html:root:root[data-theme="dark"] .bg-red-500\/20{background-color:var(--o-alpha-soft)!important}
html:root:root[data-theme="dark"] .bg-amber-50\/50,html:root:root[data-theme="dark"] .bg-amber-50\/60,html:root:root[data-theme="dark"] .bg-yellow-100{background-color:var(--o-telat-soft)!important}
html:root:root[data-theme="dark"] .bg-emerald-50\/50,html:root:root[data-theme="dark"] .bg-green-100{background-color:var(--o-hadir-soft)!important}
html:root:root[data-theme="dark"] .bg-teal-50,html:root:root[data-theme="dark"] .bg-indigo-50\/40,html:root:root[data-theme="dark"] .bg-indigo-50\/50,html:root:root[data-theme="dark"] .bg-indigo-200\/40,html:root:root[data-theme="dark"] .bg-violet-50,html:root:root[data-theme="dark"] .bg-violet-200\/30{background-color:var(--o-primary-soft)!important}
html:root:root[data-theme="dark"] .bg-purple-50{background-color:var(--o-izin-soft)!important}
html:root:root[data-theme="dark"] .bg-gray-100{background-color:var(--o-surface-3)!important}
/* 3) Mode gelap: teks berwarna gelap (…-700/800/900) yang belum terpetakan → tinta terang tema */
html:root:root[data-theme="dark"] .text-purple-700,html:root:root[data-theme="dark"] .text-violet-700,html:root:root[data-theme="dark"] .text-violet-800,html:root:root[data-theme="dark"] .text-blue-900{color:var(--o-izin-ink)!important}
html:root:root[data-theme="dark"] .text-indigo-800,html:root:root[data-theme="dark"] .text-indigo-900,html:root:root[data-theme="dark"] .text-sky-800,html:root:root[data-theme="dark"] .text-teal-600,html:root:root[data-theme="dark"] .text-teal-700,html:root:root[data-theme="dark"] .text-teal-800,html:root:root[data-theme="dark"] .text-teal-900{color:var(--o-primary-ink)!important}
html:root:root[data-theme="dark"] .text-emerald-900,html:root:root[data-theme="dark"] .text-green-800{color:var(--o-hadir-ink)!important}
html:root:root[data-theme="dark"] .text-orange-800,html:root:root[data-theme="dark"] .text-yellow-800{color:var(--o-telat-ink)!important}
html:root:root[data-theme="dark"] .text-gray-500{color:var(--o-muted)!important}
/* 4) Mode gelap: tombol solid hadir/alpha bertulisan putih — latar terlalu terang untuk teks putih */
html:root:root[data-theme="dark"] .bg-emerald-600.text-white,html:root:root[data-theme="dark"] .bg-emerald-500.text-white,html:root:root[data-theme="dark"] .bg-green-500.text-white{background-color:#23865A!important}
html:root:root[data-theme="dark"] .bg-red-500.text-white,html:root:root[data-theme="dark"] .bg-red-600.text-white{background-color:#C2412D!important}
/* 5) Kedua mode: teks abu/amber yang belum terpetakan; label "Libur" di kepala tabel (kepala tabel kini terang di mode terang) */
html:root:root .text-gray-400{color:var(--o-faint)!important}
html:root:root .text-amber-500{color:var(--o-telat-ink)!important}
html:root:root th .text-amber-200,html:root:root th .text-amber-100{color:var(--o-telat-ink)!important}
/* 6) Mode gelap: teks merah ber-opasitas / hover merah gelap (tombol "Semua" di rekap magang) */
html:root:root[data-theme="dark"] .text-red-600\/80,html:root:root[data-theme="dark"] .hover\:text-red-700:hover,html:root:root[data-theme="dark"] .hover\:text-red-800:hover{color:var(--o-alpha-ink)!important}

/* --- khusus AC: bottom-nav kaca mengambang (gaya C, palet A) + ruang aman konten --- */
:root{
  --bn-tepi:max(12px, env(safe-area-inset-bottom, 0px));   /* jarak nav dari tepi bawah (iPhone: ikut home-indicator) */
  --bn-tinggi:58px;                                         /* tinggi bar nav */
  --bn-ruang:calc(var(--bn-tepi) + var(--bn-tinggi) + 40px);/* ruang kosong di bawah konten (FAB menonjol 26px) */
}
html:root:root nav.fixed.bottom-0{left:12px!important;right:12px!important;bottom:var(--bn-tepi)!important;border:1px solid var(--o-nav-line)!important;border-radius:26px!important}
@media (min-width:1024px){html:root:root body:has(#appSidebar) nav.fixed.bottom-0{left:calc(16rem + 12px)!important}}
html:root:root nav.fixed.bottom-0 .bn-tab{padding:9px 0 8px!important}
html:root:root .bn-fab{margin:-26px auto 14px!important;border-radius:20px!important}
html:root:root .bn-tab.text-indigo-600 svg{background:none;padding:0;width:22px!important;height:22px!important;margin:0}
html:root:root .bn-tab.text-indigo-600::after{content:"";position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:9px;background:var(--o-nav-dot)}
html:root:root #bnSheet{bottom:calc(var(--bn-tepi) + var(--bn-tinggi) + 34px)!important}
html:root:root button.fixed.bg-slate-800,html:root:root button.bg-slate-800.rounded-full.fixed{bottom:calc(var(--bn-tepi) + var(--bn-tinggi) + 12px)!important}
/* ruang bawah: ganti spacer lama (h-20 / mb-16) dengan satu ruang konsisten */
html:root:root .app-main{padding-bottom:var(--bn-ruang)!important}
html:root:root .lg\:hidden.h-20{display:none!important}
html:root:root footer.mb-16{margin-bottom:0!important}
html:root:root .bn-spacer{display:block;height:var(--bn-ruang)}
html:root:root .app-main ~ .bn-spacer{display:none}
html:root:root .sticky.bottom-3{bottom:calc(var(--bn-tepi) + var(--bn-tinggi) + 10px)!important;z-index:30}

}