/* StealthRDP Cobalt visual layer for the unmodified VirtFusion module. */
#vf-vnc-panel,
#vf-sec-overview,
#vf-sec-traffic,
#vf-sec-livestats,
#vf-sec-power,
#vf-sec-manage,
#vf-sec-rebuild,
#vf-sec-rdns,
#vf-sec-billing,
#vf-resources-panel,
#vf-selfservice-panel {
    border: 1px solid var(--cobalt-border) !important;
    border-radius: var(--cobalt-radius) !important;
    background: var(--cobalt-surface-1) !important;
    box-shadow: none !important;
    overflow: hidden;
}

#vf-vnc-panel .card-header,
#vf-sec-overview .card-header,
#vf-sec-traffic .card-header,
#vf-sec-livestats .card-header,
#vf-sec-power .card-header,
#vf-sec-manage .card-header,
#vf-sec-rebuild .card-header,
#vf-sec-rdns .card-header,
#vf-sec-billing .card-header,
#vf-resources-panel .card-header,
#vf-selfservice-panel .card-header {
    border-bottom: 1px solid var(--cobalt-border) !important;
    background: var(--cobalt-surface-2) !important;
    color: var(--cobalt-text) !important;
}

#vf-vnc-panel .card-body,
#vf-sec-overview .card-body,
#vf-sec-traffic .card-body,
#vf-sec-livestats .card-body,
#vf-sec-power .card-body,
#vf-sec-manage .card-body,
#vf-sec-rebuild .card-body,
#vf-sec-rdns .card-body,
#vf-sec-billing .card-body,
#vf-resources-panel .card-body,
#vf-selfservice-panel .card-body {
    background: var(--cobalt-surface-1) !important;
    color: var(--cobalt-text) !important;
}

#vf-vnc-panel p,
#vf-sec-overview .text-muted,
#vf-sec-traffic .text-muted,
#vf-sec-livestats .text-muted,
#vf-sec-power .text-muted,
#vf-sec-manage .text-muted,
#vf-sec-rebuild .text-muted,
#vf-sec-rdns .text-muted,
#vf-sec-billing .text-muted,
#vf-resources-panel .text-muted,
#vf-selfservice-panel .text-muted {
    color: var(--cobalt-muted) !important;
}

#vf-vnc-panel .btn-primary,
#vf-sec-overview .btn-primary,
#vf-sec-manage .btn-primary,
#vf-sec-rebuild .btn-primary,
#vf-vnc-panel .btn-primary:hover,
#vf-sec-overview .btn-primary:hover,
#vf-sec-manage .btn-primary:hover,
#vf-sec-rebuild .btn-primary:hover {
    border-color: var(--cobalt-accent) !important;
    background: var(--cobalt-accent) !important;
    color: var(--cobalt-accent-ink) !important;
}

#vf-sec-overview .form-control,
#vf-sec-manage .form-control,
#vf-sec-rebuild .form-control,
#vf-sec-rdns .form-control,
#vf-sec-billing .form-control,
#vf-selfservice-panel .form-control,
#vf-vnc-panel .form-control {
    border: 1px solid var(--cobalt-border-strong) !important;
    border-radius: 7px !important;
    background: var(--cobalt-bg-elevated) !important;
    color: var(--cobalt-text) !important;
}

#vf-sec-overview .form-control:focus,
#vf-sec-manage .form-control:focus,
#vf-sec-rebuild .form-control:focus,
#vf-sec-rdns .form-control:focus,
#vf-sec-billing .form-control:focus,
#vf-selfservice-panel .form-control:focus,
#vf-vnc-panel .form-control:focus {
    border-color: var(--cobalt-accent) !important;
    box-shadow: 0 0 0 3px var(--cobalt-accent-soft) !important;
}

.vf-badge {
    border: 1px solid var(--cobalt-border-strong) !important;
    border-radius: 999px !important;
    font-family: var(--cobalt-font-mono) !important;
    letter-spacing: .04em;
}
.vf-badge-active { border-color: rgba(47,212,124,.4) !important; background: rgba(47,212,124,.12) !important; color: #8de4ac !important; }
.vf-badge-awaiting { border-color: rgba(245,185,59,.4) !important; background: rgba(245,185,59,.12) !important; color: #f5d37f !important; }
.vf-badge-suspended { border-color: rgba(229,72,77,.4) !important; background: rgba(229,72,77,.12) !important; color: #ff9b9f !important; }

.vf-os-category-header,
#vf-checkout-os-gallery .vf-os-category-header {
    border: 1px solid var(--cobalt-border) !important;
    border-radius: 8px !important;
    background: var(--cobalt-surface-2) !important;
    color: var(--cobalt-text) !important;
    transition: border-color .18s ease, background .18s ease;
}
.vf-os-category-header:hover,
#vf-checkout-os-gallery .vf-os-category-header:hover {
    border-color: var(--cobalt-accent) !important;
    background: var(--cobalt-surface-3) !important;
}
.vf-os-grid,
#vf-checkout-os-gallery .vf-os-grid {
    gap: 10px !important;
    padding: 10px 0 2px !important;
}
.vf-os-card,
#vf-checkout-os-gallery .vf-os-card {
    min-height: 112px !important;
    border: 1px solid var(--cobalt-border) !important;
    border-radius: 9px !important;
    background: var(--cobalt-surface-1) !important;
    color: var(--cobalt-text) !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.vf-os-card:hover,
#vf-checkout-os-gallery .vf-os-card:hover {
    border-color: var(--cobalt-accent) !important;
    background: var(--cobalt-surface-2) !important;
    transform: translateY(-1px);
}
.vf-os-card-selected,
#vf-checkout-os-gallery .vf-os-card-selected {
    border-color: var(--cobalt-accent) !important;
    background: var(--cobalt-accent-soft) !important;
    box-shadow: 0 0 0 2px var(--cobalt-accent-soft) !important;
}
.vf-os-search {
    border-color: var(--cobalt-border-strong) !important;
    border-radius: 7px !important;
    background: var(--cobalt-bg-elevated) !important;
    color: var(--cobalt-text) !important;
}
.vf-os-version,
.vf-os-eol-badge {
    color: var(--cobalt-muted) !important;
    font-family: var(--cobalt-font-mono) !important;
}
.vf-os-eol-badge { border-color: rgba(229,72,77,.4) !important; background: rgba(229,72,77,.12) !important; color: #ff9b9f !important; }

.vf-slider-container {
    margin-top: 8px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--cobalt-border) !important;
    border-radius: 8px !important;
    background: var(--cobalt-surface-2) !important;
}
.vf-slider-value { color: var(--cobalt-text) !important; font-family: var(--cobalt-font-mono) !important; }
.vf-slider { accent-color: var(--cobalt-accent) !important; }
.vf-slider::-webkit-slider-runnable-track { background: var(--cobalt-border-strong) !important; }
.vf-slider::-webkit-slider-thumb { background: var(--cobalt-accent) !important; }

#vf-action-progress { background: var(--cobalt-accent-soft) !important; color: var(--cobalt-text) !important; border: 1px solid var(--cobalt-accent) !important; }
#vf-server-info-loader .vf-skeleton,
.vf-skeleton { background: linear-gradient(90deg, var(--cobalt-surface-2) 25%, var(--cobalt-surface-3) 50%, var(--cobalt-surface-2) 75%) !important; background-size: 200% 100% !important; }
.vf-ip-address, .vf-mono, #vf-sec-overview code { font-family: var(--cobalt-font-mono) !important; }

#vf-sec-power .btn-success { border-color: rgba(47,212,124,.5) !important; background: rgba(47,212,124,.12) !important; color: #9deabd !important; }
#vf-sec-power .btn-warning { border-color: rgba(245,185,59,.5) !important; background: rgba(245,185,59,.12) !important; color: #f5d37f !important; }
#vf-sec-power .btn-danger { border-color: rgba(229,72,77,.5) !important; background: rgba(229,72,77,.12) !important; color: #ff9b9f !important; }

@media (max-width: 760px) {
    #vf-vnc-panel .card-body,
    #vf-sec-overview .card-body,
    #vf-sec-traffic .card-body,
    #vf-sec-livestats .card-body,
    #vf-sec-power .card-body,
    #vf-sec-manage .card-body,
    #vf-sec-rebuild .card-body { padding: 16px !important; }
    .vf-os-card, #vf-checkout-os-gallery .vf-os-card { min-height: 96px !important; }
    .vf-power-buttons { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vf-btn-power { min-width: 0 !important; width: 100%; }
}

html[data-mode="light"] .vf-badge-active,
html[data-mode="light"] #vf-sec-power .btn-success { border-color: rgba(22,131,77,.38) !important; background: rgba(22,131,77,.10) !important; color: #12633d !important; }
html[data-mode="light"] .vf-badge-awaiting,
html[data-mode="light"] #vf-sec-power .btn-warning { border-color: rgba(180,117,10,.38) !important; background: rgba(245,185,59,.16) !important; color: #80580a !important; }
html[data-mode="light"] .vf-badge-suspended,
html[data-mode="light"] .vf-os-eol-badge,
html[data-mode="light"] #vf-sec-power .btn-danger { border-color: rgba(201,54,61,.38) !important; background: rgba(201,54,61,.10) !important; color: #9f252b !important; }
html[data-mode="light"] #vf-action-progress { color: var(--cobalt-text) !important; }