/* =============================================
   DARK MODE THEME — Kênh Truyện 123
   Night City + Firefly Edition
   ============================================= */

/* === Dark mode body === */
body.dark-mode {
    background-color: #021027 !important;
    color: #e0d6eb !important;
}
/* Ẩn ảnh nền mờ trong dark mode (dùng night background thay) */
body.dark-mode::before {
    opacity: 0 !important;
}

/* === Auth pages (login, register, forgot-password) dark mode === */
body.dark-mode .auth-bg-page {
    background-image: none !important;
    background-color: #021027 !important;
}
body.dark-mode .auth-page-overlay {
    background-color: rgba(2, 10, 30, 0.88) !important;
}



/* === Night City Background === */
#darkBackground {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body.dark-mode #darkBackground {
    display: block;
}

#darkBackground img {
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    mask-image: radial-gradient(white 0%, white 30%, transparent 80%, transparent);
    -webkit-mask-image: radial-gradient(white 0%, white 30%, transparent 80%, transparent);
    opacity: 0.35;
}

/* === Firefly Particles === */
#darkParticles {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

body.dark-mode #darkParticles { display: block; }

.firefly {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.firefly-glow {
    width: 100%; height: 100%;
    border-radius: 50%;
    background-image: radial-gradient(hsl(140, 100%, 75%), hsl(140, 100%, 70%) 10%, hsla(140, 100%, 60%, 0) 56%);
    animation: fireflyPulse 2s infinite ease-in-out;
}

@keyframes fireflyPulse {
    0%, 100% { opacity: 0.8; transform: scale3d(0.5, 0.5, 1); }
    50% { opacity: 0.3; transform: scale3d(2, 2, 1); }
}

@keyframes fireflyDrift {
    0%, 100% { opacity: 0; }
    10% { opacity: 0.9; }
    90% { opacity: 0.4; }
}

/* =============================================
   HEADER (2-layer structure: #mainHeader)
   ============================================= */

/* Lớp 1: white bar → dark navy */
body.dark-mode #mainHeader > div:first-child {
    background: rgba(2, 16, 39, 0.95) !important;
    border-bottom-color: rgba(59, 130, 246, 0.15) !important;
    backdrop-filter: blur(20px) !important;
}

/* Lớp 2: blue nav bar → darker */
body.dark-mode #mainHeader > div:nth-child(2) {
    background: #1e3a5f !important;
}

/* Mobile menu */
body.dark-mode #mainHeader > div:nth-child(3) {
    background: rgba(2, 16, 39, 0.97) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode #mainHeader a,
body.dark-mode #mainHeader span {
    color: #c8e6f4;
}

body.dark-mode #mainHeader button:not(#darkModeBtn) {
    color: #c8e6f4;
}

/* Search bar pill */
body.dark-mode #mainHeader button[onclick="openSearchModal()"] {
    background: rgba(15, 40, 80, 0.7) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #7ab8e8 !important;
}

body.dark-mode #mainHeader button[onclick="openSearchModal()"] span,
body.dark-mode #mainHeader button[onclick="openSearchModal()"] i {
    color: #7ab8e8 !important;
}

/* Dark mode toggle */
body.dark-mode #darkModeBtn { color: #fbbf24 !important; }
body.dark-mode #darkModeBtn:hover { background: rgba(251, 191, 36, 0.1) !important; }

/* Nav links hover */
body.dark-mode #mainHeader nav a {
    color: #93c5fd !important;
}

body.dark-mode #mainHeader nav a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* Auth buttons */
body.dark-mode #mainHeader a[href="/dang-nhap"] {
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #90cdf4 !important;
    background: transparent !important;
}
body.dark-mode #mainHeader a[href="/dang-ky"] {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Mobile menu */
body.dark-mode #mobileMenu {
    background: rgba(2, 16, 39, 0.97) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

/* =============================================
   PAGE BACKGROUNDS
   ============================================= */

body.dark-mode .bg-\[\#fff5f7\] {
    background-color: #021027 !important;
}

/* bg-gray-50 used as page background */
body.dark-mode .min-h-screen.bg-gray-50 {
    background-color: #021027 !important;
}

/* Gradient backgrounds */
body.dark-mode .bg-gradient-to-b.from-pink-50,
body.dark-mode .bg-gradient-to-b.from-blue-50 {
    background: linear-gradient(to bottom, #041a3a, #021027) !important;
}

/* Banner: from-gray-50 to-white */
body.dark-mode .bg-gradient-to-b.from-gray-50 {
    background: linear-gradient(to bottom, #041a3a, #021027) !important;
}
body.dark-mode .bg-gradient-to-b.to-white {
    background: linear-gradient(to bottom, #031428, #021027) !important;
}
body.dark-mode section.bg-gradient-to-b {
    background: linear-gradient(to bottom, #031428, #021027) !important;
}


/* Spacer */
body.dark-mode .h-\[106px\] {
    background-color: transparent !important;
}

/* =============================================
   TEXT COLORS
   ============================================= */

body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700 { color: #e0e8f0 !important; }

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 { color: #9ab0c8 !important; }

body.dark-mode .text-gray-400 { color: #6b8aaa !important; }

body.dark-mode .text-blue-600,
body.dark-mode .text-blue-500 { color: #60a5fa !important; }

body.dark-mode .text-pink-500,
body.dark-mode .text-pink-600 { color: #60a5fa !important; }

body.dark-mode .text-pink-400,
body.dark-mode .text-pink-300 { color: #60a5fa !important; }

body.dark-mode .group:hover .group-hover\:text-blue-600,
body.dark-mode .group-hover\:text-blue-600:hover { color: #93c5fd !important; }

body.dark-mode .group-hover\:text-pink-500:hover,
body.dark-mode .group:hover .group-hover\:text-pink-500,
body.dark-mode .group:hover .group-hover\:text-pink-600 { color: #60a5fa !important; }

/* =============================================
   CARDS & BACKGROUNDS
   ============================================= */

body.dark-mode .bg-white {
    background-color: rgba(4, 20, 50, 0.85) !important;
}

/* Borders */
body.dark-mode .border-pink-50  { border-color: rgba(59,130,246,0.08) !important; }
body.dark-mode .border-pink-100 { border-color: rgba(59,130,246,0.1) !important; }
body.dark-mode .border-pink-200 { border-color: rgba(59,130,246,0.15) !important; }
body.dark-mode .border-gray-50  { border-color: rgba(59,130,246,0.06) !important; }
body.dark-mode .border-gray-100 { border-color: rgba(59,130,246,0.1) !important; }
body.dark-mode .border-gray-200 { border-color: rgba(59,130,246,0.15) !important; }

/* Backgrounds */
body.dark-mode .bg-pink-50       { background-color: rgba(59,130,246,0.06) !important; }
body.dark-mode .bg-pink-50\/50   { background-color: rgba(59,130,246,0.04) !important; }
body.dark-mode .bg-blue-50       { background-color: rgba(30,58,95,0.5) !important; }
body.dark-mode .bg-gray-50:not(body):not(.min-h-screen) { background-color: rgba(4,16,40,0.7) !important; }
body.dark-mode .bg-gray-100      { background-color: rgba(4,20,50,0.6) !important; }
body.dark-mode .bg-amber-50      { background-color: rgba(30,30,10,0.6) !important; }

/* Input fields */
body.dark-mode input:not([type="checkbox"]):not([type="radio"]) {
    background-color: rgba(4, 16, 40, 0.9) !important;
    color: #e0e8f0 !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
body.dark-mode input:disabled {
    background-color: rgba(4, 16, 40, 0.5) !important;
    color: #6b8aaa !important;
}
body.dark-mode input::placeholder { color: #6b8aaa !important; }

body.dark-mode .shadow-sm,
body.dark-mode .shadow-md { box-shadow: 0 2px 15px rgba(0,0,0,0.4) !important; }

/* Story/genre anchor cards */
body.dark-mode a.bg-white.rounded-2xl {
    background-color: rgba(4,26,58,0.9) !important;
    border-color: rgba(59,130,246,0.1) !important;
}
body.dark-mode a.bg-white.rounded-2xl:hover {
    border-color: rgba(59,130,246,0.3) !important;
    box-shadow: 0 0 20px rgba(59,130,246,0.1) !important;
}

body.dark-mode .flex.gap-4.bg-white.rounded-2xl {
    background-color: rgba(4,26,58,0.85) !important;
    border-color: rgba(59,130,246,0.08) !important;
}
body.dark-mode .flex.gap-4.bg-white.rounded-2xl:hover {
    background-color: rgba(10,40,80,0.9) !important;
    border-color: rgba(59,130,246,0.2) !important;
}

/* =============================================
   BUTTONS & ACCENTS
   ============================================= */

body.dark-mode .bg-blue-600 { background-color: #1d4ed8 !important; }
body.dark-mode .hover\:bg-blue-700:hover { background-color: #1e40af !important; }

body.dark-mode .bg-pink-500,
body.dark-mode .bg-pink-400 { background-color: #2563eb !important; }

body.dark-mode .bg-gradient-to-r.from-pink-400.to-rose-400 {
    background: linear-gradient(to right, #1d4ed8, #2563eb) !important;
}

body.dark-mode .bg-gradient-to-br.from-pink-400.to-rose-400,
body.dark-mode .bg-gradient-to-br.from-pink-300.to-rose-300 {
    background: linear-gradient(to bottom right, #1d4ed8, #3b82f6) !important;
    box-shadow: 0 0 15px rgba(59,130,246,0.3) !important;
}

/* =============================================
   TEXT GRADIENT
   ============================================= */

body.dark-mode .text-gradient {
    background: linear-gradient(135deg, #60a5fa, #22d3ee) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* =============================================
   SLIDER DOTS
   ============================================= */

body.dark-mode .slider-dot { background: rgba(59,130,246,0.2) !important; }
body.dark-mode .slider-dot.active-dot { background: linear-gradient(to right, #3b82f6, #06b6d4) !important; }

/* =============================================
   FOOTER
   ============================================= */

body.dark-mode footer {
    background: linear-gradient(to bottom, rgba(4,26,58,0.98), rgba(2,16,39,1)) !important;
    background-image: none !important;
    border-top-color: rgba(59,130,246,0.1) !important;
}
/* Đổi overlay bg-white/80 trong footer thành dark */
body.dark-mode footer > div.absolute.inset-0 {
    background-color: rgba(2, 12, 32, 0.92) !important;
}
/* Footer text colors */
body.dark-mode footer p,
body.dark-mode footer span:not(.text-gradient),
body.dark-mode footer li {
    color: #94a3b8 !important;
}
body.dark-mode footer h3,
body.dark-mode footer h4 {
    color: #e2e8f0 !important;
}
body.dark-mode footer a:not(.text-gradient) {
    color: #94a3b8 !important;
}
body.dark-mode footer a:hover {
    color: #60a5fa !important;
}
body.dark-mode footer .border-gray-200,
body.dark-mode footer .border-gray-100 {
    border-color: rgba(59,130,246,0.1) !important;
}
body.dark-mode footer .text-gray-400 { color: #64748b !important; }
body.dark-mode footer .text-gray-500 { color: #94a3b8 !important; }
body.dark-mode footer .text-gray-600 { color: #cbd5e1 !important; }

/* =============================================
   CHAPTER READER PAGE
   ============================================= */

/* Root wrapper */
body.dark-mode #readerRoot {
    background-color: #0f172a !important;
    color: #d1d5db !important;
}

/* Top header bar */
body.dark-mode #readerHeader {
    background: rgba(15, 23, 42, 0.97) !important;
    border-bottom-color: rgba(59,130,246,0.15) !important;
}
body.dark-mode #readerHeader a,
body.dark-mode #readerHeader span,
body.dark-mode #readerHeader button { color: #94a3b8 !important; }
body.dark-mode #readerHeader a:hover,
body.dark-mode #readerHeader button:hover { color: #60a5fa !important; }
body.dark-mode #readerHeader .bg-blue-50 { background: rgba(30,58,138,0.3) !important; }

/* Bottom nav */
body.dark-mode #readerFooter {
    background: rgba(15, 23, 42, 0.97) !important;
    border-top-color: rgba(59,130,246,0.15) !important;
}
body.dark-mode #readerFooter a,
body.dark-mode #readerFooter span { color: #94a3b8 !important; }
body.dark-mode #readerFooter .text-blue-600 { color: #60a5fa !important; }
body.dark-mode #readerFooter .hover\:bg-blue-50:hover { background: rgba(30,58,138,0.3) !important; }
body.dark-mode #readerFooter .bg-blue-50 { background: rgba(30,58,138,0.3) !important; }

/* Chapter article text */
body.dark-mode #articleBody {
    color: #d4d4d4 !important;
}
body.dark-mode #chapterContent h1 { color: #f1f5f9 !important; }
body.dark-mode #chapterContent p.text-gray-400 { color: #64748b !important; }
body.dark-mode #chapterContent .border-gray-200 { border-color: rgba(59,130,246,0.1) !important; }
body.dark-mode #chapterContent .text-gray-400.italic { color: #475569 !important; }

/* Floating right toolbar */
body.dark-mode #floatingToolbar > div {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(59,130,246,0.15) !important;
}
body.dark-mode #floatingToolbar button,
body.dark-mode #floatingToolbar a { color: #94a3b8 !important; }
body.dark-mode #floatingToolbar button:hover,
body.dark-mode #floatingToolbar a:hover {
    color: #60a5fa !important;
    background: rgba(30,58,138,0.3) !important;
}

/* Settings panel */
body.dark-mode #settingsPanel > div {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(59,130,246,0.2) !important;
}
body.dark-mode #settingsPanel h4 { color: #e2e8f0 !important; }
body.dark-mode #settingsPanel label { color: #94a3b8 !important; }
body.dark-mode #settingsPanel #fontSizeLabel { color: #e2e8f0 !important; }
body.dark-mode #settingsPanel .bg-gray-100 {
    background: rgba(30,41,59,0.8) !important;
    color: #94a3b8 !important;
}

/* Chapter list drawer */
body.dark-mode #chapterDrawer > div:last-child {
    background: rgba(15, 23, 42, 0.99) !important;
    border-color: rgba(59,130,246,0.15) !important;
}
body.dark-mode #chapterDrawer h3 { color: #e2e8f0 !important; }
body.dark-mode #chapterDrawer a.text-gray-600 { color: #94a3b8 !important; }
body.dark-mode #chapterDrawer a:hover { color: #60a5fa !important; background: rgba(30,58,138,0.2) !important; }
body.dark-mode #chapterDrawer .bg-blue-50 { background: rgba(30,58,138,0.3) !important; }
body.dark-mode #chapterDrawer .text-blue-600 { color: #60a5fa !important; }
body.dark-mode #chapterDrawer .bg-gray-100 { background: rgba(30,41,59,0.8) !important; }

/* TTS player */
body.dark-mode #ttsPlayer > div {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(59,130,246,0.2) !important;
}
body.dark-mode #ttsPlayer .text-gray-500 { color: #94a3b8 !important; }
body.dark-mode #ttsPlayer .bg-blue-100 { background: rgba(30,58,138,0.4) !important; }
body.dark-mode #ttsPlayer .text-gray-600 { color: #94a3b8 !important; }
body.dark-mode #ttsPlayer .bg-gray-100 { background: rgba(30,41,59,0.8) !important; }
body.dark-mode #ttsPlayer select {
    background: rgba(30,41,59,0.9) !important;
    color: #e2e8f0 !important;
}


/* =============================================
   SEARCH MODAL
   ============================================= */

body.dark-mode .search-modal-content {
    background: rgba(4,20,50,0.97) !important;
    border-color: rgba(59,130,246,0.15) !important;
    box-shadow: 0 0 60px rgba(59,130,246,0.08), 0 25px 50px rgba(0,0,0,0.5) !important;
}
body.dark-mode .search-modal-content input {
    background: rgba(2,16,39,0.8) !important;
    border-color: rgba(59,130,246,0.2) !important;
    color: #e0e8f0 !important;
}
body.dark-mode .search-modal-content input::placeholder { color: #6b8aaa !important; }

body.dark-mode .search-result-item {
    background: rgba(4,26,58,0.8) !important;
    border-color: rgba(59,130,246,0.08) !important;
}
body.dark-mode .search-result-item:hover {
    background: rgba(10,40,80,0.9) !important;
    border-color: rgba(59,130,246,0.25) !important;
}

/* =============================================
   SECTION ICON GLOWS
   ============================================= */

body.dark-mode .bg-gradient-to-br.from-orange-400.to-red-400 { box-shadow: 0 0 15px rgba(251,146,60,0.3) !important; }
body.dark-mode .bg-gradient-to-br.from-violet-400.to-purple-400 { box-shadow: 0 0 15px rgba(167,139,250,0.3) !important; }
body.dark-mode .bg-gradient-to-br.from-teal-400.to-emerald-400 { box-shadow: 0 0 15px rgba(45,212,191,0.3) !important; }
body.dark-mode .bg-gradient-to-br.from-blue-500.to-indigo-500,
body.dark-mode .bg-gradient-to-br.from-blue-400.to-indigo-400 { box-shadow: 0 0 15px rgba(59,130,246,0.3) !important; }

/* =============================================
   BOOK PAGE
   ============================================= */

body.dark-mode .book__page {
    background-color: #ffffff;
    background-image: linear-gradient(to bottom, #0a1e3a 9px, #14305a 1px);
    background-size: 100% 10px;
}

/* =============================================
   PETAL
   ============================================= */

body.dark-mode .petal {
    opacity: 0.1 !important;
    filter: hue-rotate(180deg) brightness(0.3);
}