[data-theme="dark"] {
    /* User Defined Variables */
    --bg-body: #000000;
    --bg-card: #121212;
    --bg-secondary: #1c1c1c;
    --bg-header: #121212;
    --text-main: #ffffff;
    --text-muted: #a3a3a3;
    --border-color: #2d2d2d;
    --box-shadow-soft: 0 4px 6px rgba(0,0,0,0.5);
    --box-shadow-strong: 0 10px 25px rgba(0,0,0,0.7);

    /* Lagom Variable Mappings */
    --body-bg: var(--bg-body);
    --main-body-bg: var(--bg-body);
    --main-top-bg: var(--bg-header);
    --app-nav-top-bg: var(--bg-header);
    --app-nav-navbar-bg: var(--bg-header);
    
    /* Content Blocks */
    --ui-block-bg: var(--bg-card);
    --ui-block-header-bg: var(--bg-secondary);
    --ui-block-shadow: var(--box-shadow-soft);
    --ui-block-border: 1px solid var(--border-color);
    --ui-block-divider-color: var(--border-color);
    
    /* Text Colors */
    --text-body-color: var(--text-main);
    --text-heading-color: var(--text-main);
    --text-lighter-color: var(--text-muted);
    --text-faded-color: var(--text-muted);
    --link-color: #4a90e2; /* Adjusted for dark mode visibility */
    
    /* Inputs */
    --input-bg: var(--bg-secondary);
    --input-color: var(--text-main);
    --input-border-color: var(--border-color);
    --input-border: 1px solid var(--border-color);
    --input-placeholder-color: var(--text-muted);
    
    /* Navigation */
    --app-nav-top-menu-link-color: var(--text-main);
    --app-nav-top-menu-link-hover-color: #fff;
    --dropdown-bg: var(--bg-card);
    --dropdown-link-color: var(--text-main);
    --dropdown-link-hover-bg: var(--bg-secondary);
    --dropdown-border: 1px solid var(--border-color);
    
    /* Footer */
    --main-footer-bg: var(--bg-header);
    --main-footer-link-color: var(--text-muted);
    
    /* Tables */
    --table-bg: var(--bg-card);
    --table-bg-accent: var(--bg-secondary);
    --table-bg-hover: var(--bg-secondary);
    --table-border-color: var(--border-color);
    --table-th-bg: var(--bg-secondary);
    --table-td-font-color: var(--text-main);
    
    /* Panels */
    --panel-bg: var(--bg-card);
    --panel-default-heading-bg: var(--bg-secondary);
    --panel-default-text: var(--text-main);
    --panel-default-border: var(--border-color);

    /* Buttons */
    --btn-default-bg: var(--bg-secondary);
    --btn-default-color: var(--text-main);
    --btn-default-border: var(--border-color);
}

/* Global Overrides for Dark Mode */
[data-theme="dark"] body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .main-body, 
[data-theme="dark"] .app-main {
    background-color: var(--bg-body) !important;
}

[data-theme="dark"] .panel, 
[data-theme="dark"] .card, 
[data-theme="dark"] .tiles .tile,
[data-theme="dark"] .login-wrapper,
[data-theme="dark"] .well {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .app-nav {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .main-top {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Button Overrides */
[data-theme="dark"] .btn-default {
    background-color: var(--bg-secondary) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active,
[data-theme="dark"] .btn-default.active {
    background-color: var(--bg-card) !important;
    color: #fff !important;
    border-color: var(--text-muted) !important;
}

/* Specific fix for view details and similar action buttons */
[data-theme="dark"] .btn-view-details {
    background-color: var(--bg-secondary) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-view-details:hover {
    background-color: var(--bg-card) !important;
}

/* Pagination Overrides */
[data-theme="dark"] .pagination .page-item .page-link {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: #0d6efd !important; /* Standard primary blue or use --brand-primary if available */
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* Table Overrides */
[data-theme="dark"] .table {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > th,
[data-theme="dark"] .table > thead > tr > td,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td {
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .table > thead > tr > th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-muted) !important;
}

/* Support Tickets Overrides */
[data-theme="dark"] .ticket-reply {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ticket-reply .ticket-reply-top {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .ticket-reply .ticket-reply-message {
    color: var(--text-main) !important;
}

[data-theme="dark"] .ticket-reply.staff {
    background-color: var(--bg-card) !important; /* Distinguish staff if needed, or keep same */
    border-color: #4a90e2 !important; /* Example border for staff */
}

[data-theme="dark"] .ticket-reply .ticket-reply-attachments {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .ticket-reply .name {
    color: var(--text-main) !important;
}

[data-theme="dark"] .ticket-reply .date {
    color: var(--text-muted) !important;
}

/* General Layout Fixes */
[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(--text-main) !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-color) !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .close {
    color: var(--text-main) !important;
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s;
    margin-left: 10px;
    background: transparent;
    border: none;
    padding: 0;
}

.theme-toggle-btn:focus {
    outline: none;
}

.theme-toggle-btn:hover {
    background-color: rgba(0,0,0,0.05);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255,255,255,0.1);
}

.theme-toggle-btn i {
    font-size: 18px;
}

/* Icons for Light/Dark */
.theme-icon-light { display: block !important; }
.theme-icon-dark { display: none !important; }

[data-theme="dark"] .theme-icon-light { display: none !important; }
[data-theme="dark"] .theme-icon-dark { display: block !important; color: #fff; }

/* Markdown Editor Overrides */
[data-theme="dark"] .md-editor {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .md-editor > .md-header,
[data-theme="dark"] .md-editor .md-footer,
[data-theme="dark"] .markdown-editor-status {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .md-editor > textarea {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .md-editor > .md-preview {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .md-editor .btn-default {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .md-editor .btn-default:hover {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}

/* Discord Integration Dark Mode Overrides */
[data-theme="dark"] .discord-integration-container,
[data-theme="dark"] .discord-main-content,
[data-theme="dark"] .discord-sidebar,
[data-theme="dark"] .discord-profile-card,
[data-theme="dark"] .discord-profile-body,
[data-theme="dark"] .discord-connected-account,
[data-theme="dark"] .discord-user-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .discord-profile-avatar,
[data-theme="dark"] .discord-profile-status {
    border-color: var(--bg-card) !important;
}

[data-theme="dark"] .discord-header,
[data-theme="dark"] .discord-profile-header {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .discord-tab-list,
[data-theme="dark"] .discord-field,
[data-theme="dark"] .discord-profile-actions {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .discord-username,
[data-theme="dark"] .discord-client-name,
[data-theme="dark"] .field-value,
[data-theme="dark"] .info-item {
    color: var(--text-main) !important;
}

[data-theme="dark"] .discord-profile-display-name,
[data-theme="dark"] .discord-intro p,
[data-theme="dark"] .field-label {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .discord-userid {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .discord-tab {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .discord-tab:hover,
[data-theme="dark"] .discord-tab.active {
    color: #5865F2 !important; /* Keep Discord Blue */
}

[data-theme="dark"] .discord-sidebar {
    border-left-color: var(--border-color) !important;
    border-top-color: var(--border-color) !important;
}

/* Custom Server Stats & Service Details Overrides */
[data-theme="dark"] .becard {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--box-shadow-soft) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .becard-header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-heading-color) !important;
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; /* Match standard border radius */
}

[data-theme="dark"] .becard-title {
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .becard-title i {
    color: var(--text-primary-color);
}

[data-theme="dark"] .betext-primary {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .betext-primary-open {
    color: var(--text-main) !important;
}

[data-theme="dark"] .beCopyText {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
}

[data-theme="dark"] .beCopyText img {
    filter: invert(1);
}

[data-theme="dark"] .beCopyText:hover {
    background-color: var(--bg-card) !important;
}

/* Charts */
[data-theme="dark"] .besr_circle_bg {
    stroke: var(--bg-secondary) !important;
}

[data-theme="dark"] .besr_circle_percentage {
    fill: var(--text-heading-color) !important;
}

/* Menu List inside becard */
[data-theme="dark"] .becard-menu-list ul li {
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .becard-menu-list ul li a {
    color: var(--text-main) !important;
}

[data-theme="dark"] .becard-menu-list ul li a:hover {
    background-color: var(--bg-secondary) !important;
}

/* Sidebar Specifics */
[data-theme="dark"] .panel-sidebar .list-group-item.active {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .panel-sidebar .list-group-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Password Strength Bar */
[data-theme="dark"] #passwordStrengthBar {
    background-color: var(--bg-secondary) !important;
}

/* Server Format / OS Selector Overrides */
[data-theme="dark"] .os-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .os-box:hover,
[data-theme="dark"] .os-box.active {
    background-color: var(--bg-secondary) !important;
    border-color: #0d6efd !important; /* Use a blue color for active state or var(--brand-primary) if defined globally */
}

[data-theme="dark"] .os-box h5 {
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .beform-control {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .beform-control:focus {
    border-color: #0d6efd !important;
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .beform-check-label {
    color: var(--text-main) !important;
}

[data-theme="dark"] .os-version-selector .beform-control {
    background-color: var(--bg-card) !important;
}

/* OS Version Select Specific */
[data-theme="dark"] select.os-version-select {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important; /* White arrow */
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

[data-theme="dark"] select option {
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* Total Row in Tables Overrides */
[data-theme="dark"] .total-row,
[data-theme="dark"] .total-row td,
[data-theme="dark"] .total-row th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-heading-color) !important;
    border-color: var(--border-color) !important;
    font-weight: bold;
}

/* Payment Page (Iyzico) Overrides - If CSS is loaded */
body[data-theme="dark"] .payment-container {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
}

body[data-theme="dark"] .payment-container .invoice-info {
    color: var(--text-muted) !important;
}

body[data-theme="dark"] .payment-container .invoice-info strong {
    color: var(--text-heading-color) !important;
}

body[data-theme="dark"] .payment-container .btn-back {
    color: var(--text-muted) !important;
}

body[data-theme="dark"] .payment-container .btn-back:hover {
    color: var(--text-main) !important;
}

/* Mobile Menu (Navbar) Overrides */
[data-theme="dark"] .app-nav-menu,
[data-theme="dark"] .lagom.menu-open .app-nav-menu,
[data-theme="dark"] .nav-mobile-dropdown .app-nav-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .app-nav-menu .menu > li > a {
    color: var(--text-main) !important;
}

[data-theme="dark"] .app-nav-menu .menu > li > a:not(.btn):hover,
[data-theme="dark"] .app-nav-menu .menu > li.active > a:not(.btn) {
    background-color: var(--bg-secondary) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .app-nav-menu .menu > li.active > a:not(.btn) .item-text,
[data-theme="dark"] .app-nav-menu .menu > li.active > a:not(.btn) i {
    color: var(--text-main) !important;
}

/* Mobile Submenus */
[data-theme="dark"] .app-nav-menu .menu > li .dropdown-menu {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .app-nav-menu .menu > li .dropdown-menu li > a {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .app-nav-menu .menu > li .dropdown-menu li > a:hover {
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}

/* Header & Mobile Toggle */
[data-theme="dark"] .app-nav-header {
    background-color: var(--bg-header) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar-toggle .icon-bar {
    background-color: #fff !important;
}

/* Top Nav Icons & Text */
[data-theme="dark"] .top-nav > li > a {
    color: var(--text-main) !important;
}

[data-theme="dark"] .top-nav > li > a > i,
[data-theme="dark"] .top-nav > li > a > .ls {
    color: var(--text-main) !important;
}

[data-theme="dark"] .top-nav > li.active > a,
[data-theme="dark"] .top-nav > li:hover > a {
    color: #fff !important;
}

[data-theme="dark"] .top-nav .nav-badge {
    border-color: var(--bg-header) !important;
}

/* Dropdown Headers (Account menu etc) */
[data-theme="dark"] .dropdown-header {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dropdown-header-title {
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .dropdown-header-desc {
    color: var(--text-muted) !important;
}

/* Form Labels & General Headers */
[data-theme="dark"] label,
[data-theme="dark"] .control-label,
[data-theme="dark"] .form-label {
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .panel-title,
[data-theme="dark"] legend {
    color: var(--text-heading-color) !important;
}

/* Panel Headings */
[data-theme="dark"] .panel-heading {
    color: var(--text-heading-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Modal Titles */
[data-theme="dark"] .modal-title {
    color: var(--text-heading-color) !important;
}

/* Disabled Form Inputs & Selects */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] fieldset[disabled] .form-control,
[data-theme="dark"] select:disabled,
[data-theme="dark"] input:disabled {
    background-color: var(--bg-card) !important;
    opacity: 0.6;
    cursor: not-allowed;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

/* Switch Component */
[data-theme="dark"] .switch {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .switch__container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .switch__handle {
    background-color: var(--text-muted);
}

[data-theme="dark"] .switch input:checked + .switch__container {
    background-color: var(--bg-secondary);
    border-color: #0d6efd;
}

[data-theme="dark"] .switch input:checked + .switch__container .switch__handle {
    background-color: #0d6efd;
}

/* Help Blocks */
[data-theme="dark"] .help-block {
    color: var(--text-muted) !important;
}

/* iCheck/Radio Labels */
[data-theme="dark"] .radio-inline, 
[data-theme="dark"] .checkbox-inline,
[data-theme="dark"] .icheck-label {
    color: var(--text-main) !important;
}

/* Ticket Attachments Message */
[data-theme="dark"] .ticket-attachments-message {
    color: var(--text-main) !important;
}

/* Notifications (Client Alerts) */
[data-theme="dark"] .client-alerts .none {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .client-alerts li a {
    color: var(--text-main) !important;
}

[data-theme="dark"] .client-alerts li a:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .client-alerts .message {
    color: var(--text-main) !important;
}

[data-theme="dark"] .client-alerts .time {
    color: var(--text-muted) !important;
}

/* Custom Format Status Stepper Dark Mode */
[data-theme="dark"] .be-format-sportlet {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--box-shadow-soft) !important;
}

[data-theme="dark"] .be-format-content-center span {
    color: var(--text-heading-color) !important;
}

[data-theme="dark"] .be-format-stepper-wrapper::before {
    background-color: var(--border-color) !important;
}

[data-theme="dark"] .be-format-step-counter {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .be-format-step-name {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .be-format-step-item.active .be-format-step-counter {
    border-color: #007bff !important;
    color: #007bff !important;
}

[data-theme="dark"] .be-format-step-item.active .be-format-step-name {
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
    border-left-color: #007bff !important;
}

[data-theme="dark"] .be-format-step-item.completed .be-format-step-counter {
    border-color: #28a745 !important;
    background-color: #28a745 !important;
    color: #fff !important;
}

[data-theme="dark"] .be-format-step-item.completed .be-format-step-name {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    text-decoration: line-through;
}

/* DIYOVM specific prefixes override */
[data-theme="dark"] .be-diyovm-step-counter {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .be-diyovm-step-name {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .be-diyovm-step-item.active .be-diyovm-step-counter {
    border-color: #007bff !important;
    color: #007bff !important;
}

[data-theme="dark"] .be-diyovm-step-item.active .be-diyovm-step-name {
    background-color: rgba(0, 123, 255, 0.1) !important;
    color: #007bff !important;
    border-left-color: #007bff !important;
}

[data-theme="dark"] .be-diyovm-step-item.completed .be-diyovm-step-counter {
    border-color: #28a745 !important;
    background-color: #28a745 !important;
    color: #fff !important;
}

[data-theme="dark"] .be-diyovm-step-item.completed .be-diyovm-step-name {
    background-color: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
}
