/* ========================================
   DARK THEME COMPONENT STYLES
   Unconditional styles — the site is permanently dark (Newtype v2).
   Variables and body base styles are defined in themes.css.
   ======================================== */

/* Container elements */
.container,
.card-browser,
.collection-container,
.deck-builder-container {
    background-color: var(--bg-container);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--text-primary);
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
}

/* Page headers */
.page-header {
    background: var(--page-header-bg);
    color: var(--page-header-color);
}

/* Filter sections */
.filter-section,
.filters {
    background: var(--filter-bg);
    border-color: var(--filter-border);
}

.filter-group label,
.search-group label {
    color: var(--text-primary);
}

select,
input[type="text"],
input[type="search"],
input[type="number"],
textarea {
    background-color: #3a3a3a;
    border-color: #555555;
    color: var(--text-primary);
}

select:focus,
input:focus,
textarea:focus {
    border-color: var(--color-primary);
    background-color: #404040;
}

/* Card items */
.card-item {
    background: #333333;
    border-color: #444444;
}

.card-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    border-color: var(--color-primary);
}

.card-details {
    color: var(--text-primary);
}

.card-name {
    color: var(--text-primary);
}

.card-number,
.stat-label,
.price-label {
    color: var(--text-secondary);
}

/* Tables */
.text-view-table {
    background: var(--bg-container);
}

.text-view-table th {
    background: #3a3a3a;
    color: var(--text-primary);
    border-color: #444444;
}

.text-view-table td {
    border-color: #444444;
    color: var(--text-primary);
}

.text-view-table tr:hover {
    background: #3a3a3a;
}

.text-view-table .card-number,
.text-view-table .card-name,
.text-view-table .set-id,
.text-view-table .card-type,
.text-view-table .card-level,
.text-view-table .card-cost,
.text-view-table .card-ap,
.text-view-table .card-hp {
    color: var(--text-primary);
}

/* Fix White color badge visibility in dark mode */
.text-view-table .card-color.White {
    background-color: #d0d0d0;
    color: #1a1a1a;
}

/* Fix Yellow color badge visibility in dark mode */
.text-view-table .card-color.Yellow {
    background-color: #f1c40f;
    color: #1a1a1a;
}

/* Price link styling in dark mode */
.text-view-table .price-link {
    color: var(--text-primary);
}

.text-view-table .price-link:hover {
    color: var(--color-primary);
}

/* Fix card-type badge visibility in dark mode */
.card-type {
    background-color: #4a4a4a;
    color: #e0e0e0;
}

/* List View - Card Browser */
.card-grid.list-view {
    background: transparent;
}

.card-grid.list-view .card-item {
    background: var(--bg-container);
    border-color: #444444;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.card-grid.list-view .card-item:hover {
    background: #2c2c2c;
}

.card-grid.text-view {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.alt-art-row {
    background: #2c2c2c;
}

.alt-art-row:hover {
    background: #333333;
}

/* Buttons */
button,
.btn {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    border-color: #555555;
}

button:hover,
.btn:hover {
    background: var(--btn-secondary-bg-hover);
}

.btn-primary,
button.primary {
    background: var(--btn-primary-bg);
    color: white;
}

.btn-primary:hover,
button.primary:hover {
    background: var(--btn-primary-bg-hover);
}

button:disabled {
    background: #2c2c2c;
    color: #666666;
    border-color: #444444;
}

/* Modals */
#cardModal .modal-content {
    background: var(--bg-container);
    border-color: #444444;
}

#deckModal .modal-content,
#deckModal .deck-modal-content,
.deck-modal-content {
    background: var(--bg-container);
    border-color: #444444;
}

#creatorModal .modal-content,
.creator-modal {
    background: var(--bg-container);
    border-color: #444444;
}

#msaInstructionsModal .modal-content,
#msaInstructionsModal .msa-modal-content,
#gdSimInstructionsModal .modal-content,
#gdSimInstructionsModal .msa-modal-content,
.msa-modal-content {
    background: var(--bg-container);
    border-color: #444444;
}

.msa-instructions {
    background: var(--bg-section);
}

.msa-instructions h3,
.msa-steps li strong {
    color: var(--color-primary);
}

.msa-steps li p {
    color: var(--text-primary);
}

#cardModal .modal-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-bottom-color: var(--border-primary);
}

#cardModal .modal-header h2,
#cardModal .modal-header h3 {
    color: white;
}

#cardModal .modal-footer {
    border-top-color: var(--border-primary);
}

#cardModal .close,
#cardModal .close-modal {
    color: var(--text-primary);
}

#cardModal .close:hover,
#cardModal .close-modal:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Card-detail .cardModal-* component styles were consolidated into
   styles/components/card-modal.css (single source). The dead duplicates that
   card-modal.css already overrode were dropped in the move.
   See docs/planning/card-detail-css-unification-plan.md. */

#cardModal .modal-stats,
#cardModal .modal-card-info {
    background: transparent;
}

#cardModal .modal-label {
    color: var(--text-secondary);
}

#cardModal .modal-value {
    color: var(--text-primary);
}

/* Modal scrollbar */
#cardModal .modal-body::-webkit-scrollbar-track {
    background: #2c2c2c;
}

#cardModal .modal-body::-webkit-scrollbar-thumb {
    background: #555555;
}

#cardModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #666666;
}

/* Modal image placeholders */
#cardModal .modal-image-placeholder,
#cardModal .pilot-image-placeholder {
    background: var(--bg-section);
    color: var(--text-secondary);
}

#cardModal .pilot-image-container {
    background: var(--bg-section);
}

#cardModal .pilot-image-container img {
    background: var(--bg-section);
}

/* Modal carousels */
#cardModal .alt-art-carousel {
    background: var(--bg-section);
    border-color: var(--border-primary);
}

#cardModal .alt-art-caption {
    color: var(--text-primary);
}

#cardModal .pilot-carousel {
    background: var(--bg-section);
    border-color: var(--border-primary);
}

#cardModal .pilot-carousel-title {
    color: var(--text-primary);
}

#cardModal .pilot-caption {
    color: var(--text-primary);
}

/* Modal description and sections */
#cardModal .modal-card-description {
    background: var(--bg-section) !important;
    border-left-color: var(--color-primary);
}

#cardModal .modal-card-description p {
    color: var(--text-primary);
}

#cardModal .modal-linking-section,
#cardModal .modal-source-section,
#modalLinkableSection,
#modalCompatibleSection,
#modalLinkingSection,
#modalTokensSection,
#modalUnitsSection,
#modalSourceSection {
    background: var(--bg-section) !important;
    border-left-color: var(--color-success);
}

#cardModal .modal-linking-section .modal-label,
#cardModal .modal-source-section .modal-label {
    color: var(--text-primary);
}

#cardModal .modal-linking-section p,
#cardModal .modal-source-section p {
    color: var(--text-primary);
}

/* Modal card header */
#cardModal .modal-card-header h2 {
    color: var(--text-primary);
}

#cardModal .modal-card-number {
    color: var(--color-primary);
}

/* TCGPlayer Edit Button */
.tcg-edit-btn {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tcg-edit-btn:hover {
    background: var(--color-primary);
    color: white;
}

/* Navigation — handled by header.css / navigation.css Newtype v2 styles */
header {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
}

nav {
    background: transparent;
}

.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
    background: var(--hover-bg);
    color: var(--neon);
}

/* Dropdown menus in dark theme */
.dropdown-menu {
    background: var(--bg-container);
    border-color: var(--border-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.dropdown-menu a {
    color: var(--text-primary);
}

.dropdown-menu a:hover {
    background: var(--hover-bg);
    color: var(--neon);
}

/* Mobile navigation in dark theme */
.mobile-navigation {
    background: var(--bg-container);
}

.mobile-nav-link {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.mobile-nav-link:hover {
    background: var(--hover-bg);
}

.mobile-dropdown-toggle {
    color: var(--text-primary);
}

.mobile-dropdown-toggle:hover {
    background: var(--hover-bg);
}

.mobile-dropdown-menu {
    background: var(--bg-section);
}

.mobile-dropdown-menu a {
    color: var(--text-secondary);
}

.mobile-dropdown-menu a:hover {
    background: var(--hover-bg);
    color: var(--neon);
}

.mobile-nav-close {
    color: var(--text-secondary);
}

/* User menu dropdown */
#userDropdown {
    background: var(--bg-container);
    border-color: var(--border-strong);
}

#userDropdown a {
    color: var(--text-primary);
}

#userDropdown a:hover {
    background: var(--hover-bg);
    color: var(--neon);
}

/* Badges and labels */
.badge {
    background: #3a3a3a;
    border-color: #555555;
}

/* Keep rarity and color badges with their specific colors in dark theme */
/* The rounded corners need the colored background to avoid dark corners showing through */

/* Stats and progress */
.stat-card {
    background: #333333;
    border-color: #444444;
}

.stat-value {
    color: var(--text-primary);
}

.progress-bar {
    background: #2c2c2c;
}

.progress-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

/* Collection specific */
/* Set tiles (V3) are intentionally dark-themed in both modes — the full-bleed banner
   provides the visual, so no light/dark variant is needed. */

.progress-bar {
    background: #2c2c2c;
}

/* Set Detail View */
.set-detail {
    background: var(--bg-container);
}

.set-detail-header {
    border-bottom-color: var(--border-color);
}

.set-detail-title {
    color: var(--text-primary);
}

.back-button {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
}

.back-button:hover {
    background: var(--btn-secondary-bg-hover);
}

/* Set Analytics */
.set-analytics-container {
    background: var(--bg-container);
}

.set-analytics-container h3 {
    color: var(--text-primary);
}

.set-stats-grid .set-stat-card {
    background: var(--bg-section);
    border-left-color: var(--color-primary);
}

.set-value-card {
    border-left-color: var(--color-success);
}

.set-stat-card .stat-number {
    color: var(--text-primary);
}

.set-stat-card .stat-label {
    color: var(--text-primary);
}

.set-stat-card .stat-subtitle {
    color: var(--text-secondary);
}

.set-stat-card .progress-bar {
    background: #2c2c2c;
}

.set-stat-card .progress-text {
    color: var(--text-primary);
}

/* Rarity Breakdown */
.rarity-breakdown h4 {
    color: var(--text-primary);
}

.rarity-stat {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.rarity-label {
    color: var(--text-primary);
}

.rarity-progress {
    color: var(--text-secondary);
}

.mini-progress-bar {
    background: #2c2c2c;
}

/* Collection Controls */
.collection-controls {
    color: var(--text-primary);
}

.show-alt-art {
    color: var(--text-primary);
}

/* Deck builder specific */
.deck-card {
    background: #333333;
    border-color: #444444;
}

.deck-stats-panel {
    background: #333333;
    border-color: #444444;
}

.mana-curve-bar {
    background: #2c2c2c;
}

/* Trading lists */
.trade-card {
    background: #333333;
    border-color: #444444;
}

/* Admin panel */
.admin-panel {
    background: #333333;
}

.stat-card-admin {
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

/* Footer */
.site-footer {
    background: var(--bg-container);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

.footer-link {
    color: var(--text-secondary);
}

.footer-link:hover {
    color: var(--neon);
}

.social-link {
    background: var(--bg-section);
    border-color: var(--border-color);
}

/* Loading states */
.loading-spinner {
    background: rgba(44, 44, 44, 0.9);
}

.spinner {
    border-color: #444444;
    border-top-color: var(--color-primary);
}

/* Error states */
.error-message {
    background: #3a1a1a;
    border-color: var(--color-error);
    color: #ffcccc;
}

.no-results {
    color: var(--text-secondary);
}

/* Scrollbars (webkit browsers) */
::-webkit-scrollbar {
    background: var(--bg-body);
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-color: var(--bg-body);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon);
}

/* Image placeholders */
.image-placeholder {
    background: #3a3a3a !important;
}

.image-placeholder span {
    color: var(--text-secondary) !important;
}

/* Profile modal specific */
.profile-section {
    background: #333333;
    border-color: #444444;
}

.help-text {
    color: var(--text-muted);
}

.danger-zone {
    background: #3a1a1a;
    border-color: #a04040;
}

/* ========================================
   ADDITIONAL PANEL & ELEMENT FIXES
   ======================================== */

/* All white panels/cards */
.panel,
.info-panel,
.stats-panel,
.content-panel,
.sidebar-panel,
.info-card,
.stats-card {
    background: var(--bg-container);
    border-color: var(--border-color);
}

/* Results info bar */
.results-info {
    background: transparent;
    color: var(--text-primary);
}

/* Infinite scroll loader */
.infinite-scroll-loader p {
    color: var(--text-secondary);
}

.infinite-scroll-loader .loader-spinner {
    border-color: var(--border-color);
    border-top-color: var(--color-primary);
}

/* View options */
.view-options label {
    color: var(--text-primary);
}

/* Auth/Login elements */
.auth-container,
.login-box {
    background: var(--bg-container);
    border-color: var(--border-color);
}

/* Notification toasts */
.notification,
.toast {
    background: #333333;
    border-color: #555555;
    color: var(--text-primary);
}

.notification.success,
.toast-success {
    background: var(--color-success, #27ae60) !important;
    border-color: var(--color-success);
    color: white;
}

.notification.error,
.toast-error {
    background: var(--color-error, #e74c3c) !important;
    border-color: var(--color-error);
    color: white;
}

.toast-warning {
    background: var(--color-warning, #f39c12) !important;
    color: white;
}

.toast-info {
    background: var(--color-primary, #3498db) !important;
    color: white;
}

/* Tabs */
.tabs,
.tab-list {
    background: transparent;
    border-bottom-color: #444444;
}

.tab {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.tab:hover {
    background: #3a3a3a;
    color: var(--text-primary);
}

.tab.active {
    background: var(--bg-container);
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-bottom-color: transparent;
}

/* Form elements in panels */
.form-group,
.input-group {
    background: transparent;
}

.form-label {
    color: var(--text-primary);
}

/* White overlays */
.overlay,
.backdrop {
    background: rgba(0, 0, 0, 0.8);
}

/* Pagination */
.pagination {
    background: transparent;
}

.pagination button,
.pagination a {
    background: #333333;
    border-color: #555555;
    color: var(--text-primary);
}

.pagination button:hover,
.pagination a:hover {
    background: #3a3a3a;
    border-color: var(--color-primary);
}

.pagination button.active,
.pagination a.active {
    background: var(--color-primary);
    color: white;
}

/* Charts and graphs */
.chart-container,
.graph-panel {
    background: var(--bg-container);
}

.chart-legend {
    color: var(--text-primary);
}

/* Info boxes */
.info-box,
.alert-box {
    background: #3a3a3a;
    border-color: #555555;
    color: var(--text-primary);
}

.info-box.info {
    background: #1e3a4d;
    border-color: var(--color-primary);
}

.info-box.warning {
    background: #4d3a1e;
    border-color: var(--color-warning);
}

/* User profile avatar */
.profile-avatar,
.user-avatar {
    border-color: #555555;
}

/* Dividers */
hr,
.divider {
    border-color: #444444;
}

/* Code blocks */
code,
pre {
    background: #2c2c2c;
    color: #e0e0e0;
    border-color: #444444;
}

/* Tooltips */
.tooltip {
    background: #333333;
    color: var(--text-primary);
    border-color: #555555;
}

/* Checkbox and radio custom styling */
input[type="checkbox"],
input[type="radio"] {
    border-color: #555555;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Select dropdowns */
select option {
    background: #333333;
    color: var(--text-primary);
}

/* ========================================
   PAGE-SPECIFIC PANEL FIXES
   ======================================== */

/* HOME PAGE - Feature items */
.feature-item {
    background: var(--bg-container);
    border-color: var(--border-color);
}

.feature-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.feature-item h3 {
    color: var(--text-primary);
}

.feature-item p {
    color: var(--text-secondary);
}

.features-overview h2 {
    color: var(--text-primary);
}

.updates-section {
    background: var(--bg-section);
    border-left-color: var(--color-success);
}

.updates-section h2 {
    color: var(--text-primary);
}

.update-card {
    background: var(--bg-container);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.update-content h3 {
    color: var(--text-primary);
}

.update-content p {
    color: var(--text-secondary);
}

/* ABOUT PAGE - Sections and feature cards */
.about-section {
    background: var(--bg-container);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.about-section h2,
.about-section h3 {
    color: var(--text-primary);
}

.about-content {
    color: var(--text-primary);
}

.feature-card {
    background: var(--bg-section);
    border-left-color: var(--color-primary);
}

.feature-card h3 {
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
}

.rules-summary {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.page-header {
    background: var(--bg-container);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.page-header h1 {
    color: var(--text-primary);
}

.page-description {
    color: var(--text-secondary);
}

/* ABOUT PAGE - Disclaimer box fix */
.disclaimer {
    background: #4d3a1e;
    border-left-color: var(--color-warning);
    color: #f0e6d2;
}

/* COLLECTION PAGE - Overview and stats */
.collection-overview {
    background: var(--bg-container);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.collection-overview h2 {
    color: var(--text-primary);
}

.stat-card {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.stat-card:hover {
    border-color: var(--color-primary);
}

/* DECK BUILDER - Info panel and deck panels */
.deck-info-panel {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.deck-title-section h2 {
    color: var(--text-primary);
}

.deck-stats {
    background: transparent;
}

.deck-stat-label {
    color: var(--text-secondary);
}

.deck-stat-value {
    color: var(--text-primary);
}

.deck-validation {
    background: var(--bg-section);
    border-color: var(--border-color);
}

/* Analytics toggle button */
.analytics-toggle-btn {
    background: rgba(52, 152, 219, 0.2);
    border-color: rgba(52, 152, 219, 0.5);
    color: #5dade2;
}

.analytics-toggle-btn:hover {
    background: rgba(52, 152, 219, 0.3);
    border-color: rgba(52, 152, 219, 0.7);
}

.analytics-toggle-btn.hidden-state {
    background: rgba(149, 165, 166, 0.2);
    border-color: rgba(149, 165, 166, 0.5);
    color: #95a5a6;
}

.analytics-toggle-btn.hidden-state:hover {
    background: rgba(149, 165, 166, 0.3);
    border-color: rgba(149, 165, 166, 0.7);
}

.deck-list-container {
    background: var(--bg-container);
}

.deck-card-item {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.deck-card-item:hover {
    background: #3a3a3a;
    border-color: var(--color-primary);
}

.deck-card-name {
    color: var(--text-primary);
}

.deck-card-number {
    color: var(--text-secondary);
}

/* DECK BUILDER - Analytics Section */
.deck-analytics {
    background: var(--bg-section);
    border-top-color: var(--border-color);
}

.deck-analytics h4 {
    color: var(--text-primary);
}

.analytics-chart {
    background: var(--bg-container);
    border-color: var(--border-color);
}

.analytics-chart h5 {
    color: var(--text-secondary);
}

.chart-bar {
    background: var(--color-primary);
}

.chart-bar:hover {
    background: var(--color-primary-dark);
}

.chart-bar-label {
    color: var(--text-secondary);
}

/* ANNOUNCEMENTS (Home page) */
#announcementsContainer .announcement-card {
    background: var(--bg-container);
    border-color: var(--border-color);
}

.announcement-title {
    color: var(--text-primary);
}

.announcement-content {
    color: var(--text-secondary);
}

.announcement-date {
    color: var(--text-muted);
}

/* ========================================
   ADMIN DASHBOARD
   ======================================== */

/* Admin sections */
.admin-section {
    background: var(--bg-container);
    border-left-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.section-header h2 {
    color: var(--text-primary);
}

.section-description {
    color: var(--text-secondary);
}

/* Admin buttons */
.admin-btn {
    background: var(--bg-section);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.admin-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* Admin forms */
.form-group label {
    color: var(--text-primary);
}

.form-input,
.form-textarea {
    background: var(--bg-section);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.2);
}

/* Users table */
.users-table-wrapper {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.users-table {
    color: var(--text-primary);
}

.users-table thead {
    background: var(--bg-section);
    color: var(--text-primary);
}

.users-table thead th {
    color: var(--text-primary);
    border-bottom-color: var(--border-primary);
}

.users-table tbody tr {
    border-bottom-color: var(--border-primary);
}

.users-table tbody tr:hover {
    background: var(--bg-section);
}

.users-table tbody td {
    color: var(--text-primary);
}

/* Sets management */
.sets-list-wrapper {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.sets-table {
    color: var(--text-primary);
}

.sets-table thead {
    background: var(--bg-section);
    border-bottom-color: var(--border-primary);
}

.sets-table thead th {
    color: var(--text-primary);
}

.sets-table tbody tr {
    border-bottom-color: var(--border-primary);
}

.sets-table tbody tr:hover {
    background: var(--bg-section);
}

.sets-table tbody td {
    color: var(--text-primary);
}

.set-form {
    background: var(--bg-container);
    border-color: var(--border-primary);
}

/* Products management */
.products-list-wrapper {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.products-table {
    color: var(--text-primary);
}

.products-table thead {
    background: var(--bg-section);
    border-bottom-color: var(--border-primary);
}

.products-table thead th {
    color: var(--text-primary);
}

.products-table tbody tr {
    border-bottom-color: var(--border-primary);
}

.products-table tbody tr:hover {
    background: var(--bg-section);
}

.products-table tbody td {
    color: var(--text-primary);
}

.product-form {
    background: var(--bg-container);
    border-color: var(--border-primary);
}

.product-cards-table-wrapper {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.product-cards-table {
    color: var(--text-primary);
}

.product-cards-table thead {
    background: var(--bg-section);
    border-bottom-color: var(--border-primary);
}

.product-cards-table thead th {
    color: var(--text-primary);
}

.product-cards-table tbody tr {
    border-bottom-color: var(--border-primary);
}

.product-cards-table tbody tr:hover {
    background: var(--bg-section);
}

.product-cards-table tbody td {
    color: var(--text-primary);
}

/* Scraper modal */
.scraper-status {
    background: var(--bg-section);
    border-color: var(--border-primary);
}

.scraper-output {
    background: var(--bg-section);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.users-search .form-input {
    background: var(--bg-section);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

/* ========================================
   DECK BUILDER PANELS
   ======================================== */

/* Card browser panel */
.card-browser-panel {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.current-deck-panel {
    background: var(--bg-container);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.deck-panel-header {
    border-bottom-color: var(--border-color);
}

.deck-panel-header h3 {
    color: var(--text-primary);
}

.clear-deck-btn,
.validate-btn {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.mobile-header-save-btn {
    background: var(--bg-section);
    border-color: var(--color-primary, #3498db);
    color: var(--color-primary, #3498db);
}

.mobile-header-save-btn:active {
    background: var(--color-primary, #3498db);
    color: white;
}

.deck-list-container {
    background: transparent;
}

.deck-inline-fields {
    background: transparent;
    border: none;
}

.deck-card-item {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.deck-card-item:hover {
    background: #3a3a3a;
    border-color: var(--color-primary);
}

.deck-card-quantity {
    color: var(--color-primary);
}

.deck-card-name {
    color: var(--text-primary);
}

.deck-card-number {
    color: var(--text-secondary);
}

.card-item-deck {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.card-item-deck:hover {
    background: #3a3a3a;
    border-color: var(--color-primary);
}

.view-btn {
    background: var(--bg-section);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* ========================================
   MY DECKS & PUBLIC DECKS PAGES
   ======================================== */

/* Filter section */
.deck-filters {
    background: var(--bg-container);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.deck-filters label {
    color: var(--text-primary);
}

/* Deck card actions background */
.deck-actions {
    border-top-color: var(--border-color);
}

.deck-action-btn {
    background: var(--bg-container);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.deck-action-btn.primary {
    background: var(--color-primary);
    color: white;
}

.deck-action-btn.primary:hover {
    background: var(--color-primary-dark);
}

.deck-action-btn:hover {
    background: #3a3a3a;
}

/* ========================================
   DECK CREATORS PAGE
   ======================================== */

.creators-results-section {
    background: var(--bg-container);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.creator-card {
    background: var(--bg-section);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.creator-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.creator-name {
    color: var(--text-primary);
}

.creator-stats {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

.stat-label {
    color: var(--text-secondary);
}

.stat-value {
    color: var(--color-primary);
}

.view-profile-btn {
    background: var(--color-primary);
}

.view-profile-btn:hover {
    background: var(--color-primary-dark);
}

/* ========================================
   DECK MODALS
   ======================================== */

/* Deck Statistics Row - scoped to modal only to avoid affecting deck page */
#deckModal .deck-stat-item {
    background: rgba(255, 255, 255, 0.05);
}

.deck-stat-item .stat-icon {
    color: var(--text-secondary);
}

.deck-stat-item .stat-value {
    color: var(--text-primary);
}

.deck-stat-item .stat-label {
    color: var(--text-secondary);
}

.deck-info-section {
    background: transparent;
}

.deck-metadata {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.deck-metadata .creator-details {
    color: var(--text-primary);
}

.deck-metadata .creator-name {
    color: var(--text-primary);
}

.deck-metadata .creation-date {
    color: var(--text-secondary);
}

.deck-description {
    color: var(--text-primary);
}

.deck-cards-section {
    background: transparent;
}

.cards-tabs {
    border-bottom-color: var(--border-color);
}

.tab-btn {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.tab-btn:hover {
    background: #3a3a3a;
    color: var(--text-primary);
}

.tab-btn.active {
    background: var(--bg-container);
    color: var(--color-primary);
    border-bottom-color: transparent;
}

.cards-list {
    background: transparent;
}

/* ========================================
   SEARCH & FILTER SECTIONS
   ======================================== */

.search-section {
    background: var(--bg-container);
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Inline Search Wrapper - handled by var(--input-bg) in search-enhanced.css */

.search-input-inline::placeholder {
    color: var(--text-muted);
}

.filter-toggle-btn {
    background: #666666;
}

.filter-toggle-btn:hover {
    background: #777777;
}

.clear-btn {
    background: #555555;
}

.clear-btn:hover {
    background: #666666;
}

.filter-tabs {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.filter-tab {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.filter-tab:hover {
    background: #3a3a3a;
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--color-primary);
    color: white;
    border-bottom-color: transparent;
}

/* ========================================
   COLLECTION TEXT VIEW HOVER FIX
   ======================================== */

/* Fix hover state for collection text view rows */
.collection-text-view .text-view-table tbody tr:hover {
    background-color: #3a3a3a;
}

/* ========================================
   MODAL CARD DETAILS FIX
   ======================================== */

/* Fix modal info sections that may have light backgrounds */
.modal-card-info,
.modal-stats {
    background: transparent;
}

.modal-info-item {
    background: transparent;
}

/* Ensure all modal content sections use dark theme */
.modal-content-section {
    background: transparent;
}

/* Modal stat items */
.modal-stat-item {
    background: var(--bg-section);
    border-color: var(--border-color);
}

/* Modal sections with white backgrounds */
.modal-section {
    background: transparent;
}

.modal-divider {
    border-color: var(--border-color);
}

/* Modal Price Section */
.modal-price-section,
#modalPriceSection {
    background: var(--bg-section) !important;
}

.price-section-header h4 {
    color: var(--text-primary);
}

.price-main {
    background: var(--bg-container);
}

.price-detail-label {
    color: var(--text-secondary);
}

.price-detail-value {
    color: var(--text-primary);
}

.tcgplayer-buy-btn {
    background: #3498db;
    color: white;
}

.tcgplayer-buy-btn:hover {
    background: #2980b9;
}

.market-price-link:hover .market-price-value {
    color: #3498db;
}

/* Modal Trading Section */
.modal-trading-section {
    background: transparent;
}

.trading-controls-compact,
#modalTradingSection .trading-controls-compact {
    background: var(--bg-section) !important;
}

.trading-label {
    color: var(--text-secondary);
}

.trading-compact-btn {
    background: var(--bg-container);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.trading-compact-btn:hover {
    background: #3a3a3a;
    border-color: var(--color-primary);
}

/* Trading Hub Page */
.trading-section {
    background: var(--bg-container);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.section-header h2 {
    color: var(--text-primary);
}

.section-description {
    color: var(--text-secondary);
}

.trading-card-enhanced {
    background: var(--bg-container);
    border-color: #444444;
}

.trading-card-enhanced:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.card-number,
.card-name {
    color: var(--text-primary);
}

.card-set {
    background: #3a3a3a;
    color: var(--text-primary);
}

.qty-btn {
    background: var(--bg-section);
    color: var(--text-primary);
    border-color: #555555;
}

.qty-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.qty-input {
    background: var(--bg-section);
    color: var(--text-primary);
    border-color: #555555;
}

.qty-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.trading-card-footer {
    border-top-color: #444444;
}

.quantity-label {
    color: var(--text-secondary);
}

.empty-list {
    background: var(--bg-section);
    border-color: #444444;
    color: var(--text-secondary);
}

.empty-state {
    background: var(--bg-container);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.empty-state h3 {
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-secondary);
}

.error {
    background: #3a1f1f;
    border-color: #e74c3c;
    color: #ff6b6b;
}

.card-price {
    background: #27ae60;
    color: white;
}

/* ========================================
   CARD BROWSER TILE FIXES
   ======================================== */

/* Fix card-details section background in card tiles */
.card-details {
    background: transparent;
}

/* Fix card stats badges in tiles */
.card-stats span {
    background: var(--bg-section);
    color: var(--text-primary);
}

/* ========================================
   MODAL PILOT CAROUSEL FIX
   ======================================== */

/* Fix pilot carousel light blue background */
.pilot-carousel {
    background: var(--bg-section);
    border-color: var(--border-color);
}

.pilot-carousel-title {
    color: var(--text-primary);
}

.pilot-image-container {
    background: var(--bg-container);
}

.pilot-image-container img {
    background: var(--bg-container);
}

.pilot-description {
    background: var(--bg-container);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* ========================================
   BATCH IMPORT MODAL
   ======================================== */

/* Import instructions section */
.import-instructions {
    background-color: #1e3a4d;
    border-left-color: var(--color-primary);
}

.import-instructions p,
.import-instructions ol,
.import-instructions li {
    color: var(--text-primary);
}

/* Template download section */
.template-download-section {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

/* File upload section */
.file-upload-label {
    color: var(--text-primary);
}

.file-input {
    border-color: #555555;
    background-color: var(--bg-section);
    color: var(--text-primary);
}

.file-input:hover {
    border-color: var(--color-primary);
    background-color: #3a3a3a;
}

.file-name-display {
    background-color: #1e4d2b;
    color: var(--color-success);
}

/* Import warnings */
.import-warnings {
    background-color: #4d3a1e;
    border-left-color: var(--color-warning);
}

.import-warnings h4,
.import-warnings ul,
.import-warnings li {
    color: #f0e6d2;
}

/* Product select dropdown */
.product-select {
    background-color: var(--bg-section);
    border-color: #555555;
    color: var(--text-primary);
}

.product-select:focus {
    border-color: var(--color-primary);
    background-color: #3a3a3a;
}

.product-select:disabled {
    background-color: #2c2c2c;
    color: #666666;
}

/* Import info box */
.import-info {
    background-color: #1e4d2b;
    border-left-color: var(--color-success);
}

.import-info p {
    color: var(--text-primary);
}

/* Card preview section */
.card-preview-section {
    background-color: var(--bg-section);
    border-color: var(--border-color);
}

.card-preview-section h4 {
    color: var(--text-primary);
}

.card-preview-list {
    background-color: var(--bg-container);
    border-color: var(--border-color);
}

.card-preview-item {
    border-bottom-color: #444444;
}

.card-preview-item:hover {
    background-color: var(--bg-section);
}

.card-preview-number,
.card-preview-name {
    color: var(--text-primary);
}

.card-preview-loading {
    color: var(--text-secondary);
}

.card-preview-error {
    background-color: #3a1a1a;
    color: #ff6b6b;
}

/* ============================================
   Deck Builder - Current Deck Grid Cards
   ============================================ */
.deck-grid-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.deck-grid-card:hover {
    background: var(--hover-bg);
    border-color: var(--color-primary);
}

.deck-grid-image {
    background: var(--bg-section);
}

.deck-grid-placeholder {
    background: var(--bg-section);
    color: var(--text-muted);
}

/* Current deck controls - positioned below image */
.deck-grid-card .card-deck-controls {
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}

.deck-grid-card .quantity-btn {
    background: var(--color-primary);
    color: white;
}

.deck-grid-card .quantity-btn:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.deck-grid-card .quantity-btn:disabled {
    background: #444;
    color: #666;
}

.deck-grid-card .quantity-display,
.deck-grid-card .quantity-display-alt {
    color: var(--text-color);
}

/* List view dark theme */
.deck-card-controls-wrapper {
    background: transparent;
}

.deck-card-controls-wrapper .quantity-btn {
    background: var(--color-primary);
    color: white;
}

.deck-card-controls-wrapper .quantity-btn:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.deck-card-controls-wrapper .quantity-btn:disabled {
    background: #444;
    color: #666;
}

/* ============================================
   Quick Filters - Dark Theme
   ============================================ */

/* Filters drawer container */
.filters-drawer {
    background: var(--bg-container);
    border-color: var(--border-color);
}

.quick-filter-label {
    color: var(--text-primary);
}

.quick-filter-btn {
    background: var(--bg-section);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.quick-filter-select {
    background: var(--bg-section);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.quick-filter-select:hover {
    border-color: var(--color-primary);
    background: #3a3a3a;
}

.quick-filter-select:focus {
    border-color: var(--color-primary);
    background: #3a3a3a;
}

.clear-filters-btn {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.clear-filters-btn:hover {
    background: var(--btn-secondary-bg-hover);
}

.quick-filter-btn:hover:not(.active) {
    background: var(--hover-bg);
    border-color: var(--color-primary);
}

.quick-filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Color-specific dark theme (colors remain the same) */
.color-filter[data-value="Blue"].active {
    background: var(--card-color-blue);
    border-color: var(--card-color-blue);
}

.color-filter[data-value="Green"].active {
    background: var(--card-color-green);
    border-color: var(--card-color-green);
}

.color-filter[data-value="Red"].active {
    background: var(--card-color-red);
    border-color: var(--card-color-red);
}

.color-filter[data-value="Purple"].active {
    background: var(--card-color-purple);
    border-color: var(--card-color-purple);
}

.color-filter[data-value="White"].active {
    background: #ecf0f1;
    border-color: #bdc3c7;
    color: #333;
}

/* Mobile Bottom Tabs - Dark Theme */
.mobile-bottom-tabs {
    background: #2c2c2c;
    border-top-color: #444444;
}

.mobile-tab-button {
    color: #999999;
}

.mobile-tab-button.active {
    color: var(--color-primary, #3498db);
}


/* Mobile Deck Header - Dark Theme */
.mobile-deck-header {
    background: #2c2c2c;
    border-bottom-color: #444444;
}

.mobile-deck-title {
    color: var(--text-primary);
}

.mobile-deck-menu-btn {
    color: #999999;
}

.mobile-deck-menu-btn:active {
    color: var(--color-primary, #3498db);
}

/* Menu Dropdowns - Dark Theme */
.menu-dropdown,
.deck-menu-dropdown,
.deck-modal-menu-dropdown {
    background: #2c2c2c;
    border-color: #444444;
}

/* Mobile Menu - Dark Theme */
.mobile-menu-dropdown {
    background: #2c2c2c;
}

.mobile-menu-header {
    border-bottom-color: #444444;
}

.mobile-menu-header h3 {
    color: var(--text-primary);
}

.mobile-menu-close {
    color: #999999;
}

.mobile-menu-close:active {
    color: var(--text-primary);
}

.mobile-menu-item {
    background: #2c2c2c;
    border-bottom-color: #444444;
    color: var(--text-primary);
}

.mobile-menu-item:active {
    background: #3a3a3a;
}

.mobile-menu-item.delete {
    color: #e74c3c;
}

/* ========================================
   COLLECTION SHARING SECTION
   ======================================== */

/* Collection sharing cards - match set-card styling */
.sharing-card {
    background: #333333;
    border-color: #444444;
}

.sharing-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sharing-card h3 {
    color: var(--text-primary);
}

/* Share items within cards */
.share-item {
    background: var(--bg-container);
    border-color: var(--border-color);
}

/* Input fields in sharing section */
.invite-form .input-field {
    background: #3a3a3a;
    border-color: #555555;
    color: var(--text-primary);
}

.invite-form .input-field:focus {
    border-color: var(--color-primary);
    background: #404040;
}

/* ========================================
   NOTIFICATION BELL
   ======================================== */

.notification-bell {
    background: transparent;
}

.notification-bell:focus {
    background: transparent;
}

.notification-bell:hover {
    background: rgba(255, 255, 255, 0.1);
}

.notification-dropdown {
    background: #2a2a2a;
    border-color: #444444;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.notification-header {
    border-bottom-color: #444444;
}

.notification-item {
    border-bottom-color: #444444;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notification-message {
    background: #1e1e1e;
    border-left-color: var(--color-primary);
}

.notification-actions .btn-decline {
    background: #3a3a3a;
    border-color: #555555;
    color: var(--text-secondary);
}

.notification-actions .btn-decline:hover:not(:disabled) {
    background: #444444;
}

.notification-toast {
    background: #2a2a2a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.notification-list::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.notification-list::-webkit-scrollbar-thumb {
    background: #555555;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background: #666666;
}