/* =============================================================================
   PORIKKHADAW — MOBILE THEME TOKEN LAYER (mobile-theme.css)
   Loaded after mobile-app.css on every page. Mobile viewport (<= 768px) ONLY —
   desktop rendering is never touched by any rule in this file.

   Light tokens are extracted from the Android app theme (ui/theme/Theme.kt).
   Dark tokens implement the previously dead public dark-mode toggle
   (profile-dropdown.js sets html[data-theme] + body.dark-theme).

   Per-tab bottom-nav accents match the app's 6-tab color system.
   Android WebView ("is-android-app") is unaffected: its forced inline styles
   on the shell beat any rule here, as intended.
   ============================================================================= */

@media (max-width: 768px) {

  /* ── 1. LIGHT TOKENS (Android app parity) ─────────────────────────────── */
  html {
    --m-page:            #F8FAFC;
    --m-card:            #FFFFFF;
    --m-card-2:          #F8FAFC;
    --m-border:          #E5E7EB;
    --m-border-2:        #E2E8F0;
    --m-text:            #0F172A;
    --m-text-2:          #475569;
    --m-text-3:          #94A3B8;
    --m-chip-bg:         #F1F5F9;
    --m-chip-border:     #E2E8F0;
    --m-chip-text:       #334155;
    --m-brand:           #8B5CF6;
    --m-brand-2:         #7C3AED;
    --m-brand-3:         #D946EF;
    --m-correct-bg:      #ECFDF3;
    --m-correct-border:  #17B26A;
    --m-correct-text:    #067647;
    --m-wrong-bg:        #FEF3F2;
    --m-wrong-border:    #F04438;
    --m-wrong-text:      #B42318;
    --m-nav-qfeed:       #5621FC;
    --m-nav-exams:       #EA580C;
    --m-nav-dash:        #5034F8;
    --m-nav-ai:          #7C3AED;
    --m-nav-jobs:        #006BFC;
    --m-nav-profile:     #007AFD;
    --m-shadow-soft:     rgba(15, 23, 42, .05);
    --m-skeleton:        #E2E8F0;
    --m-skeleton-shine:  rgba(255, 255, 255, .65);
    --m-handle:          #CBD5E1;
  }

  /* ── 2. DARK TOKENS (fixes dead public dark toggle on mobile) ─────────── */
  html[data-theme='dark'] {
    --m-page:            #09090B;
    --m-card:            #18181B;
    --m-card-2:          #0F0F12;
    --m-border:          #27272A;
    --m-border-2:        #27272A;
    --m-text:            #F4F4F5;
    --m-text-2:          #A1A1AA;
    --m-text-3:          #71717A;
    --m-chip-bg:         #27272A;
    --m-chip-border:     #3F3F46;
    --m-chip-text:       #D4D4D8;
    --m-correct-bg:      #052E16;
    --m-correct-border:  #10B981;
    --m-correct-text:    #6EE7B7;
    --m-wrong-bg:        #450A0A;
    --m-wrong-border:    #EF4444;
    --m-wrong-text:      #FCA5A5;
    --m-shadow-soft:     rgba(0, 0, 0, .3);
    --m-skeleton:        #27272A;
    --m-skeleton-shine:  rgba(255, 255, 255, .07);
    --m-handle:          #3F3F46;
  }

  /* ── 3. PAGE SURFACE ──────────────────────────────────────────────────── */
  body.site-body {
    background-color: var(--m-page);
  }
  body.dark-theme,
  body.dark-theme.site-body {
    background-color: var(--m-page) !important;
    color: var(--m-text);
  }
  body.dark-theme .site-header {
    background: var(--m-card);
    border-color: var(--m-border);
  }

  /* ── 4. MOBILE HEADER (dark chrome) ───────────────────────────────────── */
  body.dark-theme #mobileAppHeader {
    background: var(--m-card) !important;
    border-bottom-color: var(--m-border) !important;
    box-shadow: 0 2px 10px var(--m-shadow-soft) !important;
  }
  body.dark-theme .mob-top-search-wrap {
    background: var(--m-chip-bg);
    border-color: var(--m-chip-border);
  }
  body.dark-theme .mob-top-search-input {
    color: var(--m-text);
  }
  body.dark-theme .mob-top-search-input::placeholder {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-search-sparkle {
    color: var(--m-brand);
  }
  body.dark-theme .mob-search-icon {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-top-clear-btn {
    background: var(--m-chip-border);
    color: var(--m-text-2);
  }
  body.dark-theme .mob-action-btn {
    color: var(--m-text-2);
  }
  body.dark-theme .mob-community-row {
    border-top-color: var(--m-border) !important;
  }
  body.dark-theme .mob-ask-question-btn {
    background: var(--m-chip-bg) !important;
    border-color: var(--m-chip-border) !important;
    color: var(--m-text-3) !important;
  }
  body.dark-theme .mob-ask-prompt {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-filter-btn,
  body.dark-theme .mob-dark-btn {
    background: var(--m-chip-bg) !important;
    border-color: var(--m-chip-border) !important;
    color: var(--m-text-2) !important;
  }
  body.dark-theme .mob-dark-btn.active {
    color: #F59E0B !important;
  }

  /* ── 5. BOTTOM NAV: per-tab accents (app-parity colors) ───────────────── */
  #mobileBottomNav #mobTabQfeed.active   { --tab-accent: var(--m-nav-qfeed); }
  #mobileBottomNav #mobTabExams.active   { --tab-accent: var(--m-nav-exams); }
  #mobileBottomNav #mobTabDash.active    { --tab-accent: var(--m-nav-dash); }
  #mobileBottomNav #mobTabAiTools.active { --tab-accent: var(--m-nav-ai); }
  #mobileBottomNav #mobTabJobs.active    { --tab-accent: var(--m-nav-jobs); }
  #mobileBottomNav #mobTabProfile.active { --tab-accent: var(--m-nav-profile); }

  #mobileBottomNav .mob-nav-tab.active .mob-nav-icon-wrap,
  #mobileBottomNav .mob-nav-tab.active .mob-nav-label {
    color: var(--tab-accent, var(--m-brand));
  }

  /* Dark chrome for the nav bar */
  body.dark-theme #mobileBottomNav {
    background: var(--m-card) !important;
    border-top-color: var(--m-border) !important;
    box-shadow: 0 -4px 20px var(--m-shadow-soft) !important;
  }
  body.dark-theme .mob-nav-tab {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-nav-tab.active,
  body.dark-theme .mob-nav-tab.active .mob-nav-icon-wrap,
  body.dark-theme .mob-nav-tab.active .mob-nav-label {
    color: var(--tab-accent, var(--m-brand));
  }

  /* ── 6. SHEETS / MODALS (dark chrome) ─────────────────────────────────── */
  body.dark-theme .mob-modal-backdrop {
    background: rgba(0, 0, 0, .65);
  }
  body.dark-theme .mob-modal-sheet {
    background: var(--m-card);
  }
  body.dark-theme .mob-sheet-handle {
    background: var(--m-handle);
  }
  body.dark-theme .mob-sheet-title {
    color: var(--m-text);
  }
  body.dark-theme .mob-close-btn {
    background: var(--m-chip-bg);
    color: var(--m-text-2);
  }
  body.dark-theme .mob-sheet-body .text-muted {
    color: var(--m-text-3) !important;
  }
  body.dark-theme .mob-textarea,
  body.dark-theme .mob-modal-sheet .form-control,
  body.dark-theme .mob-modal-sheet .form-select,
  body.dark-theme .mob-modal-sheet .input-group-text {
    background: var(--m-card-2) !important;
    border-color: var(--m-border) !important;
    color: var(--m-text) !important;
  }
  body.dark-theme .mob-modal-sheet .form-control::placeholder {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-search-chip-label {
    color: var(--m-text-3);
  }
  body.dark-theme .mob-chip {
    background: var(--m-chip-bg);
    border-color: var(--m-chip-border);
    color: var(--m-chip-text);
  }
  body.dark-theme .mob-search-chips,
  body.dark-theme .mob-search-results {
    background: transparent;
  }
  body.dark-theme .mob-search-input-wrap {
    background: var(--m-card-2);
    border-color: var(--m-border);
  }
  body.dark-theme .mob-search-input {
    background: transparent;
    color: var(--m-text);
  }
  body.dark-theme .mob-filter-item,
  body.dark-theme .mob-task-item,
  body.dark-theme .mob-class-card,
  body.dark-theme .mob-tool-card {
    background: var(--m-card-2);
    border-color: var(--m-border);
    color: var(--m-text);
  }
  body.dark-theme .mob-filter-item.active {
    background: rgba(139, 92, 246, .12);
    border-color: var(--m-brand);
    color: var(--m-text);
  }
  body.dark-theme .mob-task-balance-card {
    color: #ffffff; /* gradient stays brand */
  }
  body.dark-theme .mob-filter-reset {
    color: var(--m-brand);
  }

  /* ── 7. SHIMMER SKELETON UTILITY (reusable across batches) ────────────── */
  .mob-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--m-skeleton);
    border-radius: 8px;
    min-height: 14px;
  }
  .mob-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--m-skeleton-shine), transparent);
    animation: mobSkeletonShine 1.4s infinite;
  }
  .mob-skeleton-circle {
    border-radius: 50% !important;
  }
  .mob-skeleton-line   { height: 14px; }
  .mob-skeleton-title  { height: 18px; }
  .mob-skeleton-card   { min-height: 96px; }
  @keyframes mobSkeletonShine {
    100% { transform: translateX(100%); }
  }

  /* ── 8. STATE TOKEN HELPERS (for later batches; Tiny surface API) ─────── */
  .mob-state-correct {
    background: var(--m-correct-bg) !important;
    border-color: var(--m-correct-border) !important;
    color: var(--m-correct-text) !important;
  }
  .mob-state-wrong {
    background: var(--m-wrong-bg) !important;
    border-color: var(--m-wrong-border) !important;
    color: var(--m-wrong-text) !important;
  }
}