@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&display=swap'); /* ========================================================================== IVEACER Digital Library - Global Theme, Typography & UX Suite v3.5 Font: Kanit (Thai/Latin Primary) + Inter (Latin Accent) Theme: 100% Contrast Dark Mode & Light Mode CSS Engine with Logo Contrast ========================================================================== */ :root { /* Typography Tokens: Kanit + Inter + Full System Emoji & Symbol Fallback */ --font-heading: 'Kanit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-body: 'Kanit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "Segoe UI Symbol"; /* Brand Accents */ --color-primary: #0284C7; /* Sky 600 */ --color-primary-hover: #0369A1; /* Sky 700 */ --color-accent: #0D9488; /* Teal 600 */ --color-emerald: #059669; /* Emerald 600 */ --color-purple: #7C3AED; /* Purple 600 */ --color-amber: #D97706; /* Amber 600 */ --color-rose: #E11D48; /* Rose 600 */ /* Light Theme Defaults (Default root) */ --bg-app: #F8FAFC; --bg-surface: #FFFFFF; --bg-surface-elevated: #FFFFFF; --bg-panel: rgba(255, 255, 255, 0.94); --bg-card: #FFFFFF; --bg-nav: rgba(255, 255, 255, 0.95); --bg-subtle: #F1F5F9; --bg-input: #FFFFFF; --bg-modal-backdrop: rgba(15, 23, 42, 0.5); --border-subtle: #E2E8F0; --border-glass: rgba(226, 232, 240, 0.95); --border-input: #CBD5E1; --border-table: #E2E8F0; --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #64748B; --text-inverse: #FFFFFF; --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 30px -4px rgba(0, 0, 0, 0.08); --glass-blur: 16px; } /* Dark Theme Variables (Activated via class="dark" on or data-theme="dark") */ html.dark, :root[data-theme="dark"] { --color-primary: #38BDF8; /* Sky 400 */ --color-primary-hover: #7DD3FC; /* Sky 300 */ --color-accent: #14B8A6; /* Teal 400 */ --color-emerald: #34D399; /* Emerald 400 */ --color-purple: #A78BFA; /* Purple 400 */ --color-amber: #FBBF24; /* Amber 400 */ --color-rose: #FB7185; /* Rose 400 */ --bg-app: #090D16; --bg-surface: #0F172A; --bg-surface-elevated: #1E293B; --bg-panel: rgba(15, 23, 42, 0.85); --bg-card: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%); --bg-nav: rgba(15, 23, 42, 0.95); --bg-subtle: #1E293B; --bg-input: #0F172A; --bg-modal-backdrop: rgba(0, 0, 0, 0.75); --border-subtle: #1E293B; --border-glass: rgba(255, 255, 255, 0.08); --border-input: #334155; --border-table: #1E293B; --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-inverse: #0F172A; --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37); --shadow-elevated: 0 20px 40px -10px rgba(0, 0, 0, 0.5); } /* ========================================================================== Base Elements & Global Font Application (Clean CSS Reset) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); background-color: var(--bg-app); color: var(--text-primary); overflow-x: hidden; line-height: 1.6; transition: background-color 0.25s ease, color 0.25s ease; } input, button, select, textarea, optgroup { font-family: inherit; } kbd, code, pre, samp { font-family: var(--font-mono); } h1, h2, h3, h4, h5, h6, .font-heading { font-family: var(--font-heading); letter-spacing: -0.015em; } /* ========================================================================== CRITICAL: FontAwesome 6 Icon Font Protection Prevent any global typography rules from overriding icon font glyphs ========================================================================== */ .fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-brands, .fa::before, .fas::before, .far::before, .fal::before, .fad::before, .fab::before, .fa-solid::before, .fa-regular::before, .fa-brands::before, [class^="fa-"]::before, [class*=" fa-"]::before { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .fa-brands, .fa-brands::before, .fab, .fab::before { font-family: "Font Awesome 6 Brands" !important; } /* ========================================================================== Glassmorphism & Surfaces ========================================================================== */ .glass-panel { background: var(--bg-panel); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--border-glass); box-shadow: var(--shadow-card); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .glass-nav { background: var(--bg-nav); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-glass); transition: background 0.25s ease, border-color 0.25s ease; } .glass-card { background: var(--bg-card); border: 1px solid var(--border-glass); box-shadow: var(--shadow-card); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .glass-card:hover { transform: translateY(-4px); border-color: rgba(14, 165, 233, 0.45); box-shadow: 0 12px 30px -8px rgba(14, 165, 233, 0.25); } /* ========================================================================== Form Controls (Inputs, Selects, Dropdowns - 100% Contrast) ========================================================================== */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border-input) !important; border-radius: 0.75rem; transition: all 0.2s ease; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25) !important; } /* Fix for Select Option Dropdowns in Dark/Light Mode */ select option { background-color: #0F172A; color: #F8FAFC; } html:not(.dark) select option { background-color: #FFFFFF; color: #0F172A; } /* ========================================================================== Tables & Data Grid (High Contrast & Responsive) ========================================================================== */ table { width: 100%; border-collapse: separate; border-spacing: 0; } thead th { background-color: var(--bg-subtle) !important; color: var(--text-muted) !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-table) !important; } tbody td { border-bottom: 1px solid var(--border-table) !important; color: var(--text-secondary); } tbody tr:hover { background-color: rgba(14, 165, 233, 0.05) !important; } /* ========================================================================== Light Mode Clean Fallbacks (Non-destructive Tailwind Support) ========================================================================== */ html:not(.dark) .bg-slate-950 { background-color: #F8FAFC !important; } html:not(.dark) .bg-slate-900 { background-color: #FFFFFF !important; } html:not(.dark) .bg-slate-800 { background-color: #F1F5F9 !important; } html:not(.dark) .text-slate-100, html:not(.dark) .text-white { color: #0F172A !important; } html:not(.dark) .text-slate-300, html:not(.dark) .text-slate-400 { color: #475569 !important; } html:not(.dark) .text-slate-500 { color: #64748B !important; } html:not(.dark) .border-slate-800, html:not(.dark) .border-slate-700 { border-color: #E2E8F0 !important; } /* Maintain crisp accent badges & colored buttons */ html:not(.dark) .text-sky-400, html:not(.dark) .text-sky-300 { color: #0284C7 !important; } html:not(.dark) .text-emerald-400, html:not(.dark) .text-emerald-300 { color: #059669 !important; } html:not(.dark) .text-teal-400, html:not(.dark) .text-teal-300 { color: #0D9488 !important; } html:not(.dark) .text-purple-400, html:not(.dark) .text-purple-300 { color: #7C3AED !important; } html:not(.dark) .text-amber-400, html:not(.dark) .text-amber-300 { color: #D97706 !important; } html:not(.dark) .text-rose-400, html:not(.dark) .text-rose-300 { color: #E11D48 !important; } /* Buttons with white text retain crisp white in Light Mode */ html:not(.dark) .bg-sky-500, html:not(.dark) .bg-sky-600, html:not(.dark) .bg-teal-500, html:not(.dark) .bg-emerald-500, html:not(.dark) .bg-purple-500, html:not(.dark) .bg-rose-500, html:not(.dark) .bg-gradient-to-r, html:not(.dark) .bg-gradient-to-tr { color: #FFFFFF !important; } html:not(.dark) .bg-sky-500 *, html:not(.dark) .bg-gradient-to-r *, html:not(.dark) .bg-gradient-to-tr * { color: #FFFFFF !important; } /* ========================================================================== Live Statistics Pulse & Animations ========================================================================== */ .stat-live-pulse { display: inline-flex; align-items: center; gap: 0.375rem; } .stat-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: #10B981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); animation: live-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } /* Number Transition Glow */ .stat-changed { animation: number-highlight 1.2s ease-out; } @keyframes number-highlight { 0% { color: #38BDF8; transform: scale(1.1); } 100% { transform: scale(1); } } /* ========================================================================== Auto-Suggest Live Search Dropdown ========================================================================== */ .autosuggest-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.5rem; background: var(--bg-nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass); border-radius: 1.25rem; box-shadow: var(--shadow-elevated); z-index: 60; max-height: 24rem; overflow-y: auto; animation: fadeIn 0.15s ease-out forwards; } .autosuggest-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: all 0.15s ease; } .autosuggest-item:last-child { border-bottom: none; } .autosuggest-item:hover, .autosuggest-item.active { background-color: rgba(14, 165, 233, 0.1); } /* ========================================================================== Toast Notification System ========================================================================== */ #toastContainer { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; display: flex; flex-direction: column; gap: 0.625rem; max-width: 24rem; width: calc(100% - 3rem); pointer-events: none; } .toast-item { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-radius: 1rem; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); font-size: 0.8125rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(1rem); opacity: 0; } .toast-item.toast-show { transform: translateY(0); opacity: 1; } .toast-success { background: rgba(16, 185, 129, 0.95); color: #FFFFFF; border: 1px solid rgba(16, 185, 129, 0.4); } .toast-error { background: rgba(244, 63, 94, 0.95); color: #FFFFFF; border: 1px solid rgba(244, 63, 94, 0.4); } .toast-warning { background: rgba(245, 158, 11, 0.95); color: #FFFFFF; border: 1px solid rgba(245, 158, 11, 0.4); } .toast-info { background: rgba(14, 165, 233, 0.95); color: #FFFFFF; border: 1px solid rgba(14, 165, 233, 0.4); } /* ========================================================================== Quick Preview & General Modals ========================================================================== */ .modal-active { display: flex !important; animation: fadeIn 0.2s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } /* Theme Toggle Button Style */ .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; user-select: none; } .theme-toggle-btn:hover { transform: rotate(15deg) scale(1.08); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== Brand Logo Dynamic Contrast & Adaptive Treatments (v3.5) ========================================================================== */ .brand-logo-container { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } html.dark .brand-logo-container { background: rgba(15, 23, 42, 0.85); border-color: rgba(56, 189, 248, 0.25); box-shadow: 0 0 16px rgba(56, 189, 248, 0.18); } .brand-logo-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); transition: filter 0.3s ease, transform 0.3s ease; } html.dark .brand-logo-img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) brightness(1.06) contrast(1.04); } html:not(.dark) .brand-logo-container { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; } html:not(.dark) .brand-logo-img { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08)); } /* ========================================================================== Accessible Pill Switch Component (WCAG AA Compliant) ========================================================================== */ .theme-switch-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; font-size: 0.8125rem; font-weight: 500; } .theme-switch-track { position: relative; width: 3.25rem; height: 1.75rem; border-radius: 9999px; background-color: #E2E8F0; border: 1px solid #CBD5E1; transition: background-color 0.25s ease, border-color 0.25s ease; } html.dark .theme-switch-track { background-color: #1E293B; border-color: #334155; } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 1.375rem; height: 1.375rem; border-radius: 9999px; background-color: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; color: #D97706; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, color 0.25s ease; } html.dark .theme-switch-thumb { transform: translateX(1.5rem); background-color: #0F172A; color: #38BDF8; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-app); } ::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary); } /* Book Cover Zoom */ .book-cover-container { overflow: hidden; position: relative; } .book-cover-img { transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); } .glass-card:hover .book-cover-img { transform: scale(1.06); } /* Badges */ .badge-status { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.375rem; } .badge-available { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); } html.dark .badge-available { color: #34D399; } .badge-ebook { background: rgba(14, 165, 233, 0.15); color: #0284C7; border: 1px solid rgba(14, 165, 233, 0.3); } html.dark .badge-ebook { color: #38BDF8; } .badge-borrowed { background: rgba(245, 158, 11, 0.15); color: #D97706; border: 1px solid rgba(245, 158, 11, 0.3); } html.dark .badge-borrowed { color: #FBBF24; } /* ========================================================================== COMPREHENSIVE LIGHT MODE OVERRIDES v4.0 Covers ALL components: Navbar, Footer, Cards, Modals, Forms, Tables, Admin Pages, Upload Zones, Progress Bars, Dropdowns, Badges ========================================================================== */ /* ---- Root: Body ---- */ html:not(.dark) body { background-color: #F8FAFC !important; color: #0F172A !important; } /* ---- Navbar Header ---- */ html:not(.dark) .glass-nav { background: rgba(255, 255, 255, 0.97) !important; border-bottom-color: #E2E8F0 !important; box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.08) !important; } html:not(.dark) header .text-slate-300, html:not(.dark) header .text-slate-400 { color: #475569 !important; } html:not(.dark) header .text-white { color: #0F172A !important; } html:not(.dark) header .bg-slate-900\/90, html:not(.dark) header .bg-slate-800\/60 { background-color: #F1F5F9 !important; } html:not(.dark) header .border-slate-700\/80, html:not(.dark) header .border-slate-700 { border-color: #CBD5E1 !important; } /* Mobile drawer */ html:not(.dark) #mobileMenuDrawer { background: rgba(255, 255, 255, 0.99) !important; border-top-color: #E2E8F0 !important; } /* Admin dropdown panel */ html:not(.dark) header .glass-card, html:not(.dark) header .bg-slate-900\/95 { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.1) !important; } /* ---- Glass Surfaces ---- */ html:not(.dark) .glass-panel { background: rgba(255, 255, 255, 0.96) !important; border-color: #E2E8F0 !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06) !important; } html:not(.dark) .glass-card { background: #FFFFFF !important; border-color: #E2E8F0 !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important; } html:not(.dark) .glass-card:hover { border-color: rgba(14, 165, 233, 0.35) !important; box-shadow: 0 8px 24px -6px rgba(14, 165, 233, 0.15) !important; } /* ---- Footer ---- */ html:not(.dark) footer, html:not(.dark) footer.bg-slate-950 { background-color: #F1F5F9 !important; border-top-color: #E2E8F0 !important; } html:not(.dark) footer .text-slate-400 { color: #64748B !important; } html:not(.dark) footer .text-white { color: #0F172A !important; } html:not(.dark) footer .bg-slate-950, html:not(.dark) footer .bg-slate-900, html:not(.dark) footer .bg-slate-800 { background-color: #F8FAFC !important; } html:not(.dark) footer .border-slate-800, html:not(.dark) footer .border-slate-900 { border-color: #E2E8F0 !important; } /* ---- Page Banner ---- */ html:not(.dark) .bg-gradient-to-b { background: linear-gradient(to bottom, #F1F5F9, #F8FAFC) !important; border-bottom-color: #E2E8F0 !important; } /* ---- Background Slots ---- */ html:not(.dark) .bg-slate-950 { background-color: #F8FAFC !important; } html:not(.dark) .bg-slate-900 { background-color: #FFFFFF !important; } html:not(.dark) .bg-slate-800 { background-color: #F1F5F9 !important; } html:not(.dark) .bg-slate-900\/60, html:not(.dark) .bg-slate-900\/50 { background-color: #FFFFFF !important; } /* ---- Text Fallbacks ---- */ html:not(.dark) .text-slate-200, html:not(.dark) .text-slate-100, html:not(.dark) .text-white { color: #0F172A !important; } /* EXCEPTION: colored/gradient buttons keep white text */ html:not(.dark) .bg-gradient-to-r *, html:not(.dark) .bg-gradient-to-tr *, html:not(.dark) .bg-sky-500 .text-white, html:not(.dark) .bg-teal-500 .text-white, html:not(.dark) .bg-emerald-500 .text-white, html:not(.dark) .bg-rose-500 .text-white { color: #FFFFFF !important; } /* ---- Borders ---- */ html:not(.dark) .border-slate-700, html:not(.dark) .border-slate-800 { border-color: #E2E8F0 !important; } html:not(.dark) .border-slate-600 { border-color: #CBD5E1 !important; } /* ---- Form Controls ---- */ html:not(.dark) .bg-slate-900.text-white, html:not(.dark) .bg-slate-800.text-white, html:not(.dark) input.bg-slate-900, html:not(.dark) input.bg-slate-800, html:not(.dark) select.bg-slate-900, html:not(.dark) select.bg-slate-800, html:not(.dark) textarea.bg-slate-900 { background-color: #FFFFFF !important; color: #0F172A !important; border-color: #CBD5E1 !important; } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #94A3B8 !important; } /* ---- Upload Dropzones ---- */ html:not(.dark) #dropZone, html:not(.dark) #coverDropZone { background-color: #F8FAFC !important; border-color: #CBD5E1 !important; } html:not(.dark) #dropZone .text-slate-300, html:not(.dark) #coverDropZone .text-slate-300 { color: #374151 !important; } html:not(.dark) #dropZone .text-slate-500, html:not(.dark) #coverDropZone .text-slate-500 { color: #6B7280 !important; } /* ---- Progress Bar ---- */ html:not(.dark) #progressWrapper .h-2 { background-color: #E2E8F0 !important; } /* ---- Tables ---- */ html:not(.dark) thead th { background-color: #F8FAFC !important; color: #64748B !important; border-bottom-color: #E2E8F0 !important; } html:not(.dark) tbody td { border-bottom-color: #F1F5F9 !important; color: #374151 !important; } html:not(.dark) tbody tr:hover { background-color: #EFF6FF !important; } html:not(.dark) .book-row { border-top-color: #F1F5F9 !important; } /* ---- Edit / Delete Modals ---- */ html:not(.dark) #editModal > div, html:not(.dark) #deleteModal > div { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; } html:not(.dark) #editModal .border-slate-800 { border-color: #F1F5F9 !important; } html:not(.dark) #editModal .bg-slate-800, html:not(.dark) #editModal button.bg-slate-800 { background-color: #F1F5F9 !important; color: #374151 !important; } /* ---- Autosuggest Dropdown ---- */ html:not(.dark) .autosuggest-dropdown { background: rgba(255, 255, 255, 0.98) !important; border-color: #E2E8F0 !important; box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.1) !important; } html:not(.dark) .autosuggest-item { border-bottom-color: #F1F5F9 !important; } html:not(.dark) .autosuggest-item:hover { background-color: #EFF6FF !important; } html:not(.dark) .autosuggest-item .text-slate-100 { color: #0F172A !important; } html:not(.dark) .autosuggest-item .text-slate-400 { color: #64748B !important; } /* ---- Spotlight Search ---- */ html:not(.dark) #spotlightOverlay { background: rgba(0, 0, 0, 0.25) !important; } html:not(.dark) #spotlightBox { background: rgba(255, 255, 255, 0.98) !important; border-color: #E2E8F0 !important; } html:not(.dark) #spotlightInput { color: #0F172A !important; } /* ---- Changelog / Digital Card Modals ---- */ html:not(.dark) #changelogModal > div, html:not(.dark) #digitalCardModal > div { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; } /* ---- Quick Preview Modal ---- */ html:not(.dark) #quickPreviewModal > div:last-child { background-color: #FFFFFF !important; border-color: #E2E8F0 !important; } /* ---- Admin Book Management sidebar items ---- */ html:not(.dark) #recentBooksContainer > div { background-color: #F8FAFC !important; border-color: #E2E8F0 !important; } html:not(.dark) #recentBooksContainer .book-row:hover { border-color: #CBD5E1 !important; } /* ---- Reader / PDF Page ---- */ html:not(.dark) .bg-slate-950.min-h-screen { background-color: #F8FAFC !important; } /* ---- Scrollbar ---- */ html:not(.dark) ::-webkit-scrollbar-track { background: #F1F5F9; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #CBD5E1; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #0284C7; } /* ---- Theme Toggle button ---- */ html:not(.dark) .theme-toggle-btn { background-color: #F1F5F9 !important; border-color: #CBD5E1 !important; color: #374151 !important; } html:not(.dark) .theme-toggle-btn:hover { background-color: #E2E8F0 !important; } /* ---- Pill Switch in Mobile drawer ---- */ html:not(.dark) .theme-switch-track { background-color: #E2E8F0; border-color: #CBD5E1; } /* ---- Changelog admin section badges ---- */ html:not(.dark) .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.08) !important; } html:not(.dark) .bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.08) !important; } html:not(.dark) .bg-sky-500\/10 { background-color: rgba(14, 165, 233, 0.08) !important; } html:not(.dark) .bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.08) !important; } html:not(.dark) .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.08) !important; } html:not(.dark) .bg-teal-500\/10 { background-color: rgba(20, 184, 166, 0.08) !important; } html:not(.dark) .bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.08) !important; }