/* ========================================================================== */
/* DARK MODE — SHARED GLOBALS + DESIGN TOKENS                                 */
/* All dark-mode files reference these vars. Change colors in ONE place.       */
/* ========================================================================== */

html.dark-mode,
body.dark-mode {
    --dm-bg:              #0C0C0E;
    --dm-surface:         #161618;
    --dm-surface-raised:  #1C1C1F;
    --dm-surface-deep:    #0A0A0C;
    --dm-surface-hover:   #222226;
    --dm-surface-active:  #2A2A2E;

    --dm-border:          rgba(228, 228, 231, 0.10);
    --dm-border-subtle:   rgba(228, 228, 231, 0.08);
    --dm-border-medium:   rgba(228, 228, 231, 0.16);
    --dm-border-strong:   rgba(228, 228, 231, 0.24);
    --dm-border-hover:    rgba(228, 228, 231, 0.20);
    --dm-border-focus:    rgba(212, 212, 216, 0.32);

    --dm-text:            #FAFAFA;
    --dm-text-heading:    #FAFAFA;
    --dm-text-primary:    rgba(250, 250, 250, 0.92);
    --dm-text-secondary:  rgba(212, 212, 216, 0.86);
    --dm-text-muted:      rgba(212, 212, 216, 0.68);
    --dm-text-dim:        rgba(161, 161, 170, 0.70);
    --dm-text-faint:      rgba(228, 228, 231, 0.88);

    --dm-shadow-sm:       0 4px 14px rgba(0, 0, 0, 0.24);
    --dm-shadow-md:       0 8px 22px rgba(0, 0, 0, 0.30);
    --dm-shadow-lg:       0 12px 30px rgba(0, 0, 0, 0.38);
    --dm-shadow-xl:       0 20px 60px rgba(0, 0, 0, 0.55);
    --dm-shadow-hover:    0 10px 28px rgba(0, 0, 0, 0.34);

    --dm-row-hover:       rgba(228, 228, 231, 0.06);
    --dm-accent:          #93C5FD;
    --dm-accent-soft:     #BFDBFE;
    --dm-accent-glow:     0 0 0 3px rgba(147, 197, 253, 0.28);
}

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

html.dark-mode,
html.dark-mode body {
    background: var(--dm-bg);
    color: var(--dm-text);
}

body.dark-mode {
    background: var(--dm-bg);
    color: var(--dm-text);
}

html.dark-mode .mud-appbar,
html.dark-mode .mud-drawer,
body.dark-mode .mud-appbar,
body.dark-mode .mud-drawer {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border-medium) !important;
}

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 p,
body.dark-mode label,
body.dark-mode small {
    color: var(--dm-text-faint);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--dm-surface-deep);
    color: var(--dm-text);
    border: 1px solid var(--dm-border-medium);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-dim);
}

body.dark-mode .table-btn.secondary {
    background: var(--dm-surface-hover);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--dm-border-strong);
}

body.dark-mode .table-btn.secondary:hover {
    background: var(--dm-surface-active);
}

body.dark-mode .table-btn.ghost {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    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 .admin-action-button.admin-action-neutral.mud-button-filled {
    background: var(--dm-surface-raised) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border-medium) !important;
}

body.dark-mode .admin-action-button.admin-action-neutral.mud-button-filled:hover {
    background: var(--dm-surface-hover) !important;
    border-color: var(--dm-border-medium) !important;
}

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: rgba(74, 222, 128, 0.16);
    color: #86efac;
}

body.dark-mode .badge.warn,
body.dark-mode .system-badge.warning,
body.dark-mode .badge.backup-status.warning {
    background: rgba(251, 191, 36, 0.16);
    color: #fcd34d;
}

body.dark-mode .badge.error,
body.dark-mode .system-badge.failed,
body.dark-mode .badge.backup-status.failed,
body.dark-mode .badge.stopped {
    background: rgba(248, 113, 113, 0.18);
    color: #fca5a5;
}

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(--dm-surface-hover);
}

body.dark-mode .toggle-switch.on {
    background: #2ecc71;
}

body.dark-mode .toggle-knob {
    background: var(--dm-text-heading);
}

body.dark-mode .info-icon {
    background: var(--dm-surface-raised);
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .info-icon:hover {
    background: var(--dm-surface-hover);
}

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

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

body.dark-mode h1 .info-icon,
body.dark-mode h2 .info-icon,
body.dark-mode h3 .info-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

body.dark-mode .empty-state {
    color: rgba(255, 255, 255, 0.60);
}

body.dark-mode .skeleton-row td {
    background: linear-gradient(90deg, var(--dm-surface), #333, var(--dm-surface));
}

body.dark-mode .logs-modal,
body.dark-mode .modal-content,
body.dark-mode .wg-dialog,
body.dark-mode .mud-dialog,
body.dark-mode .mud-paper {
    background: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border-medium);
}

/* Elevated elements get a subtle luminous border in dark mode to compensate
   for shadows being invisible against dark backgrounds. */
body.dark-mode .mud-paper.mud-elevation-1 {
    border: 1px solid var(--dm-border-subtle);
}

body.dark-mode .mud-paper.mud-elevation-2,
body.dark-mode .mud-card.mud-elevation-2 {
    border: 1px solid var(--dm-border-medium);
}

body.dark-mode .mud-paper.mud-elevation-3,
body.dark-mode .mud-paper.mud-elevation-4,
body.dark-mode .mud-card.mud-elevation-3,
body.dark-mode .mud-card.mud-elevation-4 {
    border: 1px solid var(--dm-border-strong);
}

body.dark-mode .mud-card.mud-elevation-1 {
    border: 1px solid var(--dm-border-subtle);
}

body.dark-mode .hover-card.mud-paper:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    border-color: var(--dm-text-heading);
}

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

body.dark-mode .modal-content pre,
body.dark-mode .key-container pre {
    background: var(--dm-surface-deep);
    color: #e2e8f0;
    border: 1px solid var(--dm-border);
}

body.dark-mode .logs-empty,
body.dark-mode .modal-header h2,
body.dark-mode .wg-dialog-header h2 {
    color: rgba(255, 255, 255, 0.85);
}

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

body.dark-mode .logs-modal .close-btn:hover {
    color: #fff;
}

body.dark-mode .modal-panel {
    background: var(--dm-surface);
    box-shadow: var(--dm-shadow-xl);
}

body.dark-mode .modal-header {
    border-bottom-color: var(--dm-border);
}

body.dark-mode .modal-header h3 {
    color: var(--dm-text-heading);
}

body.dark-mode .modal-close {
    background: var(--dm-surface-hover);
    color: var(--dm-text-muted);
}

body.dark-mode .modal-close:hover {
    background: var(--dm-surface-active);
    color: var(--dm-text-heading);
}

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

body.dark-mode .log-level.info {
    background: rgba(45, 100, 216, 0.22);
    color: #9bb8ff;
}

body.dark-mode .log-level.warning {
    background: rgba(255, 193, 7, 0.22);
    color: #ffd36e;
}

body.dark-mode .log-level.error {
    background: rgba(231, 76, 60, 0.22);
    color: #ff9a9a;
}

body.dark-mode .log-level.critical {
    background: #3b0000;
    color: #fff;
}

.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;
}