/* ================================================
   THEME MODES (GLOBAL)
   Applies to all pages that include this file.
   ================================================ */

/* ===== THEME BASE RULES (APPLY TO ALL NON-DEFAULT THEMES) ===== */
body[data-theme] {
  background: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  --bs-primary: var(--theme-accent);
  --bs-soft-primary: var(--theme-accent-soft);
  --nav-link-color: var(--theme-text);
  --heading-color: var(--theme-text);
}

body[data-theme] .content-wrapper,
body[data-theme] .wrapper,
body[data-theme] header,
body[data-theme] section {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .wrapper.bg-light,
body[data-theme] .article {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .card,
body[data-theme] .navbar,
body[data-theme] .navbar.navbar-light,
body[data-theme] .navbar.bg-white,
body[data-theme] footer,
body[data-theme] .dropdown-menu,
body[data-theme] .modal-content,
body[data-theme] .list-group-item,
body[data-theme] .offcanvas,
body[data-theme] .accordion-item,
body[data-theme] .table,
body[data-theme] .table thead th,
body[data-theme] .table tbody td {
  background-color: var(--theme-surface) !important;
  color: var(--theme-surface-text, var(--theme-text)) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .dropdown-item-text,
body[data-theme] .dropdown-item-text strong {
  color: var(--theme-text) !important;
}

body[data-theme] footer,
body[data-theme] footer .text-white,
body[data-theme] footer h1,
body[data-theme] footer h2,
body[data-theme] footer h3,
body[data-theme] footer h4,
body[data-theme] footer h5,
body[data-theme] footer h6,
body[data-theme] footer .widget-title {
  color: var(--theme-text) !important;
}

body[data-theme] footer a,
body[data-theme] footer .text-white-50,
body[data-theme] footer .link-body,
body[data-theme] footer .list-unstyled a {
  color: var(--theme-muted) !important;
}

body[data-theme] footer a:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .settings-card-mobile {
  background-color: transparent !important;
}

body[data-theme] .bg-light,
body[data-theme] .bg-white,
body[data-theme] .bg-body,
body[data-theme] .bg-body-tertiary,
body[data-theme] .bg-soft-primary {
  background-color: var(--theme-surface) !important;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] h6,
body[data-theme] .card-title,
body[data-theme] .modal-title,
body[data-theme] .navbar-brand,
body[data-theme] .nav-link,
body[data-theme] .text-dark {
  color: var(--theme-accent) !important;
}

body[data-theme] .navbar-nav .nav-link,
body[data-theme] .offcanvas .navbar-nav .nav-link {
  color: var(--theme-text) !important;
}

body[data-theme] .navbar-nav .nav-link.active,
body[data-theme] .nav-link.active,
body[data-theme] .nav-link:hover,
body[data-theme] .nav-tabs .nav-link.active,
body[data-theme] .offcanvas .navbar-nav .nav-link.active,
body[data-theme] .offcanvas .navbar-nav .nav-link:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .text-muted,
body[data-theme] .text-secondary,
body[data-theme] .form-text,
body[data-theme] small {
  color: var(--theme-muted) !important;
}

body[data-theme] a {
  color: var(--theme-accent-hover) !important;
}

body[data-theme] a:hover {
  color: var(--theme-accent-hover, var(--theme-accent)) !important;
}

body[data-theme] .border,
body[data-theme] hr {
  border-color: var(--theme-border) !important;
}

body[data-theme] .form-control,
body[data-theme] .form-select,
body[data-theme] .input-group-text {
  background-color: var(--theme-surface) !important;
  color: var(--theme-surface-text, var(--theme-text)) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .form-control::placeholder,
body[data-theme] textarea::placeholder,
body[data-theme] input::placeholder {
  color: var(--theme-muted) !important;
  opacity: 0.85;
}

body[data-theme] .form-control:focus,
body[data-theme] .form-select:focus,
body[data-theme] .btn:focus,
body[data-theme] .btn:focus-visible {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 0.2rem var(--theme-ring) !important;
}

body[data-theme] .btn-primary {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .btn-outline-primary {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] .btn-outline-primary:hover {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .btn-success,
body[data-theme] .btn-danger,
body[data-theme] .btn-info {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
}

body[data-theme] .btn i,
body[data-theme] .btn svg,
body[data-theme] .btn .bi,
body[data-theme] .btn .uil,
body[data-theme] .btn .fa,
body[data-theme] .btn .fas,
body[data-theme] .btn .far,
body[data-theme] .btn .fab,
body[data-theme] .btn .fal,
body[data-theme] .btn .fad,
body[data-theme] .btn .fa-solid,
body[data-theme] .btn .fa-regular,
body[data-theme] .btn .fa-brands {
  color: inherit !important;
}

body[data-theme] .btn-soft-primary,
body[data-theme] .bg-soft-primary {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .text-primary,
body[data-theme] .text-success,
body[data-theme] .text-info,
body[data-theme] .text-warning,
body[data-theme] .text-danger {
  color: var(--theme-accent) !important;
}

body[data-theme] .icon.btn.btn-soft-primary,
body[data-theme] .icon.btn.btn-circle {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .icon.btn.btn-soft-primary .number {
  color: var(--theme-accent) !important;
}

body[data-theme] .icon-list li i {
  color: var(--theme-accent) !important;
}

body[data-theme] .progress-bar,
body[data-theme] .badge.bg-primary {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] .text-primary {
  color: var(--theme-accent) !important;
}

body[data-theme] .bi,
body[data-theme] .uil,
body[data-theme] .fa,
body[data-theme] .fas,
body[data-theme] .far,
body[data-theme] .fab,
body[data-theme] .fal,
body[data-theme] .fad,
body[data-theme] .fa-solid,
body[data-theme] .fa-regular,
body[data-theme] .fa-brands,
body[data-theme] i[class^="bi-"],
body[data-theme] i[class*=" bi-"] {
  color: var(--theme-icon) !important;
  opacity: var(--theme-icon-opacity, 1);
}

body[data-theme] .settings-card-mobile .card,
body[data-theme] .settings-card-mobile .card-body {
  border-color: var(--theme-border) !important;
}

body[data-theme] .quick-presets-mobile,
body[data-theme] .quick-presets-mobile .card,
body[data-theme] .quick-presets-mobile .card-body {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .preset-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .preset-card .preset-title,
body[data-theme] .preset-card .preset-emoji {
  color: var(--theme-text) !important;
}

body[data-theme] .preset-card:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .items-container,
body[data-theme] #itemsList {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .item-entry {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

body[data-theme] .item-entry input,
body[data-theme] .item-entry select,
body[data-theme] .item-entry textarea {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .leaderboard-item,
body[data-theme] .leaderboard-item-left,
body[data-theme] .leaderboard-name,
body[data-theme] .leaderboard-rank,
body[data-theme] .leaderboard-count,
body[data-theme] .leaderboard-combo-text {
  color: var(--theme-text) !important;
}

body[data-theme] .leaderboard-item {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .leaderboard-item:hover {
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .history-item {
  background-color: var(--theme-surface) !important;
  color: var(--theme-surface-text, var(--theme-text)) !important;
  border-color: var(--theme-border) !important;
}
body[data-theme] .history-spin-number,
body[data-theme] .history-timestamp {
  color: var(--theme-muted, var(--theme-text)) !important;
  opacity: .7;
}

body[data-theme] .winners-scroll-container,
body[data-theme] #historyList {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

body[data-theme] .winners-scroll-container p,
body[data-theme] .winners-scroll-container small {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-selector-mobile,
body[data-theme] .spin-mode-selector-mobile .card,
body[data-theme] .spin-mode-selector-mobile .card-body {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .spin-mode-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .spin-mode-card .mode-title,
body[data-theme] .spin-mode-card small {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-card.active {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) !important;
}

body[data-theme] .wheel-wrapper,
body[data-theme] #wheel,
body[data-theme] .coin-container,
body[data-theme] .centerspin-container,
body[data-theme] .slot-container,
body[data-theme] .lucky-container {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 0 20px var(--theme-wheel-glow) !important;
}

body[data-theme] .centerspin-pointer {
  border-top: 3px solid var(--theme-accent) !important;
  border-bottom: 3px solid var(--theme-accent) !important;
}

body[data-theme] .centerspin-reel-wrapper {
  border: 2px solid var(--theme-accent);
}

body[data-theme] .slot-reel {
  border: 2px solid var(--theme-accent);
}

body[data-theme] .slot-reel-window {
  border: 3px solid var(--theme-accent);
}

body[data-theme] .lucky-pointer {
  background: linear-gradient(180deg, transparent 0%, var(--theme-accent) 20%, var(--theme-accent) 80%, transparent 100%);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.8);
}

body[data-theme] .lucky-pointer::before {
  border-top: 15px solid var(--theme-accent);
}

body[data-theme] .lucky-pointer::after {
  border-bottom: 15px solid var(--theme-accent);
}

body[data-theme] .btn-theme-color {
  color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] input[type="range"]::-webkit-slider-thumb {
  background: var(--theme-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

body[data-theme] input[type="range"]::-moz-range-thumb {
  background: var(--theme-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

body[data-theme] .form-check-input:checked {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
}

body[data-theme] .btn-sm:not(.btn-primary):not(.btn-outline-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
  background-color: transparent;
  border: 1px solid var(--theme-accent) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .heading-color {
  color: var(--theme-accent) !important;
}

/* ===== PAGINATION — theme-aware (Bootstrap's pagination component vars don't chain through --bs-primary) ===== */
body[data-theme] .pagination .page-link {
  color: var(--theme-accent) !important;
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .pagination .page-link:hover {
  color: var(--theme-accent-hover, var(--theme-accent)) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.1) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .pagination .page-item.active .page-link {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
  pointer-events: none;
}

body[data-theme] .pagination .page-item.disabled .page-link {
  color: var(--theme-muted) !important;
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  opacity: 0.6;
}

body[data-theme] .pointer {
  border-top-color: var(--theme-accent) !important;
}

body[data-theme] #mainSpinBtn,
body[data-theme] #centerSpinBtn,
body[data-theme] #comboSpinBtn,
body[data-theme] #luckyBoxBtn,
body[data-theme] #mainRollBtn {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

body[data-theme] #mainSpinBtn:hover,
body[data-theme] #centerSpinBtn:hover,
body[data-theme] #comboSpinBtn:hover,
body[data-theme] #luckyBoxBtn:hover,
body[data-theme] #mainRollBtn:hover,
body[data-theme] #mainSpinBtn:active,
body[data-theme] #centerSpinBtn:active,
body[data-theme] #comboSpinBtn:active,
body[data-theme] #luckyBoxBtn:active,
body[data-theme] #mainRollBtn:active,
body[data-theme] #mainSpinBtn:focus,
body[data-theme] #centerSpinBtn:focus,
body[data-theme] #mainRollBtn:focus {
  background-color: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

/* ===== PAGE-SPECIFIC ELEMENTS (home, random-pickers, tools, etc.) ===== */
body[data-theme] .picker-card,
body[data-theme] .picker-item .picker-card {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .picker-card:hover {
  border-color: var(--theme-accent) !important;
  box-shadow: 0 4px 18px var(--theme-ring) !important;
}

body[data-theme] .picker-card h3,
body[data-theme] .picker-card .card-icon {
  color: var(--theme-text) !important;
}

body[data-theme] .picker-card p {
  color: var(--theme-muted) !important;
}

body[data-theme] .spin-mode-tag {
  color: var(--theme-accent) !important;
}

body[data-theme] .category-section {
  border-top-color: var(--theme-border) !important;
}

body[data-theme] .hero-gradient {
  background: var(--theme-bg) !important;
}

body[data-theme] .section-frame,
body[data-theme] .wrapper.bg-soft-primary {
  background-color: var(--theme-bg) !important;
}

/* Blog hero (listing + article) */
body[data-theme] .section-frame .wrapper.bg-soft-primary,
body[data-theme] .image-wrapper.bg-overlay {
  background-color: var(--theme-bg) !important;
}

body[data-theme] .image-wrapper.bg-overlay::before {
  background: rgba(0, 0, 0, 0.45) !important;
}

body[data-theme] .link-dark {
  color: var(--theme-accent) !important;
}

body[data-theme] .link-dark:hover {
  color: var(--theme-accent-hover, var(--theme-accent)) !important;
}

body[data-theme] .post-title a,
body[data-theme] .post-content {
  color: var(--theme-text) !important;
}

body[data-theme] .feature-icon {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .step-number {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .alert {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

body[data-theme] .theme-card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

body[data-theme] .theme-card:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] .theme-card.is-selected {
  border-color: var(--theme-accent) !important;
  background-color: rgba(var(--theme-accent-rgb), 0.18) !important;
}

body[data-theme] .spin-center-btn {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
  border-color: var(--theme-accent) !important;
}

body[data-theme] .overlay {
  background-color: var(--theme-surface) !important;
}

body[data-theme] .card-img-top {
  border-color: var(--theme-border) !important;
}

/* Navbar sticky state - ensure theme applies when navbar sticks */
body[data-theme] .navbar-stick,
body[data-theme] .navbar-stick.navbar-light {
  background-color: var(--theme-surface) !important;
}

/* Blog breadcrumb active item - readable on all themes */
body[data-theme] .breadcrumb-item.active {
  color: var(--theme-text) !important;
}

body[data-theme] .breadcrumb-item a {
  color: var(--theme-muted) !important;
}

body[data-theme] .breadcrumb-item a:hover {
  color: var(--theme-accent) !important;
}

body[data-theme] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--theme-muted) !important;
}

/* Blog article social share icons */
body[data-theme] .nav.social a {
  background-color: var(--theme-surface) !important;
  color: var(--theme-accent) !important;
  border: 1px solid var(--theme-border) !important;
}

body[data-theme] .nav.social a:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.15) !important;
  color: var(--theme-accent) !important;
}

body[data-theme] .nav.social a i,
body[data-theme] .nav.social a .uil {
  color: var(--theme-accent) !important;
}

/* ===== ADMIN SIDEBAR & OFFCANVAS THEME SUPPORT ===== */

/* Desktop sidebar: replace accent gradient with surface bg */
body[data-theme] .sidebar {
  background: var(--theme-surface) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25) !important;
}

body[data-theme] .sidebar .nav-link {
  color: var(--theme-surface-text, var(--theme-text)) !important;
}

body[data-theme] .sidebar .nav-link:hover,
body[data-theme] .sidebar .nav-link.active {
  background-color: rgba(var(--theme-accent-rgb), 0.15) !important;
  color: var(--theme-accent) !important;
}

/* Admin mobile offcanvas: clear inline gradient, apply surface bg */
body[data-theme] #adminMobileNav {
  background: var(--theme-surface) !important;
}

body[data-theme] #adminMobileNav .nav-link {
  color: var(--theme-surface-text, var(--theme-text)) !important;
}

body[data-theme] #adminMobileNav .nav-link:hover,
body[data-theme] #adminMobileNav .nav-link.active {
  background-color: rgba(var(--theme-accent-rgb), 0.15) !important;
  color: var(--theme-accent) !important;
}

/* User offcanvas close button: invert on dark-surface themes */
body[data-theme="dark"] .offcanvas .btn-close:not(.btn-close-white),
body[data-theme="gaming"] .offcanvas .btn-close:not(.btn-close-white),
body[data-theme="crypto"] .offcanvas .btn-close:not(.btn-close-white),
body[data-theme="studio"] .offcanvas .btn-close:not(.btn-close-white) {
  filter: invert(1);
}

/* Admin top navbar: fix "Welcome, ..." text colour on themed (dark) navbar */
body[data-theme] .admin-welcome-text,
body[data-theme] .admin-welcome-text strong {
  color: var(--theme-surface-text, var(--theme-text)) !important;
}

/* Sidebar/offcanvas branding: replace hardcoded white-50 with muted theme colour */
body[data-theme] .sidebar .text-white-50,
body[data-theme] #adminMobileNav .text-white-50 {
  color: var(--theme-muted) !important;
}

/* ===== CRYPTO THEME (Tech & Trust) ===== */
body[data-theme="crypto"] {
  --theme-bg: #0a0f1f;
  --theme-surface: #172554;
  --theme-text: #e2e8f0;
  --theme-surface-text: #e2e8f0;
  --theme-muted: #94a3b8;
  --theme-accent: #06b6d4;
  --theme-accent-hover: #2dd4bf;
  --theme-accent-soft: #cffafe;
  --theme-accent-rgb: 6, 182, 212;
  --theme-border: rgba(14, 116, 144, 0.35);
  --theme-icon: #e2e8f0;
  --theme-icon-opacity: 0.85;
  --theme-ring: rgba(6, 182, 212, 0.2);
  --theme-wheel-glow: rgba(6, 182, 212, 0.15);
}

/* ===== DARK THEME (Pure Dark / Neutral) ===== */
body[data-theme="dark"] {
  --theme-bg: #121212;
  --theme-surface: #1e1e1e;
  --theme-text: #e5e7eb;
  --theme-surface-text: #e5e7eb;
  --theme-muted: #9ca3af;
  --theme-accent: #6366f1;
  --theme-accent-hover: #818cf8;
  --theme-accent-soft: #e0e7ff;
  --theme-accent-rgb: 99, 102, 241;
  --theme-border: rgba(255, 255, 255, 0.1);
  --theme-icon: #f3f4f6;
  --theme-icon-opacity: 0.9;
  --theme-ring: rgba(99, 102, 241, 0.3);
  --theme-wheel-glow: rgba(99, 102, 241, 0.2);
}

/* ===== GAMING THEME (Esports / Neon Green Energy) ===== */
body[data-theme="gaming"] {
  --theme-bg: #0c0e1a;
  --theme-surface: #1e293b;
  --theme-text: #f1f5f9;
  --theme-surface-text: #f1f5f9;
  --theme-muted: #94a3b8;
  --theme-accent: #22c55e;
  --theme-accent-hover: #4ade80;
  --theme-accent-soft: #dcfce7;
  --theme-accent-rgb: 34, 197, 94;
  --theme-border: rgba(34, 197, 94, 0.3);
  --theme-icon: #d1fae5;
  --theme-icon-opacity: 0.95;
  --theme-ring: rgba(34, 197, 94, 0.3);
  --theme-wheel-glow: rgba(34, 197, 94, 0.25);
}

/* ===== HIGH CONTRAST (Accessibility) ===== */
body[data-theme="high-contrast"] {
  --theme-bg: #000000;
  --theme-surface: #ffffff;
  --theme-text: #ffffff;
  --theme-surface-text: #000000;
  --theme-muted: #1f2937;
  --theme-accent: #00aaff;
  --theme-accent-hover: #00cc99;
  --theme-accent-soft: #dbeafe;
  --theme-accent-rgb: 0, 170, 255;
  --theme-border: #000000;
  --theme-icon: #ffffff;
  --theme-icon-opacity: 1;
  --theme-ring: rgba(0, 170, 255, 1);
  --theme-wheel-glow: rgba(0, 170, 255, 0.4);
  --theme-button-text: #000000;
}

body[data-theme="high-contrast"] .text-muted,
body[data-theme="high-contrast"] .text-secondary,
body[data-theme="high-contrast"] .form-text,
body[data-theme="high-contrast"] small {
  color: rgba(255, 255, 255, 0.75) !important;
}

body[data-theme="high-contrast"] .text-dark {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .wrapper.bg-light,
body[data-theme="high-contrast"] .article,
body[data-theme="high-contrast"] .content-wrapper,
body[data-theme="high-contrast"] section {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Specificity override: section.bg-light/bg-white (0-2-1) beats generic body[data-theme] .bg-light (0-2-0) */
body[data-theme="high-contrast"] section.bg-light,
body[data-theme="high-contrast"] section.bg-white,
body[data-theme="high-contrast"] div.bg-light:not(.card):not(.card-body):not(.dropdown-menu) {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Stat strip elements sit directly on black body — need white text */
body[data-theme="high-contrast"] .wsp-stat-label {
  color: rgba(255, 255, 255, 0.85) !important;
}

body[data-theme="high-contrast"] .wsp-stats-strip .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Muted text inside black sections needs to be white/light (specificity 0-2-1) */
body[data-theme="high-contrast"] section .text-muted,
body[data-theme="high-contrast"] section small {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Cards inside sections remain white bg — muted text stays dark (specificity 0-3-0 beats above) */
body[data-theme="high-contrast"] .card .text-muted,
body[data-theme="high-contrast"] .card small,
body[data-theme="high-contrast"] .modal-content .text-muted {
  color: #1f2937 !important;
}

body[data-theme="high-contrast"] .navbar,
body[data-theme="high-contrast"] .navbar-nav .nav-link,
body[data-theme="high-contrast"] .navbar-brand {
  background-color: #000000 !important;
  color: #ffffff !important;
}

body[data-theme="high-contrast"] .navbar-nav .nav-link.active,
body[data-theme="high-contrast"] .navbar-nav .nav-link:hover {
  color: #00aaff !important;
}

body[data-theme="high-contrast"] footer,
body[data-theme="high-contrast"] footer * {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="high-contrast"] footer a {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .leaderboard-item,
body[data-theme="high-contrast"] .history-item,
body[data-theme="high-contrast"] .preset-card,
body[data-theme="high-contrast"] .items-container,
body[data-theme="high-contrast"] .item-entry {
  background-color: #ffffff !important;
  color: #000000 !important;
}

body[data-theme="high-contrast"] .item-entry input,
body[data-theme="high-contrast"] .item-entry select,
body[data-theme="high-contrast"] .item-entry textarea,
body[data-theme="high-contrast"] #itemsList input,
body[data-theme="high-contrast"] #itemsList select,
body[data-theme="high-contrast"] #itemsList textarea {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .quick-presets-mobile .preset-title {
  color: #000000 !important;
}

body[data-theme="high-contrast"] .card,
body[data-theme="high-contrast"] .card-body,
body[data-theme="high-contrast"] .dropdown-menu,
body[data-theme="high-contrast"] .modal-content,
body[data-theme="high-contrast"] .list-group-item,
body[data-theme="high-contrast"] .offcanvas,
body[data-theme="high-contrast"] .accordion-item,
body[data-theme="high-contrast"] .settings-card-mobile .card,
body[data-theme="high-contrast"] .settings-card-mobile .card-body,
body[data-theme="high-contrast"] .quick-presets-mobile,
body[data-theme="high-contrast"] .spin-mode-selector-mobile,
body[data-theme="high-contrast"] .spin-mode-card {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body[data-theme="high-contrast"] .card *,
body[data-theme="high-contrast"] .dropdown-menu *,
body[data-theme="high-contrast"] .modal-content *,
body[data-theme="high-contrast"] .list-group-item *,
body[data-theme="high-contrast"] .offcanvas *,
body[data-theme="high-contrast"] .accordion-item *,
body[data-theme="high-contrast"] .quick-presets-mobile *,
body[data-theme="high-contrast"] .spin-mode-card *,
body[data-theme="high-contrast"] .leaderboard-item *,
body[data-theme="high-contrast"] .history-item *,
body[data-theme="high-contrast"] .items-container * {
  color: #000000 !important;
}

/* Improve SVG icon visibility on dark themes */
body[data-theme="dark"] .icon-svg,
body[data-theme="studio"] .icon-svg,
body[data-theme="gaming"] .icon-svg,
body[data-theme="crypto"] .icon-svg,
body[data-theme="high-contrast"] .icon-svg {
  filter: brightness(0) invert(1) opacity(0.85);
}

body[data-theme="high-contrast"] .form-control,
body[data-theme="high-contrast"] .form-select,
body[data-theme="high-contrast"] .input-group-text {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body[data-theme="high-contrast"] .form-control::placeholder,
body[data-theme="high-contrast"] textarea::placeholder,
body[data-theme="high-contrast"] input::placeholder {
  color: #374151 !important;
  opacity: 1;
}

body[data-theme="high-contrast"] .btn,
body[data-theme="high-contrast"] .btn:focus,
body[data-theme="high-contrast"] .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(0, 170, 255, 1) !important;
}

/* ===== MINIMAL THEME (True Grayscale / Charcoal) ===== */
body[data-theme="minimal"] {
  --theme-bg: #ffffff;
  --theme-surface: #f8fafc;
  --theme-text: #0f172a;
  --theme-surface-text: #0f172a;
  --theme-muted: #64748b;
  --theme-accent: #1e293b;
  --theme-accent-hover: #334155;
  --theme-accent-soft: #475569;
  --theme-accent-rgb: 30, 41, 59;
  --theme-border: #e2e8f0;
  --theme-icon: #334155;
  --theme-icon-opacity: 0.9;
  --theme-ring: rgba(30, 41, 59, 0.2);
  --theme-wheel-glow: rgba(30, 41, 59, 0.15);
  --theme-button-text: #ffffff;
}

body[data-theme="minimal"] .card,
body[data-theme="minimal"] .dropdown-menu,
body[data-theme="minimal"] .modal-content,
body[data-theme="minimal"] .offcanvas,
body[data-theme="minimal"] .btn,
body[data-theme="minimal"] .form-control,
body[data-theme="minimal"] .form-select {
  border-radius: 6px !important;
  box-shadow: none !important;
}

body[data-theme="minimal"] .wheel-wrapper,
body[data-theme="minimal"] #wheel,
body[data-theme="minimal"] .coin-container,
body[data-theme="minimal"] .centerspin-container,
body[data-theme="minimal"] .slot-container,
body[data-theme="minimal"] .lucky-container {
  box-shadow: none !important;
}

/* ===== STUDIO THEME (Professional Recording / Warm Amber) ===== */
body[data-theme="studio"] {
  --theme-bg: #070707;
  --theme-surface: #111111;
  --theme-text: #e7e5e4;
  --theme-surface-text: #e7e5e4;
  --theme-muted: rgba(168, 162, 158, 0.8);
  --theme-accent: #d97706;
  --theme-accent-hover: #f59e0b;
  --theme-accent-soft: #fef3c7;
  --theme-accent-rgb: 217, 119, 6;
  --theme-border: rgba(217, 119, 6, 0.2);
  --theme-icon: #fcd34d;
  --theme-icon-opacity: 0.8;
  --theme-ring: rgba(217, 119, 6, 0.25);
  --theme-wheel-glow: rgba(251, 191, 36, 0.18);
}

body[data-theme="studio"] .settings-card-mobile,
body[data-theme="studio"] footer {
  opacity: 0.7;
}

/* Studio: navbar must stay fully opaque so dropdowns remain clickable (no opacity/z-index issues) */
body[data-theme="studio"] .navbar,
body[data-theme="studio"] .navbar .dropdown-menu {
  opacity: 1 !important;
}

body[data-theme="studio"] .navbar .dropdown-menu {
  z-index: 1050 !important;
}

/* =====================================================================
   ZEN / FOCUS MODE
   Shows only the wheel card full-screen; hides all other chrome.
   Toggle by adding/removing .zen-mode on <body>.
   ===================================================================== */

/* 1 — Hide all page chrome */
body.zen-mode header,
body.zen-mode footer,
body.zen-mode .page-title-section,
body.zen-mode .seo-content-section,
body.zen-mode .related-tools,
body.zen-mode [id*="sticky-ad"],
body.zen-mode .bottom-sticky-ad,
/* Sticky clone navbar — appended to <body> by site.js, not inside <header> */
body.zen-mode .navbar-clone,
/* Settings panel (both desktop column and mobile offcanvas) */
body.zen-mode #settingsDrawer,
/* Non-wheel cards in the left column */
body.zen-mode .winners-card-mobile,
body.zen-mode .quick-presets-mobile,
body.zen-mode .spin-mode-selector-mobile,
/* Niche tool pages: the intro strip + all SEO content sections sit outside the
   widget's .main-layout-row, so hide them explicitly in zen focus mode. */
body.zen-mode .tool-intro,
body.zen-mode main > section.wrapper,
/* Offcanvas backdrop left open when zen mode is triggered from the settings drawer */
body.zen-mode .offcanvas-backdrop {
  display: none !important;
}

/* 2 — The main layout row becomes the full-screen overlay.
        JS (toggleZenMode) reads the body's computed background and applies it
        as an inline style so every page's own theme shows correctly.
        var(--theme-bg, #fff) is the no-JS fallback only. */
body.zen-mode .main-layout-row {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--theme-bg, #fff) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important;
}

/* 3 — Left column centers its content */
body.zen-mode .main-layout-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 620px !important;
  padding: 1.5rem 1rem !important;
  flex: none !important;
}

/* 4 — Wheel card fills the centered area */
body.zen-mode .wheel-card-mobile {
  width: 100% !important;
  margin-top: 0 !important;
}

/* 5 — JS-injected exit button (always on top) — small subtle × */
#zenExitBtn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1002;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .80);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
}
#zenExitBtn:hover {
  background: rgba(0, 0, 0, .55);
  color: #fff;
}

/* 6 — Zen mode shows ONLY the wheel/tool area. Hide the in-card settings,
       custom-list textareas and the (now redundant) zen toggle button, so
       nothing but the spinner and its result remains. */
body.zen-mode .wheel-card-mobile .accordion,
body.zen-mode #zenModeBtn,
body.zen-mode .settings-card-mobile {
  display: none !important;
}

/* 7 — Right-docked read-only entries list (authenticity during a live draw). */
#zenItemsPanel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: clamp(140px, 22vw, 240px);
  padding: 3rem 0.85rem 1rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
#zenItemsPanel .zen-items-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#zenItemsPanel .zen-items-list {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.8rem;
  line-height: 1.5;
}
#zenItemsPanel .zen-items-list li {
  overflow-wrap: anywhere;
  margin-bottom: 0.1rem;
}
/* Editable entries textarea — mirrors the real list, no numbers. */
#zenItemsPanel .zen-items-editor {
  width: 100%;
  min-height: 62vh;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.6;
  padding: 0.55rem 0.65rem;
  resize: none;
  outline: none;
}
#zenItemsPanel .zen-items-editor:focus {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.34);
}
/* Keep the centred wheel clear of the docked list when it's present. */
body.zen-mode:has(#zenItemsPanel) .main-layout-row {
  padding-right: clamp(140px, 22vw, 240px) !important;
}
@media (max-width: 575px) {
  #zenItemsPanel { width: 40vw; font-size: 0.7rem; padding-top: 2.6rem; }
  #zenItemsPanel .zen-items-list { font-size: 0.72rem; }
  body.zen-mode:has(#zenItemsPanel) .main-layout-row { padding-right: 40vw !important; }
}

/* =====================================================================
   FLOATING SUPPORT BUTTON
   ===================================================================== */
#wspSupportFloat {
  position: fixed;
  bottom: 25px;
  right: 16px;
  z-index: 990;
  background: #ffc107;
  color: #1a1a2e;
  border: none;
  border-radius: 24px;
  padding: .5rem 1rem .5rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
}
#wspSupportFloat:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0,0,0,.25);
  color: #1a1a2e;
}
/* Force dark text on the golden floater in all themes */
body[data-theme] #wspSupportFloat,
body[data-theme] #wspSupportFloat:hover {
  color: #1a1a2e !important;
}
#wspSupportFloat .sf-dismiss {
  background: transparent;
  border: none;
  color: rgba(26,26,46,.5);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  margin-left: .2rem;
  line-height: 1;
}

/* =====================================================================
   DROPDOWN ITEM THEME OVERRIDES
   Bootstrap .dropdown-item uses its own color vars — ensure they
   respect the site theme in all non-default themes.
   ===================================================================== */
body[data-theme] .dropdown-item {
  color: var(--theme-text) !important;
}
body[data-theme] .dropdown-item:hover,
body[data-theme] .dropdown-item:focus {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}
body[data-theme] .dropdown-item.active,
body[data-theme] .dropdown-item:active {
  background-color: var(--theme-accent) !important;
  color: var(--theme-button-text, #ffffff) !important;
}

/* Nav theme picker dropdown — injected into every .navbar-nav (original + sticky clone) */
.nav-theme-picker .dropdown-menu {
  min-width: 160px;
}
body[data-theme] .nav-theme-picker .nav-theme-btn {
  color: var(--theme-text) !important;
}
body[data-theme] .nav-theme-picker .nav-theme-btn:hover {
  background-color: rgba(var(--theme-accent-rgb), 0.12) !important;
  color: var(--theme-accent) !important;
}

/* Dark-background themes: nav theme picker dropdown needs surface styling */
body[data-theme="dark"] .nav-theme-picker .dropdown-menu,
body[data-theme="gaming"] .nav-theme-picker .dropdown-menu,
body[data-theme="crypto"] .nav-theme-picker .dropdown-menu,
body[data-theme="studio"] .nav-theme-picker .dropdown-menu {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}
body[data-theme="dark"] .nav-theme-picker .dropdown-item,
body[data-theme="gaming"] .nav-theme-picker .dropdown-item,
body[data-theme="crypto"] .nav-theme-picker .dropdown-item,
body[data-theme="studio"] .nav-theme-picker .dropdown-item,
body[data-theme="dark"] .nav-theme-picker .dropdown-item-text,
body[data-theme="gaming"] .nav-theme-picker .dropdown-item-text,
body[data-theme="crypto"] .nav-theme-picker .dropdown-item-text,
body[data-theme="studio"] .nav-theme-picker .dropdown-item-text {
  color: var(--theme-text);
}
body[data-theme="dark"] .nav-theme-picker .dropdown-item:hover,
body[data-theme="dark"] .nav-theme-picker .dropdown-item:focus,
body[data-theme="gaming"] .nav-theme-picker .dropdown-item:hover,
body[data-theme="gaming"] .nav-theme-picker .dropdown-item:focus,
body[data-theme="crypto"] .nav-theme-picker .dropdown-item:hover,
body[data-theme="crypto"] .nav-theme-picker .dropdown-item:focus,
body[data-theme="studio"] .nav-theme-picker .dropdown-item:hover,
body[data-theme="studio"] .nav-theme-picker .dropdown-item:focus {
  background-color: rgba(var(--theme-accent-rgb), 0.15);
  color: var(--theme-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST — SURFACE READABILITY OVERRIDES  (must stay last in file)

   High-contrast has --theme-text:#fff (correct for the black body) but many
   general rules apply var(--theme-text) to white-surface elements (cards,
   dropdowns, picker-cards, post titles) creating invisible white-on-white
   text.  These overrides, placed last, win the cascade and restore legibility.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cards: everything inside a card → black text on white surface ── */
body[data-theme="high-contrast"] .card,
body[data-theme="high-contrast"] .card-header,
body[data-theme="high-contrast"] .card-body,
body[data-theme="high-contrast"] .card-footer {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
body[data-theme="high-contrast"] .card h1,
body[data-theme="high-contrast"] .card h2,
body[data-theme="high-contrast"] .card h3,
body[data-theme="high-contrast"] .card h4,
body[data-theme="high-contrast"] .card h5,
body[data-theme="high-contrast"] .card h6,
body[data-theme="high-contrast"] .card p,
body[data-theme="high-contrast"] .card span,
body[data-theme="high-contrast"] .card small,
body[data-theme="high-contrast"] .card div,
body[data-theme="high-contrast"] .card label,
body[data-theme="high-contrast"] .card .text-muted,
body[data-theme="high-contrast"] .card .fw-bold,
body[data-theme="high-contrast"] .card .fw-semibold {
  color: #000000 !important;
}

/* Card links: dark blue (readable on white, meets contrast) */
body[data-theme="high-contrast"] .card a {
  color: #0057b8 !important;
}
body[data-theme="high-contrast"] .card a:hover {
  color: #00aaff !important;
}

/* Icons inside white-surface containers → black */
body[data-theme="high-contrast"] .card .bi,
body[data-theme="high-contrast"] .card i[class^="bi-"],
body[data-theme="high-contrast"] .card i[class*=" bi-"],
body[data-theme="high-contrast"] .dropdown-menu .bi,
body[data-theme="high-contrast"] .dropdown-menu i[class^="bi-"],
body[data-theme="high-contrast"] .dropdown-menu i[class*=" bi-"],
body[data-theme="high-contrast"] .modal-content .bi,
body[data-theme="high-contrast"] .offcanvas .bi {
  color: #000000 !important;
}

/* ── Picker cards: headings and icons are surface-level → black ── */
body[data-theme="high-contrast"] .picker-card,
body[data-theme="high-contrast"] .picker-card h3,
body[data-theme="high-contrast"] .picker-card h4,
body[data-theme="high-contrast"] .picker-card .card-icon,
body[data-theme="high-contrast"] .picker-card p,
body[data-theme="high-contrast"] .picker-card small {
  color: #000000 !important;
}
body[data-theme="high-contrast"] .picker-card a {
  color: #0057b8 !important;
}

/* ── Blog post titles and content inside cards → black ── */
body[data-theme="high-contrast"] .post-title a,
body[data-theme="high-contrast"] .post-content,
body[data-theme="high-contrast"] .post-content * {
  color: #000000 !important;
}

/* ── Dropdown menus: white bg, explicit black text on container AND items ──
   Using .dropdown-menu .dropdown-item (spec 0,0,3,1) beats the general
   body[data-theme] .dropdown-item rule (spec 0,0,2,1) to ensure black text. */
body[data-theme="high-contrast"] .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #000000 !important;
  color: #000000 !important;        /* ensures inheritance for non-item children */
}
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item,
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item-text,
body[data-theme="high-contrast"] .dropdown-menu a,
body[data-theme="high-contrast"] .dropdown-menu button,
body[data-theme="high-contrast"] .dropdown-menu span,
body[data-theme="high-contrast"] .dropdown-menu p,
body[data-theme="high-contrast"] .dropdown-menu li {
  color: #000000 !important;
}
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item:hover,
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item:focus {
  background-color: #000000 !important;
  color: #ffffff !important;
}
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item.active,
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item:active {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Nav-theme-btn and admin-theme-btn inside dropdowns */
body[data-theme="high-contrast"] .dropdown-menu .nav-theme-btn,
body[data-theme="high-contrast"] .dropdown-menu .admin-theme-btn {
  color: #000000 !important;
}
body[data-theme="high-contrast"] .dropdown-menu .nav-theme-btn:hover,
body[data-theme="high-contrast"] .dropdown-menu .admin-theme-btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Navbar logo: transparent container so no black box around it;
   small white pill behind the image so it reads on the dark navbar */
body[data-theme="high-contrast"] .navbar-brand {
  background-color: transparent !important;
}
body[data-theme="high-contrast"] .navbar-brand img {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 2px;
}

/* ── Modal and offcanvas: white bg, black text ── */
body[data-theme="high-contrast"] .modal-content,
body[data-theme="high-contrast"] .modal-body,
body[data-theme="high-contrast"] .modal-header,
body[data-theme="high-contrast"] .modal-footer {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
body[data-theme="high-contrast"] .modal-content h1,
body[data-theme="high-contrast"] .modal-content h2,
body[data-theme="high-contrast"] .modal-content h3,
body[data-theme="high-contrast"] .modal-content h4,
body[data-theme="high-contrast"] .modal-content h5,
body[data-theme="high-contrast"] .modal-content p,
body[data-theme="high-contrast"] .modal-content span,
body[data-theme="high-contrast"] .modal-content small,
body[data-theme="high-contrast"] .modal-title {
  color: #000000 !important;
}

/* Offcanvas (mobile menu) */
body[data-theme="high-contrast"] .offcanvas {
  background-color: #000000 !important;
  color: #ffffff !important;
}
body[data-theme="high-contrast"] .offcanvas .navbar-nav .nav-link {
  color: #ffffff !important;
}

/* ── List group items ── */
body[data-theme="high-contrast"] .list-group-item,
body[data-theme="high-contrast"] .list-group-item * {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ── Table cells ── */
body[data-theme="high-contrast"] .table,
body[data-theme="high-contrast"] .table thead th,
body[data-theme="high-contrast"] .table tbody td,
body[data-theme="high-contrast"] .table * {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ── Nav tabs (on white surface sections) ── */
body[data-theme="high-contrast"] .nav-tabs .nav-link {
  color: #000000 !important;
  border-color: #000000 !important;
}
body[data-theme="high-contrast"] .nav-tabs .nav-link.active {
  color: #000000 !important;
  background-color: #ffffff !important;
  border-color: #000000 !important;
}
body[data-theme="high-contrast"] .nav-tabs .nav-link:hover {
  color: #00aaff !important;
}

/* ── Text-muted inside surface elements → dark gray (readable on white) ── */
body[data-theme="high-contrast"] .card .text-muted,
body[data-theme="high-contrast"] .dropdown-menu .text-muted,
body[data-theme="high-contrast"] .modal-content .text-muted {
  color: #374151 !important;
}

/* ── Form controls inside surface elements ── */
body[data-theme="high-contrast"] .form-control,
body[data-theme="high-contrast"] .form-select,
body[data-theme="high-contrast"] .input-group-text {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ── Alert ── */
body[data-theme="high-contrast"] .alert {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MINIMAL — Extra surface readability guards
   ══════════════════════════════════════════════════════════════════════════ */

/* Minimal nav-tabs: muted inactive, charcoal active */
body[data-theme="minimal"] .nav-tabs .nav-link {
  color: var(--theme-muted) !important;
  border-color: transparent !important;
}
body[data-theme="minimal"] .nav-tabs .nav-link.active {
  color: var(--theme-accent) !important;
  border-color: var(--theme-border) var(--theme-border) #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* Minimal: btn-outline-secondary and similar should look crisp, not colored */
body[data-theme="minimal"] .btn-outline-secondary {
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
}
body[data-theme="minimal"] .btn-outline-secondary:hover {
  background-color: var(--theme-surface) !important;
  color: var(--theme-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH-CONTRAST — cascade-last overrides (must stay at EOF)
   ══════════════════════════════════════════════════════════════════════════ */

/* Navbar: the general rule `body[data-theme] .navbar.navbar-light` (spec 0,3,1) sets
   background to --theme-surface (#fff for HC), overriding the earlier HC `.navbar` rule
   (spec 0,2,1). Re-assert black background here at the same spec but later in source. */
body[data-theme="high-contrast"] .navbar.navbar-light,
body[data-theme="high-contrast"] .navbar.bg-white {
  background-color: #000000 !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

/* Username in user dropdown: <strong> inside .dropdown-item-text gets
   `color: var(--theme-text) = #ffffff` from the general line-47 rule (spec 0,2,2).
   Override here at spec 0,3,1 so the name reads black like the other dropdown links. */
body[data-theme="high-contrast"] .dropdown-menu .dropdown-item-text strong {
  color: #000000 !important;
}