/* =====================================================================
   EVEVPS — VirtFusion Direct client-area skin
   Restyles modules/servers/VirtFusionDirect to match the Phox theme.
   Loaded after the module's own module.css by
   includes/hooks/evevps_virtfusion_skin.php — the module itself is
   untouched, so `install.sh upgrade` keeps working.
   Every colour comes from Phox design tokens (templates/phox/css/
   custom.css) with fallbacks, so changing the brand there restyles this.
   ===================================================================== */

:root {
    --vfs-primary:   var(--primary, #111827);
    --vfs-text:      var(--text, var(--neutral-900, #111827));
    --vfs-muted:     var(--text-lifted, var(--neutral-500, #6b7280));
    --vfs-faint:     var(--text-muted, var(--neutral-400, #9ca3af));
    --vfs-bg:        var(--block-bg, #fff);
    --vfs-subtle:    var(--neutral-50, #fbf9fa);
    --vfs-soft:      var(--neutral-100, #f4f5f7);
    --vfs-line:      var(--neutral-200, #e4e4e7);
    --vfs-success:   var(--success, #00a63e);
    --vfs-warning:   var(--warning, #f54a00);
    --vfs-danger:    var(--error, #e7000b);
    --vfs-info:      var(--info, #155dfc);
    --vfs-radius:    14px;
    --vfs-radius-sm: 9px;
    --vfs-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --vfs-shadow-hover: 0 4px 16px rgba(16, 24, 40, .08);
    --vfs-ease:      cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Panels ------------------------------------------------- */
[id^="vf-sec-"].panel,
#vf-vnc-panel.panel {
    background: var(--vfs-bg);
    border: 1px solid var(--vfs-line) !important;
    border-radius: var(--vfs-radius) !important;
    box-shadow: var(--vfs-shadow);
    overflow: hidden;
    margin-bottom: 18px !important;
    transition: box-shadow .25s var(--vfs-ease);
}
[id^="vf-sec-"].panel:hover,
#vf-vnc-panel.panel:hover { box-shadow: var(--vfs-shadow-hover); }

[id^="vf-sec-"] > .panel-heading,
#vf-vnc-panel > .panel-heading {
    background: var(--vfs-bg) !important;
    border-bottom: 1px solid var(--vfs-line) !important;
    padding: 16px 24px !important;
}
[id^="vf-sec-"] > .panel-heading .panel-title,
#vf-vnc-panel > .panel-heading .panel-title {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100%;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--vfs-text);
}
/* small accent bar in front of every section title */
[id^="vf-sec-"] > .panel-heading .panel-title::before,
#vf-vnc-panel > .panel-heading .panel-title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: var(--vfs-primary);
}
[id^="vf-sec-"] > .panel-body,
#vf-vnc-panel > .panel-body { padding: 22px 24px !important; }

/* ---------- Status badge ------------------------------------------ */
.vf-badge {
    float: none !important;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
}
.vf-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.vf-badge-active    { background: color-mix(in srgb, var(--vfs-success) 12%, transparent); color: var(--vfs-success); }
.vf-badge-active::before { animation: vfs-pulse 2s infinite; }
.vf-badge-awaiting  { background: color-mix(in srgb, var(--vfs-warning) 12%, transparent); color: var(--vfs-warning); }
.vf-badge-suspended { background: color-mix(in srgb, var(--vfs-danger) 12%, transparent);  color: var(--vfs-danger); }

@keyframes vfs-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vfs-success) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Overview: meta chips + info grid ----------------------- */
.vf-overview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.vf-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--vfs-soft);
    border: 1px solid var(--vfs-line);
    color: var(--vfs-text);
    font-size: 12px;
    font-weight: 500;
}
.vf-meta-chip-muted { color: var(--vfs-muted); background: var(--vfs-subtle); }
.vf-mask-ips-btn {
    margin-left: auto;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--vfs-line) !important;
    background: var(--vfs-bg) !important;
    color: var(--vfs-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.vf-mask-ips-btn:hover { color: var(--vfs-text) !important; border-color: var(--vfs-faint) !important; }

#vf-server-info .row.p-1 {
    margin-left: 0;
    margin-right: 0;
    padding: 11px 4px !important;
    border-bottom: 1px dashed var(--vfs-line);
    align-items: center;
}
#vf-server-info .col-md-6 > .row.p-1:last-child { border-bottom: 0; }
#vf-server-info .row.p-1 > .col-4 {
    text-align: left !important;
    color: var(--vfs-muted);
    font-size: 12.5px;
    font-weight: 500 !important;
    padding-left: 0;
}
#vf-server-info .row.p-1 > .col-8 {
    color: var(--vfs-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vf-overview-footer { border-top: 1px solid var(--vfs-line) !important; }

/* IP addresses — monospace pills with copy button */
.vf-ip-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 500;
}
.vf-ip-cell-row { padding: 2px 0; }
.vf-ip-copy {
    border-radius: 6px;
    opacity: .55;
    transition: opacity .15s, background .15s;
}
.vf-ip-copy:hover { opacity: 1; background: var(--vfs-soft); }

/* ---------- Buttons ------------------------------------------------ */
[id^="vf-sec-"] .btn,
#vf-vnc-panel .btn {
    border-radius: var(--vfs-radius-sm);
    font-weight: 600;
    transition: transform .15s var(--vfs-ease), box-shadow .15s var(--vfs-ease), background-color .15s, color .15s;
}
[id^="vf-sec-"] .btn:not(:disabled):hover,
#vf-vnc-panel .btn:not(:disabled):hover { transform: translateY(-1px); }
[id^="vf-sec-"] .btn:not(:disabled):active,
#vf-vnc-panel .btn:not(:disabled):active { transform: translateY(0); }
[id^="vf-sec-"] .text-uppercase.btn { text-transform: none !important; }

/* Coloured buttons (Phox leaves some of these unstyled): soft tint, fill on hover */
[id^="vf-sec-"] .btn-success,
[id^="vf-sec-"] .btn-warning,
[id^="vf-sec-"] .btn-info,
[id^="vf-sec-"] .btn-danger,
.vf-btn-power {
    --vfs-c: var(--vfs-primary);
    padding: 9px 16px !important;
    text-transform: none !important;
    font-size: 13px !important;
    letter-spacing: 0;
    background: color-mix(in srgb, var(--vfs-c) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--vfs-c) 22%, transparent) !important;
    color: var(--vfs-c) !important;
    box-shadow: none !important;
}
[id^="vf-sec-"] .btn-success { --vfs-c: var(--vfs-success); }
[id^="vf-sec-"] .btn-warning { --vfs-c: var(--vfs-warning); }
[id^="vf-sec-"] .btn-info    { --vfs-c: var(--vfs-info); }
[id^="vf-sec-"] .btn-danger  { --vfs-c: var(--vfs-danger); }
[id^="vf-sec-"] .btn-success:not(:disabled):hover,
[id^="vf-sec-"] .btn-warning:not(:disabled):hover,
[id^="vf-sec-"] .btn-info:not(:disabled):hover,
[id^="vf-sec-"] .btn-danger:not(:disabled):hover {
    background: var(--vfs-c) !important;
    border-color: var(--vfs-c) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--vfs-c) 30%, transparent) !important;
}
[id^="vf-sec-"] .btn:disabled { opacity: .45; }

/* Power buttons: equal-width tiles */
.vf-power-buttons { gap: 10px; }
[id^="vf-sec-"] .vf-btn-power { min-width: 128px; padding: 11px 18px !important; }

/* ---------- Progress / live bars ----------------------------------- */
.vf-live-bar,
.vf-resource-item .progress,
.vf-fs-row .progress {
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--vfs-soft) !important;
    overflow: hidden;
}
.vf-live-bar-fill,
.vf-resource-item .progress-bar,
.vf-fs-row .progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vfs-primary), color-mix(in srgb, var(--vfs-primary) 65%, #fff));
    transition: width .6s var(--vfs-ease);
}
.vf-live-bar-fill.bg-warning, .vf-fs-row .progress-bar.bg-warning { background: var(--vfs-warning) !important; }
.vf-live-bar-fill.bg-danger,  .vf-fs-row .progress-bar.bg-danger  { background: var(--vfs-danger) !important; }

/* Traffic summary numbers */
#vf-traffic-used, #vf-traffic-limit, #vf-traffic-remaining {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--vfs-text);
    font-variant-numeric: tabular-nums;
}

/* ---------- Rebuild: OS picker ------------------------------------- */
.vf-os-category-header {
    border-radius: var(--vfs-radius-sm);
    padding: 10px 12px;
    transition: background .15s;
}
.vf-os-category-header:hover { background: var(--vfs-soft); }
.vf-os-grid { gap: 10px; }
.vf-os-card {
    border: 1px solid var(--vfs-line) !important;
    border-radius: 12px !important;
    background: var(--vfs-bg);
    transition: transform .18s var(--vfs-ease), box-shadow .18s var(--vfs-ease), border-color .18s;
}
.vf-os-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--vfs-primary) 35%, var(--vfs-line)) !important;
    box-shadow: var(--vfs-shadow-hover);
}
.vf-os-card-selected {
    border-color: var(--vfs-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vfs-primary) 15%, transparent) !important;
    background: color-mix(in srgb, var(--vfs-primary) 4%, var(--vfs-bg));
}
.vf-os-label { font-weight: 600; color: var(--vfs-text); }
.vf-os-version { color: var(--vfs-muted); }
.vf-os-search, #vf-sec-rebuild .form-control {
    border-radius: var(--vfs-radius-sm) !important;
}

/* ---------- Form controls inside module panels --------------------- */
[id^="vf-sec-"] .form-control,
[id^="vf-sec-"] select {
    border-radius: var(--vfs-radius-sm);
    border-color: var(--vfs-line);
}
[id^="vf-sec-"] .form-control:focus {
    border-color: var(--vfs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vfs-primary) 14%, transparent);
}
.vf-slider { accent-color: var(--vfs-primary); }
.vf-toggle-input:checked + .vf-toggle-switch { background: var(--vfs-primary) !important; }

/* ---------- Alerts inside module panels ---------------------------- */
[id^="vf-sec-"] .alert,
#vf-vnc-panel .alert,
#vf-maintenance-banner {
    border-radius: var(--vfs-radius-sm);
    border-width: 1px;
    font-size: 13px;
}

/* ---------- Backups timeline --------------------------------------- */
.vf-timeline-dot { box-shadow: 0 0 0 4px var(--vfs-bg); }
.vf-timeline-dot-success { background: var(--vfs-success) !important; }
.vf-timeline-dot-pending { background: var(--vfs-warning) !important; }

/* ---------- Skeleton loader ---------------------------------------- */
.vf-skeleton-line {
    border-radius: 6px;
    background: linear-gradient(90deg, var(--vfs-soft) 25%, var(--vfs-line) 37%, var(--vfs-soft) 63%) !important;
    background-size: 400% 100% !important;
    animation: vfs-shimmer 1.4s ease infinite;
}
@keyframes vfs-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Confirm dialog ----------------------------------------- */
.vf-confirm-dialog {
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22) !important;
}
.vf-confirm-backdrop { backdrop-filter: blur(3px); }

/* ---------- Sidebar "On this page" nav ----------------------------- */
.vf-nav-link {
    border-radius: 8px;
    transition: background .15s, color .15s, padding .15s;
}
.vf-nav-link:hover, .vf-nav-link:focus {
    background: var(--vfs-soft);
    color: var(--vfs-primary) !important;
    padding-left: 14px;
}

/* ---------- Small screens ------------------------------------------ */
@media (max-width: 575.98px) {
    [id^="vf-sec-"] > .panel-heading, #vf-vnc-panel > .panel-heading { padding: 14px 16px !important; }
    [id^="vf-sec-"] > .panel-body,    #vf-vnc-panel > .panel-body    { padding: 16px !important; }
    .vf-btn-power { flex: 1 1 calc(50% - 10px); min-width: 0; }
    .vf-mask-ips-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    [id^="vf-sec-"] *, #vf-vnc-panel * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   ORDER FORM (cart.php?a=confproduct) — OS gallery + SSH key
   Also applies to the Rebuild OS picker in the client area.
   ===================================================================== */

/* Field shells */
.vfs-field {
    background: var(--vfs-bg);
    border: 1px solid var(--vfs-line);
    border-radius: var(--vfs-radius);
    box-shadow: var(--vfs-shadow);
    padding: 20px 22px;
    margin-bottom: 18px !important;
}
.vfs-field > label { display: block; margin-bottom: 14px; }
.vfs-field-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--vfs-text);
}
.vfs-field-title em { font-style: normal; font-weight: 500; color: var(--vfs-faint); font-size: 13px; }
.vfs-field-hint {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--vfs-muted);
}

/* Search */
.vfs-os-picker .vf-os-search,
#vf-sec-rebuild .vf-os-search {
    height: 42px;
    padding-left: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--vfs-line) !important;
    background: var(--vfs-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.vfs-os-picker .vf-os-search:focus,
#vf-sec-rebuild .vf-os-search:focus {
    background-color: var(--vfs-bg) !important;
    border-color: var(--vfs-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vfs-primary) 12%, transparent) !important;
}

/* Gallery shell */
#vf-checkout-os-gallery {
    margin-top: 14px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 12px;
    transition: border-color .2s;
}

/* Category accordion */
.vf-os-category {
    border: 1px solid var(--vfs-line);
    border-radius: 12px;
    background: var(--vfs-bg);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.vf-os-category:has(.vf-os-grid:not([style*="none"])) {
    border-color: color-mix(in srgb, var(--vfs-primary) 25%, var(--vfs-line));
    box-shadow: var(--vfs-shadow);
}
.vf-os-category-header {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--vfs-text);
}
.vf-os-category-header:hover { background: var(--vfs-subtle) !important; }
.vf-os-category-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
}
.vf-os-category-icon.vfs-has-logo {
    background: var(--vfs-soft) !important;
    padding: 5px;
}
.vf-os-category-arrow {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vfs-soft);
    color: var(--vfs-muted) !important;
    font-size: 9px !important;
}

/* Grid of OS tiles */
.vf-os-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 10px !important;
    padding: 4px 16px 16px !important;
    margin: 0 !important;
}
.vf-os-grid[style*="none"] { display: none !important; }

.vf-os-card {
    position: relative;
    width: auto !important;
    padding: 16px 10px 14px !important;
    border: 1.5px solid var(--vfs-line) !important;
    border-radius: 12px !important;
    background: var(--vfs-bg);
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.vf-os-card::after {
    /* selection check */
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--vfs-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center;
    transform: scale(0);
    transition: transform .2s var(--vfs-ease);
}
.vf-os-card-selected::after { transform: scale(1); }

.vf-os-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 10px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
}
.vf-os-icon.vfs-has-logo {
    background: var(--vfs-soft) !important;
    padding: 8px;
}
.vf-os-icon img,
.vf-os-category-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}
.vfs-logo-mask {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--vfs-logo-c, var(--vfs-text));
    -webkit-mask: var(--vfs-logo) center / contain no-repeat;
            mask: var(--vfs-logo) center / contain no-repeat;
}
.vf-os-card:hover .vf-os-icon { transform: scale(1.06); }
.vf-os-icon { transition: transform .2s var(--vfs-ease); }

.vf-os-label { font-size: 13px !important; line-height: 1.25 !important; }
.vf-os-version { margin-top: 3px; font-size: 11.5px !important; line-height: 1.3 !important; }
.vf-os-card-eol { opacity: .55; }
.vf-os-eol-badge {
    border-radius: 999px !important;
    padding: 2px 8px !important;
    font-size: 9.5px !important;
    letter-spacing: .05em;
    background: color-mix(in srgb, var(--vfs-danger) 12%, transparent) !important;
    color: var(--vfs-danger) !important;
}

/* SSH key block */
.vfs-field-ssh #vf-ssh-select,
.vfs-field-ssh textarea {
    border-radius: var(--vfs-radius-sm) !important;
    border-color: var(--vfs-line) !important;
}
.vfs-field-ssh #vf-ssh-paste {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--vfs-subtle);
}
.vfs-field-ssh .btn {
    border-radius: var(--vfs-radius-sm) !important;
    font-weight: 600;
}
#vf-privkey-panel {
    border: 1px solid color-mix(in srgb, var(--vfs-danger) 30%, transparent) !important;
    background: color-mix(in srgb, var(--vfs-danger) 5%, var(--vfs-bg));
    border-radius: 12px !important;
    padding: 16px !important;
}
#vf-privkey-panel textarea { background: var(--vfs-bg); }

@media (max-width: 575.98px) {
    .vfs-field { padding: 16px; }
    .vf-os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 12px !important; }
    .vf-os-card { padding: 14px 8px 12px !important; }
}

/* selected tile must beat the base .vf-os-card border rule above */
.vf-os-card.vf-os-card-selected {
    border-color: var(--vfs-primary) !important;
    background: color-mix(in srgb, var(--vfs-primary) 4%, var(--vfs-bg));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vfs-primary) 12%, transparent) !important;
}
.vf-os-card:not(.vf-os-card-selected):hover {
    border-color: color-mix(in srgb, var(--vfs-primary) 35%, var(--vfs-line)) !important;
}

/* outline buttons on the order form (Phox leaves btn-outline-secondary bare) */
.vfs-field .btn-outline-secondary,
.vfs-field .btn-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px !important;
    border: 1px solid var(--vfs-line) !important;
    background: var(--vfs-bg) !important;
    color: var(--vfs-text) !important;
    font-size: 13px !important;
    transition: border-color .15s, background-color .15s;
}
.vfs-field .btn-outline-secondary:hover,
.vfs-field .btn-default:hover {
    border-color: var(--vfs-primary) !important;
    background: var(--vfs-subtle) !important;
}
.vfs-field-ssh .btn-outline-secondary::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3Cpath d='m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3'/%3E%3C/svg%3E") center / contain no-repeat;
}