/* css/main.css */

/* ===================================================================== */
/* PENGATURAN GLOBAL & FONT                                              */
/* ===================================================================== */
body {
    /* PERBAIKAN: Mencegah scroll horizontal yang merusak layout */
    overflow-x: hidden; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

/* ===================================================================== */
/* ARSITEKTUR SCENE UTAMA                                                */
/* ===================================================================== */
.scene {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #212529; 
}

.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* ===================================================================== */
/* STYLING SPESIFIK UNTUK SETIAP SCENE                                   */
/* ===================================================================== */

/* --- Splash Screen & Main Menu (Tidak ada perubahan) --- */
#splash-logo {
    width: 150px;
    opacity: 0;
    transform: scale(0.8);
}
#scene-splash h2 {
    opacity: 0;
}
.main-menu-button:hover {
    transform: translateY(-5px); 
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
}

/* --- Main App Scene --- */
#scene-app {
    position: relative; 
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* FITUR BARU: Membuat header melayang (sticky) */
#scene-app .navbar.sticky-top {
    z-index: 1030; /* Pastikan navbar berada di atas konten lain saat scroll */
}

#plot-container {
    border: 1px solid #495057; 
}

[data-bs-toggle="tooltip"] {
    cursor: help;
}

/* ===================================================================== */
/* UI/UX IMPROVEMENTS & STYLING FITUR BARU                               */
/* ===================================================================== */

/* PERBAIKAN: Gaya baru untuk tombol di Panel Informasi agar terlihat jelas */
.info-accordion-button {
    background-color: #343a40 !important; /* Warna abu-abu gelap, sedikit beda dari latar */
    color: #0dcaf0 !important; /* Warna text info (cyan) agar menonjol */
    border: 1px solid #495057;
    margin-top: -1px; /* Trik agar border antar tombol tumpang tindih dengan rapi */
}
.info-accordion-button:not(.collapsed) {
    border-color: #0dcaf0; /* Beri highlight saat aktif/terbuka */
    box-shadow: none; /* Hapus shadow default Bootstrap */
}

/* FITUR 7: Styling untuk Tabel Nilai */
#value-table-container table {
    color: #dee2e6; /* Warna teks terang untuk tabel */
}
#value-table-container thead {
    background-color: #343a40; /* Header tabel lebih gelap */
}
#value-table-container .table-bordered {
    border-color: #495057; /* Warna border yang konsisten */
}

/* FITUR 9: Styling untuk Color Picker di Modal Pengaturan */
.form-control-color {
    background-color: transparent; /* Hapus background default agar menyatu */
    border-color: #495057;
    padding: 0.1rem 0.2rem; /* Sedikit padding agar tidak terlalu mepet */
}

/* ===================================================================== */
/* KUSTOMISASI TAMPILAN LIBRARY EKSTERNAL                                */
/* ===================================================================== */

/* --- Kustomisasi Pace.js Loading Bar (Tidak ada perubahan) --- */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #0dcaf0;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 5px;
  box-shadow: 0 0 10px #0dcaf0, 0 0 5px #0dcaf0;
}

/* --- Kustomisasi Bootstrap Accordion (di Panel Kontrol) --- */
#controlAccordion .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #343a40;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}
#controlAccordion .accordion-button::after {
    display: none;
}
/* ===================================================================== */
/* PERBAIKAN BUG & PENINGKATAN UI MODAL TUTORIAL                       */
/* ===================================================================== */

#welcomeModal .modal-body {
    /* [BUG FIX] Memaksa body modal untuk tumbuh dan mengambil ruang kosong, 
       mendorong footer ke bawah secara konsisten. */
    flex-grow: 1;
    overflow-y: auto; /* Tambahkan scroll jika konten sangat panjang di layar kecil */
}

#welcomeModal .carousel-item {
    /* [UX Improvement] Memberi tinggi minimum agar ukuran modal tidak "melompat-lompat" 
       secara drastis saat berganti slide dengan konten yang panjangnya berbeda. */
    min-height: 250px; 
    
    /* [BUG FIX] Memberi sedikit ruang napas di bagian bawah konten agar tidak
       terlalu mepet dengan indikator carousel (titik-titik di bawahnya). */
    padding-bottom: 20px; 
}
/* ===================================================================== */
/* GAYA UNTUK TIPE SOAL KUIS INTERAKTIF                                */
/* ===================================================================== */

/* --- Tipe Soal Matching --- */
.matching-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.matching-column {
    flex: 1;
}
.matching-item {
    padding: 15px;
    margin-bottom: 10px;
    border: 2px solid #495057;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.matching-item:hover {
    background-color: #343a40;
}
.matching-item.selected {
    border-color: #0dcaf0; /* Biru Info */
    background-color: #0dcaf020;
}
.matching-item.matched-correct {
    border-color: #198754; /* Hijau Sukses */
    background-color: #19875420;
    cursor: default;
    opacity: 0.6;
}
.matching-item.matched-wrong {
    border-color: #dc3545; /* Merah Bahaya */
    background-color: #dc354520;
}

/* --- Tipe Soal Identify-on-Graph --- */
#quiz-graph-container .point-label {
    position: absolute;
    transform: translate(-50%, -150%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    pointer-events: none; /* Agar tidak mengganggu klik */
}
#quiz-graph-container .point-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgba(255, 193, 7, 0.5); /* Kuning Transparan */
    border: 2px solid #ffc107;
    cursor: pointer;
    transition: transform 0.2s;
}
#quiz-graph-container .point-marker:hover {
    transform: translate(-50%, -50%) scale(1.2);
}