/* Mint Predict — theme tokens; light mode is Pokémon / Pokédex inspired. */
:root {
  --mp-pk-blue: #2a6ebd;
  --mp-pk-blue-dark: #1a4a8a;
  --mp-pk-yellow: #ffcb05;
  --mp-pk-red: #c03028;
  --mp-surface: #f6f9ff;
  --mp-cream: #fff9e6;
  --mp-blush: #ffe8ec;
}

/* --- Dark: accent polish only (defaults stay from page styles) --- */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}

/* --- Light: app shell (scoped to .mp-app) --- */
html[data-theme="light"] .mp-app {
  --mp-text: #0f2a4a;
  --mp-text-muted: #3d5a7a;
  --mp-border: rgba(42, 110, 189, 0.22);
}

html[data-theme="light"] .mp-app {
  color: var(--mp-text) !important;
  background: linear-gradient(160deg, #d9e8ff 0%, var(--mp-cream) 45%, var(--mp-blush) 100%)
    fixed !important;
  min-height: 100vh;
}

html[data-theme="light"] .mp-app ::selection {
  background: rgba(255, 203, 5, 0.4);
  color: var(--mp-pk-blue-dark);
}

/* Scrollbars */
html[data-theme="light"] .mp-app ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--mp-pk-blue) 0%, #4a8fd4 100%) !important;
  border-radius: 4px;
}

html[data-theme="light"] .mp-app ::-webkit-scrollbar-track {
  background: rgba(42, 110, 189, 0.08) !important;
}

/* Base Tailwind text */
html[data-theme="light"] .mp-app .text-slate-300,
html[data-theme="light"] .mp-app .text-slate-200 {
  color: var(--mp-pk-blue-dark) !important;
}
html[data-theme="light"] .mp-app .text-slate-400 {
  color: #3d5473 !important;  /* was #4a6588 — slightly darker for better contrast */
}
html[data-theme="light"] .mp-app .text-slate-500 {
  color: #3a506b !important;  /* was #5a7394 — lifted for ~5:1 contrast on white */
}
html[data-theme="light"] .mp-app .text-slate-600 {
  color: #4a5f77 !important;  /* was unmapped → Tailwind default #475569 */
}
html[data-theme="light"] .mp-app .text-white {
  color: var(--mp-pk-blue-dark) !important;
}
html[data-theme="light"] .mp-app a.text-amber-400,
html[data-theme="light"] .mp-app .text-amber-400,
html[data-theme="light"] .mp-app a.text-amber-400 {
  color: #b45309 !important;
}
html[data-theme="light"] .mp-app .hover\:text-amber-400:hover {
  color: var(--mp-pk-red) !important;
}

/* Backgrounds + borders (common patterns) */
html[data-theme="light"] .mp-app .bg-slate-800,
html[data-theme="light"] .mp-app .bg-slate-800\/50,
html[data-theme="light"] .mp-app .bg-slate-700\/50 {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--mp-border) !important;
}
/* Identity-strip pill chips (bg-slate-800/80) — need tinted fill to be visible */
html[data-theme="light"] .mp-app .bg-slate-800\/80 {
  background-color: #dce8f6 !important;
  border-color: rgba(42, 110, 189, 0.35) !important;
}
/* "View sold" CTA button (bg-slate-700/80) */
html[data-theme="light"] .mp-app .bg-slate-700\/80 {
  background-color: #dce8f6 !important;
  color: #1a4a8a !important;
  border-color: rgba(42, 110, 189, 0.3) !important;
}
html[data-theme="light"] .mp-app .hover\:bg-slate-600\/80:hover {
  background-color: #c8daef !important;
}
html[data-theme="light"] .mp-app .border-slate-700,
html[data-theme="light"] .mp-app .border-slate-600 {
  border-color: rgba(42, 110, 189, 0.3) !important;
}
html[data-theme="light"] .mp-app .border-white\/5,
html[data-theme="light"] .mp-app .border-white\/10 {
  border-color: rgba(42, 110, 189, 0.18) !important;
}
html[data-theme="light"] .mp-app .bg-\[\#0B0F19\],
html[data-theme="light"] .mp-app .bg-\[\#0B0F19\]\/50,
html[data-theme="light"] .mp-app .bg-\[\#0B0F19\]\/60,
html[data-theme="light"] .mp-app .bg-\[\#0B0F19\]\/80,
html[data-theme="light"] .mp-app .bg-\[\#0B0F19\]\/90 {
  background-color: rgba(255, 255, 255, 0.58) !important;
}
html[data-theme="light"] .mp-app [class~="from-slate-700"] {
  --tw-gradient-from: #94b8e0 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="light"] .mp-app [class~="to-slate-600"] {
  --tw-gradient-to: #6b9ad4 !important;
}

/* Glass / cards (inline <style> .glass-card in many templates) */
html[data-theme="light"] .mp-app .glass-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(230, 242, 255, 0.96) 100%)
    !important;
  border: 1px solid rgba(42, 110, 189, 0.2) !important;
  box-shadow: 0 10px 35px -12px rgba(42, 90, 160, 0.2) !important;
}
html[data-theme="light"] .mp-app .glass-card:hover {
  border-color: rgba(255, 203, 5, 0.5) !important;
}
html[data-theme="light"] .mp-app .glass-panel {
  background: linear-gradient(145deg, #ffffff 0%, #e8f2ff 100%) !important;
  border: 1px solid rgba(42, 110, 189, 0.2) !important;
  box-shadow: 0 4px 14px rgba(42, 90, 160, 0.12) !important;
}

/* Header / nav borders */
html[data-theme="light"] .mp-app .border-b.border-white\/5 {
  border-bottom-color: rgba(42, 110, 189, 0.2) !important;
}

/* Inputs (Tailwind) */
html[data-theme="light"] .mp-app .text-white.px-4,
html[data-theme="light"] .mp-app input.text-white,
html[data-theme="light"] .mp-app input.text-slate-300,
html[data-theme="light"] .mp-app .text-white.px-4,
html[data-theme="light"] .mp-app .placeholder-slate-500 {
  color: var(--mp-pk-blue-dark) !important;
}
html[data-theme="light"] .mp-app input::placeholder,
html[data-theme="light"] .mp-app .placeholder-slate-500,
html[data-theme="light"] .mp-app .placeholder-slate-600 {
  color: #5a7aa0 !important;
  opacity: 0.9 !important;
}
html[data-theme="light"] .mp-app .flip-hub-search,
html[data-theme="light"] .mp-app input[type="text"],
html[data-theme="light"] .mp-app input[type="search"],
html[data-theme="light"] .mp-app input[type="password"] {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(42, 110, 189, 0.3) !important;
  color: var(--mp-pk-blue-dark) !important;
}

/* Sets: mesh + tiles */
html[data-theme="light"] .mp-app .mesh-bg {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(232, 244, 255, 0.99) 100%),
    radial-gradient(ellipse 80% 55% at 20% 0%, rgba(66, 133, 214, 0.2), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(255, 203, 5, 0.2), transparent 50%) !important;
}
html[data-theme="light"] .mp-app .tile-glow {
  background: conic-gradient(
    from 210deg,
    transparent,
    rgba(255, 203, 5, 0.2),
    transparent 55%
  ) !important;
}
html[data-theme="light"] .mp-app .set-tile {
  background: linear-gradient(145deg, #ffffff, #e8f2ff) !important;
  border-color: rgba(42, 110, 189, 0.2) !important;
}

/* Tooltips (fixed) */
html[data-theme="light"] .mp-app .tooltip-box {
  background: rgba(15, 40, 80, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f0f5ff !important;
}
html[data-theme="light"] .mp-app .tooltip-arrow {
  border-top-color: rgba(15, 40, 80, 0.96) !important;
}

/* Fixed theme button */
.mp-theme-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.25rem;
  z-index: 10000;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffcb05;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.55;
}
.mp-theme-fab:hover {
  border-color: rgba(255, 203, 5, 0.35);
  transform: scale(1.08);
  opacity: 1;
}
html[data-theme="light"] .mp-theme-fab {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(42, 110, 189, 0.20);
  color: #1a4a8a;
  box-shadow: 0 2px 10px rgba(42, 100, 180, 0.10);
}
.mp-theme-fab__icon {
  pointer-events: none;
  font-style: normal;
  position: relative;
  top: 0.5px;
}

/* --- get_base_html / legacy table pages (Python-generated) --- */
html[data-theme="light"] .mp-app a {
  color: var(--mp-pk-blue-dark);
}
html[data-theme="light"] .mp-app .top-nav {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(42, 110, 189, 0.2) !important;
}
html[data-theme="light"] .mp-app .nav-logo,
html[data-theme="light"] .mp-app h1 {
  color: #b45309 !important;
  text-shadow: none !important;
}
html[data-theme="light"] .mp-app .nav-links a {
  color: var(--mp-pk-blue) !important;
}
html[data-theme="light"] .mp-app .nav-search {
  background: #fff !important;
  border: 1px solid rgba(42, 110, 189, 0.35) !important;
  color: #0f2a4a !important;
}
html[data-theme="light"] .mp-app .nav-search::placeholder {
  color: #5a7aa0;
}
html[data-theme="light"] .mp-app .moon-icon,
html[data-theme="light"] .mp-app .mp-nav-theme {
  background: linear-gradient(150deg, #fffbef, #e8f1ff) !important;
  border: 1px solid rgba(42, 110, 189, 0.35) !important;
  color: #1a4a8a !important;
}
html[data-theme="light"] .mp-app table,
html[data-theme="light"] .mp-app [style*="background: #161d2f"] {
  background: #fff !important;
  border: 1px solid rgba(42, 110, 189, 0.2) !important;
}
html[data-theme="light"] .mp-app th {
  background: #e0ebfa !important;
  color: var(--mp-pk-blue) !important;
  border-color: rgba(42, 110, 189, 0.15) !important;
}
html[data-theme="light"] .mp-app td {
  border-color: rgba(42, 110, 189, 0.12) !important;
  color: #0f2a4a !important;
}
html[data-theme="light"] .mp-app .card-link,
html[data-theme="light"] .mp-app a[style*="#fbbf24"] {
  color: #b45309 !important;
}
html[data-theme="light"] .mp-app .col-ai {
  color: #6b21a8 !important;
}
html[data-theme="light"] .mp-app .col-rarity {
  color: #4a6588 !important;
}
html[data-theme="light"] .mp-app [style*="#161d2f"] {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(42, 110, 189, 0.2) !important;
}
html[data-theme="light"] .mp-app .toggle-panel {
  background: #e8f1ff !important;
  border: 1px solid rgba(42, 110, 189, 0.2) !important;
}

/* (proof.html legacy theme overrides removed — track-record now uses Tailwind utility classes from track_record.html) */
html[data-theme="light"] .mp-app [style*="#fbbf24"],
html[data-theme="light"] body.mp-app [style*="color: #fbbf24"] {
  color: #b45309 !important;
}

html[data-theme="light"] .mp-app .rarity-tag {
  background: #e8f0ff !important;
  color: #b45309 !important;
  border: 1px solid rgba(42, 110, 189, 0.25) !important;
}

/* layout.html */
html[data-theme="light"] .mp-app nav,
html[data-theme="light"] body .mp-app nav,
html[data-theme="light"] .mp-app body nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(42, 110, 189, 0.25) !important;
}

/* hub.html: single top-level h1 */
html[data-theme="light"] body.mp-app > h1 {
  color: #1a4a8a !important;
  text-shadow: none !important;
}

/* hub.html (legacy) */
html[data-theme="light"] .mp-app .btn {
  background: #fff !important;
  color: var(--mp-pk-blue-dark) !important;
  border: 2px solid var(--mp-pk-blue) !important;
}
html[data-theme="light"] .mp-app .btn:hover {
  background: #ffcb05 !important;
  color: #0f2a4a !important;
  border-color: #ffcb05 !important;
}

/* Card detail: Chart.js and emerald/red utility classes */
html[data-theme="light"] .mp-app .text-emerald-400 {
  color: #0d6e4a !important;
}
html[data-theme="light"] .mp-app .text-red-400 {
  color: #b91c1c !important;
}
html[data-theme="light"] .mp-app .bg-slate-900,
html[data-theme="light"] .mp-app .bg-slate-900\/80 {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

/* Pagination links in get_base_html */
html[data-theme="light"] .mp-app a[style*="#fbbf24"],
html[data-theme="light"] .mp-app a[style*="#334155"] {
  box-shadow: none;
}
html[data-theme="light"] .mp-app a[style*="background: #334155"] {
  background: #e0ebfa !important;
  color: #0f2a4a !important;
}
html[data-theme="light"] .mp-app a[style*="#fbbf24"][style*="border-radius"] {
  background: #ffcb05 !important;
  color: #0f2a4a !important;
}

/* Modern analytics list pagination wrapper (.mp-pagination) — light-theme
   readability. The dark-mode rules live inline in analytics_list.html and use
   !important to override get_pagination_html() inline styles. */
html[data-theme="light"] .mp-app .mp-pagination a {
  background: rgba(42, 110, 189, 0.08) !important;
  border-color: rgba(42, 110, 189, 0.25) !important;
  color: #1a4a8a !important;
}
html[data-theme="light"] .mp-app .mp-pagination a:hover {
  background: #ffcb05 !important;
  border-color: #ffcb05 !important;
  color: #0f2a4a !important;
}
html[data-theme="light"] .mp-app .mp-pagination span {
  color: #3d5a7a !important;
}

/* ===========================================================
 * Card detail — light-theme readability (Horizon / Model Trust)
 * Tints tiles, promotes missing accents, fixes ghost pills,
 * and bumps 10-11px micro-text to 12px. Dark mode untouched.
 * =========================================================== */

/* Inner tiles inside any glass-card: tinted pale Pokédex blue so they
   separate from the near-white card parent. Wins over the generic
   .bg-[#0B0F19] -> 58% white rule above via higher specificity.
   ALL opacity variants that appear in card_detail.html are listed. */
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\],
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\]\/50,
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\]\/60,
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\]\/70,
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\]\/80,
html[data-theme="light"] .mp-app .glass-card .bg-\[\#0B0F19\]\/90 {
  background-color: rgba(218, 232, 250, 0.85) !important;
  border-color: rgba(42, 110, 189, 0.3) !important;
}

/* border-white/* helpers are invisible on a light background.
   Remap all opacity variants used as tile borders / divider lines. */
html[data-theme="light"] .mp-app .border-white\/5,
html[data-theme="light"] .mp-app .border-white\/10,
html[data-theme="light"] .mp-app .border-white\/15 {
  border-color: rgba(42, 110, 189, 0.2) !important;
}

/* Accent text colors that had no light-mode mapping. Dark on white,
   keeps the hue family so the visual language stays consistent. */
html[data-theme="light"] .mp-app .text-sky-400 {
  color: #0369a1 !important;
}
html[data-theme="light"] .mp-app .text-fuchsia-400 {
  color: #a21caf !important;
}
html[data-theme="light"] .mp-app .text-cyan-300,
html[data-theme="light"] .mp-app .text-cyan-400 {
  color: #0e7490 !important;
}
html[data-theme="light"] .mp-app .text-blue-400 {
  color: #1d4ed8 !important;
}

/* eBay price-note banner + any amber accent text */
html[data-theme="light"] .mp-app .text-amber-200,
html[data-theme="light"] .mp-app .text-amber-200\/90,
html[data-theme="light"] .mp-app .text-amber-200\/95 {
  color: #7c2d12 !important;   /* deep amber-brown, AA on cream */
}
/* bg-amber-500/8 is the price-note banner background — barely visible on white */
html[data-theme="light"] .mp-app .bg-amber-500\/8 {
  background-color: rgba(253, 230, 138, 0.45) !important;
}
html[data-theme="light"] .mp-app .bg-amber-500\/10 {
  background-color: rgba(254, 243, 199, 0.9) !important;
}
html[data-theme="light"] .mp-app .border-amber-400\/20 {
  border-color: rgba(180, 83, 9, 0.55) !important;
}
html[data-theme="light"] .mp-app .border-amber-400\/25,
html[data-theme="light"] .mp-app .border-amber-500\/30 {
  border-color: rgba(180, 83, 9, 0.5) !important;
}

/* Confidence pills (High / Medium / Low): give the translucent capsules
   real fills and borders so they read as pills, not hairlines. */
html[data-theme="light"] .mp-app .text-emerald-300 {
  color: #065f46 !important;
}
html[data-theme="light"] .mp-app .text-amber-300 {
  color: #92400e !important;
}
html[data-theme="light"] .mp-app .bg-emerald-500\/10 {
  background-color: rgba(209, 250, 229, 0.95) !important;
}
html[data-theme="light"] .mp-app .border-emerald-500\/25,
html[data-theme="light"] .mp-app .border-emerald-500\/30 {
  border-color: rgba(6, 95, 70, 0.5) !important;
}
html[data-theme="light"] .mp-app .bg-slate-500\/10 {
  background-color: rgba(226, 232, 240, 0.95) !important;
}
html[data-theme="light"] .mp-app .border-slate-500\/25,
html[data-theme="light"] .mp-app .border-slate-500\/30 {
  border-color: rgba(71, 85, 105, 0.5) !important;
}
html[data-theme="light"] .mp-app .border-amber-500\/25 {
  border-color: rgba(180, 83, 9, 0.5) !important;
}

/* Rarity & identity pills — fuchsia / sky / amber variants wash out
   at 15% opacity on near-white. Give them solid pastels + dark text. */
html[data-theme="light"] .mp-app .bg-fuchsia-500\/15 {
  background-color: rgba(237, 210, 255, 0.9) !important;
}
html[data-theme="light"] .mp-app .border-fuchsia-400\/30 {
  border-color: rgba(126, 34, 206, 0.45) !important;
}
html[data-theme="light"] .mp-app .text-fuchsia-300 {
  color: #6b21a8 !important;
}
html[data-theme="light"] .mp-app .bg-sky-500\/15 {
  background-color: rgba(186, 230, 253, 0.9) !important;
}
html[data-theme="light"] .mp-app .border-sky-400\/30 {
  border-color: rgba(2, 132, 199, 0.45) !important;
}
html[data-theme="light"] .mp-app .text-sky-300 {
  color: #0369a1 !important;
}
html[data-theme="light"] .mp-app .bg-amber-500\/15 {
  background-color: rgba(254, 243, 199, 0.95) !important;
}
html[data-theme="light"] .mp-app .border-amber-400\/30 {
  border-color: rgba(180, 83, 9, 0.5) !important;
}

/* Tiny arbitrary-value font sizes are below a comfortable reading
   threshold and almost always used with muted slate. Lift to 12px
   in light mode only. */
html[data-theme="light"] .mp-app .text-\[10px\],
html[data-theme="light"] .mp-app .text-\[11px\] {
  font-size: 12px !important;
}