/* --- PALET WARNA --- */
:root {
    --bs-primary: #0d6efd;
    --bs-success: #198754;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-info: #0dcaf0;
    --bs-secondary: #6c757d;
}

/* --- Pengaturan Global --- */
body {
    background-color: #f4f7f6;
    color: #343a40;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
    display: flex; /* Tambahkan ini agar child bisa menggunakan flex-grow */
    flex-direction: column;
}

/* --- Penyesuaian UI --- */
.navbar-dark .navbar-nav .nav-link.active {
    font-weight: 700;
    color: #ffffff;
}
.navbar-dark .navbar-nav .nav-link {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

.btn:focus, .btn:active {
   outline: none !important;
   box-shadow: none !important;
}
.btn-primary:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-success:hover { background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-warning:hover { background-color: var(--bs-warning); border-color: var(--bs-warning); }
.btn-danger:hover { background-color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-secondary:hover { background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.btn-info:hover { background-color: var(--bs-info); border-color: var(--bs-info); }

.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.action-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-buttons .btn i {
    margin-right: 0.35rem;
}

.tp-title {
    min-width: 0;
}

/* --- CSS Halaman Spesifik --- */
.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* KUNCI: Hitung tinggi minimal = 100% viewport - tinggi footer */
    /* Asumsi tinggi footer ~60px, sesuaikan jika perlu */
    min-height: calc(100vh - 60px);
    padding: 1rem; /* Beri padding agar konten tidak mepet tepi */
    /* Hapus flex-grow jika masih ada */
}
.hero-section h1 { font-weight: 700; font-size: 3.5rem; }
.hero-section p.lead { font-size: 1.25rem; max-width: 750px; margin: 1rem auto; }

/* Tambahkan sedikit margin bawah pada grup tombol agar tidak terlalu mepet footer */
.hero-section .mt-1 { /* Target div pembungkus tombol */
    margin-bottom: 1rem;
}

/* Opsional: Perkecil font di layar sangat kecil agar muat */
@media (max-height: 600px) { /* Jika tinggi layar pendek */
     .hero-section h1 {
         font-size: 3rem;
     }
      .hero-section p.lead {
         font-size: 1.5rem;
     }
}
@media (max-width: 400px) { /* Jika lebar layar sempit */
     .hero-section h1 {
         font-size: 3rem;
     }
     .hero-section .btn {
          padding: .5rem .75rem; /* Perkecil padding tombol */
          font-size: 1.3rem;
     }
}

.feature-icon { font-size: 2.5rem; color: var(--bs-primary); }
.section-bg { background-color: #ffffff; }
.section-bg-light { background-color: #f8f9fa; }

.full-page-container {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 100%; padding: 2rem 1rem;
    background-color: #f0f4f8;
    flex-grow: 1; /* Pastikan container ini juga bisa tumbuh */
}
.form-signin, .form-register { width: 100%; max-width: 420px; padding: 25px; margin: auto; }

.role-card, .role-card:hover { 
    text-decoration: none !important;
    color: inherit; 
    display: block; 
}
.role-card .card {
    transition: all 0.2s ease-in-out;
}
.role-card:hover .card {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Tata Letak Sticky untuk Halaman Studio */
.studio-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px - 48px); 
}
.studio-fixed-header {
    flex-shrink: 0;
    background-color: #f4f7f6;
}
.tab-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
}

/* --- Penyesuaian Tampilan Mobile (Responsif) --- */
@media (max-width: 767.98px) {
    
    .studio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .studio-header > div:last-child {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .card-body.d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .card-body .tp-title {
        text-align: center;
        margin: 0 !important;
    }
    .action-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .action-buttons .btn, .action-buttons form, .action-buttons form .btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* Tata Letak untuk Daftar Materi Pokok di Halaman Detail TP (Mobile) */
    .materi-item-container {
        flex-direction: column;
        align-items: center; /* KUNCI 1: Posisikan semua itemnya (judul & tombol) ke tengah */
        gap: 1rem;  
    }

    .materi-item-container > div:first-child {
        text-align: center;
    }


    .materi-item-container > div:last-child {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pojok-baca-header {
        padding: 1.5rem !important;
    }
    .pojok-baca-header h1 {
        font-size: 2rem;
    }
    .pojok-baca-header p {
        font-size: 1rem;
    }
    .pojok-baca-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

   /* Tata Letak Tombol Aksi Materi Pokok (Mobile) */
    .materi-action-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;  /* Buat semua tombol sama lebar */
        gap: 0.5rem;
        width: 60%; /* KUNCI 2: Atur lebar grup tombol, misal 60% dari kartu */
        max-width: 280px; /* Batasi lebar maksimal agar tidak terlalu besar */
    }

    .materi-action-buttons .btn,
    .materi-action-buttons form {
        width: 100%;
    }

    /* Membuat tabel di halaman monitoring menjadi responsif */
    .table-responsive table thead {
        display: none; /* Sembunyikan header tabel di mobile */
    }
    .table-responsive table tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
    }
    .table-responsive table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .75rem;
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
    .table-responsive table td:last-child {
        border-bottom: none;
    }
    .table-responsive table td::before {
        content: attr(data-label); /* Tampilkan label dari atribut data-label */
        font-weight: bold;
        margin-right: 1rem;
    }

    #subjectDashboardTab, #mapelTab {
        flex-wrap: nowrap; /* Mencegah wrapping */
        overflow-x: auto;  /* Aktifkan scroll horizontal */
        overflow-y: hidden; /* Sembunyikan scroll vertikal */
        /* Optional: White space nowrap for items if needed */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Scrolling halus di iOS */
    }

    #subjectDashboardTab .nav-item, #mapelTab .nav-item {
        flex-shrink: 0; /* Mencegah item menyusut */
    }
}

/* Tata Letak Sticky untuk Halaman Monitoring */
.monitoring-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px - 48px); 
}
.monitoring-fixed-header {
    flex-shrink: 0;
    background-color: #f4f7f6;
}
.monitoring-scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
}
.monitoring-scrollable-content .table {
    margin-bottom: 0;
}

/* Tata Letak Sticky untuk Tab di Halaman Detail Murid */
.detail-tabs-container {
    display: flex;
    flex-direction: column;
    /* Atur tinggi maksimal agar tidak memanjang ke bawah jika konten sedikit */
    max-height: 60vh;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
}
.detail-tabs-fixed-header {
    flex-shrink: 0;
}
.detail-tabs-scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Perbaikan untuk memastikan tab di halaman Detail Murid selalu horizontal */
.detail-tabs-fixed-header .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;  /* <-- TAMBAHKAN INI */
    overflow-y: hidden; /* <-- Tambahkan ini untuk kebersihan */
    white-space: nowrap; /* <-- Bantu browser render */
    -webkit-overflow-scrolling: touch; /* <-- Scrolling halus di iOS */
}

/* Penyesuaian Posisi Badge Notifikasi */
#notificationDropdown {
    position: relative;
}
#notificationDropdown .badge {
    position: absolute;
    top: 2px;
    right: -5px;
    font-size: 0.6em;
    padding: 0.3em 0.5em;
}

/* --- Styling untuk Lampiran Diskusi --- */
.attachment-img {
    max-width: 250px;
    max-height: 250px;
    height: auto;
    width: auto;
    border-radius: 0.5rem;
    margin-top: 10px;
    cursor: pointer;
    display: block;
    object-fit: cover;
    border: 1px solid #dee2e6;
}

/* --- Styling untuk Topik Diskusi dari Guru --- */
.teacher-thread {
    background-color: #e7f3fe; /* Warna biru muda */
    border-color: #b6d4fe;
}

/* Judul yang hanya muncul saat print */
.print-title {
    display: none; /* Sembunyi secara default */
}

@media print {
    /* Sembunyikan elemen yang tidak perlu dicetak */
    .navbar,
    .btn, /* Semua tombol */
    .non-printable, /* Elemen dengan class ini */
    .accordion-button::after, /* Panah accordion */
    .modal, /* Sembunyikan modal jika terbuka */
    footer /* Footer jika ada */
    {
        display: none !important;
    }

    /* Tampilkan judul print */
    .print-title {
        display: block !important;
    }

    /* Pastikan area cetak menggunakan lebar penuh */
    .printable-area {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10mm; /* Beri margin halaman */
        box-shadow: none !important;
        border: none !important;
    }

    /* Atur agar accordion yang collapse tetap terlihat saat print */
    .collapse:not(.show) {
        display: block !important;
    }

    /* Hapus background dan border pada beberapa elemen */
    body, .card, .list-group-item, .accordion-item {
        background-color: #fff !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Atur ulang padding/margin agar lebih rapi */
    .card-body, .accordion-body {
        padding: 0 !important;
    }
    .container {
         padding: 0 !important;
    }

    /* Hindari halaman terpotong di tengah tabel atau list item */
    tr, li, .card {
        page-break-inside: avoid;
    }

     /* Pastikan chart di Peta Kompetensi tidak terlalu besar */
    .chart-container {
        height: 60vh !important; /* Kurangi tinggi chart */
        max-width: 90%; /* Batasi lebar */
        margin: auto;
    }
}

/* --- Tata Letak Sticky untuk Halaman Jalur Belajar --- */
.jalur-belajar-container {
    display: flex;
    flex-direction: column;
    /* Sesuaikan tinggi ini jika header/footer Anda berbeda */
    height: calc(100vh - 56px - 48px);
}
.jalur-belajar-fixed-header {
    flex-shrink: 0;
    background-color: #f4f7f6; /* Warna latar belakang body */
    padding-bottom: 0; /* Hapus padding bawah agar tab menempel */
}
.jalur-belajar-scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem; /* Beri padding untuk konten di dalam */
    border: 1px solid #dee2e6;
    border-top: none; /* Hapus border atas karena sudah ada garis tab */
    border-radius: 0 0 .375rem .375rem; /* Sudut bawah rounded */
}

/* Penyesuaian agar tab tidak terlalu dempet di mobile */
@media (max-width: 767.98px) {
    .jalur-belajar-fixed-header .nav-tabs .nav-link {
        padding: .5rem .75rem; /* Perkecil padding tab di mobile */
        font-size: 0.9rem;
    }
    .jalur-belajar-scrollable-content {
        padding: 0.75rem; /* Perkecil padding konten di mobile */
    }
}

/* Styling for Dashboard Tabs */
.dashboard-tab-content .tab-pane .card {
    border-top-left-radius: 0; /* Remove top-left radius to align with tab */
    border-top-right-radius: 0; /* Remove top-right radius */
    border-top: none; /* Remove top border as tab provides visual separation */
}

/* Header */
.sticky-top-header {
    position: fixed; /* Membuat header tetap di posisinya */
    top: 0;          /* Menempel di bagian atas */
    left: 0;
    right: 0;
    z-index: 1030;   /* Pastikan di atas konten lain (Bootstrap navbar z-index default) */
    background-color: var(--bs-primary); /* Pastikan ada background jika perlu */
}

/* Footer */
.sticky-bottom-footer {
    position: fixed; /* Membuat footer tetap di posisinya */
    bottom: 0;       /* Menempel di bagian bawah */
    left: 0;
    right: 0;
    z-index: 1020;   /* Sedikit di bawah header */
    background-color: #f8f9fa; /* Warna background footer (sesuaikan jika perlu) */
    border-top: 1px solid #dee2e6; /* Garis pemisah tipis */
    padding-top: 0.75rem; /* Beri sedikit padding atas */
    padding-bottom: 0.75rem; /* Beri sedikit padding bawah */
}

/* Penyesuaian Padding untuk Konten Utama */
body {
    padding-bottom: 60px; /* Sesuaikan! */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(header.sticky-top-header) {
     padding-top: 56px; /* Atau tinggi header Anda */
}

main.main-content-area {
    flex-grow: 1; /* KUNCI: Biarkan main mengisi ruang */
    display: flex;
    flex-direction: column;
}

/* Hapus padding atas/bawah dari main jika request.endpoint == 'index' */
main.main-content-area.p-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     /* Pastikan flex-grow tetap ada di sini juga */
     flex-grow: 1;
}

/* Penyesuaian untuk halaman full-page-container agar tidak terpotong footer */
.full-page-container {
     /* Pastikan tingginya mempertimbangkan padding body */
     min-height: calc(100vh - 56px - 60px); /* tinggi layar - header - footer */
     padding-bottom: 1rem; /* Beri sedikit jarak bawah tambahan */
}

/* Penyesuaian agar Flash Message tidak tertutup header */
div[style*="position: fixed"][style*="top: 1rem"] {
    top: calc(56px + 1rem) !important; /* Tinggi header + margin awal */
}