/* * ============================================================
 * MODERN CUSTOM STYLE - SMK PEMBANGUNAN YPT
 * Gabungan Gayague nih :)
 * ============================================================
 */

/* --- 1. GLOBAL UI & FIXES --- */
#global-loader {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    left: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swal2-popup {
    border-radius: 15px !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem !important;
}

/* Custom Scrollbar */
.overflow-auto::-webkit-scrollbar { height: 5px; width: 5px; }
.overflow-auto::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }
.overflow-auto::-webkit-scrollbar-track { background: transparent; }

/* --- 2. GLASSMORPHISM & SOFT COLORS (MODERN) --- */
.bg-soft-primary   { background-color: rgba(61, 94, 225, 0.1) !important; color: #3d5ee1 !important; }
.bg-soft-warning   { background-color: rgba(255, 159, 67, 0.1) !important; color: #ff9f43 !important; }
.bg-soft-success   { background-color: rgba(30, 166, 154, 0.1) !important; color: #1ea69a !important; }
.bg-soft-info      { background-color: rgba(0, 184, 217, 0.1) !important; color: #00b8d9 !important; }
.bg-soft-danger    { background-color: rgba(255, 75, 75, 0.1) !important; color: #ff4b4b !important; }
.bg-soft-secondary { background-color: rgba(108, 117, 125, 0.1) !important; color: #6c757d !important; }

.border-dashed { border: 1px dashed #dee2e6 !important; }
.border-2      { border-width: 2px !important; }

/* --- 3. TYPOGRAPHY & DIGITAL CLOCK --- */
.fw-black { font-weight: 900; }
.italic   { font-style: italic; }
.fs-12 { font-size: 12px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-18 { font-size: 18px !important; }

#digital-clock, #realtime-clock {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    letter-spacing: 1px;
}

/* --- 4. INTERACTIVE & HOVER EFFECTS --- */
.transition { transition: all 0.3s ease-in-out !important; }
.hover-zoom:hover { transform: scale(1.05); transition: 0.3s; }
.hover-up:hover   { transform: translateY(-5px); transition: 0.3s; }

/* --- 5. MOBILE HEADER FIX --- */
@media (max-width: 991.98px) {
    .header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important;
        height: 60px !important;
    }
    #mobile_btn { position: relative !important; order: 2 !important; }
    .header-user, .logo-small, #toggle_btn, .nav-search-inputs { display: none !important; }
}

/* --- 6. MASTER CETAK UNIVERSAL (RAPORT & JURNAL) --- */
.kop-wadah { display: flex; align-items: center; padding-bottom: 5px; }
.kop-logo  { flex: 0 0 100px; text-align: center; }
.kop-logo img { width: 85px; height: auto; }
.kop-teks  { flex: 1; text-align: center; padding-right: 100px; color: #000 !important; }
.kop-teks h2 { font-size: 16pt !important; font-weight: bold; margin: 2px 0 !important; }
.kop-teks h4 { font-size: 13pt !important; font-weight: bold; margin: 0; }
.garis-kop { border-top: 3px solid #000; border-bottom: 1px solid #000; height: 5px; margin: 5px 0 20px 0; }

table.table-cetak { width: 100% !important; border-collapse: collapse !important; margin-bottom: 15px; }
table.table-cetak th { 
    border: 1px solid #000 !important; padding: 10px 4px !important; 
    font-size: 9pt !important; background-color: #f2f2f2 !important; 
}
table.table-cetak td { border: 1px solid #000 !important; padding: 8px 4px !important; font-size: 8.5pt !important; color: #000 !important; }

.row-ttd { display: flex; justify-content: space-between; margin-top: 15px; page-break-inside: avoid; }
.box-ttd { flex: 0 0 35%; text-align: center; }

/* --- 7. TOAST & NOTIFICATION --- */
.custom-toast {
    min-width: 250px; padding: 15px 20px; border-radius: 8px; color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-success { background: #28a745; }
.toast-error   { background: #dc3545; }
/* --- 8. EXAM & CBT SYSTEM STYLES --- */
.alert-soft-primary {
    background-color: rgba(54, 153, 255, 0.1);
    border-left: 5px solid #3699ff !important;
}

.nav-pills-bg .nav-link {
    color: #6c757d;
    border: 1px solid #ebedf2;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.nav-pills-bg .nav-link.active {
    background-color: #3699ff !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(54, 153, 255, 0.3);
    border-color: #3699ff;
}

/* Kartu Ujian Hover */
.card-hover:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Khusus Halaman Pengerjaan Siswa (Full Screen Mode) */
.exam-mode .sidebar, 
.exam-mode .header, 
.exam-mode .footer { 
    display: none !important; 
}

.exam-mode .page-wrapper { 
    margin-left: 0 !important; 
    padding-top: 20px !important; 
}

.exam-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Timer & Navigation Quiz */
.quiz-nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid #dee2e6;
    background: #fff;
    transition: 0.2s;
}

.quiz-nav-btn.active { background: #3d5ee1; color: #fff; border-color: #3d5ee1; }
.quiz-nav-btn.answered { background: #1ea69a; color: #fff; border-color: #1ea69a; }

/* --- TAMBAHAN KHUSUS: CETAK JADWAL MATRIKS --- */
@media print {
    /* Judul Rombel Vertikal (Agar Rapih) */
    .rombel-header {
        height: 100px; /* Tinggi header ditingkatkan untuk teks vertikal */
        vertical-align: bottom !important;
        padding: 5px 0 !important;
        text-align: center;
    }
    
    .rombel-header div {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin: 0 auto;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 8pt;
    }

    /* Istirahat Benar-benar di Tengah */
    .bg-istirahat {
        background-color: #e0e0e0 !important;
        text-align: center !important;
        vertical-align: middle !important;
        -webkit-print-color-adjust: exact;
    }

    /* Tabel Matrix */
    .table-cetak {
        width: 100% !important;
        table-layout: fixed; /* Membagi kolom secara adil */
        border-collapse: collapse;
    }

    .table-cetak td {
        text-align: center;
        vertical-align: middle;
        word-wrap: break-word;
        height: 40px; /* Memberi ruang agar tidak terlalu mepet */
    }

    .nama-hari-vertikal {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        text-align: center !important;
        vertical-align: middle !important;
        font-weight: 900 !important; /* Sangat Tebal */
        font-size: 14pt !important;  /* Ukuran Lebih Besar */
        background-color: #f2f2f2 !important;
        width: 45px !important;      /* Lebar kolom hari sedikit ditambah */
        letter-spacing: 2px;
        border: 1.5pt solid #000 !important;
        text-transform: uppercase;
    }

    /* --- MODE 1: MASTER (Banyak Kelas - Judul Berdiri) --- */
    .rombel-header-master {
        height: 120px;
        vertical-align: bottom !important;
        padding-bottom: 10px !important;
    }
    .rombel-header-master div {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        margin: 0 auto;
        font-weight: bold;
        font-size: 9pt;
    }

    /* --- MODE 2: INDIVIDU (1 Kelas - Judul Mendatar) --- */
    .rombel-header-individu {
        height: 50px;
        vertical-align: middle !important;
        text-align: center !important;
        background-color: #eee !important;
    }
    .rombel-header-individu div {
        writing-mode: horizontal-tb; /* Normal */
        transform: none;
        font-size: 14pt; /* Nama kelas jadi besar dan jelas */
        font-weight: 800;
    }

    /* Merapikan isi jadwal jika mode individu (agar font lebih besar) */
   .cell-individu .mapel-font {
    font-size: 12pt !important;
    display: block;
}
.cell-individu .guru-font {
    font-size: 10pt !important;
    display: block;
}
    .wrapper-ttd {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Memastikan gambar cap transparan menimpa TTD dengan halus */
    .wrapper-ttd img {
        pointer-events: none;
    }
}
/* --- 9. JADWAL MATRIKS UI (ADMIN DASHBOARD) --- */

/* Sticky Column: Kunci kolom agar tidak hilang saat scroll ke kanan */
.table-matrix thead th:nth-child(1), 
.table-matrix thead th:nth-child(2) {
    position: sticky; 
    left: 0; 
    z-index: 10; 
    background-color: #f8f9fa !important;
}
.table-matrix thead th:nth-child(2) { 
    left: 50px; 
} 

.table-matrix tbody td:nth-child(1), 
.table-matrix tbody td:nth-child(2) {
    position: sticky; 
    left: 0; 
    z-index: 5; 
    background-color: #f8f9fa !important;
    border-right: 1px solid #dee2e6 !important;
}
.table-matrix tbody td:nth-child(2) { 
    left: 50px; 
}

/* UI Enhancement untuk Sel Jadwal */
.cell-jadwal { 
    min-width: 150px; 
    transition: all 0.2s; 
    border-right: 1px solid #f1f1f1 !important; 
}
.cell-jadwal:hover { 
    background-color: #f0f7ff !important; 
}
.text-light-extra { 
    color: #e9ecef; 
}
.italic { 
    font-style: italic; 
}

/* Tab Style (Solid Warning) */
.nav-tabs-solid .nav-link.active {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
}