/* ============================================================
   EduTrack SmartSchool — style.css
   v2.6 Stable + Sprint 2A: CSS Foundation
   ============================================================

   STRUKTUR FILE:
   1. CSS FOUNDATION  — :root variables (Sprint 2A)
   2. BASE STYLES     — reset, font, scrollbar (tidak berubah)
   3. LAYOUT          — sidebar, main, bottom nav (tidak berubah)
   4. PRINT           — @media print (tidak berubah)
   5. ID CARD SCREEN  — tampilan layar (tidak berubah)
   6. TOAST           — notifikasi (tidak berubah)
   7. TABLE           — checkbox, sort (tidak berubah)
   ============================================================ */


/* ============================================================
   1. CSS FOUNDATION — Design Tokens (Sprint 2A)
   Semua variable di sini HANYA DISIAPKAN untuk sprint berikutnya.
   Belum dipakai di rule manapun — tampilan aplikasi tidak berubah.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR PALETTE
     Diambil dari warna aktual yang sudah dipakai di aplikasi.
     Sumber kebenaran: Tailwind emerald + slate/gray + semantic.
     ---------------------------------------------------------- */

  /* Brand — Emerald (warna utama EduTrack) */
  --color-brand-50:   #ecfdf5;   /* emerald-50  — bg badge hadir */
  --color-brand-100:  #d1fae5;   /* emerald-100 — bg highlight */
  --color-brand-200:  #a7f3d0;   /* emerald-200 — border soft */
  --color-brand-500:  #10b981;   /* emerald-500 — ikon, aksen */
  --color-brand-600:  #059669;   /* emerald-600 — tombol utama */
  --color-brand-700:  #047857;   /* emerald-700 — hover tombol */
  --color-brand-800:  #065f46;   /* emerald-800 — teks gelap brand */
  --color-brand-900:  #064e3b;   /* emerald-900 — header ID card */

  /* Neutral — Slate/Gray (teks, border, background) */
  --color-neutral-50:  #f8fafc;  /* slate-50  — bg halaman */
  --color-neutral-100: #f1f5f9;  /* slate-100 — bg elemen */
  --color-neutral-200: #e2e8f0;  /* slate-200 — border */
  --color-neutral-300: #cbd5e1;  /* slate-300 — scrollbar, border soft */
  --color-neutral-400: #94a3b8;  /* slate-400 — placeholder */
  --color-neutral-500: #64748b;  /* slate-500 — teks sekunder */
  --color-neutral-600: #475569;  /* slate-600 — teks body */
  --color-neutral-700: #334155;  /* slate-700 — teks medium */
  --color-neutral-800: #1e293b;  /* slate-800 — teks gelap */
  --color-neutral-900: #0f172a;  /* slate-900 — teks utama */

  /* Surface — Background & Card */
  --color-surface:       #ffffff;       /* putih murni — card, modal */
  --color-surface-soft:  #f3f4f6;       /* gray-100 — body background */
  --color-surface-glass: rgba(255, 255, 255, 0.85); /* glass sidebar */

  /* Semantic — Status & Feedback */
  --color-success:      #10b981;  /* emerald-500 — hadir, sukses */
  --color-success-bg:   #ecfdf5;  /* emerald-50  */
  --color-danger:       #ef4444;  /* red-500 — alpha, hapus, error */
  --color-danger-dark:  #dc2626;  /* red-600 */
  --color-danger-bg:    #fef2f2;  /* red-50 */
  --color-warning:      #f59e0b;  /* amber-500 — terlambat, peringatan */
  --color-warning-bg:   #fffbeb;  /* amber-50 */
  --color-info:         #3b82f6;  /* blue-500 — info, aksi sekunder */
  --color-info-dark:    #2563eb;  /* blue-600 */
  --color-info-bg:      #eff6ff;  /* blue-50 */

  /* ----------------------------------------------------------
     TYPOGRAPHY SCALE
     Mengikuti skala yang aktual dipakai: xs, sm, base, lg, xl, 2xl
     ---------------------------------------------------------- */

  --font-family-base: 'Inter', sans-serif;

  --font-size-xs:   0.75rem;    /* 12px — label kecil, badge */
  --font-size-sm:   0.875rem;   /* 14px — teks body utama */
  --font-size-base: 1rem;       /* 16px — base (minimum mobile input) */
  --font-size-lg:   1.125rem;   /* 18px — judul card */
  --font-size-xl:   1.25rem;    /* 20px — judul section */
  --font-size-2xl:  1.5rem;     /* 24px — judul halaman */
  --font-size-3xl:  1.875rem;   /* 30px — angka statistik dashboard */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ----------------------------------------------------------
     SPACING SCALE
     Mengikuti skala Tailwind yang aktual dipakai (1–12).
     Basis: 1 unit = 4px (0.25rem)
     ---------------------------------------------------------- */

  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ----------------------------------------------------------
     BORDER RADIUS
     Mengikuti radius yang aktual dipakai di style.css & HTML.
     ---------------------------------------------------------- */

  --radius-sm:   0.25rem;  /* 4px  — checkbox, badge kecil */
  --radius-base: 0.5rem;   /* 8px  — tombol, input */
  --radius-md:   0.75rem;  /* 12px — card */
  --radius-lg:   1rem;     /* 16px — modal, panel */
  --radius-xl:   1.5rem;   /* 24px — pill besar */
  --radius-full: 9999px;   /* full — avatar, badge bulat */

  /* ----------------------------------------------------------
     SHADOW
     Diambil dari box-shadow yang sudah dipakai di style.css.
     ---------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05),
                0 2px 4px -1px rgba(0, 0, 0, 0.03);  /* glass-card */
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.10);      /* toast, modal */
  --shadow-xl:  0 4px 10px rgba(0, 0, 0, 0.10);      /* id-card */
  --shadow-top: 0 -2px 10px rgba(0, 0, 0, 0.05);     /* bottom-nav */

  /* ----------------------------------------------------------
     TRANSITION
     Diambil dari transition yang sudah dipakai di style.css.
     ---------------------------------------------------------- */

  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* ----------------------------------------------------------
     LAYOUT
     Dimensi tetap yang dipakai di layout utama.
     ---------------------------------------------------------- */

  --sidebar-width:     260px;
  --bottom-nav-height: 70px;
  --touch-target-min:  44px;   /* ukuran minimum touch target mobile */

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     Supaya tidak ada konflik tumpang tindih elemen.
     ---------------------------------------------------------- */

  --z-base:    1;
  --z-sidebar: 50;
  --z-modal:   100;
  --z-toast:   9999;
}


/* ============================================================
   2. BASE STYLES — tidak berubah dari v2.6 Stable
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; margin: 0; padding: 0; }
.glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); }
.glass-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(15,23,42,.08);
    transition:all .25s ease;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }


/* ============================================================
   3. LAYOUT — Fullscreen (no sidebar)
   ============================================================ */

/* App container: kolom vertikal (header atas, main bawah) */
#app-container {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Top header: sticky, glass, lebar penuh */
#top-header {
    width: 100%;
    flex-shrink: 0;
    height: 52px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(16,185,129,0.12);
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}

/* Main content: mengisi sisa tinggi layar, bisa scroll */
#main-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Elemen lama — pastikan tidak tampil */
#sidebar     { display: none !important; }
#bottom-nav  { display: none !important; }
#sidebar-nav { display: none !important; }

@media (max-width: 768px) {
    #main-content { padding-bottom: 1.5rem; }
}


/* ============================================================
   4. PRINT — tidak berubah dari v2.6 Stable
   ============================================================ */

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    @page { margin: 6mm; }
    body * { visibility: hidden; }
    .no-print { display: none !important; }
    html, body, #app-container, #main-content, #view-container { height: auto !important; overflow: visible !important; position: static !important; margin: 0 !important; padding: 0 !important; background: white;}

    #print-preview-section, #print-preview-section * { visibility: visible; }
    #print-preview-section { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; background: white; align-items: flex-start; }

    body.printing-report #report-print-area, body.printing-report #report-print-area * { visibility: visible; }
    body.printing-report #report-print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 20px; background: white;}

    table { width: 100% !important; page-break-inside: auto; border-collapse: collapse; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    th, td { border: 1px solid #000 !important; padding: 4px !important; font-size: 10px !important; }
    th { background-color: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .id-card-print { width: 54mm; height: 86mm; background: #ffffff; border: 2px solid #10b981; border-radius: 8px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; page-break-inside: avoid; box-shadow: none !important; margin: 0; }
    .id-card-header { width: 100%; background: #ffffff; color: #064e3b; padding: 8px 5px 6px 5px; text-align: center; display: flex; flex-direction: column; align-items: center; border-bottom: 2px solid #34d399; }
    .id-card-logo { width: 26px; height: 26px; object-fit: contain; margin-bottom: 2px; }
    .id-card-title { font-size: 7px; font-weight: 600; letter-spacing: 1px; margin-bottom: 2px; color: #10b981;}
    .id-card-school { font-size: 10px; font-weight: 800; margin: 0; line-height: 1.1; text-transform: uppercase;}
    .id-card-body { display: flex; flex-direction: column; align-items: center; flex-grow: 1; justify-content: center; width: 100%; padding: 8px 5px; }
    .id-card-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #34d399; margin-bottom: 6px; background: #f1f5f9; }
    .id-card-qr { margin-bottom: 4px; padding: 2px; border: 2px solid #e2e8f0; border-radius: 6px;}
    .id-card-name { font-size: 11px; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: 2px; width: 100%; padding: 0 2px; text-transform: uppercase; line-height: 1.1; }
    .id-card-nisn { font-size: 9px; color: #475569; font-weight: 500;}
    .id-card-footer { width: 100%; padding-bottom: 12px; text-align: center;}
    .id-card-class { background: #ecfdf5; color: #065f46; padding: 3px 15px; border: 1px solid #6ee7b7; border-radius: 12px; font-size: 10px; font-weight: 800; display: inline-block; }
    .id-card-print.no-photo .id-card-photo { display: none !important; }
    .id-card-print.no-photo .id-card-name { font-size: 13px; margin-top: 5px; margin-bottom: 5px;}
}


/* ============================================================
   5. ID CARD — TAMPILAN LAYAR — tidak berubah dari v2.6 Stable
   ============================================================ */

.id-card-print { width: 54mm; height: 86mm; background: #ffffff; border: 2px solid #10b981; border-radius: 8px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 10px;}
.id-card-header { width: 100%; background: #ffffff; color: #064e3b; padding: 8px 5px 6px 5px; text-align: center; display: flex; flex-direction: column; align-items: center; border-bottom: 2px solid #34d399;}
.id-card-logo { width: 26px; height: 26px; object-fit: contain; margin-bottom: 2px;}
.id-card-title { font-size: 7px; font-weight: 600; letter-spacing: 1px; margin-bottom: 2px; color: #10b981;}
.id-card-school { font-size: 10px; font-weight: 800; margin: 0; line-height: 1.1; text-transform: uppercase;}
.id-card-body { display: flex; flex-direction: column; align-items: center; flex-grow: 1; justify-content: center; width: 100%; padding: 8px 5px;}
.id-card-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #34d399; margin-bottom: 6px; background: #f1f5f9; }
.id-card-qr { margin-bottom: 4px; padding: 2px; border: 2px solid #e2e8f0; border-radius: 6px;}
.id-card-name { font-size: 11px; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: 2px; width: 100%; padding: 0 2px; text-transform: uppercase; line-height: 1.1;}
.id-card-nisn { font-size: 9px; color: #475569; font-weight: 500;}
.id-card-footer { width: 100%; padding-bottom: 12px; text-align: center;}
.id-card-class { background: #ecfdf5; color: #065f46; padding: 3px 15px; border: 1px solid #6ee7b7; border-radius: 12px; font-size: 10px; font-weight: 800; display: inline-block;}
.id-card-print.no-photo .id-card-photo { display: none !important; }
.id-card-print.no-photo .id-card-name { font-size: 13px; margin-top: 5px; margin-bottom: 5px;}


/* ============================================================
   6. TOAST NOTIFICATION — tidak berubah dari v2.6 Stable
   ============================================================ */

#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 12px 20px; border-radius: 8px; color: white; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.1); animation: slideIn 0.3s ease; }
.toast.success { background-color: #10b981; }
.toast.error { background-color: #ef4444; }
.toast.info { background-color: #3b82f6; }
.toast.warning { background-color: #f59e0b; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }


/* ============================================================
   7. TABLE — tidak berubah dari v2.6 Stable
   ============================================================ */

.custom-checkbox { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 2px solid #cbd5e1; cursor: pointer; accent-color: #10b981; }
.sort-icon { font-size: 0.75rem; color: #9ca3af; margin-left: 4px; transition: color 0.2s;}
.th-sortable { cursor: pointer; user-select: none; transition: background-color 0.2s; }
.th-sortable:hover { background-color: #e5e7eb; }
.th-sortable.active .sort-icon { color: #10b981; }

/* ============================================================
   8. BUTTON COMPONENT — Design System (Sprint 2B)
   Belum dipakai di HTML manapun — hanya pondasi.
   Tidak mengganti class Tailwind yang sudah ada.
   ============================================================ */

/* ---- BASE ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);     /* py-2 px-4 */
  border: none;
  border-radius: var(--radius-base);           /* 8px — setara rounded */
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);              /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    opacity          var(--transition-base),
    box-shadow       var(--transition-base);
  -webkit-tap-highlight-color: transparent;
  min-height: var(--touch-target-min);         /* 44px — ergonomi mobile */
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- VARIANTS ---- */

/* Primary — aksi utama (simpan, buat, konfirmasi) */
.btn-primary {
  background-color: var(--color-brand-600);    /* emerald-600 */
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-brand-700);    /* emerald-700 */
  box-shadow: var(--shadow-md);
}
.btn-primary:active:not(:disabled) {
  background-color: var(--color-brand-800);
  box-shadow: var(--shadow-xs);
}

/* Secondary — aksi sekunder (ekspor, cetak, navigasi) */
.btn-secondary {
  background-color: var(--color-neutral-800);  /* gray-800 */
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  background-color: #000000;
  box-shadow: var(--shadow-md);
}
.btn-secondary:active:not(:disabled) {
  background-color: var(--color-neutral-900);
  box-shadow: var(--shadow-xs);
}

/* Danger — aksi destruktif (hapus, reset, kunci) */
.btn-danger {
  background-color: var(--color-danger-dark);  /* red-600 */
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;                   /* red-700 */
  box-shadow: var(--shadow-md);
}
.btn-danger:active:not(:disabled) {
  background-color: #991b1b;                   /* red-800 */
  box-shadow: var(--shadow-xs);
}

/* Outline — aksi tersier (batal, navigasi ringan) */
.btn-outline {
  background-color: transparent;
  color: var(--color-neutral-600);             /* gray-600 */
  border: 1px solid var(--color-neutral-300);  /* gray-300 */
  box-shadow: none;
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--color-neutral-100);  /* gray-100 */
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-700);
}
.btn-outline:active:not(:disabled) {
  background-color: var(--color-neutral-200);
}

/* ---- SIZE MODIFIERS ---- */

/* Small — tombol di dalam tabel, badge aksi */
.btn-sm {
  padding: var(--space-1) var(--space-3);      /* py-1 px-3 */
  font-size: var(--font-size-xs);              /* 12px */
  min-height: var(--touch-target-min);         /* tetap 44px untuk mobile */
  border-radius: var(--radius-sm);             /* 4px */
}

/* Large — CTA utama, tombol login */
.btn-lg {
  padding: var(--space-3) var(--space-6);      /* py-3 px-6 */
  font-size: var(--font-size-base);            /* 16px */
  border-radius: var(--radius-md);             /* 12px */
}

/* Icon — tombol ikon saja tanpa teks */
.btn-icon {
  padding: var(--space-2);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  border-radius: var(--radius-base);
}

/* ============================================================
   9. FORM COMPONENT — Design System (Sprint 2C)
   Belum dipakai di HTML manapun — hanya pondasi.
   Tidak mengganti class Tailwind yang sudah ada.
   Pola diambil dari audit aktual: border p-2 rounded w-full
   ============================================================ */

/* ---- FORM GROUP — wrapper per field ---- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);       /* 4px antara label dan input */
  width: 100%;
}

/* ---- LABEL ---- */
.form-label {
  display: block;
  font-size: var(--font-size-sm);        /* 14px */
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-700);       /* gray-700 */
  margin-bottom: var(--space-1);         /* 4px */
}

/* ---- BASE FIELD — diwariskan oleh input, select, textarea ---- */
.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: var(--space-2);               /* p-2 = 8px — sesuai pola dominan */
  border: 1px solid var(--color-neutral-300);   /* border gray-300 */
  border-radius: var(--radius-base);     /* 8px — setara rounded */
  background-color: var(--color-surface);
  color: var(--color-neutral-900);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);        /* 14px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  outline: none;
  transition:
    border-color var(--transition-base),
    box-shadow   var(--transition-base),
    background-color var(--transition-base);
  box-sizing: border-box;
  -webkit-appearance: none;              /* reset browser default */
  appearance: none;
}

/* Minimum font-size 16px pada mobile mencegah auto-zoom iOS */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: var(--font-size-base);    /* 16px */
  }
}

/* ---- FOCUS ---- */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-brand-500);  /* emerald-500 */
  box-shadow: 0 0 0 2px var(--color-brand-100); /* ring-2 ring-emerald-100 */
  background-color: var(--color-surface);
}

/* ---- DISABLED ---- */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  background-color: var(--color-neutral-100);  /* gray-100 */
  color: var(--color-neutral-500);
  border-color: var(--color-neutral-200);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ---- READONLY ---- */
.form-input:read-only,
.form-textarea:read-only {
  background-color: var(--color-neutral-50);   /* gray-50 */
  color: var(--color-neutral-600);
  border-color: var(--color-neutral-200);
  cursor: default;
}

/* ---- INVALID / ERROR STATE ---- */
.form-input:invalid,
.form-select:invalid,
.form-textarea:invalid,
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--color-danger);     /* red-500 */
  background-color: var(--color-danger-bg);     /* red-50 */
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
  border-color: var(--color-danger-dark);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);  /* red ring */
}

/* ---- TEXTAREA — override spesifik ---- */
.form-textarea {
  resize: vertical;
  min-height: 5rem;                      /* h-20 — sesuai pola dominan */
}

/* ---- SELECT — tambah arrow custom ---- */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);         /* ruang untuk arrow */
  cursor: pointer;
}

/* ---- HELPER TEXT — deskripsi ringan di bawah field ---- */
.form-helper {
  font-size: var(--font-size-xs);        /* 12px */
  color: var(--color-neutral-500);       /* gray-500 */
  margin-top: var(--space-1);
  line-height: var(--line-height-normal);
}

/* ---- ERROR TEXT — pesan error di bawah field ---- */
.form-error {
  font-size: var(--font-size-xs);        /* 12px */
  color: var(--color-danger);            /* red-500 */
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ============================================================
   10. CARD, BADGE, ALERT, LOADING, EMPTY STATE (Sprint 2D)
   Belum dipakai di HTML manapun — hanya pondasi.
   Tidak mengganti class Tailwind yang sudah ada.
   ============================================================ */

/* ---- CARD ---- */
/* Menggantikan pola: glass-card p-4 rounded-xl bg-white shadow */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);           /* 12px — setara rounded-xl */
  box-shadow: var(--shadow-md);
  padding: var(--space-4);                   /* p-4 */
  width: 100%;
  box-sizing: border-box;
}

/* ---- BADGE ---- */
/* Menggantikan pola: text-xs font-bold px-2 py-1 rounded-full */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);    /* py-1 px-2 */
  border-radius: var(--radius-full);         /* rounded-full */
  font-size: var(--font-size-xs);            /* 12px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.badge-success {
  background-color: var(--color-success-bg);   /* emerald-50 */
  color: var(--color-brand-800);               /* emerald-800 */
  border: 1px solid var(--color-brand-200);    /* emerald-200 */
}

.badge-danger {
  background-color: var(--color-danger-bg);    /* red-50 */
  color: var(--color-danger-dark);             /* red-600 */
  border: 1px solid #fecaca;                   /* red-200 */
}

.badge-warning {
  background-color: var(--color-warning-bg);   /* amber-50 */
  color: #92400e;                              /* amber-800 */
  border: 1px solid #fde68a;                   /* amber-200 */
}

.badge-info {
  background-color: var(--color-info-bg);      /* blue-50 */
  color: var(--color-info-dark);               /* blue-600 */
  border: 1px solid #bfdbfe;                   /* blue-200 */
}

/* ---- ALERT ---- */
/* Menggantikan pola: glass-card p-4 border-l-4 border-{color}-500 */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-base);           /* 8px */
  border-left: 4px solid transparent;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  box-sizing: border-box;
}

.alert-success {
  background-color: var(--color-success-bg);   /* emerald-50 */
  border-left-color: var(--color-brand-500);   /* emerald-500 */
  color: var(--color-brand-800);               /* emerald-800 */
}

.alert-danger {
  background-color: var(--color-danger-bg);    /* red-50 */
  border-left-color: var(--color-danger);      /* red-500 */
  color: #991b1b;                              /* red-800 */
}

.alert-warning {
  background-color: var(--color-warning-bg);   /* amber-50 */
  border-left-color: var(--color-warning);     /* amber-500 */
  color: #92400e;                              /* amber-800 */
}

.alert-info {
  background-color: var(--color-info-bg);      /* blue-50 */
  border-left-color: var(--color-info);        /* blue-500 */
  color: #1e40af;                              /* blue-800 */
}

/* ---- LOADING SPINNER ---- */
/* Menggantikan pola: fa-circle-notch fa-spin di dalam loading-overlay */
.loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-neutral-200);
  border-top-color: var(--color-brand-500);    /* emerald-500 */
  border-radius: var(--radius-full);
  animation: spin var(--transition-normal) linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- EMPTY STATE ---- */
/* Menggantikan pola: p-4 text-center text-gray-500 italic */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-neutral-400);             /* gray-400 */
  font-size: var(--font-size-sm);
  font-style: italic;
  gap: var(--space-2);
}

.empty-state i {
  font-size: var(--font-size-3xl);             /* 30px — ikon besar */
  color: var(--color-neutral-300);
  margin-bottom: var(--space-2);
}

/* ============================================================
   SCREEN: Preview ID Card — tampilan layar web (Sprint Bug-1)
   Rule ini memastikan kartu tersusun horizontal (grid) di layar.
   Rule untuk @media print sudah ada di Section 4 (tidak berubah).
   ============================================================ */

#print-preview-section {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 8px 0;
}

/* ============================================================
   SCREEN: Tanda tangan — fallback break-inside (Sprint Bug-1)
   Tailwind break-inside-avoid butuh compiler; tambahkan fallback
   CSS standar agar berfungsi di semua browser via Live Server.
   ============================================================ */

.break-inside-avoid {
  break-inside: avoid;
  page-break-inside: avoid;   /* fallback untuk browser lama */
  -webkit-column-break-inside: avoid;
}

/* ============================================================
   MOBILE UI POLISH — patch terakhir sebelum uji coba sekolah
   Target breakpoint: 360px, 390px, 412px, 430px (HP Android)
   Hanya CSS — tidak mengubah business logic, flow, atau struktur
   data. Tidak mengganti warna atau identitas visual EduTrack.
   ============================================================ */

@media (max-width: 480px) {

  /* ---- MODAL: cegah modal terpotong/keluar layar ----
     Berlaku untuk SEMUA modal (id diawali "modal-") sekaligus,
     termasuk yang sebelumnya belum punya overflow-y-auto:
     modal-student, modal-staff, modal-absen-manual,
     modal-discipline, modal-preset. */
  [id^="modal-"].fixed {
    overflow-y: auto;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    align-items: flex-start;
  }

  /* Wadah putih di dalam modal: batasi tinggi maksimum agar
     tombol Simpan/Batal selalu terjangkau, beri scroll sendiri
     jika konten lebih panjang dari layar. */
  [id^="modal-"].fixed > div.bg-white {
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  /* ---- TOUCH TARGET: tombol & input minimal nyaman disentuh ---- */
  #view-container button,
  #view-container input[type="submit"] {
    min-height: var(--touch-target-min);   /* 44px */
  }

  #view-container input[type="text"],
  #view-container input[type="number"],
  #view-container input[type="password"],
  #view-container input[type="date"],
  #view-container input[type="time"],
  #view-container input[type="file"],
  #view-container select,
  #view-container textarea {
    min-height: var(--touch-target-min);
    font-size: var(--font-size-base);      /* 16px — cegah auto-zoom iOS/Android */
  }

  /* Checkbox header tabel & ikon kecil tidak perlu dipaksa 44px,
     supaya tidak merusak layout kolom sempit (mis. kolom centang). */
  #view-container input[type="checkbox"] {
    min-height: 0;
  }

  /* ---- TABEL: scroll horizontal terasa nyaman, bukan "patah" ---- */
  .glass-card.overflow-x-auto,
  #report-print-area.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  .glass-card.overflow-x-auto table,
  #report-print-area.overflow-x-auto table {
    min-width: 640px;   /* tabel tetap proporsional, discroll bukan diperas */
  }

  /* ---- FILTER & TOOLBAR: hindari tombol bertumpuk rapat ---- */
  #view-container .flex.flex-wrap.gap-2 {
    row-gap: var(--space-2);
  }

  /* ---- HEADER MOBILE: rapikan jarak antar ikon aksi ---- */
  header.md\:hidden .flex.items-center.gap-4 {
    gap: var(--space-3);
  }

  /* ---- MASTER PRESET: daftar preset terlalu pendek di HP ---- */
  #view-container [style*="max-height: 250px"] {
    max-height: 320px !important;
  }

  /* Tombol aksi preset (toggle/edit/hapus) diberi jarak agar
     tidak saling bertabrakan saat disentuh berdekatan. */
  #view-container .flex.items-center.gap-1 > button {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* ---- DASHBOARD: statistik kelas jangan terlalu rapat ---- */
  #view-container .grid.grid-cols-2.md\:grid-cols-4,
  #view-container .grid.grid-cols-2.md\:grid-cols-4.lg\:grid-cols-6 {
    gap: var(--space-3);
  }

  /* ---- BUKU SAKU: kamus aturan & riwayat jangan terlalu rapat ---- */
  #view-container .glass-card.h-fit {
    margin-top: var(--space-2);
  }

  /* ---- BOTTOM NAV: pastikan tidak menutupi konten terakhir ---- */
  #main-content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-4));
  }
}

@media (max-width: 400px) {
  /* Layar tersempit (360px–390px): kecilkan padding modal sedikit
     supaya konten form punya ruang lebih lega tanpa redesign. */
  [id^="modal-"].fixed > div.bg-white {
    padding: var(--space-4);
  }
}


/* ============================================================
   TEACHER WORKSPACE — Sprint 1
   Class khusus modul Workspace Guru.
   Tidak mengganggu class Tailwind maupun style.css lama.
   ============================================================ */

/* Progress bar animasi saat halaman dimuat */
@keyframes tw-progress-in {
  from { width: 0; }
}

.tw-progress-bar {
  animation: tw-progress-in 0.6s ease-out forwards;
}

/* Kartu jadwal aktif — border lebih tebal dan sedikit glow */
.tw-session-card-active {
  border: 2px solid var(--color-brand-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Tombol "Mulai Mengajar" — touch target minimal 44px sudah ditangani
   oleh rule global di @media (max-width: 480px), ini hanya override warna */
.tw-btn-start {
  background-color: var(--color-brand-600);
  color: #ffffff;
  min-height: var(--touch-target-min);
}
.tw-btn-start:hover  { background-color: var(--color-brand-700); }
.tw-btn-start:active { background-color: var(--color-brand-800); }


/* ============================================================
   TEACHER WORKSPACE — Sprint 2
   CSS untuk form Teaching Session.
   Semua class berawalan tw- agar tidak konflik dengan Tailwind.
   ============================================================ */

/* Mood selector button — state normal */
.tw-mood-btn {
  transition:
    background-color var(--transition-base),
    border-color     var(--transition-base),
    color            var(--transition-base);
  -webkit-tap-highlight-color: transparent;
  min-height: var(--touch-target-min);   /* 44px — ergonomi mobile */
}

.tw-mood-btn:active {
  transform: scale(0.97);
}

/* Textarea di Teaching Session — konsisten dengan form lama */
#tw-catatan,
#tw-tugas-desc,
#tw-refleksi {
  font-size: var(--font-size-base);      /* 16px — cegah auto-zoom iOS */
  line-height: var(--line-height-relaxed);
}

@media (max-width: 480px) {
  /* Tombol aksi bawah tidak terlalu rapat di HP kecil */
  #view-container .tw-action-row {
    gap: var(--space-2);
  }
}


/* ============================================================
   BRANDING SPRINT — Login Redesign (Preview Build 3.0)
   Nuansa: putih, biru muda, aksen peach — bersih & akademik.
   Semua class berawalan et-login- agar tidak konflik.
   ============================================================ */

/* ---- Background ---- */
.et-login-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(145deg, #f0f7ff 0%, #e8f4fd 40%, #fef3ee 100%);
  position: relative;
  overflow: hidden;
}

/* Lingkaran dekorasi — tidak mengganggu interaksi */
.et-login-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}
.et-login-bg-circle--1 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, #bfdbfe, transparent 70%);
  top: -80px; right: -80px;
}
.et-login-bg-circle--2 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, #fed7aa, transparent 70%);
  bottom: -60px; left: -60px;
}
.et-login-bg-circle--3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, #bae6fd, transparent 70%);
  top: 50%; left: -40px;
  transform: translateY(-50%);
}

/* ---- Card ---- */
.et-login-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 40px rgba(59, 130, 246, 0.10), 0 2px 8px rgba(0,0,0,0.06);
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 400px) {
  .et-login-card { padding: 2rem 1.25rem 1.5rem; }
}

/* ---- Badge versi ---- */
.et-login-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

/* ---- Tombol install PWA ---- */
.et-login-install-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s;
}
.et-login-install-btn:hover { background: #dbeafe; }

/* ---- Logo ---- */
.et-login-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1.25rem;
  margin-top: 0.5rem;
}
.et-login-logo {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 3px solid #bfdbfe;
  box-shadow: 0 4px 16px rgba(59,130,246,0.15);
  display: block;
}
.et-login-logo-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed #93c5fd;
  animation: et-spin-slow 18s linear infinite;
  pointer-events: none;
}
@keyframes et-spin-slow {
  to { transform: rotate(360deg); }
}

/* ---- Teks branding ---- */
.et-login-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1e3a5f;
  line-height: 1.1;
  margin-bottom: 0.2rem;
}
.et-login-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: #3b82f6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.et-login-school {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 1.75rem;
}

/* ---- Form ---- */
.et-login-form { text-align: left; }

.et-login-field { margin-bottom: 1rem; }

.et-login-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.35rem;
}

.et-login-input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid #dbeafe;
  border-radius: 0.75rem;
  font-size: 0.95rem;
  background: #f8fbff;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.et-login-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: #fff;
}
.et-login-input::placeholder { color: #94a3b8; }

/* Tombol eye password */
.et-login-eye-btn {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(10px);
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.9rem;
}
.et-login-eye-btn:hover { color: #3b82f6; }

/* Tombol submit */
.et-login-submit {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  margin-top: 0.5rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  transition: opacity 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
}
.et-login-submit:hover {
  opacity: 0.93;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.32);
}
.et-login-submit:active { opacity: 0.85; }

/* Footer teks */
.et-login-footer {
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: center;
  margin-top: 1.25rem;
}