/* ------------------------------------------------------------------
   OzVPS custom overrides
   Loaded by Lagom from core/styles/<style>/assets/css/custom.css
   Not part of the theme package, so it survives Lagom updates.
   ------------------------------------------------------------------ */

:root {
    /* Header logo. Lagom default 42px. Navbar height derives from this. */
    --app-nav-logo-height: 50px;
    /* Login / register page logo. Lagom default 56px. */
    --login-logo-height: 68px;
}

/* ------------------------------------------------------------------
   Login side panel: use a photograph instead of Lagom's built-in SVG.

   Lagom paints the panel with `background: var(--brand-*-gradient-v)`
   at (0,3,0) specificity. A shorthand `background` also resets
   background-image, so we must match that specificity AND use the
   shorthand ourselves.
   ------------------------------------------------------------------ */
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration,
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-default,
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-primary,
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-secondary {
    background: url("/templates/lagom2/assets/img/login-side.jpg") center center / cover no-repeat !important;
}

/* Lagom fades 248px of brand colour over the top and bottom - that
   would tint the photo. Replace with a subtle neutral fade. */
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration:before {
    background: linear-gradient(180deg, rgba(0,0,0,.45), transparent) !important;
}
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration:after {
    background: linear-gradient(0deg, rgba(0,0,0,.45), transparent) !important;
}

/* Hide the built-in SVG illustrations. */
.page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration > .d-flex {
    display: none !important;
}

/* Lighter image on smaller screens. */
@media (max-width: 1200px) {
    .page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration,
    .page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-default,
    .page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-primary,
    .page-login .main-body-has-sidebar-illustration .main-body-sidebar-illustration-secondary {
        background: url("/templates/lagom2/assets/img/login-side-sm.jpg") center center / cover no-repeat !important;
    }
}
/* ------------------------------------------------------------------
   VirtFusion module: power-state indicator + tidier power buttons.
   The module ships no visible VM power state; this styles the badge
   added in the theme override at
   templates/lagom2/modules/servers/VirtFusionDirect/overview.tpl
   ------------------------------------------------------------------ */
.vf-oz-power-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.vf-oz-state {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
    padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.vf-oz-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

.vf-oz-state-on      { color: #16a34a; background: rgba(22,163,74,.14);  border-color: rgba(22,163,74,.35); }
.vf-oz-state-on      .vf-oz-dot { background: #16a34a; animation: vfOzPulse 2.2s infinite; }
.vf-oz-state-off     { color: #ef4444; background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.35); }
.vf-oz-state-off     .vf-oz-dot { background: #ef4444; }
.vf-oz-state-warn    { color: #f59e0b; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.vf-oz-state-warn    .vf-oz-dot { background: #f59e0b; }
.vf-oz-state-unknown { color: #98a2b3; background: rgba(152,162,179,.14);border-color: rgba(152,162,179,.30); }
.vf-oz-state-unknown .vf-oz-dot { background: #98a2b3; }

@keyframes vfOzPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) {
    .vf-oz-state-on .vf-oz-dot { animation: none; }
}


.vf-oz-tab {
    appearance: none; background: transparent; color: inherit;
    border: 0; border-bottom: 2px solid transparent;
    padding: .6rem 1.1rem; border-radius: 6px 6px 0 0;
    font-size: .9rem; font-weight: 600; line-height: 1.2;
    opacity: .6; cursor: pointer; transition: opacity .15s, background .15s;
}
.vf-oz-tab:hover  { opacity: .9; background: rgba(128,128,128,.08); }
.vf-oz-tab.active { opacity: 1; border-bottom-color: currentColor; }
.vf-oz-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- 12-column dashboard grid ---- */
.vf-oz-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 1rem; align-items: start;
}
.vf-oz-grid > * { grid-column: span 12; margin-bottom: 0 !important; }

@media (min-width: 992px) {
    .vf-oz-grid > [data-oz-span="5"]  { grid-column: span 5; }
    .vf-oz-grid > [data-oz-span="6"]  { grid-column: span 6; }
    .vf-oz-grid > [data-oz-span="7"]  { grid-column: span 7; }
    .vf-oz-grid > [data-oz-span="12"] { grid-column: span 12; }
}

/* ---- traffic allowance bar ---- */
.vf-oz-traffic { margin: 0 0 1rem; }
.vf-oz-bar {
    height: 10px; border-radius: 999px; overflow: hidden;
    background: rgba(128,128,128,.18);
}
.vf-oz-bar-fill {
    height: 100%; width: 0; border-radius: 999px;
    transition: width .5s ease, background-color .3s ease;
}
.vf-oz-bar-fill.is-ok   { background: #16a34a; }
.vf-oz-bar-fill.is-warn { background: #f59e0b; }
.vf-oz-bar-fill.is-crit { background: #ef4444; }
.vf-oz-bar-text { font-size: .8125rem; margin-top: .45rem; }

@media (prefers-reduced-motion: reduce) {
    .vf-oz-bar-fill { transition: none; }
}