/* ============================================================================
   RESPONSIVE.CSS  —  Tryout SNBT 2026
   ----------------------------------------------------------------------------
   Override responsive untuk desktop PC & mobile.
   Dimuat TERAKHIR (setelah style.css, admin.css, style-extra.css) supaya
   aturan di sini menang saat ada konflik.

   BREAKPOINTS:
     Desktop : >= 1025px
     Tablet  : 769-1024px
     Mobile  : <= 768px
     Small   : <= 480px
     Tiny    : <= 360px
   ============================================================================ */

/* ===== 1. ANTI-SCROLL HORIZONTAL GLOBAL ===== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== 2. TABEL: SCROLL, JANGAN MENUANG ===== */
@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .table-wrap table {
    min-width: 560px;
  }

  .admin-table {
    font-size: 0.85rem;
  }
}

/* ===== 3. FORM: INPUT & SELECT SELURUH LAYAR DI MOBILE ===== */
@media (max-width: 768px) {
  .form-control,
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* mencegah iOS auto-zoom saat fokus */
    padding: 0.6rem 0.75rem;
  }

  select.form-control {
    padding-right: 2rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.1rem;
  }

  .form-actions,
  .registrasi-actions,
  .kode-login-actions {
    flex-direction: column;
    gap: 0.6rem;
  }

  .form-actions .btn,
  .registrasi-actions .btn,
  .kode-login-actions .btn {
    width: 100%;
    min-height: 46px;
  }
}

/* ===== 4. TOMBOL: TARGET SENTUH MINIMAL 44px ===== */
@media (max-width: 768px) {
  .btn,
  .tab-btn,
  .btn-secondary,
  .btn-primary,
  .btn-success,
  .btn-warning {
    min-height: 44px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  .btn-small,
  .btn-peserta-delete {
    min-height: 40px;
/* ===== 5. BRAND BAR / TOPBAR ===== */
@media (max-width: 768px) {
  .brand-bar {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .brand-bar-inner {
    padding: 0.65rem 0.85rem;
    gap: 0.5rem;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .brand-text strong {
    font-size: 0.95rem;
  }

  .brand-text span {
    display: none;
  }

  .brand-meta {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (max-width: 400px) {
  .brand-text strong {
    font-size: 0.85rem;
  }

  .brand-meta {
    display: none;
  }
}

/* ===== 6. LOGIN / REGISTRASI CARD ===== */
@media (max-width: 768px) {
  .login-container {
    padding: 1rem 0.75rem;
    min-height: auto;
  }

  .login-box {
    padding: 1.25rem 1rem;
    border-radius: 12px;
    max-width: 100%;
  }

  .login-header h1 {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .login-header p {
    font-size: 0.85rem;
  }

  .registrasi-card {
    padding: 1.25rem 1rem;
    max-width: 100%;
  }

  .registrasi-header h2 {
    font-size: 1.15rem;
  }
}

/* ===== 7. TAB NAV: SCROLL HORIZONTAL DI MOBILE ===== */
@media (max-width: 768px) {
  .tab-nav {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
/* ===== 8. DASHBOARD: GRID SUBTEST ===== */
@media (max-width: 1024px) {
  .nav-col-subtests {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .subtest-grid,
  .nav-col-subtests {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 9. EXAM / TRYOUT: 2 KOLOM -> 1 KOLOM ===== */
@media (max-width: 1024px) {
  .exam-body {
    grid-template-columns: 1fr !important;
  }

  .question-nav {
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    order: 2;
  }

  .question-area {
    order: 1;
  }
}

@media (max-width: 768px) {
  .exam-header-inner,
  .exam-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .exam-info {
    flex: 1 1 100%;
    min-width: 0;
  }

  .exam-timer,
  .timer-display {
    font-size: 1.1rem !important;
    min-width: auto;
  }

  .question-area {
    padding: 1rem 0.75rem;
  }

  .question-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .option-item {
    padding: 0.85rem 0.75rem;
    min-height: 48px;
  }

  .navigation-bar {
    padding: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .navigation-bar .btn {
    flex: 1;
    min-width: 110px;
  }
}

/* ===== 10. GRID SOAL (NAVIGASI) ===== */
@media (max-width: 480px) {
  .question-grid {
    gap: 0.3rem !important;
  }

  .q-num {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 0.8rem !important;
  }
}

@media (max-width: 360px) {
  .question-grid {
    gap: 0.25rem !important;
  }

  .q-num {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
/* ===== 11. RESULT / HASIL UJIAN ===== */
@media (max-width: 768px) {
  .result-score {
    font-size: 2.5rem !important;
  }

  .subtest-result-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .subtest-result-row.header {
    display: none !important;
  }

  .pembahasan-item,
  .hasil-item {
    padding: 0.75rem;
  }
}

/* ===== 12. LEADERBOARD / PESERTA LIST ===== */
@media (max-width: 768px) {
  .peserta-item {
    padding: 0.75rem;
    gap: 0.6rem;
  }

  .peserta-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .peserta-nama {
    font-size: 0.9rem;
  }

  .peserta-meta {
    font-size: 0.78rem;
  }

  .monitor-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
}

/* ===== 13. ADMIN: SIDEBAR JADI DRAWER ===== */
@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 150;
  }

  .admin-main {
    margin-left: 0 !important;
    width: 100%;
  }

  .admin-sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 1.1rem;
    margin-right: 0.5rem;
  }
}

/* ===== 14. ADMIN: KARTU & STATISTIK ===== */
@media (max-width: 768px) {
  .admin-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }

  .stat-card {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .admin-welcome {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .admin-welcome > div {
    width: 100%;
  }

  .admin-nav-item {
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
  }
}

/* ===== 15. MODAL: FULL SCREEN DI MOBILE ===== */
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0.5rem;
    align-items: flex-start;
    overflow-y: auto;
  }

  .modal-card,
  .modal-card-sm {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    padding: 1.1rem;
    border-radius: 12px;
  }

  .modal-head h3 {
    font-size: 1.05rem;
  }

  .modal-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

  .modal-actions .btn {
    width: 100%;
    min-height: 46px;
  }
}

/* ===== 16. EMPTY STATE & FOOTER ===== */
@media (max-width: 640px) {
  .peserta-empty {
    padding: 1.5rem 1rem;
    font-size: 0.85rem;
  }

  .page-footer {
    padding: 0.75rem;
    font-size: 0.7rem;
  }
}

/* ===== 17. AKSESIBILITAS ===== */
@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;
  }
}

/* Di perangkat sentuh, hilangkan efek hover yang membingungkan */
@media (hover: none) {
  .tab-btn:hover,
  .btn:hover,
  .option-item:hover {
    background: inherit;
  }
}

/* ============================================================================
   LOGIN 2 PANEL — RESPONSIVE
   ============================================================================ */

/* Tablet & bawah: 1 kolom, panel admin jadi drawer, swipe handle MUNCUL */
@media (max-width: 1100px) {
  .login-layout {
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 100%;
  }

  /* Handle swipe tampil supaya admin bisa ditemukan */
  .swipe-handle { display: flex; }

  .admin-portal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    height: 100%;
    max-height: none;
    border-radius: 0;
    transform: translateX(102%);
    display: block;
  }
  .admin-portal.open { transform: translateX(0); }

  .swipe-backdrop { display: block; }
}

/* Mobile: panel admin jadi full-width, handle lebih besar untuk jari */
@media (max-width: 600px) {
  .swipe-handle {
    padding: 0.6rem 1.1rem;
    margin-bottom: 1rem;
  }
  .swipe-handle-text { font-size: 0.78rem; }

  .admin-portal {
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.25rem;
  }

  .admin-portal-head h2 { font-size: 1.2rem; }
  .admin-portal-close {
    width: 44px;
    height: 44px;
  }
}
    font-size: 0.72rem !important;
  }
}
    -webkit-overflow-scrolling: touch;
  }

  .tab-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    min-width: auto;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .tab-icon {
    font-size: 0.9rem;
  }
}
    min-width: 40px;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}