/* Global Theme Styles - Dark Mode Support */

/* CSS Variables for Light Mode (default) */
:root {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;
    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #adb5bd;
    --theme-border-color: #dee2e6;
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-shadow-lg: rgba(0, 0, 0, 0.15);
}

/* Dark Mode Variables */
.dark-mode,
[data-theme="dark"] {
    --theme-bg-primary: #212529;
    --theme-bg-secondary: #343a40;
    --theme-bg-tertiary: #495057;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #adb5bd;
    --theme-text-muted: #6c757d;
    --theme-border-color: #495057;
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-shadow-lg: rgba(0, 0, 0, 0.5);
}

/* Apply theme colors to body and main elements */
body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode adjustments for common elements */
.dark-mode .page-container,
[data-theme="dark"] .page-container {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* Cards and containers */
.dark-mode .card,
[data-theme="dark"] .card {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

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

/* Form elements */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="time"],
.dark-mode textarea,
.dark-mode select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="time"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="password"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: var(--theme-bg-secondary);
    border-color: var(--bs-primary, #0d6efd);
    color: var(--theme-text-primary);
}

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

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

.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td,
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--theme-bg-secondary);
}

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

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

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

/* Borders */
.dark-mode .border,
[data-theme="dark"] .border {
    border-color: var(--theme-border-color) !important;
}

.dark-mode .border-top,
[data-theme="dark"] .border-top {
    border-top-color: var(--theme-border-color) !important;
}

.dark-mode .border-bottom,
[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--theme-border-color) !important;
}

.dark-mode .border-start,
[data-theme="dark"] .border-start {
    border-left-color: var(--theme-border-color) !important;
}

.dark-mode .border-end,
[data-theme="dark"] .border-end {
    border-right-color: var(--theme-border-color) !important;
}

/* Background colors */
.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-secondary) !important;
}

.dark-mode .bg-white,
[data-theme="dark"] .bg-white {
    background-color: var(--theme-bg-primary) !important;
}

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

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

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

/* Modals */
.dark-mode .modal-content,
[data-theme="dark"] .modal-content {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

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

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

/* Alerts */
.dark-mode .alert,
[data-theme="dark"] .alert {
    border-color: var(--theme-border-color);
}

.dark-mode .alert-light,
[data-theme="dark"] .alert-light {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

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

.dark-mode .list-group-item-action:hover,
.dark-mode .list-group-item-action:focus,
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--theme-bg-tertiary);
    color: var(--theme-text-primary);
}

/* Navbar */
.dark-mode .navbar,
[data-theme="dark"] .navbar {
    background-color: var(--theme-bg-secondary) !important;
    border-bottom-color: var(--theme-border-color);
}

/* Sidebar */
.dark-mode .sidebar,
[data-theme="dark"] .sidebar {
    background-color: var(--theme-bg-secondary);
    border-right-color: var(--theme-border-color);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Override for elements that shouldn't transition */
.dark-mode img,
.dark-mode svg,
.dark-mode video,
[data-theme="dark"] img,
[data-theme="dark"] svg,
[data-theme="dark"] video {
    transition: none;
}

/* =============================================================================
   GENERAL DARK MODE OVERRIDES FOR ALL PAGES
   ============================================================================= */

/* General background overrides */
.dark-mode .bg-white,
[data-theme="dark"] .bg-white {
    background-color: var(--theme-bg-secondary, #343a40) !important;
}

.dark-mode .bg-light,
[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-tertiary, #495057) !important;
}

/* General text color overrides */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--theme-text-primary, #ffffff);
}

/* General link colors */
.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item),
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--bs-primary, #0d6efd);
}

.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover,
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--bs-primary, #0d6efd);
    opacity: 0.8;
}

/* General container backgrounds */
.dark-mode .container,
.dark-mode .container-fluid,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: transparent;
}

/* General section backgrounds */
.dark-mode section:not(.hero-marketing-section):not(.hero-logged-in-section):not(.problems-section),
[data-theme="dark"] section:not(.hero-marketing-section):not(.hero-logged-in-section):not(.problems-section) {
    background-color: var(--theme-bg-primary, #212529);
}

/* General badge and label colors */
.dark-mode .badge,
[data-theme="dark"] .badge {
    color: var(--theme-text-primary, #ffffff);
}

/* General code and pre blocks */
.dark-mode code,
.dark-mode pre,
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
    border-color: var(--theme-border-color, #495057);
}

/* General hr (horizontal rule) */
.dark-mode hr,
[data-theme="dark"] hr {
    border-color: var(--theme-border-color, #495057);
    opacity: 0.5;
}

/* General blockquote */
.dark-mode blockquote,
[data-theme="dark"] blockquote {
    border-left-color: var(--theme-border-color, #495057);
    color: var(--theme-text-secondary, #adb5bd);
}

/* General breadcrumb */
.dark-mode .breadcrumb,
[data-theme="dark"] .breadcrumb {
    background-color: var(--theme-bg-secondary, #343a40);
}

.dark-mode .breadcrumb-item a,
[data-theme="dark"] .breadcrumb-item a {
    color: var(--theme-text-secondary, #adb5bd);
}

.dark-mode .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--theme-text-primary, #ffffff);
}

/* General pagination */
.dark-mode .pagination .page-link,
[data-theme="dark"] .pagination .page-link {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .pagination .page-link:hover,
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--theme-bg-tertiary, #495057);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .pagination .page-item.active .page-link,
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

/* General progress bars */
.dark-mode .progress,
[data-theme="dark"] .progress {
    background-color: var(--theme-bg-tertiary, #495057);
}

/* General tooltips */
.dark-mode .tooltip .tooltip-inner,
[data-theme="dark"] .tooltip .tooltip-inner {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
}

/* General popovers */
.dark-mode .popover,
[data-theme="dark"] .popover {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
}

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

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

/* General accordion */
.dark-mode .accordion-item,
[data-theme="dark"] .accordion-item {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
}

.dark-mode .accordion-button,
[data-theme="dark"] .accordion-button {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .accordion-button:not(.collapsed),
[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--theme-bg-tertiary, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .accordion-body,
[data-theme="dark"] .accordion-body {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

/* General offcanvas */
.dark-mode .offcanvas,
[data-theme="dark"] .offcanvas {
    background-color: var(--theme-bg-secondary, #343a40);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .offcanvas-header,
[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--theme-border-color, #495057);
}

/* General carousel */
.dark-mode .carousel,
[data-theme="dark"] .carousel {
    background-color: var(--theme-bg-secondary, #343a40);
}

/* General toasts */
.dark-mode .toast,
[data-theme="dark"] .toast {
    background-color: var(--theme-bg-secondary, #343a40);
    border-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}

.dark-mode .toast-header,
[data-theme="dark"] .toast-header {
    background-color: var(--theme-bg-tertiary, #495057);
    border-bottom-color: var(--theme-border-color, #495057);
    color: var(--theme-text-primary, #ffffff);
}