* {
    box-sizing: border-box; /* Padding & Border masuk ke hitungan lebar */
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Kunci mati agar tidak bisa geser kanan-kiri */
    margin: 0;
    padding: 0;
}

/* === [01] CORE CONFIG === */
:root {
    --emerald-600: #10b981;
    --emerald-50: #ecfdf5; /* Untuk background soft */
    --slate-text: #1e293b; /* Biru tua gelap, cerah di mata tapi tegas */
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* Ganti putih ke Slate Super Light */
    background-color: #f8fafc; 
    /* Atau pakai ini kalau mau agak 'creamy' mewah: #fcfcfd */
    
    color: #0f172a; /* Slate 900 biar tulisan super tajam */
    
    /* Tambahan biar scroll lebih smooth */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Biar background gak flat, kita kasih gradasi halus di pojok (Opsional) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
    z-index: -1;
}

/* Biar Input gak nabrak background, kasih border soft */
input, select {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: var(--slate-text) !important;
    transition: all 0.3s ease;
}

/* Saat diklik, baru muncul warna Emeraldnya (Glow Soft) */
input:focus, select:focus {
    border-color: var(--emerald-600) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
    outline: none;
}

/* === [03] TABLE CLEAN STYLE === */
/* Agar isi tabel tidak nabrak garis, kasih padding lega */
th, td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9;
}

thead th {
    background-color: #f8fafc; /* Header tabel kalem */
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* === [04] STANDAR TOMBOL SULTAN (Tetap Konsisten) === */
/* Tambahkan margin agar tombol tidak nempel ke elemen lain */
button {
    margin: 0.5rem 0;
}

/* === [TULISAN SULTAN CONFIG] === */

/* 1. Judul Utama: Bold, Italic, Rapat */
h2 {
    color: #020617 !important; /* Hitam Slate Terpekat */
    letter-spacing: -0.05em !important; /* Bikin makin rapat makin mewah */
    text-transform: uppercase;
    font-style: italic;
    font-weight: 900;
}

/* 2. Teks di dalam Select & Tabel: Tajam tapi Bersih */
select, td, span {
    color: #0f172a !important; /* Slate 900 */
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* 3. Keterangan Kecil: Biar Gak Nabrak tapi Tetap Terbaca */
.text-slate-400, .text-slate-500 {
    color: #475569 !important; /* Kita naikkan kontrasnya dari 400 ke 600 */
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.65rem; /* Lebih kecil tapi tebal jadi tetap kebaca */
}

/* 4. Efek Khusus: Bayangan Tulisan Tipis biar Gak Flat */
.text-shadow-sultan {
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* KUNCI DROPDOWN AGAR TIDAK INVISIBLE */
/* 1. Memaksa isi dropdown (option) punya background putih & teks hitam */
select option {
    background-color: #ffffff !important; 
    color: #020617 !important; /* Slate 950 */
    font-weight: 700 !important;
    padding: 12px !important;
}

/* 2. Khusus untuk Chrome/Safari yang bandel saat focus */
select:focus {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Agak solid saat diklik */
    color: #020617 !important;
}

/* 3. Menghilangkan warna biru bawaan Windows/Sistem saat option dipilih */
select option:checked,
select option:hover {
    box-shadow: 0 0 10px 100px #10b981 inset !important; /* Warna Emerald saat hover di list */
    color: white !important;
}

/* --- FIX DROPDOWN INVISIBLE --- */

/* Memaksa elemen option (list yang muncul) tetap solid & terbaca */
select[name="bulan"] option {
    background-color: #ffffff !important; /* Latar belakang putih solid saat dibuka */
    color: #0f172a !important;           /* Teks Slate 900 yang tajam */
    font-weight: 700 !important;
    padding: 10px !important;
    text-transform: uppercase;
}

/* Khusus browser berbasis Chromium (Chrome/Edge) agar tidak kacau warnanya */
select[name="bulan"]:focus {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Sedikit lebih solid saat aktif */
    color: #0f172a !important;
}

/* Menghilangkan sisa-sisa gaya sistem yang mengganggu */
select[name="bulan"]::-ms-expand {
    display: none;
}

/* assets/css/sultan_style.css */

.sultan-textarea {
    min-height: 450px;
    background: #ffffff;
    border: 2px solid #f1f5f9;
    border-radius: 0 0 2.5rem 2.5rem;
    padding: 2rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.8;
    outline: none;
    transition: all 0.3s ease;
}

.sultan-textarea:focus {
    border-color: #6366f1;
    background: #fafafa;
}

.toolbar-sultan {
    background: #0f172a;
    padding: 12px;
    border-radius: 2rem 2rem 0 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* === [05] RESPONSIVE SULTAN LOGIC (Anti-Zoom & Anti-Geser) === */
@media (max-width: 768px) {
    /* Mencegah Kontainer Meluber */
    .container, section, main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* 1. Kontainer Utama: Padding lebih manusiawi untuk HP */
    .p-4, .p-8, .p-10 {
        padding: 1rem !important; 
    }

    /* 2. Grid Kartu Siswa: Jangan pakai auto-fit jika isinya lebar */
    .grid-cols-1.sm\:grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Paksa 2 kolom agar seimbang */
        gap: 0.5rem !important;
    }

    /* 3. Kartu Siswa & Textarea: Paksa lebar pas layar */
    .siswa-card, .sultan-textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sultan-textarea {
        min-height: 200px !important;
        padding: 1rem !important;
        border-radius: 1.5rem !important; /* Sesuaikan dengan layar kecil */
    }

    /* 4. Statistik Widget: Berjejer 2-2 */
    .statistik-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
}

    /* 5. Font & Tombol: Harus proposional */
    .siswa-card h3 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    .siswa-card button {
        padding: 0.6rem 0.4rem !important;
        font-size: 8px !important;
        border-radius: 1rem !important;
    }

    /* 6. Statistik Widget: Buat jadi 2 kolom agar tidak memanjang ke bawah */
    .statistik-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    /* 7. SULTAN TEXTAREA: Di HP jangan terlalu tinggi biar gak pegel scroll */
    .sultan-textarea {
        min-height: 250px !important;
        padding: 1rem !important;
    }
}

/* Fix Khusus Layar Sangat Kecil (iPhone SE / HP Lama) */
@media (max-width: 380px) {
    .grid-cols-1.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important; /* Terpaksa 1 kolom biar gak penyot */
    }
}