/* ==========================================================================
   1. VARIABLES, RESET & GLOBAL SETUP
   ========================================================================== */
* {
    box-sizing: border-box;
}

:root {
    --primary-color: #155332;
    --primary-hover: #0e3d23;
    --bg-color: #dee2b1;
    --sidebar-width: 260px;
    --nav-height-mobile: 65px;
}

.hidden {
    display: none !important;
}

body {
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-color);
    color: #333;
    min-height: 100vh;

    /* Safe Area untuk HP Poni/Notch */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);

    /* Default: Padding bawah untuk Navigasi HP */
    padding-bottom: calc(var(--nav-height-mobile) + 20px + env(safe-area-inset-bottom, 0px));
    transition: padding 0.3s ease;
}

/* ==========================================================================
   2. NAVIGATION BAR (FITUR BUNGLON: MOBILE VS LAPTOP)
   ========================================================================== */
.app-nav {
    background: #ffffff;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    border-top: 1px solid #ddd;
    transition: all 0.3s ease;
}

.nav-item {
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.2s;
    user-select: none;
}

.nav-item.active {
    color: var(--primary-color);
    font-weight: bold;
    background-color: #f0f8ff;
}

.nav-icon {
    font-size: 20px;
    margin-bottom: 2px;
    display: block;
    /* --- TAMBAHAN UNTUK EFEK MEMBAL --- */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
    transform-origin: bottom center;
}

/* --- TAMBAHAN EFEK HOVER (SAAT DISOROT) --- */
.nav-item:hover .nav-icon {
    transform: translateY(-4px) scale(1.25) rotate(8deg) !important;
}

/* --- TAMBAHAN EFEK ACTIVE (SAAT MENU SEDANG DIPILIH) --- */
.nav-item.active .nav-icon {
    transform: scale(1.15) !important;
}

.nav-brand-desktop {
    display: none; /* Default sembunyi di HP */
}

/* --- TAMPILAN MOBILE (DEFAULT) --- */
.app-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.nav-item {
    flex: 1;
    flex-direction: column;
    font-size: 10px;
    height: 100%;
}

/* --- TAMPILAN LAPTOP / DESKTOP (Screen > 992px) --- */
@media screen and (min-width: 992px) {
    body {
        /* Ubah Padding Body: Hilangkan bawah, tambah kiri */
        padding-bottom: 0;
        padding-left: var(--sidebar-width);
    }

    .app-nav {
        /* Pindah ke Kiri (Sidebar) */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        height: 100vh;
        flex-direction: column;
        justify-content: flex-start;
        border-top: none;
        border-right: 1px solid #ddd;
        padding-top: 0;
        align-items: stretch; /* Agar item memenuhi lebar */
        box-shadow: 2px 0 10px rgba(0,0,0,0.05);
    }

    .nav-brand-desktop {
        display: flex;
        flex-direction: row; /* KUNCI: Logo dan teks bersandingan */
        align-items: center;
        justify-content: flex-start; /* Rata kiri agar terlihat rapi */
        height: 65px; /* Tinggi diringkas agar hemat ruang */
        padding: 0 20px; /* Padding samping yang pas */
        background: var(--primary-color);
        color: white;
        text-align: left;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-bottom: 15px;
        gap: 12px; /* Jarak antara logo dan teks */
        border-bottom: 2px solid #9aabc5;
        transition: background 0.3s ease;
    }

    .brand-logo-container {
        width: 50px; /* Ukuran logo disesuaikan untuk posisi horizontal */
        height: 50px;
        flex-shrink: 0; /* Mencegah logo mengecil/gepeng */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .brand-logo-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .brand-text {
        font-size: 14px; /* Ukuran font disesuaikan agar proporsional */
        font-weight: 800;
        letter-spacing: 0.2px;
        line-height: 1.1;
        color: #ffffff;
        white-space: nowrap; /* Memaksa teks tetap satu baris */
    }

    /* Penyesuaian jarak item menu pertama agar tidak terlalu mepet dengan header */
    .nav-item:first-of-type {
        margin-top: 5px;
    }

    .nav-item {
        flex: 0 0 auto; /* Jangan stretch height */
        flex-direction: row; /* Icon di kiri, teks di kanan */
        justify-content: flex-start;
        height: 50px;
        padding: 0 25px;
        font-size: 14px;
        border-left: 4px solid transparent;
        margin-bottom: 5px;
    }

    .nav-item:hover {
        background-color: #f8f9fa;
        color: var(--primary-color);
    }

    .nav-item.active {
        background-color: #eef2ff;
        border-left-color: var(--primary-color);
    }

    .nav-icon {
        margin-bottom: 0;
        margin-right: 15px;
        font-size: 18px;
    }

    .nav-label {
        font-weight: 500;
    }
}

/* ==========================================================================
   3. LAYOUT STRUCTURE & GRID SYSTEM
   ========================================================================== */
.app-content {
    padding: 20px;
    max-width: 1400px; /* Agar tidak terlalu lebar di layar ultrawide */
    margin: 0 auto;
    width: 100%;
}

.editor-panel {
    animation: fadeIn 0.3s;
    width: 100%;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- EDITOR LAYOUT --- */
.editor-layout {
    display: flex;
    flex-direction: column; /* Default HP: Stack ke bawah */
    gap: 20px;
}

.editor-sidebar, .editor-workarea {
    width: 100%;
}

/* Grid Laptop */
@media screen and (min-width: 992px) {
    .editor-layout {
        display: grid;
        grid-template-columns: 320px 1fr; /* Kiri 320px, Kanan Sisa */
        gap: 25px;
        align-items: start;
    }

    .sticky-top-desktop {
        position: sticky;
        top: 20px;
        z-index: 900;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    /* Helper Class */
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}

/* ==========================================================================
   4. UI COMPONENTS (BUTTONS, INPUTS, CARDS)
   ========================================================================== */
/* Card Styling */
.card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.bg-soft-blue { background-color: #f0f7ff; border-color: #cce5ff; }
.bg-warning-light { background-color: #fff3cd; border-color: #ffeeba; }
.bg-primary-light { background-color: #cce5ff; border-color: #b8daff; }

/* Typography */
h1 { color: var(--primary-color); text-align: center; margin-bottom: 20px; font-size: 22px; margin-top: 0; }
h3 { margin: 0 0 15px 0; color: #444; font-size: 16px; }

/* Inputs & Forms */
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 6px; font-weight: 600; color: #444; font-size: 13px; }

input[type="text"], input[type="password"], textarea, select, .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border 0.2s;
    background: white;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,32,96,0.1);
}
textarea { min-height: 80px; resize: vertical; }

/* --- PERBAIKAN JARAK INPUT & TOMBOL (ROW GROUP) --- */
.row-group {
    display: flex;
    gap: 10px; /* Memberikan jarak 10px antara kolom teks dan tombol */
    align-items: center; /* Memastikan keduanya sejajar di tengah */
}

/* Memastikan input teks mengambil sisa ruang yang tersedia dengan rapi */
.row-group .form-control {
    flex: 1; 
    margin-bottom: 0;
}

/* Buttons & Actions */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.btn-block, .full-width { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.btn-primary { background: var(--primary-color); color: white; }
.btn-primary:hover { background: var(--primary-hover); }

.btn-danger { background: #dc3545; color: white; }
.btn-danger:hover { background: #c82333; }

.btn-warning { background: #ffc107; color: #212529; }
.btn-success { background: #28a745; color: white; } /* Fitur Lama */
.btn-purple { background: #6f42c1; color: white; }   /* Fitur Lama */

.btn-outline-primary { border: 1px solid var(--primary-color); color: var(--primary-color); background: transparent; }
.btn-outline-primary:hover { background: var(--primary-color); color: white; }
.btn:disabled { background-color: #ccc; cursor: not-allowed; opacity: 0.7; }

/* Sidebar Title (Untuk File Manager Laptop) */
.sidebar-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* ==========================================================================
   5. QUESTION ITEM STYLES (INTI EDITOR SOAL)
   ========================================================================== */
/* ========================================================== */
/* B. HEADER MENGAPUNG (STICKY HEADER)                        */
/* ========================================================== */

/* 1. Card Container: Wajib overflow visible agar anak bisa sticky */
.section-card {
    background: white;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    overflow: visible !important; /* PENTING: Jangan hidden! */
}

/* 2. Header Bagian: Mengapung saat scroll */
.section-header {
    background: var(--primary-color);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* LOGIKA STICKY */
    position: -webkit-sticky; /* Support Safari */
    position: sticky;         /* Support Chrome/Modern */
    top: 0;                   /* Menempel di langit-langit layar */
    z-index: 100;             /* Tumpuk di atas konten soal */

    /* Kosmetik agar tetap cantik saat mengapung */
    border-radius: 12px 12px 0 0; /* Lengkungan hanya di atas */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Bayangan bawah header */

    /* Support Poni HP (Safe Area) */
    top: env(safe-area-inset-top, 0px);
}

/* Khusus Desktop: Sesuaikan jika ada navbar di atas */
@media screen and (min-width: 992px) {
    .section-header {
        /* Di laptop mungkin butuh jarak sedikit jika ada header lain */
        top: 0;
    }
}

.section-header h3 { color: white; margin: 0; font-size: 16px; }
.sec-letter { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 4px; margin-right: 5px; }

/* Tombol Tambah Soal di Header */
.btn-header-add {
    background: #ffc107;
    color: #000;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.btn-header-add:hover { background: #ffca2c; transform: scale(1.05); }

.items-container { padding: 20px; min-height: 100px; }

/* --- CARD SOAL INDIVIDUAL --- */
.question-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
    position: relative;
    transition: all 0.2s;
}
.question-item:hover { border-color: #ccc; }

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 5px;
    border-bottom: 1px dashed #ddd;
    margin-bottom: 10px;
}
.q-num-badge { background: var(--primary-color); color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-right: 5px; }

/* --- FITUR COLLAPSE/EXPAND --- */
.question-item.collapsed .item-desc,
.question-item.collapsed .item-question,
.question-item.collapsed .file-input-wrapper,
.question-item.collapsed .item-main-img,
.question-item.collapsed .option-group,
.question-item.collapsed .match-img-a,
.question-item.collapsed .match-img-b,
.question-item.collapsed .matching-item, /* Pastikan ini ada */
.question-item.collapsed .option-item    /* Pastikan ini ada */
{ display: none !important; }

.question-item.collapsed .question-header { border-bottom: none; margin-bottom: 0; }
.toggle-icon { transition: transform 0.3s; font-size: 12px; }
.question-item.collapsed .toggle-icon { transform: rotate(-90deg); }

/* --- SUB-ITEMS (OPSI & JODOH) --- */
.matching-item {
    background: #fff;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
    border-left: 3px solid var(--primary-color);
}
.option-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

/* --- TOMBOL REORDER (GESER SOAL) --- */
.reorder-btn-group { display: flex; flex-direction: column; gap: 2px; margin-right: 8px; }
.btn-reorder {
    background: #e9ecef; border: 1px solid #ced4da; color: #495057;
    font-size: 10px; padding: 2px 8px; cursor: pointer; border-radius: 4px; line-height: 1;
}
.btn-reorder:hover { background: #dde2e6; }

/* --- ACTION MENU (TITIK TIGA) --- */
.action-menu { position: relative; }
.menu-btn { background: none; border: none; font-size: 18px; cursor: pointer; color: #666; width: 30px; text-align: center; }
.menu-content {
    display: none; position: absolute; right: 0; top: 25px; background: white;
    min-width: 140px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border-radius: 6px;
    z-index: 100; overflow: hidden; border: 1px solid #eee;
}
.menu-content.show { display: block; }
.menu-content button {
    display: block; width: 100%; text-align: left; padding: 10px 15px;
    background: none; border: none; font-size: 13px; cursor: pointer;
    border-bottom: 1px solid #f0f0f0; color: #333;
}
.menu-content button:hover { background: #f0f8ff; color: var(--primary-color); }

/* --- IMAGE PREVIEW & UPLOAD --- */
.image-preview { max-width: 100%; max-height: 120px; object-fit: contain; margin-top: 10px; border: 1px solid #ddd; background: #fff; padding: 5px; border-radius: 4px; display: block; }
.file-input-wrapper { margin-top: 5px; margin-bottom: 5px; }
.file-input-label { background: #6c757d; color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; display: inline-block; }
input[type="file"] { display: none; }

/* ========================================================== */
/* A. CONFIG BAR & TOMBOL JENIS SOAL (VERSI BERSIH)           */
/* ========================================================== */
.config-bar {
    background: #e3f2fd;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #90caf9;
}

.config-title {
    font-weight: bold;
    color: #002060;
    margin-bottom: 10px;
    display: block;
    font-size: 13px;
}

.toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sembunyikan elemen checkbox & status lama */
.toggle-item input, .toggle-status {
    display: none !important;
}

/* Style Dasar Tombol (POSISI MATI/OFF) */
.toggle-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    background: #ffffff;  
    color: #666;              /* Teks Abu-abu */
    padding: 8px 16px;        /* Padding Besar */
    border-radius: 20px;      /* Kapsul */
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

/* Style Tombol Saat (POSISI HIDUP/ON) - Fitur :has() */
.toggle-item:has(input:checked) {
    background: #002060;      /* Biru Tua */
    color: white;             /* Teks Putih */
    border-color: #002060;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,32,96,0.3);
    transform: translateY(-1px);
}

.toggle-item:hover { background: #f8f9fa; }
.toggle-item:has(input:checked):hover { background: #001540; }

/* ==========================================================================
   6. LOGIN & AUTOSAVE (FITUR WAJIB)
   ========================================================================== */
/* AUTOSAVE */
.autosave-status {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: white; padding: 8px 20px; border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); font-size: 12px; font-weight: 600;
    color: #666; display: flex; align-items: center; gap: 8px; z-index: 9999;
    opacity: 0; transition: all 0.3s; pointer-events: none; border: 1px solid #eee;
}
.autosave-status.visible { opacity: 1; transform: translateX(-50%) translateY(10px); }
.autosave-status.saving { border-color: var(--primary-color); color: var(--primary-color); }
.autosave-status.saved { border-color: #28a745; color: #28a745; }
.spinner { width: 12px; height: 12px; border: 2px solid #ccc; border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; display: none; }
.saving .spinner { display: block; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ========================================================== */
/* LOGIN CONTAINER BARU (EFEK MELENGKUNG & MENCENG)           */
/* ========================================================== */

#login-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); /* Memakai variabel asli Anda (#f8f9fa) */
    z-index: 50000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Background melengkung miring ala gambar menggunakan warna Navy Blue khas Anda */
.login-header-skew {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* --- PERUBAHAN TINGGI: GOLDEN RATIO --- */
    height: 61.8vh; 
    background-color: var(--primary-color); 
    border-radius: 0 0 40% 100% / 0 0 40% 100%;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0, 32, 96, 0.3);
    pointer-events: none; /* KUNCI UTAMA: Agar kurva tidak menghalangi klik tombol! */
}

/* ==========================================================
   PERBAIKAN POSISI LAYOUT GOLDEN RATIO & BOTTOM 15%
   ========================================================== */

/* 1. Pembungkus utama dikunci presisi setinggi layar HP (100vh) */
.login-content-wrapper {
    position: relative;
    z-index: 2;
    padding: 0 25px; /* Ruang kiri kanan */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh; /* KUNCI: Paksa setinggi layar HP */
    box-sizing: border-box;
}

/* 2. Layar aktif distretch untuk memenuhi 100vh */
.login-screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-top: 12vh; /* Menahan teks WELCOME tetap cantik di atas area biru */
}

/* Transisi 3 Layar Login */
.login-screen {
    display: none;
    width: 100%;
    max-width: 400px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.login-screen.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 1;
    transform: translateY(0);
}

/* Judul Besar di Halaman Login */
.welcome-title {
    color: #ffffff;
    font-size: 42px; /* Diperbesar dari 28px agar lebih dominan */
    font-weight: 900; /* Dibuat ekstra tebal agar terlihat profesional */
    text-align: center;
    line-height: 1; /* Jarak antar baris dirapatkan agar teks terlihat menyatu */
    letter-spacing: 1px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Bayangan dipertegas agar teks "keluar" */
    margin-top: 0 !important;
}

/* --- STYLING LOGO START DI HALAMAN AWAL --- */
.start-logo {
    width: 300px; /* Ukuran lebar logo, silakan sesuaikan dengan selera */
    height: auto;
    display: block;
    margin: 0 auto; /* Pastikan berada tepat di tengah */
    
    /* Efek bayangan agar logo terlihat "timbul" di atas area biru */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
    
    /* Animasi halus saat muncul */
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Animasi agar logo muncul dengan efek membal (bouncy) */
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* ========================================================== */
/* FORM & INPUT LOGIN GAYA BARU (KAPSUL/PILL)                 */
/* ========================================================== */
.login-form { 
    width: 100%; background: white; padding: 25px 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    /* TAMBAHAN SIHIR FLEXBOX */
    margin-top: auto !important; 
    margin-bottom: 10px !important; 
    z-index: 10;
}

.input-group { position: relative; margin-bottom: 20px; width: 100%; }
.input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--primary-color); font-size: 16px; }
.input-icon-right { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #aaa; cursor: pointer; font-size: 16px; }

.input-group input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    border-radius: 30px; /* Bentuk kapsul */
    border: 1px solid #e0e0e0;
    background-color: #fafbfc;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 32, 96, 0.1); /* Glow biru khas Anda */
}

/* ========================================================== */
/* TOMBOL-TOMBOL LOGIN (PILL)                                 */
/* ========================================================== */
.button-group { 
    display: flex; flex-direction: column; width: 100%; gap: 15px; max-width: 400px; 
    /* TAMBAHAN SIHIR FLEXBOX */
    margin-top: auto !important; 
    margin-bottom: 10px !important; 
    z-index: 10;
}

.btn-pill {
    width: 100%; padding: 15px 20px; border-radius: 50px; font-size: 15px; font-weight: 700;
    border: none; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;
    text-decoration: none; box-sizing: border-box; letter-spacing: 0.5px;
}

.btn-pill i { margin-right: 10px; font-size: 18px; }

/* Primary (Navy Blue) */
.btn-primary { background-color: var(--primary-color); color: white; box-shadow: 0 4px 15px rgba(0, 32, 96, 0.2); }
.btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 32, 96, 0.3); }

/* Secondary (Garis Navy Blue) */
.btn-secondary { background-color: white; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { background-color: #f0f7ff; transform: translateY(-2px); }

/* WhatsApp & Download */
.btn-whatsapp { background-color: #25D366; color: white; }
.btn-whatsapp:hover { background-color: #1ebe57; }
.btn-download { background-color: #ffc107; color: #212529; } /* Kuning khas app Anda */
.btn-download:hover { background-color: #e0a800; }

.btn-pill:active { transform: scale(0.98); }

/* ========================================================== */
/* FOOTER SOCIAL ICONS (WA & UNDUH BULAT)                     */
/* ========================================================== */
.login-social-footer {
    text-align: center;
    width: 100%;
    /* KUNCI AREA BAWAH */
    margin-top: 10px !important;
    margin-bottom: 7vh !important; 
}

.login-social-footer p {
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    font-weight: 500;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Jarak antar ikon bulat */
}

.icon-circle {
    background: transparent !important; /* Menghilangkan warna latar (lingkaran) */
    box-shadow: none !important; /* Menghilangkan efek bayangan kotak */
    font-size: 38px; /* Membesarkan ukuran ikon karena sudah tidak ada lingkarannya */
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Mengubah warna font/ikonnya langsung */
.icon-circle.btn-whatsapp { color: #25D366 !important; }
.icon-circle.btn-download { color: var(--primary-color) !important; } /* Menggunakan Navy Blue agar kontras dan terbaca jelas di atas warna putih */

/* Efek saat disentuh / di-hover */
.icon-circle:hover {
    transform: translateY(-4px) scale(1.15); /* Efek melompat dan membesar sedikit */
}
.icon-circle:active {
    transform: scale(0.9);
}

/* ========================================================== */
/* INFO, HINT, & PERINGATAN (DIAMBIL DARI DESAIN LAMA)        */
/* ========================================================== */
.login-hint {
    background-color: #e3f2fd; color: #0c5460; padding: 12px 15px; border-radius: 8px;
    font-size: 13px; border-left: 4px solid #2196f3; margin-bottom: 15px; width: 100%; box-sizing: border-box;
}
.warning-box {
    background: #f8d7da; color: #721c24; padding: 12px 15px; border-radius: 8px;
    border-left: 4px solid #dc3545; font-size: 12px; margin-bottom: 15px; width: 100%; box-sizing: border-box;
}

/* ========================================================== */
/* CHECKBOX INGAT SAYA & LUPA PASSWORD                        */
/* ========================================================== */
.checkbox-group { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 25px; padding-left: 5px; }
.checkbox-group input { width: auto !important; margin: 0; cursor: pointer; accent-color: var(--primary-color); }
.checkbox-group label { margin: 0; font-weight: normal; cursor: pointer; font-size: 13px; color: #555; }

.forgot-password-link { color: var(--primary-color); font-size: 13px; text-decoration: none; font-weight: 600; margin-bottom: 25px; }
.login-footer { text-align: center; font-size: 13px; color: #777; width: 100%; }
.login-footer a { color: var(--primary-color); text-decoration: none; font-weight: bold; }

/* Utilities Margin */
.mt-large { margin-top: 70px; }
.mt-medium { margin-top: 30px; }
.mt-small { margin-top: 15px; }

/* ========================================================== */
/* LOGIC VISIBILITY LOGIN (DIPERBARUI)                        */
/* ========================================================== */
body.login-mode #login-container { display: flex !important; }
body.login-mode .app-wrapper, body.login-mode #autosave-indicator { display: none !important; }
body:not(.login-mode) #login-container { display: none !important; }

/* ==========================================================================
   7. ADMIN & PANITIA TABLES
   ========================================================================== */

.filter-input { flex: 1; min-width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
.table-responsive { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border: 1px solid #eee; padding: 12px; text-align: left; }
th { background: var(--primary-color); color: white; white-space: nowrap; }
tr:nth-child(even) { background-color: #f9f9f9; }

/* Merapikan Container Laci / Notifikasi Papan */
.notification-container {
    padding: 20px 10px; /* Lebihkan padding supaya terkesan leluasa */
    max-width: 850px; /* Constraint width untuk baca yg lebih baik */
    margin: 0 auto; 
}

/* Merapikan Setiap Blok Pengumuman */
.notification-card {
    background: #ffffff;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); 
    margin-bottom: 20px;
    border-left: 6px solid #ffc107; /* Striping penanda pengumuman diperlebar */
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.notification-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1); 
}

/* Modifikasi bagian kepala notifikasi */
.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Setengah center agar tidak mengambang */
    font-size: 13px;
    color: #666;
    margin-bottom: 12px; 
    border-bottom: 1px dashed #eee; /* Garis pembatas tipis agar title dan body bersih */
    padding-bottom: 8px;
}

/* Desain Badge Tag */
.sender-badge {
    background: var(--primary-color);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Style tombol hapus (X) kecil yang lebih rounded */
.delete-notif-btn {
    position: absolute;
    top: 15px; 
    right: 15px;
    background: #dc3545;
    color: #ffffff;
    width: 24px; 
    height: 24px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(220,53,69,0.3);
    transition: background 0.3s ease;
}

.delete-notif-btn:hover {
    background: #c82333;
}

/* Profile Styles */
.profile-header { text-align: center; margin-bottom: 30px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.avatar-circle { width: 80px; height: 80px; background: #e3f2fd; color: var(--primary-color); font-size: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px auto; }
.badge-role { display: inline-block; padding: 4px 12px; background: #28a745; color: white; border-radius: 20px; font-size: 12px; font-weight: bold; margin-top: 5px; }

/* ==========================================================================
   8. PREVIEW & PRINT (BAGIAN KRUSIAL - JANGAN DIUBAH SEMBARANGAN)
   ========================================================================== */
.preview-panel {
    background: var(--bg-color); padding: 20px; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
}
.preview-wrapper { width: 100%; display: flex; justify-content: center; overflow-x: auto; margin-bottom: 20px; }

/* Simulasi Kertas F4 */
.paper-sheet {
    width: 215mm;
    min-height: 330mm;
    padding: 10mm;
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    font-family: 'Times New Roman', serif;
    font-size: 11pt;
    line-height: 1.15;
    color: #000;
    box-sizing: border-box;
}

/* Responsif Preview di HP (Zoom Out) */
@media screen and (max-width: 768px) {
    .preview-panel { padding: 10px; }
    .paper-sheet {
        width: 100%;
        min-height: auto;
        padding: 5mm;
        zoom: 0.65;
    }
}

/* --- PRINT CONTENT INTERNALS --- */
.print-content img { max-width: 100% !important; height: auto !important; }
.kop-image { width: 100% !important; margin-bottom: 5px; border-bottom: 2px solid #000; padding-bottom: 2px; }
.identity-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; border-bottom: 2px double #000; margin-bottom: 10px; padding-bottom: 5px; font-size: 10pt; text-align: left; }
.student-info { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 10pt; border: 1px solid #000; padding: 5px; }

/* --- FIX ALIGNMENT NOMOR & TEKS DARI QUILL --- */
.print-q-text p {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}
.print-q-text p:last-child {
    margin-bottom: 0 !important;
}

/* Kolom PG */
.pg-columns { column-count: 2; column-gap: 8mm; width: 100%; }
.pg-item { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 8px; }

/* --- IMAGE SIZING RULES (PENTING) --- */
.question-image-pg { max-width: 95% !important; max-height: 40mm !important; object-fit: contain; display: block; margin: 3px 0; border: 1px dashed #eee; }
.question-image-std { max-height: 65mm !important; width: auto !important; max-width: 100%; object-fit: contain; display: block; margin: 5px 0; border: 1px dashed #eee; }

.section-print-title { font-weight: bold; font-size: 11pt; margin-top: 10px; margin-bottom: 5px; text-transform: uppercase; border-bottom: 1px solid #000; display: inline-block; }
.story-text { font-style: italic; background: #f0f0f0; padding: 5px; font-size: 10pt; margin-bottom: 5px; text-align: justify; display: block; border-radius: 4px; }
.export-actions {
    text-align: center;
    width: 100%;
    /* Hapus max-width agar bisa mengambil lebar penuh untuk centering */
    display: flex;
    flex-direction: column;
    align-items: center; /* KUNCI: Paksa items ke tengah secara horizontal */
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 40px; /* Jarak aman dari bawah layar */
}

/* Pastikan tombolnya juga responsif tapi tidak terlalu lebar di HP */
#btn-export-pdf {
    min-width: 250px;
    max-width: 90%;
}
.export-tips { margin-top: 10px; color: #ccc; font-size: 12px; }

/* ==========================================================================
   9. MEDIA PRINT (PDF EXPORT SETTINGS)
   ========================================================================== */
@media print {
    @page { size: 215mm 330mm; margin: 15mm; } /* Setup Kertas F4 */

    body, .app-wrapper, .app-content, .preview-panel, .paper-sheet {
        margin: 0 !important; padding: 0 !important;
        background: white !important; width: 100% !important;
        height: auto !important; overflow: visible !important;
        border: none !important; box-shadow: none !important;
        zoom: 1 !important;
    }

    /* Sembunyikan semua UI Aplikasi */
    .app-nav, .editor-panel, .export-actions, .mobile-only, .desktop-only,
    #autosave-indicator, #login-overlay, .btn, .config-bar, .panel-header,
    #panel-panitio, #panel-dashboard, #panel-notification, #panel-profile,
    .editor-sidebar, .admin-mode-box, .file-dropdown-wrapper
    { display: none !important; }
    .timer-bar { display: none !important; }
        body.has-timer { padding-top: 0 !important; }

    /* Pastikan Panel Preview Tampil */
    #panel-preview, .preview-panel, #preview-content { display: block !important; }

    /* Optimasi Font Cetak */
    .paper-sheet { font-family: 'Times New Roman', serif; font-size: 10.5pt; line-height: 1.2; color: #000; }

    /* Layout 2 Kolom PG */
    .pg-columns { column-count: 2 !important; column-gap: 8mm; }
    .pg-item { break-inside: avoid; page-break-inside: avoid; }

    /* Gambar Cetak Tanpa Border & Batas */
    .question-image-pg, .question-image-std { border: none !important; }
    .story-text { background: #eee !important; -webkit-print-color-adjust: exact; }
}

/* ==========================================================================
   10. MODAL & UTILITIES
   ========================================================================== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100000;
    display: flex; justify-content: center; align-items: center;
}
.modal-box { background: white; padding: 25px; border-radius: 12px; max-width: 90%; width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-icon { font-size: 40px; margin-bottom: 10px; }
.modal-buttons { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }

.placeholder-state { text-align: center; padding: 50px 20px; color: #999; border: 2px dashed #ddd; border-radius: 12px; margin-top: 20px; background: #fdfdfd; }
.placeholder-icon { font-size: 50px; margin-bottom: 10px; opacity: 0.5; }

/* Style Kotak Petunjuk (Jodoh, dll) */
.help-box {
    background-color: #e3f2fd; /* Biru muda lembut */
    border-left: 4px solid #2196f3; /* Garis biru tegas */
    color: #0c5460;
    padding: 10px 15px;
    margin: 10px 0 15px 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Menambahkan ikon lampu otomatis */
.help-box::before {
    content: '💡';
    font-size: 14px;
}

/* ========================================================== */
/* FIX TAMPILAN TABEL: RAPI & STICKY                  */
/* ========================================================== */

/* 1. Container Scroll: Hapus padding agar tabel mentok ke pinggir */
#panitio-content, #admin-content {
    max-height: 65vh; /* Sedikit dikurangi agar pas di layar laptop */
    overflow-y: auto !important;
    overflow-x: hidden; /* Cegah scroll samping (offside) */
    position: relative;
    border-top: none;
    border-radius: 0 0 8px 8px; /* Lengkungan bawah container */
}

/* 2. Reset Tabel */
#panitio-content table, #admin-content table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0; /* Pastikan tidak ada margin */
}

/* 3. Style Header (TH) -> SEKARANG KUNING */
#panitio-content th, #admin-content th {
    position: -webkit-sticky; /* Support Safari */
    position: sticky;         /* Standard */
    top: 0;                   /* Tempel di atas */
    z-index: 20;              /* Pastikan di atas isi tabel */

    /* GANTI WARNA JADI KUNING & TEKS HITAM */
    background: #ffc107 !important;
    color: #212529 !important; /* Teks Hitam Gelap (Kontras dengan Kuning) */

    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;

    padding: 12px 15px;
    border-bottom: 2px solid #e0a800; /* Garis bawah sedikit lebih gelap */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Bayangan agar terlihat mengapung */
}

/* 4. MENGHILANGKAN OFFSIDE & MERESET SUDUT */
/* Reset radius jadi kotak agar pas dengan container */
#panitio-content th:first-child,
#admin-content th:first-child {
    border-top-left-radius: 0;
}

#panitio-content th:last-child,
#admin-content th:last-child {
    border-top-right-radius: 0;
}

/* 5. Border Baris Data */
/* ==========================================================
   PERBAIKAN ESTETIKA TABEL DASBOR ADMIN PUSAT (FINAL LIST)
   ========================================================== */

/* 1. Menyamarkan Garis Tabel agar terlihat seperti List Modern */
#panitio-content td, #admin-content td {
    border: none !important; /* Menghapus garis bawaan tabel */
}

/* 2. Mengecilkan Ukuran Tombol Aksi */
.btn-action-table {
    border: none !important;
    width: 30px;  /* Dikecilkan dari 36px */
    height: 30px; /* Dikecilkan dari 36px */
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Bayangan dihaluskan */
}

.btn-action-table i {
    font-size: 16px; /* Ukuran ikon dikecilkan dari 20px */
}

/* --- EFEK HOVER TOMBOL BIRU (MATA) --- */
.btn-action-table.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}
.btn-action-table.btn-primary:hover {
    background-color: #001a4d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 32, 96, 0.3);
}

/* --- EFEK HOVER TOMBOL KUNING SOAL-HIKAM (TEROPONG) --- */
.btn-action-table.btn-warning-soal {
    background-color: #ffc107 !important;
    color: #1e293b !important;
}
.btn-action-table.btn-warning-soal:hover {
    background-color: #e0a800 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(224, 168, 0, 0.4);
}

/* 6. Efek Zebra (Baris Genap/Ganjil) agar mudah dibaca */
#panitio-content tr:nth-child(even), #admin-content tr:nth-child(even) {
    background-color: #fcfcfc;
}
#panitio-content tr:hover, #admin-content tr:hover {
    background-color: #fff3cd; /* Kuning sangat muda saat di-hover */
}

/* Fix agar sticky berfungsi di dalam container dengan overflow */
#panitio-content, #admin-content {
    max-height: 70vh; /* Batasi tinggi agar scroll muncul di tabel, bukan di body */
    overflow-y: auto !important; /* Scroll vertikal */
    overflow-x: auto; /* Scroll horizontal jika tabel lebar */
    position: relative;
}

/* ========================================================== */
/* MODERN SECURITY CARD DESIGN                               */
/* ========================================================== */

.security-card {
    border: 1px solid #e0e6ed;
    box-shadow: 0 4px 15px rgba(0, 32, 96, 0.05); /* Bayangan biru tipis */
    overflow: hidden;
    position: relative;
    border-top: 4px solid var(--primary-color); /* Aksen garis biru di atas */
}

.security-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
}

.sec-icon-box {
    width: 45px;
    height: 45px;
    background: #fff3cd; /* Kuning lembut */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    flex-shrink: 0;
}

.sec-title {
    margin: 0 0 5px 0;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
}

.sec-desc {
    margin: 0;
    font-size: 12px;
    color: #777;
    line-height: 1.4;
}

/* Input Modern */
.modern-input input {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 12px 15px; /* Lebih lega */
    border-radius: 8px;
    font-size: 14px;
}

.modern-input input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 32, 96, 0.1);
}

/* --- GANTI BLOK INI DI style.css --- */
.btn-save-pass {
    /* 1. Warna Dasar & Kontras (Hijau) */
    background: linear-gradient(145deg, #28a745, #218838) !important;
    border: none !important;
    color: white !important;

    /* 2. Ukuran & Ketebalan */
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 15px 25px !important; /* Lebih gemuk */
    
    /* 3. Bentuk & Shadow (Bercahaya) */
    border-radius: 50px !important; /* Lonjong modern */
    letter-spacing: 1px;
    text-transform: uppercase; /* Huruf besar semua */
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4); /* Bayangan hijau */
    
    /* 4. Animasi */
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* 5. Efek saat Kursor Melintas (Hover) */
.btn-save-pass:hover {
    background: linear-gradient(145deg, #218838, #1e7e34) !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.6) !important; /* Shadow lebih kuat */
    transform: translateY(-3px) scale(1.02); /* Terangkat & membesar sedikit */
}

/* 6. Efek saat Klik (Active) */
.btn-save-pass:active {
    transform: translateY(1px); /* Efek ditekan */
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3) !important;
}

/* 7. Menambahkan Ikon Bersinar (Opsional, sangat sip) */
.btn-save-pass::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    transition: all 0.5s;
    opacity: 0;
}

.btn-save-pass:hover::after {
    left: 120%;
    opacity: 1;
}
/* ---------------------------------- */

/* ========================================================== */
/* GLOBAL COUNTDOWN TIMER (RIBBON STYLE)                      */
/* ========================================================== */

.timer-bar {
    position: fixed;
    top: 20px; /* Sejajar dengan Auto-Save */
    right: 0;  /* Mepet Kanan (Press Body) */
    left: auto; /* Reset posisi kiri */
    width: auto; /* Lebar menyesuaikan isi */

    background: #28a745; /* Default HIJAU (> 2 hari) */
    color: white;
    z-index: 9999;

    /* Padding: Kiri lebih lega untuk lengkungan */
    padding: 8px 15px 8px 25px;

    /* BENTUK UNIK: Bulat Kiri, Kotak Kanan */
    border-radius: 50px 0 0 50px;

    box-shadow: -4px 4px 15px rgba(0,0,0,0.15); /* Bayangan ke kiri */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efek membal saat muncul */
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Konten disusun Vertikal (Atas: Label, Bawah: Waktu) */
.timer-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Rata Kanan */
    line-height: 1.2;
}

.timer-header {
    font-size: 11px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timer-time {
    font-family: 'Courier New', monospace; /* Font monospaced agar angka tidak goyang */
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
}

/* Tombol Close Pindah ke Kiri */
.timer-close {
    position: absolute;
    left: 8px; /* Di dalam lengkungan kiri */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.1);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timer-close:hover { background: rgba(0,0,0,0.3); }

/* --- LOGIKA WARNA STATUS --- */

/* 1. KUNING: Waktu < 2 Hari (Peringatan) */
.timer-bar.warning {
    background: #ffc107;
    color: #333; /* Teks hitam agar kontras */
}
.timer-bar.warning .timer-time,
.timer-bar.warning .timer-close { color: #000; }

/* 2. MERAH: Waktu < 24 Jam (Kritis + Denyut) */
.timer-bar.critical {
    background: #dc3545;
    padding-right: 25px; /* Sedikit memanjang saat kritis */
    animation: pulseSide 2s infinite;
}

@keyframes pulseSide {
    0% { box-shadow: -4px 4px 15px rgba(220, 53, 69, 0.4); }
    50% { box-shadow: -4px 4px 25px rgba(220, 53, 69, 0.8); }
    100% { box-shadow: -4px 4px 15px rgba(220, 53, 69, 0.4); }
}

/* ========================================================== */
/* HALAMAN TENTANG APLIKASI (ABOUT PAGE)                      */
/* ========================================================== */

.about-hero {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    border-bottom: 4px solid var(--primary-color);
}

/* --- GANTI DENGAN INI UNTUK LOGO.PNG --- */

/* Wadah Lingkaran */
.bunglon-logo-wrapper {
    width: 120px;  /* Ukuran lingkaran latar belakang */
    height: 120px;
    background: #e3f2fd; /* Warna latar biru muda lembut */
    border-radius: 10%; /* Membuat jadi bulat */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto; /* Posisi tengah */
    box-shadow: 0 6px 15px rgba(0,32,96,0.15); /* Bayangan agar menonjol */
    padding: 15px; /* Jarak aman antara pinggir lingkaran dan logo */
    background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%); /* Gradien halus */
}

/* Gambar Logo PNG */
.bunglon-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Agar gambar pas di dalam lingkaran tanpa gepeng/terpotong */
    /* Opsional: Jika logo Anda transparan, tambahkan bayangan tipis pada logonya */
    /* filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); */
}
/* --------------------------------------- */

.bunglon-title {
    color: #333;
    font-size: 28px;
    margin-bottom: 5px;
}

.text-highlight {
    color: var(--primary-color);
    font-weight: 800;
    font-style: italic;
}

.app-version {
    background: #ffc107;
    color: #000;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 20px;
}

.bunglon-desc {
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- GRID TOMBOL DOWNLOAD & WA --- */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .action-grid { grid-template-columns: 1fr; } /* Stack di HP */
}

.btn-action {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0,0,0,0.05);
}

.btn-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.btn-download {
    background: linear-gradient(135deg, #002060 0%, #004080 100%);
    color: white;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
}

.btn-icon { font-size: 24px; margin-right: 15px; }

.btn-text { display: flex; flex-direction: column; text-align: left; }
.main-text { font-weight: bold; font-size: 16px; }
.sub-text { font-size: 11px; opacity: 0.8; }

/* --- GRID FITUR --- */
.features-grid {
    display: grid;
    /* Membuat grid responsif: min 200px, max 1 bagian merata */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 20px;
}

.feature-item {
    background: #f8f9fa;
    padding: 25px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.feature-item:hover {
    background: white;
    box-shadow: 0 8px 25px rgba(0,32,96,0.08);
    border-color: #cce5ff;
    transform: translateY(-5px);
}

/* Lingkaran pembungkus ikon */
.f-icon-wrapper {
    width: 65px;
    height: 65px;
    background: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Efek saat card di-hover: Lingkaran membesar & berubah warna */
.feature-item:hover .f-icon-wrapper {
    background: var(--primary-color);
    transform: scale(1.15) rotate(5deg);
}

.f-icon { 
    font-size: 32px; 
    line-height: 1;
    transition: transform 0.3s;
}

.feature-item h4 { 
    margin: 0 0 10px 0; 
    color: var(--primary-color); 
    font-size: 15px; 
    font-weight: 800;
}

.feature-item p { 
    margin: 0; 
    font-size: 13px; 
    color: #666; 
    line-height: 1.5; 
}

.about-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: #888;
    font-size: 12px;
}

.f-icon { font-size: 30px; display: block; margin-bottom: 10px; }
.feature-item h4 { margin: 0 0 8px 0; color: var(--primary-color); font-size: 14px; }
.feature-item p { margin: 0; font-size: 12px; color: #666; line-height: 1.4; }

.about-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: #888;
    font-size: 12px;
}

/* ==========================================================
   11. MODERN SYMBOL PALETTE (RUMUS MATEMATIKA)
   ========================================================== */
.symbol-palette {
    background: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 18px;
    margin-top: 8px;
    box-shadow: 0 8px 25px rgba(0, 32, 96, 0.08);
    border-top: 4px solid var(--primary-color);
    animation: slideDownFade 0.2s ease-out forwards;
    position: relative;
}

/* Efek animasi muncul halus */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.symbol-group {
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #f0f0f0;
}
.symbol-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.symbol-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Warna unik untuk setiap kategori */
.title-math { color: #d63384; }
.title-calc { color: #002060; }
.title-phys { color: #28a745; }

.symbol-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Desain Tombol ala Apple / Notion */
.symbol-btn {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.symbol-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 32, 96, 0.2);
}

.symbol-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
/* ==========================================================
   UPDATE: TOMBOL CLOSE (X) GAYA RED BUTTON KECIL
   ========================================================== */
.close-palette-btn {
    position: absolute;
    top: 10px;  /* Posisi di pojok kanan atas */
    right: 10px;
    
    /* Gaya ala Tombol Hapus (Danger) tapi versi mini */
    background-color: #dc3545; /* Merah solid */
    color: #ffffff; /* Teks Putih */
    border: none;
    border-radius: 4px; /* Sudut melengkung sedikit seperti tombol bootstrap */
    
    /* Ukuran lebih kecil dan padat */
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1; /* Memastikan X di tengah vertikal */
    
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3); /* Sedikit bayangan merah agar menonjol */
}

.close-palette-btn:hover {
    background-color: #bb2d3b; /* Merah sedikit lebih gelap saat disorot */
    color: #ffffff;
    transform: translateY(-1px); /* Efek naik sedikit */
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.close-palette-btn:active {
    background-color: #a52834;
    transform: translateY(0); /* Kembali saat diklik */
    box-shadow: none;
}

/* ==========================================================
   12. AVATAR SELECTOR (EDIT PROFIL) - EFEK BOUNCY
   ========================================================== */
.avatar-selector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Sedikit dilebarkan agar ada ruang untuk animasi membesar */
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    justify-content: center;
}

.avatar-option {
    font-size: 24px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    /* KUNCI EFEK MEMBAL: Menggunakan timing cubic-bezier yang sama dengan fitur unggulan */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Efek saat kursor melayang (Hover) */
.avatar-option:hover {
    background: #e3f2fd;
    /* Melompat ke atas, membesar, memiringkan 5 derajat, dan memberi bayangan */
    transform: translateY(-5px) scale(1.15) rotate(5deg);
    box-shadow: 0 8px 20px rgba(0, 32, 96, 0.15);
    border-color: #cce5ff;
}

/* Efek saat ikon ditekan/dipilih (Selected) */
.avatar-option.selected {
    background: #cce5ff;
    border-color: var(--primary-color);
    /* Terkunci dalam keadaan membesar dengan bayangan tegas */
    transform: scale(1.2);
    box-shadow: 0 6px 15px rgba(0, 32, 96, 0.25);
}

/* ==========================================================
   PERBAIKAN TAMPILAN PREVIEW SNIPPET (JUDUL SOAL)
   ========================================================== */
.preview-snippet {
    flex: 1; /* Mengambil sisa ruang kosong di sebelah nomor soal */
    min-width: 0; /* Mencegah flexbox offside */
    white-space: nowrap; /* Paksa teks hanya 1 baris */
    overflow: hidden; /* Sembunyikan sisa teks yang kepanjangan */
    text-overflow: ellipsis; /* Otomatis tambahkan titik-titik (...) */
    max-width: 400px; /* Batas aman maksimal */
}

/* Netralkan sifat tag <p> bawaan Quill di dalam snippet agar tidak turun ke bawah */
.preview-snippet p {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Sembunyikan gambar atau kotak rumus di dalam snippet agar tidak merusak tata letak header */
.preview-snippet img, 
.preview-snippet span.ql-formula {
    display: none !important;
}

/* ==========================================================
   13. RECAP OVERLAY & PRINTING RULES
   ========================================================== */
.recap-table { width: 100%; border-collapse: collapse; font-size: 11pt; margin-top: 10px; color: #333; }
.recap-table th, .recap-table td { border: 1px solid #aaa; padding: 8px 12px; text-align: left; }
.recap-table th { background-color: #f0f7ff !important; color: #002060 !important; font-weight: bold !important; }
.status-ok { color: #28a745; font-weight: bold; }
.status-bad { color: #dc3545; font-weight: bold; font-size: 10pt; }

/* --- KERTAS MODE LANDSCAPE UNTUK PREVIEW LAYAR --- */
.paper-landscape {
    width: max-content !important; 
    min-width: 330mm !important;   
    min-height: 215mm !important;
    max-width: none !important;    
    margin: 0 auto;
    
    /* FIX: Hapus shadow mutlak dari layar preview agar aman diekspor JS/PDF */
    box-shadow: none !important;
    
    /* Ganti shadow dengan garis tipis sebagai penanda batas kertas di layar */
    border: 1px solid #d1d8e0 !important; 
}

/* Penyesuaian khusus agar di layar HP lebih nyaman di-scroll */
@media screen and (max-width: 768px) {
    .paper-landscape {
        min-width: 100% !important; 
        padding: 15px !important;
    }
}

/* Memastikan teks tabel rekap tetap rapi */
.recap-table td {
    word-wrap: break-word;
    white-space: normal;
}

/* ==========================================================
   SIHIR HALAMAN CETAK (NAMED PAGES) & ISOLASI
   ========================================================== */

/* 1. Membuat Profil Kertas Khusus untuk Rekap */
@page kertas_rekap {
    size: 330mm 215mm; /* F4 Landscape otomatis */
    margin: 15mm;      
}

@media print {
    /* 2. Terapkan profil kertas HANYA saat mode rekap aktif */
    body.print-recap-mode {
        page: kertas_rekap !important; 
    }

    /* Tampilkan Overlay Rekap, Matikan UI Lain */
    body.print-recap-mode #recap-overlay { display: block !important; position: static !important; background: white !important; }
    body.print-recap-mode #recap-overlay > div:first-child { display: none !important; } 
    body.print-recap-mode .app-wrapper,
    body.print-recap-mode #panel-preview,
    body.print-recap-mode header,
    body.print-recap-mode .top-header,
    body.print-recap-mode .app-nav { 
        display: none !important; 
    }

    /* =======================================================
       PEMBANTAIAN SHADOW TOTAL & PERLINDUNGAN TABEL
       ======================================================= */
    
    /* Bersihkan semua shadow dan garis batas dari kertas saat masuk PDF */
    body.print-recap-mode .paper-sheet,
    body.print-recap-mode .paper-landscape { 
        box-shadow: none !important; 
        text-shadow: none !important;
        border: none !important;     /* Hilangkan garis tipis penanda kertas tadi */
        border-radius: 0 !important; /* Hapus lengkungan ujung jika ada */
        padding: 0 !important; 
        width: 100% !important; 
        margin: 0 !important; 
        max-width: none !important; 
        background: transparent !important;
    }

    /* Anti Melar */
    body.print-recap-mode .recap-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        box-sizing: border-box !important;
    }

    /* Teks turun ke bawah, tidak bablas ke kanan */
    body.print-recap-mode .recap-table th,
    body.print-recap-mode .recap-table td {
        box-sizing: border-box !important;
        white-space: normal !important; 
        word-wrap: break-word !important; 
    }

    /* Ulangi Kepala Tabel di setiap halaman & Anti baris terpotong */
    body.print-recap-mode .recap-table thead { display: table-header-group !important; }
    body.print-recap-mode .recap-table tr { page-break-inside: avoid !important; break-inside: avoid !important; }

    /* CSS SNIPER: Mematahkan judul "Status Kelengkapan" (Kolom 6) */
    body.print-recap-mode .recap-table th:nth-child(6) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        white-space: normal !important; 
        text-align: center !important; 
        padding: 0 5px !important;
    }
    body.print-recap-mode .recap-table td:nth-child(6) {
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        text-align: center !important;
    }
}

/* ==========================================================
   EFEK ANIMASI TOMBOL REKAP (CETAK & TUTUP)
   ========================================================== */

/* 1. Efek Saat Kursor Menyorot (Hover) - Tombol Terangkat */
.btn-success:hover {
    background-color: #218838 !important; /* Hijau gelap */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
}

.btn-danger:hover {
    background-color: #c82333 !important; /* Merah gelap */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px) !important;
}

/* 2. Efek Saat Tombol Ditekan (Active) - Tombol Amblas/Masuk */
.btn-success:active, 
.btn-danger:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Memastikan transisi animasi berjalan mulus */
.btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================
   STYLING KHUSUS TOMBOL KELUAR DI NAVBAR
   ========================================================== */
.nav-logout-item:hover {
    background-color: #f8d7da !important; /* Efek sorot warna merah muda */
}

/* ==========================================================
   DESAIN MENU PENGATURAN (ACCORDION / LACI)
   ========================================================== */
.settings-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.setting-card {
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 32, 96, 0.04);
    overflow: hidden;
    transition: all 0.3s ease;
}

.setting-card:hover {
    box-shadow: 0 5px 15px rgba(0, 32, 96, 0.08);
    border-color: #cce5ff;
}

/* Bagian Header (Yang bisa diklik) */
.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background: #ffffff;
    user-select: none;
}

.setting-title-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.setting-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.setting-text h3 { margin: 0 0 3px 0; font-size: 15px; color: var(--primary-color); }
.setting-text p { margin: 0; font-size: 12px; color: #777; line-height: 1.3; }

.setting-chevron {
    font-size: 14px;
    color: #999;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Bagian Konten (Tersembunyi by default) menggunakan Grid Animation */
.setting-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
    background: #fafbfc;
}

.setting-content-inner {
    overflow: hidden;
    /* PERBAIKAN 1: Wajib ada agar laci bisa menciut hingga 0 tanpa dihalangi konten */
    min-height: 0; 
    /* PERBAIKAN 2: Gunakan !important untuk memaksa padding jadi 0 dan menimpa style inline HTML */
    padding: 0 20px !important; 
}

/* --- STATE AKTIF (SAAT DIBUKA) --- */
.setting-card.active .setting-chevron {
    transform: rotate(-180deg);
    color: var(--primary-color);
}

.setting-card.active .setting-content {
    grid-template-rows: 1fr;
}

.setting-card.active .setting-content-inner {
    /* Kembalikan ruang lega saat laci terbuka */
    padding: 20px !important; 
    border-top: 1px dashed #eee;
}

/* ==========================================================
   GAYA UNTUK WA BROADCAST LIST
   ========================================================== */
.wa-target-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    transition: background 0.2s;
}

.wa-target-item:hover { background: #f0fdf4; }
.wa-target-info { display: flex; flex-direction: column; }
.wa-target-name { font-weight: bold; font-size: 13px; color: #333; }
.wa-target-number { font-size: 11px; color: #666; }
.btn-wa-send {
    background: #25D366; color: white; border: none; padding: 6px 12px;
    border-radius: 20px; font-size: 11px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; gap: 5px; text-decoration: none;
}

.btn-wa-send:hover { background: #128C7E; }
.btn-wa-send.sent { background: #6c757d; } /* Berubah abu-abu jika sudah diklik */

/* ==========================================================
   GAYA UNTUK BADGE NOTIFIKASI INFO
   ========================================================== */
.notif-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545; /* Warna Merah Khas Info Baru */
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white; /* Garis putih agar kontras dengan ikon lonceng */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    /* Animasi membal saat muncul */
    animation: popInBadge 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popInBadge {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Hilangkan menu opsi cetak saat dokumen benar-benar diprint ke kertas */
@media print {
    .print-controls { display: none !important; }
}

/* ==========================================================
   PERBAIKAN LACI EDITOR SOAL (COLLAPSE BUG FIX)
   ========================================================== */
/* Memaksa isi soal hilang 100% saat laci ditutup */
.question-item.collapsed > *:not(.question-header) {
    display: none !important;
}

/* Membuang sisa ruang kosong agar laci benar-benar rapat */
.question-item.collapsed {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* (Opsional) Efek animasi putar panah saat laci dibuka/tutup */
.question-header .toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}
.question-item.collapsed .question-header .toggle-icon {
    transform: rotate(-90deg);
}

/* Jaga-jaga jika laci besar (Kartu PG, Uraian) juga bocor */
.section-card.collapsed > *:not(.section-header) {
    display: none !important;
}

/* ==========================================================
   ANIMASI TOMBOL WA & TOMBOL DARURAT (KILL SWITCH)
   ========================================================== */
@keyframes pulse-wa {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3); }
}

.btn-wa-pulse {
    background: linear-gradient(145deg, #25D366, #128C7E) !important;
    color: white !important;
    border: none;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    animation: pulse-wa 2s infinite;
    transition: all 0.3s ease;
}

.btn-wa-pulse:hover {
    transform: translateY(-2px);
    animation: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.8);
}

.btn-danger-confirm {
    background: linear-gradient(145deg, #dc3545, #c82333) !important;
    color: white !important;
    border: none;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    transition: all 0.3s ease;
}

.btn-danger-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
}

/* ==========================================================
   PERBAIKAN POSISI IKON INTIP PASSWORD DI PENGATURAN
   ========================================================== */
.password-container {
    position: relative;
    display: block;
    width: 100%;
}

.password-container input {
    padding-right: 40px !important; /* Memberi ruang agar teks tidak menabrak ikon mata */
}

.toggle-password-eye {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 16px;
    z-index: 5;
}

/* --- PERBAIKAN DASHBOARD PANITIA --- */

/* Membuat Card Info menjadi lebih modern dan membulat */
.card.bg-primary-light {
    background-color: #f0f7ff !important; /* Warna biru muda yang lebih soft */
    border: 1px solid #e0eefb;
    border-radius: 15px !important; /* Membuat sudut sangat bulat dan modern */
    padding: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 32, 96, 0.05); /* Bayangan halus */
    margin-bottom: 25px;
}

/* Judul seksi dengan icon */
.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

/* Merapikan Textarea (Kotak Info) agar senada dengan Input Login */
#panitia-notif-msg {
    border-radius: 8px !important; /* Sudut membulat */
    padding: 13px 15px !important;
    border: 1px solid #d1d8e0;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 1.1;
    margin-bottom: 20px;
}

#panitia-notif-msg:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 32, 96, 0.1); /* Efek glow saat diketik */
}

/* Mengubah Tombol Kirim menjadi gaya Pill yang gagah */
.card.bg-primary-light button.btn-primary {
    border-radius: 50px !important; /* Bentuk Kapsul/Pill */
    padding: 12px 35px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    width: auto !important; /* Tidak lebar penuh agar elegan */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.card.bg-primary-light button.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 32, 96, 0.2);
}

/* ==========================================================
   PERBAIKAN FITUR KIRIM NOTIFIKASI PANITIO (GLOBAL)
   ========================================================== */

/* Styling untuk Textarea Pesan Global */
#sa-notif-msg {
    border-radius: 16px !important;
    padding: 18px !important;
    border: 1px solid #d1d8e0;
    background-color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    resize: none; 
    transition: all 0.3s ease;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); /* Sedikit kedalaman inset */
}

#sa-notif-msg:focus {
    outline: none;
    border-color: #ffc107; /* Menggunakan aksen kuning untuk Panitio */
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.15);
}

/* Mempercantik area File Input (Upload PDF) */
.file-input-wrapper {
    background: #f8f9fa;
    padding: 12px 15px !important; /* Diperbesar sedikit agar nyaman */
    border-radius: 16px !important; /* Konsisten membulat */
    border: 2px dashed #d1d8e0 !important; /* Garis putus-putus untuk area drop */
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.file-input-wrapper:hover {
    border-color: #ffc107 !important;
    background-color: #fffdf5;
}

/* Tombol Upload PDF (Pill Style) */
.file-input-label {
    background: #e0a800 !important; /* Kuning emas */
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 50px !important; /* Kapsul membulat */
    cursor: pointer !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(224, 168, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.file-input-label:hover {
    background: #ffc107 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(224, 168, 0, 0.3) !important;
}

/* Teks nama file di samping tombol upload */
#pdf-filename-display {
    font-size: 13px !important;
    color: #555 !important;
    margin-left: 15px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Dibatasi agar tidak mendesak */
}

/* Tombol Kirim Notifikasi Utama (Gaya Gagah) */
button[onclick="sendGlobalNotification('PANITIO')"] {
    width: 100% !important;
    background: linear-gradient(135deg, #ffc107, #ffb300) !important; /* Gradasi premium */
    color: #212529 !important; /* Teks gelap agar kontras dengan kuning */
    border: none !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 15px !important;
    border-radius: 50px !important; /* Bentuk Kapsul/Pill */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(255, 193, 7, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
    margin-top: 20px;
}

button[onclick="sendGlobalNotification('PANITIO')"]:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 25px rgba(255, 193, 7, 0.4) !important;
    background: linear-gradient(135deg, #ffca28, #ffc107) !important;
}

button[onclick="sendGlobalNotification('PANITIO')"]:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2) !important;
}

/* ==========================================================
   FITUR LACI (ACCORDION) UNTUK PAPAN INFORMASI
   ========================================================== */

/* Area header yang bisa diklik */
.notif-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-bottom: 5px;
    padding-right: 35px; /* Memberi ruang agar tidak menabrak tombol X (Hapus) */
}

/* Teks Judul Notifikasi */
.notif-title-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--primary-color);
    margin-left: 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Judul panjang akan dipotong dengan ... */
}

/* Ikon Panah Buka Tutup */
.notif-chevron {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #888;
    font-size: 18px;
}

/* Putar panah ke atas saat laci statusnya 'open' */
.notification-card.open .notif-chevron {
    transform: rotate(180deg);
    color: var(--primary-color);
}

/* Area isi pesan (Disembunyikan secara default) */
.notif-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

/* Tampilkan isi pesan saat laci statusnya 'open' */
.notification-card.open .notif-body {
    max-height: 800px; /* Angka besar agar muat isi pesan & tombol PDF */
    opacity: 1;
    margin-top: 15px;
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    color: #444;
    line-height: 1.6;
}

/* ==========================================================
   HEADER MOBILE TERPADU (SIDEBAR + MERK) - TEMA BIRU
   ========================================================== */
.mobile-top-bar {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 65px;
    background: var(--primary-color); /* Berubah jadi biru utama */
    z-index: 800; 
    display: flex; align-items: center; padding: 0 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Reset tombol hamburger agar menyatu dengan Top Bar */
#mobile-menu-btn {
    position: static !important; 
    background: transparent !important; 
    color: #ffffff !important; /* Warna ikon berubah jadi putih */
    border: none !important; 
    box-shadow: none !important;
    font-size: 32px; 
    padding: 0; 
    cursor: pointer;
    margin-right: 15px;
    display: flex; align-items: center;
    transition: transform 0.2s ease; 
}

#mobile-menu-btn i {
    color: #ffffff !important;
}

/* Efek mengecil saat tombol disentuh/ditekan */
#mobile-menu-btn:active { 
    transform: scale(0.85); 
}

.mobile-brand {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 5px 10px; border-radius: 8px; transition: background 0.2s;
}

/* Efek sentuh diubah menjadi putih transparan karena background sudah biru */
.mobile-brand:active { background: rgba(255, 255, 255, 0.15); } 

.mobile-brand-logo { 
    height: 35px; /* Sedikit dibesarkan agar start.png lebih jelas */
    width: auto; 
    object-fit: contain; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); /* Efek timbul pada logo */
}

.mobile-brand span { 
    font-size: 18px; 
    font-weight: 800; 
    color: #ffffff; /* Warna teks berubah jadi putih */
    letter-spacing: -0.5px; 
}

/* Pastikan konten tidak tertutup Top Bar */
@media screen and (max-width: 991px) {
    .app-content { padding-top: 85px !important; }
    .mobile-only h1 { margin-top: 0; }
}

.sidebar-overlay {
    position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); /* Warna overlay lebih gelap elegan */
    z-index: 10000; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden; opacity: 0;
    backdrop-filter: blur(3px); /* Tambahan efek blur background */
}
.sidebar-overlay.open { left: 0; visibility: visible; opacity: 1; }

.sidebar-content {
    width: 290px; height: 100%; background: #ffffff;
    box-shadow: 10px 0 25px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; position: relative;
    transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 !important; /* Sudut kanan membulat elegan */
}
.sidebar-overlay.open .sidebar-content { transform: translateX(0); }

/* PROFIL PREMIUM */
.sidebar-profile {
    padding: 45px 20px 25px; 
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); /* Gradasi halus ke bawah */
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; cursor: pointer;
}
.sidebar-profile .avatar-circle { 
    width: 80px; height: 80px; font-size: 38px; margin: 0; 
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 32, 96, 0.12); /* Bayangan terangkat */
}
.sidebar-user-info { width: 100%; }
.sidebar-user-info h3 { margin: 0 0 5px 0; font-size: 18px; font-weight: 800; color: #1e293b; line-height: 1.2; white-space: normal; }
.sidebar-user-info p { margin: 0 0 10px 0; font-size: 12px; color: #10b981; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* MENU LIST */
.sidebar-menu-list { flex: 1; overflow-y: auto; padding-bottom: 20px; }
.sidebar-divider { padding: 15px 25px 8px; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 20px;
    color: #475569; text-decoration: none; font-size: 14px; font-weight: 600;
    margin: 2px 15px; border-radius: 10px; transition: all 0.2s ease;
}
.sidebar-item:hover { background: #f8f9fa; color: var(--primary-color); transform: translateX(5px); }
.sidebar-item i { font-size: 22px; color: #94a3b8; transition: 0.2s ease; }
.sidebar-item:hover i { color: var(--primary-color); }
.sidebar-item.text-danger:hover { background: #fef2f2; color: #dc3545; }
.sidebar-item.text-danger:hover i { color: #dc3545; }

.stat-box { 
    background: #ffffff; 
    border: 1px solid #eef0f5; 
    border-radius: 10px; 
    text-align: center; 
    padding: 10px 2px; /* Padding dikurangi agar konten muat */
    transition: all 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); 
    overflow: hidden; /* Mencegah konten keluar kotak */
}

.stat-box span { 
    display: block; 
    font-size: 18px; /* Ukuran angka disesuaikan */
    font-weight: 800; 
    color: #1e293b; 
    margin-bottom: 2px; 
}

.stat-box small { 
    display: block; 
    font-size: 9px; /* Ukuran font label dikecilkan */
    color: #64748b; 
    font-weight: 700; 
    white-space: nowrap; /* Mencegah teks terlipat ke bawah */
    overflow: hidden; 
    text-overflow: ellipsis; /* Teks kepanjangan otomatis jadi ... */
    letter-spacing: -0.2px; /* Merapatkan jarak antar huruf */
}

/* Kotak Interaktif Khusus (Total File) */
.stat-box.clickable { background: #eef2f6; border-color: #d1e0eb; cursor: pointer; }
.stat-box.clickable span { color: var(--primary-color); }
.stat-box.clickable:hover { 
    background: var(--primary-color); 
    border-color: var(--primary-color); 
    transform: translateY(-3px); 
    box-shadow: 0 6px 15px rgba(0, 32, 96, 0.15); 
}
.stat-box.clickable:hover span, .stat-box.clickable:hover small { color: #ffffff; }

/* ==========================================================
   EFEK MELEBAR (EXPAND) NAVIGASI BAWAH (ANDROID)
   ========================================================== */
@media screen and (max-width: 991px) {
    .app-nav {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #eaeaea;
        gap: 8px; /* Jarak antar tombol */
    }

    .nav-item {
        flex: 1; /* Default: ukuran sama */
        flex-direction: row; /* Ikon dan teks menyamping */
        height: 45px;
        border-radius: 25px; /* Bentuk Kapsul */
        background: transparent;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .nav-icon { margin: 0; font-size: 22px; transition: color 0.3s; }
    
    /* Sembunyikan teks saat tidak aktif */
    .nav-label { 
        display: none; 
        font-size: 13px; 
        font-weight: 700; 
        margin-left: 8px;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* KETIKA AKTIF: Elemen melebar, background biru, teks muncul */
    .nav-item.active {
        flex: 2.5; /* Proporsi melebar */
        background: var(--primary-color);
        color: white;
    }

    .nav-item.active .nav-icon { color: white; transform: none !important; } /* Matikan efek melompat lama */
    .nav-item.active .nav-label { display: inline-block; opacity: 1; }

    /* Sembunyikan tombol hamburger jika di laptop */
    #mobile-menu-btn { display: flex; }
}

@media screen and (min-width: 992px) {
    #mobile-menu-btn { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ==========================================================
   DASHBOARD ANALITIK ADMIN
   ========================================================== */
.analytic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.a-card { background: white; padding: 20px; border-radius: 12px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #eee; transition: transform 0.2s; }
.a-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,32,96,0.08); }
.a-icon { width: 55px; height: 55px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 28px; flex-shrink: 0; }
.a-info h4 { margin: 0 0 5px 0; font-size: 26px; color: #333; font-weight: 900; }
.a-info p { margin: 0; font-size: 11px; color: #888; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }

.analytic-charts { display: flex; gap: 20px; margin-bottom: 25px; flex-wrap: wrap; }
.chart-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #eee; min-width: 300px; }
.chart-box h3 { font-size: 14px; margin-bottom: 15px; color: var(--primary-color); border-bottom: 1px dashed #eee; padding-bottom: 10px; }

@media (max-width: 768px) {
    .analytic-charts { flex-direction: column; }
    .chart-box { width: 100%; }
}

/* ==========================================================
   FACELIFT: PREMIUM ADMIN DASHBOARD (MATCHING REFERENCE IMAGE)
   ========================================================== */

/* Latar belakang khusus area dashboard agar biru keabu-abuan lembut */
.modern-dashboard-bg {
    background-color: transparent !important; /* Warna persis gambar */
    padding: 25px !important;
    border-radius: 20px;
    min-height: 100vh;
}

/* Header Welcome & Search Bar */
.dashboard-modern-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; flex-wrap: wrap; gap: 15px;
}
.welcome-text { font-size: 26px !important; font-weight: 700 !important; color: #1e293b !important; margin: 0 0 5px 0 !important; letter-spacing: -0.5px; }
.subtitle-text { margin: 0; font-size: 13px; color: #64748b; font-weight: 500; }

.header-search-tools { display: flex; align-items: center; gap: 15px; }
/* ==========================================================
   STYLE SEARCH BAR KAPSUL (PREMIUM)
   ========================================================== */
.modern-search-bar {
    background: #fff; 
    border: 1px solid #e2e8f0; 
    border-radius: 50px; /* Membuat bentuk kapsul sempurna */
    padding: 8px 18px; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
    flex: 1; /* Memastikan lebarnya melar menyesuaikan ruang */
    min-width: 220px;
    transition: all 0.3s ease;
}

/* Efek menyala saat kursor mengetik di dalam pencarian */
.modern-search-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 32, 96, 0.1);
}

.modern-search-bar i { 
    color: #94a3b8; 
    font-size: 18px; 
}

.modern-search-bar input { 
    border: none !important; 
    padding: 0 !important; 
    font-size: 13px; 
    outline: none; 
    background: transparent; 
    width: 100%; 
    box-shadow: none !important;
}

/* ==========================================================
   TOMBOL TOOLBOX (kota alat) - HANYA IKON (MINIMALIS)
   ========================================================== */

/* 1. TUKANG KAYU (Bentuk Dasar & Light Mode) */
.btn-icon-modern {
    background: transparent !important; /* HAPUS KOTAK WARNA */
    color: #002060 !important;          /* Warna Biru di Mode Terang */
    border: none !important;
    width: 42px !important;             /* Ukuran area klik tetap dipertahankan */
    height: 42px !important;            /* Agar tidak sulit ditekan di layar sentuh */
    font-size: 40px !important;         /* Sedikit dibesarkan agar ikon terlihat jelas tanpa kotak */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;        /* HAPUS BAYANGAN */
    flex-shrink: 0;
    outline: none !important;
}

/* Efek Tombol Melayang saat disorot */
.btn-icon-modern:hover {
    transform: translateY(-2px) scale(1.1) !important; /* Sedikit membesar */
    color: #ffc107 !important; /* kuning saat disorot */
    background: transparent !important;
    box-shadow: none !important;
}

.btn-icon-modern:active {
    transform: scale(0.9) !important;
}


/* ==========================================================
   2. TUKANG CAT MALAM (WARNA KHUSUS DARK MODE)
   ========================================================== */

/* Ubah ikon menjadi Putih Terang di Mode Gelap */
body.dark-mode .btn-icon-modern {
    color: #f8fafc !important; /* Putih terang */
    background: transparent !important; /* Pastikan kotak tidak muncul lagi */
    box-shadow: none !important;
}

/* Pastikan ikon tidak berubah warna jadi hitam/kuning saat mode gelap */
body.dark-mode .btn-icon-modern i {
    color: #f8fafc !important;
}

body.dark-mode .btn-icon-modern:hover {
    color: #ffffff !important; /* Putih mutlak saat disorot */
    background: transparent !important;
    box-shadow: none !important;
}

/* 1. Melucuti background kuning dan bayangan di SEMUA kondisi panel */
body.dark-mode .btn-icon-modern,
body.dark-mode .dashboard-modern-header .btn-icon-modern,
body.dark-mode .header-search-tools .btn-icon-modern,
body.dark-mode .modern-dashboard-header .btn-icon-modern {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Memaksa warna ikon obeng mutlak menjadi putih terang */
body.dark-mode .btn-icon-modern,
body.dark-mode .btn-icon-modern i,
body.dark-mode .dashboard-modern-header .btn-icon-modern i,
body.dark-mode .header-search-tools .btn-icon-modern i {
    color: #f8fafc !important; /* Putih terang elegan */
}

/* 3. Efek Hover (saat disorot) di Mode Gelap */
body.dark-mode .btn-icon-modern:hover,
body.dark-mode .dashboard-modern-header .btn-icon-modern:hover,
body.dark-mode .header-search-tools .btn-icon-modern:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px) scale(1.1) !important; /* Efek membesar memutar tetap ada */
}

/* 4. Efek Glow putih pada ikon saat disorot */
body.dark-mode .btn-icon-modern:hover i {
    color: #f8fafc !important; /* Putih */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) !important; /* Efek menyala lembut */
}

/* ==========================================================
   PERCANTIK PANEL ZONA PENGATURAN SISTEM
   ========================================================== */
/* Wadah Utama Panel */
.admin-settings-wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid #ffc107 !important; /* Aksen Kuning Panitio di atas */
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 10px 30px rgba(0, 32, 96, 0.05) !important;
}

/* Header Panel (Judul & Tombol Tutup) */
.admin-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e2e8f0;
}

.admin-settings-title {
    font-size: 16px;
    font-weight: 800;
    color: #002060;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* Tombol Tutup Bulat Merah (Kloning Gaya Sidebar) */
.btn-close-settings {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.btn-close-settings i,
.btn-close-settings svg,
.btn-close-settings path {
    font-size: 20px !important;
    color: #dc3545 !important;
    fill: #dc3545 !important;
    stroke: #dc3545 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
}

.btn-close-settings:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.btn-close-settings:hover i,
.btn-close-settings:hover svg,
.btn-close-settings:hover path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.btn-close-settings:active {
    transform: scale(0.9) !important;
}

/* Baris Kartu Atas (Top Row) */
.modern-overview-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; margin-bottom: 25px;
}
.m-card {
    background: #fff; border-radius: 16px; padding: 22px; display: flex; align-items: center; gap: 18px;
    border: 1px solid #eef0f5; box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: 0.3s;
}
.m-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.m-card .m-icon {
    width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.m-card .m-info h4 { margin: 0 0 4px 0; font-size: 24px; font-weight: 800; color: #1e293b; }
.m-card .m-info p { margin: 0; font-size: 13px; color: #64748b; font-weight: 500; }

/* Warna Ikon Presisi Gambar */
.ic-green { background: #e6f7f2; color: #34b585; } /* Light Green */
.ic-blue { background: #e8f4fa; color: #4397ce; } /* Light Blue */
.ic-teal { background: #e6f9f6; color: #3eb5a9; } /* Light Teal */
.ic-red { background: #fceceb; color: #e76c6c; } /* Light Red */
.m-card.alert-card { background: #faeceb; border-color: #fceceb; } /* Background kartu merah muda */

/* Baris Grafik (Middle Row) - TAMPILAN DESKTOP (ASLI MILIK ANDA) */
.modern-charts-wrapper {
    display: grid; 
    grid-template-columns: 1fr 1.5fr 2fr; /* Proporsi 3 Kolom di Laptop */
    gap: 20px; 
    margin-bottom: 25px;
}

/* ==========================================================
   TAMPILAN MOBILE & TABLET (MEMAKSA 2 CHART BERDAMPINGAN)
   ========================================================== */
@media (max-width: 1024px) { 
    .modern-charts-wrapper { 
        /* Di HP, paksa menjadi 2 kolom (Kiri Kanan) */
        grid-template-columns: 1fr 1fr; 
    } 
    
    /* Paksa Chart ke-3 (Top 5 Guru) untuk turun ke baris bawah dan melebar penuh */
    .modern-charts-wrapper .m-chart-box:nth-child(3) {
        grid-column: 1 / -1; 
    }
}

/* (Opsional) Penyesuaian untuk layar HP yang sangat sempit agar tidak terlalu berdesakan */
@media (max-width: 576px) {
    .modern-charts-wrapper {
        gap: 12px; /* Jarak antar kotak dikurangi sedikit */
    }
    .modern-charts-wrapper .m-chart-box {
        padding: 15px; /* Bantalan dalam kotak dikurangi agar chart lebih lega */
    }
    .small-stat-box h2 {
        font-size: 24px; /* Kecilkan sedikit font angka total user di HP */
    }
}

.m-chart-box {
    background: #fff; 
    border-radius: 16px; 
    padding: 25px; 
    border: 1px solid #eef0f5; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    
    /* --- KUNCI UTAMA ANTI OFFSIDE CHART.JS --- */
    min-width: 0; 
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.m-chart-box h3 { 
    font-size: 16px; 
    font-weight: 700; 
    color: #1e293b; 
    margin-top: 0; 
    margin-bottom: 20px; 
    flex-shrink: 0; /* Mencegah judul mengecil */
}

/* Memastikan area grafik mengambil sisa ruang yang ada dengan presisi */
.m-chart-box > div:not(.stat-inner) {
    flex: 1;
    min-height: 0;
    width: 100% !important;
}

/* Kotak Kecil Kiri (No of Users) */
.small-stat-box .stat-inner { text-align: center; margin-top: 15px; }
.big-icon-bg { background: #eef2f6; color: #466b82; width: 60px; height: 60px; border-radius: 14px; font-size: 30px; display: inline-flex; justify-content: center; align-items: center; margin-bottom: 15px; }
.small-stat-box h2 { margin: 0; font-size: 32px; font-weight: 800; color: #1e293b; }
.small-stat-box p { margin: 5px 0 0 0; font-size: 13px; color: #64748b; }

/* ==========================================================
   VISIBILITAS MENU TAMBAHAN LAPTOP VS MOBILE
   ========================================================== */

/* 1. Jika dibuka di HP (Layar < 991px): Sembunyikan menu tambahan */
@media screen and (max-width: 991px) {
    .nav-desktop-extras {
        display: none !important;
    }
}

/* 2. Jika dibuka di Laptop (Layar > 992px): Munculkan dan susun ke bawah */
@media screen and (min-width: 992px) {
    .nav-desktop-extras {
        display: flex;
        flex-direction: column;
        flex: 1; /* Mengisi sisa ruang kosong ke bawah */
    }
}

/* ==========================================================
   PERBAIKAN: TOMBOL SIDEBAR MENU & LAYOUT MANAJEMEN FILE
   ========================================================== */

/* 1. Tombol Sidebar Menempel Elegan Tanpa Background */
#mobile-menu-btn {
    position: absolute; /* Menyatu dengan arus halaman, bukan floating mengambang */
    top: 15px; 
    left: 20px;
    background: transparent !important; /* Hapus warna kotaknya */
    color: var(--primary-color) !important; /* Warna ikon menyesuaikan tema */
    border: none !important; 
    box-shadow: none !important; /* Hapus bayangannya */
    width: auto; 
    height: auto; 
    font-size: 38px; /* Ikon diperbesar agar jelas */
    padding: 0;
    z-index: 900;
}

/* Mencegah tombol sidebar menabrak judul "Editor Soal" di layar HP */
@media screen and (max-width: 991px) {
    .app-content {
        padding-top: 65px !important; /* Memberikan ruang udara khusus di atas untuk si tombol */
    }
    
    /* Menyembunyikan ikon pensil di judul HP agar lebih minimalis */
    .mobile-only h1 {
        margin-top: 5px;
    }
}

/* 2. Sinkronisasi Presisi Lebar Tombol "Buat" dan "Hapus" */
.sync-btn-width {
    flex: 0 0 65px !important; /* Lebar dikunci mutlak sama persis */
    padding: 0 !important; /* Matikan padding default agar tidak melar */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
    font-weight: 700;
    margin: 0 !important; 
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ==========================================================
   PERBAIKAN SPASI GLOBAL (MENGATASI KONTEN MEPET/TENGGELAM)
   ========================================================== */

/* 1. Mencegah Konten Tenggelam di Bawah Top Bar (Mobile) */
@media screen and (max-width: 991px) {
    .app-content {
        /* Ditarik naik ke 110px agar pas merapat di bawah Top Bar biru */
        padding-top: calc(110px + env(safe-area-inset-top, 0px)) !important; 
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Pangkas jarak kosong berlebih di atap halaman Dashboard Admin & Guru */
    .modern-dashboard-bg {
        padding-top: 10px !important; 
    }

    /* Pangkas jarak kosong di atap judul halaman lain (AI, Pengaturan, Profil) */
    .panel-header {
        margin-top: 0 !important;
        padding-top: 0 !important; /* Nol-kan agar tidak turun */
        padding-bottom: 10px !important;
    }

    /* Perataan judul di HP agar lebih natural, rata kiri, dan naik */
    .panel-header h1, .mobile-only h1 {
        text-align: left !important;
        font-size: 22px !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
}

/* 2. Memberi Ruang Napas di Atas Layar (Laptop/Desktop) */
@media screen and (min-width: 992px) {
    .app-content {
        /* Ditarik naik dari 40px menjadi 25px agar di PC tidak terlalu turun */
        padding-top: 25px !important; 
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    
    .modern-dashboard-bg {
        padding-top: 15px !important; 
    }

    .panel-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .panel-header h1 {
        text-align: left !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* 3. Mempercantik Judul Halaman (Pusat Informasi, Pengaturan, dll) */
.panel-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    /* padding-top: 10px; <-- BARIS INI KITA HAPUS AGAR TIDAK TURUN */
    position: relative;
    z-index: 5;
}

.panel-header h1 {
    margin-bottom: 0 !important; /* Membuang margin bawaan tag H1 */
    color: var(--primary-color);
    font-weight: 800;
}

/* 4. Melonggarkan Jarak Antar Kartu & Tabel */
.section-card {
    margin-bottom: 35px !important; /* Jarak antar blok utama diperlebar */
}

.card {
    margin-bottom: 25px !important;
}

/* 5. Memberi Ruang Antar Laci di Menu Pengaturan */
.settings-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Jarak antar laci pengaturan */
}
.settings-wrapper .setting-card {
    margin-bottom: 0; /* Direset karena sudah digantikan oleh gap */
}

/* 6. Penyesuaian Estetika Top Bar (Agar Logo & Hamburger Tidak Terlalu Nempel Kiri) */
.mobile-top-bar {
    padding: 0 20px !important; /* Padding sisi diperlebar */
}

.mobile-brand {
    margin-left: 10px; /* Menjauhkan teks SoAl-Hikam dari tombol garis tiga */
}

/* ==========================================================
   KEMBALIKAN JUDUL HALAMAN KE RATA TENGAH (CENTER)
   ========================================================== */
@media screen and (max-width: 991px) {
    .panel-header h1 {
        text-align: center !important;
    }
}

@media screen and (min-width: 992px) {
    .panel-header h1 {
        text-align: center !important;
    }
}

.panel-header h1 {
    text-align: center !important;
    width: 100%;
}

/* ==========================================================
   FIX FINAL: STICKY HEADER MATEMATIS (DIJAMIN PAS & RAPAT)
   ========================================================== */

/* 1. Kunci Tinggi Header Biru (Ukurannya Pasti) */
.section-header {
    position: sticky !important;
    z-index: 90 !important;
    background-color: var(--primary-color, #002060) !important; /* Pastikan background solid */
    
    /* INI KUNCINYA: Kita kunci tingginya mutlak 70px */
    height: 70px !important; 
    box-sizing: border-box !important;
    margin: 0 !important; /* Hapus semua jarak luar */
    
    /* Pemanis agar menyatu */
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

/* 2. Format Baris Filter ke Normal (Kombinasi Garis Biru Full & Sticky) */
.filter-row {
    position: sticky !important;
    z-index: 89 !important;
    background-color: #f8fafc !important; 
    
    /* 1. Gabungkan kode Flexbox agar filter tetap sejajar (Penting!) */
    display: flex !important;
    gap: 10px;
    flex-wrap: wrap;

    /* 2. Teknik menarik garis agar membentang penuh ke samping */
    margin-top: -20px !important;
    margin-left: 0px !important;  /* Menembus batas kiri */
    margin-right: 0px !important; /* Menembus batas kanan */
    margin-bottom: 0 !important; 
    
    /* 3. Memberi bantalan agar konten filter tidak menempel ke ujung layar */
    padding: 15px 20px !important; 
    
    /* 4. INI GARIS BIRU YANG ANDA MAU (Mengganti garis abu-abu sebelumnya) */
    border-bottom: none !important; 
    
    box-shadow: 0 6px 10px rgba(0,0,0,0.10) !important;
}

/* 3. Rumus Susunan Tangga HP / Mobile (FIX ANTI-PONI LUBANG KAMERA) */
@media screen and (max-width: 991px) {
    .section-header { 
        /* RUMUS BARU: Ruang Poni (min. 60px) + Konten Header (50px) = 110px.
           Ini memastikan judul menempel PRESISI di garis bawah Top Bar biru Anda.
        */
        top: calc(max(60px, env(safe-area-inset-top)) + 50px) !important; 
    }
    
    .filter-row { 
        /* RUMUS PASTI: 
           Posisi Atap (50px) + Tebal Header Biru (70px) = 120px + Ruang Poni.
        */
        top: calc(max(60px, env(safe-area-inset-top)) + 120px) !important; 
    }
}

/* 4. Rumus Susunan Tangga Laptop / PC */
@media screen and (min-width: 992px) {
    .section-header { 
        top: 0 !important; /* Menempel di atap layar */
    }
    .filter-row { 
        /* RUMUS PASTI: 0px + 70px (Tebal Header Biru) = 70px */
        top: 70px !important; 
    }
}

/* ==========================================================
   TOMBOL KAPSUL KUNING KHAS SOAL-HIKAM (#ffc107)
   ========================================================== */
.btn-kapsul-kuning {
    background-color: #ffc107 !important;
    border: 2px solid #ffc107 !important;
    color: #1e293b !important; /* Warna teks gelap kebiruan agar elegan & kontras */
    border-radius: 50px !important; /* Bentuk kapsul melengkung sempurna */
    font-weight: 700 !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease !important;
}

/* Efek saat tombol disentuh/di-hover (Sedikit lebih gelap = #e0a800) */
.btn-kapsul-kuning:hover {
    background-color: #e0a800 !important;
    border-color: #e0a800 !important;
    transform: translateY(-2px); /* Efek terangkat sedikit */
}

/* ==========================================================
   PERBAIKAN ESTETIKA TABEL DASBOR ADMIN PUSAT
   ========================================================== */

/* Pastikan TH di panel ini selalu rata tengah tanpa inline style berulang */
#panel-panitio th {
    text-align: center !important;
    vertical-align: middle;
}

/* Styling Tombol Aksi di Dalam Tabel */
.btn-action-table {
    border: none !important;
    width: 36px;
    height: 36px;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease; /* Kunci animasi hover mulus */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-action-table i {
    font-size: 20px; /* Ukuran ikon di dalam tombol */
}

/* --- EFEK HOVER TOMBOL BIRU (MATA) --- */
.btn-action-table.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}
.btn-action-table.btn-primary:hover {
    background-color: #001a4d !important; /* Sedikit lebih gelap */
    transform: translateY(-2px); /* Efek terangkat */
    box-shadow: 0 4px 8px rgba(0, 32, 96, 0.3);
}

/* --- EFEK HOVER TOMBOL KUNING SOAL-HIKAM (TEROPONG) --- */
.btn-action-table.btn-warning-soal {
    /* Gunakan kuning khas Anda (#ffc107) */
    background-color: #ffc107 !important;
    color: #1e293b !important; /* Teks/Ikon gelap agar kontras */
}
.btn-action-table.btn-warning-soal:hover {
    /* Kuning lebih gelap saat di-hover (#e0a800) */
    background-color: #e0a800 !important;
    transform: translateY(-2px); /* Efek terangkat */
    box-shadow: 0 4px 8px rgba(224, 168, 0, 0.4); /* Bayangan kuning */
}

/* ==========================================================
   PERBAIKAN JARAK ANTAR KOMPONEN DI MOBILE
   ========================================================== */
@media screen and (max-width: 991px) {
    /* 1. Kurangi jarak bawah kartu Manajemen File */
    .section-card {
        margin-bottom: 0px !important; 
    }

    /* 2. Rapatkan judul "Editor Soal" ke atas */
    .panel-header {
        margin-top: 5px !important;
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }

    /* 3. Jika "Editor Soal" menggunakan tag h1 langsung tanpa panel-header */
    h1 {
        margin-top: 0px !important;
        margin-bottom: 10px !important;
    }

    /* 4. Pastikan padding area kerja tidak menambah beban jarak */
    .items-container {
        padding: 15px !important;
    }
}

/* ==========================================================
   LACI (ACCORDION) PROGRES DASHBOARD GURU
   ========================================================== */
.prog-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.prog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* Panah Berputar */
.prog-chevron {
    color: var(--primary-color);
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Konten Diagram (Tersembunyi by default) */
.prog-body {
    display: none; /* Sembunyikan isi laci */
    padding-top: 15px;
    margin-top: 12px;
    border-top: 1px dashed #e2e8f0;
    animation: fadeInProg 0.3s ease-out;
}

/* --- KETIKA LACI DIBUKA (.open) --- */
.prog-card.open {
    border-color: #b8daff;
    box-shadow: 0 4px 15px rgba(0,32,96,0.05);
}
.prog-card.open .prog-chevron {
    transform: rotate(90deg); /* Panah menghadap ke bawah */
}
.prog-card.open .prog-body {
    display: block; /* Munculkan isi laci */
}

@keyframes fadeInProg {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   TOMBOL TOGGLE DESKRIPSI SOAL (COLLAPSIBLE)
   ========================================================== */
.btn-toggle-desc {
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    color: #6c757d;
    padding: 10px 15px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.btn-toggle-desc:hover {
    background: #eef2f6;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-toggle-desc.active {
    background: #eef2f6;
    border-color: var(--primary-color);
    border-style: solid;
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Pembungkus Quill Deskripsi (Sembunyi by default) */
.desc-wrapper {
    display: none;
    margin-bottom: 15px;
    animation: fadeInProg 0.3s ease-out;
}

.desc-wrapper.show {
    display: block;
}

/* ==========================================================
   PERBAIKAN BUG: TOMBOL GAMBAR & Jarak Antar Elemen
   ========================================================== */

/* 1. Hilangkan garis putus-putus dan padding raksasa di dalam editor soal (dari Part 1) */
.question-item .file-input-wrapper {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

/* 2. Kembalikan ukuran tombol "Gambar Soal" ke ukuran wajar (dari Part 1) */
.question-item .file-input-label {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 3. Khusus tombol Kamera Opsi (A, B, C, D, E) agar kotak dan sejajar sempurna (dari Part 1) */
.option-item .file-input-label {
    padding: 0 !important; /* Reset padding agar seragam */
    margin: 0 !important;
    height: 38px !important; /* Disamakan presisi dengan tinggi kotak input teks */
    width: 38px !important; /* Jadikan kotak sempurna */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    font-size: 16px !important; /* Sesuaikan ukuran ikon */
}

/* 4. Rapatkan jarak antar baris opsi A, B, C, D, E (dari Part 1) */
.option-item {
    margin-bottom: 8px !important;
}

.option-item input.pg-option {
    height: 38px !important; /* Mengunci tinggi input agar serasi dengan tombol kamera */
    padding: 8px 12px !important;
}

/* --- PERBAIKAN BARU UNTUK JARAK MEPET ANTARA GAMBAR SOAL & OPSI --- */

/* 5. Tambahkan margin bawah ke pembungkus Gambar Soal agar ada jarak dengan opsi */
.question-item .item-image-wrapper {
    margin-bottom: 15px !important; /* Beri jarak vertikal di sini */
    display: block;
}

/* ==========================================================================
   UI/UX POLISH: TAMPILAN PROFESIONAL & MODERN (FINAL)
   ========================================================================== */

/* ---------------------------------------------------
   1. PERBAIKAN PANEL MANAJEMEN FILE & MODE ADMIN
   --------------------------------------------------- */
/* Melembutkan warna dropdown Admin agar tidak terlalu menyilaukan */
#select-guru-target {
    background-color: #fffdf5 !important; /* Kuning sangat pudar */
    border: 1px solid #ffc107 !important;
    color: #002060 !important;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(255, 193, 7, 0.1);
}

/* Merapikan sejajaran Dropdown Pilih File dan Tombol Tong Sampah */
#file-dropdown-wrapper > div {
    display: flex;
    gap: 10px;
    align-items: center; /* Memastikan sejajar tengah secara vertikal */
}

#my-files-select {
    height: 42px !important; /* Mengunci tinggi dropdown */
    border-radius: 8px;
    border: 1px solid #ced4da;
    margin: 0 !important;
}

/* Mengubah tombol hapus merah menjadi kotak sempurna yang proporsional */
.sync-btn-width {
    height: 42px !important;
    width: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* ---------------------------------------------------
   2. PERBAIKAN KARTU SOAL (LEBIH BERSIH, MINIMALIS)
   --------------------------------------------------- */
/* Background putih bersih dengan border tipis dan shadow lembut */
.question-item {
    background: #ffffff !important; 
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* Header pertanyaan (Tulisan PG No. 1 dll) */
.question-header {
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 12px !important;
    margin-bottom: 15px !important;
}

/* Label teks "Pertanyaan:" dsb */
.question-item > div[style*="color:#d63384"],
.question-item > div[style*="color:#555"] {
    font-size: 12px !important;
    color: #64748b !important; /* Abu-abu kebiruan modern */
    margin-bottom: 8px !important;
    margin-top: 10px !important;
}

/* ---------------------------------------------------
   3. PERBAIKAN TOMBOL DESKRIPSI (GAYA LACI MODERN)
   --------------------------------------------------- */
.btn-toggle-desc {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    color: #64748b !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.btn-toggle-desc:hover, .btn-toggle-desc.active {
    background: #f0f7ff !important;
    border-color: #93c5fd !important;
    border-style: solid !important;
    color: #002060 !important;
}

/* ---------------------------------------------------
   4. PERBAIKAN EDITOR QUILL (TIDAK KAKU)
   --------------------------------------------------- */
.ql-toolbar.ql-snow {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 12px !important;
}

.quill-container {
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}

/* ---------------------------------------------------
   5. BAR KUNCI JAWABAN & TOMBOL AI (ELEGAN)
   --------------------------------------------------- */
.question-item > div[style*="background:#e3f2fd"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    margin-top: 20px !important;
}

.item-kunci {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    height: 38px !important;
    font-size: 13px !important;
}

/* Tombol AI ungu yang lebih nyambung */
button[onclick^="solveWithAI"] {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border: none !important;
    height: 38px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(79, 70, 229, 0.2) !important;
}
button[onclick^="solveWithAI"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3) !important;
}

/* ==========================================================================
   ULTIMATE UI POLISH: SENTUHAN LEVEL ENTERPRISE
   ========================================================================== */

/* 1. SCROLLBAR MODERN (Sleek & Rounded) */
::-webkit-scrollbar {
    width: 8px; /* Lebar scrollbar vertikal */
    height: 8px; /* Tinggi scrollbar horizontal */
}
::-webkit-scrollbar-track {
    background: #f8fafc; /* Warna jalur scrollbar */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Warna gagang scrollbar */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Saat disorot mouse */
}

/* 2. MODAL & POP-UP (Glassmorphism & Soft Shadow) */
.modal-overlay {
    backdrop-filter: blur(5px); /* Efek kaca buram ala iOS */
    -webkit-backdrop-filter: blur(5px);
    background: rgba(15, 23, 42, 0.4) !important; /* Warna gelap navy transparan */
}
.modal-box {
    border-radius: 20px !important; /* Sudut lebih melengkung */
    border: none !important;
    padding: 30px 25px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}
.modal-icon {
    font-size: 45px !important;
    margin-bottom: 15px !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* 3. KOTAK KOSONG / PLACEHOLDER (Lebih Lembut & Mengundang) */
.placeholder-state {
    background: #f8fafc !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 60px 20px !important;
    color: #64748b !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.placeholder-icon {
    font-size: 60px !important;
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}

/* 4. MENU TITIK TIGA (ACTION MENU DROPDOWN) */
.menu-content {
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 32, 96, 0.1) !important;
    border: 1px solid #f1f5f9 !important;
    padding: 8px 0 !important;
}
.menu-content button {
    padding: 10px 20px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    transition: background 0.2s, padding-left 0.2s !important;
}
.menu-content button:hover {
    background: #f0f7ff !important;
    padding-left: 25px !important; /* Efek geser teks sedikit saat di-hover */
}

/* 5. INPUT, SELECT, DAN WARNA TEKS (Eye-Care & Konsistensi) */
body {
    color: #334155; /* Hitam diubah jadi Slate Dark (lebih nyaman dibaca lama) */
}
input.form-control, select.form-control, textarea.form-control {
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 500;
}
input.form-control::placeholder, textarea.form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: 400;
}

/* Mempercantik Badge Nomor Soal di Editor */
.q-num-badge {
    background: var(--primary-color) !important;
    color: white !important;
    padding: 3px 10px !important;
    border-radius: 12px !important; /* Kapsul membulat */
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 32, 96, 0.2);
}

/* ==========================================================================
   UI/UX POLISH: HEADER MOBILE (TOMBOL SIDEBAR & LOGO)
   ========================================================================== */

/* 1. Perkecil bingkai tombol dan persempit jarak ke logo */
button[onclick*="toggleSidebar"],
.sidebar-toggle-btn {
    padding: 4px 8px !important; /* Mengurangi area sentuh yang berlebih */
    margin-right: -7px !important; /* MERAPATKAN jarak antara tombol dan logo */
    margin-left: 0 !important;
    background: transparent !important; /* Memastikan background bersih */
    border: none !important;
}

/* 2. Perkecil ikon garis tiga (Hamburger Menu) */
button[onclick*="toggleSidebar"] i,
button[onclick*="toggleSidebar"] svg,
.sidebar-toggle-btn i {
    font-size: 26px !important; /* Ukuran ideal standar aplikasi modern (Mengecil dari aslinya) */
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. Hilangkan gap/margin bawaan dari kontainer logo jika ada */
.app-brand, 
.logo-container,
header > div:first-child {
    gap: 10px !important; /* Memaksa jarak flexbox menjadi rapat */
    margin-left: 0 !important;
}

/* (Opsional) Sesuaikan ukuran ikon lampu/logo aplikasinya agar proporsional dengan menu */
.app-brand img,
.logo-container img {
    height: 28px !important; /* Sesuaikan jika logonya terasa masih terlalu besar */
    width: auto !important;
}

/* ==========================================================================
   NOTCH & PUNCH HOLE FIX (KHUSUS LAYAR HP/MOBILE)
   ========================================================================== */

/* Menargetkan layar HP (max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Targetkan class .mobile-top-bar sesuai dengan HTML Anda */
    .mobile-top-bar { 
        padding-top: max(60px, env(safe-area-inset-top)) !important;
        
        display: flex !important;
        align-items: center !important;
        
        height: auto !important; 
        min-height: 110px !important; 
    }
}

/* ==========================================================================
   UI POLISH: AUTOSAVE INDICATOR MODERN (KANAN ATAS & SPINNER KEKINIAN)
   ========================================================================== */

/* 1. Posisi Utama dan Desain Kapsul Kaca (Glassmorphism) */
.autosave-status {
    position: fixed !important;
    top: 40px !important; /* DITURUNKAN: Sebelumnya 20px, sekarang 40px agar lega di laptop */
    right: 20px !important;
    left: auto !important;
    transform: translateY(-20px) !important;
    
    /* ... (kode background, shadow, dll di bawahnya tetap sama) ... */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid #e2e8f0;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569;
    z-index: 99999 !important;
    
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. Animasi Muncul Lembut */
.autosave-status.visible {
    opacity: 1 !important;
    transform: translateY(0) !important; /* Turun dan muncul */
}

/* 3. Desain Lingkaran Loading (Spinner) */
.autosave-status .spinner {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #cbd5e1 !important;
    border-top-color: #3b82f6 !important; /* Bagian atas biru untuk efek muter */
    border-radius: 50% !important;
    animation: spin-autosave 0.8s linear infinite !important;
    display: none !important; /* Sembunyikan saat sedang tidak ngesave */
}

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

/* 4. State: SEDANG MENYIMPAN (Munculkan Spinner, Warna Biru) */
.autosave-status.saving .spinner {
    display: block !important;
}
.autosave-status.saving {
    border-color: #bfdbfe !important;
    color: #2563eb !important;
}

/* 5. State: BERHASIL DISIMPAN (Spinner Hilang, Warna Hijau) */
.autosave-status.saved {
    border-color: #bbf7d0 !important;
    color: #16a34a !important;
}
.autosave-status.saved .spinner {
    display: none !important;
}

/* 6. Penyesuaian Khusus HP (Autosave di atas tombol Dark Mode) */
@media screen and (max-width: 768px) {
    .autosave-status {
        top: max(30px, env(safe-area-inset-top)) !important; 
        right: 15px !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   UI POLISH: SIDEBAR MOBILE PREMIUM (ANTI HAMBAR)
   ========================================================================== */

/* 1. Kontainer Utama Sidebar */
.sidebar-content {
    background: #ffffff !important;
    box-shadow: 5px 0 25px rgba(0, 32, 96, 0.15) !important; /* Bayangan biru elegan */
}

/* 2. Tombol Close Sidebar pindah ke baris 5160 */

/* 3. Header Profil (Diberi background berbeda agar terpisah dari menu) */
.sidebar-profile {
    background: linear-gradient(145deg, #f8fafc, #e2e8f0) !important;
    padding: 35px 20px 20px !important;
    border-bottom: 1px solid #cbd5e1 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}
.sidebar-profile:active { background: #e2e8f0 !important; }

/* Lingkaran Avatar ditekankan */
#sidebar-avatar {
    width: 75px !important; 
    height: 75px !important; 
    font-size: 35px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 32, 96, 0.1) !important;
    margin: 0 auto 12px auto !important;
}
#sidebar-name { 
    color: #002060 !important; 
    font-weight: 800 !important; 
    font-size: 18px !important;
    margin-bottom: 5px !important;
}
#sidebar-wa { color: #059669 !important; font-weight: 600 !important; font-size: 12px !important; }

/* 4. Teks Pembatas Section (AKTIVITAS SAYA, SISTEM) */
.sidebar-divider {
    padding: 20px 20px 5px 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* 5. Menu List (Efek Kapsul saat ditekan/dilihat) */
.sidebar-menu-list {
    padding: 10px 0 20px 0 !important;
}
.sidebar-item {
    display: flex !important; 
    align-items: center !important; 
    gap: 15px !important;
    padding: 12px 20px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin: 2px 15px !important; /* Memberi jarak kanan kiri agar membentuk kapsul */
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.sidebar-item i {
    font-size: 22px !important;
    color: #94a3b8 !important; /* Warna ikon redup standar */
    transition: all 0.2s ease !important;
}

/* Saat Menu Ditekan / Aktif */
.sidebar-item:hover, .sidebar-item:active, .sidebar-item.active {
    background: #eff6ff !important; /* Biru sangat muda */
    color: #002060 !important;
}
.sidebar-item:hover i, .sidebar-item:active i, .sidebar-item.active i {
    color: #002060 !important; /* Ikon ikut jadi biru pekat */
}

/* Khusus tombol Logout (Warna Merah) */
.sidebar-item.text-danger { color: #dc3545 !important; }
.sidebar-item.text-danger:hover, .sidebar-item.text-danger:active {
    background: #fef2f2 !important;
    color: #dc3545 !important;
}
.sidebar-item.text-danger i { color: #fca5a5 !important; }
.sidebar-item.text-danger:hover i { color: #dc3545 !important; }

/* 6. Kotak Statistik (Lebih Timbul & Rapi) */
.sidebar-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px !important;
    gap: 8px; /* Jarak antar kotak sedikit dikurangi agar lega */
    padding: 5px 15px 15px 15px !important;;
    border-bottom: 1px dashed #f0f0f0;
}

/* ==========================================
   GAYA KHUSUS: KOTAK KREDIT AI (LOAD BALANCER)
   Membuat kotak terakhir membentang penuh & bergaya kuning emas
   ========================================== */
#mobile-sidebar .sidebar-stats-grid .stat-box:last-child {
    /* 1. KUNCI: Membentang penuh 3 kolom (panjang 3x lipat) */
    grid-column: 1 / -1;
    /* 2. WARNA LATAR: Kuning Emas Elegan */
    background: linear-gradient(135deg, #fff8e1, #ffecb3) !important;
    /* 3. BORDER & BAYANGAN: Emas Berkilau */
    border: 2px solid #ffc107 !important;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
    /* 4. TATA LETAK: Menyamping (Horizontal) agar Proporsional */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px !important; 
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Efek Hover */
#mobile-sidebar .sidebar-stats-grid .stat-box:last-child:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.7) !important;
    cursor: pointer;
}

/* Gaya Angka Kredit AI */
#mobile-sidebar .sidebar-stats-grid .stat-box:last-child span {
    margin-bottom: 0 !important;
    font-size: 26px !important;
    font-weight: 800;
    color: #e65100 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

/* Gaya Teks "Kredit AI" */
#mobile-sidebar .sidebar-stats-grid .stat-box:last-child small {
    font-size: 12px !important;
    font-weight: 700;
    color: #bf360c !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.stat-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 15px 5px !important;
    text-align: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}
.stat-box:active {
    transform: scale(0.95) !important;
    border-color: #93c5fd !important;
}
.stat-box span {
    display: block !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--primary-color) !important; /* Angka warna biru aplikasi */
    line-height: 1 !important;
    margin-bottom: 5px !important;
}
.stat-box small {
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ==========================================================
   DASHBOARD GURU: KARTU DENGAN MINI CHART (RESPONSIF)
   ========================================================== */
.m-card-with-chart {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    /* Pastikan padding cukup agar tidak berdesakan */
    padding: 20px !important; 
    gap: 10px; /* Jarak minimum antara info dan chart */
}

/* Membungkus ikon dan info agar tidak tertindih chart */
.m-card-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; /* Biarkan dia mengambil sisa ruang */
    min-width: 0; /* Mencegah overflow teks */
}

.mini-chart-container {
    width: 65px; /* Sedikit lebih kecil agar lebih aman di semua layar */
    height: 65px; 
    position: relative;
    flex-shrink: 0; /* JANGAN biarkan chart mengecil/gepeng */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
}

@media screen and (max-width: 360px) { /* Untuk HP layar sangat kecil */
    .mini-chart-container {
        width: 50px; 
        height: 50px;
    }
    .m-card-left { gap: 10px; }
}

/* ==========================================================
   LAYOUT DASHBOARD ADMIN (3 CHART LINGKARAN - ANTI MEMANJANG)
   ========================================================== */

/* 1. Tampilan Desktop (1 Baris - 3 Kolom Sama Rata) */
.modern-charts-wrapper-admin {
    display: grid; 
    /* KUNCI 1: Karena semua bulat, jadikan 3 kolom sama lebar (1fr 1fr 1fr) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    margin-bottom: 25px;
}

/* KUNCI 2: Pangkas tinggi kanvas bawaan HTML (dari 180px jadi 120px) agar kotak lebih ceper */
.modern-charts-wrapper-admin .m-chart-box > div:not(.stat-inner) {
    height: 120px !important; 
    min-height: 120px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Rapatkan dan tengahkan judul chart */
.modern-charts-wrapper-admin .m-chart-box h3 {
    text-align: center;
    margin-bottom: 10px !important;
}

/* 2. Tampilan Layar HP & Tablet (PAKSA 3 KOLOM MICRO-UI KOTAK PERSEGI) */
@media (max-width: 1024px) { 
    .modern-charts-wrapper-admin { 
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Paksa 3 kolom sama rata */
        gap: 6px !important; /* Jarak antar kotak sangat dirapatkan */
        overflow: hidden !important; 
        padding-bottom: 0 !important;
    } 

    /* KUNCI PERBAIKAN: Kunci tinggi kotak agar jadi PERSEGI dan tidak memanjang */
    .modern-charts-wrapper-admin .m-chart-box {
        padding: 10px 5px !important;
        width: 100% !important;
        height: 150px !important; /* KUNCI: Kunci tinggi kotak mutlak */
        min-height: 110px !important; /* KUNCI: Cegah melar ke bawah */
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important; /* Konten ngumpul di tengah, bukan direnggangkan */
        align-items: center !important;
    }

    /* Kecilkan font judul grafik agar muat di kotak yang sempit */
    .modern-charts-wrapper-admin .m-chart-box h3 {
        font-size: 9.5px !important;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        line-height: 1.1;
        letter-spacing: -0.3px; 
        text-align: center;
        width: 100%;
    }

    /* Sembunyikan teks sub-judul berwarna abu-abu khusus di HP */
    .modern-charts-wrapper-admin .m-chart-box h3 span {
        display: none !important; 
    }

    /* Ruang khusus kanvas chart di dalam kotak persegi */
    .modern-charts-wrapper-admin .m-chart-box > div:not(.stat-inner) {
        height: 70px !important;
        min-height: 70px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Netralkan sisa pengaturan lama */
    #box-top-guru {
        grid-column: auto !important; 
    }
}

/* ==========================================================
   TOMBOL CARI DI DALAM SEARCH BAR (DASHBOARD ADMIN)
   ========================================================== */
.btn-search-trigger {
    background: var(--primary-color);
    color: #ffffff;
    border: none;
    border-radius: 50px; /* Mengikuti bentuk kapsul search bar */
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 32, 96, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 8px;
    flex-shrink: 0; /* Mencegah tombol mengecil/gepeng */
}

.btn-search-trigger:hover {
    background: #001540; /* Biru lebih gelap saat disorot */
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 32, 96, 0.3);
}

.btn-search-trigger:active {
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0, 32, 96, 0.1);
}

/* ==========================================================
   TRANSPARANSI KARTU PROFIL & TENTANG APLIKASI (MODE TERANG/GLOBAL)
   ========================================================== */

/* 1. Transparansi Kartu Utama di Halaman "Tentang Aplikasi" */
.about-hero {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important; /* Menghilangkan garis biru di bawah jika ada */
}

/* Transparansi lingkaran di belakang logo Bunglon */
.bunglon-logo-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Transparansi latar belakang kotak kutipan (Quotes) */
#panel-about div[style*="background: #fff3cd"] {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #cbd5e1 !important; /* Bingkai abu-abu tipis agar rapi */
    border-left: 4px solid #ffc107 !important; /* Tetap pertahankan garis kuning di kiri */
}

/* 2. Transparansi Kartu Utama di Halaman Akun/Profil */
.profile-header {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Transparansi kotak Pilihan Ikon Profil agar serasi */
.avatar-selector-grid {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 2px dashed #cbd5e1 !important; /* Garis putus-putus tipis yang elegan */
}



/* 2. Membuat kapsul pencarian (Search Bar) menjadi bening juga */
.modern-search-bar {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important; /* Jika Anda ingin benar-benar "melayang" tanpa garis */
}

/* 3. Menghapus garis kotak (border) di dalam kapsul pencarian */
.modern-search-bar input[type="text"],
.modern-search-bar input {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Memastikan ikon kaca pembesar tidak redup di mode terang */
.modern-search-bar i.ph-magnifying-glass {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* ==========================================================
   FIX: NORMALIZE KETEBALAN FONT TOMBOL NOTIFIKASI (GLOBAL)
   Berlaku untuk Mode Terang & Mode Gelap
   ========================================================== */

button[onclick*="sendGlobalNotification"],
.file-input-label {
    font-weight: 600 !important; /* Standar/Medium (Tidak lagi ekstra tebal) */
    letter-spacing: 0.5px !important; /* Sedikit renggang agar teks lebih elegan */
}






















/* ==========================================================
   FITUR PREFERENSI: DARK MODE & FONT SIZE
   ========================================================== */

/* --- UKURAN FONT (KHUSUS TAB EDITOR SAJA) --- */
body.font-small #panel-editor .ql-editor { font-size: 12px !important; }
body.font-normal #panel-editor .ql-editor { font-size: 14px !important; } 
body.font-large #panel-editor .ql-editor { font-size: 18px !important; line-height: 1.6 !important; }

@media print {
    .ql-editor { font-size: 11pt !important; line-height: normal !important; }
}

/* ==========================================================
   DARK MODE (MODE GELAP) - FULL KOMPREHENSIF & KONTRAST TINGGI
   ========================================================== */
body.dark-mode {
    background-color: #0f172a !important; 
    color: #e2e8f0 !important; 
}

/* 1. Latar Belakang Komponen Utama */
body.dark-mode .app-nav,
body.dark-mode .editor-panel,
body.dark-mode .section-card,
body.dark-mode .card,
body.dark-mode .setting-card,
body.dark-mode .m-card,
body.dark-mode .admin-settings-wrapper,
body.dark-mode .modal-box,
body.dark-mode .timer-bar,
body.dark-mode .sidebar-content,
body.dark-mode .sidebar-profile,
body.dark-mode .modern-search-bar {
    background: #1e293b !important; 
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* 2. Penyesuaian Teks Judul & Teks Penekanan */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode .section-title, body.dark-mode p, 
body.dark-mode label, body.dark-mode .config-title,
body.dark-mode .welcome-text, body.dark-mode .brand-text,
body.dark-mode .sidebar-name, body.dark-mode .setting-text h3,
body.dark-mode .m-info p {
    color: #f8fafc !important; 
}

body.dark-mode .subtitle-text,
body.dark-mode .text-muted,
body.dark-mode small,
body.dark-mode .sidebar-wa,
body.dark-mode .help-box {
    color: #94a3b8 !important; 
}

/* 3. Form, Input, Select, Textarea */
body.dark-mode input[type="text"], 
body.dark-mode input[type="number"], 
body.dark-mode input[type="password"], 
body.dark-mode input[type="datetime-local"], 
body.dark-mode select, 
body.dark-mode textarea,
body.dark-mode .form-control {
    background-color: #0f172a !important; 
    color: #f8fafc !important;
    border-color: #475569 !important; /* Hanya ubah warna */
}
body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
    color: #64748b !important;
}

/* 4. EDITOR QUILL (Alat Ketik) */
body.dark-mode .ql-toolbar.ql-snow {
    background: #334155 !important;
    border-color: #475569 !important;
}
body.dark-mode .quill-container, 
body.dark-mode .ql-container.ql-snow {
    background: #1e293b !important;
    border-color: #475569 !important;
}
body.dark-mode .ql-editor { color: #f8fafc !important; }
body.dark-mode .ql-editor.ql-blank::before { color: #64748b !important; }
body.dark-mode .ql-snow .ql-stroke { stroke: #cbd5e1 !important; }
body.dark-mode .ql-snow .ql-fill { fill: #cbd5e1 !important; }
body.dark-mode .ql-snow .ql-picker { color: #cbd5e1 !important; }
body.dark-mode .ql-snow .ql-picker-options { 
    background-color: #1e293b !important; 
    border-color: #475569 !important;
}
body.dark-mode .ql-snow .ql-picker-item { color: #e2e8f0 !important; }
body.dark-mode .ql-snow .ql-picker-item:hover { color: #ffc107 !important; }

/* 5. NAVIGASI AKTIF SIDEBAR (Dipisah Tukang Kayu & Cat) */
.sidebar-item:hover, .sidebar-item.active { border-right: 3px solid transparent; } /* Tukang Kayu */
body.dark-mode .sidebar-item { color: #cbd5e1 !important; }
body.dark-mode .sidebar-item:hover, 
body.dark-mode .sidebar-item.active {
    background: #1e293b !important;
    color: #ffc107 !important; 
    border-right-color: #ffc107 !important; /* Hanya ubah warna */
}
body.dark-mode .sidebar-item:hover i, 
body.dark-mode .sidebar-item.active i { color: #ffc107 !important; }

/* 6. Dashboard Tabel Admin & List Guru */
body.dark-mode table.table td, 
body.dark-mode table.table th {
    color: #e2e8f0 !important;
    border-bottom-color: #334155 !important;
}
body.dark-mode tr.guru-row {
    background: #1e293b !important;
    border-bottom-color: #0f172a !important;
}
body.dark-mode tr.guru-row:hover { background: #334155 !important; }
body.dark-mode tr.file-row { background: #0f172a !important; }
body.dark-mode .guru-file-item { border-bottom-color: #334155 !important; }

/* 7. SIHIR PENGGANTI WARNA INLINE STYLE */
body.dark-mode [style*="color: #1e293b"]:not(.paper-sheet *),
body.dark-mode [style*="color:#1e293b"]:not(.paper-sheet *),
body.dark-mode [style*="color: #002060"]:not(.paper-sheet *),
body.dark-mode [style*="color:#002060"]:not(.paper-sheet *),
body.dark-mode [style*="color: #333"]:not(.paper-sheet *),
body.dark-mode [style*="color:#333"]:not(.paper-sheet *),
body.dark-mode [style*="color: #444"]:not(.paper-sheet *),
body.dark-mode [style*="color:#444"]:not(.paper-sheet *),
body.dark-mode [style*="color: #555"]:not(.paper-sheet *),
body.dark-mode [style*="color:#555"]:not(.paper-sheet *) {
    color: #f8fafc !important;
}
body.dark-mode [style*="color: #888"]:not(.paper-sheet *),
body.dark-mode [style*="color:#888"]:not(.paper-sheet *),
body.dark-mode [style*="color: #666"]:not(.paper-sheet *),
body.dark-mode [style*="color:#666"]:not(.paper-sheet *),
body.dark-mode [style*="color: #64748b"]:not(.paper-sheet *),
body.dark-mode [style*="color:#64748b"]:not(.paper-sheet *) {
    color: #94a3b8 !important;
}

/* 8. PENGECUALIAN MUTLAK: TAB PREVIEW & CETAK */
body.dark-mode #panel-preview { background-color: #0f172a !important; }
body.dark-mode .paper-sheet, 
body.dark-mode #key-only-sheet {
    background-color: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.8) !important;
}
body.dark-mode .paper-sheet *, 
body.dark-mode #key-only-sheet *,
body.dark-mode .paper-sheet .ql-editor,
body.dark-mode .paper-sheet .ql-editor * {
    color: #000000 !important; 
    -webkit-text-fill-color: #000000 !important; 
    text-shadow: none !important;
}
body.dark-mode .paper-sheet table, 
body.dark-mode .paper-sheet td, 
body.dark-mode .paper-sheet th {
    border-color: #000000 !important;
    color: #000000 !important;
}

/* ==========================================================
   PERBAIKAN WARNA TEKS LACI (ACCORDION)
   ========================================================== */
body.dark-mode .setting-header, body.dark-mode .setting-text h3, body.dark-mode .setting-title-wrap { color: #f8fafc !important; }
body.dark-mode .setting-text p { color: #94a3b8 !important; }
body.dark-mode .setting-chevron { color: #ffc107 !important; }
body.dark-mode .setting-icon { background-color: #334155 !important; color: #60a5fa !important; }
body.dark-mode .notif-accordion-header, body.dark-mode .notif-title-text, body.dark-mode .notif-body { color: #f8fafc !important; }
body.dark-mode .notif-chevron { color: #ffc107 !important; }
body.dark-mode .print-controls { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .print-controls label, body.dark-mode .print-controls h4 { color: #f8fafc !important; }

/* ==========================================================
   PERBAIKAN BACKGROUND LACI PENGATURAN
   ========================================================== */
body.dark-mode .setting-header { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .setting-header:hover { background-color: #334155 !important; }
body.dark-mode .setting-content, body.dark-mode .setting-content-inner { background-color: #0f172a !important; border-color: #334155 !important; }
body.dark-mode .setting-card { background-color: transparent !important; }

/* ==========================================================
   PERBAIKAN PUSAT INFORMASI & TENTANG APLIKASI
   ========================================================== */
body.dark-mode #notification-list > div { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode #notification-list > div span, body.dark-mode #notification-list > div p, body.dark-mode #notification-list > div h3, body.dark-mode #notification-list > div strong { color: #f8fafc !important; }
body.dark-mode #notification-list > div small { color: #94a3b8 !important; }

body.dark-mode .feature-item { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; }
body.dark-mode .feature-item h4 { color: #ffc107 !important; }
body.dark-mode .feature-item p { color: #cbd5e1 !important; }
body.dark-mode .btn-action { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode .btn-action:hover { background-color: #334155 !important; }
body.dark-mode .btn-action .main-text { color: #f8fafc !important; }
body.dark-mode .btn-action .sub-text { color: #ffffff !important; opacity: 0.85 !important; font-weight: 500 !important; }
body.dark-mode .btn-action .btn-icon, body.dark-mode .btn-action i { color: #ffffff !important; }

body.dark-mode #panel-about div[style*="background: #fff3cd"], body.dark-mode #panel-about div[style*="background:#fff3cd"] { 
    background-color: #1e293b !important; 
    border-color: #334155 !important; 
    border-left-color: #ffc107 !important; 
}
body.dark-mode #panel-about div[style*="background: #fff3cd"] p, body.dark-mode #panel-about div[style*="background: #fff3cd"] span { color: #cbd5e1 !important; }

/* ==========================================================
   PERBAIKAN BUG "DOUBLE BACKGROUND"
   ========================================================== */
body.dark-mode .editor-panel, body.dark-mode .modern-dashboard-bg, body.dark-mode .notification-container, body.dark-mode .editor-layout, body.dark-mode .editor-workarea, body.dark-mode .login-screen {
    background-color: transparent !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important;
}
body.dark-mode .admin-settings-wrapper { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; border-top-color: #ffc107 !important; }

/* ==========================================================
   PERBAIKAN BACKGROUND PUTIH MEMBANDEL
   ========================================================== */
body.dark-mode #dynamic-progress-list > div, body.dark-mode #profile-file-list > li, body.dark-mode [style*="background: white"]:not(.paper-sheet):not(.paper-sheet *), body.dark-mode [style*="background: #fff"]:not(.paper-sheet):not(.paper-sheet *), body.dark-mode [style*="background:#fff"]:not(.paper-sheet):not(.paper-sheet *), body.dark-mode [style*="background: #ffffff"]:not(.paper-sheet):not(.paper-sheet *) {
    background-color: #1e293b !important; border-color: #334155 !important;
}
body.dark-mode #dynamic-progress-list > div span, body.dark-mode #dynamic-progress-list > div small, body.dark-mode #profile-file-list > li span, body.dark-mode #profile-file-list > li small { color: #cbd5e1 !important; }

body.dark-mode .about-hero { background-color: transparent !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
body.dark-mode .about-hero .bunglon-title { color: #f8fafc !important; }
body.dark-mode .about-hero .bunglon-desc { color: #cbd5e1 !important; }

body.dark-mode .login-form { background-color: #1e293b !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; border-color: transparent !important; }
body.dark-mode .welcome-title { color: #f8fafc !important; }
body.dark-mode .login-footer p, body.dark-mode .login-social-footer p { color: #94a3b8 !important; }
body.dark-mode .login-form label { color: #cbd5e1 !important; }

/* ==========================================================
   WARNA TEKS KUNING (PRIMARY OVERRIDE)
   ========================================================== */
body.dark-mode #gd-nama-guru, body.dark-mode #sidebar-name, body.dark-mode #profile-name, body.dark-mode .text-highlight, body.dark-mode .about-footer span, body.dark-mode .about-footer i { color: #ffc107 !important; }
body.dark-mode [style*="color: var(--primary-color)"]:not(.paper-sheet *), body.dark-mode [style*="color:var(--primary-color)"]:not(.paper-sheet *) { color: #ffc107 !important; }
body.dark-mode h1 i.ph-magic-wand, body.dark-mode h3 i.ph-chart-bar-horizontal { color: #ffc107 !important; }

/* ==========================================================
   PERBAIKAN KOTAK CHART & FILTER
   ========================================================== */
body.dark-mode .m-chart-box { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; }
body.dark-mode .m-chart-box[style*="border-top: 4px solid #ffc107"], body.dark-mode .m-chart-box[style*="border-top: 4px solid rgb(255, 193, 7)"] { border-top-color: #ffc107 !important; }

body.dark-mode .modern-search-bar input[type="text"] { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; outline: none !important; color: #f8fafc !important; }
body.dark-mode .modern-search-bar i.ph-magnifying-glass { color: #94a3b8 !important; }

/* ==========================================================
   PLACEHOLDER & BADGE (DIPISAH UKURAN & WARNA)
   ========================================================== */
body.dark-mode .placeholder-state, body.dark-mode #editor-placeholder { background-color: #1e293b !important; border-color: #475569 !important; box-shadow: none !important; }
body.dark-mode .placeholder-state p, body.dark-mode .placeholder-state strong { color: #e2e8f0 !important; }
body.dark-mode .placeholder-icon, body.dark-mode .placeholder-icon i { color: #64748b !important; }

body.dark-mode #label-arsip-soal span, body.dark-mode .editor-sidebar label span { background-color: #334155 !important; color: #ffc107 !important; border-color: #475569 !important; }

/* ==========================================================
   PERBAIKAN TAB MENU AI-HIKAM
   ========================================================== */
body.dark-mode div[style*="background: #eef2f6"] { background-color: #1e293b !important; border-color: #334155 !important; }
body.dark-mode #btn-tab-ai-soal:not([style*="transparent"]), body.dark-mode #btn-tab-ai-jawaban:not([style*="transparent"]), body.dark-mode #btn-tab-ai-soal[style*="white"], body.dark-mode #btn-tab-ai-jawaban[style*="white"] { background: #ffc107 !important; color: #0f172a !important; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode #btn-tab-ai-soal[style*="transparent"], body.dark-mode #btn-tab-ai-jawaban[style*="transparent"], body.dark-mode #btn-tab-ai-soal[style*="#64748b"], body.dark-mode #btn-tab-ai-jawaban[style*="#64748b"] { background: transparent !important; color: #94a3b8 !important; box-shadow: none !important; }
body.dark-mode #btn-tab-ai-soal[style*="transparent"]:hover, body.dark-mode #btn-tab-ai-jawaban[style*="transparent"]:hover { color: #f8fafc !important; }

body.dark-mode #ai-tab-content-soal div[style*="background: #fff3cd"], body.dark-mode #ai-tab-content-jawaban div[style*="background: #fff3cd"], body.dark-mode #ai-tab-content-jawaban div[style*="background:#fff3cd"] { background-color: #1e293b !important; color: #cbd5e1 !important; border-color: #334155 !important; border-left-color: #ffc107 !important; }
body.dark-mode #ai-tab-content-soal div[style*="background: #fff3cd"] b, body.dark-mode #ai-tab-content-soal div[style*="background: #fff3cd"] i, body.dark-mode #ai-tab-content-jawaban div[style*="background: #fff3cd"] b, body.dark-mode #ai-tab-content-jawaban div[style*="background: #fff3cd"] i { color: #ffc107 !important; }
body.dark-mode #panel-ai .section-title b, body.dark-mode #panel-ai label { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
body.dark-mode #ai-input-text::placeholder { color: #94a3b8 !important; }

/* ==========================================================
   TOMBOL AI AKTIF & DISABLED (TUKANG KAYU & CAT DIPISAH)
   ========================================================== */
/* Tukang Kayu (Base - Berlaku di Terang & Gelap) */
#btn-generate-ai:not(:disabled), #btn-generate-ans-ai:not(:disabled), #btn-export-pdf:not(:disabled) {
    text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease;
}
/* Tukang Cat Malam */
body.dark-mode #btn-generate-ai:disabled, body.dark-mode #btn-generate-ans-ai:disabled, body.dark-mode #btn-export-pdf:disabled { background: #334155 !important; color: #64748b !important; border-color: #475569 !important; box-shadow: none !important; opacity: 0.7; }
body.dark-mode #btn-generate-ai:not(:disabled), body.dark-mode #btn-generate-ans-ai:not(:disabled), body.dark-mode #btn-export-pdf:not(:disabled) { background: #ffc107 !important; color: #0f172a !important; border-color: transparent !important; opacity: 1; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4) !important; }
body.dark-mode #btn-generate-ai:not(:disabled):hover, body.dark-mode #btn-generate-ans-ai:not(:disabled):hover, body.dark-mode #btn-export-pdf:not(:disabled):hover { background: #ffca2c !important; box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6) !important; }
body.dark-mode #btn-export-pdf:not(:disabled) i { color: #0f172a !important; }

/* ==========================================================
   PERBAIKAN NAVIGASI AKTIF (TUKANG KAYU & CAT DIPISAH)
   ========================================================== */
/* Tukang Kayu (Base) */
.nav-item.active { border-radius: 50px !important; padding: 8px 20px !important; transition: all 0.3s ease; }
/* Tukang Cat Malam */
body.dark-mode .nav-item.active { background-color: #ffc107 !important; color: #0f172a !important; }
body.dark-mode .nav-item.active i, body.dark-mode .nav-item.active .nav-icon, body.dark-mode .nav-item.active .nav-label { color: #0f172a !important; }
body.dark-mode .nav-item:not(.active) { background-color: transparent !important; color: #94a3b8 !important; }
body.dark-mode .nav-item:not(.active) i { color: #94a3b8 !important; }

/* ==========================================================
   PERBAIKAN TOMBOL UNDUH LAMPIRAN PENGUMUMAN
   ========================================================== */

/* Tukang Kayu (Base - Berlaku di Terang & Gelap) */
#notification-list .notif-body a, 
#notification-list div[style*="background"] a {
    padding: 8px 16px !important; 
    border-radius: 50px !important; 
    text-decoration: none !important; 
    display: inline-flex !important; 
    align-items: center; 
    gap: 8px; 
    margin-top: 10px; 
    font-weight: 800 !important; 
    transition: all 0.2s ease;
    border: 1px solid currentColor !important; /* Otomatis membuat garis tepi sesuai warna teks */
}

/* Tukang Cat Malam (Dark Mode - Transparan & Outline Kuning) */
body.dark-mode #notification-list .notif-body a, 
body.dark-mode #notification-list div[style*="background"] a { 
    background-color: transparent !important; /* BOX DIBUAT BENING */
    color: #ffc107 !important;                /* TEKS DIBUAT KUNING EMAS */
    border-color: #ffc107 !important;         /* GARIS TEPI KUNING EMAS */
    box-shadow: none !important;              /* HAPUS BAYANGAN BLOK */
}

/* Memastikan Ikon di dalamnya ikut berwarna Kuning */
body.dark-mode #notification-list .notif-body a i { 
    color: #ffc107 !important; 
}

/* Efek Hover (Saat Disorot) di Mode Gelap */
body.dark-mode #notification-list .notif-body a:hover { 
    background-color: rgba(255, 193, 7, 0.1) !important; /* Menyala kuning transparan tipis */
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2) !important; 
    transform: translateY(-2px);
}

/* ==========================================================
   TRANSPARANSI KOTAK SOAL, JAWABAN & UPLOAD KOP (TUKANG KAYU)
   ========================================================== */
.question-item > div[style*="background"], .question-item > div[style*="background-color"], .question-item div[style*="background: white"], .question-item div[style*="background:white"], .question-item div[style*="background:#e3f2fd"], .question-item div[style*="background: #e3f2fd"] {
    padding: 10px !important; border-radius: 8px; /* TUKANG KAYU */
}
/* Tukang Cat Malam */
body.dark-mode .question-item > div[style*="background"], body.dark-mode .question-item > div[style*="background-color"], body.dark-mode .question-item div[style*="background: white"], body.dark-mode .question-item div[style*="background:white"], body.dark-mode .question-item div[style*="background:#e3f2fd"], body.dark-mode .question-item div[style*="background: #e3f2fd"] {
    background-color: transparent !important; background: transparent !important; border-color: #334155 !important;
}
body.dark-mode div[style*="background: white"]:has(.btn-kapsul-kuning), body.dark-mode div[style*="background:white"]:has(input[type="file"]), body.dark-mode .file-input-wrapper { background-color: transparent !important; background: transparent !important; border-color: #334155 !important; box-shadow: none !important; }
body.dark-mode .item-kunci { background-color: #0f172a !important; color: #f8fafc !important; border-color: #475569 !important; }
body.dark-mode .question-item label, body.dark-mode .question-item span[style*="color: #555"] { color: #94a3b8 !important; }

/* ==========================================================
   STATISTIK SIDEBAR (TUKANG CAT)
   ========================================================== */
body.dark-mode .stat-box { background-color: transparent !important; background: transparent !important; border-color: #334155 !important; box-shadow: none !important; }
body.dark-mode .stat-box span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
body.dark-mode .stat-box small { color: #94a3b8 !important; font-weight: 600; }
body.dark-mode #mobile-sidebar .sidebar-stats-grid .stat-box:last-child { background: rgba(255, 193, 7, 0.1) !important; border-color: #ffc107 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; }
body.dark-mode #mobile-sidebar .sidebar-stats-grid .stat-box:last-child span { color: #ffc107 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; }
body.dark-mode #mobile-sidebar .sidebar-stats-grid .stat-box:last-child small { color: #ffc107 !important; }
body.dark-mode #mobile-sidebar .sidebar-stats-grid .stat-box:last-child:hover { background: rgba(255, 193, 7, 0.2) !important; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode #mobile-sidebar .sidebar-stats-grid .stat-box:last-child i.ph-coins { color: #ffc107 !important; filter: drop-shadow(0 2px 5px rgba(255, 193, 7, 0.4)) !important; }

/* ==========================================================
   PROGRES FILE & TOMBOL ACTION (TUKANG KAYU & CAT DIPISAH)
   ========================================================== */
/* Tukang Kayu Base (Badge & Edit Button) */
#dynamic-progress-list div span, #profile-file-list li span, #dynamic-progress-list .badge { padding: 4px 10px !important; border-radius: 6px !important; }
#dynamic-progress-list button, #dynamic-progress-list .btn-edit, .guru-file-item button { padding: 8px 16px !important; border-radius: 8px !important; transition: all 0.3s ease; }
button[onclick*="createNewFile"], .sync-btn-width.btn-primary, #btn-buat-file { transition: all 0.3s ease; border: none !important; }

/* Tukang Cat Malam */
body.dark-mode #dynamic-progress-list div span, body.dark-mode #profile-file-list li span, body.dark-mode #dynamic-progress-list .badge { background-color: #334155 !important; color: #f8fafc !important; border-color: #475569 !important; }
body.dark-mode #dynamic-progress-list button, body.dark-mode #dynamic-progress-list .btn-edit, body.dark-mode .guru-file-item button, body.dark-mode button[onclick*="createNewFile"], body.dark-mode .sync-btn-width.btn-primary, body.dark-mode #btn-buat-file { background-color: #ffc107 !important; color: #0f172a !important; border-color: transparent !important; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2) !important; }
body.dark-mode #dynamic-progress-list button:hover, body.dark-mode button[onclick*="createNewFile"]:hover, body.dark-mode #btn-buat-file:hover { background-color: #ffca2c !important; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4) !important; }
body.dark-mode #dynamic-progress-list button i { color: #0f172a !important; }
body.dark-mode #dynamic-progress-list > div { background-color: rgba(30, 41, 59, 0.5) !important; border-color: #334155 !important; }
body.dark-mode button#btn-jenjang-select, body.dark-mode .btn-outline-primary:not(.active), body.dark-mode #my-files-select { background-color: #1e293b !important; color: #f8fafc !important; border-color: #475569 !important; }

/* ==========================================================
   TOMBOL BUKA EDITOR (TUKANG KAYU & CAT)
   ========================================================== */
/* Tukang Kayu */
[onclick*="showPanel('editor')"], .welcome-section button, .welcome-text + button, .btn-primary[onclick*="editor"] {
    padding: 12px 25px !important; border-radius: 50px !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center; gap: 8px; border: none !important;
}
/* Tukang Cat Malam */
body.dark-mode [onclick*="showPanel('editor')"], body.dark-mode .welcome-section button, body.dark-mode .welcome-text + button, body.dark-mode .btn-primary[onclick*="editor"] { background-color: #ffc107 !important; color: #0f172a !important; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode [onclick*="showPanel('editor')"] *, body.dark-mode [onclick*="showPanel('editor')"] i, body.dark-mode [onclick*="showPanel('editor')"] span { color: #0f172a !important; }
body.dark-mode [onclick*="showPanel('editor')"]:hover { background-color: #ffca2c !important; box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4) !important; color: #0f172a !important; }

/* ==========================================================
   PERBAIKAN PROFIL & AVATAR (TUKANG KAYU & CAT DIPISAH)
   ========================================================== */
/* Tukang Kayu (Base) */
.sender-badge { border-radius: 6px !important; text-transform: uppercase; letter-spacing: 0.5px; }
.avatar-selector-grid { padding: 20px !important; }
.avatar-option { border: 2px solid transparent !important; }
.profile-header { padding: 30px !important; border: none !important; }

/* Tukang Cat Malam */
body.dark-mode .sender-badge { background-color: #ffc107 !important; color: #0f172a !important; box-shadow: none !important; }
body.dark-mode .avatar-selector-grid { background-color: transparent !important; border-color: #334155 !important; box-shadow: none !important; }
body.dark-mode .avatar-option { background-color: #1e293b !important; border-color: transparent !important; }
body.dark-mode .avatar-option:hover { background-color: #334155 !important; border-color: #ffc107 !important; }
body.dark-mode .avatar-option.selected { background-color: rgba(255, 193, 7, 0.2) !important; border-color: #ffc107 !important; box-shadow: 0 0 15px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode .setting-content label { color: #f8fafc !important; }
body.dark-mode .profile-header { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; }
body.dark-mode .profile-header h2, body.dark-mode #profile-name { color: #ffc107 !important; font-weight: 800 !important; }
body.dark-mode .profile-header p, body.dark-mode .profile-header span:not(.badge-role) { color: #94a3b8 !important; }
body.dark-mode .profile-header .avatar-circle { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; }
body.dark-mode .badge-role { box-shadow: none !important; } /* <--- BAYANGAN KUNING DIHAPUS DI SINI */
/* Tembakan Pamungkas untuk Cicak di Sidebar (Tanpa Border) */
body.dark-mode #sidebar-avatar { 
    background-color: #1e293b !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; 
}

/* ==========================================================
   TOMBOL ACTION & ARSIP (DARK MODE)
   ========================================================== */
body.dark-mode .prog-chevron { color: #ffc107 !important; }
body.dark-mode .prog-card.open .prog-chevron { color: #f8fafc !important; }
body.dark-mode #dynamic-progress-list h4, body.dark-mode #dynamic-progress-list h4[style], body.dark-mode .prog-card h4, body.dark-mode .prog-card h4[style] { color: #f8fafc !important; }
body.dark-mode .btn-search-trigger, body.dark-mode .btn-icon-modern { background-color: #ffc107 !important; color: #0f172a !important; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2) !important; }
body.dark-mode .btn-search-trigger:hover, body.dark-mode .btn-icon-modern:hover { background-color: #ffca2c !important; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode .btn-icon-modern i { color: #0f172a !important; }

body.dark-mode .setting-content-inner > div > div[style*="background: #f8f9fa"], body.dark-mode .setting-content-inner > div > div[style*="background:#f8f9fa"] { background-color: transparent !important; background: transparent !important; border-color: #334155 !important; }
body.dark-mode .setting-content-inner > div > div > strong[style*="border-bottom"] { color: #f8fafc !important; border-bottom-color: #ffc107 !important; }
body.dark-mode .setting-content-inner > div > div strong, body.dark-mode .setting-content-inner > div > div div { color: #cbd5e1 !important; }

body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.8; }
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

body.dark-mode .modal-box .btn-primary { background: #ffc107 !important; color: #0f172a !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3) !important; }
body.dark-mode .modal-box .btn-secondary { background: transparent !important; border-color: #ffc107 !important; color: #ffc107 !important; }

/* ==========================================================
   TUKANG KAYU: FILE INPUT & GAMBAR (SUDAH BERSIH DARI DARK MODE)
   ========================================================== */
.file-input-label, body.dark-mode .file-input-label { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 700 !important; opacity: 1 !important; }
.file-input-label i, body.dark-mode .file-input-label i { color: #0f172a !important; opacity: 1 !important; }

.file-input-wrapper, body.dark-mode .file-input-wrapper { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; display: block !important; }
.question-item .file-input-label { margin-top: 15px !important; margin-bottom: 15px !important; display: inline-flex !important; margin-left: 0 !important; height: 38px !important; padding: 0 15px !important; align-items: center; justify-content: center; }
.quill-container { margin-bottom: 15px !important; }
.option-item { gap: 15px !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; }
.option-item .file-input-label { height: 38px !important; width: 38px !important; margin: 0 !important; }
.image-preview { margin-top: 0 !important; margin-bottom: 15px !important; border: none !important; border-radius: 8px; }

.q-num-badge, body.dark-mode .q-num-badge { background-color: #ffc107 !important; color: #0f172a !important; padding: 4px 12px !important; border-radius: 50px !important; font-weight: 800 !important; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.25) !important; border: none !important; }
.q-num-badge * { color: #0f172a !important; }

/* ==========================================================
   TOMBOL HAPUS GAMBAR DI POJOK (GEMINI STYLE)
   ========================================================== */
.image-preview-wrapper { position: relative; display: inline-block; margin-top: 10px; margin-bottom: 25px; }
.btn-remove-img { position: absolute; top: -10px; right: -10px; background: #dc3545 !important; color: white !important; border: 2px solid white !important; border-radius: 50% !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 14px !important; font-weight: bold !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; z-index: 10; transition: transform 0.2s ease; }
.btn-remove-img:hover { transform: scale(1.2) rotate(90deg); background: #c82333 !important; }
.image-preview-wrapper img { display: block; margin: 0 !important; }

/* ==========================================================
   CSS CETAK & GHOST IMAGE FIX
   ========================================================== */
.paper-sheet img[src*="index.html"], .paper-sheet img[src*="127.0.0.1"], .paper-sheet img[src*="localhost"], .paper-sheet img[src=""], .paper-sheet img:not([src]) { display: none !important; border: none !important; outline: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; visibility: hidden !important; opacity: 0 !important; }
@media print { .paper-sheet img { outline: none !important; -webkit-appearance: none !important; } }

/* ==========================================================
   TOMBOL SAKLAR DARK MODE & CAPSULE PENCARIAN
   ========================================================== */
.header-theme-toggle { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 24px !important; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); margin-left: auto !important; margin-right: 0 !important; outline: none; box-shadow: none !important; }
.header-theme-toggle:hover { transform: scale(1.15) rotate(-15deg); }
.header-theme-toggle:active { transform: scale(0.9); }

.modern-search-bar { background-color: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; border-radius: 50px !important; padding: 8px 18px !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important; transition: all 0.3s ease !important; display: flex !important; align-items: center !important; }
.modern-search-bar:focus-within { background-color: #ffffff !important; border-color: var(--primary-color) !important; box-shadow: 0 0 0 4px rgba(0, 32, 96, 0.1) !important; }
body.dark-mode .modern-search-bar { background-color: #1e293b !important; border-color: #334155 !important; }
.modern-search-bar input { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; }

/* ==========================================================
   FIX DARK MODE: KARTU ARSIP & KAPSUL DESKTOP (TUKANG KAYU DIPISAH)
   ========================================================== */
body.dark-mode .setting-icon[style*="background:#fffdf5"], body.dark-mode .setting-icon[style*="background:#e6f7f2"] { background-color: #334155 !important; }
body.dark-mode .modal-box div[style*="background:#f8fafc"], body.dark-mode .modal-box div[style*="background:#fff"] { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: none !important; }
body.dark-mode .modal-box span[style*="background:#e2e8f0"] { background-color: #334155 !important; color: #cbd5e1 !important; }
body.dark-mode .modal-box div[style*="background:#e6f7f2"] { background-color: rgba(40, 167, 69, 0.15) !important; color: #4ade80 !important; border-color: rgba(40, 167, 69, 0.3) !important; }
body.dark-mode .modal-box div[style*="color:#1e293b"], body.dark-mode .modal-box div[style*="color:#475569"], body.dark-mode .modal-box span[style*="color:#475569"] { color: #f8fafc !important; }
body.dark-mode .checkbox-group label[for="hof-save-history"] { color: #cbd5e1 !important; }

/* Tukang Kayu Navigasi Desktop */
@media screen and (min-width: 992px) {
    .app-nav .nav-item.active { border-radius: 0 !important; padding: 0 25px !important; height: 50px !important; border-left: 4px solid transparent !important; }
    body.dark-mode .app-nav .nav-item.active { background-color: transparent !important; box-shadow: none !important; border-left-color: #ffc107 !important; color: #ffc107 !important; }
    body.dark-mode .app-nav .nav-item.active i, body.dark-mode .app-nav .nav-item.active .nav-icon, body.dark-mode .app-nav .nav-item.active .nav-label { color: #ffc107 !important; }
    body.dark-mode .app-nav .nav-item.active:hover { background-color: rgba(255, 193, 7, 0.08) !important; }
    
    .brand-logo-container { width: 100% !important; max-width: 180px !important; height: 45px !important; justify-content: flex-start !important; }
    .brand-logo-img { width: auto !important; height: 100% !important; object-fit: contain !important; }
}

/* ==========================================================
   UI POLISH: HERO & LAINNYA
   ========================================================== */
.about-hero { background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important; }
.bunglon-logo-wrapper { width: 110px !important; height: 110px !important; padding: 0 !important; border-radius: 24px !important; box-shadow: 0 15px 35px rgba(0, 32, 96, 0.15) !important; overflow: hidden !important; background: transparent !important; margin: 0 auto 25px auto !important; }
.bunglon-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.bunglon-title { font-size: 34px !important; font-weight: 900 !important; color: #1e293b !important; letter-spacing: -0.5px !important; margin-bottom: 12px !important; }
.text-highlight { background: linear-gradient(135deg, #ffb300, #f57c00) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-style: italic !important; padding-right: 5px !important; display: inline-block; }
.app-version { font-size: 13px !important; padding: 6px 18px !important; border-radius: 50px !important; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3) !important; letter-spacing: 0.5px !important; }
.bunglon-desc { font-size: 15px !important; color: #475569 !important; line-height: 1.8 !important; margin-top: 20px !important; }
.about-quote-box { margin-top: 30px; padding: 20px 30px; background: linear-gradient(145deg, #fffdf5, #fff3cd); border-left: 5px solid #ffc107; border-radius: 0 16px 16px 0; display: inline-block; max-width: 600px; box-shadow: 0 8px 25px rgba(255, 193, 7, 0.15); text-align: left; }
.quote-text { font-style: italic; color: #475569; margin: 0; font-family: 'Georgia', 'Times New Roman', serif; font-size: 16px; line-height: 1.6; }
.quote-author { font-weight: 900; margin: 12px 0 0 0; color: #b45309; font-size: 13px; text-align: right; letter-spacing: 0.5px; }

body.dark-mode .about-hero { background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important; }
body.dark-mode .about-quote-box { background: #1e293b !important; border-color: #ffc107 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; }
body.dark-mode .quote-text { color: #cbd5e1 !important; }
body.dark-mode .quote-author { color: #ffc107 !important; }

.ai-quota-badge { background: linear-gradient(135deg, #fff8e1, #ffecb3); border: 2px solid #ffc107; color: #e65100; padding: 0 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2); flex-shrink: 0; min-width: 120px; }
body.dark-mode .ai-quota-badge { background: rgba(255, 193, 7, 0.1) !important; border-color: #ffc107 !important; color: #ffc107 !important; box-shadow: 0 4px 15px rgba(255, 193, 7, 0.15) !important; }

.btn-toggle-desc.active { background-color: #fff5f5 !important; border: 1px dashed #dc3545 !important; color: #dc3545 !important; font-weight: 700 !important; box-shadow: 0 2px 5px rgba(220, 53, 69, 0.1) !important; }
.btn-toggle-desc.active i { color: #dc3545 !important; }
body.dark-mode .btn-toggle-desc.active { background-color: rgba(220, 53, 69, 0.15) !important; border-color: #ff4757 !important; color: #ffb3b3 !important; box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2) !important; }
body.dark-mode .btn-toggle-desc.active i { color: #ff4757 !important; }

.section-header { cursor: pointer !important; transition: background-color 0.2s ease !important; }
.section-header:hover { background-color: #001848 !important; }
.section-header .drawer-icon { margin-right: 10px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.section-card.collapsed-drawer .drawer-body { display: none !important; }
.section-card.collapsed-drawer .section-header .drawer-icon { transform: rotate(-90deg); }
.section-card { overflow: visible !important; }

.btn-toggle-ui { background: transparent !important; border: none !important; padding: 0 !important; cursor: pointer; outline: none; display: flex; align-items: center; justify-content: center; box-shadow: none !important; }
.btn-toggle-ui i { font-size: 42px; transition: all 0.3s ease; color: #cbd5e1; }
body.dark-mode .btn-toggle-ui i { color: #ffc107; }

/* ==========================================================
   PENGECUALIAN MUTLAK: HALAMAN LOGIN SELALU TERANG
   ========================================================== */
body.dark-mode #login-container { background-color: var(--bg-color) !important; }
body.dark-mode #login-container .login-form { background-color: #ffffff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; border-color: transparent !important; }
body.dark-mode #login-container input[type="text"], body.dark-mode #login-container input[type="password"] { background-color: #fafbfc !important; color: #333333 !important; border-color: #e0e0e0 !important; }
body.dark-mode #login-container input[type="text"]:focus, body.dark-mode #login-container input[type="password"]:focus { background-color: #ffffff !important; border-color: var(--primary-color) !important; box-shadow: 0 0 0 4px rgba(0, 32, 96, 0.1) !important; }
body.dark-mode #login-container label, body.dark-mode #login-container p, body.dark-mode #login-container .login-footer { color: #555555 !important; }
body.dark-mode #login-container .input-icon { color: var(--primary-color) !important; }
body.dark-mode #login-container .input-icon-right { color: #aaaaaa !important; }
body.dark-mode #login-container .welcome-title { color: #ffffff !important; text-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; }
body.dark-mode #login-container .forgot-password-link, body.dark-mode #login-container .login-footer a { color: var(--primary-color) !important; }

/* ==========================================================
   MENU TITIK TIGA (ACTION MENU DROPDOWN)
   ========================================================== */
.menu-content { display: none; position: absolute; right: 0; top: 35px; background: #ffffff !important; min-width: 200px !important; box-shadow: 0 10px 30px rgba(0, 32, 96, 0.15) !important; border-radius: 14px !important; z-index: 1000; border: 1px solid #e2e8f0 !important; padding: 8px !important; animation: fadeInMenu 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes fadeInMenu { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.menu-content button { display: flex !important; align-items: center !important; gap: 12px !important; width: 100%; text-align: left; padding: 12px 15px !important; background: transparent !important; border: none !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; border-radius: 8px !important; color: #475569 !important; transition: all 0.2s ease !important; margin-bottom: 2px !important; }
.menu-content button:last-child { margin-bottom: 0 !important; }
.menu-content button i { font-size: 18px !important; color: inherit !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.menu-content button:hover { background: #f0f7ff !important; color: var(--primary-color) !important; padding-left: 20px !important; }
.menu-content button[onclick*="deleteUserFromDB"] { color: #dc3545 !important; }
.menu-content button[onclick*="deleteUserFromDB"]:hover { background: #fff5f5 !important; color: #c82333 !important; }

body.dark-mode .menu-content { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; }
body.dark-mode .menu-content button { color: #cbd5e1 !important; }
body.dark-mode .menu-content button:hover { background-color: #334155 !important; color: #ffc107 !important; }
body.dark-mode .menu-content button[onclick*="deleteUserFromDB"] { color: #f87171 !important; }
body.dark-mode .menu-content button[onclick*="deleteUserFromDB"]:hover { background-color: rgba(220, 53, 69, 0.15) !important; color: #fca5a5 !important; }

/* ==========================================================
   PERBAIKAN BADGE GURU & PANITIA (DARK MODE)
   ========================================================== */
body.dark-mode #panitio-content span[style*="var(--primary-color)"], body.dark-mode #panitio-content span[style*="#0d6efd"], body.dark-mode #panitio-content span[style*="blue"], body.dark-mode #panitio-content .badge {
    background: #ffc107 !important; background-color: #ffc107 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 800 !important; box-shadow: none !important; border-color: transparent !important; /* <--- BAYANGAN KUNING DIHAPUS DI SINI */
}
body.dark-mode #panitio-content span[style*="#198754"], body.dark-mode #panitio-content span[style*="#28a745"], body.dark-mode #panitio-content span[style*="green"], body.dark-mode #panitio-content .badge-panitia {
    background: #28a745 !important; background-color: #28a745 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 800 !important; box-shadow: none !important; border-color: transparent !important; /* <--- BAYANGAN HIJAU DIHAPUS DI SINI */
}

/* ==========================================================
   PERBAIKAN WARNA TOMBOL PILIH GAMBAR
   ========================================================== */
.file-input-label { background-color: #ffc107 !important; color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; border: none !important; font-weight: 800 !important; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3) !important; transition: all 0.3s ease !important; }
.file-input-label i { color: #1e293b !important; }
.file-input-label:hover { background-color: #ffca2c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(255, 193, 7, 0.4) !important; }
body.dark-mode .file-input-label { background-color: #ffc107 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
body.dark-mode .file-input-label i { color: #0f172a !important; }

/* ==========================================
   TOMBOL "BUAT SEKARANG" (EMPTY STATE SOAL)
   ========================================== */
#dynamic-progress-list button { margin-top: 20px !important; padding: 12px 30px !important; border-radius: 50px !important; font-size: 14px !important; font-weight: bold !important; border: none !important; cursor: pointer !important; min-width: 180px !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
body:not(.dark-mode) #dynamic-progress-list button { background-color: #002060 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(0, 32, 96, 0.2) !important; }
body:not(.dark-mode) #dynamic-progress-list button:hover { background-color: #001540 !important; transform: translateY(-2px) !important; }
body.dark-mode #dynamic-progress-list button { background-color: #ffc107 !important; color: #000000 !important; box-shadow: 0 4px 10px rgba(255, 193, 7, 0.2) !important; }
body.dark-mode #dynamic-progress-list button:hover { background-color: #e0a800 !important; transform: translateY(-2px) !important; }

/* ==========================================================
   FIX UI: OVERLAY PREVIEW REKAP LAPORAN (PRINT MODE)
   ========================================================== */

/* 1. Latar Belakang Luar (Lantai Tirai) di Mode Terang */
#recap-overlay {
    background-color: #f1f5f9 !important; /* Abu-abu kebiruan terang */
}

/* 2. Header Rekap (Yang awalnya putih kaku dengan inline style) */
#recap-overlay > div:first-child {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 32, 96, 0.05) !important;
}

/* 3. Teks Judul di Mode Terang */
#recap-overlay .recap-title-hover {
    color: #002060 !important; /* Biru gelap utama */
}

/* ==========================================
   TUKANG CAT MALAM (DARK MODE UNTUK REKAP)
   ========================================== */

/* 1. Latar Belakang Luar (Lantai Tirai) di Mode Gelap */
body.dark-mode #recap-overlay {
    background-color: #0f172a !important; /* Biru dongker pekat */
}

/* 2. Header Rekap di Mode Gelap */
body.dark-mode #recap-overlay > div:first-child {
    background-color: #1e293b !important; /* Biru gelap elegan */
    border-bottom: 1px solid #334155 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Teks Judul menyala Kuning Emas di Mode Gelap */
body.dark-mode #recap-overlay .recap-title-hover {
    color: #ffc107 !important; 
}
body.dark-mode #recap-overlay .recap-title-hover i {
    color: #ffc107 !important; 
}

/* ==========================================
   PROTEKSI MUTLAK KERTAS CETAK (ANTI RUSAK)
   ========================================== */

/* Menjamin Kertas selalu putih bersinar di kedua mode */
#recap-overlay .paper-sheet {
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    margin: 20px auto !important; /* Jarak napas kertas ke atas/bawah */
}

/* SUPER PROTEKSI: Memastikan tabel dan seluruh teks di dalam kertas 
   selalu HITAM PEKAT, mengabaikan efek Mode Gelap sama sekali */
#recap-overlay .paper-sheet table,
#recap-overlay .paper-sheet th,
#recap-overlay .paper-sheet td,
#recap-overlay .paper-sheet *,
body.dark-mode #recap-overlay .paper-sheet table,
body.dark-mode #recap-overlay .paper-sheet th,
body.dark-mode #recap-overlay .paper-sheet td,
body.dark-mode #recap-overlay .paper-sheet * {
    color: #000000 !important;
    border-color: #000000 !important;
    -webkit-text-fill-color: #000000 !important; /* Penjaga ekstra browser Chrome */
    text-shadow: none !important;
}

/* ==========================================
   MEMPERCANTIK TOMBOL CETAK & TUTUP
   ========================================== */

/* Tombol Cetak (Hijau) */
#recap-overlay .btn-success {
    background: #198754 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.2) !important;
    transition: all 0.3s ease;
}
#recap-overlay .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(25, 135, 84, 0.3) !important;
}

/* Tombol Tutup (Merah) */
#recap-overlay .btn-danger {
    background: #dc3545 !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2) !important;
    transition: all 0.3s ease;
}
#recap-overlay .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.3) !important;
}

/* Adaptasi warna tombol di Mode Gelap agar lebih nge-jreng */
body.dark-mode #recap-overlay .btn-success {
    background: #28a745 !important;
}
body.dark-mode #recap-overlay .btn-danger {
    background: #e3342f !important;
}


/* =========================================
   KARTU PROFIL SIDEBAR MENGAMBANG (TERANG)
   ========================================= */
.sidebar-profile {
    background: #f8fafc !important; /* Ubah 'background-color' menjadi 'background' saja untuk membunuh efek gradasi lama */
    border-bottom: 1px solid #f5f5f5 !important; 
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4) !important; 
    padding-bottom: 25px !important; 
    margin-bottom: 20px !important; 
    border-radius: 0 0 15px 15px !important; 
}

/* Tembakan Pemisah Area Profil dan Menu Sidebar (Mode Gelap) */
body.dark-mode .sidebar-profile {
    background-color: #172133 !important; /* Warna latar sedikit lebih gelap/berbeda dari menu */
    border-bottom: 1px solid #334155 !important; /* Garis pembatas horizontal yang elegan */
    padding-bottom: 25px !important; /* Memberi ruang napas di bawah tombol Edit Profil */
    margin-bottom: 20px !important; /* Jarak tambahan sebelum menu Beranda */
    
    /* Opsional: Hapus komentar di bawah ini jika ingin ujung bawahnya sedikit melengkung manis */
    border-radius: 0 0 15px 15px !important;
}

/* =========================================
   EFEK TUMPUK FOTO & BADGE ROLE
   ========================================= */
/* 1. Wadah Jangkar (Memastikan foto tetap di tengah) */
.avatar-wrapper {
    position: relative;
    display: inline-block; /* Agar lebar wadah pas seukuran foto */
    margin: 0 auto 15px auto; /* Menjaga posisi tetap di center */
}

/* 2. Nol-kan margin foto karena sudah diambil alih oleh wadah di atas */
.avatar-wrapper .avatar-circle,
.avatar-wrapper #sidebar-avatar {
    margin: 0 !important;
}

/* 3. Mantra Penumpuk Badge */
.overlay-badge {
    position: absolute !important;
    bottom: -4px !important; /* Tarik sedikit ke bawah foto */
    right: -20px !important; /* Dorong melampaui batas kanan foto */
    z-index: 10 !important; /* Pastikan selalu tampil paling atas */
    border: 3px solid #f8fafc !important; /* Beri garis tepi agar tidak menyatu dengan foto */
    box-shadow: 0 4px 6px rgba(0,0,0,0) !important; /* Bayangan halus */
}

/* 4. Penyesuaian Garis Tepi (Border) Badge saat Mode Gelap */
body.dark-mode .overlay-badge {
    border-color: #172133 !important; /* Sesuaikan warna ini dengan background sidebar gelap Anda */
}

/* =========================================
   BORDER AVATAR BERDASARKAN ROLE (ESTETIK 3px)
   ========================================= */
/* 1. Ketebalan Dasar & Transisi Halus */
.avatar-wrapper .avatar-circle,
.avatar-wrapper #sidebar-avatar {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: #cbd5e1 ; /* Warna dasar (abu-abu) sebelum memuat data */
    transition: border-color 0.3s ease !important; /* Efek transisi warna yang mulus */
}

/* ==========================================================
   FIX FINAL: TOMBOL CLOSE SIDEBAR (EFEK TARIK / PULL EFFECT)
   ========================================================== */
/* Membunuh semua kode masa lalu dengan spesifisitas tingkat tinggi */
#mobile-sidebar .sidebar-content .close-sidebar {
    position: absolute !important;
    top: 136px !important;
    right: 0 !important; /* Kunci rapat di ujung kanan */
    left: auto !important; /* Matikan paksaan ke kiri jika ada */
    background: #dc3545 !important; /* Warna MERAH STANDAR */
    border: none !important;
    border-radius: 30px 0 0 30px !important; 
    width: 45px !important; 
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 1000 !important;
    cursor: pointer !important;
    
    /* KUNCI ANTI OFFSIDE: Matikan efek membesar (scale) masa lalu */
    transform: none !important; 
    
    transition: width 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Warna Icon & Posisi Awal */
#mobile-sidebar .sidebar-content .close-sidebar i {
    font-size: 22px !important;
    color: #ffffff !important; /* Putih terang */
    transform: translateX(2px) !important; /* Panah sedikit istirahat ke kanan */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

/* EFEK HOVER (Mouse mendekat) - Memanjang ke kiri */
#mobile-sidebar .sidebar-content .close-sidebar:hover {
    width: 60px !important; /* Tarik memanjang */
    background: #c82333 !important; /* Merah lebih pekat */
    transform: none !important; /* Cegah offside! */
}
#mobile-sidebar .sidebar-content .close-sidebar:hover i {
    transform: translateX(-4px) !important; /* Panah maju bersiap */
    color: #ffffff !important;
}

/* EFEK ACTIVE (Diklik/Ditahan) - Efek Karet Melar Maksimal */
#mobile-sidebar .sidebar-content .close-sidebar:active {
    width: 90px !important; /* Tarik panjang maksimal */
    background: #a52834 !important; 
    transform: none !important; /* Cegah offside! */

}
#mobile-sidebar .sidebar-content .close-sidebar:active i {
    transform: translateX(-18px) !important; /* Panah meluncur ke kiri */
    color: #ffffff !important;
}

/* ==========================================================
   TOMBOL TUTUP PENGATURAN PANITIA (NAKED RED SQUARE)
   ========================================================== */
.btn-close-settings {
    background: transparent !important; /* Lucuti latar belakang */
    border: none !important; /* Hilangkan garis tepi */
    border-radius: 0 !important; 
    width: auto !important; 
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important; /* Hilangkan bayangan kotak */
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

/* Warna ikon MUTLAK MERAH di segala mode (Terang & Gelap) */
.btn-close-settings i,
body.dark-mode .btn-close-settings i {
    font-size: 34px !important; /* Ikon dibesarkan karena sudah tidak pakai kotak */
    color: #dc3545 !important; /* Merah pekat */
    transition: color 0.2s ease, filter 0.2s ease !important;
    filter: drop-shadow(0 2px 4px rgba(220, 53, 69, 0.3)) !important; /* Beri efek timbul sedikit pada ikonnya */
}

/* EFEK HOVER: Sedikit membesar dan merah merona */
.btn-close-settings:hover {
    background: transparent !important; /* Jaga tetap telanjang saat disorot */
    transform: scale(1.1) rotate(3deg) !important; /* Membesar dan sedikit miring estetik */
    box-shadow: none !important; 
}
.btn-close-settings:hover i,
body.dark-mode .btn-close-settings:hover i {
    color: #c82333 !important; /* Merah lebih gelap */
    filter: drop-shadow(0 4px 8px rgba(220, 53, 69, 0.5)) !important;
}

/* EFEK KLIK (Active) */
.btn-close-settings:active {
    transform: scale(0.9) !important; /* Menciyut saat ditekan */
}




/* ==========================================================
   BACKGROUND GAMBAR KARTU PROFIL SIDEBAR (ANTI PEYANG)
   ========================================================== */

/* 1. Kunci agar gambar tidak tumpah/keluar dari batas lengkungan sidebar */
.sidebar-profile {
    position: relative !important;
    overflow: hidden !important; 
}

/* 2. Jurus Bayangan (Menyisipkan gambar di lapisan paling belakang) */
.sidebar-profile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* KUNCI: Cukup panggil nama filenya langsung karena mereka serumah! */
    background-image: url('background.png'); 
    
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 3. Menarik semua isi (Foto, Nama, Tombol) agar tetap berada di atas gambar */
.sidebar-profile > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   BACKGROUND GAMBAR NAVBAR BAWAH / SIDEBAR KIRI (ANTI PEYANG)
   ========================================================== */

/* 1. Menyuntikkan gambar ke lapisan terdalam navbar TANPA mengubah posisinya */
.app-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('background.png'); /* Gambar Anda */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    
    z-index: -1 !important; /* KUNCI: Paksa mundur ke belakang agar tidak menutupi tombol */
    pointer-events: none !important; /* Tembus sentuh agar tombol aman */
}

/* 2. Angkat sedikit semua isi navbar (ikon, teks) agar tidak tenggelam oleh gambar */
.app-nav > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   BACKGROUND GAMBAR UNTUK HALAMAN LOGIN / AUTH (ANTI PEYANG)
   ========================================================== */

/* 1. Jadikan kontainer utama login sebagai wadah bayangan */
#login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50000;
    overflow-y: auto;
    
    /* Matikan warna solidnya agar bayangan gambar di belakang bisa terlihat */
    background: transparent !important; 
}

/* 2. Jurus Bayangan (Menempelkan stempel pattern di lapisan paling bawah) */
#login-container::before {
    content: "";
    position: fixed; /* Fixed agar gambar tidak ikut ter-scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Warna ini akan menutupi kegelapan dari body.dark-mode di belakangnya */
    background-color: #f8f9fa !important;
    
    background-image: url('background.png'); /* Pattern transparan Anda */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: -1; /* Berada di belakang semua elemen login */
    pointer-events: none; /* Aman dari sentuhan */
}

/* 3. TUKANG CAT MALAM KHUSUS LOGIN (Pengecualian Mutlak) */
/* Karena Anda bilang "Halaman Login Selalu Terang", kita matikan paksaan background dark-mode */
body.dark-mode #login-container {
    background: transparent !important; /* Tetap bening agar gambar terlihat */
}




/* ==========================================================
   FINAL OVERRIDE: MENU AKTIF (SIDEBAR VS NAVBAR)
   - Sidebar (Kiri): Transparan + Garis Kiri
   - Navbar Bawah (HP): Tetap bentuk Kapsul/Pil Warna
   ========================================================== */

/* ----------------------------------------------------------
   A. ATURAN KHUSUS SIDEBAR KIRI (Laptop & Menu Samping HP)
   ---------------------------------------------------------- */

/* 1. Murni Transparan di Kedua Mode (Hilangkan Blok Warna) */
.sidebar-item:hover, 
.sidebar-item:active, 
.sidebar-item.active,
body.dark-mode .sidebar-item:hover, 
body.dark-mode .sidebar-item:active, 
body.dark-mode .sidebar-item.active {
    background: transparent !important; 
    background-color: transparent !important;
}

/* 2. Warna Teks, Ikon & Garis Mode Terang (Biru Tua) */
.sidebar-item:hover, 
.sidebar-item:active, 
.sidebar-item.active {
    color: var(--primary-color) !important;
    border-left: 4px solid var(--primary-color) !important; 
    border-radius: 0 !important; 
}
.sidebar-item:hover i, 
.sidebar-item:active i, 
.sidebar-item.active i {
    color: var(--primary-color) !important;
}

/* 3. Warna Teks, Ikon & Garis Mode Gelap (Kuning Emas) */
body.dark-mode .sidebar-item:hover, 
body.dark-mode .sidebar-item:active, 
body.dark-mode .sidebar-item.active {
    color: #ffc107 !important;
    border-left: 4px solid #ffc107 !important;
    border-radius: 0 !important;
}
body.dark-mode .sidebar-item:hover i, 
body.dark-mode .sidebar-item:active i, 
body.dark-mode .sidebar-item.active i {
    color: #ffc107 !important;
}

/* 4. Cegah Teks Bergeser karena Border Baru */
.sidebar-item {
    border-left: 4px solid transparent !important; 
}


/* ----------------------------------------------------------
   B. ATURAN KHUSUS NAVBAR BAWAH (HP) & DESKTOP NAVBAR
   ---------------------------------------------------------- */

/* Mode Terang: Navbar Bawah HP (Bentuk Kapsul Biru) */
@media screen and (max-width: 991px) {
    .app-nav .nav-item.active {
        background-color: var(--primary-color) !important; 
        color: white !important;
        border-radius: 25px !important; /* Kembalikan bentuk kapsul */
        border-left: none !important; /* Hapus garis samping */
    }
    .app-nav .nav-item.active .nav-icon,
    .app-nav .nav-item.active .nav-label {
        color: white !important;
    }
}

/* Mode Gelap: Navbar Bawah HP (Bentuk Kapsul Kuning) */
@media screen and (max-width: 991px) {
    body.dark-mode .app-nav .nav-item.active {
        background-color: #ffc107 !important; 
        color: #ffc107 !important;
        border-radius: 25px !important;
        border-left: none !important;
    }
    body.dark-mode .app-nav .nav-item.active .nav-icon,
    body.dark-mode .app-nav .nav-item.active .nav-label {
        color: #0f172a !important;
    }
}

/* Mode Laptop/Desktop: Navbar Kiri (.app-nav) bergaya seperti Sidebar */
@media screen and (min-width: 992px) {
    .app-nav .nav-item.active {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 25px !important;
        border-left: 4px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
    }
    .app-nav .nav-item.active .nav-icon,
    .app-nav .nav-item.active .nav-label {
        color: var(--primary-color) !important;
    }

    body.dark-mode .app-nav .nav-item.active {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 25px !important;
        border-left: 4px solid #ffc107 !important;
        color: #ffc107 !important;
    }
    body.dark-mode .app-nav .nav-item.active .nav-icon,
    body.dark-mode .app-nav .nav-item.active .nav-label {
        color: #ffc107 !important;
    }
    
    .app-nav .nav-item {
        border-left: 4px solid transparent !important;
    }
}

/* ==========================================================
   FIX FINAL: KONTRAS IKON KACA PEMBESAR DI TOMBOL KUNING
   Melibas aturan abu-abu dari .modern-search-bar
   ========================================================== */
body.dark-mode .modern-search-bar .btn-search-trigger i,
body.dark-mode .modern-search-bar .btn-search-trigger i.ph-magnifying-glass,
body.dark-mode .header-search-tools .btn-search-trigger i {
    color: #1e293b !important; /* Warna Navy Gelap Pekat */
    fill: #1e293b !important;
    stroke: #1e293b !important;
    font-weight: 900 !important;
}

/* ==========================================================
   FIX STICKY FILTER: MENCEGAH KONTEN MENGINTIP SAAT DI-SCROLL
   Memberikan background solid pada area pencarian/filter
   ========================================================== */

/* 1. Mode Terang (Background Putih Solid) */
.filter-row {
    background: #ffffff !important;
    background-color: #ffffff !important;
    /* Kembalikan sedikit padding agar kotak pencarian tidak terlalu menempel ke tepi */
    padding-left: 15px !important; 
    padding-right: 15px !important;
    padding-bottom: 15px !important;
    /* Beri sedikit bayangan halus di bawahnya agar terlihat memisahkan diri dari tabel yang di-scroll */
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; 
    z-index: 89 !important; /* Pastikan posisinya di atas tabel */
}

/* 2. Mode Gelap (Background Navy Gelap Solid) */
body.dark-mode .filter-row {
    background: #1e293b !important;
    background-color: #1e293b !important;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.4) !important;
}







/* ==========================================================
   FIX Jarak Judul & Sticky Header (KHUSUS SELULER/ANDROID)
   Perbaikan ini hanya berlaku untuk tampilan HP (< 991px)
   ========================================================== */
@media screen and (max-width: 991px) {
    /* 1. Mengeratkan jarak antara header biru dan judul halaman */
    .app-content {
        /* Menghitung jarak tepat: Ruang poni + Tinggi Header Biru (semakin kecil px (belakang) semakin naik objek) */
        padding-top: calc(max(60px, env(safe-area-inset-top)) + 50px) !important;
    }

    /* 2. Menyesuaikan posisi menempel (sticky) untuk Section Header */
    .section-header {
        /* Menempel tepat di bawah header biru yang berakhir di jarak di atas */
        top: calc(max(60px, env(safe-area-inset-top)) + 50px) !important;
    }

    /* 3. Menyesuaikan posisi menempel (sticky) untuk Filter Row */
    .filter-row {
        /* Menempel tepat di bawah Section Header yang memiliki tinggi 70px */
        top: calc(max(60px, env(safe-area-inset-top)) + 50px + 70px) !important;
    }
}

/* ==========================================================
   FIX MULTITASKING: LAYAR DIBELAH 2 (PC/LAPTOP & TABLET)
   Berlaku untuk ukuran menengah (500px hingga 991px).
   Membuang jarak "Poni HP" agar tidak menggantung di PC.
   ========================================================== */
@media screen and (min-width: 500px) and (max-width: 991px) {
    /* 1. Mengeratkan jarak: Tinggi Header Biru (65px) + Napas 20px = 85px */
    .app-content {
        padding-top: 85px !important;
    }

    /* 2. Sticky Header merapat pas di garis bawah Top Bar Biru (65px) */
    .section-header {
        top: 65px !important;
    }

    /* 3. Sticky Filter nempel di bawah Section Header (65px + Tinggi Header 70px) = 135px */
    .filter-row {
        top: 135px !important;
    }
}

/* ==========================================================
   FIX ALIGNMENT: SEJAJARKAN MANAJEMEN FILE & HEADER (DESKTOP)
   Menurunkan panel kiri agar rata dengan kartu di panel kanan
   ========================================================== */
@media screen and (min-width: 992px) {
    .editor-sidebar {
        /* Turunkan panel kiri */
        margin-top: 15px !important; 
    }
    
    .sticky-top-desktop {
        /* Sesuaikan juga posisi berhentinya saat di-scroll ke bawah agar natural */
        top: 15px !important; 
    }
}

/* ==========================================================
   PERBAIKAN SUSUNAN BOTTOM NAVBAR (HORIZONTAL & BATIK AMAN)
   ========================================================== */
@media screen and (max-width: 991px) {
    /* 1. Memaksa wadah nav-bottom menyamping (horizontal) */
    .app-nav .nav-bottom {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
        
        /* KUNCI: Biarkan transparan agar background batik bawaan .app-nav tetap terlihat */
        background: transparent !important; 
        box-shadow: none !important;
        border: none !important;
    }

    /* 2. Memastikan ikon dan teks di dalam tombol ikut sejajar ke samping */
    .app-nav .nav-bottom .nav-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ==========================================================
   TOMBOL ADMIN TOOLS JADWAL (KUNING TERANG -> PUTIH GELAP)
   ========================================================== */

/* 1. Keseragaman Tombol (Tambah, Cetak, Kelas, Mapel, Mustahiq) */
.btn-tool-kuning {
    background-color: #ffc107 !important; /* Kuning Terang */
    color: #1e293b !important; /* Teks Hitam/Biru Gelap agar kontras terbaca */
    border: none !important;
    border-radius: 50px !important; /* Bentuk Kapsul/Pill */
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.3) !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}

.btn-tool-kuning:hover {
    background-color: #e0a800 !important; /* Kuning lebih gelap saat disentuh */
    transform: translateY(-2px) !important; /* Efek melayang */
    box-shadow: 0 6px 15px rgba(224, 168, 0, 0.4) !important;
}

.btn-tool-kuning:active {
    transform: scale(0.95) !important; /* Efek ditekan */
}

/* 2. Khusus Tombol Refresh (Hanya Ikon) */
.btn-tool-refresh {
    background: transparent !important;
    border: none !important;
    color: #1e293b !important; /* Warna kuning mengikuti tema tombol sebelahnya */
    font-size: 26px !important;
    padding: 5px !important;
    margin-left: 5px;
    box-shadow: none !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease !important;
    outline: none;
}

/* Efek berputar elegan saat disorot */
.btn-tool-refresh:hover {
    transform: rotate(180deg) !important;
    color: #e0a800 !important;
}

.btn-tool-refresh:active {
    transform: rotate(180deg) scale(0.8) !important;
}

/* ==========================================================
   TUKANG CAT MALAM: EFEK SAAT DARK MODE (JADI PUTIH)
   ========================================================== */
body.dark-mode .btn-tool-kuning {
    background-color: #ffffff !important;
    color: #0f172a !important; /* Teks gelap pekat */
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .btn-tool-kuning:hover {
    background-color: #e2e8f0 !important; /* Abu-abu putih saat disentuh */
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .btn-tool-refresh {
    color: #ffffff !important;
}

body.dark-mode .btn-tool-refresh:hover {
    color: #cbd5e1 !important;
}


/* ==========================================================
   KOTAK INFO BADAL (TERANG & GELAP)
   ========================================================== */

/* Mode Terang (Biru Lembut) */
.badal-info-box {
    background: #e3f2fd; 
    color: #002060; 
    padding: 12px; 
    border-radius: 8px; 
    font-size: 12px; 
    margin-bottom: 15px; 
    border-left: 4px solid #002060;
    line-height: 1.4;
}

/* Mode Gelap (Transparan dengan Aksen Kuning Emas) */
body.dark-mode .badal-info-box {
    background: rgba(255, 193, 7, 0.1) !important; 
    color: #cbd5e1 !important; /* Teks abu-abu terang agar nyaman dibaca */
    border-left: 4px solid #ffc107 !important; 
}

/* Memastikan teks tebal (bold) di dalam kotak ikut menyala di mode gelap */
body.dark-mode .badal-info-box b {
    color: #ffc107 !important; 
}

/* ==========================================================
           PERBAIKAN WARNA LACI JADWAL (MODE GELAP)
           ========================================================== */
        body.dark-mode .section-card .drawer-body {
            background-color: #0f172a !important;
            border-top: 1px solid #334155 !important;
        }