/* Florida CAP Prep Dark Mode — Global overrides */
body.dark-version,
[data-theme="dark"] body {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

/* Force ALL text visible in dark mode */
body.dark-version *:not(.btn):not(.badge):not(.home-btn-primary):not(.home-btn):not([style*="background"]) {
  color: inherit;
}

body.dark-version a:not(.btn):not(.home-btn):not(.badge) {
  color: #60a5fa;
}

.dark-version .sidenav {
  background: #16213e !important;
}

.dark-version .sidenav .nav-link-text,
.dark-version .sidenav .nav-link {
  color: #ccc !important;
}

.dark-version .sidenav .nav-link.active {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .sidenav .nav-link.active .nav-link-text {
  color: #fff !important;
}

.dark-version .navbar {
  background: rgba(22, 33, 62, 0.95) !important;
}

.dark-version .card {
  background: #16213e !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .card-header {
  background: rgba(255,255,255,0.03) !important;
}

.dark-version h1, .dark-version h2, .dark-version h3,
.dark-version h4, .dark-version h5, .dark-version h6 {
  color: #f0f0f0 !important;
}

.dark-version p, .dark-version span, .dark-version label {
  color: #ccc !important;
}

.dark-version .text-dark {
  color: #e0e0e0 !important;
}

.dark-version .text-muted {
  color: #888 !important;
}

.dark-version .bg-white {
  background: #16213e !important;
}

.dark-version .bg-light {
  background: #1a1a2e !important;
}

.dark-version .form-control {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e0e0e0 !important;
}

.dark-version .form-control:focus {
  background: #0f3460 !important;
  color: #fff !important;
}

.dark-version .table {
  color: #ccc !important;
}

.dark-version .table thead th {
  color: #999 !important;
}

.dark-version .breadcrumb-item,
.dark-version .breadcrumb-item a,
.dark-version .breadcrumb-item.active {
  color: #aaa !important;
}

.dark-version .footer {
  color: #888 !important;
}

.dark-version .footer a {
  color: #aaa !important;
}

.dark-version .border-bottom {
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .shadow-sm,
.dark-version .shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

.dark-version .progress {
  background: rgba(255,255,255,0.1) !important;
}

.dark-version .icon-shape {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .alert-warning {
  background: rgba(234,179,8,0.15) !important;
  color: #eab308 !important;
}

.dark-version .alert-success {
  background: rgba(34,197,94,0.15) !important;
  color: #22c55e !important;
}

.dark-version .alert-danger {
  background: rgba(239,68,68,0.15) !important;
  color: #ef4444 !important;
}

/* Front pages (base-auth) dark mode */
.dark-version .home-page,
.dark-version .login-page,
.dark-version .register-page {
  background: #1a1a2e !important;
}

.dark-version .home-page .subject-card,
.dark-version .home-page .feature-card,
.dark-version .home-page .pricing-card {
  background: #16213e !important;
}

.dark-version .home-page .pricing-card.featured {
  border-color: #0071e3 !important;
}

.dark-version .login-card,
.dark-version .register-card {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .blur {
  background: rgba(22, 33, 62, 0.9) !important;
}

.dark-version .cbe-theme-toggle {
  border-color: #aaa !important;
}

.dark-version .cbe-theme-icon {
  color: #eab308 !important;
}

.dark-version .dropdown-menu {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .dropdown-item {
  color: #ccc !important;
}

.dark-version .dropdown-item:hover {
  background: rgba(255,255,255,0.08) !important;
}

.dark-version .sidebar-submenu {
  border-color: rgba(255,255,255,0.1) !important;
}

/* System Config page */
.dark-version .syscfg-page,
.dark-version .syscfg-header h1,
.dark-version .syscfg-card-header h2 {
  color: #f0f0f0 !important;
}

.dark-version .syscfg-header p,
.dark-version .syscfg-hint,
.dark-version .syscfg-count,
.dark-version .syscfg-desc {
  color: #999 !important;
}

.dark-version .syscfg-card {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .syscfg-card-header:hover {
  background: rgba(255,255,255,0.03) !important;
}

.dark-version .syscfg-key {
  color: #e0e0e0 !important;
}

.dark-version .syscfg-input {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #e0e0e0 !important;
}

.dark-version .syscfg-input:focus {
  background: #0f3460 !important;
  color: #fff !important;
}

.dark-version .syscfg-input.readonly {
  background: #1a1a2e !important;
  color: #888 !important;
}

.dark-version .syscfg-eye {
  background: rgba(255,255,255,0.08) !important;
  color: #ccc !important;
}

.dark-version .syscfg-file-btn {
  background: rgba(255,255,255,0.08) !important;
  color: #60a5fa !important;
}

.dark-version .syscfg-file-preview {
  border-color: rgba(255,255,255,0.1) !important;
  background: #0f3460 !important;
}

.dark-version .syscfg-field {
  border-color: rgba(255,255,255,0.06) !important;
}

.dark-version .syscfg-chevron {
  color: #888 !important;
}

.dark-version .syscfg-badge.secret {
  background: rgba(255,59,48,0.15) !important;
  color: #ff6b6b !important;
}

.dark-version .syscfg-badge.locked {
  background: rgba(255,255,255,0.06) !important;
  color: #888 !important;
}

/* Admin tables */
.dark-version .table-responsive,
.dark-version table {
  color: #e0e0e0 !important;
}

.dark-version table thead th {
  color: #999 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version table td {
  border-color: rgba(255,255,255,0.06) !important;
}

/* Admin page headers */
.dark-version .admin-users-badge {
  opacity: 0.9;
}

/* Quill editor dark mode */
.dark-version .ql-toolbar {
  background: #16213e !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .ql-container {
  background: #0f3460 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e0e0e0 !important;
}

.dark-version .ql-editor {
  color: #e0e0e0 !important;
}

.dark-version .ql-toolbar button,
.dark-version .ql-toolbar .ql-picker-label {
  color: #ccc !important;
}

/* Modal dark mode */
.dark-version .modal-content {
  background: #16213e !important;
  color: #e0e0e0 !important;
}

.dark-version .modal-header {
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .modal-footer {
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── GLOBAL FORCE: override ALL text/bg in dark mode ── */
html body.dark-version h1, html body.dark-version h2, html body.dark-version h3,
html body.dark-version h4, html body.dark-version h5, html body.dark-version h6 {
  color: #f0f0f0 !important;
}

html body.dark-version p, html body.dark-version span, html body.dark-version label,
html body.dark-version td, html body.dark-version th, html body.dark-version li,
html body.dark-version div, html body.dark-version small, html body.dark-version strong,
html body.dark-version caption {
  color: #d0d0d0 !important;
}

html body.dark-version a:not(.btn):not(.home-btn):not(.badge):not(.nav-link):not(.dropdown-item) {
  color: #60a5fa !important;
}

html body.dark-version .card,
html body.dark-version .card-header,
html body.dark-version .card-body,
html body.dark-version .card-footer {
  background: #16213e !important;
  color: #d0d0d0 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html body.dark-version .container-fluid,
html body.dark-version .container {
  color: #d0d0d0 !important;
}

html body.dark-version input, html body.dark-version select, html body.dark-version textarea {
  background: #0f3460 !important;
  color: #e0e0e0 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Force table text */
html body.dark-version table,
html body.dark-version table td,
html body.dark-version table th,
html body.dark-version table tr,
html body.dark-version .table td,
html body.dark-version .table th {
  color: #d0d0d0 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

body.dark-version .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

body.dark-version .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

body.dark-version .btn-outline-secondary {
  color: #ccc !important;
  border-color: #666 !important;
}

body.dark-version .pagination .page-link {
  background: #16213e !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

body.dark-version .pagination .page-item.active .page-link {
  background: #0071e3 !important;
  color: #fff !important;
}

body.dark-version hr {
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

.dark-version .btn-outline-danger {
  color: #f87171 !important;
  border-color: #f87171 !important;
}

.dark-version .pagination .page-link {
  background: #16213e !important;
  color: #ccc !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dark-version .pagination .page-item.active .page-link {
  background: #0071e3 !important;
  color: #fff !important;
}

/* Fix black text/logos invisible on dark bg */
.dark-version .text-dark {
  color: #e0e0e0 !important;
}

.dark-version .opacity-6 {
  opacity: 0.9 !important;
}

.dark-version .navbar-brand img,
.dark-version .navbar-logo-img,
.dark-version .home-hero .logo-img,
.dark-version .sidenav-header img {
  filter: brightness(0) invert(1);
}

.dark-version .home-page h1,
.dark-version .home-page h2,
.dark-version .home-page h4,
.dark-version .home-page .tagline,
.dark-version .home-page .sub,
.dark-version .home-section-title h2,
.dark-version .home-section-title p {
  color: #f0f0f0 !important;
}

.dark-version .home-page .subject-card h4,
.dark-version .home-page .feature-card h4,
.dark-version .home-page .pricing-card h4,
.dark-version .home-page .pricing-card .price {
  color: #f0f0f0 !important;
}

.dark-version .home-page .subject-card p,
.dark-version .home-page .feature-card p,
.dark-version .home-page .pricing-card ul li {
  color: #bbb !important;
}

.dark-version .home-page .home-btn-outline {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}

.dark-version .home-footer {
  border-color: rgba(255,255,255,0.1) !important;
  color: #888 !important;
}

.dark-version .home-footer a {
  color: #aaa !important;
}

/* Auth pages dark mode text fix */
.dark-version .login-card h2,
.dark-version .register-card h2 {
  color: #f0f0f0 !important;
}

.dark-version .login-card .sub,
.dark-version .register-card .sub,
.dark-version .login-card label,
.dark-version .register-card label {
  color: #ccc !important;
}

.dark-version .login-footer,
.dark-version .register-footer {
  color: #999 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dark-version .login-footer a,
.dark-version .register-footer a {
  color: #60a5fa !important;
}

.dark-version .form-check-label {
  color: #ccc !important;
}

.dark-version .nav-link-auth {
  color: #e0e0e0 !important;
}

.dark-version .nav-link-auth i {
  color: #ccc !important;
}

.dark-version .navbar-toggler-bar {
  background: #ccc !important;
}

/* Dropdown arrow fix */
.dark-version .dropdown-toggle::after {
  color: #ccc !important;
  border-top-color: #ccc !important;
}

.dark-version .dropdown-toggle span,
.dark-version .dropdown-toggle i {
  color: #e0e0e0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Landing page (/) dark-mode fixes.
   The landing template uses inline `style="background: white"` on the
   stat cards, featured-question card, testimonial card, and fq-nav
   buttons. Inline styles beat class selectors, so the earlier
   .dark-version overrides don't reach them. Force them via structural
   selectors with !important.
   ───────────────────────────────────────────────────────────────────── */
body.dark-version {
  /* Override the landing page's CSS variables so anything using them
     (hero text, muted labels, page bg) flips automatically. */
  --home-bg: #1a1a2e;
  --home-text: #f0f0f0;
  --home-text-muted: #9ca3af;
  --home-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Inline-style white cards on the landing page → dark surface. */
body.dark-version .home-page .home-proof > div > div,
body.dark-version .home-page .fq-slide > div,
body.dark-version .home-page .ts-slide,
body.dark-version .home-page .fq-nav {
  background: #16213e !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Featured-question card: the question stem, explanation body, and
   testimonial blockquote all hardcode `color: #1d1d1f` inline. */
body.dark-version .home-page .fq-slide > div p,
body.dark-version .home-page .fq-slide > div .fq-result > div > div,
body.dark-version .home-page .ts-slide blockquote {
  color: #e8e8ea !important;
}

/* Multiple-choice option buttons inside the featured-question card —
   the light borders (#e9ecef, #ccc) disappear on the dark surface. */
body.dark-version .home-page .hq-choice {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-version .home-page .hq-choice span {
  color: #e8e8ea !important;
}

body.dark-version .home-page .hq-choice .hq-label {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #e8e8ea !important;
}

/* Carousel nav buttons. */
body.dark-version .home-page .fq-nav {
  color: #c0c0c4 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.dark-version .home-page .fq-nav:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Carousel dots: the inactive dots are #d2d2d7 in light mode. */
body.dark-version .home-page .fq-dot {
  background: rgba(255, 255, 255, 0.18) !important;
}

body.dark-version .home-page .fq-dot.active {
  background: #60a5fa !important;
}

/* "See full page" pill — inline `background:#f5f5f7; color:#1d1d1f`.
   Attribute selector reaches the inline literal. */
body.dark-version .home-page .fq-result a[style*="#f5f5f7"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8ea !important;
}

/* Testimonial figcaption / decorative quote mark. */
body.dark-version .home-page .ts-slide figcaption {
  color: #a0a0a4 !important;
}

/* FAQ accordion items at the bottom of the landing page also use inline
   `style="background: white"`. Force them and make sure the chevron stays
   visible. The <summary> question text uses var(--home-text), which the
   :root override at the top of this block already flips, so it inherits. */
body.dark-version .home-page .faq-item {
  background: #16213e !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.dark-version .home-page .faq-item summary,
body.dark-version .home-page .faq-item summary span,
body.dark-version .home-page .faq-item p {
  color: #e8e8ea !important;
}

/* Question stem `.home-q-grid` outer area & explanation accent border. */
body.dark-version .home-page .fq-result .fq-msg {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* "% OFF · SEASON" badge on the pricing card: inline cream bg (#fef3c7)
   with dark-brown text (#92400e). In dark mode the global text-color
   force pushes the brown to light gray, which fades into the still-cream
   bg. Flip to a warm amber surface + bright amber text. */
body.dark-version .home-page [style*="#fef3c7"] {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fcd34d !important;
}

/* Inline SVG diagrams embedded in question_text — the body labels use
   dark-fill presentation attributes that disappear on a dark page.
   Broad whitelist: any svg <text> that isn't already a known light/teal
   accent gets flipped to a light fill. CSS rules beat the presentation
   attribute, and !important wins over any later inline style. */
body.dark-version svg text:not([fill="#0F766E"]):not([fill="#0f766e"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]):not([fill="#5eead4"]):not([fill="#60a5fa"]):not([fill="#34c759"]) {
  fill: #f0f0f3 !important;
}

/* Specific dark fills still get an explicit override too — defense in
   depth in case a browser somehow ignores the :not() chain on SVG. */
body.dark-version svg text[fill="#1d1d1f"],
body.dark-version svg text[fill="#374151"],
body.dark-version svg text[fill="#1f2937"],
body.dark-version svg text[fill="#111827"],
body.dark-version svg text[fill="black"],
body.dark-version svg text[fill="#000"],
body.dark-version svg text[fill="#000000"] {
  fill: #f0f0f3 !important;
}

/* Faint container fill on the question box gets a hair brighter so the
   outline is still perceptible against the dark background. */
body.dark-version svg rect[fill="rgba(15,118,110,0.06)"] {
  fill: rgba(94, 234, 212, 0.10) !important;
}