/* ==========================================================================
   العربية التفاعلية — Base Styles
   ========================================================================== */

@import url('./tokens.css');

/* ── Reset ── */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
/* TIDAK ada height:100% di sini — itu yang mengunci tinggi = viewport dan mencegah scroll di HP nyata.
   .app memakai min-height:100vh (cukup untuk full-screen) dan body tumbuh mengikuti konten. */

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-latin);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-latin);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-latin);
  font-size: var(--fs-section-title);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-latin);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0;
}
p { margin: 0; }
small, .small { font-size: var(--fs-small); color: var(--color-text-secondary); }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Arabic Typography ── */
.ar, [lang="ar"] {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  word-spacing: 0.04em;
}
.ar-display {
  font-family: var(--font-arabic);
  font-size: var(--fs-arabic-display);
  font-weight: var(--fw-bold);
  direction: rtl;
  text-align: right;
  line-height: 1.4;
}
.ar-title {
  font-family: var(--font-arabic);
  font-size: var(--fs-arabic-title);
  font-weight: var(--fw-semibold);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
}
.ar-body {
  font-family: var(--font-arabic);
  font-size: var(--fs-arabic-body);
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}
.ar p, p.ar { text-align: right; }

/* ── App Shell ── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* cegah horizontal scroll di level app, bukan body */
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) 80px;
}

/* ── Layout Utilities ── */
.stack  { display: flex; flex-direction: column; }
.row    { display: flex; flex-direction: row; }
.center { display: flex; align-items: center; justify-content: center; }
.flex-1 { flex: 1; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ── Navigation Links ── */
.nav-link {
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: var(--space-sm) 0;
}
.nav-link:hover { color: var(--color-primary); }
.nav-link.active {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  border-bottom: 2px solid var(--color-primary);
}

/* ── Animations ── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fade-in 320ms var(--ease-out) both; }

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
  50%      { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
}
.pulse { animation: pulse-gold 1.8s var(--ease-in-out) infinite; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-slide-up { animation: slide-up 300ms var(--ease-out) both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.96); }
}

/* ── Quiz Sidebar Layout ── */
.quiz-with-sidebar {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 20px; /* gap between progress bar and question area */
}
.quiz-main-col { flex: 1; min-width: 0; }
.quiz-nav-col {
  width: 186px;
  flex-shrink: 0;
  position: sticky;
  top: 110px;
}
.quiz-nav-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.quiz-nav-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .quiz-with-sidebar { flex-direction: column; gap: 14px; margin-top: 14px; }
  .quiz-nav-col { width: 100%; position: static; order: -1; }
  .quiz-nav-numbers { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }

  .page { padding: var(--space-md) var(--space-md) 60px; }
  .hero-grid { grid-template-columns: 1fr !important; padding: 28px 24px !important; }
  .chapter-grid { grid-template-columns: 1fr !important; }
  .section-grid { grid-template-columns: 1fr !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .quiz-grid { grid-template-columns: 1fr !important; }
  .conjugation-grid { grid-template-columns: 1fr !important; }
  .hiwar-layout { grid-template-columns: 1fr !important; }
  .hiwar-sidebar { display: none !important; }

  /* Card mufrodat 2 kolom di tablet */
  .mufrodat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  /* Hero section: teks lebih kecil */
  .hero-grid h1 { font-size: 40px !important; }
  .hero-grid p  { font-size: 16px !important; }

  /* Sembunyikan transliterasi di kartu mufrodat kecil */
  .mufrodat-transliteration { display: none; }

  /* Tashrif grid 1 kolom */
  .conjugation-grid { grid-template-columns: 1fr !important; }

  /* Quiz options 1 kolom */
  .quiz-grid { grid-template-columns: 1fr !important; }

  /* Admin table scrollable */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Mobile bottom nav placeholder (shown by Navbar at ≤640px) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 30;
  justify-content: space-around;
  align-items: center;
}
@media (max-width: 640px) {
  .bottom-nav { display: flex; }
  .page { padding-bottom: 72px; }
  button, a[role="button"] { min-height: 44px; }
  .login-layout { flex-direction: column !important; }
  .login-hero { min-height: 220px !important; }
  .login-panel { width: 100% !important; padding: 32px 24px !important; border-left: none !important; border-top: 1px solid var(--color-border) !important; justify-content: flex-start !important; }
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Navbar mobile ── */
  .nav-nickname-text { display: none !important; } /* sembunyikan nama, avatar tetap tampil */
  .nav-guest-text    { display: none !important; }
  .nav-logo-text     { display: none !important; }
  .nav-row1       { height: 44px !important; padding: 0 12px !important; }
  .nav-row2       { padding: 0 4px !important; }
  .nav-section-label { display: none !important; }
  .stat-chips     { gap: 4px !important; }

  /* ── Header flex stack ── */
  .page-header-flex { flex-direction: column !important; gap: 16px !important; }
  .page-header-flex > div:last-child { align-items: flex-end !important; }

  /* ── Hero CTA ── */
  .hero-cta-row { flex-wrap: wrap !important; }

  /* ── Chapter banner ── */
  .chapter-banner-section { padding: 24px 20px !important; border-radius: 18px !important; }
  .chapter-banner-inner   { gap: 16px !important; align-items: center !important; }
  .chapter-num-box        { width: 80px !important; height: 80px !important; font-size: 48px !important; border-radius: 20px !important; }
  .chapter-banner-title   { font-size: 36px !important; }
  .chapter-banner-subtitle { font-size: 18px !important; }
  .objectives-grid        { grid-template-columns: 1fr !important; }

  /* ── Logout text hidden on mobile (icon only) ── */
  .nav-logout-text { display: none !important; }

  /* ── XP/streak chip: icon only di mobile ── */
  .stat-chip-val { display: none !important; }
  .stat-chips > span { padding: 0 8px !important; }

  /* ── Admin header responsive ── */
  .admin-header { padding: 10px 14px !important; gap: 8px !important; }
  .admin-header-email { display: none !important; }
  .admin-header-right { gap: 8px !important; }

  /* ── Hiwar layout & mobile footer ── */
  .hiwar-layout { grid-template-columns: 1fr !important; }
  .hiwar-sidebar { display: none !important; }
  .hiwar-mobile-footer { display: flex !important; }

  /* ── Mufrodat grid 1 kolom ── */
  .mufrodat-grid { grid-template-columns: 1fr !important; }

  /* ── Qawaid grid ── */
  .conjugation-grid { grid-template-columns: 1fr !important; }
  .qawaid-materi-col  { order: -1; } /* tashrif/pola tampil duluan di mobile */
  .qawaid-examples-col { order: 0; }
}