/* ==========================================================================
   TEMA MODERN FRESH & WARNA-WARNI HARMONIS (VIBRANT & ELEGANT)
   Sistem Informasi Database Siswa & Buku Induk Digital
   ========================================================================== */

:root {
  /* Palet Warna-Warni Segar & Berimbang (Harmonious Modern Palette) */
  --c-indigo-600: #4f46e5;
  --c-indigo-500: #6366f1;
  --c-indigo-50:  #eef2ff;
  
  --c-emerald-600: #059669;
  --c-emerald-500: #10b981;
  --c-emerald-400: #34d399;
  --c-emerald-50:  #ecfdf5;
  
  --c-amber-600: #d97706;
  --c-amber-500: #f59e0b;
  --c-amber-400: #fbbf24;
  --c-amber-50:  #fffbeb;
  
  --c-blue-600: #0284c7;
  --c-blue-500: #0ea5e9;
  --c-blue-400: #38bdf8;
  --c-blue-50:  #f0f9ff;
  
  --c-purple-600: #7c3aed;
  --c-purple-500: #8b5cf6;
  --c-purple-400: #a78bfa;
  --c-purple-50:  #f5f3ff;
  
  --c-rose-600: #e11d48;
  --c-rose-500: #f43f5e;
  --c-rose-400: #fb7185;
  --c-rose-50:  #fff1f2;
  
  --c-teal-600: #0d9488;
  --c-teal-500: #14b8a6;
  --c-teal-50:  #f0fdfa;
  
  /* Bayangan Halus Bertingkat */
  --shadow-fresh: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 16px 32px -4px rgba(15, 23, 42, 0.09), 0 6px 12px -2px rgba(0, 0, 0, 0.04);
  --shadow-glow-indigo: 0 10px 25px -4px rgba(99, 102, 241, 0.35);
  --shadow-glow-emerald: 0 10px 25px -4px rgba(16, 185, 129, 0.35);
  --shadow-glow-amber: 0 10px 25px -4px rgba(245, 158, 11, 0.35);
  --shadow-glow-purple: 0 10px 25px -4px rgba(139, 92, 246, 0.35);
}

/* ==========================================================================
   1. AMBIENT AURORA CANVAS (BACKGROUND MULTI-COLOR SEGAR & BREATHING)
   ========================================================================== */
body {
  background-color: #f8fafc !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.07) 0px, transparent 45%),
    radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.07) 0px, transparent 40%),
    radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(245, 158, 11, 0.06) 0px, transparent 45%),
    radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.06) 0px, transparent 45%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  position: relative;
  color: #1e293b;
}

/* Elemen Dekorasi Bola Cahaya Lembut Multi-Warna di Background */
.fresh-ambient-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(85px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  will-change: transform;
}

.orb-indigo {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.04) 70%, transparent 100%);
  top: -120px;
  left: 5%;
  animation: orbDrift1 22s ease-in-out infinite alternate;
}

.orb-cyan {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, rgba(14, 165, 233, 0.03) 70%, transparent 100%);
  top: 25%;
  right: -100px;
  animation: orbDrift2 26s ease-in-out infinite alternate;
}

.orb-emerald {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(5, 150, 105, 0.03) 70%, transparent 100%);
  bottom: 8%;
  left: 18%;
  animation: orbDrift3 24s ease-in-out infinite alternate;
}

.orb-amber {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0.03) 70%, transparent 100%);
  bottom: 15%;
  right: 12%;
  animation: orbDrift1 20s ease-in-out infinite alternate-reverse;
}

.orb-rose {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(244, 63, 94, 0.14) 0%, rgba(225, 29, 72, 0.02) 70%, transparent 100%);
  top: 45%;
  left: 40%;
  animation: orbDrift2 28s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(65px, 75px) scale(1.12); }
  100% { transform: translate(-45px, 40px) scale(0.92); }
}

@keyframes orbDrift2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -55px) scale(1.14); }
  100% { transform: translate(-25px, 65px) scale(0.94); }
}

@keyframes orbDrift3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, -60px) scale(1.1); }
  100% { transform: translate(-50px, -30px) scale(0.96); }
}

#root, main, aside, header {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   2. HEADER & NAVBAR GLASSOMORPHISM DENGAN RAINBOW ACCENT STRIP
   ========================================================================== */
header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04) !important;
  position: relative;
}

/* Garis aksen multi-warna di atas header */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, 
    #4f46e5 0%, 
    #06b6d4 22%, 
    #10b981 44%, 
    #f59e0b 66%, 
    #ec4899 84%, 
    #8b5cf6 100%
  );
  z-index: 10;
}

#header-global-search {
  max-width: 100% !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
}

#header-global-search:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.1) !important;
}

/* ==========================================================================
   3. HERO BANNER / WELCOME CARD - MODERN AURORA GRADIENT
   ========================================================================== */
.rounded-2xl.bg-gradient-to-r,
div[class*="from-slate-900"][class*="to-indigo-950"],
div[class*="from-indigo-900"] {
  background: linear-gradient(135deg, 
    #1e1b4b 0%, 
    #2e1065 28%, 
    #1e293b 65%, 
    #064e3b 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.35), 0 0 20px rgba(99, 102, 241, 0.2) !important;
  position: relative;
  overflow: hidden !important;
}

/* Shimmer Light Beam Effect pada Hero Banner */
.rounded-2xl.bg-gradient-to-r::before,
div[class*="from-slate-900"][class*="to-indigo-950"]::before,
div[class*="from-indigo-900"]::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 38%,
    rgba(255, 255, 255, 0.10) 48%,
    rgba(56, 189, 248, 0.18) 50%,
    rgba(245, 158, 11, 0.14) 52%,
    rgba(255, 255, 255, 0.08) 54%,
    transparent 66%
  );
  animation: heroShimmerSweep 8s infinite ease-in-out;
  pointer-events: none;
}

@keyframes heroShimmerSweep {
  0% { transform: translateX(-100%) rotate(25deg); }
  35%, 100% { transform: translateX(100%) rotate(25deg); }
}

/* ==========================================================================
   4. SIDEBAR NAVIGATION - FRESH & WARNA-WARNI PER MENU
   ========================================================================== */
aside {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-right: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* Tombol Input Siswa Baru (CTA Utama) - Vibrant Gradient */
#btn-sidebar-add-student,
button:has(svg)[class*="bg-indigo-600"] {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35) !important;
  transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
  color: #ffffff !important;
  font-weight: 700 !important;
}

#btn-sidebar-add-student:hover,
button:has(svg)[class*="bg-indigo-600"]:hover {
  background: linear-gradient(135deg, #4338ca 0%, #0891b2 100%) !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.45) !important;
}

#btn-sidebar-add-student:active,
button:has(svg)[class*="bg-indigo-600"]:active {
  transform: translateY(1px) scale(0.98);
}

/* Menu Navigasi Sidebar Umum */
nav button {
  position: relative;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 12px !important;
}

nav button:hover {
  transform: translateX(4px);
}

nav button:hover svg {
  transform: scale(1.14);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Warna-Warni Khas per Tombol Menu saat Aktif/Hover */
/* 1. Dashboard: Indigo/Violet */
nav button[id="nav-item-dashboard"].nu-active-tab,
nav button:has(svg)[class*="bg-indigo-50"]:first-of-type {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0.04) 100%) !important;
  color: #4338ca !important;
  border-left: 4px solid #4f46e5 !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-dashboard"]:hover {
  background-color: rgba(99, 102, 241, 0.08) !important;
  color: #4338ca !important;
}
nav button[id="nav-item-dashboard"] svg { color: #6366f1 !important; }

/* 2. Data Siswa: Sky Blue */
nav button[id="nav-item-students"].nu-active-tab {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.14) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
  color: #0369a1 !important;
  border-left: 4px solid #0ea5e9 !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-students"]:hover {
  background-color: rgba(14, 165, 233, 0.08) !important;
  color: #0369a1 !important;
}
nav button[id="nav-item-students"] svg { color: #0284c7 !important; }

/* 3. Kelas & Kenaikan: Amber / Orange */
nav button[id="nav-item-academic"].nu-active-tab {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.04) 100%) !important;
  color: #b45309 !important;
  border-left: 4px solid #f59e0b !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-academic"]:hover {
  background-color: rgba(245, 158, 11, 0.08) !important;
  color: #b45309 !important;
}
nav button[id="nav-item-academic"] svg { color: #d97706 !important; }

/* 4. Alumni & Mutasi: Rose / Pink */
nav button[id="nav-item-archive"].nu-active-tab {
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.14) 0%, rgba(244, 63, 94, 0.04) 100%) !important;
  color: #be123c !important;
  border-left: 4px solid #f43f5e !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-archive"]:hover {
  background-color: rgba(244, 63, 94, 0.08) !important;
  color: #be123c !important;
}
nav button[id="nav-item-archive"] svg { color: #e11d48 !important; }

/* 5. Cetak Lembar PDF: Purple */
nav button[id="nav-item-print"].nu-active-tab {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.14) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
  color: #6d28d9 !important;
  border-left: 4px solid #8b5cf6 !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-print"]:hover {
  background-color: rgba(139, 92, 246, 0.08) !important;
  color: #6d28d9 !important;
}
nav button[id="nav-item-print"] svg { color: #7c3aed !important; }

/* 6. Import / Export Excel: Emerald / Teal */
nav button[id="nav-item-excel"].nu-active-tab {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
  color: #047857 !important;
  border-left: 4px solid #10b981 !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-excel"]:hover {
  background-color: rgba(16, 185, 129, 0.08) !important;
  color: #047857 !important;
}
nav button[id="nav-item-excel"] svg { color: #059669 !important; }

/* 7. Pengaturan & Cadangan: Slate / Teal */
nav button[id="nav-item-settings"].nu-active-tab,
nav button[id="nav-item-backup"].nu-active-tab {
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0.04) 100%) !important;
  color: #0f766e !important;
  border-left: 4px solid #14b8a6 !important;
  font-weight: 700 !important;
}
nav button[id="nav-item-settings"]:hover,
nav button[id="nav-item-backup"]:hover {
  background-color: rgba(20, 184, 166, 0.08) !important;
  color: #0f766e !important;
}
nav button[id="nav-item-settings"] svg,
nav button[id="nav-item-backup"] svg { color: #0d9488 !important; }

/* ==========================================================================
   5. DASHBOARD STAT CARDS - WARNA-WARNI FRESH & KAYA VISUAL
   ========================================================================== */
.grid .bg-white.rounded-2xl.border,
.grid .bg-white.rounded-xl.border {
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: var(--shadow-fresh) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.grid .bg-white.rounded-2xl.border:hover,
.grid .bg-white.rounded-xl.border:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-hover) !important;
}

/* Card 1: Siswa Aktif (Emerald Segar) */
.stat-card-active,
.grid > div:nth-child(1).bg-white {
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.55) 0%, #ffffff 40%) !important;
  border-top: 4px solid #10b981 !important;
}
.stat-card-active:hover,
.grid > div:nth-child(1).bg-white:hover {
  border-color: #34d399 !important;
  box-shadow: 0 14px 30px -4px rgba(16, 185, 129, 0.18) !important;
}

/* Card 2: Siswa Lulus (Alumni) (Royal Purple / Orchid) */
.stat-card-graduated,
.grid > div:nth-child(2).bg-white {
  background: linear-gradient(180deg, rgba(245, 243, 255, 0.55) 0%, #ffffff 40%) !important;
  border-top: 4px solid #8b5cf6 !important;
}
.stat-card-graduated:hover,
.grid > div:nth-child(2).bg-white:hover {
  border-color: #a78bfa !important;
  box-shadow: 0 14px 30px -4px rgba(139, 92, 246, 0.18) !important;
}

/* Card 3: Mutasi Keluar (Warm Amber / Sunset Gold) */
.stat-card-transferred,
.grid > div:nth-child(3).bg-white {
  background: linear-gradient(180deg, rgba(254, 243, 199, 0.55) 0%, #ffffff 40%) !important;
  border-top: 4px solid #f59e0b !important;
}
.stat-card-transferred:hover,
.grid > div:nth-child(3).bg-white:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 14px 30px -4px rgba(245, 158, 11, 0.18) !important;
}

/* Card 4: Total Keseluruhan (Electric Indigo / Sky Blue) */
.stat-card-total,
.grid > div:nth-child(4).bg-white {
  background: linear-gradient(180deg, rgba(238, 242, 255, 0.55) 0%, #ffffff 40%) !important;
  border-top: 4px solid #4f46e5 !important;
}
.stat-card-total:hover,
.grid > div:nth-child(4).bg-white:hover {
  border-color: #818cf8 !important;
  box-shadow: 0 14px 30px -4px rgba(79, 70, 229, 0.18) !important;
}

/* Denyut Berkedip Halus pada Siswa Aktif */
.fresh-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: freshLivePulse 1.8s infinite;
  vertical-align: middle;
}

@keyframes freshLivePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ==========================================================================
   6. TABEL DATA & BADGES - WARNA-WARNI SEGAR & KONTRAS TINGGI
   ========================================================================== */
table {
  border-collapse: separate;
  border-spacing: 0;
}

table thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #334155 !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  letter-spacing: 0.025em;
  padding: 12px 14px !important;
}

table tbody tr {
  transition: all 0.18s ease;
}

table tbody tr:hover {
  background-color: rgba(99, 102, 241, 0.035) !important;
  box-shadow: inset 3px 0 0 #6366f1;
}

/* Badges Status Siswa */
/* 1. Aktif: Hijau Mint Segar */
.badge-status-aktif,
span:has-text("Aktif"),
td span[class*="text-emerald"] {
  background-color: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #86efac !important;
  font-weight: 600 !important;
}

/* 2. Lulus: Biru Sky Cerah */
.badge-status-lulus,
td span[class*="text-blue"] {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #7dd3fc !important;
  font-weight: 600 !important;
}

/* 3. Mutasi Keluar: Amber Hangat */
.badge-status-mutasi,
td span[class*="text-amber"] {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fcd34d !important;
  font-weight: 600 !important;
}

/* Badges Gender / Jenis Kelamin */
/* L (Laki-laki): Soft Sky Blue Pill */
.gender-badge-l {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  color: #0284c7 !important;
  border: 1px solid #7dd3fc !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-block;
}

/* P (Perempuan): Soft Rose Pink Pill */
.gender-badge-p {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%) !important;
  color: #db2777 !important;
  border: 1px solid #f472b6 !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-block;
}

/* Badges Nama Kelas - Multi-Warna Pastel */
.class-badge-cyan {
  background-color: #cffafe !important;
  color: #0e7490 !important;
  border: 1px solid #67e8f9 !important;
}
.class-badge-purple {
  background-color: #f3e8ff !important;
  color: #7e22ce !important;
  border: 1px solid #d8b4fe !important;
}
.class-badge-amber {
  background-color: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.class-badge-emerald {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  border: 1px solid #6ee7b7 !important;
}

/* ==========================================================================
   7. QUICK FILTER CHIPS (TOMBOL FILTER CEPAT)
   ========================================================================== */
.filter-chip {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.filter-chip:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   8. KARTU AKSI CEPAT DASHBOARD (QUICK ACTION CARDS)
   ========================================================================== */
/* Cetak PDF: Violet */
div:has(h3:contains("Cetak Lembar Buku Induk")),
button:has(svg)[class*="text-purple"] {
  border-left: 3px solid #8b5cf6 !important;
}

/* Excel: Emerald / Teal */
div:has(h3:contains("Impor & Ekspor Data Excel")),
button:has(svg)[class*="text-emerald"] {
  border-left: 3px solid #10b981 !important;
}

/* Cadangan Server: Indigo / Cyan */
div:has(h3:contains("Cadangan Database")),
button:has(svg)[class*="text-indigo"] {
  border-left: 3px solid #6366f1 !important;
}

/* ==========================================================================
   9. MODAL POPUP & TRANSISI HALUS
   ========================================================================== */
div[role="dialog"],
div[class*="fixed inset-0"] > div[class*="bg-white"] {
  animation: freshModalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 20px !important;
  position: relative;
  overflow: hidden;
}

/* Garis aksen pelangi di atas modal dialog */
div[role="dialog"]::before,
div[class*="fixed inset-0"] > div[class*="bg-white"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #06b6d4, #10b981, #f59e0b, #ec4899);
  z-index: 5;
}

@keyframes freshModalPop {
  0% { opacity: 0; transform: scale(0.94) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   10. SCROLLBAR ELEGAN & SELEKSI TEKS
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a5b4fc 0%, #67e8f9 100%);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6366f1 0%, #06b6d4 100%);
}

::selection {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #312e81 !important;
}

/* ==========================================================================
   11. SISTEM DESAIN RESPONSIF & ADAPTIF SEMUA UKURAN LAYAR (RESPONSIVE SYSTEM)
   ========================================================================== */

/* 11.1 Container & Pembungkus Utama Adaptif */
.max-w-7xl {
  width: 100% !important;
  max-width: 1280px !important;
  box-sizing: border-box !important;
}

/* 11.2 Tabel Responsif dengan Momentum Touch Scrolling */
.overflow-x-auto,
div:has(> table) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin;
}

table {
  width: 100% !important;
  min-width: 640px !important; /* Mencegah kolom tabel gepeng di layar kecil */
}

/* 11.3 Typography Dinamis & Fluid */
h1, h2, h3 {
  word-break: break-word;
}

/* 11.4 Touch Targets yang Ramah Jari (Touch-Friendly) */
button, 
a.btn, 
input[type="button"], 
input[type="submit"] {
  touch-action: manipulation;
}

/* ==========================================================================
   BREAKPOINTS RESPONSIF
   ========================================================================== */

/* --- TABLET & LAPTOP KECIL (<= 1024px) --- */
@media (max-width: 1024px) {
  /* Sidebar adaptif saat mode tablet */
  aside {
    border-right: none !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  }
  
  /* Menu Navigasi fleksibel */
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  nav button {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
  }
}

/* --- TABLET & SMARTPHONE BESAR (<= 768px) --- */
@media (max-width: 768px) {
  /* Kurangi ukuran dan blur bola orbs di HP demi performa 60fps & hemat baterai */
  .fresh-ambient-orb {
    width: 220px !important;
    height: 220px !important;
    filter: blur(50px) !important;
    opacity: 0.45 !important;
  }

  /* Header fleksibel */
  header {
    padding: 10px 14px !important;
  }

  /* Grid Kartu Statistik: 2 kolom seimbang */
  .grid[class*="grid-cols-4"],
  .grid[class*="grid-cols-3"],
  .grid[class*="sm:grid-cols-2"],
  .grid:has(> .stat-card-active) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .grid .bg-white.rounded-2xl.border,
  .grid .bg-white.rounded-xl.border {
    padding: 14px 12px !important;
  }

  /* Nilai angka statistik lebih fleksibel */
  .grid .bg-white h3,
  .grid .bg-white .text-2xl,
  .grid .bg-white .text-3xl {
    font-size: clamp(20px, 5vw, 26px) !important;
  }

  /* Hero Banner lebih ramping */
  .rounded-2xl.bg-gradient-to-r,
  div[class*="from-slate-900"][class*="to-indigo-950"] {
    padding: 18px 16px !important;
  }

  /* Modal Dialog adaptif memenuhi layar dengan margin nyaman */
  div[role="dialog"],
  div[class*="fixed inset-0"] > div[class*="bg-white"] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 16px auto !important;
    padding: 18px 16px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
  }
}

/* --- SMARTPHONE STANDAR (<= 640px) --- */
@media (max-width: 640px) {
  /* Area utama halaman */
  main {
    padding: 14px 10px !important;
  }

  /* Cegah auto-zoom yang mengganggu pada browser HP iOS & Android */
  input[type="text"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Form pencarian header mengisi lebar kontainer */
  #header-global-search {
    width: 100% !important;
  }

  /* Kartu Statistik: 1 kolom penuh di layar kecil agar angka dan judul lega */
  .grid:has(> .stat-card-active) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Filter Chips / Tombol Filter di atas tabel */
  main div:has(> .filter-chip),
  .filter-chip-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .filter-chip {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* Navigasi menu sidebar di mobile */
  nav button {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
  }

  /* Tombol aksi Tambah Siswa */
  #btn-sidebar-add-student {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }

  /* Toast Notification melayang pas di layar HP */
  div[class*="animate-in"][class*="shadow"] {
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
  }

  /* Gender badges di tabel */
  .gender-badge-l,
  .gender-badge-p {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
}

/* --- SMARTPHONE KECIL / COMPACT (<= 380px) --- */
@media (max-width: 380px) {
  header {
    padding: 8px 10px !important;
  }

  .rounded-2xl.bg-gradient-to-r h3,
  div[class*="from-slate-900"] h3 {
    font-size: 15px !important;
  }

  .grid .bg-white.rounded-2xl.border {
    padding: 12px 10px !important;
  }
}