/* CSS Root Variables */
:root {
    --primary-color: #f0b429;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #5ec8d4;
    --light-color: #f6f0e3;
    --dark-color: #0a2433;
}

/* Dark mode variables */
:root[data-theme="dark"] {
    --bg-primary: #0a2433;
    --bg-secondary: #123445;
    --bg-tertiary: #1b4a60;
    --text-primary: #f6f0e3;
    --text-secondary: #c5d0d4;
    --border-color: #2a5a70;
    --input-bg: #123445;
    --input-border: #2a5a70;
    --input-text: #f6f0e3;
    --btn-primary-bg: #f0b429;
    --btn-primary-hover: #ffc94a;
    --btn-secondary-bg: #1b4a60;
    --btn-secondary-hover: #2a5a70;
    --btn-danger-bg: #dc3545;
    --btn-danger-hover: #bb2d3b;
    --btn-warning-bg: #ffbf5e;
    --btn-warning-hover: #f0b429;
    --btn-success-bg: #2a8a96;
    --btn-success-hover: #247a84;
    --btn-outline-primary: #f0b429;
    --btn-outline-primary-hover: #ffc94a;
    --btn-outline-danger: #dc3545;
    --btn-outline-danger-hover: #bb2d3b;
    --btn-outline-warning: #ffbf5e;
    --btn-outline-warning-hover: #f0b429;
    --btn-outline-success: #5ec8d4;
    --btn-outline-success-hover: #2a8a96;
    --card-bg: #123445;
    --card-border: #2a5a70;
    --table-bg: #123445;
    --table-border: #2a5a70;
    --table-stripe: #1b4a60;
    --alert-bg: #123445;
    --alert-border: #2a5a70;
    --alert-text: #f6f0e3;
    --badge-bg: #1b4a60;
    --badge-text: #f6f0e3;
    --link-color: #5ec8d4;
    --link-hover: #ffc94a;
    --mark-bg: #f0b429;
    --mark-text: #0a2433;
}

/* Base styles */
:root[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Navbar */
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] .navbar.bg-dark {
    background-color: var(--bg-primary) !important;
    border-bottom: 1px solid rgba(240, 180, 41, 0.35);
}

:root[data-theme="dark"] .navbar-dark .navbar-brand {
    color: var(--hc-gold, #f0b429) !important;
}

:root[data-theme="dark"] .navbar-dark .nav-link {
    color: rgba(246, 240, 227, 0.85);
}

:root[data-theme="dark"] .navbar-dark .nav-link:hover,
:root[data-theme="dark"] .navbar-dark .nav-link:focus {
    color: var(--hc-gold, #f0b429);
}

/* Cards */
:root[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

:root[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

/* Tables */
:root[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--table-border);
}

:root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

:root[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--bg-tertiary);
}

/* Ensure table headers and cells have appropriate background and border in dark mode */
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
    background-color: var(--table-bg); /* Explicitly set cell background */
    border-color: var(--table-border); /* Ensure borders use the dark theme color */
    color: var(--text-primary); /* Ensure text color is appropriate */
}

:root[data-theme="dark"] .table thead th {
    background-color: var(--bg-tertiary); /* Slightly different background for headers */
    border-bottom-width: 2px; /* Make header bottom border more prominent */
}

/* Forms */
:root[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

:root[data-theme="dark"] .form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--btn-primary-bg);
    color: var(--input-text);
}

:root[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* Buttons */
:root[data-theme="dark"] .btn {
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: #c45a1a;
    color: #0a2433;
}

:root[data-theme="dark"] .btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: #0a2433;
}

:root[data-theme="dark"] .btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-bg);
    color: #000000;
}

:root[data-theme="dark"] .btn-warning:hover {
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-hover);
    color: #000000;
}

:root[data-theme="dark"] .btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-bg);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-success:hover {
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-outline-primary {
    color: var(--btn-outline-primary);
    border-color: var(--btn-outline-primary);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--btn-outline-primary);
    border-color: var(--btn-outline-primary-hover);
    color: #0a2433;
}

:root[data-theme="dark"] .btn-outline-danger {
    color: var(--text-primary);
    border-color: var(--btn-outline-danger);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-danger:hover {
    background-color: var(--btn-outline-danger);
    border-color: var(--btn-outline-danger-hover);
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-outline-warning {
    color: #000000;
    border-color: var(--btn-outline-warning);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-warning:hover {
    background-color: var(--btn-outline-warning);
    border-color: var(--btn-outline-warning-hover);
    color: #000000;
}

:root[data-theme="dark"] .btn-outline-success {
    color: var(--text-primary);
    border-color: var(--btn-outline-success);
    background-color: transparent;
}

:root[data-theme="dark"] .btn-outline-success:hover {
    background-color: var(--btn-outline-success);
    border-color: var(--btn-outline-success-hover);
    color: var(--text-primary);
}

/* Alerts */
:root[data-theme="dark"] .alert {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
    color: var(--alert-text);
}

/* Custom styling for alert-success in dark mode to make it more prominent */
:root[data-theme="dark"] .alert-success {
    background-color: #1c4a36; /* A darker, desaturated green */
    border-color: #2a6b4d;    /* A slightly lighter green for border */
    color: #e6fff2;           /* Light green/white text for good contrast */
}

:root[data-theme="dark"] .alert-success .alert-link {
    color: #a6ffc9; /* Brighter green for links within the success alert */
}

:root[data-theme="dark"] .alert-success hr {
    border-top-color: #2a6b4d; /* Match hr color with border */
}

/* Badges */
:root[data-theme="dark"] .badge {
    background-color: var(--badge-bg);
    color: var(--badge-text);
}

/* Links */
:root[data-theme="dark"] a {
    color: var(--link-color);
}

:root[data-theme="dark"] a:hover {
    color: var(--link-hover);
}

/* Text colors */
:root[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

/* Answer backgrounds */
:root[data-theme="dark"] .answer {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .answer:nth-child(even) {
    background-color: var(--bg-secondary) !important;
}

/* Theme toggle button specific styles */
#theme-toggle {
    color: rgba(255, 255, 255, 0.55); /* Standard Bootstrap color for nav-link on navbar-dark */
    background-color: transparent;
    border: none;
    font-size: 1.2rem; /* Adjust size as needed */
}

#theme-toggle:hover {
    color: rgba(255, 255, 255, 0.75); /* Standard Bootstrap hover color for nav-link on navbar-dark */
}

#theme-toggle i {
    transition: transform 0.3s ease;
}

:root[data-theme="dark"] #theme-toggle {
    color: var(--text-primary); /* Ensure icon color is correct in dark mode */
}

:root[data-theme="dark"] #theme-toggle:hover {
    color: var(--link-hover); /* Or your preferred dark mode hover color */
}

/* Marked text */
:root[data-theme="dark"] mark {
    background-color: var(--mark-bg);
    color: var(--mark-text);
}

/* Modal */
:root[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
}

:root[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Dropdown menus */
:root[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

:root[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* List groups */
:root[data-theme="dark"] .list-group-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Pagination */
:root[data-theme="dark"] .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

/* Tooltips */
:root[data-theme="dark"] .tooltip {
    --bs-tooltip-bg: var(--bg-tertiary);
    --bs-tooltip-color: var(--text-primary);
}

/* Popovers */
:root[data-theme="dark"] .popover {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .popover-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .popover-body {
    color: var(--text-primary);
}

/* Small action buttons */
:root[data-theme="dark"] .btn-sm.btn-outline-primary {
    color: #0a2433;
    border-color: var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
}

:root[data-theme="dark"] .btn-sm.btn-outline-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: #0a2433;
}

:root[data-theme="dark"] .btn-sm.btn-outline-danger {
    color: var(--text-primary);
    border-color: var(--btn-danger-bg);
    background-color: var(--btn-danger-bg);
}

:root[data-theme="dark"] .btn-sm.btn-outline-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--text-primary);
}

/* Float-end buttons in cards */
:root[data-theme="dark"] .card .float-end .btn {
    margin-left: 0.5rem;
}

:root[data-theme="dark"] .card .float-end .btn-outline-primary {
    color: var(--text-primary);
    border-color: var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
}

:root[data-theme="dark"] .card .float-end .btn-outline-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: var(--text-primary);
}

:root[data-theme="dark"] .card .float-end .btn-outline-danger {
    color: var(--text-primary);
    border-color: var(--btn-danger-bg);
    background-color: var(--btn-danger-bg);
}

:root[data-theme="dark"] .card .float-end .btn-outline-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
    color: var(--text-primary);
}

/* Customizations for specific page elements and refined general overrides */

:root[data-theme="dark"] .form-label {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .alert-danger {
    background-color: #5c1a1a;
    color: #f8d7da;
    border-color: #541818;
}

:root[data-theme="dark"] .badge.bg-secondary {
    background-color: #5A6268 !important; /* Specific dark mode color for secondary badges */
    color: var(--text-primary);
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Styling for hostsContainer and guestsContainer on edit_episode.php */
:root[data-theme="dark"] #hostsContainer,
:root[data-theme="dark"] #guestsContainer {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] #hostsContainer .form-check-label,
:root[data-theme="dark"] #guestsContainer .form-check-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] #hostsContainer .form-check,
:root[data-theme="dark"] #guestsContainer .form-check {
    color: var(--text-primary);
}

/* Participant items styling for dark mode */
:root[data-theme="dark"] .participant-item {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .participant-item strong {
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .participant-item .text-muted {
    color: var(--text-secondary) !important;
}

/* Ensure proper text contrast in dark mode */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .card-title {
    color: var(--hc-gold, #f0b429);
}

:root[data-theme="dark"] .table th {
    color: var(--text-primary);
}

:root[data-theme="dark"] .table td {
    color: var(--text-primary);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary);
}

:root[data-theme="dark"] .form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Ensure proper contrast for search highlighting */
:root[data-theme="dark"] .search-content mark {
    background-color: #ffd700;
    color: #000000;
    padding: 0.1em 0.2em;
    border-radius: 3px;
}

/* Ensure proper contrast for badges */
:root[data-theme="dark"] .badge.bg-primary {
    background-color: var(--btn-primary-bg) !important;
    color: #0a2433;
}

:root[data-theme="dark"] .badge.bg-success {
    background-color: var(--btn-success-bg) !important;
    color: var(--text-primary);
}

:root[data-theme="dark"] .badge.bg-info {
    background-color: var(--info-color) !important;
    color: #0a2433;
}

:root[data-theme="dark"] .badge.bg-warning {
    background-color: var(--btn-warning-bg) !important;
    color: #000000;
}

:root[data-theme="dark"] .badge.bg-danger {
    background-color: var(--btn-danger-bg) !important;
    color: var(--text-primary);
}

/* Dark mode support for sortable containers (edit_episode.php) */
:root[data-theme="dark"] .sortable-container {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .sortable-container .form-check {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

:root[data-theme="dark"] .sortable-container .form-check:hover {
    background-color: var(--bg-primary);
}

:root[data-theme="dark"] .sortable-container .form-check.ui-sortable-helper {
    background-color: var(--bg-primary);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .sortable-container .form-check-label {
    color: var(--text-primary);
}

:root[data-theme="dark"] .sortable-container .badge {
    color: var(--text-primary);
}

/* Dark mode support for episode page */
:root[data-theme="dark"] .drag-handle {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

:root[data-theme="dark"] .drag-handle:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

:root[data-theme="dark"] .question-item.ui-sortable-helper {
    background-color: var(--card-bg);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); /* Standard dark shadow */
}

/* Dark mode overrides for intro box */
:root[data-theme="dark"] .intro-box {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* Ensure all parts of the intro-table are transparent to show the .intro-box background */
:root[data-theme="dark"] .intro-box .intro-table,
:root[data-theme="dark"] .intro-box .intro-table thead,
:root[data-theme="dark"] .intro-box .intro-table tbody,
:root[data-theme="dark"] .intro-box .intro-table tr,
:root[data-theme="dark"] .intro-box .intro-table th,
:root[data-theme="dark"] .intro-box .intro-table td {
    background-color: transparent !important;
    color: var(--text-primary) !important; /* Default text color for table content */
    border-color: var(--card-border) !important; /* Match border color if any borders are still visible due to specificity */
}

:root[data-theme="dark"] .intro-box .intro-table .host-label {
    color: var(--hc-gold, #f0b429) !important;
    font-weight: 500;
}

:root[data-theme="dark"] .intro-box .intro-table .intro-text {
    color: var(--text-primary) !important; /* Ensure intro text also uses primary text color */
}

@media (max-width: 767.98px) {
    :root[data-theme="dark"] .intro-table tr {
        border-bottom-color: var(--border-color);
    }
}

/* Dark mode styling for introduction display */
:root[data-theme="dark"] .introduction-display {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

:root[data-theme="dark"] .guest-tour-tooltip {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

:root[data-theme="dark"] .guest-tour-progress {
    color: var(--text-secondary);
}