/* ==========================================================================
   OriginManga Light Theme Stylesheet
   Pure White & Purple Palette | High Contrast Legibility | No Blur | No Glow
   Scoped to html.light
   ========================================================================== */

/* ── 1. Global Reset, Backgrounds & Scrollbars ────────────────────────────── */
html.light,
html.light body,
html.light #app-main-content {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.light ::-webkit-scrollbar-track {
  background: #f8fafc !important;
}
html.light ::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 9999px !important;
}
html.light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* ── 2. Strip All Blur, Glow Effects & Fix Dark Gradients ─────────────────── */
html.light * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.light [class*="backdrop-blur"],
html.light [class*="blur-xl"],
html.light [class*="blur-lg"],
html.light [class*="blur-md"],
html.light [class*="blur-sm"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* Eliminate colored neon glowing box-shadows & glows */
html.light [class*="shadow-[#7c3aed]"],
html.light [class*="shadow-purple"],
html.light [class*="shadow-rose"],
html.light [class*="shadow-2xl"],
html.light [class*="shadow-xl"] {
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08) !important;
}

html.light .shadow-none {
  box-shadow: none !important;
}

/* Fix Tailwind Dark Gradients to Pure White Linear Gradients */
html.light .bg-gradient-to-r.from-\[\#09080d\],
html.light .bg-gradient-to-r.from-\[\#121118\],
html.light .bg-gradient-to-r.from-black,
html.light .bg-gradient-to-b.from-\[\#09080d\],
html.light .bg-gradient-to-b.from-\[\#121118\],
html.light .bg-gradient-to-t.from-\[\#09080d\] {
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0) 100%) !important;
}

/* ── 3. Desktop Left Sidebar Navigation ──────────────────────────────────── */
html.light #app-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 1px 0 0 0 #e2e8f0 !important;
}

/* Sidebar Toggle Icon Button */
html.light #sidebar-toggle-btn {
  color: #475569 !important;
}
html.light #sidebar-toggle-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Section Titles (BROWSE, etc.) */
html.light .sidebar-section-title {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Inactive Sidebar Nav Items */
html.light .sidebar-nav-item {
  color: #334155 !important;
  font-weight: 600 !important;
}
html.light .sidebar-nav-item i {
  color: #64748b !important;
}
html.light .sidebar-nav-item span {
  color: #334155 !important;
}

/* Hover Sidebar Nav Items */
html.light .sidebar-nav-item:hover {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
}
html.light .sidebar-nav-item:hover i,
html.light .sidebar-nav-item:hover span {
  color: #7c3aed !important;
}

/* Active Sidebar Nav Item */
html.light .sidebar-nav-item.bg-\[\#1e1730\],
html.light .sidebar-nav-item.font-semibold {
  background-color: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #7c3aed !important;
  font-weight: 700 !important;
}
html.light .sidebar-nav-item.bg-\[\#1e1730\] i,
html.light .sidebar-nav-item.font-semibold i,
html.light .sidebar-nav-item.bg-\[\#1e1730\] span,
html.light .sidebar-nav-item.font-semibold span {
  color: #7c3aed !important;
}

/* Discord Callout Card */
html.light .sidebar-discord-card {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .sidebar-discord-card:hover {
  border-color: #c4b5fd !important;
  background-color: #f5f3ff !important;
}
html.light .sidebar-discord-card p.text-white,
html.light .sidebar-discord-card p[data-i18n="discord.join"] {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light .sidebar-discord-card p.text-zinc-400,
html.light .sidebar-discord-card p[data-i18n="discord.desc"] {
  color: #475569 !important;
}
html.light .sidebar-discord-icon-bg {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
}

/* Sidebar Bottom Controls Group */
html.light .sidebar-bottom-section {
  border-top-color: #e2e8f0 !important;
}
html.light .sidebar-controls-group {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
html.light #btn-desktop-settings {
  background-color: transparent !important;
  color: #475569 !important;
}
html.light #btn-desktop-settings:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light #btn-theme-toggle {
  color: #7c3aed !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08) !important;
}
html.light #btn-theme-toggle:hover {
  background-color: #f5f3ff !important;
  color: #6d28d9 !important;
}

/* Language Selector Button & Dropdown */
html.light #lang-wrapper button {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light #lang-wrapper button * {
  color: #0f172a !important;
}
html.light #lang-wrapper button:hover {
  border-color: #94a3b8 !important;
}
html.light #lang-dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
}
html.light .lang-option-btn {
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
html.light .lang-option-btn:hover {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
}
html.light .lang-option-btn.bg-white\/\[0\.08\] {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
  font-weight: 700 !important;
}

/* ── 4. Topbar Header Navigation ─────────────────────────────────────────── */
html.light #app-topbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 0 0 #e2e8f0 !important;
}

/* Search input */
html.light #topbar-search-input {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}
html.light #topbar-search-input::placeholder {
  color: #64748b !important;
}
html.light #topbar-search-input:focus {
  border-color: #7c3aed !important;
  background-color: #ffffff !important;
}
html.light #desktop-search-wrapper i {
  color: #64748b !important;
}
html.light #desktop-search-wrapper kbd {
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Search Preview Dropdown */
html.light #topbar-search-preview,
html.light #main-search-preview {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12) !important;
}
html.light #topbar-search-preview a:hover,
html.light #main-search-preview a:hover {
  background-color: #f8fafc !important;
}

/* Request Manga Button */
html.light button[onclick="openRequestMangaModal()"] {
  background-color: #f5f3ff !important;
  border: 1px solid #c4b5fd !important;
  color: #7c3aed !important;
  font-weight: 700 !important;
}
html.light button[onclick="openRequestMangaModal()"] * {
  color: #7c3aed !important;
}
html.light button[onclick="openRequestMangaModal()"]:hover {
  background-color: #ede9fe !important;
  border-color: #a78bfa !important;
  color: #6d28d9 !important;
}

/* Topbar 18+ NSFW, Notification & Profile Triggers */
html.light #notif-btn,
html.light #profile-drop-trigger,
html.light a[href*="search.php"].lg\:hidden,
html.light button[onclick*="toggleModalNsfwMode"] {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}
html.light #notif-btn *,
html.light #profile-drop-trigger *,
html.light a[href*="search.php"].lg\:hidden *,
html.light button[onclick*="toggleModalNsfwMode"] * {
  color: #0f172a !important;
}
html.light #notif-btn:hover,
html.light #profile-drop-trigger:hover,
html.light a[href*="search.php"].lg\:hidden:hover,
html.light button[onclick*="toggleModalNsfwMode"]:hover {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* Topbar Dropdowns (Notifications & User Profile) */
html.light #notif-dropdown,
html.light #profile-dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12) !important;
}
html.light #notif-dropdown > div:first-child,
html.light #profile-dropdown-menu > div:first-child {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light #notif-dropdown span.text-white,
html.light #profile-dropdown-menu p.text-white {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light #profile-dropdown-menu a {
  color: #334155 !important;
  font-weight: 500 !important;
}
html.light #profile-dropdown-menu a:hover {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
}

/* ── 5. Mobile Bottom Dock Navigation ────────────────────────────────────── */
html.light #mobile-bottom-nav {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05) !important;
}
html.light #mobile-bottom-nav a {
  color: #475569 !important;
}
html.light #mobile-bottom-nav a:hover,
html.light #mobile-bottom-nav a.text-\[\#a78bfa\] {
  color: #7c3aed !important;
}

/* ── 6. Dark Surfaces & Cards Override ───────────────────────────────────── */
html.light [class*="bg-[#09080d]"],
html.light [class*="bg-[#121118]"],
html.light [class*="bg-[#161322]"],
html.light [class*="bg-[#16151f]"],
html.light [class*="bg-[#181723]"],
html.light [class*="bg-[#161522]"],
html.light [class*="bg-[#1e1d2c]"],
html.light [class*="bg-[#151322]"],
html.light [class*="bg-[#181625]"],
html.light [class*="bg-[#050507]"],
html.light [class*="bg-[#0a0a0d]"],
html.light [class*="bg-[#07070a]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Subtle secondary contrast containers */
html.light .bg-white\/\[0\.02\],
html.light .bg-white\/\[0\.03\],
html.light .bg-white\/\[0\.04\],
html.light .bg-white\/\[0\.05\],
html.light .bg-white\/\[0\.06\],
html.light .bg-white\/\[0\.08\],
html.light .bg-white\/10 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Dark borders override to light slate */
html.light [class*="border-white"],
html.light [class*="border-[#2c2445]"],
html.light [class*="border-white/10"],
html.light [class*="border-white/15"],
html.light [class*="border-white/20"],
html.light [class*="border-white/[0.08]"],
html.light [class*="border-white/[0.06]"],
html.light [class*="border-white/[0.07]"] {
  border-color: #e2e8f0 !important;
}
html.light [class*="divide-white"] > :not([hidden]) ~ :not([hidden]) {
  border-color: #f1f5f9 !important;
}

/* ── 7. Text Typography & Hierarchy (High Contrast Rules) ───────────────── */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
  color: #0f172a !important;
}

html.light .text-white,
html.light .text-zinc-100,
html.light .text-zinc-200 {
  color: #0f172a !important;
}

html.light .text-zinc-300 {
  color: #1e293b !important;
}

html.light .text-zinc-400 {
  color: #475569 !important;
}

html.light .text-zinc-500 {
  color: #64748b !important;
}

/* Light purple text in dark mode becomes vibrant primary purple in light mode */
html.light .text-\[\#a78bfa\] {
  color: #7c3aed !important;
}

/* ── 8. Pure Solid Purple Primary Buttons & Actions ───────────────────────── */
html.light .bg-\[\#7c3aed\],
html.light .bg-\[\#6d28d9\],
html.light .bg-purple-600,
html.light .bg-purple-700,
html.light a.bg-\[\#7c3aed\],
html.light button.bg-\[\#7c3aed\] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

/* Ensure ALL text/icons inside solid purple buttons are pure white */
html.light .bg-\[\#7c3aed\] *,
html.light .bg-\[\#6d28d9\] *,
html.light .bg-purple-600 *,
html.light .bg-purple-700 *,
html.light a.bg-\[\#7c3aed\] *,
html.light button.bg-\[\#7c3aed\] * {
  color: #ffffff !important;
}

html.light .hover\:bg-\[\#6d28d9\]:hover {
  background-color: #6d28d9 !important;
}

/* ── 9. Secondary Neutral Buttons (e.g. "Series Details", "Prev/Next", etc) ── */
html.light a.bg-white\/10,
html.light button.bg-white\/10,
html.light .bg-white\/10,
html.light .bg-white\/5,
html.light a.border-white\/15 {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light a.bg-white\/10 *,
html.light button.bg-white\/10 *,
html.light .bg-white\/10 *,
html.light .bg-white\/5 *,
html.light a.border-white\/15 * {
  color: #0f172a !important;
}
html.light a.bg-white\/10:hover,
html.light button.bg-white\/10:hover,
html.light .bg-white\/10:hover,
html.light a.border-white\/15:hover {
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Subtle purple badges/chips (e.g. Featured Spotlight badge) */
html.light .bg-\[\#7c3aed\]\/20,
html.light .bg-\[\#7c3aed\]\/10,
html.light .bg-purple-950\/40,
html.light .bg-purple-950\/50,
html.light .bg-purple-950\/80 {
  background-color: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #c4b5fd !important;
}
html.light .bg-\[\#7c3aed\]\/20 *,
html.light .bg-\[\#7c3aed\]\/10 * {
  color: #7c3aed !important;
}

/* Rating badge styling in Light Mode */
html.light .text-amber-400.bg-white\/\[0\.06\] {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}

/* ── 10. Forms, Inputs & Modals ───────────────────────────────────────────── */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="number"],
html.light input[type="search"],
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #7c3aed !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15) !important;
}

/* Modals */
html.light #desktop-settings-modal,
html.light #request-manga-modal,
html.light #filter-modal,
html.light .modal-container {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.15) !important;
}
html.light #desktop-settings-modal .border-b,
html.light #request-manga-modal .border-b,
html.light #filter-modal .border-b {
  background-color: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

/* Settings Modal Theme Toggle Pills */
html.light #m-btn-theme-light,
html.light #sp-btn-light {
  background-color: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
}
html.light #m-btn-theme-light *,
html.light #sp-btn-light * {
  color: #ffffff !important;
}
html.light #m-btn-theme-dark,
html.light #sp-btn-dark {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
html.light #m-btn-theme-dark *,
html.light #sp-btn-dark * {
  color: #475569 !important;
}

/* ── 11. Reader Preferences & Specific Pages ─────────────────────────────── */
html.light option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Reader Page sticky bar */
html.light .sticky.top-14,
html.light .sticky.top-18 {
  background-color: #ffffff !important;
  border-bottom-color: #e2e8f0 !important;
}

/* Progress bar track */
html.light .bg-white\/\[0\.08\].h-2,
html.light .bg-white\/\[0\.08\].h-1\.5 {
  background-color: #e2e8f0 !important;
}

/* Rank Badges */
html.light .bg-\[\#c4986c\] {
  background-color: #d97706 !important;
  color: #ffffff !important;
}

/* ── 12. Bookmark Reading Status Tags & Dropdown Options ────────────────── */
html.light [class*="bg-purple-950"],
html.light .bg-purple-950\/40 {
  background-color: #f5f3ff !important;
  border-color: #c4b5fd !important;
  color: #7c3aed !important;
}
html.light [class*="bg-purple-950"] *,
html.light .bg-purple-950\/40 * {
  color: #7c3aed !important;
}

html.light [class*="bg-sky-950"],
html.light .bg-sky-950\/40 {
  background-color: #f0f9ff !important;
  border-color: #7dd3fc !important;
  color: #0284c7 !important;
}
html.light [class*="bg-sky-950"] *,
html.light .bg-sky-950\/40 * {
  color: #0284c7 !important;
}

html.light [class*="bg-emerald-950"],
html.light .bg-emerald-950\/40 {
  background-color: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #059669 !important;
}
html.light [class*="bg-emerald-950"] *,
html.light .bg-emerald-950\/40 * {
  color: #059669 !important;
}

html.light [class*="bg-amber-950"],
html.light .bg-amber-950\/40 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
  color: #d97706 !important;
}
html.light [class*="bg-amber-950"] *,
html.light .bg-amber-950\/40 * {
  color: #d97706 !important;
}

html.light [class*="bg-rose-950"],
html.light .bg-rose-950\/40 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #e11d48 !important;
}
html.light [class*="bg-rose-950"] *,
html.light .bg-rose-950\/40 * {
  color: #e11d48 !important;
}

/* ── 13. Toast Notifications (Light & Dark Mode rules) ───────────────────── */
#library-action-toast,
#reader-hud-toast {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Dark Mode Toasts (Default) */
html:not(.light) #library-action-toast,
html:not(.light) #reader-hud-toast {
  background-color: #161322 !important;
  border: 1px solid #7c3aed !important;
  color: #ffffff !important;
}
html:not(.light) #library-action-toast *,
html:not(.light) #reader-hud-toast * {
  color: #ffffff !important;
}
html:not(.light) #library-action-toast i,
html:not(.light) #reader-hud-toast i {
  color: #c4b5fd !important;
}

/* Light Mode Toasts */
html.light #library-action-toast,
html.light #reader-hud-toast {
  background-color: #ffffff !important;
  border: 1.5px solid #7c3aed !important;
  color: #0f172a !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2) !important;
}
html.light #library-action-toast *,
html.light #reader-hud-toast * {
  color: #0f172a !important;
  font-weight: 700 !important;
}
html.light #library-action-toast i,
html.light #reader-hud-toast i {
  color: #7c3aed !important;
}