/* ================================================================
   Zaffaroni Cloud – Desktop Visual System & Per-user Themes
   ================================================================ */

html {
    color-scheme: dark;
    --theme-accent-rgb: 0, 240, 255;
    --theme-secondary-rgb: 59, 130, 246;
    --theme-card-solid: #0f172a;
    --theme-elevated: #111c2e;
    --theme-header: rgba(5, 11, 20, .84);
    --theme-grid: rgba(0, 240, 255, .035);
    --theme-shadow: rgba(0, 0, 0, .52);
    --theme-soft-shadow: rgba(0, 0, 0, .24);
    --theme-good: #22c55e;
    --theme-warning: #f59e0b;
    --theme-danger: #ef4444;
    --theme-info: #38bdf8;
    --desktop-card-radius: 22px;
}

html[data-theme="cyber-dark"] {
    color-scheme: dark;
    --bg-main: #050b14;
    --bg-card: rgba(15, 23, 42, .72);
    --bg-input: #111c2c;
    --accent-cyan: #00f0ff;
    --accent-cyan-glow: rgba(0, 240, 255, .20);
    --text-main: #f8fbff;
    --text-muted: #94a3b8;
    --border-color: rgba(0, 240, 255, .17);
    --theme-accent-rgb: 0, 240, 255;
    --theme-secondary-rgb: 59, 130, 246;
    --theme-card-solid: #0d1727;
    --theme-elevated: #122138;
    --theme-header: rgba(5, 11, 20, .86);
    --theme-grid: rgba(0, 240, 255, .038);
}

html[data-theme="arctic-light"] {
    color-scheme: light;
    --bg-main: #eef4f8;
    --bg-card: rgba(255, 255, 255, .82);
    --bg-input: #f8fbfd;
    --accent-cyan: #087ea4;
    --accent-cyan-glow: rgba(8, 126, 164, .18);
    --text-main: #102435;
    --text-muted: #5d7181;
    --border-color: rgba(8, 126, 164, .20);
    --theme-accent-rgb: 8, 126, 164;
    --theme-secondary-rgb: 37, 99, 235;
    --theme-card-solid: #ffffff;
    --theme-elevated: #f4f9fc;
    --theme-header: rgba(244, 249, 252, .88);
    --theme-grid: rgba(8, 126, 164, .055);
    --theme-shadow: rgba(44, 78, 96, .18);
    --theme-soft-shadow: rgba(44, 78, 96, .10);
}

html[data-theme="ocean-blue"] {
    color-scheme: dark;
    --bg-main: #03111d;
    --bg-card: rgba(6, 31, 50, .78);
    --bg-input: #0a263c;
    --accent-cyan: #38bdf8;
    --accent-cyan-glow: rgba(56, 189, 248, .22);
    --text-main: #effaff;
    --text-muted: #8eb6ca;
    --border-color: rgba(56, 189, 248, .20);
    --theme-accent-rgb: 56, 189, 248;
    --theme-secondary-rgb: 14, 165, 233;
    --theme-card-solid: #071e31;
    --theme-elevated: #0b2a44;
    --theme-header: rgba(3, 17, 29, .88);
    --theme-grid: rgba(56, 189, 248, .045);
}

html[data-theme="industrial-amber"] {
    color-scheme: dark;
    --bg-main: #0f0d08;
    --bg-card: rgba(34, 28, 16, .76);
    --bg-input: #292113;
    --accent-cyan: #ffb000;
    --accent-cyan-glow: rgba(255, 176, 0, .22);
    --text-main: #fff8e7;
    --text-muted: #b7a987;
    --border-color: rgba(255, 176, 0, .21);
    --theme-accent-rgb: 255, 176, 0;
    --theme-secondary-rgb: 249, 115, 22;
    --theme-card-solid: #1b160c;
    --theme-elevated: #2a2111;
    --theme-header: rgba(15, 13, 8, .90);
    --theme-grid: rgba(255, 176, 0, .04);
}

html[data-theme="emerald-matrix"] {
    color-scheme: dark;
    --bg-main: #020e0a;
    --bg-card: rgba(6, 31, 23, .76);
    --bg-input: #0b281e;
    --accent-cyan: #34d399;
    --accent-cyan-glow: rgba(52, 211, 153, .22);
    --text-main: #effff8;
    --text-muted: #89b9a5;
    --border-color: rgba(52, 211, 153, .20);
    --theme-accent-rgb: 52, 211, 153;
    --theme-secondary-rgb: 16, 185, 129;
    --theme-card-solid: #071d15;
    --theme-elevated: #0c2c20;
    --theme-header: rgba(2, 14, 10, .90);
    --theme-grid: rgba(52, 211, 153, .042);
}

html[data-theme="violet-nebula"] {
    color-scheme: dark;
    --bg-main: #0b0613;
    --bg-card: rgba(31, 16, 52, .76);
    --bg-input: #28163f;
    --accent-cyan: #c084fc;
    --accent-cyan-glow: rgba(192, 132, 252, .22);
    --text-main: #fff7ff;
    --text-muted: #bca6cb;
    --border-color: rgba(192, 132, 252, .21);
    --theme-accent-rgb: 192, 132, 252;
    --theme-secondary-rgb: 236, 72, 153;
    --theme-card-solid: #1b0e2e;
    --theme-elevated: #2b1745;
    --theme-header: rgba(11, 6, 19, .90);
    --theme-grid: rgba(192, 132, 252, .042);
}

body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    transition: background-color .35s ease, color .35s ease;
}

body::before,
body::after {
    content: "";
    position: fixed;
    width: 44vw;
    height: 44vw;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .11;
    pointer-events: none;
    z-index: -2;
    will-change: transform;
}
body::before {
    top: -18vw;
    right: -13vw;
    background: rgb(var(--theme-accent-rgb));
    animation: zgfAuroraOne 18s ease-in-out infinite alternate;
}
body::after {
    bottom: -20vw;
    left: -14vw;
    background: rgb(var(--theme-secondary-rgb));
    animation: zgfAuroraTwo 22s ease-in-out infinite alternate;
}
@keyframes zgfAuroraOne { to { transform: translate(-9vw, 11vh) scale(1.16); } }
@keyframes zgfAuroraTwo { to { transform: translate(11vw, -8vh) scale(.88); } }

.header {
    background: linear-gradient(180deg, var(--theme-header), color-mix(in srgb, var(--theme-header) 58%, transparent)) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 16px 44px var(--theme-soft-shadow);
}

.user-profile,
.card-pego,
.card-settings,
.server-hero,
.server-metric-card,
.server-table-panel,
.wg-profile-card,
.modal-content {
    color: var(--text-main);
}

.form-control,
.form-select,
.input-group-text,
textarea,
select {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.form-control::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 78%, transparent) !important; }
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 0 .22rem rgba(var(--theme-accent-rgb), .14) !important;
}

.text-muted,
.text-secondary { color: var(--text-muted) !important; }
.text-cyan { color: var(--accent-cyan) !important; }

.table-dark-custom,
.table-dark,
.table {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    color: var(--text-main) !important;
}
.table-dark-custom thead,
.table-dark thead {
    color: var(--accent-cyan);
}
.table-dark-custom tbody tr,
.table-dark tbody tr,
.table tbody tr {
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.table-dark-custom tbody tr:hover,
.table-dark tbody tr:hover,
.table tbody tr:hover {
    background: rgba(var(--theme-accent-rgb), .075) !important;
}

.modal-content,
.modal-server-glass .modal-content,
#userModal .modal-content {
    background: linear-gradient(145deg, var(--theme-card-solid), var(--theme-elevated)) !important;
    border-color: rgba(var(--theme-accent-rgb), .32) !important;
    box-shadow: 0 30px 90px var(--theme-shadow), 0 0 42px rgba(var(--theme-accent-rgb), .10) !important;
}
.modal.fade .modal-dialog { transform: translateY(22px) scale(.97); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.modal.show .modal-dialog { transform: translateY(0) scale(1); }

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease !important;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 10%, rgba(255,255,255,.22) 45%, transparent 72%);
    transform: translateX(-135%);
    transition: transform .55s ease;
    z-index: -1;
}
@media (hover:hover) {
    .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--theme-accent-rgb), .13); }
    .btn:hover::after { transform: translateX(135%); }
}
.btn:active { transform: translateY(0) scale(.97) !important; }

.theme-quick-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(var(--theme-accent-rgb), .09);
    color: var(--accent-cyan);
    box-shadow: inset 0 0 14px rgba(var(--theme-accent-rgb), .08);
}
.theme-quick-button i { animation: themePaletteFloat 3.2s ease-in-out infinite; }
@keyframes themePaletteFloat { 50% { transform: rotate(12deg) scale(1.08); } }

/* Theme chooser */
.theme-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(var(--theme-accent-rgb), .14), transparent 48%),
        var(--bg-card);
    box-shadow: 0 20px 55px var(--theme-soft-shadow);
}
.theme-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--theme-accent-rgb), .25), transparent 68%);
    animation: themeHeroPulse 5s ease-in-out infinite;
}
@keyframes themeHeroPulse { 50% { transform: scale(1.18); opacity: .55; } }

.theme-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 18px;
}
.theme-choice {
    position: relative;
    overflow: hidden;
    min-height: 218px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--theme-card-solid);
    cursor: pointer;
    box-shadow: 0 15px 35px var(--theme-soft-shadow);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.theme-choice:hover { transform: translateY(-7px); border-color: var(--theme-preview-accent); box-shadow: 0 22px 45px color-mix(in srgb, var(--theme-preview-accent) 22%, transparent); }
.theme-choice.selected { border-color: var(--theme-preview-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-preview-accent) 38%, transparent), 0 22px 48px var(--theme-soft-shadow); }
.theme-choice.selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--theme-preview-accent);
    color: white;
    box-shadow: 0 0 20px color-mix(in srgb, var(--theme-preview-accent) 50%, transparent);
}
.theme-preview {
    height: 112px;
    padding: 14px;
    background: var(--theme-preview-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-preview-accent) 22%, transparent);
}
.theme-preview-top { height: 13px; border-radius: 10px; background: color-mix(in srgb, var(--theme-preview-accent) 75%, white 8%); margin-bottom: 10px; width: 58%; }
.theme-preview-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.theme-preview-card { height: 57px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--theme-preview-accent) 30%, transparent); background: color-mix(in srgb, var(--theme-preview-bg) 82%, white 8%); position: relative; overflow: hidden; }
.theme-preview-card::before { content:""; position:absolute; left:8px; right:8px; top:9px; height:5px; border-radius:5px; background:var(--theme-preview-accent); opacity:.75; }
.theme-preview-card::after { content:""; position:absolute; left:8px; right:18px; top:23px; height:18px; border-radius:5px; background:color-mix(in srgb, var(--theme-preview-accent) 18%, transparent); }
.theme-choice-body { padding: 16px 17px 18px; }
.theme-choice-title { font-weight: 800; color: var(--text-main); margin-bottom: 5px; }
.theme-choice-description { color: var(--text-muted); font-size: .82rem; line-height: 1.35; }
.theme-option-panel { border:1px solid var(--border-color); border-radius:18px; background:var(--bg-card); padding:18px; }
.theme-current-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-color); border-radius:999px; padding:7px 13px; background:rgba(var(--theme-accent-rgb),.08); color:var(--accent-cyan); font-weight:800; }
.theme-current-pill::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--accent-cyan); box-shadow:0 0 12px var(--accent-cyan); animation:pulseGlow 2s infinite; }
.theme-user-badge { display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-size:.72rem; color:var(--text-muted); }
.theme-user-badge span { width:8px; height:8px; border-radius:50%; background:var(--user-theme-accent, var(--accent-cyan)); box-shadow:0 0 8px var(--user-theme-accent, var(--accent-cyan)); }

/* Desktop refinement – deliberately kept outside the mobile breakpoint. */
@media (min-width: 1100px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 1035;
        min-height: 92px;
        padding: 16px 34px !important;
        backdrop-filter: blur(24px) saturate(145%);
    }
    .header::after {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
        opacity: .6;
    }
    #app-content > .container-fluid { max-width: 1880px; margin-inline: auto; }
    #mainTabs {
        position: sticky;
        top: 94px;
        z-index: 1020;
        margin: 20px auto 32px !important;
        padding: 10px;
        width: fit-content;
        max-width: calc(100vw - 80px);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: color-mix(in srgb, var(--theme-header) 86%, transparent);
        backdrop-filter: blur(18px);
        box-shadow: 0 16px 42px var(--theme-soft-shadow);
    }
    #mainTabs .nav-link { margin: 0 !important; }
    #mainTabs .nav-link.active {
        color: var(--text-main) !important;
        background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), .22), rgba(var(--theme-secondary-rgb), .13)) !important;
        border-color: var(--accent-cyan) !important;
        box-shadow: 0 0 22px rgba(var(--theme-accent-rgb), .16), inset 0 1px rgba(255,255,255,.08);
    }
    .card-pego,
    .card-settings {
        position: relative;
        border-radius: var(--desktop-card-radius) !important;
        background:
            linear-gradient(150deg, rgba(255,255,255,.032), transparent 38%),
            var(--bg-card) !important;
        backdrop-filter: blur(18px) saturate(130%);
        box-shadow: 0 18px 50px var(--theme-shadow), inset 0 1px rgba(255,255,255,.035) !important;
        overflow: hidden;
    }
    .card-pego::before,
    .card-settings::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), .45), transparent 28%, transparent 70%, rgba(var(--theme-secondary-rgb), .25));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: .65;
    }
    .card-pego::after,
    .card-settings::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        right: -85px;
        top: -85px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(var(--theme-accent-rgb), .12), transparent 70%);
        pointer-events: none;
        transition: transform .45s ease, opacity .45s ease;
    }
    .card-pego:hover::after,
    .card-settings:hover::after { transform: scale(1.45); opacity: .9; }
    .pego-card-container { animation: desktopCardIn .55s cubic-bezier(.2,.85,.25,1) both; }
    .pego-card-container:nth-child(2n) { animation-delay: .05s; }
    .pego-card-container:nth-child(3n) { animation-delay: .10s; }
    .pego-card-container:nth-child(4n) { animation-delay: .15s; }
    @keyframes desktopCardIn { from { opacity:0; transform:translateY(22px) scale(.98); } to { opacity:1; transform:none; } }
    .settings-sidebar {
        position: sticky;
        top: 178px;
        max-height: calc(100vh - 200px);
        overflow: auto;
        padding-right: 4px;
    }
    .settings-sidebar .nav-link {
        position: relative;
        overflow: hidden;
        min-height: 50px;
        background: rgba(var(--theme-accent-rgb), .018);
    }
    .settings-sidebar .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 3px;
        background: var(--accent-cyan);
        box-shadow: 0 0 14px var(--accent-cyan);
        transition: height .25s ease, top .25s ease;
    }
    .settings-sidebar .nav-link.active::after { height: 62%; top: 19%; }
    .table-responsive { border-radius: 16px; }
    .table-dark-custom thead th,
    .table-dark thead th,
    .table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: color-mix(in srgb, var(--theme-card-solid) 90%, transparent);
        backdrop-filter: blur(12px);
        padding-block: 13px;
        letter-spacing: .45px;
        font-size: .77rem;
        text-transform: uppercase;
    }
    .table-dark-custom tbody tr:hover,
    .table-dark tbody tr:hover,
    .table tbody tr:hover { transform: translateX(3px); box-shadow: -3px 0 0 var(--accent-cyan); }
    .server-metric-card,
    .wg-profile-card,
    .server-table-panel {
        box-shadow: 0 16px 38px var(--theme-soft-shadow) !important;
        transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }
    .server-metric-card:hover,
    .wg-profile-card:hover,
    .server-table-panel:hover {
        transform: translateY(-5px);
        border-color: rgba(var(--theme-accent-rgb), .42) !important;
        box-shadow: 0 24px 50px var(--theme-soft-shadow), 0 0 24px rgba(var(--theme-accent-rgb), .08) !important;
    }
}

html[data-density="compact"] .card-pego,
html[data-density="compact"] .card-settings { --bs-card-spacer-y: .75rem; }
html[data-density="compact"] .table td,
html[data-density="compact"] .table th,
html[data-density="compact"] .table-dark-custom td,
html[data-density="compact"] .table-dark-custom th { padding-top: .45rem !important; padding-bottom: .45rem !important; }
html[data-density="compact"] .settings-sidebar .nav-link { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 42px; }

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .08s !important;
}

html[data-theme="arctic-light"] .btn-close { filter: none !important; }
html[data-theme="arctic-light"] .text-white { color: var(--text-main) !important; }
html[data-theme="arctic-light"] .bg-dark,
html[data-theme="arctic-light"] .table-dark,
html[data-theme="arctic-light"] .dropdown-menu-dark { background-color: var(--theme-card-solid) !important; color: var(--text-main) !important; }
html[data-theme="arctic-light"] .alert-secondary { background: #eaf2f7; color: #243746; }
html[data-theme="arctic-light"] .user-profile { background: rgba(255,255,255,.68) !important; }
html[data-theme="arctic-light"] #login-overlay { background: #eaf2f7 !important; }
html[data-theme="arctic-light"] .login-box { background: rgba(255,255,255,.88) !important; }

@media (max-width: 1099px) {
    .theme-gallery { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 680px) {
    .theme-gallery { grid-template-columns: 1fr; }
    .theme-choice { min-height: 195px; }
    .theme-hero { border-radius: 18px; }
    body::before, body::after { opacity: .07; }
}

/* Harmonize legacy hard-coded panels with the selected palette. */
body {
    background-image:
        linear-gradient(var(--theme-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-grid) 1px, transparent 1px) !important;
}
#login-overlay {
    background-color: var(--bg-main) !important;
    background-image: radial-gradient(circle at 50% 28%, rgba(var(--theme-accent-rgb), .16), transparent 36%), linear-gradient(160deg, var(--bg-main), color-mix(in srgb, var(--bg-main) 78%, black)) !important;
}
.login-box {
    background: color-mix(in srgb, var(--theme-card-solid) 84%, transparent) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 24px 80px var(--theme-shadow), 0 0 48px rgba(var(--theme-accent-rgb), .16) !important;
}
.server-hero,
.server-metric-card,
.server-table-panel,
.wg-profile-card,
.wg-peer-row,
.server-connection-row {
    background-color: color-mix(in srgb, var(--theme-card-solid) 86%, transparent) !important;
    border-color: var(--border-color) !important;
}
.server-health-core,
.server-action-icon,
.wg-tunnel-icon {
    border-color: rgba(var(--theme-accent-rgb), .30) !important;
}
.nav-pills .nav-link,
.settings-sidebar .nav-link {
    color: var(--text-muted) !important;
}
.nav-pills .nav-link.active,
.settings-sidebar .nav-link.active {
    color: var(--accent-cyan) !important;
}