/*
 * Webvo Status — Webvo Nova design tokens and components.
 * Tokens are taken from the Webvo Nova Perfex client theme (assets/themes/webvo-nova/css/style.css).
 * Status tones (partial outage orange) are a Webvo Status extension; see docs/WEBVO-NOVA-DESIGN.md.
 */
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/inter-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "WebvoNova Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --nova-primary: #1274e7; --nova-primary-rgb: 18, 116, 231; --nova-primary-600: #0f63c7; --nova-primary-700: #0c52a6;
  --nova-primary-50: #eef5fe; --nova-primary-soft: rgba(18, 116, 231, 0.1); --nova-primary-ring: rgba(18, 116, 231, 0.22);
  --nova-ink: #0b1220; --nova-gradient: linear-gradient(120deg, #4361ee 0%, #1274e7 48%, #5bbcff 100%);
  --nova-success: #2fbf86; --nova-success-text: #0d8a5b; --nova-success-soft: rgba(78, 209, 153, 0.16);
  --nova-warning: #ffb547; --nova-warning-text: #a86100; --nova-warning-soft: rgba(255, 193, 104, 0.2);
  --nova-danger: #ff6c5f; --nova-danger-text: #d43a2c; --nova-danger-soft: rgba(255, 108, 95, 0.14);
  --nova-info: #5bbcff; --nova-info-text: #0a76bd; --nova-info-soft: rgba(91, 188, 255, 0.16);
  --nova-neutral: #6b7380; --nova-neutral-text: #495057; --nova-neutral-soft: rgba(108, 117, 125, 0.12);
  --wv-orange: #f97316; --wv-orange-text: #b54708; --wv-orange-soft: rgba(249, 115, 22, 0.14);
  --nova-bg: #f4f7fc; --nova-surface: #ffffff; --nova-surface-2: #f8f9fb; --nova-surface-3: #eef1f5; --nova-hover: #f2f5fa;
  --nova-input-bg: #ffffff; --nova-border: #e6eaf0; --nova-border-strong: #d7dde5;
  --nova-heading: #0b1220; --nova-text: #212529; --nova-text-2: #495057; --nova-muted: #6b7380; --nova-subtle: #adb5bd;
  --nova-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --nova-shadow-sm: 0 0.125rem 0.25rem rgba(16, 24, 40, 0.04), 0 0.75rem 1.5rem rgba(16, 24, 40, 0.05);
  --nova-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.06), 0 2.5rem 4rem rgba(16, 24, 40, 0.16);
  --nova-radius-xs: 0.5rem; --nova-radius-sm: 0.75rem; --nova-radius: 1.125rem; --nova-radius-lg: 1.4375rem; --nova-radius-pill: 999px;
  --nova-ease: cubic-bezier(0.165, 0.84, 0.44, 1); --nova-transition-fast: all 0.2s var(--nova-ease);
  --nova-sidebar-w: 272px; --nova-topbar-h: 68px; --nova-content-max: 1440px;
  --nova-font: "WebvoNova Inter", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nova-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --nova-focus: 0 0 0 4px var(--nova-primary-ring);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light-forced"]) {
    --nova-primary-50: rgba(18, 116, 231, 0.12); --nova-primary-soft: rgba(56, 145, 255, 0.16); --nova-primary-ring: rgba(56, 145, 255, 0.32);
    --nova-success-text: #4ed199; --nova-success-soft: rgba(78, 209, 153, 0.14); --nova-warning-text: #ffc168; --nova-warning-soft: rgba(255, 193, 104, 0.14);
    --nova-danger-text: #ff8a7f; --nova-danger-soft: rgba(255, 108, 95, 0.14); --nova-info-text: #8fd0ff; --nova-info-soft: rgba(91, 188, 255, 0.14);
    --nova-neutral: #8b94a7; --nova-neutral-text: #c3cad6; --nova-neutral-soft: rgba(255, 255, 255, 0.07);
    --wv-orange-text: #fdba74; --wv-orange-soft: rgba(249, 115, 22, 0.16);
    --nova-bg: #060a13; --nova-surface: #0e1421; --nova-surface-2: #121a2a; --nova-surface-3: #1a2336; --nova-hover: rgba(255, 255, 255, 0.045);
    --nova-input-bg: #0a101b; --nova-border: rgba(255, 255, 255, 0.08); --nova-border-strong: rgba(255, 255, 255, 0.14);
    --nova-heading: #ffffff; --nova-text: #e5e9f1; --nova-text-2: #c3cad6; --nova-muted: #8b94a7; --nova-subtle: #5d6679;
    --nova-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
    --nova-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.4), 0 2.5rem 4rem rgba(0, 0, 0, 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--nova-font); font-size: 14px; line-height: 1.55; color: var(--nova-text); background: var(--nova-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--nova-font); color: var(--nova-heading); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; } h2 { font-size: 20px; } h3 { font-size: 15.5px; }
a { color: var(--nova-primary); text-decoration: none; transition: color 0.2s var(--nova-ease); } a:hover { color: var(--nova-primary-600); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--nova-focus); border-radius: var(--nova-radius-xs); }
p { margin: 0 0 10px; }
code, .wv-mono { font-family: var(--nova-font-mono); font-size: 12.5px; }
.wv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wv-skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--nova-primary); color: #fff; padding: 8px 14px; border-radius: var(--nova-radius-sm); }
.wv-skip:focus { top: 12px; }
.wv-muted { color: var(--nova-muted); } .wv-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.wv-container { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 20px; }

/* Topbar */
.wv-topbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--nova-surface) 86%, transparent); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--nova-border); }
.wv-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--nova-topbar-h); }
.wv-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--nova-heading); letter-spacing: -0.02em; }
.wv-brand:hover { text-decoration: none; color: var(--nova-heading); }
.wv-topbar__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wv-main { padding-top: 28px; padding-bottom: 40px; }
.wv-footer { border-top: 1px solid var(--nova-border); padding: 22px 0 32px; color: var(--nova-muted); font-size: 12.5px; }

/* Buttons */
.wv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--nova-radius-sm); border: 1px solid transparent; font: 600 13.5px/1.4 var(--nova-font); letter-spacing: -0.005em; cursor: pointer; transition: var(--nova-transition-fast); white-space: nowrap; background: var(--nova-primary); color: #fff; box-shadow: 0 0.5rem 1.25rem rgba(18, 116, 231, 0.18); }
.wv-btn:hover { background: var(--nova-primary-600); color: #fff; text-decoration: none; }
.wv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wv-btn--secondary { background: var(--nova-surface); color: var(--nova-text); border-color: var(--nova-border-strong); box-shadow: var(--nova-shadow-xs); }
.wv-btn--secondary:hover { background: var(--nova-hover); color: var(--nova-heading); }
.wv-btn--ghost { background: transparent; color: var(--nova-text-2); box-shadow: none; }
.wv-btn--ghost:hover { background: var(--nova-hover); color: var(--nova-heading); }
.wv-btn--danger { background: var(--nova-danger-text); box-shadow: none; } .wv-btn--danger:hover { background: #b32d21; }
.wv-btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* Cards */
.wv-card { position: relative; background: var(--nova-surface); border: 1px solid var(--nova-border); border-radius: var(--nova-radius-lg); box-shadow: var(--nova-shadow-sm); margin-bottom: 20px; color: var(--nova-text); }
.wv-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--nova-border); }
.wv-card__title { margin: 0; font-size: 15.5px; font-weight: 600; }
.wv-card__body { padding: 20px 22px; }
.wv-empty { text-align: center; color: var(--nova-muted); padding: 32px 22px; }
.wv-narrow { max-width: 520px; margin: 40px auto; }

/* Badges & tones */
.wv-badge { --tone: var(--nova-neutral); --tone-text: var(--nova-neutral-text); --tone-soft: var(--nova-neutral-soft); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--nova-radius-pill); background: var(--tone-soft); color: var(--tone-text); font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.wv-badge svg { width: 14px; height: 14px; fill: currentColor; }
.wv-tone-operational, .wv-tone-pass, .wv-tone-completed, .wv-tone-resolved { --tone: var(--nova-success); --tone-text: var(--nova-success-text); --tone-soft: var(--nova-success-soft); }
.wv-tone-degraded, .wv-tone-warn, .wv-tone-monitoring { --tone: var(--nova-warning); --tone-text: var(--nova-warning-text); --tone-soft: var(--nova-warning-soft); }
.wv-tone-partial_outage, .wv-tone-identified { --tone: var(--wv-orange); --tone-text: var(--wv-orange-text); --tone-soft: var(--wv-orange-soft); }
.wv-tone-major_outage, .wv-tone-fail, .wv-tone-investigating { --tone: var(--nova-danger); --tone-text: var(--nova-danger-text); --tone-soft: var(--nova-danger-soft); }
.wv-tone-maintenance, .wv-tone-scheduled, .wv-tone-in_progress { --tone: var(--nova-info); --tone-text: var(--nova-info-text); --tone-soft: var(--nova-info-soft); }
.wv-tone-unknown, .wv-tone-no_data, .wv-tone-error, .wv-tone-cancelled { --tone: var(--nova-neutral); --tone-text: var(--nova-neutral-text); --tone-soft: var(--nova-neutral-soft); }

/* Public: hero */
.wv-hero { --tone: var(--nova-neutral); --tone-soft: var(--nova-neutral-soft); display: flex; align-items: center; gap: 18px; padding: 22px 24px; margin-bottom: 24px; border-radius: var(--nova-radius-lg); background: var(--nova-surface); border: 1px solid var(--nova-border); border-left: 6px solid var(--tone); box-shadow: var(--nova-shadow-sm); }
.wv-hero h1 { font-size: 22px; margin: 0; }
.wv-hero__icon { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone-soft); color: var(--tone); }
.wv-hero__icon svg { width: 26px; height: 26px; fill: currentColor; }
.wv-hero__meta { margin: 4px 0 0; color: var(--nova-muted); font-size: 13px; }
.wv-lead { color: var(--nova-text-2); margin-bottom: 24px; }
.wv-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nova-muted); margin: 28px 0 12px; font-weight: 600; }
.wv-page-title { font-size: 24px; }
.wv-back { font-size: 13px; }

/* Components list */
.wv-components { list-style: none; margin: 0; padding: 0; }
.wv-component { padding: 16px 22px; border-bottom: 1px solid var(--nova-border); }
.wv-component:last-child { border-bottom: 0; }
.wv-component__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wv-component__name { font-weight: 600; color: var(--nova-heading); }
.wv-component__desc { display: block; color: var(--nova-muted); font-size: 12.5px; }
.wv-uptime { margin-top: 12px; }
.wv-bars { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; height: 32px; }
.wv-bar { flex: 1 1 0; min-width: 2px; border-radius: 3px; background: var(--tone); opacity: 0.9; }
.wv-bar:hover { opacity: 1; transform: scaleY(1.08); }
.wv-bar.wv-tone-no_data { background: var(--nova-surface-3); }
.wv-uptime__legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--nova-muted); }
@media (max-width: 640px) { .wv-bar--wide { display: none; } .wv-uptime__legend span:first-child { visibility: hidden; } }

/* Incidents */
.wv-incident { border-left: 4px solid var(--nova-border-strong); }
.wv-impact-major_outage { border-left-color: var(--nova-danger); } .wv-impact-partial_outage { border-left-color: var(--wv-orange); } .wv-impact-degraded { border-left-color: var(--nova-warning); }
.wv-timeline { list-style: none; margin: 0; padding: 0; }
.wv-timeline li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--nova-border); }
.wv-timeline li:last-child { padding-bottom: 0; }
.wv-timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--nova-surface); border: 2px solid var(--nova-primary); }
.wv-timeline__meta { font-size: 12.5px; color: var(--nova-muted); margin-bottom: 4px; }
.wv-timeline__meta strong { color: var(--nova-heading); }
.wv-pager { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }

/* Forms (admin) */
.wv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.wv-field label, .wv-label { font-size: 12.5px; font-weight: 600; color: var(--nova-text-2); }
.wv-input, .wv-select, .wv-textarea { width: 100%; min-height: 42px; padding: 9px 14px; border-radius: var(--nova-radius-sm); border: 1px solid var(--nova-border-strong); background: var(--nova-input-bg); color: var(--nova-text); font: 14px var(--nova-font); transition: border-color 0.2s var(--nova-ease), box-shadow 0.2s var(--nova-ease); }
.wv-textarea { min-height: 96px; resize: vertical; }
.wv-input:focus, .wv-select:focus, .wv-textarea:focus { outline: none; border-color: var(--nova-primary); box-shadow: var(--nova-focus); }
.wv-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wv-help { font-size: 12px; color: var(--nova-muted); }
.wv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.wv-error { color: var(--nova-danger-text); font-size: 13px; }

/* Tables */
.wv-table-wrap { overflow-x: auto; }
.wv-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wv-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nova-muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--nova-border); background: var(--nova-surface-2); }
.wv-table td { padding: 12px 14px; border-bottom: 1px solid var(--nova-border); vertical-align: top; }
.wv-table tr:last-child td { border-bottom: 0; }
.wv-table tr:hover td { background: var(--nova-hover); }
.wv-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Admin layout */
.wv-admin { display: grid; grid-template-columns: var(--nova-sidebar-w) 1fr; min-height: 100vh; }
.wv-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--nova-surface); border-right: 1px solid var(--nova-border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.wv-sidebar .wv-brand { padding: 6px 10px 18px; }
.wv-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--nova-radius-sm); color: var(--nova-text-2); font-weight: 500; font-size: 13.5px; }
.wv-nav-link:hover { background: var(--nova-hover); color: var(--nova-heading); text-decoration: none; }
.wv-nav-link[aria-current="page"] { background: var(--nova-primary-soft); color: var(--nova-primary); font-weight: 600; }
.wv-sidebar__footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nova-border); font-size: 12.5px; color: var(--nova-muted); }
.wv-content { padding: 28px 32px 48px; max-width: var(--nova-content-max); width: 100%; }
.wv-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.wv-pagehead h1 { margin: 0; font-size: 24px; }
.wv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.wv-stat { padding: 18px 20px; margin: 0; }
.wv-stat__label { font-size: 12px; color: var(--nova-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.wv-stat__value { font-size: 26px; font-weight: 700; color: var(--nova-heading); letter-spacing: -0.03em; }
.wv-menu-toggle { display: none; }
.wv-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--nova-bg); }
.wv-login .wv-card { width: 100%; max-width: 420px; }
@media (max-width: 960px) {
  .wv-admin { grid-template-columns: 1fr; }
  .wv-sidebar { position: fixed; z-index: 30; left: 0; top: 0; width: var(--nova-sidebar-w); transform: translateX(-100%); transition: transform 0.25s var(--nova-ease); box-shadow: var(--nova-shadow-lg); }
  .wv-sidebar.is-open { transform: none; }
  .wv-menu-toggle { display: inline-flex; margin-bottom: 12px; }
  .wv-content { padding: 18px 16px 40px; }
}

/* Dialog & toast */
dialog.wv-dialog { border: 1px solid var(--nova-border); border-radius: var(--nova-radius-lg); padding: 0; width: min(640px, calc(100vw - 24px)); background: var(--nova-surface); color: var(--nova-text); box-shadow: var(--nova-shadow-lg); }
dialog.wv-dialog::backdrop { background: rgba(11, 18, 32, 0.45); backdrop-filter: blur(2px); }
.wv-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--nova-border); background: var(--nova-surface-2); border-radius: 0 0 var(--nova-radius-lg) var(--nova-radius-lg); }
.wv-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: 420px; padding: 12px 16px; border-radius: var(--nova-radius-sm); background: var(--nova-ink); color: #fff; box-shadow: var(--nova-shadow-lg); font-size: 13.5px; }
.wv-toast.is-error { background: var(--nova-danger-text); }
.wv-secret { display: block; padding: 12px; border-radius: var(--nova-radius-sm); background: var(--nova-surface-3); word-break: break-all; font-family: var(--nova-font-mono); font-size: 12.5px; user-select: all; }
pre.wv-pre { white-space: pre-wrap; word-break: break-word; background: var(--nova-surface-2); border: 1px solid var(--nova-border); border-radius: var(--nova-radius-sm); padding: 12px; max-height: 360px; overflow: auto; font-family: var(--nova-font-mono); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }