/* MethdAI — shared dark mode overrides
 * Works by overriding common CSS variables used across pages.
 * Load AFTER the page's own <style>/stylesheet so these rules win.
 */
html[data-theme="dark"]{
  color-scheme: dark;

  /* Flip the slate scale */
  --slate-50:#0b1220;
  --slate-100:#111a2e;
  --slate-200:#1e293b;
  --slate-300:#334155;
  --slate-400:#94a3b8;
  --slate-500:#cbd5e1;
  --slate-600:#d6dee9;
  --slate-700:#e2e8f0;
  --slate-800:#f1f5f9;
  --slate-900:#ffffff;

  /* Surfaces */
  --white:#141c2e;
  --bg:#0b1220;

  /* Teal tints used for input fills, hover bgs */
  --teal-50:#0f3030;
  --teal-100:#124242;
  --teal-200:#155757;

  /* The light theme uses teal-600/700/800 mostly as TEXT/icon colors on top
     of light-teal backgrounds. In dark mode those backgrounds flip dark, so
     the dark-teal text becomes invisible. Lift these to light teals. */
  --teal-600:#5eead4;
  --teal-700:#7ff0e1;
  --teal-800:#99f6e4;
}

html[data-theme="dark"] body{
  background: var(--bg) !important;
  color: var(--slate-700);
}

/* Cards / panels commonly use white or slate-50 backgrounds */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .neural-link,
html[data-theme="dark"] .deactivate,
html[data-theme="dark"] .buddy-card,
html[data-theme="dark"] .xp-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .hero-card,
html[data-theme="dark"] .road-card,
html[data-theme="dark"] .badge-card,
html[data-theme="dark"] .cert-card,
html[data-theme="dark"] .leaderboard,
html[data-theme="dark"] .certs-section,
html[data-theme="dark"] .market-card,
html[data-theme="dark"] .upgrade-card,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .signup-card{
  background: var(--white) !important;
  color: var(--slate-700);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Common headings / primary text */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .page-header h2{
  color: var(--slate-800) !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] label{
  color: var(--slate-500);
}

/* Sidebar nav links */
html[data-theme="dark"] .nav a,
html[data-theme="dark"] .sidebar-footer a{
  color: var(--slate-500);
}
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .sidebar-footer a:hover{
  background: var(--slate-200);
  color: var(--slate-800);
}

/* Form inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .pref-select,
html[data-theme="dark"] .fake-input{
  background: var(--slate-200) !important;
  color: var(--slate-800) !important;
  border-color: var(--slate-300) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: var(--slate-400) }

/* Borders / separators */
html[data-theme="dark"] .pref-row,
html[data-theme="dark"] .sec-row,
html[data-theme="dark"] .card,
html[data-theme="dark"] .deactivate{
  border-color: var(--slate-300);
}
html[data-theme="dark"] .pref-row{ border-bottom-color: var(--slate-200) !important; }

/* Specific: security rows use teal-50 bg — keep subtle */
html[data-theme="dark"] .sec-row{ background: var(--slate-200); }
html[data-theme="dark"] .sec-row:hover{ background: var(--slate-300); }

/* Icon buttons on topbar */
html[data-theme="dark"] .icon-btn{ color: var(--slate-500); }
html[data-theme="dark"] .icon-btn:hover{ background: var(--slate-200); color: var(--slate-800); }

/* Badges on dashboard streak / time etc. keep brand colors but lighten text */
html[data-theme="dark"] .streak-badge,
html[data-theme="dark"] .time-badge{
  color:#fff;
}

/* Chart.js canvas backdrop */
html[data-theme="dark"] canvas{ filter: brightness(1.05); }

/* Neural Link secure card stays teal but slightly darker */
html[data-theme="dark"] .neural-link{
  background: linear-gradient(160deg, #0f3333, #0a2424) !important;
}
html[data-theme="dark"] .neural-link-shield{ background: var(--slate-200); }

/* Deactivate outline card */
html[data-theme="dark"] .deactivate{ border-color: rgba(239,68,68,.35); }

/* Certificate modal — keep certificate itself light for readability */
html[data-theme="dark"] .cert-modal-overlay{ background: rgba(0,0,0,.75); }
/* Keep cert card itself readable on white */
html[data-theme="dark"] .mdl-cert-card,
html[data-theme="dark"] .mdl-cert-inner{
  background: #ffffff !important;
  color: #1e293b !important;
}
html[data-theme="dark"] .mdl-cert-card *{ color: inherit; }
html[data-theme="dark"] .mdl-cert-title,
html[data-theme="dark"] .mdl-cert-name,
html[data-theme="dark"] .mdl-cert-date,
html[data-theme="dark"] .mdl-cert-founder{ color:#1e293b !important }

/* Tables */
html[data-theme="dark"] table{ color: var(--slate-700); }
html[data-theme="dark"] th, html[data-theme="dark"] td{ border-color: var(--slate-200); }

/* Links */
html[data-theme="dark"] a{ color: var(--teal-400, #22d3ee); }

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-track{ background: var(--slate-100); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: var(--slate-300); }

/* Dashboard "10 SECTIONS / 69 MODULES" pills — teal-100 bg flips to dark teal
   but teal-700 text stays dark, leaving no contrast. Lighten the text. */
html[data-theme="dark"] .section-tag{
  color:#5eead4 !important;
  background:#0f3030 !important;
}

/* Subject Detail hero keeps its light mint gradient in both themes — force
   dark text so the title/subtitle stay readable in dark mode. */
html[data-theme="dark"] .subject-hero .hero-info h1{ color:#0f172a !important; }
html[data-theme="dark"] .subject-hero .hero-info p{ color:#475569 !important; }
html[data-theme="dark"] .subject-hero .meta-pill{
  background:rgba(255,255,255,.85) !important;
  color:#334155 !important;
}
html[data-theme="dark"] .subject-hero .hero-icon .material-symbols-rounded,
html[data-theme="dark"] .subject-hero .meta-pill .material-symbols-rounded{
  color:#0f766e !important;
}
/* Subject Detail "Chapters" count chip (same teal-100/teal-700 pattern) */
html[data-theme="dark"] .section-title .count-chip{
  color:#5eead4 !important;
  background:#0f3030 !important;
}

/* mypath ".continue-btn" uses teal-600 as bg + white text — the variable
   flip would make it light-teal with white text. Keep it a dark CTA in dark
   mode by using a fixed dark teal. */
html[data-theme="dark"] .continue-btn{
  background:#0d9488 !important;
  color:#ffffff !important;
}
html[data-theme="dark"] .continue-btn:hover{
  background:#0f766e !important;
}

/* Subject Detail module status pills */
html[data-theme="dark"] .status-pill.todo{
  color:#5eead4 !important;
  background:#0f3030 !important;
  border-color:#155757 !important;
}
html[data-theme="dark"] .status-pill.done{
  color:#86efac !important;
  background:#052e1a !important;
  border-color:#14532d !important;
}
html[data-theme="dark"] .status-pill.lock{
  color:#94a3b8 !important;
  background:#1e293b !important;
}

/* Lesson page has a 56px fixed footer with Next/Previous buttons — lift the
   global chat FAB (and its open panel) above the footer to avoid overlap. */
body:has(.lesson-footer) .mdai-chat-fab,
body:has(.lesson-footer) .mdai-chat-panel{
  bottom: 80px;
}

/* News modal (injected by theme.js) — hardcoded white surfaces clash with
   the dark-mode slate flips (titles use --slate-900 which becomes white). */
html[data-theme="dark"] .mdai-news-card{
  background:#0f172a !important;
  color:#f1f5f9 !important;
  box-shadow:0 24px 64px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .mdai-news-head{ border-bottom-color:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .mdai-news-title{ color:#f1f5f9 !important; }
html[data-theme="dark"] .mdai-news-close{
  background:#1e293b !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#cbd5e1 !important;
}
html[data-theme="dark"] .mdai-news-close:hover{ background:#334155 !important; }
html[data-theme="dark"] .mdai-news-body{ background:#0b1220 !important; }
html[data-theme="dark"] .mdai-news-item{
  background:#1e293b !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .mdai-news-item:hover{ box-shadow:0 6px 18px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .mdai-news-item-title{ color:#f1f5f9 !important; }
html[data-theme="dark"] .mdai-news-item-meta{ color:#94a3b8 !important; }
html[data-theme="dark"] .mdai-news-item-meta .src{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-news-item-body{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-news-loader,
html[data-theme="dark"] .mdai-news-empty{ color:#94a3b8 !important; }
html[data-theme="dark"] .mdai-news-more{
  background:#1e293b !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#e2e8f0 !important;
}
html[data-theme="dark"] .mdai-news-more:hover:not(:disabled){ background:#334155 !important; }
html[data-theme="dark"] .mdai-news-end{ color:#64748b !important; }

/* Chat widget (injected by theme.js) — re-theme its hardcoded light surfaces
   for dark mode so text stays readable. */
html[data-theme="dark"] .mdai-chat-panel{
  background:#0f172a !important;
  color:#f1f5f9 !important;
  box-shadow:0 20px 56px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .mdai-chat-head{
  background:#1e293b !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .mdai-chat-head-bot{ background:#0f172a !important; }
html[data-theme="dark"] .mdai-chat-head-title{ color:#f1f5f9 !important; }
html[data-theme="dark"] .mdai-chat-iconbtn{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-chat-iconbtn:hover{ background:rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .mdai-chat-body{ background:#0b1220 !important; }
html[data-theme="dark"] .mdai-chat-msg-avatar{ background:#1e293b !important; }
html[data-theme="dark"] .mdai-chat-msg.user .mdai-chat-msg-avatar{ background:#334155 !important; color:#e2e8f0 !important; }
html[data-theme="dark"] .mdai-chat-msg-avatar .material-symbols-rounded{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-chat-msg-bubble,
html[data-theme="dark"] .mdai-chat-msg.user .mdai-chat-msg-bubble{
  background:#1e293b !important;
  color:#f1f5f9 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .mdai-chat-typing{
  background:#1e293b !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] .mdai-chat-typing-label{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-chat-typing-dot{ background:#64748b !important; }
html[data-theme="dark"] .mdai-chat-input{
  background:#1e293b !important;
  border-top-color:rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] .mdai-chat-input input{
  background:#0f172a !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#f1f5f9 !important;
}
html[data-theme="dark"] .mdai-chat-input input::placeholder{ color:#64748b !important; }
html[data-theme="dark"] .mdai-chat-mic{ color:#cbd5e1 !important; }
html[data-theme="dark"] .mdai-chat-mic:hover{ background:rgba(255,255,255,.08) !important; color:#f1f5f9 !important; }
html[data-theme="dark"] .mdai-chat-caret{ background:#cbd5e1 !important; }

/* Dashboard hero "Start Lesson" button uses var(--slate-900) which flips to
   white in dark mode — keep it a dark, readable button. */
html[data-theme="dark"] .start-btn{
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid var(--slate-300);
}

/* Lesson page — Instruction Guide header keeps its light mint gradient.
   The global h2 override in dark mode forces text to white, hiding the title
   and inherit-coloured icon. Force a dark teal for both. */
html[data-theme="dark"] .content-head h2,
html[data-theme="dark"] .content-head h2 .material-symbols-rounded{
  color:#0f766e !important;
}

/* Lesson page — editor toggle button uses var(--slate-900) bg+border which
   flip to white in dark mode. Keep it dark and visible. */
html[data-theme="dark"] .editor-toggle{
  background:#0f172a !important;
  border-color:#0f172a !important;
  color:#ffffff !important;
}
html[data-theme="dark"] .editor-toggle.hidden-state{
  background:transparent !important;
  color:#e2e8f0 !important;
  border-color:var(--slate-300) !important;
}

/* Lesson page — "Previous Step" footer button: bump contrast so text stands
   out on the dark footer. */
html[data-theme="dark"] .foot-btn.prev{ color:#e2e8f0 !important; }
html[data-theme="dark"] .foot-btn.prev:hover:not([disabled]){ color:#5eead4 !important; }

/* Lesson page — Footer round icon buttons (remove last / refresh): give them
   a visible surface against the dark footer. */
html[data-theme="dark"] .foot-icon{
  background:#1e293b !important;
  border-color:rgba(255,255,255,.12) !important;
  color:#cbd5e1 !important;
}
html[data-theme="dark"] .foot-icon:hover{
  background:#334155 !important;
  color:#f1f5f9 !important;
  border-color:rgba(255,255,255,.2) !important;
}

/* Path cards (mypath): give every variant a visible card surface in dark mode. */
html[data-theme="dark"] .path-card{
  background: #141c2e !important;
  border: 1px solid var(--slate-200);
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
html[data-theme="dark"] .path-card.locked-card{
  background: #111a2e !important;
  opacity: 1;
}

/* Active and final variants keep their light gradient bg in both themes
   — force dark text so it stays readable in dark mode. The !important on
   the base .path-card rule above otherwise clobbers the gradient. */
html[data-theme="dark"] .path-card.active-card{
  background:linear-gradient(135deg,#ccfbf1,#a7f3d0) !important;
  color:#1e293b;
}
html[data-theme="dark"] .path-card.final-card{
  background:linear-gradient(135deg,#ffe4e6,#fecdd3) !important;
  color:#1e293b;
}
html[data-theme="dark"] .path-card.active-card h4,
html[data-theme="dark"] .path-card.final-card h4{
  color:#0f172a !important;
}
html[data-theme="dark"] .path-card.active-card p,
html[data-theme="dark"] .path-card.active-card .path-pct,
html[data-theme="dark"] .path-card.active-card .lock-label,
html[data-theme="dark"] .path-card.final-card p,
html[data-theme="dark"] .path-card.final-card .path-pct,
html[data-theme="dark"] .path-card.final-card .lock-label{
  color:#475569 !important;
}
html[data-theme="dark"] .path-card.active-card .path-progress,
html[data-theme="dark"] .path-card.final-card .path-progress{
  background:rgba(15,23,42,.15);
}

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS  (added for small-screen browsers)
   Loaded on every page after each page's inline <style>, so these
   rules win; !important is used where pages hard-set values.
   ════════════════════════════════════════════════════════════ */

/* Hamburger button (injected into .topbar by theme.js) */
.mnav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;margin-right:.4rem;
  border:none;border-radius:12px;cursor:pointer;
  background:#0b67c9;color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.mnav-toggle .material-symbols-rounded{font-size:24px;color:#fff;line-height:1}

/* Dark scrim shown behind the open drawer */
.mnav-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  z-index:998;opacity:0;visibility:hidden;transition:opacity .25s;
}
body.mnav-open .mnav-overlay{opacity:1;visibility:visible}

html[data-theme="dark"] .mnav-toggle{background:#2845c9}

@media(max-width:800px){
  /* Show the hamburger, free up the main column */
  .mnav-toggle{display:inline-flex}
  .main{margin-left:0 !important}

  /* Turn the fixed nav sidebar into an off-canvas drawer */
  .sidebar{
    display:flex !important;
    position:fixed !important;
    top:0;left:0;bottom:0;
    width:250px;max-width:82vw;
    transform:translateX(-100%);
    transition:transform .28s ease;
    z-index:999;overflow-y:auto;
    box-shadow:2px 0 24px rgba(0,0,0,.18);
  }
  body.mnav-open .sidebar{transform:translateX(0)}

  /* Keep the topbar tidy with the hamburger in front of the title */
  .topbar{flex-wrap:wrap;gap:.5rem}
  /* Let the title block fill the row so it stays beside the hamburger
     (instead of being pushed to the right when the icons wrap). */
  .topbar-left{flex:1 1 auto;min-width:0}
  .topbar-right{margin-left:auto}
  /* Tab links inside the topbar duplicate the drawer nav and overflow — hide */
  .topbar-tabs{display:none !important}

  /* Collapse layout grids to a single column */
  .settings-grid,.security-grid,.top-row,.bottom-row,.mid-row,
  .hero-row,.subject-hero,.checkout-grid,.form-grid,.form-row,
  .plans-grid,.features-grid,.features,.input-row,.header-row,
  .grid{
    grid-template-columns:1fr !important;
  }

  /* Card grids: let them wrap responsively */
  .roadmap-grid,.market-grid,.badges-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
  }

  /* Never let anything force a horizontal scrollbar */
  img,video,canvas{max-width:100%;height:auto}
}

@media(max-width:500px){
  .main{padding:1rem !important}
  .roadmap-grid,.market-grid{grid-template-columns:1fr !important}
  .badges-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important}
}