/* =============================================================================
   UI KIT — SMKN 3 Pariaman · Sistem Manajemen Absensi
   Dibuat oleh ForYuu Creative
   =============================================================================

   Cara pakai
   ----------
   1. Tautkan di <head>, SETELAH tag Tailwind & font Poppins:
        <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/ui-kit.css">
   2. (Opsional) muat assets/js/ui-kit.js sebelum </body> untuk toast, modal
      konfirmasi, count-up, dan palet Chart.js.

   Isi berkas
   ----------
    1. Token (warna, radius, shadow)
    2. Dasar (reset ringan, body, scrollbar, fokus)
    3. Layout dashboard   (hasil ekstraksi dari pages/dashboard/index.php)
    4. Kartu lama         (dashboard-card, stat-card, hero-banner, dst.)
    5. Komponen baru      (prefiks .uk-)
         5.1  Page header      .uk-page-header
         5.2  Stat card        .uk-stat
         5.3  Card konten      .uk-card
         5.4  Tabel modern     .uk-table-wrap > .uk-table
         5.5  Badge status     .uk-badge
         5.6  Filter bar       .uk-filterbar
         5.7  Form             .uk-field .uk-input .uk-select .uk-switch
         5.8  Tombol           .uk-btn
         5.9  Pagination       .uk-pagination
         5.10 Empty state      .uk-empty
         5.11 Modal konfirmasi .uk-modal
         5.12 Toast & alert    .uk-toast .uk-alert
         5.13 Skeleton         .uk-skeleton
         5.14 Progress         .uk-ring .uk-progress
         5.15 Tab              .uk-tabs
         5.16 Kartu pelajar    .uk-idcard
         5.17 Dialog form      .uk-dialog
         5.18 Jadwal mingguan  .uk-week .uk-agenda
    6. Animasi & prefers-reduced-motion

   Prinsip: navy = identitas, kuning emas = penanda/aksen kecil, teal = aksen
   sekunder. Warna status absensi SELALU lewat .uk-badge--{status}, jangan
   hard-code warna lain.
============================================================================= */


/* =============================================================================
   1. TOKEN
============================================================================= */
:root {
    /* Identitas sekolah */
    --uk-navy:        #172554;
    --uk-navy-2:      #1e3a8a;
    --uk-teal:        #0e7490;
    --uk-teal-2:      #14b8a6;
    --uk-gold:        #f5b515;
    --uk-gold-soft:   #fef3c7;

    /* Permukaan & teks */
    --uk-bg:          #f3f7fc;
    --uk-surface:     #ffffff;
    --uk-line:        #e5edf7;
    --uk-ink:         #172554;
    --uk-ink-soft:    #475569;
    --uk-ink-mute:    #94a3b8;

    /* Status absensi (dipakai badge, chart, progress) */
    --uk-hadir:       #16a34a;
    --uk-izin:        #2563eb;
    --uk-sakit:       #ca8a04;
    --uk-alpha:       #dc2626;
    --uk-terlambat:   #ea580c;

    /* Bentuk */
    --uk-r-card:      20px;
    --uk-r-ctl:       12px;
    --uk-shadow-1:    0 1px 2px rgba(15,23,42,.04), 0 6px 20px -8px rgba(23,37,84,.10);
    --uk-shadow-2:    0 14px 30px -14px rgba(23,37,84,.28);
    --uk-hero:        linear-gradient(118deg, #172554 0%, #1e3a8a 48%, #0e7490 100%);
    --uk-ease:        cubic-bezier(.22,.8,.3,1);
}


/* =============================================================================
   2. DASAR
============================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background: var(--uk-bg);
    color: var(--uk-ink);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--uk-teal);
    outline-offset: 2px;
}


/* =============================================================================
   3. LAYOUT DASHBOARD (diekstrak dari pages/dashboard/index.php)
============================================================================= */
.dashboard-wrapper { margin-left: var(--sidebar-width, 250px); }
.dashboard-main    { width: 100%; max-width: 1360px; margin: 0 auto; }

.section-title { font-size: 1.05rem; font-weight: 800; color: var(--uk-ink); }
@media (min-width: 768px) { .section-title { font-size: 1.2rem; } }

@media (max-width: 1023px) {
    .dashboard-wrapper { margin-left: 0; }
    .dashboard-main    { max-width: 100%; }
}


/* =============================================================================
   4. KARTU LAMA (nama kelas dipertahankan agar halaman lain tidak rusak)
============================================================================= */
.dashboard-card {
    background: var(--uk-surface);
    border: 1px solid var(--uk-line);
    border-radius: var(--uk-r-card);
    box-shadow: var(--uk-shadow-1);
}

/* Banner judul halaman. Dipakai dashboard (.hero-banner) & halaman lain
   (.page-hero). Gradien navy → teal + garis emas tipis di tepi bawah. */
.hero-banner,
.page-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: var(--uk-hero);
    box-shadow: 0 16px 34px -12px rgba(23,37,84,.45);
}
.hero-banner::before,
.page-hero::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    top: -120px; right: -60px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.hero-banner::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--uk-gold) 0, var(--uk-gold) 96px, rgba(245,181,21,0) 96px);
    pointer-events: none;
}
.page-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--uk-gold) 0, var(--uk-gold) 96px, rgba(245,181,21,0) 96px);
    pointer-events: none;
}

.stat-card {
    min-height: 150px;
    background-image: linear-gradient(160deg, #fff 55%, #f2f8ff 100%);
    transition: transform .2s var(--uk-ease), box-shadow .2s var(--uk-ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--uk-shadow-2); }
@media (max-width: 640px) { .stat-card { min-height: 132px; } }

.trend-up   { color: #059669; background: #ecfdf5; }
.trend-down { color: #dc2626; background: #fef2f2; }
.trend-flat { color: #64748b; background: #f1f5f9; }

.quick-action {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 13px 14px; border-radius: 14px;
    transition: background .2s ease, transform .2s ease;
}
.quick-action:hover { transform: translateX(2px); }

.quick-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
}

.kelas-card {
    min-width: 0;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kelas-card:hover { transform: translateY(-1px); }
.kelas-card.kelas-extra { display: none; }

/* Komponen halaman siswa (dipindah dari <style> halaman) */
.tingkat-card { transition: transform .2s ease, box-shadow .2s ease; }
.tingkat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }

.kelas-chip { transition: border-color .2s ease, transform .2s ease; }
.kelas-chip:hover { transform: translateY(-1px); }
.kelas-chip.is-active { background: var(--uk-navy); color: #fff; border-color: var(--uk-navy); }
.kelas-chip.is-active .chip-count { color: rgba(255,255,255,.75); }

.tab-btn.is-active { background: #fff; color: var(--uk-navy); box-shadow: 0 1px 4px rgba(15,23,42,.08); }

.rekap-tile { transition: transform .2s ease, box-shadow .2s ease; }
.rekap-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,23,42,.06); }


/* =============================================================================
   5.1 PAGE HEADER
   <header class="uk-page-header">
     <div class="uk-page-header__main">
       <nav class="uk-crumbs"><a href="#">Beranda</a><span>/</span><b>Data Siswa</b></nav>
       <h1 class="uk-page-header__title">Judul</h1>
       <p class="uk-page-header__sub">Subjudul</p>
     </div>
     <div class="uk-page-header__actions"> …tombol .uk-btn--light / .uk-btn--gold… </div>
   </header>
============================================================================= */
.uk-page-header {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; gap: 18px;
    padding: 24px 22px;
    border-radius: 22px;
    color: #fff;
    background: var(--uk-hero);
    box-shadow: 0 16px 34px -12px rgba(23,37,84,.45);
}
.uk-page-header::before {
    content: ''; position: absolute; pointer-events: none;
    width: 280px; height: 280px; top: -130px; right: -70px; border-radius: 999px;
    background: radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,0) 70%);
}
.uk-page-header::after {
    content: ''; position: absolute; pointer-events: none;
    left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--uk-gold) 0, var(--uk-gold) 96px, rgba(245,181,21,0) 96px);
}
.uk-page-header > * { position: relative; z-index: 1; }
.uk-page-header__title { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.uk-page-header__sub   { margin: 8px 0 0; font-size: .875rem; color: #bfdbfe; max-width: 46ch; }
.uk-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 768px) {
    .uk-page-header { padding: 28px 32px; }
    .uk-page-header__title { font-size: 1.9rem; }
}
@media (min-width: 1024px) {
    .uk-page-header { flex-direction: row; align-items: center; justify-content: space-between; }
}

.uk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .75rem; color: #bfdbfe; }
.uk-crumbs a { color: inherit; text-decoration: none; }
.uk-crumbs a:hover { color: #fff; text-decoration: underline; }
.uk-crumbs b { color: #fff; font-weight: 600; }

/* Kotak angka kecil di dalam header (kaca buram) */
.uk-header-figure {
    min-width: 124px; padding: 12px 16px; border-radius: 16px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
}
.uk-header-figure small { display: block; font-size: 11px; font-weight: 500; color: #bfdbfe; }
.uk-header-figure strong { display: block; margin-top: 2px; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }


/* =============================================================================
   5.2 STAT CARD
   <div class="uk-stat uk-stat--teal">
     <span class="uk-stat__icon"><i data-lucide="users"></i></span>
     <p class="uk-stat__label">Total siswa</p>
     <p class="uk-stat__value" data-count="1240">1.240</p>
     <span class="uk-stat__trend uk-stat__trend--up">+3,2%</span>   (opsional)
   </div>
   Varian warna: --blue --teal --gold --green --red
============================================================================= */
.uk-stat {
    --tone: #2563eb; --tone-soft: #eff6ff;
    position: relative; overflow: hidden;
    padding: 18px; border-radius: var(--uk-r-card);
    background: linear-gradient(160deg, #fff 55%, var(--tone-soft) 140%);
    border: 1px solid var(--uk-line);
    box-shadow: var(--uk-shadow-1);
    transition: transform .2s var(--uk-ease), box-shadow .2s var(--uk-ease);
}
.uk-stat:hover { transform: translateY(-3px); box-shadow: var(--uk-shadow-2); }
.uk-stat--blue  { --tone: #2563eb; --tone-soft: #dbeafe; }
.uk-stat--teal  { --tone: #0e7490; --tone-soft: #cffafe; }
.uk-stat--gold  { --tone: #b45309; --tone-soft: #fef3c7; }
.uk-stat--green { --tone: #16a34a; --tone-soft: #dcfce7; }
.uk-stat--red   { --tone: #dc2626; --tone-soft: #fee2e2; }
.uk-stat__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 13px;
    color: var(--tone); background: var(--tone-soft);
}
.uk-stat__icon svg { width: 20px; height: 20px; }
.uk-stat__label { margin: 14px 0 0; font-size: .75rem; font-weight: 500; color: var(--uk-ink-soft); }
.uk-stat__value { margin: 2px 0 0; font-size: 1.85rem; font-weight: 800; line-height: 1.15; color: var(--uk-ink); font-variant-numeric: tabular-nums; }
.uk-stat__trend {
    position: absolute; top: 18px; right: 18px;
    padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.uk-stat__trend--up   { color: #059669; background: #ecfdf5; }
.uk-stat__trend--down { color: #dc2626; background: #fef2f2; }
.uk-stat__trend--flat { color: #64748b; background: #f1f5f9; }


/* =============================================================================
   5.3 CARD KONTEN
   <section class="uk-card">
     <div class="uk-card__head">
       <div><h3 class="uk-card__title">Judul</h3><p class="uk-card__sub">Keterangan</p></div>
       <div class="uk-card__tools">…</div>
     </div>
     <div class="uk-card__body">…</div>
   </section>
============================================================================= */
.uk-card {
    background: var(--uk-surface); border: 1px solid var(--uk-line);
    border-radius: var(--uk-r-card); box-shadow: var(--uk-shadow-1);
}
.uk-card__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 18px 20px 0;
}
.uk-card__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--uk-ink); }
.uk-card__sub   { margin: 3px 0 0; font-size: .75rem; color: var(--uk-ink-mute); }
.uk-card__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uk-card__body  { padding: 18px 20px 20px; }
.uk-card--flush .uk-card__body { padding: 0; }


/* =============================================================================
   5.4 TABEL MODERN
   Header lembut, hover baris, sticky header, scroll horizontal di HP.
   <div class="uk-table-wrap uk-table-wrap--sticky">
     <table class="uk-table"> <thead>…</thead> <tbody>…</tbody> </table>
   </div>
   Modifier: .uk-table--clickable (kursor pointer + hover), tr.is-active.
   Kolom angka: class .uk-num (rata kanan, angka sejajar).
============================================================================= */
.uk-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--uk-line); border-radius: 16px; background: #fff;
}
.uk-table-wrap--sticky { max-height: 68vh; overflow-y: auto; }
.uk-table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: .78rem; }
.uk-table thead th {
    position: sticky; top: 0; z-index: 2;
    padding: 12px 14px; text-align: left; white-space: nowrap;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--uk-ink-soft);
    background: #f4f8fd; border-bottom: 1px solid var(--uk-line);
}
.uk-table tbody td { padding: 12px 14px; color: var(--uk-ink-soft); border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.uk-table tbody tr:last-child td { border-bottom: 0; }
.uk-table tbody tr { transition: background-color .12s ease; }
.uk-table tbody tr:hover td { background: #f6faff; }
.uk-table tbody tr.is-active td { background: #eaf3ff; }
.uk-table--clickable tbody tr { cursor: pointer; }
.uk-table .uk-strong { color: var(--uk-ink); font-weight: 600; white-space: nowrap; }
.uk-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Kolom pertama menempel saat scroll horizontal di HP */
@media (max-width: 640px) {
    .uk-table--stick-first thead th:first-child,
    .uk-table--stick-first tbody td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
    .uk-table--stick-first thead th:first-child { z-index: 3; background: #f4f8fd; }
}
.uk-avatar {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    width: 34px; height: 34px; border-radius: 999px;
    font-size: .7rem; font-weight: 700; color: var(--uk-navy); background: #dbeafe;
}
.uk-avatar img { width: 100%; height: 100%; object-fit: cover; }


/* =============================================================================
   5.5 BADGE STATUS
   <span class="uk-badge uk-badge--hadir">Hadir</span>
   Status: hadir (hijau) · izin (biru) · sakit (kuning) · alpha (merah)
           terlambat (oranye) · netral (abu, mis. "Belum absen")
   Tambah .uk-badge--dot untuk titik warna di depan teks.
============================================================================= */
.uk-badge {
    --c: #475569; --bg: #f1f5f9;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .68rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    color: var(--c); background: var(--bg);
}
.uk-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.uk-badge--hadir     { --c: #15803d; --bg: #dcfce7; }
.uk-badge--izin      { --c: #1d4ed8; --bg: #dbeafe; }
.uk-badge--sakit     { --c: #a16207; --bg: #fef9c3; }
.uk-badge--alpha     { --c: #b91c1c; --bg: #fee2e2; }
.uk-badge--terlambat { --c: #c2410c; --bg: #ffedd5; }
.uk-badge--netral    { --c: #64748b; --bg: #f1f5f9; }
.uk-badge--navy      { --c: #172554; --bg: #e0e9fb; }
.uk-badge--gold      { --c: #92400e; --bg: #fef3c7; }


/* =============================================================================
   5.6 FILTER BAR
   <form class="uk-filterbar">
     <label class="uk-search"><i data-lucide="search"></i><input class="uk-input" …></label>
     <select class="uk-select">…</select>
     <div class="uk-filterbar__end">…tombol…</div>
   </form>
   Di HP semua kontrol turun jadi satu kolom penuh.
============================================================================= */
.uk-filterbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 14px; background: var(--uk-surface); border: 1px solid var(--uk-line);
    border-radius: var(--uk-r-card); box-shadow: var(--uk-shadow-1);
}
.uk-filterbar__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.uk-search { position: relative; display: block; }
.uk-search > svg, .uk-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--uk-ink-mute); pointer-events: none; }
.uk-search .uk-input { padding-left: 36px; }
@media (max-width: 640px) {
    .uk-filterbar > *, .uk-search { width: 100%; }
    .uk-filterbar__end { margin-left: 0; width: 100%; }
    .uk-filterbar__end > * { flex: 1; }
}


/* =============================================================================
   5.7 FORM
   <div class="uk-field">
     <label class="uk-label" for="x">Nama</label>
     <input id="x" class="uk-input" type="text">
     <p class="uk-hint">Petunjuk</p>  |  <p class="uk-error-text">Pesan galat</p>
   </div>
   Input tanggal: <input type="date" class="uk-input">
   Toggle:        <label class="uk-switch"><input type="checkbox"><span></span></label>
============================================================================= */
.uk-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uk-label { font-size: .75rem; font-weight: 600; color: var(--uk-ink); }
.uk-hint  { margin: 0; font-size: .7rem; color: var(--uk-ink-mute); }
.uk-error-text { margin: 0; font-size: .7rem; font-weight: 500; color: var(--uk-alpha); }

.uk-input, .uk-select, .uk-textarea {
    width: 100%; min-height: 42px; padding: 9px 13px;
    font: inherit; font-size: .8rem; color: var(--uk-ink);
    background: #f8fafc; border: 1px solid #dbe4f0; border-radius: var(--uk-r-ctl);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.uk-textarea { min-height: 96px; resize: vertical; }
.uk-input::placeholder { color: var(--uk-ink-mute); }
.uk-input:hover, .uk-select:hover, .uk-textarea:hover { border-color: #b8c7dc; }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    outline: none; background: #fff; border-color: var(--uk-teal);
    box-shadow: 0 0 0 3px rgba(14,116,144,.16);
}
.uk-select {
    appearance: none; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
}
.uk-input.is-invalid, .uk-select.is-invalid { border-color: var(--uk-alpha); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.uk-select--sm { min-height: 32px; padding: 4px 30px 4px 10px; font-size: .72rem; width: auto; }

.uk-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.uk-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.uk-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background-color .2s ease; }
.uk-switch span::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3);
    transition: transform .2s var(--uk-ease);
}
.uk-switch input:checked + span { background: var(--uk-teal); }
.uk-switch input:checked + span::after { transform: translateX(18px); }
.uk-switch input:focus-visible + span { outline: 2px solid var(--uk-teal); outline-offset: 2px; }


/* =============================================================================
   5.8 TOMBOL
   <a|button class="uk-btn uk-btn--primary">Simpan</a>
   Varian: --primary (navy) · --secondary (outline) · --danger · --ghost
           --gold (aksen, di atas header gelap) · --light (kaca, di atas header)
   Ukuran: --sm · --block. Ikon: <i data-lucide="plus"></i> di dalam tombol.
============================================================================= */
.uk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--uk-r-ctl);
    font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.uk-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.uk-btn:active { transform: scale(.98); }
.uk-btn[disabled], .uk-btn.is-disabled { opacity: .5; pointer-events: none; }
.uk-btn--sm    { min-height: 32px; padding: 5px 12px; font-size: .72rem; border-radius: 10px; }
.uk-btn--block { width: 100%; }

.uk-btn--primary { color: #fff; background: var(--uk-navy); box-shadow: 0 6px 14px -6px rgba(23,37,84,.6); }
.uk-btn--primary:hover { background: var(--uk-navy-2); }
.uk-btn--secondary { color: var(--uk-ink); background: #fff; border-color: #d5dfec; }
.uk-btn--secondary:hover { background: #f4f8fd; border-color: #b8c7dc; }
.uk-btn--danger { color: #fff; background: var(--uk-alpha); box-shadow: 0 6px 14px -6px rgba(220,38,38,.6); }
.uk-btn--danger:hover { background: #b91c1c; }
.uk-btn--ghost { color: var(--uk-ink-soft); background: transparent; }
.uk-btn--ghost:hover { background: #eef3fa; color: var(--uk-ink); }
.uk-btn--gold { color: var(--uk-navy); background: var(--uk-gold); box-shadow: 0 6px 14px -6px rgba(245,181,21,.7); }
.uk-btn--gold:hover { background: #ffc733; }
.uk-btn--light { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.uk-btn--light:hover { background: rgba(255,255,255,.24); }


/* =============================================================================
   5.9 PAGINATION
   <nav class="uk-pagination">
     <p class="uk-pagination__info">Menampilkan 1–10 dari 120 data</p>
     <div class="uk-pagination__pages">
       <a class="uk-page is-disabled">‹</a> <a class="uk-page is-current">1</a> <a class="uk-page">2</a> …
     </div>
   </nav>
============================================================================= */
.uk-pagination { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
@media (min-width: 640px) { .uk-pagination { flex-direction: row; } }
.uk-pagination__info { margin: 0; font-size: .72rem; color: var(--uk-ink-mute); }
.uk-pagination__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.uk-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px;
    font-size: .74rem; font-weight: 600; color: var(--uk-ink-soft); text-decoration: none;
    background: #fff; border: 1px solid #dbe4f0;
    transition: background-color .15s ease, border-color .15s ease;
}
.uk-page:hover { background: #f4f8fd; border-color: #b8c7dc; }
.uk-page.is-current { color: #fff; background: var(--uk-navy); border-color: var(--uk-navy); }
.uk-page.is-disabled { opacity: .4; pointer-events: none; }
.uk-page--gap { border: 0; background: transparent; pointer-events: none; }


/* =============================================================================
   5.10 EMPTY STATE
   <div class="uk-empty">
     <span class="uk-empty__icon"><i data-lucide="users"></i></span>
     <p class="uk-empty__title">Belum ada data</p>
     <p class="uk-empty__text">Kalimat yang mengarahkan aksi berikutnya.</p>
     <a class="uk-btn uk-btn--primary uk-btn--sm">Tambah data</a>
   </div>
============================================================================= */
.uk-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 20px; }
.uk-empty__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; margin-bottom: 14px; border-radius: 20px;
    color: var(--uk-teal); background: linear-gradient(140deg, #e0f2fe, #ccfbf1);
}
.uk-empty__icon svg { width: 26px; height: 26px; }
.uk-empty__title { margin: 0; font-size: .95rem; font-weight: 700; color: var(--uk-ink); }
.uk-empty__text  { margin: 6px 0 16px; max-width: 34ch; font-size: .78rem; color: var(--uk-ink-mute); }
.uk-empty .uk-btn:last-child { margin-top: 2px; }


/* =============================================================================
   5.11 MODAL KONFIRMASI
   Paling mudah lewat JS:  UK.confirm({ title, message, confirmText, tone:'danger', onConfirm })
   Markup manual (jika perlu):
   <div class="uk-modal" role="dialog" aria-modal="true" aria-labelledby="t">
     <div class="uk-modal__panel">
       <span class="uk-modal__icon uk-modal__icon--danger"><i data-lucide="trash-2"></i></span>
       <h3 id="t" class="uk-modal__title">…</h3><p class="uk-modal__text">…</p>
       <div class="uk-modal__actions">…tombol…</div>
     </div>
   </div>
   Tambah class .is-open untuk menampilkan.
============================================================================= */
.uk-modal {
    position: fixed; inset: 0; z-index: 80; display: none;
    align-items: center; justify-content: center; padding: 16px;
    background: rgba(15,23,42,.5); backdrop-filter: blur(3px);
}
.uk-modal.is-open { display: flex; animation: uk-fade .18s ease both; }
.uk-modal__panel {
    width: 100%; max-width: 400px; padding: 26px 24px 22px; text-align: center;
    background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.5);
    animation: uk-pop .22s var(--uk-ease) both;
}
.uk-modal__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 14px; border-radius: 999px;
    color: var(--uk-teal); background: #e0f2fe;
}
.uk-modal__icon svg { width: 26px; height: 26px; }
.uk-modal__icon--danger { color: var(--uk-alpha); background: #fee2e2; }
.uk-modal__icon--warning { color: #b45309; background: var(--uk-gold-soft); }
.uk-modal__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--uk-ink); }
.uk-modal__text  { margin: 0 0 20px; font-size: .82rem; line-height: 1.55; color: var(--uk-ink-soft); }
.uk-modal__text strong { color: var(--uk-ink); }
.uk-modal__note  { display: block; margin-top: 6px; font-size: .74rem; color: var(--uk-alpha); }
.uk-modal__actions { display: flex; gap: 10px; }
.uk-modal__actions .uk-btn { flex: 1; }


/* =============================================================================
   5.12 TOAST & ALERT
   Toast (melayang, hilang otomatis):  UK.toast('Data tersimpan', { type:'success' })
   type: success | error | warning | info
   Alert (menempel di halaman):
   <div class="uk-alert uk-alert--success" role="status"><i data-lucide="check-circle-2"></i><div>Teks</div></div>
============================================================================= */
.uk-toast-region {
    position: fixed; z-index: 90; right: 16px; bottom: 16px; left: 16px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
}
.uk-toast {
    --c: var(--uk-teal);
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
    width: 100%; max-width: 380px; padding: 12px 14px;
    font-size: .8rem; color: var(--uk-ink); background: #fff;
    border: 1px solid var(--uk-line); border-left: 4px solid var(--c); border-radius: 14px;
    box-shadow: 0 16px 32px -14px rgba(15,23,42,.35);
    animation: uk-toast-in .28s var(--uk-ease) both;
}
.uk-toast.is-leaving { animation: uk-toast-out .2s ease both; }
.uk-toast svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; color: var(--c); }
.uk-toast__msg { flex: 1; line-height: 1.45; }
.uk-toast__close { border: 0; background: none; padding: 0 2px; font-size: 1.1rem; line-height: 1; color: var(--uk-ink-mute); cursor: pointer; }
.uk-toast--success { --c: var(--uk-hadir); }
.uk-toast--error   { --c: var(--uk-alpha); }
.uk-toast--warning { --c: var(--uk-terlambat); }
.uk-toast--info    { --c: var(--uk-izin); }

.uk-alert {
    --c: var(--uk-izin); --bg: #eff6ff;
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    font-size: .8rem; font-weight: 500; line-height: 1.5;
    color: var(--c); background: var(--bg); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); border-radius: 14px;
}
.uk-alert svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.uk-alert--success { --c: #15803d; --bg: #f0fdf4; }
.uk-alert--error   { --c: #b91c1c; --bg: #fef2f2; }
.uk-alert--warning { --c: #b45309; --bg: #fffbeb; }


/* =============================================================================
   5.13 SKELETON LOADING
   <div class="uk-skeleton" style="height:14px;width:60%"></div>
   Varian: .uk-skeleton--circle · .uk-skeleton--block (tinggi 120px)
   Bungkus area grafik/tabel: <div class="uk-loading">…</div>  → lepas dengan
   UK.skeleton.off(el) setelah data siap.
============================================================================= */
.uk-skeleton {
    display: block; height: 12px; border-radius: 8px;
    background: linear-gradient(90deg, #eaf0f8 25%, #f5f8fc 50%, #eaf0f8 75%);
    background-size: 200% 100%; animation: uk-shimmer 1.3s linear infinite;
}
.uk-skeleton--circle { width: 36px; height: 36px; border-radius: 999px; }
.uk-skeleton--block  { height: 120px; border-radius: 14px; }
.uk-loading { position: relative; }
.uk-loading > .uk-skeleton--cover { position: absolute; inset: 0; height: auto; border-radius: 14px; z-index: 2; }


/* =============================================================================
   5.14 PROGRESS RING & BAR
   Ring:  <div class="uk-ring" style="--v:87" data-label="87%"></div>
          warna: --ring-color (default teal). Ukuran: --size (default 72px)
   Bar:   <div class="uk-progress"><span style="width:87%"></span></div>
          warna: style="--bar:var(--uk-hadir)"
============================================================================= */
@property --v { syntax: '<number>'; inherits: true; initial-value: 0; }
.uk-ring {
    --size: 72px; --ring-color: var(--uk-teal);
    position: relative; display: inline-grid; place-items: center;
    width: var(--size); height: var(--size); border-radius: 999px;
    background: conic-gradient(var(--ring-color) calc(var(--v) * 1%), #e6edf6 0);
    transition: --v .9s var(--uk-ease);
}
.uk-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 999px; background: #fff; }
.uk-ring::after {
    content: attr(data-label); position: relative;
    font-size: calc(var(--size) * .2); font-weight: 800; color: var(--uk-ink);
}
.uk-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #e6edf6; }
.uk-progress > span {
    display: block; height: 100%; border-radius: inherit;
    background: var(--bar, linear-gradient(90deg, var(--uk-teal), var(--uk-teal-2)));
    transition: width .9s var(--uk-ease);
}


/* =============================================================================
   5.15 TAB
   <div class="uk-tabs" role="tablist">
     <button class="uk-tabs__btn is-active" role="tab" data-tab="a">Ringkasan</button> …
   </div>
   Panel: <div class="uk-tabpanel" data-panel="a">…</div>  (yang tidak aktif diberi atribut hidden)
   Perilaku (klik, hash URL, panah kiri/kanan) ada di UK.tabs() pada ui-kit.js.
============================================================================= */
.uk-tabs {
    display: flex; gap: 4px; padding: 4px; max-width: 100%; overflow-x: auto;
    background: #eef3fa; border-radius: 14px; -webkit-overflow-scrolling: touch;
}
.uk-tabs__btn {
    flex: 1 0 auto; min-height: 36px; padding: 6px 16px; border: 0; border-radius: 10px;
    font: inherit; font-size: .76rem; font-weight: 600; color: var(--uk-ink-soft);
    background: transparent; cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.uk-tabs__btn:hover { color: var(--uk-ink); }
.uk-tabs__btn.is-active { color: var(--uk-navy); background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.1); }
.uk-tabpanel[hidden] { display: none; }
.uk-tabpanel { animation: uk-fade .25s ease both; }

/* Daftar data (label kiri, nilai kanan) */
.uk-dl { display: grid; grid-template-columns: 1fr; gap: 0 32px; margin: 0; font-size: .78rem; }
@media (min-width: 640px) { .uk-dl { grid-template-columns: 1fr 1fr; } }
.uk-dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #f1f5f9; }
.uk-dl dt { flex-shrink: 0; color: var(--uk-ink-mute); }
.uk-dl dd { margin: 0; text-align: right; font-weight: 600; color: var(--uk-ink); word-break: break-word; }


/* =============================================================================
   5.16 KARTU PELAJAR (tampilan layar)
   Gambar kartu dibuat server (pages/siswa/kartu.php); ini hanya pembungkusnya.
   <figure class="uk-idcard"><img src="…kartu.php?id=1" alt="…" width="1012" height="638"></figure>
============================================================================= */
.uk-idcard {
    margin: 0; width: 100%; max-width: 560px; aspect-ratio: 1012 / 638;
    border-radius: 3.2%; overflow: hidden; background: #e8eef7;
    box-shadow: 0 22px 44px -22px rgba(23,37,84,.6), 0 0 0 1px rgba(23,37,84,.06);
    transition: transform .25s var(--uk-ease), box-shadow .25s var(--uk-ease);
}
.uk-idcard:hover { transform: translateY(-3px); box-shadow: 0 28px 48px -22px rgba(23,37,84,.7), 0 0 0 1px rgba(23,37,84,.06); }
.uk-idcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uk-idcard.uk-loading-img { background: linear-gradient(90deg, #e8eef7 25%, #f4f8fd 50%, #e8eef7 75%); background-size: 200% 100%; animation: uk-shimmer 1.4s linear infinite; }


/* =============================================================================
   5.17 DIALOG FORM (modal berisi form, beda dengan .uk-modal yang khusus konfirmasi)
   <div class="uk-dialog" id="dlgX" role="dialog" aria-modal="true" aria-labelledby="dlgXJudul">
     <div class="uk-dialog__panel">
       <div class="uk-dialog__head"><h3 id="dlgXJudul">Judul</h3><button class="uk-dialog__x" data-dialog-close>…</button></div>
       <form class="uk-dialog__form"> <div class="uk-dialog__body">…uk-field…</div>
         <div class="uk-dialog__foot">…tombol…</div> </form>
     </div>
   </div>
   Buka/tutup lewat UK.dialog.open('dlgX') / UK.dialog.close('dlgX'). Esc, klik latar,
   dan elemen [data-dialog-close] menutup. Di HP panel menempel di bawah layar.
============================================================================= */
.uk-dialog { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
.uk-dialog.is-open { display: flex; animation: uk-fade .18s ease both; }
.uk-dialog__panel { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(15,23,42,.45); animation: uk-pop .22s var(--uk-ease) both; }
.uk-dialog__form { display: flex; flex-direction: column; min-height: 0; }
.uk-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; }
.uk-dialog__head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--uk-ink); }
.uk-dialog__x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--uk-ink-mute); cursor: pointer; }
.uk-dialog__x:hover { background: #f1f5f9; color: var(--uk-ink); }
.uk-dialog__x svg, .uk-dialog__x i { width: 18px; height: 18px; }
.uk-dialog__body { padding: 4px 22px 8px; overflow-y: auto; display: grid; gap: 14px; }
.uk-dialog__foot { display: flex; gap: 10px; padding: 14px 22px 20px; }
.uk-dialog__foot .uk-btn { flex: 1; }
.uk-dialog__alert { margin: 0 22px 4px; }
.uk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) {
    .uk-dialog { align-items: flex-end; padding: 0; }
    .uk-dialog__panel { max-width: none; max-height: 92vh; border-radius: 22px 22px 0 0; }
}
body.is-dialog-open { overflow: hidden; }

/* Daftar butir (pesan bentrok, dll.) di dalam .uk-alert */
[hidden].uk-alert, [hidden].uk-hint, [hidden].uk-btn { display: none !important; }
.uk-alert__list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-weight: 500; }
.uk-alert__list a { text-decoration: underline; font-weight: 700; }


/* =============================================================================
   5.18 JADWAL MINGGUAN
   Warna per mata pelajaran lewat variabel --mc-bg / --mc-bd / --mc-ink
   (dibuat includes/jadwal_helper.php: jadwalWarnaStyle($mapelId)); dipakai juga
   oleh .uk-mapel-dot dan .uk-agenda__item.
   Desktop (>=768px): .uk-week = kisi waktu per hari, blok diposisikan menurut jam.
   HP (<768px)      : .uk-agenda = daftar per hari, tanpa scroll horizontal.
============================================================================= */
.uk-mapel-dot { display: inline-block; width: 10px; height: 10px; border-radius: 4px; background: var(--mc-bd, #94a3b8); flex-shrink: 0; }
.uk-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .72rem; color: var(--uk-ink-soft); }
.uk-legend span { display: inline-flex; align-items: center; gap: 6px; }

.uk-week-wrap { display: none; overflow-x: auto; border: 1px solid var(--uk-line); border-radius: 16px; background: #fff; }
.uk-week { display: grid; grid-template-columns: 54px repeat(var(--wk-days, 5), minmax(150px, 1fr)); min-width: 780px; }
.uk-week__head { padding: 10px 8px; text-align: center; font-size: .72rem; font-weight: 700; color: var(--uk-navy); background: #f6faff; border-bottom: 1px solid var(--uk-line); border-left: 1px solid var(--uk-line); position: sticky; top: 0; z-index: 3; }
.uk-week__head--corner { border-left: 0; }
.uk-week__head.is-today { background: var(--uk-gold-soft); }
.uk-week__axis { position: relative; height: var(--wk-h); }
.uk-week__axis span { position: absolute; right: 8px; transform: translateY(-50%); font-size: .64rem; color: var(--uk-ink-mute); }
.uk-week__axis span:first-child { transform: none; }
.uk-week__col { position: relative; height: var(--wk-h); border-left: 1px solid var(--uk-line);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--wk-hour) - 1px), #eef3f9 calc(var(--wk-hour) - 1px), #eef3f9 var(--wk-hour)); }
.uk-wk-block { position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 6px 8px; margin: 1px 2px;
    border-radius: 10px; border-left: 4px solid var(--mc-bd); background: var(--mc-bg); color: var(--mc-ink); text-decoration: none; font-size: .7rem; line-height: 1.25;
    box-shadow: 0 1px 2px rgba(15,23,42,.06); transition: transform .15s var(--uk-ease), box-shadow .15s ease; }
.uk-wk-block:hover, .uk-wk-block:focus-visible { transform: translateY(-2px); box-shadow: var(--uk-shadow-2); z-index: 2; }
.uk-wk-block b { font-weight: 700; font-size: .74rem; }
.uk-wk-block span, .uk-wk-block small { opacity: .85; }
.uk-wk-block small { font-size: .64rem; }

.uk-agenda { display: grid; gap: 12px; }
.uk-agenda__day { background: #fff; border: 1px solid var(--uk-line); border-radius: 16px; overflow: hidden; }
.uk-agenda__day h3 { margin: 0; padding: 9px 14px; font-size: .74rem; font-weight: 700; color: var(--uk-navy); background: #f6faff; border-bottom: 1px solid var(--uk-line); }
.uk-agenda__day h3.is-today { background: var(--uk-gold-soft); }
.uk-agenda__item { display: flex; gap: 10px; align-items: stretch; padding: 10px 14px; text-decoration: none; color: var(--uk-ink); border-bottom: 1px solid #f1f5f9; }
.uk-agenda__item:last-child { border-bottom: 0; }
.uk-agenda__time { width: 76px; flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--uk-ink-soft); }
.uk-agenda__bar { width: 4px; border-radius: 4px; background: var(--mc-bd); flex-shrink: 0; }
.uk-agenda__txt { min-width: 0; font-size: .78rem; }
.uk-agenda__txt b { display: block; font-weight: 700; }
.uk-agenda__txt span { display: block; font-size: .7rem; color: var(--uk-ink-soft); }
.uk-agenda__none { padding: 12px 14px; font-size: .72rem; color: var(--uk-ink-mute); }
@media (min-width: 768px) {
    .uk-week-wrap { display: block; }
    .uk-agenda { display: none; }
}

/* Chip tanggal / pertemuan pada detail jadwal */
.uk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uk-chip { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--uk-line); border-radius: 12px; background: #fff; text-decoration: none; font-size: .7rem; color: var(--uk-ink-soft); transition: border-color .15s ease, transform .15s var(--uk-ease); }
.uk-chip b { font-size: .74rem; color: var(--uk-ink); }
.uk-chip:hover { border-color: var(--uk-teal); transform: translateY(-1px); }
.uk-chip.is-active { border-color: var(--uk-navy); background: #eef3ff; }


/* =============================================================================
   6. ANIMASI
   Gerak dipakai seperlunya: satu urutan muncul saat halaman dibuka
   (.uk-reveal, urutan lewat style="--i:n"), sisanya respon aksi (hover, modal).
   Seluruhnya dimatikan bila pengguna memilih "kurangi gerakan".
============================================================================= */
@keyframes uk-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes uk-pop       { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes uk-rise      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes uk-shimmer   { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes uk-toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes uk-toast-out { to { opacity: 0; transform: translateX(24px); } }

.uk-reveal { animation: uk-rise .5s var(--uk-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .uk-skeleton { animation: none; }
}


/* Cetak halaman detail siswa: hanya kartu yang keluar (tombol Cetak di halaman detail). */
@media print {
    body.is-print-kartu .sidebar, body.is-print-kartu .topbar, body.is-print-kartu [data-no-print] { display: none !important; }
}


/* =============================================================================
   5.19 SESI & SCAN ABSEN MAPEL (Tahap 5)
   Dipakai pages/mengajar/*. Warna status tetap dari token --uk-hadir/--uk-alpha/--uk-terlambat.
============================================================================= */
.uk-sesi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .uk-sesi-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.uk-sesi-stat { background: var(--uk-surface); border: 1px solid var(--uk-line); border-radius: 16px; padding: 12px 10px; text-align: center; box-shadow: var(--uk-shadow-1); }
.uk-sesi-stat b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 800; color: var(--uk-navy); font-variant-numeric: tabular-nums; }
.uk-sesi-stat span { display: block; margin-top: 4px; font-size: .68rem; font-weight: 600; color: var(--uk-ink-soft); }
.uk-sesi-stat--hadir b { color: var(--uk-hadir); }
.uk-sesi-stat--alpha b { color: var(--uk-alpha); }
.uk-sesi-stat--terlambat b { color: var(--uk-terlambat); }

.uk-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.uk-seg button { min-height: 36px; padding: 0 12px; border: 1px solid var(--uk-line); border-radius: 999px; background: #fff; font: inherit; font-size: .74rem; font-weight: 600; color: var(--uk-ink-soft); cursor: pointer; }
.uk-seg button.is-active { background: var(--uk-navy); border-color: var(--uk-navy); color: #fff; }

.uk-murid { display: flex; align-items: center; gap: 10px; min-width: 0; }
.uk-murid__foto { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; object-fit: cover; background: #e2e8f0; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--uk-navy); overflow: hidden; }
.uk-murid__nama { font-weight: 600; color: var(--uk-ink); line-height: 1.25; overflow-wrap: anywhere; }
.uk-murid__sub { display: block; font-size: .68rem; font-weight: 500; color: var(--uk-ink-mute); }

/* Panel kamera & hasil scan */
.uk-scan-reader { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #0f172a; }
.uk-scan-reader video { width: 100% !important; height: 100% !important; object-fit: cover; }
.uk-scan-reader__idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; color: #cbd5e1; font-size: .8rem; }
.uk-scan-reader__idle svg { width: 40px; height: 40px; }

.uk-scan-result { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; border: 2px solid var(--uk-line); background: #fff; min-height: 104px; transition: background-color .2s ease, border-color .2s ease; }
.uk-scan-result__foto { flex: 0 0 auto; width: 76px; height: 96px; border-radius: 14px; object-fit: cover; background: #e2e8f0; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: var(--uk-navy); overflow: hidden; }
.uk-scan-result__nama { font-size: 1.05rem; font-weight: 800; color: var(--uk-ink); line-height: 1.2; overflow-wrap: anywhere; }
.uk-scan-result__pesan { margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--uk-ink-soft); }
.uk-scan-result.is-ok { border-color: var(--uk-hadir); background: #f0fdf4; }
.uk-scan-result.is-late { border-color: var(--uk-terlambat); background: #fff7ed; }
.uk-scan-result.is-err { border-color: var(--uk-alpha); background: #fef2f2; }
.uk-scan-result.is-wait { border-style: dashed; color: var(--uk-ink-mute); justify-content: center; text-align: center; }
.uk-scan-result.is-pop { animation: uk-pop .28s var(--uk-ease); }
@keyframes uk-pop { from { transform: scale(.97); } to { transform: scale(1); } }

.uk-scan-log { list-style: none; margin: 0; padding: 0; }
.uk-scan-log li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: .78rem; }
.uk-scan-log li:last-child { border-bottom: 0; }
.uk-scan-log time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--uk-ink-mute); font-size: .7rem; }
.uk-scan-usb { font-size: 1rem; letter-spacing: .04em; }

.uk-sesi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.uk-sesi-row:last-child { border-bottom: 0; }
.uk-sesi-row__info { flex: 1 1 220px; min-width: 0; }

@media (max-width: 767px) {
    .uk-scan-result { padding: 12px; }
    .uk-scan-result__foto { width: 64px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) { .uk-scan-result.is-pop { animation: none; } }

/* Atribut hidden harus menang atas display komponen (mis. .uk-btn, .uk-empty). */
.uk-sesi-stats[hidden], .uk-empty[hidden], .uk-btn[hidden], .uk-scan-result[hidden] { display: none !important; }