/* ==========================================================================
   RESPONSIVE UI SYSTEM - TypeCode
   --------------------------------------------------------------------------
   Lapisan responsive menyeluruh untuk SEMUA jenis perangkat:
   Mobile (≤ 480px) → Tablet (≤ 820px) → Laptop (≤ 1024px) → Desktop (≥ 1400px).

   File ini dimuat SETELAH styles.css sehingga aturan di sini menang atas
   aturan lama (cascade). Pendekatan: mobile-friendly fluid base + breakpoint
   terstruktur, tanpa mengubah satu pun file backend.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLUID BASE - penyesuaian relatif untuk semua ukuran layar
   -------------------------------------------------------------------------- */
.app-layout {
    /* Layout dinamis: manfaatkan seluruh lebar viewport agar tabel lebar
       (mis. Rekap Nilai per Kelas) terlihat utuh tanpa digeser ke kanan. */
    max-width: none;
    /* Padding menyusut mengikuti lebar layar secara relatif */
    padding-right: clamp(12px, 2.5vw, 24px);
    padding-left: clamp(12px, 2.5vw, 24px);
}

body {
    /* 100dvh lebih akurat di mobile (URL bar menyembunyikan/muncul) */
    min-height: 100vh;
    min-height: 100dvh;
}

.content-area {
    padding-top: clamp(14px, 2vw, 24px);
    padding-bottom: clamp(14px, 2vw, 24px);
}

.view-panel {
    gap: clamp(14px, 2vw, 24px);
}

/* Cegah nama brand panjang memaksa nav meluber di layar kecil */
.brand-info {
    min-width: 0;
}

.brand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#welcome-view.active {
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
}

/* --------------------------------------------------------------------------
   2. TABLET / LAPTOP KECIL  (≤ 1180px)
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    /* Nav tetap ringkas; tab ikon sudah ditangani styles.css */
    .nav-brand { min-width: 0; }
    .nav-actions { flex: none; }

    /* Grid kartu rekap level: 3 kolom agar seimbang di laptop kecil */
    .history-level-grid,
    .admin-level-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}

/* --------------------------------------------------------------------------
   3. TABLET PORTRAIT & LAPTOP SEMPIT  (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Editor explorer: panel di bawah editor sudah otomatis di 992px */
    .editor-body {
        padding: 18px 20px 18px 0;
    }

    .admin-header { padding: 20px; }
    .admin-content { padding: 20px; }

    /* Ringkas judul halaman admin */
    .admin-title { font-size: 20px; }

    /* Form grid 2 kolom cukup di tablet */
    .form-grid { gap: 10px 12px; }
}

/* --------------------------------------------------------------------------
   4. TABLET SEMPIT / TABEL LEBAR  (≤ 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Tabel lebar → scroll horizontal mulus, bukan menyusut tak terbaca */
    .history-table,
    .admin-table,
    .explain-full-table {
        min-width: 880px;
    }
    /* Tabel riwayat (index.html) dibungkus .history-table-wrap, bukan
       .table-responsive - beri overflow-x agar min-width 880px dapat
       digulung, bukan terpotong oleh .history-table-container{overflow:hidden} */
    .history-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Admin toolbar: search + aksi menumpuk agar tidak terpotong */
    .admin-toolbar {
        flex-wrap: wrap;
    }
    .admin-toolbar .search-box {
        flex: 1 1 100%;
        min-width: 0;
    }
    .toolbar-actions { flex-wrap: wrap; }

    /* Kartu soal penilaian 2 kolom → 1 kolom */
    .explain-compare-grid,
    .stage4-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   5. TABLET PORTRAIT  (≤ 820px)
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    /* NAV - kolom tengah fleksibel & dapat digulung (tidak meluber) */
    .top-nav {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }
    .nav-tabs {
        justify-self: stretch;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { flex: none; }

    /* Admin tabs juga scrollable horizontal */
    .admin-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab-btn {
        flex: none;
        white-space: nowrap;
    }

    /* Explorer panel yang bertumpuk di bawah editor */
    .vscode-explorer-panel { min-height: 240px; }

    /* Sticky kode di modal penjelasan nonaktif saat menumpuk */
    .explanation-left-col { position: static; }
    .explanation-fields { max-height: none; }

    /* Footer */
    .app-footer { flex-wrap: wrap; gap: 6px; padding: 16px 8px; }

    /* History: kartu ringkas 2 kolom */
    .history-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
}

/* --------------------------------------------------------------------------
   6. MOBILE LEBAR  (≤ 720px)  - hp besar & tablet kecil
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .top-nav { height: 60px; }
    .nav-btn { width: 34px; height: 34px; min-width: 34px; }
    .nav-btn-wrap .nav-btn.sound-menu-btn,
    .nav-btn-wrap .nav-btn.theme-menu-btn { width: 34px; }
    .nav-tab { padding: 8px 12px !important; font-size: 12.5px !important; }

    /* EDITOR - header ringkas: hilangkan dots macOS, tombol jadi ikon */
    .editor-dots { display: none; }
    .editor-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 8px 12px;
    }
    .editor-title {
        justify-self: stretch;
        font-size: 12px;
        padding: 4px 10px;
    }
    .editor-btn {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 0 !important;   /* sembunyikan teks tombol (menang atas pill system) */
        justify-content: center;
    }
    .editor-btn i { font-size: 13px; margin: 0; }
    .editor-actions { gap: 6px; }
    .soal-progress-badge { font-size: 0.7rem; padding: 2px 8px; }

    /* Status bar - sembunyikan item pelengkap (Spaces / UTF-8) */
    .editor-statusbar { gap: 10px; padding: 4px 12px; }
    .editor-statusbar .status-item:nth-last-child(-n+2) { display: none; }

    /* Gutter nomor baris lebih ramping */
    .editor-linenums { width: 44px; }

    /* Admin toolbar menumpuk penuh */
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-toolbar .search-box {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .admin-select { width: 100%; }

    /* Toolbar latihan */
    .toolbar-section { gap: 14px; }

    /* Modal penilaian: detail head tidak menempel saat scroll */
    .explain-detail-head { position: static; }
}

/* --------------------------------------------------------------------------
   7. PHONE  (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .top-nav { gap: 6px; }
    .brand-icon { width: 32px; height: 32px; font-size: 14px; }

    /* SEGMEN BAHASA/LEVEL - tombol bisa membungkus, tidak meluber */
    .toolbar-group { flex-wrap: wrap; }
    .segment-control { flex-wrap: wrap; max-width: 100%; }
    .segment-btn { padding: 7px 10px; }
    .toolbar-section { padding: 12px; }

    /* MODAL - padding & tipografi mengecil */
    .modal-backdrop { padding: 12px; }
    .modal-dialog { padding: 20px; }
    .modal-dialog h2 { font-size: 1.2rem; }
    .modal-header-top h2 { font-size: 1.08rem; }
    .modal-snippet-title {
        font-size: 0.74rem;
        padding: 5px 12px;
        max-width: 96%;
    }
    .modal-header-top .modal-sub { font-size: 0.8rem; }

    /* WELCOME - CTA full width & proporsional */
    .welcome-hero { padding: 24px 16px 20px; }
    .welcome-actions { flex-direction: column; }
    .welcome-cta-btn { width: 100%; }
    .welcome-greeting { padding: 16px 14px; }

    /* HISTORY - ringkas */
    .section-title h2 { font-size: 17px; }
    .section-header { align-items: flex-start; }
    .chart-viewport { min-height: 130px; }
    .bar-chart { height: 130px; gap: 8px; }
    .chart-bar-item { max-width: 40px; }
    .empty-table-state { padding: 24px 16px; }

    /* DOC (kartu kertas) - grid info & metrik menyesuaikan */
    .doc-info-grid { grid-template-columns: repeat(2, 1fr); }
    .doc-metrics { grid-template-columns: repeat(3, 1fr); }
    .doc-card { padding: 18px 16px; }
    .doc-modal-backdrop { padding: 16px 8px; }
    .doc-modal-dialog { padding: 12px; }

    /* Cegah zoom otomatis iOS saat fokus input (min. 16px) */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Target sentuh nyaman */
    .modal-footer-btns .btn,
    .welcome-cta-btn,
    .auth-submit-btn {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   8. PHONE KECIL  (≤ 560px)
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .nav-btn { width: 32px; height: 32px; }
    .nav-btn-wrap .nav-btn.sound-menu-btn,
    .nav-btn-wrap .nav-btn.theme-menu-btn { width: 32px; }

    /* EDITOR - ukuran font kode mengikuti layar (relatif) */
    .code-container {
        font-size: 15px;
        line-height: 1.7;
    }
    .editor-linenums {
        font-size: 11px;
        line-height: calc(15px * 1.7);
    }

    /* MODAL HASIL - banner nilai menumpuk */
    .res-final-banner {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 10px;
    }
    .res-final-left { flex-direction: column; text-align: center; }
    .res-final-value { font-size: 1.9rem; }
    .result-stats-grid { gap: 10px; }
    .res-box { padding: 10px 8px; }
    .res-value { font-size: 1.25rem; }

    /* Tombol footer modal menumpuk full width */
    .modal-footer-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .modal-footer-btns .btn { width: 100%; }

    /* MODAL AUTH */
    .auth-modal-card {
        padding: 26px 18px;
        border-radius: 16px;
    }
    .auth-title { font-size: 1.28rem; }

    /* ADMIN - konten lebih lega */
    .admin-content { padding: 16px 14px; }
    .admin-header { padding: 16px; }
    .admin-title { font-size: 18px; }
    .admin-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .admin-loading { height: 180px; }
    .admin-panel-layout { gap: 14px; padding: 12px 0; }

    /* Icon picker & likert lebih padat */
    .icon-picker-grid { grid-template-columns: repeat(5, 1fr); }
    .likert-ticks { grid-template-columns: repeat(5, 1fr); }
    .likert-tick-btn { min-height: 34px; }

    /* Baris komparasi bug fix menumpuk */
    .bugfix-compare-row { grid-template-columns: 1fr; }
    .bugfix-compare-status { text-align: left; }

    /* Penilaian penjelasan */
    .explain-score-main { flex-basis: 100%; min-width: 0; }
    .explain-final-preview { width: 100%; min-width: 0; }

    /* Stage 4 - titlebar tanpa dots, editor lebih pendek */
    .stage4-titlebar-dots { display: none; }
    .stage4-titlebar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 10px; }
    .stage4-tab { padding: 0 10px; font-size: 11px; }
    .stage4-editor { min-height: 220px; }
    .stage4-editor .cm-editor { min-height: 220px; }
    .stage4-statusbar .stage4-status-item:first-child,
    .stage4-statusbar .stage4-status-item:nth-last-child(-n+2) { display: none; }

    /* Profil */
    .profile-card { padding: 18px 16px; }

    /* Kartu level - statistik 2 kolom tetap rapi */
    .level-recap-card { padding: 14px; }
    .level-card-stats { gap: 8px 10px; }
}

/* Konsisten dengan styles.css: rekap per level 1 kolom di layar ≤ 520px
   (mencegah aturan minmax(210px) pada ≤1180px menang di layar sempit) */
@media (max-width: 520px) {
    .history-level-grid,
    .admin-level-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   9. PHONE SANGAT KECIL  (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .nav-brand { gap: 8px; }
    .nav-tab { padding: 8px 10px; }

    .stat-value { font-size: 24px; }
    .stat-card { min-height: 84px; }
    .stat-symbol { font-size: 16px; }

    .modal-dialog { padding: 16px; }
    .modal-backdrop { padding: 8px; }
    .modal-dialog-disqualify { padding: 20px 16px; }

    /* Overlay fokus & kunci soal - ramping di layar kecil */
    .focus-overlay .overlay-content {
        padding: 16px 18px;
        width: calc(100% - 32px);
        max-width: 420px;
    }
    .focus-overlay .overlay-content h3 { font-size: 0.95rem; }
    .overlay-icon { font-size: 24px; }
    .lock-overlay-content { padding: 24px 16px; }
    .lock-overlay-content h3 { font-size: 1.15rem; }
    .lock-overlay-content p { font-size: 0.82rem; }
    .lock-overlay-icon { width: 46px; height: 46px; font-size: 20px; }

    .toolbar-title { font-size: 11px; }
    .segment-btn { font-size: 12px; padding: 6px 8px; }
    .segment-btn i { font-size: 12px; }

    .mode-chip { padding: 8px 12px; font-size: 0.8rem; }
    .sesi-status-pill { font-size: 0.7rem; padding: 4px 10px; }

    /* Welcome */
    .welcome-hero-icon { width: 56px; height: 56px; font-size: 24px; }
    .welcome-title { font-size: 22px; }
    .welcome-tagline { font-size: 13.5px; }
    .welcome-greeting-name strong { font-size: 17px; }

    /* History summary */
    .history-summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .summary-card { padding: 12px; gap: 10px; }
    .summary-value { font-size: 18px; }

    /* Doc head menumpuk */
    .doc-head { flex-direction: column; gap: 10px; }
    .doc-meta { text-align: left; }
    .doc-meta-row { justify-content: flex-start; }

    /* Grid waktu sesi & chip sudah ditangani; pertegas label */
    .sesi-time-field { padding: 6px 10px; }
}

/* --------------------------------------------------------------------------
   10. PHONE TINY  (≤ 400px)  - 360px & lebih kecil
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .top-nav { height: 54px; }
    .brand-icon { width: 30px; height: 30px; }
    .nav-btn { width: 30px; height: 30px; }
    /* Chevron menu suara disembunyikan agar aksi nav tetap muat */
    .nav-btn-wrap .nav-btn.sound-menu-btn { display: none; }
    .nav-btn-wrap .nav-btn.theme-menu-btn { width: 30px; }
    .nav-btn-wrap > .nav-btn:first-child { border-radius: var(--radius-sm); }

    /* Statistik 1 kolom agar angka besar tetap terbaca */
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 76px; }

    /* Kode editor - skala lebih kecil lagi */
    .code-container {
        font-size: 13.5px;
        line-height: 1.65;
    }
    .editor-linenums {
        width: 38px;
        line-height: calc(13.5px * 1.65);
    }
    .editor-body { padding: 12px 10px 12px 0; }

    /* Indentasi pohon explorer menyesuaikan */
    .tree-item.level-indent-2 { margin-left: 12px; }
    .tree-item.level-indent-3 { margin-left: 24px; }

    .admin-title-wrap { gap: 10px; }
    .admin-badge-icon { width: 40px; height: 40px; font-size: 18px; }
}

/* --------------------------------------------------------------------------
   11. LANDSCAPE PHONE  (tinggi terbatas)
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .top-nav { height: 52px; }
    #welcome-view.active { min-height: auto; }
    .welcome-hero { padding: 20px 16px; }
    .welcome-hero-icon { width: 48px; height: 48px; margin-bottom: 12px; }
    .welcome-title { margin-bottom: 8px; }
    .welcome-tagline { margin-bottom: 16px; }
}

/* --------------------------------------------------------------------------
   12. DESKTOP LEBAR  (≥ 1400px)  - manfaatkan ruang ekstra
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .content-area { padding-top: 28px; padding-bottom: 28px; }
    .stats-grid { gap: 20px; }
    .editor-body { padding: 28px 32px 28px 0; }
    .admin-content { padding: 28px; }
    .admin-header { padding: 28px; }

}

/* --------------------------------------------------------------------------
   13. AKSESIBILITAS & PENGALAMAN SENTUH
   -------------------------------------------------------------------------- */
/* Scrollbar tipis & halus di kontainer scroll horizontal */
.table-responsive,
.code-scroll,
.admin-tabs,
.nav-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.table-responsive::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb,
.admin-tabs::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 4px;
}

/* Layar sentuh: matikan efek hover "terangkat" agar tidak tersangkut
   setelah diketuk (stuck hover) */
@media (hover: none) {
    .stat-card:hover,
    .level-recap-card:hover,
    .welcome-stat-chip:hover,
    .welcome-admin-item:hover,
    .welcome-cta-btn:hover,
    .welcome-cta-btn.btn-primary:hover,
    .welcome-cta-btn.btn-secondary:hover,
    .editor-btn:hover,
    .auth-submit-btn:hover {
        transform: none;
    }
}

/* Matikan animasi dekoratif bila pengguna meminta gerakan minimal */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}