/* Final shared visual layer: loaded after style.css on authenticated pages. */
:root {
  color-scheme: light;
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, .35);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
}
:root[data-theme="dark"], html[data-theme="dark"] { 
  color-scheme: dark; 
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
}

/* ── STRICT OPPOSITE CONTRAST ENFORCEMENT ── */
/* Light Backgrounds -> Deep Dark Crisp Text */
:root:not([data-theme="dark"]) body, 
:root:not([data-theme="dark"]) .app-main, 
:root:not([data-theme="dark"]) .main-content, 
:root:not([data-theme="dark"]) .dashboard-container, 
:root:not([data-theme="dark"]) .page-container,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .glass-card,
:root:not([data-theme="dark"]) .t-card {
  color: #0f172a !important;
}

:root:not([data-theme="dark"]) p, 
:root:not([data-theme="dark"]) span:not([class*="badge"]):not([class*="btn"]):not([class*="tag"]),
:root:not([data-theme="dark"]) label,
:root:not([data-theme="dark"]) .text-secondary {
  color: #334155 !important;
}

:root:not([data-theme="dark"]) .text-muted,
:root:not([data-theme="dark"]) .scard-sub,
:root:not([data-theme="dark"]) .widget-sub {
  color: #475569 !important;
}

/* Dark Backgrounds -> High-Brightness Glowing White & Pastel Text */
:root[data-theme="dark"] body, 
:root[data-theme="dark"] .app-main, 
:root[data-theme="dark"] .main-content, 
:root[data-theme="dark"] .dashboard-container, 
:root[data-theme="dark"] .page-container,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .t-card,
:root[data-theme="dark"] .widget-box,
:root[data-theme="dark"] .scard {
  color: #f8fafc !important;
}

:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, 
:root[data-theme="dark"] h3, :root[data-theme="dark"] h4, 
:root[data-theme="dark"] .card-title, :root[data-theme="dark"] .scard-val {
  color: #ffffff !important;
}

/* Preserve Light Font Contrast for Quiz, Interactive Games, and Dark Modals */
.play-card, 
.game-wrapper, 
.quiz-container, 
.subject-quiz-card, 
.question-card, 
.option-game-btn, 
.game-main,
.mascot-panel,
.res-stat-card,
.q-inspector-box,
#bookChaptersModal,
#bookChaptersModal .glass-card,
.learn-shell,
.dark-card {
  color: #f8fafc !important;
}

.play-card h1, .play-card h2, .play-card h3, .play-card h4,
.play-card .question-text, .play-card .q-title-label, .play-card .setup-title,
.option-game-btn, .option-game-btn span,
.res-stat-card .res-stat-val,
#bookChaptersModal h2, #bookChaptersModal h3 {
  color: #ffffff !important;
}

.play-card p, .play-card .text-secondary, .play-card .q-meta,
.res-stat-card .res-stat-label,
#bookChaptersModal p, #bookChaptersModal div {
  color: #cbd5e1;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] .text-secondary {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .scard-sub,
:root[data-theme="dark"] .widget-sub {
  color: #94a3b8 !important;
}

/* Inputs & Form Controls */
input, select, textarea, .form-control {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; }
button, .btn, .btn-submit, .btn-qi, .btn-edit, .btn-delete { touch-action: manipulation; }
:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }

/* ── TOPBAR SAFE AREA & HIGH-CONTRAST PADDING ── */
.app-topbar, .t-topbar, header.app-header {
  padding-top: max(env(safe-area-inset-top), 4px) !important;
}

/* ── ALWAYS VISIBLE, SAFE-AREA ELEVATED & CLICKABLE MOBILE BOTTOM NAVIGATION BAR ── */
@media (max-width: 1024px) {
  body, .content-area, .tab-panel, .page-container, .dashboard-container, .main-content, .app-main, .t-main {
    padding-bottom: calc(95px + max(env(safe-area-inset-bottom), 24px)) !important;
  }

  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(68px + max(env(safe-area-inset-bottom), 24px)) !important;
    padding-bottom: max(env(safe-area-inset-bottom), 24px) !important;
    padding-top: 6px !important;
    background: #ffffff !important;
    border-top: 1.5px solid rgba(79, 70, 229, 0.18) !important;
    z-index: 9999999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25) !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  :root[data-theme="dark"] .mobile-bottom-nav,
  [data-theme="dark"] .mobile-bottom-nav {
    background: #090d16 !important;
    border-top: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  }

  .mbn-item {
    flex: 1 !important;
    height: 52px !important;
    max-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    padding: 4px 2px !important;
    font-family: var(--font, 'Outfit', system-ui, sans-serif) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #64748b !important;
    text-decoration: none !important;
    position: relative !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  :root[data-theme="dark"] .mbn-item,
  [data-theme="dark"] .mbn-item { color: #94a3b8 !important; }

  .mbn-item.active, .mbn-item:active, .mbn-item:focus {
    color: #4f46e5 !important;
    background: rgba(79, 70, 229, 0.1) !important;
  }

  :root[data-theme="dark"] .mbn-item.active,
  :root[data-theme="dark"] .mbn-item:active,
  [data-theme="dark"] .mbn-item.active,
  [data-theme="dark"] .mbn-item:active {
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
  }

  .mbn-item .mbn-icon {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
  }

  .mbn-item.active .mbn-icon {
    transform: scale(1.15) !important;
  }

  .mbn-item .mbn-label {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
  }

  .mbn-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 25% !important;
    right: 25% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #4f46e5, #06b6d4) !important;
    border-radius: 99px !important;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.5) !important;
  }

  .mbn-badge {
    position: absolute !important;
    top: 3px !important;
    right: calc(50% - 18px) !important;
    min-width: 16px !important;
    height: 16px !important;
    background: #f43f5e !important;
    color: #fff !important;
    border-radius: 99px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #fff !important;
    z-index: 2 !important;
  }

  /* Reposition Floating AI Assistant Widget above Mobile Nav */
  #ai-bot-toggle, .ai-bot-trigger, .floating-ai-btn, [class*="ai-bot"], [id*="ai-bot"] {
    bottom: calc(85px + max(env(safe-area-inset-bottom), 24px)) !important;
  }
}

@media (max-width: 992px) {
  .container, .page-container, .dashboard-container, .main-content, .app-main, .t-main {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: clamp(.75rem, 3vw, 1.25rem) !important;
    padding-right: clamp(.75rem, 3vw, 1.25rem) !important;
  }
  .app-topbar { position: sticky; top: 0; z-index: 150; }
  .topbar-brand-name { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  img, video, iframe, canvas { max-width: 100%; height: auto; }
  .table-responsive, .t-table-wrap, .modern-table-wrap, .student-list-table-wrap { overscroll-behavior-inline: contain; }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  .app-sidebar { background: var(--sidebar-bg) !important; color: var(--text-primary) !important; }
  .app-sidebar a, .sidebar-link, .nav-label { color: var(--text-primary) !important; }
  .app-sidebar a.active, .app-sidebar a:hover { background: var(--primary-soft) !important; color: var(--primary-dark) !important; }
  :root[data-theme="dark"] .app-sidebar a.active,
  :root[data-theme="dark"] .app-sidebar a:hover { background: rgba(99,102,241,.24) !important; color: #fff !important; }
  .app-topbar { min-height: 60px; background: var(--header-bg) !important; border-bottom: 1px solid var(--border-color); }
  .topbar-right { gap: .35rem; }
  .topbar-icon-btn, .topbar-avatar, .mobile-menu-btn { min-width: 44px; min-height: 44px; }
  .hero-banner-card { padding: 1.25rem !important; border-radius: 1rem !important; }
  .hero-banner-card h1 { font-size: clamp(1.35rem, 6vw, 2rem) !important; }
  .card, .t-card, .hero-module-card, .assign-card { border-color: var(--border-color) !important; }
}

@media (max-width: 480px) {
  .topbar-brand-mark { width: 32px; height: 32px; font-size: .75rem; }
  .topbar-brand-name { max-width: 34vw; font-size: .84rem; }
  .btn, .btn-submit, .btn-qi, .btn-edit, .btn-delete { min-height: 44px !important; }
}

/* ── SELF-STUDY HUB CONTRAST PERFECTION ── */
:root:not([data-theme="dark"]) .self-study-hub-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
:root:not([data-theme="dark"]) .hub-hero-container {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
:root:not([data-theme="dark"]) .hub-title {
  color: #0f172a !important;
}
:root:not([data-theme="dark"]) .hub-desc {
  color: #475569 !important;
}
:root:not([data-theme="dark"]) .hub-subj-row span:first-child {
  color: #0f172a !important;
}
:root:not([data-theme="dark"]) .hub-subj-pct {
  color: #059669 !important;
}
:root:not([data-theme="dark"]) .hub-gauge-track {
  stroke: #e2e8f0 !important;
}
:root:not([data-theme="dark"]) .hub-resume-bar {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}