/* ================================================
   Dark Mode Theme for OpenBVE News
   ================================================ */

/* CSS Variables for easy theming */
:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #fafaf9;
    --bg-tertiary: #f8f9fa;
    --bg-dark: #07070f;
    --bg-footer: #07070f;
    --text-primary: #333333;
    --text-secondary: #797979;
    --text-muted: #7a7a7a;
    --text-light: #999999;
    --text-inverse: #ffffff;
    --border-color: #ebebeb;
    --border-color-secondary: #ced4da;
    --nav-bg: #ffffff;
    --card-bg: #e3e3e3;
    --card-bg-hover: #ffffff;
    --card-text: #333333;
    --accent-primary: #0a9fbb;
    --accent-secondary: #004c72;
    --link-color: #007bff;
    --link-hover: #0056b3;
    --shadow: rgba(0, 0, 0, 0.75);
    --shadow-light: rgba(0, 0, 0, 0.1);
}

/* Dark mode variables */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-tertiary: #333333;
    --bg-dark: #0d0d0d;
    --bg-footer: #0d0d0d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #999999;
    --text-light: #888888;
    --text-inverse: #ffffff;
    --border-color: #404040;
    --border-color-secondary: #505050;
    --nav-bg: #1f1f1f;
    --card-bg: #2a2a2a;
    --card-bg-hover: #333333;
    --card-text: #e0e0e0;
    --accent-primary: #0fb8d9;
    --accent-secondary: #006b8f;
    --link-color: #4da3ff;
    --link-hover: #66b3ff;
    --shadow: rgba(0, 0, 0, 0.9);
    --shadow-light: rgba(0, 0, 0, 0.3);
}

/* ================================================
   Contact Page Dark Mode - Subway Theme
   ================================================ */

[data-theme="dark"] .subway-page {
    background: var(--bg-primary);
}

[data-theme="dark"] .subway-header {
    background: #0d0d0d;
    border-left-color: #006b8f;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .subway-header h1 {
    color: #ffffff;
}

[data-theme="dark"] .subway-header p {
    color: #b0b0b0;
}

[data-theme="dark"] .subway-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .subway-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .subway-card-header {
    background: #0d0d0d;
    border-bottom-color: #006b8f;
}

[data-theme="dark"] .subway-card-header h2 {
    color: #ffffff;
}

[data-theme="dark"] .subway-card-body {
    background: var(--bg-secondary);
}

[data-theme="dark"] .contact-info-item {
    background: var(--bg-tertiary);
    border-left-color: #006b8f;
}

[data-theme="dark"] .contact-info-label {
    color: #ffffff;
}

[data-theme="dark"] .contact-info-value {
    color: var(--text-primary);
}

[data-theme="dark"] .social-links {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .social-link {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .social-link:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .social-link.youtube:hover {
    background: rgba(255, 0, 0, 0.1);
}

[data-theme="dark"] .social-link.discord:hover {
    background: rgba(88, 101, 242, 0.1);
}

[data-theme="dark"] .social-link.facebook:hover {
    background: rgba(0, 120, 255, 0.1);
}

[data-theme="dark"] .social-link span {
    color: var(--text-primary);
}

[data-theme="dark"] .subway-form {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .subway-form-header {
    background: #0d0d0d;
    border-bottom-color: #0039a6;
}

[data-theme="dark"] .subway-form-header h2 {
    color: #ffffff;
}

[data-theme="dark"] .subway-form-body {
    background: var(--bg-secondary);
}

[data-theme="dark"] .form-label {
    color: #ffffff;
}

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

[data-theme="dark"] .form-control-subway:focus {
    border-color: #0fb8d9;
}

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

[data-theme="dark"] .btn-subway {
    background: #0039a6;
    color: #ffffff;
}

[data-theme="dark"] .btn-subway:hover {
    background: #002a75;
    box-shadow: 0 4px 8px rgba(0, 57, 166, 0.5);
}

[data-theme="dark"] .alert-subway.success {
    background: rgba(0, 147, 60, 0.2);
    border-left-color: #00933c;
    color: #7be6a9;
}

[data-theme="dark"] .alert-subway.error {
    background: rgba(238, 53, 46, 0.2);
    border-left-color: #ee352e;
    color: #ff9999;
}

[data-theme="dark"] .about-section {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .about-section h2 {
    color: #ffffff;
    border-bottom-color: #006b8f;
}

[data-theme="dark"] .about-section p {
    color: var(--text-primary);
}

[data-theme="dark"] .about-section strong {
    color: #ffffff;
}

[data-theme="dark"] .about-section em {
    color: var(--text-secondary);
}

/* Direct email link styling */
[data-theme="dark"] .subway-form-body p {
    color: var(--text-secondary);
}

[data-theme="dark"] .subway-form-body a {
    color: #0fb8d9;
}

/* ================================================
   Support Page Dark Mode
   ================================================ */

[data-theme="dark"] #support-us {
    color: var(--text-primary);
}

[data-theme="dark"] #support-us h2,
[data-theme="dark"] #support-us h3 {
    color: #ffffff;
}

[data-theme="dark"] #support-us p {
    color: var(--text-primary);
}

[data-theme="dark"] #support-us .card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #support-us .card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #support-us .card-body {
    background: var(--bg-secondary);
}

[data-theme="dark"] #support-us .card-title {
    color: #ffffff;
}

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

[data-theme="dark"] #support-us .text-success {
    color: #7be6a9 !important;
}

[data-theme="dark"] #support-us .bg-secondary {
    background-color: var(--bg-tertiary) !important;
}

/* ================================================
   Member Section Dark Mode
   ================================================ */

/* Member section container */
[data-theme="dark"] [data-member-section] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

/* Desktop member info */
[data-theme="dark"] [data-member-section] .text-cyan-800 {
    color: #0fb8d9 !important;
}

[data-theme="dark"] [data-member-section] .text-black {
    color: var(--text-primary) !important;
}

/* Mobile toggle button */
[data-theme="dark"] [data-member-section] button {
    color: var(--text-primary);
}

[data-theme="dark"] [data-member-section] button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile dropdown menu */
[data-theme="dark"] #memberDropdown {
    background: linear-gradient(
        to bottom right,
        rgba(26, 26, 26, 0.98),
        rgba(32, 32, 32, 0.98)
    );
    border-color: var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}

[data-theme="dark"] #memberDropdown .text-white {
    color: var(--text-primary) !important;
}

[data-theme="dark"] #memberDropdown hr {
    border-color: var(--border-color);
}

[data-theme="dark"] #memberDropdown a {
    color: var(--text-secondary);
}

[data-theme="dark"] #memberDropdown a:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] #memberDropdown .text-red-400 {
    color: #ff6b6b !important;
}

[data-theme="dark"] #memberDropdown .text-red-400:hover {
    color: #ff8787 !important;
    background-color: rgba(238, 53, 46, 0.1) !important;
}

[data-theme="dark"] #memberDropdown .text-gray-300 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #memberDropdown .text-gray-300:hover {
    color: var(--text-primary) !important;
}

/* Notifications dropdown */
[data-theme="dark"] #notificationsDropdown {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #notificationsDropdown h3 {
    color: var(--text-primary);
}

[data-theme="dark"] #notificationsDropdown .border-gray-200 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] #notificationsDropdown .text-blue-600 {
    color: #4da3ff !important;
}

[data-theme="dark"] #notificationsDropdown .text-blue-600:hover {
    color: #66b3ff !important;
}

[data-theme="dark"] #notificationsDropdown .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #notificationsDropdown .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] #notificationsDropdown .text-gray-600:hover {
    color: var(--text-primary) !important;
}

/* Notification items */
[data-theme="dark"] .notification-item {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .notification-item:hover {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .notification-item .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .notification-item .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .notification-item .text-gray-400 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .notification-item.bg-blue-50 {
    background-color: rgba(15, 184, 217, 0.15) !important;
}

[data-theme="dark"] .notification-item.border-l-blue-500 {
    border-left-color: #0fb8d9 !important;
}

/* ================================================
   Dark Mode Styles
   ================================================ */

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

/* Navigation */
[data-theme="dark"] nav.main,
[data-theme="dark"] #main-nav {
    background-color: var(--nav-bg);
    color: var(--text-primary);
}

[data-theme="dark"] nav .logo {
    border-right-color: var(--border-color);
}

[data-theme="dark"] nav .logo > strong {
    color: var(--text-primary);
}

[data-theme="dark"] nav .nav-top {
    border-bottom-color: var(--border-color);
}

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

[data-theme="dark"] nav .nav-search .search-form .input-group .form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-color-secondary);
    color: var(--text-primary);
}

[data-theme="dark"]
    nav
    .nav-search
    .search-form
    .input-group
    .form-control:focus {
    border-color: var(--accent-primary);
    background-color: var(--bg-primary);
}

[data-theme="dark"] nav .nav-bottom ul:first-child > li > a {
    color: var(--text-secondary);
}

[data-theme="dark"] nav .nav-bottom ul:first-child > li > a:hover {
    color: var(--text-primary);
}

[data-theme="dark"] nav .nav-bottom ul:first-child > li.active > a {
    color: var(--accent-primary);
}

[data-theme="dark"] nav.main:before,
[data-theme="dark"] nav.main:after {
    background-color: var(--nav-bg);
}

[data-theme="dark"] #main-nav a.logo-link {
    color: var(--text-primary);
}

/* Content Areas */
[data-theme="dark"] .off-white {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .page-separator {
    background-color: var(--bg-tertiary);
}

/* News Cards */
[data-theme="dark"] .recent-news .bottom {
    background-color: var(--card-bg);
    color: var(--card-text);
}

[data-theme="dark"] .recent-news:hover .bottom {
    background-color: var(--card-bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .recent-news:hover {
    box-shadow: 0 15px 25px -15px var(--shadow);
}

[data-theme="dark"] .recent-news {
    box-shadow: 0 0 0 0 var(--shadow);
}

/* Numbers Section */
[data-theme="dark"] .numbers span {
    color: var(--accent-primary);
}

[data-theme="dark"] .numbers p {
    color: var(--text-light);
}

/* Team Members */
[data-theme="dark"] #our-team .team-member span {
    color: var(--text-primary);
}

[data-theme="dark"] #our-team .team-member p {
    color: var(--text-muted);
}

/* Forms & Inputs */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color-secondary);
    color: var(--text-primary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color-secondary);
    color: var(--link-hover);
}

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

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary);
}

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

/* Code Blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--bg-dark);
    color: #00d4aa;
    border-color: var(--border-color);
}

[data-theme="dark"] .page-separator:before {
    background-image: url(../svg/texture-dark.svg);
}

[data-theme="dark"] .page-separator:after {
    background-image: url(../svg/texture-dark.svg);
}

[data-theme="dark"] header:after {
    background-image: url(../svg/texture-dark.svg);
}

[data-theme="dark"] footer:before {
    background-image: url(../svg/texture-dark.svg);
}

/* Smooth Transitions */
body,
nav,
.card,
.form-control,
.btn,
.modal-content,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    background-color: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--shadow-light);
    transition: all 0.3s ease;
    font-size: 24px;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--shadow);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .dark-mode-toggle {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}

/* Accessibility - Respect user preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --bg-tertiary: #333333;
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --card-bg: #2a2a2a;
        --nav-bg: #1f1f1f;
    }
}