/* ================================================
   Dark Mode Theme - Comprehensive Styling
   User-toggleable dark theme for all UI elements
   ================================================ */

/* Dark Mode CSS Variables */
[data-theme="dark"] {
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1e1e1e;
    --dark-bg-tertiary: #2d2d2d;
    --dark-bg-card: #1e1e1e;
    --dark-bg-hover: #2a2a2a;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #a0a0a0;
    --dark-text-muted: #707070;
    --dark-text-link: #64b5f6;
    --dark-border-color: #333333;
    --dark-border-light: #444444;
    --dark-accent-primary: #667eea;
    --dark-accent-secondary: #764ba2;
    --dark-accent-success: #4caf50;
    --dark-accent-warning: #ff9800;
    --dark-accent-danger: #f44336;
    --dark-shadow: rgba(0, 0, 0, 0.5);
    --dark-shadow-light: rgba(0, 0, 0, 0.3);
}

/* ================================================
   Base Elements Dark Mode
   ================================================ */

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

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

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

[data-theme="dark"] .content {
    background-color: transparent !important;
}

/* ================================================
   Header Dark Mode
   ================================================ */

[data-theme="dark"] .header {
    background: linear-gradient(90deg, #121212 0%, #1e1e1e 100%) !important;
    border-bottom: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 2px 10px var(--dark-shadow) !important;
}

[data-theme="dark"] .header::after {
    background: linear-gradient(90deg, 
        var(--dark-accent-primary) 0%,
        var(--dark-accent-success) 50%,
        var(--dark-accent-secondary) 100%
    ) !important;
}

[data-theme="dark"] .header .header-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .header .header-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .header-block-search .input-container input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .header-block-search .input-container input::placeholder {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .header-block-search .input-container i {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .header-block-nav > ul > li > a {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .header-block-nav > ul > li:before {
    background-color: var(--dark-border-color) !important;
}

/* ================================================
   Sidebar Dark Mode
   ================================================ */

[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%) !important;
    border-right: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .sidebar-container {
    background-color: transparent !important;
}

[data-theme="dark"] .sidebar-header {
    border-bottom: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .sidebar-header .brand {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .sidebar-menu li a {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .sidebar-menu li a:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .sidebar-menu li.active > a {
    background: linear-gradient(90deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .sidebar-menu li.open > a {
    background-color: var(--dark-bg-hover) !important;
}

[data-theme="dark"] .sidebar-menu > li > .sidebar-nav > li a {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .sidebar-footer {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] #customize-menu .customize {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] #how-it-works-panel {
    background: rgba(0, 0, 0, 0.3) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] #how-it-works-panel h4 {
    color: var(--dark-text-primary) !important;
}

/* ================================================
   Cards Dark Mode
   ================================================ */

[data-theme="dark"] .card {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 4px 20px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .card-header {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .card-header .title {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .card-block {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .card-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-color) !important;
}

/* ================================================
   Server Cards Dark Mode
   ================================================ */

[data-theme="dark"] .server-card {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 4px 20px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .server-card:hover {
    border-color: var(--dark-accent-primary) !important;
    box-shadow: 0 8px 30px var(--dark-shadow) !important;
}

[data-theme="dark"] .server-details {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .server-details-hover {
    background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] .servers-cards-container {
    background-color: transparent !important;
}

/* ================================================
   Buttons Dark Mode
   ================================================ */

[data-theme="dark"] .btn {
    transition: all 0.3s ease;
}

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    border: none !important;
    color: white !important;
}

[data-theme="dark"] .btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--dark-bg-hover) !important;
    border: 1px solid var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
}

[data-theme="dark"] .btn-success {
    background-color: var(--dark-accent-success) !important;
    border-color: var(--dark-accent-success) !important;
    color: white !important;
}

[data-theme="dark"] .btn-warning {
    background-color: var(--dark-accent-warning) !important;
    border-color: var(--dark-accent-warning) !important;
    color: #1a1a2e !important;
}

[data-theme="dark"] .btn-danger {
    background-color: var(--dark-accent-danger) !important;
    border-color: var(--dark-accent-danger) !important;
    color: white !important;
}

[data-theme="dark"] .btn-info {
    background-color: #0288d1 !important;
    border-color: #0288d1 !important;
    color: white !important;
}

[data-theme="dark"] .btn-primary-outline {
    background-color: transparent !important;
    border: 2px solid var(--dark-accent-primary) !important;
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .btn-primary-outline:hover {
    background-color: var(--dark-accent-primary) !important;
    color: white !important;
}

/* ================================================
   Forms & Inputs Dark Mode
   ================================================ */

[data-theme="dark"] .form-control {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--dark-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

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

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

[data-theme="dark"] .form-control.underlined:focus {
    border-bottom-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--dark-accent-primary) !important;
    outline: none !important;
}

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

[data-theme="dark"] .input-group-addon {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

/* ================================================
   Search Container Dark Mode
   ================================================ */

[data-theme="dark"] .search-container {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .search-container input[type="text"] {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .search-container input[type="text"]:focus {
    border-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] #search-status {
    color: var(--dark-text-secondary) !important;
}

/* ================================================
   Tables Dark Mode
   ================================================ */

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

[data-theme="dark"] .table thead th {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: var(--dark-bg-card) !important;
}

[data-theme="dark"] .table tbody tr:nth-child(odd) {
    background-color: var(--dark-bg-secondary) !important;
}

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

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

/* ================================================
   Item List Dark Mode
   ================================================ */

[data-theme="dark"] .item-list .item {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

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

[data-theme="dark"] .item-list.striped > li {
    border-bottom-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .item-list.striped > li:nth-child(2n + 1) {
    background-color: var(--dark-bg-secondary) !important;
}

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

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

[data-theme="dark"] .item-list .item-col-header span {
    color: var(--dark-text-secondary) !important;
}

/* ================================================
   Dropdown Menu Dark Mode
   ================================================ */

[data-theme="dark"] .dropdown-menu {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 4px 20px var(--dark-shadow) !important;
}

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

[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-accent-primary) !important;
}

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

/* ================================================
   Modals Dark Mode
   ================================================ */

[data-theme="dark"] .modal-content {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .modal-header {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    border-bottom: none !important;
    color: white !important;
}

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

[data-theme="dark"] .modal-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .modal-tabs {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .modal-tabs .nav-link {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .modal-tabs .nav-link:hover,
[data-theme="dark"] .modal-tabs .nav-link.active {
    color: var(--dark-accent-primary) !important;
    border-bottom-color: var(--dark-accent-primary) !important;
}

/* ================================================
   Alerts Dark Mode
   ================================================ */

[data-theme="dark"] .alert {
    border: none !important;
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: #90a4f4 !important;
    border-left: 4px solid var(--dark-accent-primary) !important;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
    border-left: 4px solid var(--dark-accent-success) !important;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: #ffb74d !important;
    border-left: 4px solid var(--dark-accent-warning) !important;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: #e57373 !important;
    border-left: 4px solid var(--dark-accent-danger) !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(2, 136, 209, 0.2) !important;
    color: #4fc3f7 !important;
    border-left: 4px solid #0288d1 !important;
}

/* ================================================
   Footer Dark Mode
   ================================================ */

[data-theme="dark"] .footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .footer a {
    color: var(--dark-text-link) !important;
}

[data-theme="dark"] .footer a:hover {
    color: var(--dark-accent-primary) !important;
}

/* ================================================
   Links & Text Dark Mode
   ================================================ */

[data-theme="dark"] a:not(.btn) {
    color: var(--dark-text-link) !important;
}

[data-theme="dark"] a:not(.btn):hover {
    color: var(--dark-accent-primary) !important;
}

[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(--dark-text-primary) !important;
}

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

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

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

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

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

/* ================================================
   Title Block Dark Mode
   ================================================ */

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

[data-theme="dark"] .title-block h3,
[data-theme="dark"] .title-block h4 {
    color: var(--dark-text-primary) !important;
}

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

/* ================================================
   Navigation Tabs Dark Mode
   ================================================ */

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

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--dark-text-secondary) !important;
    border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--dark-border-color) var(--dark-border-color) transparent !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) var(--dark-border-color) var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .tab-content {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

/* ================================================
   Pagination Dark Mode
   ================================================ */

[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

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

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

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-muted) !important;
}

/* ================================================
   Authentication Pages Dark Mode
   ================================================ */

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

[data-theme="dark"] .auth-container {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 10px 40px var(--dark-shadow) !important;
}

[data-theme="dark"] .auth-header {
    border-bottom-color: var(--dark-accent-primary) !important;
}

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

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

/* ================================================
   Error Pages Dark Mode
   ================================================ */

[data-theme="dark"] .error-card {
    background-color: var(--dark-bg-card) !important;
}

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

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

/* ================================================
   Progress Bars Dark Mode
   ================================================ */

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

[data-theme="dark"] .progress-bar {
    background-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .stat-progress {
    background-color: var(--dark-bg-secondary) !important;
}

/* ================================================
   Checkbox & Radio Dark Mode
   ================================================ */

[data-theme="dark"] .checkbox + span:before,
[data-theme="dark"] .radio + span:before {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .checkbox:checked + span:before,
[data-theme="dark"] .radio:checked + span:before {
    color: var(--dark-accent-primary) !important;
}

/* ================================================
   Stats & Dashboard Dark Mode
   ================================================ */

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

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

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

/* ================================================
   Scrollbar Dark Mode
   ================================================ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--dark-accent-primary), var(--dark-accent-secondary));
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent-primary);
}

/* ================================================
   Icon Buttons Dark Mode
   ================================================ */

[data-theme="dark"] .icon-btn {
    background: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .icon-btn:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ================================================
   Mobile Menu Toggle Dark Mode
   ================================================ */

[data-theme="dark"] .mobile-menu-toggle {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
}

/* ================================================
   Language Switch Dark Mode
   ================================================ */

[data-theme="dark"] .sidebar-lang-switch-new {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .sidebar-lang-switch-new:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ================================================
   Layui Components Dark Mode (if used)
   ================================================ */

[data-theme="dark"] .layui-layer {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .layui-layer-title {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    color: white !important;
    border-bottom: none !important;
}

[data-theme="dark"] .layui-layer-content {
    color: var(--dark-text-primary) !important;
}

/* ================================================
   Sidebar Overlay Dark Mode
   ================================================ */

[data-theme="dark"] .sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ================================================
   No Servers Message Dark Mode
   ================================================ */

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

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

/* ================================================
   Filter Section Dark Mode (if applicable)
   ================================================ */

[data-theme="dark"] .filters-section {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

/* ================================================
   Dark Mode Toggle Button Styles
   ================================================ */

.dark-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dark-mode-toggle .toggle-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.dark-mode-toggle:hover .toggle-icon {
    transform: rotate(20deg);
}

.dark-mode-toggle .toggle-text {
    font-size: 14px;
    white-space: nowrap;
}

/* Toggle Switch Style */
.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 26px;
}

.theme-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .theme-slider {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%);
}

input:checked + .theme-slider:before {
    transform: translateX(24px);
}

/* Sun and Moon Icons in Toggle */
.theme-slider .sun-icon,
.theme-slider .moon-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.theme-slider .sun-icon {
    left: 6px;
    opacity: 1;
}

.theme-slider .moon-icon {
    right: 6px;
    opacity: 0.5;
}

input:checked + .theme-slider .sun-icon {
    opacity: 0.5;
}

input:checked + .theme-slider .moon-icon {
    opacity: 1;
}

/* ================================================
   Responsive Adjustments for Dark Mode
   ================================================ */

@media (max-width: 991px) {
    [data-theme="dark"] .sidebar-open .sidebar-overlay {
        background-color: rgba(0, 0, 0, 0.8) !important;
    }
}

@media (max-width: 767px) {
    [data-theme="dark"] .card {
        margin-bottom: 15px;
    }
    
    [data-theme="dark"] .server-card {
        margin-bottom: 15px;
    }
}

/* ================================================
   Smooth Transition for Theme Toggle
   Note: Transitions are applied only to key elements to avoid performance issues.
   Using will-change for elements that frequently change during theme switching.
   ================================================ */

/* Key elements that need smooth transitions during theme toggle */
body,
.app,
.header,
.sidebar,
.footer {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* Cards and buttons get box-shadow transition */
.card,
.btn,
.dropdown-menu,
.modal-content {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Form controls need smooth transition */
.form-control,
input,
textarea,
select {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease;
}

/* ================================================
   Print Styles - Ensure readability
   ================================================ */

@media print {
    [data-theme="dark"] body {
        background-color: white !important;
        color: black !important;
    }
    
    [data-theme="dark"] .card,
    [data-theme="dark"] .server-card {
        background-color: white !important;
        border-color: #ccc !important;
    }
}

/* ================================================
   Server Page Dark Mode - Server Cards with Inline Styles
   ================================================ */

[data-theme="dark"] .servers-cards-container .server-card,
[data-theme="dark"] .server-card[style*="background-color: #fff"],
[data-theme="dark"] .server-card[style*="background-color:#fff"],
[data-theme="dark"] .server-card[style*="background-color: white"],
[data-theme="dark"] div[class*="server-card"] {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

[data-theme="dark"] .server-card:hover {
    border-color: var(--dark-accent-primary) !important;
}

/* Search Container with inline styles */
[data-theme="dark"] .search-container,
[data-theme="dark"] .search-container[style*="background-color: #f5f5f5"],
[data-theme="dark"] div[class*="search-container"] {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] #search-status {
    color: var(--dark-text-secondary) !important;
}

/* Server Category Buttons */
[data-theme="dark"] .title-block .section .btn-primary {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    border: none !important;
}

/* ================================================
   User Profile Page Dark Mode
   ================================================ */

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

/* Favorites Section */
[data-theme="dark"] .favorites-section,
[data-theme="dark"] .favorites-section[style*="background: white"] {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

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

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

[data-theme="dark"] .favorite-card:hover {
    border-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .favorite-card.offline {
    background-color: var(--dark-bg-tertiary) !important;
}

[data-theme="dark"] .favorite-card-content {
    background-color: transparent !important;
}

[data-theme="dark"] .favorite-server-name {
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .player-bar-container {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Settings Items */
[data-theme="dark"] .settings-item,
[data-theme="dark"] .settings-item[style*="background: #f8f9fa"] {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
}

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

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

/* iOS Toggle Slider */
[data-theme="dark"] .ios-toggle-slider {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Back Link */
[data-theme="dark"] .back-link,
[data-theme="dark"] .back-link[style*="background: #f5f5f5"] {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-color) !important;
}

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

/* Refresh Countdown Section */
[data-theme="dark"] .refresh-countdown-section,
[data-theme="dark"] .refresh-countdown-section[style*="background"] {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
}

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

[data-theme="dark"] #refresh-countdown-time {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .refresh-progress-bar-container {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Pagination Controls */
[data-theme="dark"] .pagination-controls {
    border-color: var(--dark-border-color) !important;
}

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

[data-theme="dark"] .pagination-btn {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .pagination-btn:hover:not(:disabled) {
    border-color: var(--dark-accent-primary) !important;
    color: var(--dark-accent-primary) !important;
}

/* Server Card in User Profile */
[data-theme="dark"] .server-card .server-info {
    background-color: transparent !important;
}

[data-theme="dark"] .server-card .server-name {
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .server-card .player-count,
[data-theme="dark"] .server-card .player-count[style*="background: #f8f9fa"] {
    background-color: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .server-card .players {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .server-card .max-players {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .server-card .player-progress-bar {
    background-color: var(--dark-bg-tertiary) !important;
}

[data-theme="dark"] .server-card .action-btn {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .server-card .action-btn:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Server Card Offline State in User Profile */
[data-theme="dark"] .server-card.offline .player-count,
[data-theme="dark"] .server-card .player-count[style*="background: #f0f0f0"] {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Server Card inline styled elements in User Profile - Override light colors */
[data-theme="dark"] .server-card .server-info div[style*="color: #999"],
[data-theme="dark"] .server-card .server-info div[style*="color:#999"] {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .server-card .server-info div[style*="color: #666"],
[data-theme="dark"] .server-card .server-info div[style*="color:#666"] {
    color: var(--dark-text-secondary) !important;
}

/* User Profile Server Card - IP address and data time text */
[data-theme="dark"] .favorites-grid .server-card .server-info > div[style] {
    color: var(--dark-text-muted) !important;
}

/* User Profile Server Card - Last updated time span */
[data-theme="dark"] .favorites-grid .server-card .last-updated-time {
    color: var(--dark-text-muted) !important;
}

/* User Profile Server Card - Offline state background override */
[data-theme="dark"] .server-card.offline .server-image {
    background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%) !important;
}

/* Favorites Grid Card Styles - Matching Server Grid for consistency */
[data-theme="dark"] .favorites-grid .server-card {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .favorites-grid .server-card:hover {
    box-shadow: 0 4px 16px var(--dark-shadow) !important;
}

/* Empty Favorites */
[data-theme="dark"] .empty-favorites {
    color: var(--dark-text-muted) !important;
}

/* User Profile Server Card - Server Address */
[data-theme="dark"] .server-card .server-address {
    color: var(--dark-text-muted) !important;
}

/* User Profile Server Card - Offline Player Count */
[data-theme="dark"] .server-card .offline-player-count {
    background: var(--dark-bg-tertiary) !important;
}

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

/* User Profile Server Card - A2S Data Time */
[data-theme="dark"] .server-card .server-updated-at {
    color: var(--dark-text-muted) !important;
}

/* User Profile Server Card - Server Notes */
[data-theme="dark"] .server-card .server-notes {
    color: var(--dark-text-secondary) !important;
}

/* Modal Content */
[data-theme="dark"] .modal-header {
    border-bottom-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .modal-header h3 {
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .modal-close:hover {
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .modal-btn-cancel {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .modal-btn-cancel:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* ================================================
   Server Detail Page Dark Mode
   ================================================ */

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

/* Info Cards */
[data-theme="dark"] .info-card,
[data-theme="dark"] .info-card[style*="background: white"] {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .info-card h2 {
    color: var(--dark-text-primary) !important;
}

/* Extended Info Items */
[data-theme="dark"] .extended-info-item,
[data-theme="dark"] .extended-info-item[style*="background: #f8f9fa"] {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .extended-info-item .label {
    color: var(--dark-text-muted) !important;
}

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

/* Map Preview Container */
[data-theme="dark"] .map-preview-container {
    border: 1px solid var(--dark-border-color) !important;
}

[data-theme="dark"] .map-preview-image {
    background-color: var(--dark-bg-secondary) !important;
}

/* Chart Section */
[data-theme="dark"] .chart-section,
[data-theme="dark"] .chart-section[style*="background: white"] {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

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

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

[data-theme="dark"] .chart-tab.active {
    color: var(--dark-accent-primary) !important;
    border-bottom-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .chart-tab:hover {
    color: var(--dark-accent-primary) !important;
}

/* Map Chart Section */
[data-theme="dark"] .map-chart-section,
[data-theme="dark"] .map-chart-section[style*="background: white"] {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

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

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

[data-theme="dark"] .map-chart-tab.active {
    color: var(--dark-accent-success) !important;
    border-bottom-color: var(--dark-accent-success) !important;
}

[data-theme="dark"] .map-chart-tab:hover {
    color: var(--dark-accent-success) !important;
}

/* Player Cards (Grid) */
[data-theme="dark"] .player-card,
[data-theme="dark"] .player-card[style*="background"] {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .player-card:hover {
    border-color: var(--dark-accent-primary) !important;
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

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

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

/* Map History Timeline */
[data-theme="dark"] .map-history-item,
[data-theme="dark"] .map-history-item[style*="background"] {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .map-history-item:hover {
    border-color: var(--dark-accent-primary) !important;
}

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

[data-theme="dark"] .map-history-name {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .map-history-players {
    color: var(--dark-accent-primary) !important;
}

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

/* Auto-refresh Container */
[data-theme="dark"] .auto-refresh-container {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .auto-refresh-header {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .auto-refresh-header label {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .auto-refresh-header span {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .auto-refresh-progress {
    background: var(--dark-bg-tertiary) !important;
}

/* Players Table */
[data-theme="dark"] .players-table th {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .players-table td {
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .players-table tr:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* Loading and No Data States */
[data-theme="dark"] .loading,
[data-theme="dark"] .no-data {
    color: var(--dark-text-muted) !important;
}

/* Badge Styles */
[data-theme="dark"] .badge-success {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
}

[data-theme="dark"] .badge-warning {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: #ffb74d !important;
}

[data-theme="dark"] .badge-danger {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: #e57373 !important;
}

/* Status Badges */
[data-theme="dark"] .status-online {
    background-color: rgba(76, 175, 80, 0.2) !important;
    color: #81c784 !important;
}

[data-theme="dark"] .status-offline {
    background-color: rgba(244, 67, 54, 0.2) !important;
    color: #e57373 !important;
}

/* ================================================
   Title Block Dark Mode
   ================================================ */

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

[data-theme="dark"] .title-block h3,
[data-theme="dark"] .title-block h5 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .title-block hr {
    border-color: var(--dark-border-color) !important;
}

/* ================================================
   Admin Pages Dark Mode
   ================================================ */

[data-theme="dark"] .admin-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .settings-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .admin-form,
[data-theme="dark"] .settings-form {
    background-color: var(--dark-bg-card) !important;
}

/* ================================================
   Login Page Dark Mode
   ================================================ */

[data-theme="dark"] .login-container,
[data-theme="dark"] .auth-container {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border-color) !important;
}

/* ================================================
   Content Area Dark Mode - General Override
   ================================================ */

[data-theme="dark"] .content-article,
[data-theme="dark"] article.content {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

/* Override any inline white backgrounds */
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
    background-color: var(--dark-bg-card) !important;
}

/* Override any inline light gray backgrounds */
[data-theme="dark"] [style*="background-color: #f5f5f5"],
[data-theme="dark"] [style*="background-color:#f5f5f5"],
[data-theme="dark"] [style*="background: #f5f5f5"],
[data-theme="dark"] [style*="background:#f5f5f5"],
[data-theme="dark"] [style*="background-color: #f8f9fa"],
[data-theme="dark"] [style*="background-color:#f8f9fa"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] {
    background-color: var(--dark-bg-secondary) !important;
}

/* Override inline border colors */
[data-theme="dark"] [style*="border: 1px solid #ccc"],
[data-theme="dark"] [style*="border:1px solid #ccc"],
[data-theme="dark"] [style*="border-color: #ccc"],
[data-theme="dark"] [style*="border-color:#ccc"],
[data-theme="dark"] [style*="border: 1px solid #e0e0e0"],
[data-theme="dark"] [style*="border:1px solid #e0e0e0"] {
    border-color: var(--dark-border-color) !important;
}

/* Override inline text colors */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"] {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color:#999"] {
    color: var(--dark-text-secondary) !important;
}

/* ================================================
   Server Browser Page (server_new.html) Dark Mode
   ================================================ */

/* Loading Progress Indicator */
[data-theme="dark"] #loading-progress {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

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

[data-theme="dark"] .progress-bar-container {
    background: var(--dark-bg-tertiary) !important;
}

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

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

/* Category Filter */
[data-theme="dark"] .category-filter {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .category-filter h3 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .category-pill {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .category-pill:hover {
    border-color: var(--dark-accent-primary) !important;
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .category-pill.active {
    background: var(--dark-accent-primary) !important;
    border-color: var(--dark-accent-primary) !important;
    color: white !important;
}

/* Filters Section */
[data-theme="dark"] .filters-section {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

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

[data-theme="dark"] .filter-group label {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .filter-group select,
[data-theme="dark"] .filter-group input[type="text"] {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .filter-group select:focus,
[data-theme="dark"] .filter-group input[type="text"]:focus {
    border-color: var(--dark-accent-primary) !important;
}

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

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

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

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

/* Server Grid Card Styles */
[data-theme="dark"] .server-grid .server-card {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .server-grid .server-card:hover {
    box-shadow: 0 4px 16px var(--dark-shadow) !important;
}

/* Server Info Section */
[data-theme="dark"] .server-info {
    background: transparent !important;
}

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

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

/* Player Count Section with Background */
[data-theme="dark"] .player-count {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .player-count-header {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .player-count .players {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .player-count .max-players {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .bot-count {
    color: var(--dark-accent-warning) !important;
}

/* Server Comments (Data Return Time) */
[data-theme="dark"] .server-comments {
    color: var(--dark-text-muted) !important;
}

/* Player Progress Bar */
[data-theme="dark"] .player-progress-bar {
    background: var(--dark-bg-tertiary) !important;
}

/* Refresh Countdown Container */
[data-theme="dark"] .refresh-countdown-container {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
}

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

[data-theme="dark"] #refresh-countdown-time {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .refresh-progress-bar-container {
    background: var(--dark-bg-tertiary) !important;
}

/* Pagination */
[data-theme="dark"] .page-btn {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .page-btn:hover {
    border-color: var(--dark-accent-primary) !important;
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .page-btn.active {
    background: var(--dark-accent-primary) !important;
    border-color: var(--dark-accent-primary) !important;
    color: white !important;
}

/* Empty State */
[data-theme="dark"] .empty-state {
    color: var(--dark-text-muted) !important;
}

/* Login Modal */
[data-theme="dark"] .login-modal {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 25px 50px var(--dark-shadow) !important;
}

[data-theme="dark"] .login-modal h3 {
    color: var(--dark-text-primary) !important;
}

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

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

[data-theme="dark"] .login-modal-btn.btn-secondary:hover {
    background: var(--dark-bg-hover) !important;
}

/* Add Server Modal */
[data-theme="dark"] .add-server-modal {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 25px 50px var(--dark-shadow) !important;
}

[data-theme="dark"] .add-server-modal h3 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .add-server-modal p {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .add-server-input {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .add-server-input:focus {
    border-color: var(--dark-accent-primary) !important;
}

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

[data-theme="dark"] .add-server-result.success {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: var(--dark-accent-success) !important;
    color: #81c784 !important;
}

[data-theme="dark"] .add-server-result.error {
    background: rgba(244, 67, 54, 0.2) !important;
    border-color: var(--dark-accent-danger) !important;
    color: #e57373 !important;
}

[data-theme="dark"] .add-server-loading {
    color: var(--dark-accent-primary) !important;
}

/* iOS Toggle Switch */
[data-theme="dark"] .ios-toggle-slider {
    background-color: var(--dark-bg-tertiary) !important;
}

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

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

[data-theme="dark"] .ios-toggle-status.active {
    color: var(--dark-accent-success) !important;
}

/* ================================================
   Admin Pages Dark Mode (admin_center.html, admin_servers.html, admin_settings.html)
   ================================================ */

/* Admin Container */
[data-theme="dark"] .admin-center,
[data-theme="dark"] .admin-container {
    color: var(--dark-text-primary) !important;
}

/* Admin Navigation */
[data-theme="dark"] .admin-nav a {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .admin-nav a:hover {
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

[data-theme="dark"] .admin-nav a.active {
    background: linear-gradient(135deg, var(--dark-accent-primary) 0%, var(--dark-accent-secondary) 100%) !important;
    color: white !important;
}

/* Filter Section in Admin Pages */
[data-theme="dark"] .filter-section {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

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

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

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

[data-theme="dark"] .filter-tab:hover {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .filter-tab.active {
    color: var(--dark-accent-primary) !important;
    border-bottom-color: var(--dark-accent-primary) !important;
}

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

[data-theme="dark"] .filter-item {
    border-color: var(--dark-border-color) !important;
    background: transparent !important;
}

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

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

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

[data-theme="dark"] .filter-item .type-badge.fuzzy {
    background: rgba(25, 118, 210, 0.2) !important;
    color: #64b5f6 !important;
}

[data-theme="dark"] .filter-item .type-badge.exact {
    background: rgba(123, 31, 162, 0.2) !important;
    color: #ba68c8 !important;
}

[data-theme="dark"] .filter-item .actions .edit-btn {
    background: rgba(25, 118, 210, 0.2) !important;
    color: #64b5f6 !important;
}

[data-theme="dark"] .filter-item .actions .delete-btn {
    background: rgba(198, 40, 40, 0.2) !important;
    color: #e57373 !important;
}

/* Add Filter Form */
[data-theme="dark"] .add-filter-form {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .add-filter-form input,
[data-theme="dark"] .add-filter-form select,
[data-theme="dark"] .add-filter-form textarea {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .add-filter-form input:focus,
[data-theme="dark"] .add-filter-form select:focus,
[data-theme="dark"] .add-filter-form textarea:focus {
    border-color: var(--dark-accent-primary) !important;
}

/* Settings Section in Admin Pages */
[data-theme="dark"] .settings-section {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

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

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

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

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

[data-theme="dark"] .setting-item input {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

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

/* Toggle Switch in Admin */
[data-theme="dark"] .toggle-slider {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Server Table in Admin Servers */
[data-theme="dark"] .server-table {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .server-table th {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .server-table td {
    border-bottom-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .server-table tr:hover {
    background: var(--dark-bg-hover) !important;
}

[data-theme="dark"] .server-table .server-name {
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .priority-input {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .priority-input:focus {
    border-color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .priority-input.changed {
    border-color: var(--dark-accent-success) !important;
    background: rgba(76, 175, 80, 0.2) !important;
}

[data-theme="dark"] .priority-badge.high {
    background: rgba(230, 81, 0, 0.2) !important;
    color: #ffb74d !important;
}

[data-theme="dark"] .priority-badge.none {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .category-badge {
    background: rgba(25, 118, 210, 0.2) !important;
    color: #64b5f6 !important;
}

/* Admin Stats Section */
[data-theme="dark"] .admin-stats .admin-stat {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Save Bar */
[data-theme="dark"] .save-bar {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 -4px 12px var(--dark-shadow) !important;
}

[data-theme="dark"] .save-bar .changes-count {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .save-bar .changes-count strong {
    color: var(--dark-accent-primary) !important;
}

/* Loading Overlay */
[data-theme="dark"] .loading-overlay {
    background: rgba(18, 18, 18, 0.9) !important;
}

/* No Access Section */
[data-theme="dark"] .no-access {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .no-access h2 {
    color: var(--dark-accent-danger) !important;
}

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

/* Version Info in Admin Settings */
[data-theme="dark"] .version-info {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .version-info .current {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .version-info .current strong {
    color: var(--dark-accent-success) !important;
}

[data-theme="dark"] .version-select-group select {
    background: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-color) !important;
    color: var(--dark-text-primary) !important;
}

/* Release List */
[data-theme="dark"] .release-list {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .release-item {
    border-color: var(--dark-border-color) !important;
    background: transparent !important;
}

[data-theme="dark"] .release-item:hover {
    border-color: var(--dark-accent-success) !important;
    background: var(--dark-bg-hover) !important;
}

[data-theme="dark"] .release-item.current {
    border-color: var(--dark-accent-success) !important;
    background: rgba(76, 175, 80, 0.1) !important;
}

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

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

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

[data-theme="dark"] .release-item .badge.current {
    background: rgba(46, 125, 50, 0.2) !important;
    color: #81c784 !important;
}

[data-theme="dark"] .release-item .badge.prerelease {
    background: rgba(230, 81, 0, 0.2) !important;
    color: #ffb74d !important;
}

[data-theme="dark"] .release-item .badge.new {
    background: rgba(21, 101, 192, 0.2) !important;
    color: #64b5f6 !important;
}

/* Modal in Admin Settings */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .modal-content {
    background: var(--dark-bg-card) !important;
    box-shadow: 0 10px 40px var(--dark-shadow) !important;
}

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

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

[data-theme="dark"] .release-notes {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .asset-list h4 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .asset-item {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .asset-item:hover {
    background: rgba(76, 175, 80, 0.1) !important;
}

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

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

/* Update Progress */
[data-theme="dark"] .update-progress {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .update-progress h4 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .progress-bar {
    background: var(--dark-bg-tertiary) !important;
}

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

/* Backup Info */
[data-theme="dark"] .backup-info {
    background: rgba(230, 81, 0, 0.15) !important;
    color: #ffb74d !important;
}

/* ================================================
   Server Detail Page - Server Header Dark Mode
   ================================================ */

/* Server Header - White background in light mode, dark in dark mode */
[data-theme="dark"] .server-header {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border-color) !important;
    box-shadow: 0 2px 8px var(--dark-shadow-light) !important;
}

[data-theme="dark"] .server-header .server-name {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .server-header .info-item {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .server-header .info-item.clickable-address:hover {
    background-color: var(--dark-bg-hover) !important;
}

[data-theme="dark"] .server-header .info-label {
    color: var(--dark-text-muted) !important;
}

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

[data-theme="dark"] .server-header .copy-icon-btn {
    background: rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .server-header .copy-icon-btn:hover {
    background: rgba(102, 126, 234, 0.4) !important;
}

[data-theme="dark"] .server-header .copy-icon-btn svg {
    fill: #90a4f4 !important;
}

[data-theme="dark"] .server-header .player-progress-bar {
    background-color: var(--dark-bg-tertiary) !important;
}

[data-theme="dark"] .server-header .player-count-text {
    color: var(--dark-text-primary) !important;
}

/* Header map preview - dark mode */
[data-theme="dark"] .header-map-preview {
    box-shadow: 0 4px 12px var(--dark-shadow) !important;
}

[data-theme="dark"] .header-map-image {
    background-color: var(--dark-bg-secondary) !important;
}

/* Action buttons in server header - dark mode */
[data-theme="dark"] .server-header .btn-copy {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .server-header .btn-copy:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .server-header .btn-favorite {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .server-header .btn-favorite:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Auto-join status and settings panel - dark mode */
[data-theme="dark"] .server-header #auto-join-status {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .server-header #auto-join-status span {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .server-header #auto-join-status div {
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .server-header #auto-join-status a {
    color: var(--dark-accent-primary) !important;
}

[data-theme="dark"] .server-header #auto-join-settings-panel {
    background: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .server-header #auto-join-settings-panel h4 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .server-header #auto-join-settings-panel label {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .server-header #auto-join-settings-panel span {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .server-header #auto-join-settings-panel input {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .server-header #auto-join-preview {
    background: rgba(76, 175, 80, 0.1) !important;
    color: var(--dark-text-secondary) !important;
}

/* Auto-join settings and status panels - dark mode */
[data-theme="dark"] .auto-join-settings-panel {
    background-color: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .auto-join-settings-panel h4 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .auto-join-settings-panel label {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .auto-join-input {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .auto-join-input-hint {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .auto-join-preview {
    background: rgba(76, 175, 80, 0.1) !important;
    color: var(--dark-text-primary) !important;
}

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

[data-theme="dark"] .auto-join-status-panel {
    background-color: var(--dark-bg-secondary) !important;
}

[data-theme="dark"] .auto-join-status-header span {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .auto-join-status-info {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .auto-join-status-footer {
    border-color: var(--dark-border-color) !important;
}

[data-theme="dark"] .auto-join-status-footer span {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .auto-join-status-footer a {
    color: var(--dark-accent-primary) !important;
}