/* ═══════════════════════════════════════════════════════════
   Sense Vision — Design System
   Visual Studio 2022 / Blazor Server
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --sv-navy:   #0b1829;
  --sv-navy2:  #111f33;
  --sv-navy3:  #18293d;
  --sv-navy4:  #1f3350;
  --sv-blue:   #1a70e0;
  --sv-blue2:  #2584f5;
  --sv-cyan:   #00cfe0;
  --sv-ok:     #1fcf78;
  --sv-okb:    rgba(31,207,120,.13);
  --sv-warn:   #f5a520;
  --sv-warnb:  rgba(245,165,32,.13);
  --sv-danger: #f03a3a;
  --sv-dangerb:rgba(240,58,58,.13);
  --sv-text:   #ddeaf8;
  --sv-text2:  #8aaacf;
  --sv-text3:  #4a6580;
  --sv-card:   #132035;
  --sv-card2:  #172640;
  --sv-border: rgba(255,255,255,.06);
  --sv-bord2:  rgba(255,255,255,.10);
  --sv-r:      10px;
  --sv-r2:     14px;
  --sv-mono:   'JetBrains Mono', monospace;
  --sv-sans:   'DM Sans', sans-serif;
  /* Gases */
  --sv-o2:  #4fa8ff;  --sv-o2b:  rgba(79,168,255,.14);
  --sv-n2:  #a78bfa;  --sv-n2b:  rgba(167,139,250,.14);
  --sv-ar:  #34d4b0;  --sv-arb:  rgba(52,212,176,.14);
}

*  { box-sizing: border-box; }
body { font-family: var(--sv-sans); background: var(--sv-navy); color: var(--sv-text); margin: 0; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--sv-navy4); border-radius: 4px; }

/* ── Topbar ─────────────────────────────────── */
.sv-topbar {
  height: 58px; background: var(--sv-card); border-bottom: 1px solid var(--sv-border);
  display: flex; align-items: center; padding: 0 20px; gap: 14px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
.sv-topbar-logo { display: flex; align-items: center; gap: 10px; margin-right: 4px; }
.sv-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sv-blue), var(--sv-cyan));
  display: flex; align-items: center; justify-content: center;
}
.sv-mark svg { width: 16px; height: 16px; }
.sv-brand { font-size: 16px; font-weight: 600; letter-spacing: -.3px; color: var(--sv-text); text-decoration: none; }
.sv-brand em { color: var(--sv-cyan); font-style: normal; }
.sv-divider { width: 1px; height: 22px; background: var(--sv-bord2); }
.sv-nav { display: flex; gap: 2px; }
.sv-nav-link {
  height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--sv-text2); display: flex; align-items: center; gap: 6px;
  text-decoration: none; transition: background .15s, color .15s; cursor: pointer;
}
.sv-nav-link:hover  { background: var(--sv-navy3); color: var(--sv-text); }
.sv-nav-link.active { background: var(--sv-navy4); color: #fff; }
.sv-nav-link.highlight { color: var(--sv-cyan); }
.sv-nav-link.highlight.active { background: rgba(0,207,224,.12); }
.sv-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sv-danger); animation: sv-pulse 2s infinite; }
@keyframes sv-pulse { 0%,100%{opacity:1}50%{opacity:.4} }
.sv-co-btn {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 8px; background: var(--sv-navy3); font-size: 13px; color: var(--sv-text2); cursor: pointer;
}
.sv-co-tag { font-size:10px; font-weight:600; padding:1px 6px; border-radius:4px; background:rgba(0,207,224,.15); color:var(--sv-cyan); }
.sv-bell { width:34px;height:34px;border-radius:8px;background:var(--sv-navy3);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative; }
.sv-user-chip { display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;background:var(--sv-navy3); }
.sv-avatar { width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--sv-blue),var(--sv-cyan));display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff; }
.sv-uname { font-size:13px;color:var(--sv-text2);font-weight:500; }
.sv-logout-btn { font-size:12px;color:var(--sv-text3);padding:4px 8px;border-radius:6px;text-decoration:none;transition:color .15s,background .15s; }
.sv-logout-btn:hover { color:var(--sv-danger);background:var(--sv-dangerb); }

/* ── Content ────────────────────────────────── */
.sv-content { padding: 24px; }
.sv-pg-hd { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px; }
.sv-pg-title { font-size:22px;font-weight:600;letter-spacing:-.4px; }
.sv-pg-sub { font-size:13px;color:var(--sv-text2);margin-top:3px; }
.sv-pg-act { display:flex;gap:8px;align-items:center;flex-shrink:0; }
.sv-btn-ghost { height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--sv-bord2);font-size:13px;font-weight:500;color:var(--sv-text2);background:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s;font-family:var(--sv-sans); }
.sv-btn-ghost:hover { background:var(--sv-navy3);color:var(--sv-text); }

/* ── KPI Row ────────────────────────────────── */
.sv-kpi-row { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px; }
.sv-kpi-card { background:var(--sv-card);border:1px solid var(--sv-border);border-radius:var(--sv-r2);padding:18px 20px;display:flex;align-items:center;gap:16px; }
.sv-kpi-ico { width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
.sv-kpi-lbl { font-size:11px;color:var(--sv-text2);font-weight:500;letter-spacing:.4px;text-transform:uppercase;margin-bottom:4px; }
.sv-kpi-val { font-size:26px;font-weight:600;letter-spacing:-.5px;line-height:1; }
.sv-kpi-sub { font-size:12px;color:var(--sv-text3);margin-top:3px; }

/* ── Gas Legend ─────────────────────────────── */
.sv-gas-leg {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    padding: 10px 16px;
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-r);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.sv-gli { display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sv-text2); }
.sv-gld { width:10px;height:10px;border-radius:3px; }
.sv-gli-sep { width:1px;height:16px;background:var(--sv-bord2); }
.sv-lli { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sv-text3); }
.sv-lld { width:8px;height:8px;border-radius:50%; }

/* ── Filters ────────────────────────────────── */
.sv-filters { display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center; }
.sv-filter-search { height:34px;padding:0 12px 0 34px;border-radius:8px;background:var(--sv-card);border:1px solid var(--sv-bord2);font-size:13px;color:var(--sv-text2);min-width:200px;outline:none;font-family:var(--sv-sans); }
.sv-filter-search::placeholder { color:var(--sv-text3); }
.sv-filter-search:focus { border-color:var(--sv-blue2); }
.sv-fsep { width:1px;height:22px;background:var(--sv-bord2); }
.sv-schip { height:30px;padding:0 12px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--sv-bord2);color:var(--sv-text2);cursor:pointer;background:none;font-family:var(--sv-sans);transition:all .15s;display:flex;align-items:center;gap:5px; }
.sv-schip:hover { background:var(--sv-navy3); }
.sv-schip.sel-all { background:var(--sv-navy4);color:#fff; }
.sv-schip.ok-c.sel   { background:var(--sv-okb);border-color:var(--sv-ok); }
.sv-schip.warn-c.sel { background:var(--sv-warnb);border-color:var(--sv-warn); }
.sv-schip.dang-c.sel { background:var(--sv-dangerb);border-color:var(--sv-danger); }
.sv-gchip { height:28px;padding:0 11px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid var(--sv-bord2);color:var(--sv-text3);cursor:pointer;background:none;font-family:var(--sv-sans);transition:all .15s;letter-spacing:.3px; }
.sv-gchip.o2.sel { background:var(--sv-o2b);border-color:var(--sv-o2);color:var(--sv-o2); }
.sv-gchip.n2.sel { background:var(--sv-n2b);border-color:var(--sv-n2);color:var(--sv-n2); }
.sv-gchip.ar.sel { background:var(--sv-arb);border-color:var(--sv-ar);color:var(--sv-ar); }

/* ── Section Head ───────────────────────────── */
.sv-sec-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sv-text2);
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: default;
}

    .sv-sec-hd::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--sv-border);
    }

    .sv-sec-hd[style*="cursor:pointer"] .material-symbols-outlined {
        transition: transform .2s ease;
        flex-shrink: 0;
    }

.sv-sec-badge {
    background: var(--sv-navy3);
    border: 1px solid var(--sv-bord2);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    color: var(--sv-text3);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Tank Grid ──────────────────────────────── */
.sv-tank-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:26px; }
.sv-tank-card { background:var(--sv-card);border:1px solid var(--sv-border);border-radius:var(--sv-r2);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;position:relative;overflow:hidden; }
.sv-tank-card:hover { border-color:var(--sv-bord2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.3); }
.sv-tank-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tc,#fff);opacity:.7; }
.sv-tc-top { display:flex;justify-content:space-between;align-items:center;width:100%; }
.sv-tc-id { font-size:11px;font-weight:500;color:var(--sv-text2);font-family:var(--sv-mono); }
.sv-tc-dot { width:8px;height:8px;border-radius:50%; }
.sv-tc-vis { position:relative;width:44px;height:76px;margin:4px 0; }
.sv-tc-body { position:absolute;inset:0;border:2px solid rgba(255,255,255,.12);border-radius:5px;overflow:hidden;background:rgba(0,0,0,.2); }
.sv-tc-fill { position:absolute;bottom:0;left:0;right:0;transition:height .6s cubic-bezier(.4,0,.2,1);border-radius:2px; }
.sv-tc-shimmer { position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:sv-shimmer 3s ease-in-out infinite; }
@keyframes sv-shimmer { 0%{left:-60%}100%{left:120%} }
.sv-tc-pct { font-size:22px;font-weight:600;letter-spacing:-.5px;line-height:1; }
.sv-tc-gas { font-size:13px;font-weight:600;text-align:center; }
.sv-tc-formula { font-size:10px;color:var(--sv-text3);margin-top:-3px;font-family:var(--sv-mono); }
.sv-tc-row { display:flex;justify-content:space-between;width:100%;margin-top:2px; }
.sv-tc-mi { text-align:center;flex:1; }
.sv-tc-mv { font-size:12px;font-weight:500;font-family:var(--sv-mono);color:var(--sv-text); }
.sv-tc-mk { font-size:10px;color:var(--sv-text3); }
.sv-tc-badge { padding:3px 9px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase; }
.sv-tc-time { font-size:10px;color:var(--sv-text3);font-family:var(--sv-mono); }

/* ── Empty State ────────────────────────────── */
.sv-empty-st { display:flex;flex-direction:column;align-items:center;padding:60px 20px;text-align:center;color:var(--sv-text3); }
.sv-empty-st .material-symbols-outlined { font-size:48px!important;opacity:.3;margin-bottom:16px; }
.sv-empty-st p { font-size:14px;margin-top:6px;font-weight:500;color:var(--sv-text2); }
.sv-empty-st span { font-size:13px; }

/* ── Login ──────────────────────────────────── */
.sv-login-wrap { min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative; }
.sv-lg-bg { position:fixed;inset:0;overflow:hidden;pointer-events:none; }
.sv-lg-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:52px 52px; }
.sv-lg-glow1 { position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(0,207,224,.07) 0%,transparent 65%);top:-200px;right:-150px; }
.sv-lg-glow2 { position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(26,112,224,.1) 0%,transparent 65%);bottom:-150px;left:-100px; }
.sv-login-card { position:relative;z-index:1;width:420px;background:var(--sv-card);border:1px solid var(--sv-bord2);border-radius:var(--sv-r2);padding:48px 44px;box-shadow:0 40px 100px rgba(0,0,0,.55);animation:sv-fadeUp .5s ease both; }
@keyframes sv-fadeUp { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none} }
.sv-lg-logo { display:flex;align-items:center;gap:12px;margin-bottom:6px; }
.sv-lg-mark { width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--sv-blue),var(--sv-cyan));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,207,224,.25); }
.sv-lg-mark svg { width:24px;height:24px; }
.sv-lg-name { font-size:26px;font-weight:600;letter-spacing:-.5px; }
.sv-lg-name em { color:var(--sv-cyan);font-style:normal; }
.sv-lg-tagline { font-size:13px;color:var(--sv-text3);margin-bottom:36px;padding-left:56px; }
.sv-lg-error { background:var(--sv-dangerb);border:1px solid rgba(240,58,58,.25);border-radius:8px;padding:11px 14px;font-size:13px;color:#f87;margin-bottom:18px;display:none; }
.sv-fg { margin-bottom:18px; }
.sv-fl { display:block;font-size:11px;font-weight:500;color:var(--sv-text2);margin-bottom:6px;letter-spacing:.4px;text-transform:uppercase; }
.sv-fi {
    width: 100%;
    height: 44px;
    background: var(--sv-navy2);
    border: 1px solid var(--sv-bord2);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--sv-text);
    outline: none;
    font-family: var(--sv-sans);
    transition: border-color .2s,box-shadow .2s;
}

    .sv-fi:focus {
        border-color: var(--sv-blue2);
        box-shadow: 0 0 0 3px rgba(37,132,245,.15);
    }

    .sv-fi::placeholder {
        color: var(--sv-text3);
    }

/* ── Number input spinner ───────────────────── */
input[type=number] {
    -moz-appearance: textfield;
}

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.sv-lg-row { display:flex;align-items:center;margin-bottom:22px; }
.sv-lg-check { display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sv-text2);cursor:pointer; }
.sv-btn-primary { width:100%;height:46px;border-radius:9px;font-size:14px;font-weight:600;background:linear-gradient(135deg,var(--sv-blue),var(--sv-blue2));color:#fff;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(26,112,224,.4);transition:opacity .15s,transform .1s;font-family:var(--sv-sans); }
.sv-btn-primary:hover { opacity:.88; }
.sv-btn-primary:active { transform:scale(.98); }
.sv-btn-primary:disabled { opacity:.6;cursor:not-allowed; }

/* ── Detail page ─────────────────────────────── */
.sv-det-hd {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sv-border);
}

.sv-det-back {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--sv-card);
    border: 1px solid var(--sv-bord2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}

    .sv-det-back:hover {
        background: var(--sv-navy3);
    }

.sv-det-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.sv-det-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sv-det-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sv-info-card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-r2);
    padding: 18px 20px;
}

.sv-info-ttl {
    font-size: 11px;
    font-weight: 500;
    color: var(--sv-text2);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sv-btw {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sv-bt {
    position: relative;
    width: 100px;
    height: 170px;
}

.sv-bt-body {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,255,255,.14);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,.25);
}

.sv-bt-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: height .7s cubic-bezier(.4,0,.2,1);
}

.sv-bt-pct {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -1px;
    margin-top: 6px;
}

.sv-bt-name {
    font-size: 15px;
    font-weight: 600;
}

.sv-bt-form {
    font-size: 13px;
    color: var(--sv-text3);
    font-family: var(--sv-mono);
}

.sv-stat-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--sv-navy2);
    border-radius: 8px;
}

.sv-stat-k {
    font-size: 12px;
    color: var(--sv-text2);
}

.sv-stat-v {
    font-size: 13px;
    font-weight: 500;
    font-family: var(--sv-mono);
}

.sv-chart-card {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-r2);
    padding: 20px 22px;
}

.sv-chart-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.sv-chart-ttl {
    font-size: 14px;
    font-weight: 500;
}

.sv-chart-tabs {
    display: flex;
    gap: 4px;
}

.sv-ctab {
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sv-text3);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--sv-sans);
    transition: all .15s;
}

    .sv-ctab.active {
        background: var(--sv-navy4);
        color: #fff;
    }

    .sv-ctab:hover:not(.active) {
        background: var(--sv-navy3);
        color: var(--sv-text2);
    }

.sv-ev-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--sv-navy2);
    border-radius: 8px;
    border-left: 3px solid var(--sv-border);
}

    .sv-ev-item.ev-critico {
        border-left-color: var(--sv-danger);
    }

    .sv-ev-item.ev-atencao {
        border-left-color: var(--sv-warn);
    }

    .sv-ev-item.ev-resolvido {
        border-left-color: var(--sv-ok);
    }

.sv-ev-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}

.sv-ev-msg {
    font-size: 13px;
    color: var(--sv-text);
}

.sv-ev-time {
    font-size: 11px;
    color: var(--sv-text3);
    margin-top: 2px;
    font-family: var(--sv-mono);
}

/* ── Admin ───────────────────────────────────── */
.sv-admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sv-border);
    padding-bottom: 0;
}

.sv-atab {
    height: 40px;
    padding: 0 18px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sv-text2);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all .15s;
    font-family: var(--sv-sans);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

    .sv-atab:hover {
        color: var(--sv-text);
        background: var(--sv-navy3);
    }

    .sv-atab.active {
        color: #fff;
        border-bottom-color: var(--sv-blue2);
    }

.sv-admin-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.sv-filter-select {
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--sv-card);
    border: 1px solid var(--sv-bord2);
    font-size: 13px;
    color: var(--sv-text2);
    outline: none;
    font-family: var(--sv-sans);
    cursor: pointer;
}

.sv-admin-table {
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-r2);
    overflow: hidden;
}

.sv-at-head {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--sv-navy2);
    border-bottom: 1px solid var(--sv-border);
    font-size: 11px;
    font-weight: 500;
    color: var(--sv-text3);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.sv-at-row {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--sv-border);
    transition: background .15s;
    font-size: 13px;
    color: var(--sv-text);
}

    .sv-at-row:last-child {
        border-bottom: none;
    }

    .sv-at-row:hover {
        background: var(--sv-navy3);
    }

.sv-status-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.sv-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--sv-bord2);
    background: none;
    color: var(--sv-text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

    .sv-icon-btn:hover {
        background: var(--sv-navy3);
        color: var(--sv-text);
    }

    .sv-icon-btn.sv-icon-ok {
        color: var(--sv-ok);
        border-color: rgba(31,207,120,.3);
    }

/* ── Modais ──────────────────────────────────── */
.sv-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.sv-modal {
    background: var(--sv-card);
    border: 1px solid var(--sv-bord2);
    border-radius: var(--sv-r2);
    padding: 28px 32px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 40px 100px rgba(0,0,0,.6);
    animation: sv-fadeUp .2s ease both;
}

.sv-modal-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .sv-modal-hd span {
        font-size: 16px;
        font-weight: 600;
    }

.sv-modal-ft {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sv-border);
}

/* ── Alertas ─────────────────────────────────── */
.sv-alerta-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--sv-card);
    border: 1px solid var(--sv-border);
    border-radius: var(--sv-r2);
    border-left: 3px solid var(--sv-border);
    transition: border-color .15s;
}

    .sv-alerta-item:hover {
        border-color: var(--sv-bord2);
    }

.sv-alerta-critico {
    border-left-color: var(--sv-danger) !important;
}

.sv-alerta-atencao {
    border-left-color: var(--sv-warn) !important;
}

.sv-alerta-reconhecido {
    opacity: .7;
}

    .sv-alerta-reconhecido:hover {
        opacity: 1;
    }

.sv-alerta-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.sv-alerta-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Nav badge (alertas) ────────────────────── */
.sv-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    border-radius: 20px;
    background: var(--sv-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--sv-card);
    line-height: 1;
    z-index: 1;
}


/* ── Sino badge ─────────────────────────────── */
.sv-nb {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    border-radius: 20px;
    background: var(--sv-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--sv-card);
    line-height: 1;
}

/* ── Notif panel ─────────────────────────────── */
.sv-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--sv-card);
    border: 1px solid var(--sv-bord2);
    border-radius: var(--sv-r2);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    z-index: 150;
    overflow: hidden;
    animation: sv-fadeUp .15s ease both;
}

.sv-notif-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sv-border);
    font-size: 13px;
    font-weight: 600;
}

.sv-notif-count {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--sv-dangerb);
    color: var(--sv-danger);
    font-weight: 600;
}

.sv-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sv-border);
    cursor: pointer;
    transition: background .15s;
}

    .sv-notif-item:hover {
        background: var(--sv-navy3);
    }

    .sv-notif-item:last-of-type {
        border-bottom: none;
    }

.sv-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}

.sv-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    color: var(--sv-text3);
    font-size: 12px;
    gap: 4px;
}

.sv-notif-ft {
    padding: 10px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--sv-blue2);
    cursor: pointer;
    border-top: 1px solid var(--sv-border);
    transition: background .15s;
}

    .sv-notif-ft:hover {
        background: var(--sv-navy3);
    }