/* ========================================================================== */
/* DARK MODE - SHARED CSS VARIABLES                                           */
/* All --dm-* vars reference MudBlazor palette vars so they auto-sync.        */
/* ========================================================================== */

html.dark-mode,
body.dark-mode {
    --dm-bg:              var(--mud-palette-background);
    --dm-surface:         var(--mud-palette-surface);
    --dm-surface-raised:  var(--mud-palette-table-hover);
    --dm-surface-deep:    #000000;
    --dm-surface-hover:   var(--mud-palette-table-hover);
    --dm-surface-active:  var(--mud-palette-action-disabled-background);

    --dm-border:          var(--mud-palette-lines-default);
    --dm-border-subtle:   var(--mud-palette-divider);
    --dm-border-medium:   var(--mud-palette-lines-inputs);
    --dm-border-strong:   var(--mud-palette-action-disabled);
    --dm-border-hover:    var(--mud-palette-lines-inputs);
    --dm-border-focus:    var(--mud-palette-primary);

    --dm-text:            var(--mud-palette-text-primary);
    --dm-text-heading:    var(--mud-palette-text-primary);
    --dm-text-primary:    var(--mud-palette-text-primary);
    --dm-text-secondary:  var(--mud-palette-text-secondary);
    --dm-text-muted:      var(--mud-palette-text-secondary);
    --dm-text-dim:        var(--mud-palette-action-disabled);
    --dm-text-faint:      var(--mud-palette-action-disabled);

    --dm-shadow-sm:       0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --dm-shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --dm-shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --dm-shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --dm-shadow-hover:    0 10px 15px -3px rgba(0, 0, 0, 0.5);

    --dm-row-hover:       var(--mud-palette-table-hover);
    --dm-accent:          var(--mud-palette-primary);
    --dm-accent-soft:     var(--mud-palette-primary);
    --dm-accent-glow:     0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);

}

body.theme-ready,
body.theme-ready .mud-paper,
body.theme-ready .mud-dialog,
body.theme-ready .mud-overlay,
body.theme-ready .mud-popover,
body.theme-ready .mud-tooltip,
body.theme-ready .mud-appbar,
body.theme-ready .mud-drawer {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

html.dark-mode .mud-appbar img[src$="rungard-icon-black.png"],
html.dark-mode .mud-appbar img[src$="rungard-text-black.png"],
body.dark-mode .mud-appbar img[src$="rungard-icon-black.png"],
body.dark-mode .mud-appbar img[src$="rungard-text-black.png"] {
    filter: brightness(0) invert(1);
}

body.dark-mode .about-logo-img {
    filter: brightness(0) invert(1);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--mud-palette-action-disabled);
}

body.dark-mode .table-btn.secondary {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-action-disabled);
}

body.dark-mode .table-btn.secondary:hover {
    background: var(--mud-palette-action-disabled-background);
}

body.dark-mode .table-btn.ghost {
    background: rgba(255, 255, 255, 0.10);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

body.dark-mode .table-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

body.dark-mode .badge,
body.dark-mode .system-badge,
body.dark-mode .badge.backup-status {
    border: 1px solid rgba(0, 0, 0, 0.18);
}

body.dark-mode .badge.running,
body.dark-mode .system-badge.ok,
body.dark-mode .badge.backup-status.success,
body.dark-mode .badge.ok {
    background: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);
    color: var(--mud-palette-success);
}

body.dark-mode .badge.warn,
body.dark-mode .system-badge.warning,
body.dark-mode .badge.backup-status.warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    color: var(--mud-palette-warning);
}

body.dark-mode .badge.error,
body.dark-mode .system-badge.failed,
body.dark-mode .badge.backup-status.failed,
body.dark-mode .badge.stopped {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    color: var(--mud-palette-error);
}

body.dark-mode .system-badge.neutral,
body.dark-mode .badge.neutral {
    background: rgba(63, 63, 70, 0.32);
    color: rgba(228, 228, 231, 0.92);
}

body.dark-mode .toggle-switch {
    background: var(--mud-palette-table-hover);
}

body.dark-mode .toggle-switch.on {
    background: var(--mud-palette-success);
}

body.dark-mode .toggle-knob {
    background: var(--mud-palette-text-primary);
}

body.dark-mode .info-icon {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-text-primary);
}

body.dark-mode .info-icon:hover {
    background: var(--mud-palette-action-disabled-background);
}

body.dark-mode .info-icon::after,
body.dark-mode .info-icon.wireguard-status::after {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs);
}

body.dark-mode .info-icon::before,
body.dark-mode .info-icon.wireguard-status::before {
    border-bottom: 10px solid var(--mud-palette-surface);
}

body.dark-mode h1 .info-icon,
body.dark-mode h2 .info-icon,
body.dark-mode h3 .info-icon {
    color: var(--mud-palette-text-primary) !important;
}

body.dark-mode .empty-state {
    color: var(--mud-palette-text-secondary);
}

body.dark-mode .skeleton-row td {
    background: linear-gradient(90deg, var(--mud-palette-surface), var(--mud-palette-table-hover), var(--mud-palette-surface));
}

body.dark-mode .logs-modal,
body.dark-mode .modal-content,
body.dark-mode .wg-dialog {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

body.dark-mode .mud-dialog .mud-dialog-content {
    color: var(--mud-palette-text-primary);
}

body.dark-mode .mud-chip {
    border: none !important;
}

body.dark-mode .app-tile-icon svg {
    filter: none;
}

body.dark-mode .device-track {
    background: var(--mud-palette-action-disabled-background) !important;
}

body.dark-mode .modal-content pre,
body.dark-mode .key-container pre {
    background: #111213;
    color: #e2e8f0;
    border: 1px solid var(--mud-palette-lines-default);
}

body.dark-mode .logs-empty,
body.dark-mode .modal-header h2,
body.dark-mode .wg-dialog-header h2 {
    color: var(--mud-palette-text-primary);
}

body.dark-mode .logs-modal .close-btn {
    color: var(--mud-palette-text-primary);
}

body.dark-mode .logs-modal .close-btn:hover {
    color: var(--mud-palette-text-primary);
}

body.dark-mode .modal-panel {
    background: var(--mud-palette-surface);
}

body.dark-mode .modal-header h3 {
    color: var(--mud-palette-text-primary);
}

body.dark-mode .modal-close {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-text-secondary);
}

body.dark-mode .modal-close:hover {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-text-primary);
}

body.dark-mode .modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

body.dark-mode .log-level.info {
    background: color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    color: var(--mud-palette-info);
}

body.dark-mode .log-level.warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 20%, transparent);
    color: var(--mud-palette-warning);
}

body.dark-mode .log-level.error,
body.dark-mode .log-level.critical {
    background: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);
    color: var(--mud-palette-error);
}

.admin-sidenav-theme {
    margin-top: 12px;
    padding: 0 14px 14px 14px;
}

.theme-toggle-btn {
    width: 100%;
    margin-top: 110px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.theme-toggle-btn:active {
    transform: translateY(0);
}

.theme-toggle-icon {
    font-size: 1.15rem;
    width: 24px;
    display: flex;
    justify-content: center;
}

.theme-toggle-icon,
.theme-toggle-text {
    visibility: hidden;
}

body.theme-ready .theme-toggle-icon,
body.theme-ready .theme-toggle-text {
    visibility: visible;
}

body.dark-mode .tech-explorer {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-inputs);
}

body.dark-mode .tech-explorer-nav {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-inputs);
}

body.dark-mode .tech-explorer-tab {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}

body.dark-mode .tech-explorer-tab:hover {
    background: var(--mud-palette-table-hover);
    color: var(--mud-palette-text-primary);
}

body.dark-mode .tech-explorer-tab.active {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

body.dark-mode .tech-explorer-icon-ring {
    background: var(--mud-palette-table-hover);
}

/* ========================================================================== */
/* OLED / ULTRA DARK - palette is configured in RungardMudTheme.cs (C#)       */
/* Only transition behavior lives here.                                        */
/* ========================================================================== */

body.oled-mode,
body.oled-mode .mud-paper,
body.oled-mode .mud-dialog,
body.oled-mode .mud-overlay,
body.oled-mode .mud-popover,
body.oled-mode .mud-tooltip,
body.oled-mode .mud-appbar,
body.oled-mode .mud-drawer {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}