/* ---------------- Variables ---------------- */
:root{
    --jv-font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

    --jv-primary: #1A3D8E;
    --jv-primary-2: #254aa6;

    --jv-bg-0: #0f0f0f;
    --jv-bg-1: #151515; /* secondary */
    --jv-bg-2: #1c1c1c;

    --jv-surface: rgba(255,255,255,.035);
    --jv-surface-2: rgba(255,255,255,.02);

    --jv-border: rgba(255,255,255,.10);
    --jv-border-2: rgba(255,255,255,.07);

    --jv-text: rgba(255,255,255,.92);
    --jv-text-muted: rgba(255,255,255,.62);
    --jv-text-faint: rgba(255,255,255,.44);

    --jv-success: #26c281;
    --jv-warning: #f5a524;
    --jv-danger:  #ff4d4f;
    --jv-maint:   #3b82f6; /* maintenance blue */

    --r-lg: 18px;
    --r: 14px;
    --r-sm: 11px;

    --shadow: 0 28px 90px rgba(0,0,0,.60);
    --shadow-soft: 0 14px 34px rgba(0,0,0,.40);

    --focus: 0 0 0 .22rem rgba(26,61,142,.30);

    --jv-max: 1100px;
    --jv-admin-max: 1180px;
}

/* ---------------- Global baseline ---------------- */
html,body{height:100%;}

body{
    margin:0;
    background: var(--jv-bg-1) !important;
    color: var(--jv-text);
    font-family: var(--jv-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.45;
    overflow-x: hidden;
}

::selection{ background: rgba(26,61,142,.35); color:#fff; }

a{ color: rgba(160,200,255,.96); text-decoration:none; }
a:hover{ color:#fff; }

/* Codebase containers: keep transparent (JV shell controls background) */
#page-container, #main-container{ background: transparent !important; }
.content{ padding:0 !important; }
.block, .block-content, .block-header{ background: transparent; }
hr{ border-color: rgba(255,255,255,.08); }

/* ---------------- Shell ---------------- */
.jv-shell{
    min-height:100vh;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

/* ONE background only */
.jv-shell::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events:none;
    background:
        radial-gradient(950px 620px at 14% 10%, rgba(26,61,142,.30), transparent 62%),
        radial-gradient(760px 520px at 86% 18%, rgba(59,130,246,.16), transparent 55%),
        radial-gradient(780px 560px at 60% 92%, rgba(38,194,129,.10), transparent 55%),
        linear-gradient(180deg, var(--jv-bg-1) 0%, var(--jv-bg-2) 60%, var(--jv-bg-0) 100%);
}

.jv-ambient{ display:none !important; }

.jv-noise{
    pointer-events:none;
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.jv-container{
    max-width: var(--jv-max);
    margin: 0 auto;
    padding: 18px 16px 56px;
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* ---------------- Topbar ---------------- */
.jv-topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(15,15,15,.72);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
}

.jv-topbar-inner{
    max-width: var(--jv-max);
    margin: 0 auto;
    padding: 12px 16px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
}

.jv-brand{display:flex; align-items:center; gap:10px; min-width:220px;}
.jv-mark{
    width: 38px; height: 38px;
    border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
}
.jv-mark::after{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(180px 120px at 25% 10%, rgba(26,61,142,.55), transparent 60%);
    opacity:.65;
}
.jv-mark i{ width:18px; height:18px; color: rgba(255,255,255,.92); position:relative; z-index:1; }

.jv-brand-title{ font-weight: 900; letter-spacing:-.02em; color:#fff; line-height:1.05; font-size:14px; }
.jv-brand-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 1px; }

.jv-top-actions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- Buttons ---------------- */
.btn{
    font-weight: 850;
    letter-spacing: .01em;
    border-radius: 999px !important;
    border-width: 1px !important;
    transition: transform .08s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
    font-size: 12px;
    padding: 7px 10px;
    display:inline-flex !important;
    align-items:center !important;
    gap: 8px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ box-shadow: var(--focus) !important; }

.btn-primary{
    background: linear-gradient(180deg, var(--jv-primary-2), var(--jv-primary)) !important;
    border-color: rgba(26,61,142,.65) !important;
}
.btn-primary:hover{
    filter: brightness(1.06);
    border-color: rgba(26,61,142,.85) !important;
}
.btn-alt-secondary{
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.86) !important;
}
.btn-alt-secondary:hover{
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.18) !important;
    color:#fff !important;
}
.btn i[data-lucide], .btn svg{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px;
    margin-top: -1px;
}

/* ---------------- Chips ---------------- */
.jv-chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 850;
    font-size: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.86);
    white-space: nowrap;
}
.jv-chip i{ width: 14px; height: 14px; opacity: .95; }

.jv-live-dot{
    width: 7px; height: 7px;
    border-radius: 999px;
    background: rgba(38,194,129,.95);
    box-shadow: 0 0 0 2px rgba(38,194,129,.10);
    animation: jvPulse 1.8s ease-in-out infinite;
}
@keyframes jvPulse{
    0%,100%{ transform: scale(1); opacity: .95; }
    50%{ transform: scale(1.15); opacity: .70; }
}

/* ---------------- Hero ---------------- */
.jv-hero{
    margin-top: 14px;
    padding: 14px 14px 12px;
    border-radius: var(--r-lg);
    background: rgba(255,255,255,.032);
    border: 1px solid rgba(255,255,255,.09);
    position: relative;
    overflow: hidden;
}
.jv-hero::before{
    content:"";
    position:absolute; inset:-2px;
    background:
        radial-gradient(520px 220px at 18% 0%, rgba(26,61,142,.42), transparent 60%),
        radial-gradient(520px 220px at 80% 10%, rgba(59,130,246,.18), transparent 62%);
    opacity:.80;
    pointer-events:none;
}
.jv-hero-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.jv-hero-title{
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.02em;
    margin: 0;
}
.jv-hero-sub{
    color: rgba(255,255,255,.62);
    margin-top: 4px;
    font-size: 12.5px;
}
.jv-hero-right{
    display:flex;
    gap: 8px;
    align-items:center;
    flex-wrap: wrap;
    justify-content:flex-end;
}

/* ---------------- Global Banner ---------------- */
.jv-banner{
    margin-top: 12px;
    border-radius: var(--r);
    padding: 12px 14px;
    background:
        linear-gradient(90deg, rgba(26,61,142,.18), rgba(255,255,255,.03)),
        rgba(255,255,255,.02);
    border: 1px solid rgba(26,61,142,.20);
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
}
.jv-banner-left{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
}
.jv-banner-title{
    font-weight: 900;
    color:#fff;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.jv-banner-meta{
    color: rgba(255,255,255,.55);
    font-size: 12px;
    white-space: nowrap;
}

/* ---------------- Dots / Pills ---------------- */
.jv-dot{
    width: 9px; height: 9px;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.jv-dot-ok{ background: var(--jv-success); }
.jv-dot-warn{ background: var(--jv-warning); }
.jv-dot-bad{ background: var(--jv-danger); }
.jv-dot-maint{ background: var(--jv-maint); }

.jv-pill{
    display:inline-flex;
    align-items:center;
    gap: 7px;
    border-radius: 999px;
    padding: 6px 9px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .02em;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
}
.jv-pill i{ width:13px; height:13px; opacity:.95; }

.jv-pill-ok{ background: rgba(38,194,129,.10); border-color: rgba(38,194,129,.22); color:#bff5de; }
.jv-pill-warn{ background: rgba(245,165,36,.10); border-color: rgba(245,165,36,.22); color:#ffe6b5; }
.jv-pill-danger{ background: rgba(255,77,79,.10); border-color: rgba(255,77,79,.22); color:#ffd0d1; }
.jv-pill-maint{ background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.38); color: rgba(191,219,254,1); }
.jv-pill-ghost{ background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.70); }

.jv-pill-maint-active{
    background: rgba(59,130,246,.14);
    border-color: rgba(59,130,246,.38);
    color: rgba(191,219,254,1);
}

/* ---------------- Sections / Cards / Empty ---------------- */
.jv-section{
    margin-top: 34px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 18px;
    background: transparent !important;
}
.jv-section-title{
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    font-weight: 900;
}

.jv-card, .jv-panel, .jv-surface{
    border-radius: var(--r);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.085);
    padding: 14px;
}

.jv-empty{
    display:flex;
    align-items:flex-start;
    gap: 12px;
}
.jv-empty-icon{
    width: 42px; height: 42px;
    border-radius: 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.10);
}
.jv-empty-icon i{ width:18px; height:18px; color: rgba(255,255,255,.88); }
.jv-empty-title{
    font-weight: 900;
    letter-spacing: -.01em;
    margin: 0;
    font-size: 13px;
}
.jv-empty-sub{
    margin-top: 3px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}

/* ---------------- Public groups / services ---------------- */
.jv-groups{ margin-top: 14px; }
.jv-group{ margin-top: 14px; }
.jv-group-head{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 4px 4px 8px;
}
.jv-group-name{ font-weight: 900; color: rgba(255,255,255,.86); font-size: 12px; }
.jv-group-meta{ color: rgba(255,255,255,.42); font-size: 12px; }

.jv-group-list{
    display:flex;
    flex-direction: column;
    gap: 10px;
}

.jv-service{
    border-radius: var(--r);
    padding: 12px;
    background: rgba(255,255,255,.028);
    border: 1px solid rgba(255,255,255,.085);
    position: relative;
    overflow:hidden;
    transition: transform .10s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.jv-service:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    box-shadow: 0 14px 34px rgba(0,0,0,.36);
}
.jv-service::before{
    content:"";
    position:absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--r) 0 0 var(--r);
    background: rgba(255,255,255,.10);
}
.jv-service[data-state="operational"]::before{ background: rgba(38,194,129,.78); }
.jv-service[data-state="degraded"]::before{ background: rgba(245,165,36,.95); }
.jv-service[data-state="partial_outage"]::before{ background: rgba(245,165,36,.95); }
.jv-service[data-state="major_outage"]::before{ background: rgba(255,77,79,.98); }
.jv-service[data-state="maintenance"]::before{ background: rgba(59,130,246,.95); }

.jv-service-top{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 10px;
}
.jv-service-left{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
}
.jv-service-icon{
    width: 40px; height: 40px;
    border-radius: 13px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.10);
    position: relative;
    overflow:hidden;
}
.jv-service-icon::after{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(180px 120px at 25% 10%, rgba(26,61,142,.20), transparent 65%);
    opacity:.8;
}
.jv-service-icon i{ width:18px; height:18px; color: rgba(255,255,255,.92); position:relative; z-index:1; }

.jv-service-name{ font-weight: 900; color:#fff; font-size: 13px; }
.jv-service-url{
    display:inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(160,200,255,.92);
    max-width: 560px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jv-service-url.is-disabled{
    color: rgba(255,255,255,.35);
    pointer-events:none;
}
.jv-service-right{
    display:flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

/* Uptime */
.jv-uptime{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.jv-uptime-row{
    display:flex;
    align-items:center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-bottom: 8px;
}
.jv-uptime-pct{ color: rgba(255,255,255,.78); font-weight: 900; }

.jv-uptime-bars{
    display:grid;
    grid-template-columns: repeat(90, 1fr);
    gap: 3px;
    padding: 9px;
    border-radius: 14px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.09);
}
.jv-bar{ height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); }
.jv-bar-ok{ background: rgba(38,194,129,.70); }
.jv-bar-warn{ background: rgba(245,165,36,.76); }
.jv-bar-bad{ background: rgba(255,77,79,.80); }
.jv-bar-maint{ background: rgba(59,130,246,.65); }

/* Dots variant */
.jv-uptime-dots{
    display:flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
}
.jv-udot{
    width: 7px; height: 7px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.jv-udot-ok{ background: rgba(38,194,129,.9); box-shadow: 0 0 10px rgba(38,194,129,.25); }
.jv-udot-warn{ background: rgba(245,165,36,.9); box-shadow: 0 0 10px rgba(245,165,36,.25); }
.jv-udot-bad{ background: rgba(255,77,79,.9); box-shadow: 0 0 10px rgba(255,77,79,.25); }
.jv-udot-maint{ background: rgba(59,130,246,.92); box-shadow: 0 0 10px rgba(59,130,246,.22); }

/* ---------------- Incident + Maintenance toggles ---------------- */
.jv-incident-toggle{
    cursor:pointer;
    user-select:none;
    display:flex;
    gap:6px;
    align-items:center;
    padding:6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.jv-incident-toggle:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
.jv-incident-toggle:active{ transform: scale(.98); }

/* Collapsed lists */
.jv-incident-updates.is-collapsed .jv-incident-update:nth-child(n+2){ display:none; }
.jv-maint-updates.is-collapsed .jv-maint-update:nth-child(n+2){ display:none; }

/* Maintenance card */
.jv-maint-card{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: 18px;
}
.jv-maint-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}
.jv-maint-meta{
    margin-top: 4px;
    font-size: 12px;
    opacity: .75;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.jv-maint-body{ margin-top: 14px; }
.jv-maint-update{
    display:flex;
    gap:12px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}
.jv-maint-update:first-child{ border-top: 0; padding-top: 0; }
.jv-maint-update-dot{ margin-top: 6px; flex: 0 0 auto; }
.jv-maint-update-msg{ font-size: 13px; opacity: .9; }

/* Active incident strip */
.jv-alert{
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
}
.jv-alert-warn{
    border-color: rgba(245,165,36,.28);
    background: rgba(245,165,36,.08);
}

/* ---------------- Modal layout ---------------- */
.jv-modal-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.62);
    /*backdrop-filter: blur(10px);*/
    display:none;
    z-index: 2000;
}
.jv-modal-backdrop.is-open{ display:block; }

.jv-modal{
    position: absolute;
    left: 50%;
    top: 14vh;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 26px));
    border-radius: 20px;
    background: rgba(21,21,21,.92);
    border: 1px solid rgba(255,255,255,.12);
    /*box-shadow: 0 40px 140px rgba(0,0,0,.72);*/
    overflow: hidden;
}
.jv-modal-head{
    padding: 14px 14px 10px;
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    background:
        radial-gradient(520px 220px at 16% 0%, rgba(26,61,142,.22), transparent 60%),
        radial-gradient(520px 220px at 80% 10%, rgba(74,163,255,.12), transparent 62%),
        rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.jv-modal-title{
    font-weight: 900;
    letter-spacing: -.01em;
    margin: 0;
    font-size: 14px;
}
.jv-modal-sub{
    color: rgba(255,255,255,.62);
    margin-top: 3px;
    font-size: 12px;
}
.jv-modal-close{
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.85);
    border-radius: 999px;
    width: 36px;
    height: 36px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.jv-modal-close:hover{ background: rgba(255,255,255,.08); color:#fff; }

.jv-modal-body{ padding: 14px; }
.jv-field{
    display:flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.jv-label{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    font-weight: 850;
    letter-spacing: .01em;
}
.jv-input{
    width: 100%;
    border-radius: 12px;
    padding: 10px 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    outline: none;
    font-size: 13px;
}
.jv-input:focus{
    box-shadow: var(--focus);
    border-color: rgba(26,61,142,.45);
}
.jv-help{
    color: rgba(255,255,255,.45);
    font-size: 12px;
    line-height: 1.35;
}
.jv-modal-actions{
    display:flex;
    gap: 10px;
    justify-content:flex-end;
    padding-top: 6px;
}

/* ---------------- Admin layout ---------------- */
.jv-shell-admin .jv-container{ max-width: var(--jv-admin-max); }
.jv-shell-admin .jv-topbar-inner{ max-width: var(--jv-admin-max); }

.jv-admin-kpis{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 1100px){ .jv-admin-kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .jv-admin-kpis{ grid-template-columns: 1fr; } }

.jv-kpi{
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.085);
}
.jv-kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; }
.jv-kpi-label{
    color: rgba(255,255,255,.58);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
}
.jv-kpi-icon{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid; place-items:center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.jv-kpi-icon i{ width: 16px; height: 16px; opacity: .9; }
.jv-kpi-value{ font-size: 26px; font-weight: 900; letter-spacing: -.02em; }
.jv-kpi-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; }

.jv-admin-grid{
    display:grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 1100px){ .jv-admin-grid{ grid-template-columns: 1fr; } }

.jv-panel{
    border-radius: 18px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.085);
    overflow:hidden;
    padding: 0;
}
.jv-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.02);
}
.jv-panel-title{ font-weight: 900; letter-spacing: -.01em; font-size: 13px; }
.jv-panel-sub{ color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; }
.jv-panel-body{ padding: 10px 12px 12px; }

.jv-tablewrap{ overflow:auto; }
.jv-table{
    width:100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.jv-table thead th{
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 10.5px;
    color: rgba(255,255,255,.55);
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.jv-table tbody td{
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,.06);
    vertical-align: middle;
}
.jv-td-strong{ font-weight: 800; }
.jv-td-muted{ color: rgba(255,255,255,.60); }

.jv-admin-list{ display:flex; flex-direction: column; gap: 10px; }
.jv-admin-item{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.07);
}
.jv-admin-item-title{ font-weight: 850; font-size: 12.5px; }
.jv-admin-item-sub{ color: rgba(255,255,255,.58); font-size: 12px; margin-top: 3px; }
.jv-admin-item-time{ color: rgba(255,255,255,.45); font-size: 12px; white-space: nowrap; margin-left: 8px; }

.jv-divider{
    height: 1px;
    background: rgba(255,255,255,.06);
    margin: 18px 0;
}

/* Quick actions grid */
.jv-quick-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}
@media (max-width: 1100px){ .jv-quick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .jv-quick-grid{ grid-template-columns: 1fr; } }

.jv-quick{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.jv-quick:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.045);
    border-color: rgba(26,61,142,.28);
}
.jv-quick i{ width: 16px; height: 16px; opacity: .9; margin-top: 1px; }
.jv-quick-title{ font-weight: 900; font-size: 12.5px; }
.jv-quick-sub{ font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.jv-quick.disabled{ opacity: .60; cursor: not-allowed; pointer-events:none; }

/* ---------------- Footer ---------------- */
.jv-footer{
    margin-top: 36px;
    padding: 18px 0 6px;
    color: rgba(255,255,255,.46);
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.jv-footer a{ color: rgba(255,255,255,.62); }
.jv-footer a:hover{ color: #fff; }

/* ---------------- Forms (Bootstrap/Codebase) ---------------- */
.jv-shell .form-control,
.jv-shell .form-select,
.jv-shell textarea,
.jv-shell input[type="text"],
.jv-shell input[type="number"],
.jv-shell input[type="url"],
.jv-shell input[type="email"],
.jv-shell input[type="password"]{
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.92) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    outline: none !important;
}
.jv-shell .form-control:focus,
.jv-shell .form-select:focus,
.jv-shell textarea:focus{
    border-color: rgba(26,61,142,.55) !important;
    box-shadow: var(--focus) !important;
}
.jv-shell .form-control::placeholder,
.jv-shell textarea::placeholder{ color: rgba(255,255,255,.35) !important; }

/* Labels */
.jv-shell label,
.jv-shell .form-label{
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.55) !important;
}

/* Select2 (dark dropdown, no white) */
.select2-container{ width: 100% !important; }
.select2-container--default .select2-selection--single{
    min-height: 44px;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    color: rgba(255,255,255,.92) !important;
    display:flex !important;
    align-items:center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: rgba(255,255,255,.92) !important;
    padding-left: 12px !important;
    padding-right: 44px !important;
    line-height: 1.2 !important;
}
.select2-dropdown{
    background: rgba(12,12,12,.98) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 30px 110px rgba(0,0,0,.70);
}
.select2-results__option{
    color: rgba(255,255,255,.86) !important;
    padding: 10px 12px !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background: rgba(26,61,142,.25) !important;
    color: #fff !important;
}

/* ---------------- Codebase blocks/tables matching ---------------- */
.jv-shell .block.block-rounded{
    border-radius: 18px !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    overflow: hidden;
}
.jv-shell .block-header.block-header-default{
    background: rgba(255,255,255,.02) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.jv-shell .block-content{ background: transparent !important; }

.jv-shell .table{
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.015);
    --bs-table-striped-color: rgba(255,255,255,.90);
    --bs-table-hover-bg: rgba(255,255,255,.02);
    --bs-table-hover-color: rgba(255,255,255,.95);
    --bs-table-border-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85) !important;
}
.jv-shell .table > :not(caption) > * > *{
    border-color: rgba(255,255,255,.06) !important;
}
.jv-shell .table thead th{
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 11px;
    color: rgba(255,255,255,.55) !important;
}

.jv-uptime-bars,
.jv-uptime-dots{
    padding: 4px !important;
    margin-top: 10px;
}

.jv-uptime-bars{
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
    gap: 3px; /* spacing between dots */
}

.jv-uptime-dots{
    display:grid;
    grid-template-columns: repeat(90, 1fr);
    align-items:center;
    gap: 3px;
    border-radius: 14px;
    overflow:hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.jv-uptime-dots .jv-udot{
    justify-self:center;
}

/* --- Maintenance timeline updates --- */
.jv-maint-card{
    padding: 0 !important;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(26,61,142,.18), rgba(255,255,255,.03) 55%, rgba(255,255,255,.02));
    /*box-shadow: 0 18px 50px rgba(0,0,0,.35);*/
    overflow: hidden;
    position: relative;
}
.jv-maint-card:before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(59,130,246,.0), rgba(59,130,246,.65), rgba(59,130,246,.0));
    opacity:.9;
}
.jv-maint-head{
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.jv-maint-title{
    font-weight: 900;
    letter-spacing: .2px;
}
.jv-maint-meta{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(245,247,251,.72);
    opacity: 1;
}
.jv-maint-body{
    padding: 14px 18px 18px;
    margin-top: 0 !important;
}

/* Updates container as a soft timeline stack */
.jv-maint-updates{
    display:flex;
    flex-direction:column;
    gap: 10px;
}
.jv-maint-update{
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.16);
    border-radius: 16px;
    padding: 12px 12px 12px 14px;
    gap: 12px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.jv-maint-update:first-child{
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}
.jv-maint-update-dot{
    width: 10px;
    height: 10px;
    margin-top: 8px !important;
    box-shadow: 0 0 0 4px rgba(26,61,142,.14);
}
.jv-maint-update-msg{
    font-size: 14px;
    line-height: 1.45;
    opacity: .95;
}

/* Collapse behavior for maintenance updates (matches JS behavior) */
.jv-maint-updates.is-collapsed .jv-maint-update:nth-child(n+2){
    display:none;
}

/* --- Incidents updates --- */
.jv-incidents{
    display:grid;
    gap: 14px;
}
.jv-incident{
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(245,165,36,.10), rgba(255,255,255,.03) 55%, rgba(255,255,255,.02));
    /*box-shadow: 0 18px 50px rgba(0,0,0,.35);*/
    overflow:hidden;
    position:relative;
}
.jv-incident:before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(245,165,36,.0), rgba(245,165,36,.65), rgba(245,165,36,.0));
    opacity:.85;
}
.jv-incident-head{
    padding: 18px 18px 14px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.jv-incident-title{
    font-weight: 900;
    letter-spacing: .2px;
}
.jv-incident-meta{
    margin-top: 6px;
    color: rgba(245,247,251,.72);
}
.jv-incident-updates{
    padding: 14px 18px 18px;
    display:flex;
    flex-direction:column;
    gap: 10px;
}

/* Each update */
.jv-incident-update{
    display:flex;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(0,0,0,.16);
    border-radius: 16px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
}
.jv-incident-update-left{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width: 14px;
    padding-top: 6px;
    flex: 0 0 auto;
}
.jv-incident-update-dot{
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 4px rgba(245,165,36,.12);
}
.jv-incident-update-body{
    flex: 1 1 auto;
    min-width: 0;
}
.jv-incident-update-msg{
    font-size: 14px;
    line-height: 1.45;
}

/* Collapse behavior */
.jv-incident-updates.is-collapsed .jv-incident-update:nth-child(n+2){
    display:none;
}

/* --- Toggle buttons: --- */
.jv-incident-toggle,
[data-maintenance-toggle]{
    display:inline-flex !important;
    align-items:center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: rgba(245,247,251,.88);
    cursor:pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.jv-incident-toggle:hover,
[data-maintenance-toggle]:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.16);
}
.jv-incident-toggle:active,
[data-maintenance-toggle]:active{
    transform: translateY(0);
}

/* Make the “Show all/less” text a bit subtler */
.jv-incident-toggle .text-muted,
[data-maintenance-toggle] .text-muted{
    color: rgba(245,247,251,.70) !important;
    opacity: 1 !important;
}

/* Fix: Uptime dots */
.jv-bar {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: rgba(255,255,255,.08);
    transition: all .2s ease;
}

/* OK (Green) */
.jv-bar-ok {
    background: #16c784;
    box-shadow:
        0 0 4px rgba(22,199,132,.6),
        0 0 8px rgba(22,199,132,.35);
}

/* Maintenance (Blue) */
.jv-bar-maint,
.jv-bar-scheduled {
    background: #3b82f6;
    box-shadow:
        0 0 4px rgba(59,130,246,.6),
        0 0 8px rgba(59,130,246,.35);
}

/* Warning / Degraded (Orange) */
.jv-bar-warn {
    background: #f59e0b;
    box-shadow:
        0 0 4px rgba(245,158,11,.6),
        0 0 8px rgba(245,158,11,.35);
}

/* Major outage (Red) */
.jv-bar-bad {
    background: #ef4444;
    box-shadow:
        0 0 4px rgba(239,68,68,.7),
        0 0 10px rgba(239,68,68,.4);
}

/* Slight hover polish */
.jv-bar:hover {
    transform: scale(1.2);
}

/* ---------------- JV-PICKER ---------------- */
.jv-svc-picker{
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(10,14,22,.55), rgba(10,14,22,.35));
    border-radius: 16px;
    padding: 12px;
}

.jv-svc-toolbar{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 12px;
}

.jv-svc-search{
    display:flex;
    align-items:center;
    gap:10px;
    flex: 1;
    min-width: 260px;
    position: relative;
}

.jv-svc-search i{
    opacity:.8;
}

.jv-svc-search-input{
    flex: 1;
    height: 40px;
    padding-left: 10px;
}

.jv-svc-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.jv-svc-groups{
    display:grid;
    gap:12px;
}

.jv-svc-group{
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    overflow:hidden;
}

.jv-svc-group-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.jv-svc-group-title{
    font-weight: 800;
    letter-spacing:.2px;
}

.jv-svc-group-count{
    font-size:12px;
    opacity:.75;
}

.jv-svc-grid{
    padding: 10px 12px 12px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:10px;
}

@media (max-width: 720px){
    .jv-svc-grid{ grid-template-columns: 1fr; }
}

.jv-svc-item{
    cursor:pointer;
    user-select:none;
}

.jv-svc-check{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.jv-svc-pill{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.jv-svc-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background: rgba(255,255,255,.18);
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

.jv-svc-name{
    font-weight: 700;
    font-size: 13px;
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* checked style */
.jv-svc-item .jv-svc-check:checked + .jv-svc-pill{
    border-color: rgba(26,61,142,.55);
    background: rgba(26,61,142,.16);
    box-shadow: 0 0 0 1px rgba(26,61,142,.22) inset, 0 10px 30px rgba(0,0,0,.20);
}

.jv-svc-item .jv-svc-check:checked + .jv-svc-pill .jv-svc-dot{
    background: #1A3D8E;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 14px rgba(26,61,142,.45);
}

.jv-svc-item:hover .jv-svc-pill{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
}

/* filter hidden */
.jv-svc-item.is-hidden,
.jv-svc-group.is-hidden{
    display:none !important;
}

/* Force dark native selects (Chrome/Edge/Firefox worden veel beter) */
:root { color-scheme: dark; }

.form-select{
    background: rgba(255,255,255,.04);
    color: rgba(245,247,251,.92);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    /*padding: 10px 12px;*/
}

/* Dropdown items (werkt in de meeste browsers, niet allemaal 100%) */
.form-select option,
.form-select optgroup{
    background: #151515;
    color: rgba(245,247,251,.92);
}

/* Footer v2 */
.jv-footer{
    margin-top: 34px;
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(17,24,39,.55), rgba(21,31,51,.38));
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color: rgba(245,247,251,.72);
}

.jv-footer-left{min-width:0;}
.jv-footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
.jv-footer-dot{
    width:10px;height:10px;border-radius:999px;
    background: rgba(59,130,246,.75);
    /*box-shadow: 0 0 0 4px rgba(59,130,246,.10), 0 0 18px rgba(59,130,246,.22);*/
}
.jv-footer-sub{
    margin-top: 4px;
    font-size: 12px;
    color: rgba(245,247,251,.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jv-footer-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap: wrap;
    justify-content:flex-end;
}

.jv-footer-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color: rgba(245,247,251,.86);
    font-weight: 700;
    font-size: 12px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jv-footer-link:hover{
    opacity: 1;
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.16);
}
.jv-footer-link svg{ width: 16px; height: 16px; opacity: .92; }

@media (max-width: 640px){
    .jv-footer{flex-direction:column; align-items:flex-start;}
    .jv-footer-right{justify-content:flex-start;}
    .jv-footer-sub{max-width: 100%;}
}

/* ---------------- Responsive ---------------- */
@media (max-width: 768px){
    .jv-service-right{ justify-content:flex-start; }
    .jv-banner{ flex-direction: column; align-items:flex-start; }
    .jv-banner-meta{ white-space: normal; }
    .jv-hero-inner{ flex-direction: column; align-items:flex-start; }
    .jv-hero-right{ justify-content:flex-start; }
}