/* ============================================================ DARK MODE — se activa con .dark-mode en ============================================================ */ html.dark-mode { --dm-bg: #1e1e1e; --dm-bg-2: #272727; --dm-bg-3: #313131; --dm-bg-card: #2d2d2d; --dm-border: #444; --dm-text: #e4e4e4; --dm-text-muted: #aaa; --dm-navbar-bg: #222; --dm-input-bg: #333; --dm-input-text: #e4e4e4; --dm-shadow: rgba(0,0,0,0.4); } /* ── Base ── */ html.dark-mode body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } /* ── Navbar ── */ html.dark-mode .navbar { background-color: var(--dm-navbar-bg) !important; box-shadow: 0 2px 10px var(--dm-shadow); } html.dark-mode .navbar .nav-link, html.dark-mode .navbar .navbar-brand, html.dark-mode .navbar span:not(.secondary-text-color), html.dark-mode .navbar .fw-bold { color: var(--dm-text) !important; } html.dark-mode .navbar .secondary-text-color, html.dark-mode .navbar span.secondary-text-color { color: #5810c5 !important; } /* ── Cards ── */ html.dark-mode .card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .card-header { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode .card-footer { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode .card-body { color: var(--dm-text) !important; } /* ── Dropdowns ── */ html.dark-mode .dropdown-menu, html.dark-mode .custom-dropdown-menu, html.dark-mode .custom-dropdown-menu-mobile { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } html.dark-mode .dropdown-item { color: var(--dm-text) !important; } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .dropdown-divider { border-color: var(--dm-border) !important; } /* ── Forms ── */ html.dark-mode .form-control, html.dark-mode .form-select { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-input-text) !important; } html.dark-mode .form-control:focus, html.dark-mode .form-select:focus { background-color: var(--dm-input-bg) !important; border-color: #C52110 !important; color: var(--dm-input-text) !important; box-shadow: 0 0 0 0.2rem rgba(197,33,16,0.25) !important; } html.dark-mode .form-control::placeholder { color: var(--dm-text-muted) !important; } html.dark-mode .form-label { color: var(--dm-text) !important; } html.dark-mode .form-check-label { color: var(--dm-text) !important; } html.dark-mode .form-check-input { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode .form-check-input:checked { background-color: #5810c5 !important; border-color: #5810c5 !important; } html.dark-mode .input-group-text { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Tables ── */ html.dark-mode .table { color: var(--dm-text) !important; border-color: var(--dm-border) !important; --bs-table-bg: var(--dm-bg-card); --bs-table-color: var(--dm-text); --bs-table-hover-bg: var(--dm-bg-3); --bs-table-hover-color: var(--dm-text); --bs-table-border-color: var(--dm-border); --bs-table-striped-bg: var(--dm-bg-3); --bs-table-striped-color: var(--dm-text); } html.dark-mode .table > :not(caption) > * > * { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark-mode .table thead th { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .table td, html.dark-mode .table th { border-color: var(--dm-border) !important; } /* ── Modals ── */ html.dark-mode .modal-content { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .modal-header { border-color: var(--dm-border) !important; } html.dark-mode .modal-footer { border-color: var(--dm-border) !important; } html.dark-mode .btn-close:not(.btn-close-white) { filter: invert(1); } /* ── Alerts ── */ html.dark-mode .alert-success { background-color: #1a3a2a !important; border-color: #2d6a4a !important; color: #80e0a0 !important; } html.dark-mode .alert-danger { background-color: #3a1a1a !important; border-color: #6a2d2d !important; color: #e08080 !important; } /* ── Sidebar profile & dashboard ── */ html.dark-mode #wrapper, html.dark-mode #dashboard-layout { background-color: var(--dm-bg) !important; } html.dark-mode #content-wrapper { background-color: var(--dm-bg) !important; } /* ── Text helpers ── */ html.dark-mode .text-muted { color: var(--dm-text-muted) !important; } html.dark-mode .text-dark { color: var(--dm-text) !important; } html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode p, html.dark-mode span, html.dark-mode label, html.dark-mode li, html.dark-mode td, html.dark-mode th { color: var(--dm-text); } /* Excepciones: textos que ya tienen color propio y no deben cambiar */ html.dark-mode .text-white, html.dark-mode .text-danger, html.dark-mode .badge, html.dark-mode .banner-title, html.dark-mode .breadcrumb-box, html.dark-mode .breadcrumb-box svg, html.dark-mode .breadcrumb-box i, html.dark-mode .breadcrumb-box i::before, html.dark-mode .sd-sidebar .nav-link, html.dark-mode .sd-drawer .nav-link, html.dark-mode .sidebar-custom .nav-link { color: inherit !important; } /* ── Search results ── */ html.dark-mode .search-results-container { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } html.dark-mode .search-results-container li a { color: var(--dm-text) !important; } html.dark-mode .search-results-container li a:hover { background: var(--dm-bg-3) !important; } /* ── Borders & dividers ── */ html.dark-mode .border, html.dark-mode .border-top, html.dark-mode .border-bottom { border-color: var(--dm-border) !important; } html.dark-mode hr { border-color: var(--dm-border) !important; } /* ── Backgrounds ── */ html.dark-mode .bg-white { background-color: var(--dm-bg-card) !important; } html.dark-mode .bg-light, html.dark-mode .bg-body, html.dark-mode #f8f9fc, html.dark-mode [style*="background-color:#f8f9fc"], html.dark-mode [style*="background-color: #f8f9fc"] { background-color: var(--dm-bg) !important; } /* ── Botones outline ── */ html.dark-mode .btn-outline-secondary { color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .btn-outline-secondary:hover { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .btn-outline-dark { color: var(--dm-text) !important; border-color: var(--dm-text-muted) !important; } html.dark-mode .btn-link { color: #C52110 !important; } /* ── Logout button ── */ html.dark-mode .logOutButton { color: var(--dm-text) !important; } /* ── Footer ── */ html.dark-mode .footerContainer { background-color: #0d0d0d !important; } /* ── Chart canvas (fondo) ── */ html.dark-mode canvas { background-color: transparent !important; } /* ── Scrollbar ── */ html.dark-mode ::-webkit-scrollbar { width: 8px; background: var(--dm-bg-2); } html.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-bg-3); border-radius: 4px; } /* ── Upcoming cards ── */ html.dark-mode .upcoming-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important; } html.dark-mode .upcoming-img-wrap { background: var(--dm-bg-3) !important; } html.dark-mode .upcoming-name { color: var(--dm-text) !important; } /* ── Inline style: background:#f8f7ff (info pills in card details) ── */ html.dark-mode [style*="background:#f8f7ff"], html.dark-mode [style*="background: #f8f7ff"] { background: var(--dm-bg-3) !important; } /* ── SweetAlert2 ── */ html.dark-mode .swal2-popup { background: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark-mode .swal2-title { color: var(--dm-text) !important; } html.dark-mode .swal2-html-container { color: var(--dm-text-muted) !important; } html.dark-mode .swal2-input, html.dark-mode .swal2-textarea, html.dark-mode .swal2-select { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .swal2-validation-message { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .swal2-footer { border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } html.dark-mode .swal2-close { color: var(--dm-text-muted) !important; } html.dark-mode .swal2-close:hover { color: var(--dm-text) !important; } /* ── Bootstrap Accordion ── */ html.dark-mode .accordion-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .accordion-button { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .accordion-button:not(.collapsed) { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; box-shadow: none !important; } html.dark-mode .accordion-button::after { filter: invert(1); } html.dark-mode .accordion-body { background-color: var(--dm-bg-card) !important; color: var(--dm-text) !important; } /* ── Inline style overrides (background:#fff / background-color:#fff / rgb(255,255,255)) ── */ html.dark-mode [style*="background:#fff"], html.dark-mode [style*="background: #fff"], html.dark-mode [style*="background-color:#fff"], html.dark-mode [style*="background-color: #fff"], html.dark-mode [style*="background:white"], html.dark-mode [style*="background: white"], html.dark-mode [style*="background:#FFF"], html.dark-mode [style*="background: #FFF"], html.dark-mode [style*="background: rgb(255, 255, 255)"], html.dark-mode [style*="background:rgb(255,255,255)"], html.dark-mode [style*="background-color: rgb(255, 255, 255)"], html.dark-mode [style*="background-color:rgb(255,255,255)"] { background: var(--dm-bg-card) !important; } /* ── Inline dark text colors that break dark mode ── */ html.dark-mode [style*="color:#1a1a2e"], html.dark-mode [style*="color: #1a1a2e"], html.dark-mode [style*="color:#222"], html.dark-mode [style*="color: #222"], html.dark-mode [style*="color:#333"], html.dark-mode [style*="color: #333"], html.dark-mode [style*="color:#3a3a3a"], html.dark-mode [style*="color: #3a3a3a"] { color: var(--dm-text) !important; } /* ── List group items ── */ html.dark-mode .list-group-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .list-group-item:hover { background-color: var(--dm-bg-3) !important; } /* Links en list-group con text-dark */ html.dark-mode .list-group-item a.text-dark, html.dark-mode .list-group-item a.fw-semibold { color: var(--dm-text) !important; } /* Fechas y textos con color inline oscuro */ html.dark-mode .list-group-item span[style*="color:rgba(0,0,0"], html.dark-mode .list-group-item span[style*="color: rgba(0,0,0"] { color: var(--dm-text-muted) !important; } /* ── img-thumbnail ── */ html.dark-mode .img-thumbnail { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } /* ── Ranking cards (effect cards) ── */ html.dark-mode .card.card-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* ── compact-ranking container ── */ html.dark-mode .compact-ranking { background-color: var(--dm-bg-card) !important; } /* ── Cualquier div con background blanco inline dentro del body ── */ html.dark-mode div[style*="background:#fff"], html.dark-mode div[style*="background: #fff"], html.dark-mode div[style*="background-color:#fff"], html.dark-mode div[style*="background-color: #fff"], html.dark-mode div[style*="background: rgb(255, 255, 255)"], html.dark-mode div[style*="background:rgb(255,255,255)"], html.dark-mode div[style*="background-color: rgb(255, 255, 255)"], html.dark-mode div[style*="background-color:rgb(255,255,255)"] { background-color: var(--dm-bg-card) !important; background: var(--dm-bg-card) !important; } /* ── text-dark en modo oscuro ── */ html.dark-mode .text-dark { color: var(--dm-text) !important; } /* ── Colores inline con rgba oscuro en spans ── */ html.dark-mode span[style*="color:rgba(0,0,0"], html.dark-mode span[style*="color: rgba(0,0,0"] { color: var(--dm-text-muted) !important; } /* ── Home index: game cards ── */ html.dark-mode .game-card { background-color: var(--dm-bg-card) !important; } /* ── Game index: column & latest panels ── */ html.dark-mode .column { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .column h2, html.dark-mode .column li { border-color: var(--dm-border) !important; } html.dark-mode .latest { background: var(--dm-bg-card) !important; } html.dark-mode .latest-item { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } /* ── TCG search result cards (allResultsYGO) ── */ html.dark-mode .tcg-result-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .tcg-card-img-wrap { background: var(--dm-bg-3) !important; } html.dark-mode .tcg-card-info { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .tcg-card-name { color: var(--dm-text) !important; } /* ── Wishlist list cards (WlList) ── */ html.dark-mode .wl-card { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .wl-footer { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } /* ── Wishlist item + search panel ── */ html.dark-mode .ygo-card-item { background: var(--dm-bg-card) !important; } html.dark-mode .ygo-card-header { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } html.dark-mode .ygo-card-name { color: var(--dm-text) !important; } html.dark-mode .ygo-ctrl-label { color: var(--dm-text-muted) !important; } html.dark-mode .wl-search-info { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode #paginationContainer { background: var(--dm-bg-card) !important; } html.dark-mode .paginationButtons, html.dark-mode .pg-btn { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ── Card list table (list.css) ── */ html.dark-mode .tablec tbody tr { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } /* ── YGO card/sealed stock view switcher & table ── */ html.dark-mode .view-switcher-btn { background: var(--dm-bg-card) !important; color: var(--dm-text) !important; } html.dark-mode .ygo-table { background: var(--dm-bg-card) !important; } html.dark-mode .ygo-table tbody tr { border-color: var(--dm-border) !important; } html.dark-mode .ygo-table tbody td { color: var(--dm-text) !important; } /* ── Chat UI ── */ html.dark-mode .chat-wrapper { background: var(--dm-bg-card) !important; box-shadow: 0 .15rem 1.75rem rgba(0,0,0,0.4) !important; } html.dark-mode .chat-messages { background: var(--dm-bg-2) !important; } html.dark-mode .other-message .bubble { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .typing-indicator { background: var(--dm-bg-3) !important; } html.dark-mode .chat-input-bar { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } html.dark-mode .chat-input-bar input { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .chat-input-bar input:focus { background: var(--dm-bg-2) !important; } /* ── User shop page ── */ html.dark-mode .product-card { background: var(--dm-bg-card) !important; } html.dark-mode .stack-card { background: var(--dm-bg-card) !important; } html.dark-mode .stack-card .sc-info { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode .stack-btn { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .profile-badges .badge { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .featured-manage-btn { background: var(--dm-bg-3) !important; } /* ── User stock cards ── */ html.dark-mode .custom-stock-card { background-color: var(--dm-bg-card) !important; } /* ── Bootstrap nav-tabs ── */ html.dark-mode .nav-tabs { border-color: var(--dm-border) !important; } html.dark-mode .nav-tabs .nav-link { color: var(--dm-text-muted) !important; background-color: transparent !important; border-color: transparent !important; } html.dark-mode .nav-tabs .nav-link:hover, html.dark-mode .nav-tabs .nav-link:focus { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) var(--dm-border) transparent !important; color: var(--dm-text) !important; } html.dark-mode .nav-tabs .nav-link.active, html.dark-mode .nav-tabs .nav-item.show .nav-link { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-2) !important; color: var(--dm-text) !important; } html.dark-mode .tab-content { background-color: transparent !important; } /* ── Add-card form: tabs & pagination ── */ html.dark-mode .add-card-tabs .tablinks { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .paginationContainer .paginationButtons, html.dark-mode .paginationSetContainer .paginationButtons { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; }