/* ============================================================
   BASE 9 · OS DASHBOARD — Blazor Server theme
   Industrial / athletic. Black canvas, volt-green accent.
   ============================================================ */
:root {
    --bg:#0A0A0A; --bg-2:#0F0F0F; --surface:#151515; --surface-2:#1C1C1C;
    --line:#2A2A2A; --line-soft:rgba(255,255,255,0.06);
    --volt:#C6F23C; --volt-dim:#9FC52E; --volt-glow:rgba(198,242,60,0.25);
    --ink:#FAFAFA; --ink-2:#B6B6B6; --muted:#6E6E6E; --danger:#FF5247;
    --r:16px; --r-sm:11px;
    --font-display:"Anton",system-ui,sans-serif;
    --font-body:"Sora",system-ui,-apple-system,sans-serif;
    --side-w:268px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
    font-family:var(--font-body); background:var(--bg); color:var(--ink);
    -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.muted { color:var(--muted); }

/* ---------- Shell ---------- */
.shell { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100dvh; }

.sidebar {
    position:sticky; top:0; height:100dvh;
    display:flex; flex-direction:column;
    padding:22px 18px;
    background:linear-gradient(180deg,var(--bg-2),var(--bg));
    border-right:1px solid var(--line-soft);
}
.side-brand { display:flex; align-items:center; gap:12px; padding:6px 6px 22px; }
.brand-mark {
    display:grid; place-items:center; width:40px; height:40px;
    font-family:var(--font-display); font-size:26px; color:var(--bg);
    background:var(--volt); border-radius:10px; transform:skewX(-6deg);
    box-shadow:0 8px 22px -8px var(--volt-glow);
}
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-word { font-family:var(--font-display); font-size:20px; letter-spacing:.05em; }
.brand-sub { font-size:11px; color:var(--muted); letter-spacing:.14em; }

.side-nav { flex:1; display:flex; flex-direction:column; gap:4px; }
.nav-group {
    font-size:10px; letter-spacing:.16em; color:var(--muted);
    text-transform:uppercase; margin:18px 10px 6px;
}
.nav-item {
    display:flex; align-items:center; gap:11px;
    padding:11px 13px; border-radius:var(--r-sm);
    color:var(--ink-2); font-weight:600; font-size:14px;
    transition:background .16s, color .16s;
}
.nav-ico { width:18px; text-align:center; color:var(--muted); transition:color .16s; }
.nav-item:hover { background:var(--surface); color:var(--ink); }
.nav-item:hover .nav-ico { color:var(--ink-2); }
.nav-item.active {
    background:radial-gradient(120% 120% at 0% 50%, var(--volt-glow), var(--surface) 70%);
    color:var(--volt);
}
.nav-item.active .nav-ico { color:var(--volt); }

.side-user {
    display:flex; align-items:center; gap:11px;
    padding:12px; border-radius:var(--r-sm);
    background:var(--surface); border:1px solid var(--line);
}
.avatar {
    display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
    background:var(--volt); color:var(--bg); font-weight:700; font-size:13px; flex:none;
}
.side-user-meta { flex:1; display:flex; flex-direction:column; min-width:0; }
.side-user-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-user-role { font-size:11px; color:var(--muted); }
.side-logout {
    width:32px; height:32px; border-radius:8px; flex:none;
    color:var(--muted); border:1px solid var(--line); transition:.16s;
}
.side-logout:hover { color:var(--danger); border-color:var(--danger); }

/* ---------- Content ---------- */
.content {
    padding:40px clamp(20px,4vw,56px);
    animation:rise .4s cubic-bezier(.2,.7,.2,1) both;
    position:relative;
}
.content::before {
    content:""; position:fixed; inset:0 0 0 var(--side-w); z-index:-1;
    background:radial-gradient(90% 50% at 80% -10%, rgba(198,242,60,0.06), transparent 60%);
    pointer-events:none;
}
.page-head { margin-bottom:30px; }
.kicker { color:var(--volt); font-weight:600; font-size:13px; letter-spacing:.04em; }
.page-title { font-family:var(--font-display); font-size:clamp(34px,5vw,52px); text-transform:uppercase; line-height:.96; }
.page-sub { color:var(--ink-2); font-size:15px; margin-top:8px; max-width:60ch; }

/* ---------- Tiles (home) ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.tile {
    display:flex; flex-direction:column; gap:6px;
    padding:22px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); transition:transform .12s, border-color .18s;
}
.tile:hover { border-color:var(--volt-dim); transform:translateY(-2px); }
.tile-ico { font-size:26px; color:var(--volt); }
.tile-title { font-weight:700; font-size:17px; margin-top:4px; }
.tile-desc { color:var(--ink-2); font-size:13px; }

/* ---------- Cards / grid ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:22px;
}
.medal-card { display:flex; flex-direction:column; gap:8px; transition:border-color .18s, opacity .2s; }
.medal-card.is-paused { opacity:.55; }
.medal-card:hover { border-color:var(--volt-dim); }
.medal-icon { font-size:34px; }
.medal-name { font-size:17px; }
.medal-desc { font-size:13px; min-height:34px; }
.meta { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }
.badge {
    font-size:11px; font-weight:600; color:var(--ink-2);
    background:var(--bg-2); border:1px solid var(--line);
    padding:4px 9px; border-radius:7px;
}
.badge-volt { color:var(--volt); border-color:var(--volt-dim); }

.toggle {
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    padding:8px 14px; border-radius:99px; font-size:13px; font-weight:600;
    border:1px solid var(--line); transition:.18s;
}
.toggle .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.toggle.on { color:var(--volt); border-color:var(--volt-dim); background:rgba(198,242,60,0.08); }
.toggle.on .dot { background:var(--volt); box-shadow:0 0 8px var(--volt-glow); }
.toggle.off { color:var(--ink-2); }
.toggle:hover { border-color:var(--ink-2); }

/* ---------- Weekly ---------- */
.week-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.week-title { font-family:var(--font-display); font-size:24px; text-transform:uppercase; }
.answer-list { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.answer { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.answer:last-child { border-bottom:none; }
.answer-state {
    width:26px; height:26px; flex:none; border-radius:7px; display:grid; place-items:center;
    font-weight:700; font-size:14px; background:var(--bg-2); border:1px solid var(--line);
}
.answer-state.ok { color:var(--volt); border-color:var(--volt-dim); }
.answer-state.no { color:var(--danger); border-color:rgba(255,82,71,.4); }
.answer-state.na { color:var(--muted); }
.answer-body strong { font-size:14px; font-weight:600; }
.note { color:var(--muted); font-size:13px; margin-top:3px; }

/* ---------- Auth / login ---------- */
.auth-shell {
    min-height:100dvh; display:grid; place-items:center; padding:24px;
    background:radial-gradient(120% 70% at 50% -10%, rgba(198,242,60,0.12), transparent 55%), var(--bg);
}
.auth-card {
    width:100%; max-width:400px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:22px; padding:36px 28px 30px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
    animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.auth-brand { text-align:center; margin-bottom:26px; }
.auth-mark {
    display:inline-grid; place-items:center; width:62px; height:62px; margin-bottom:12px;
    font-family:var(--font-display); font-size:42px; color:var(--bg);
    background:var(--volt); border-radius:14px; transform:skewX(-6deg);
    box-shadow:0 12px 32px -10px var(--volt-glow);
}
.auth-title { font-family:var(--font-display); font-size:30px; letter-spacing:.05em; }
.auth-tagline { color:var(--volt); font-size:11px; font-weight:600; letter-spacing:.22em; margin-top:4px; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field-label { font-size:12px; color:var(--ink-2); font-weight:600; }
.input {
    width:100%; padding:14px 15px; background:var(--bg-2); color:var(--ink);
    border:1px solid var(--line); border-radius:var(--r-sm); font-size:15px; font-family:inherit;
    transition:border-color .18s, box-shadow .18s;
}
.input::placeholder { color:#5a5a5a; }
.input:focus { outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--volt-glow); }
.btn-volt {
    margin-top:6px; width:100%; padding:15px; background:var(--volt); color:var(--bg);
    font-family:var(--font-display); font-size:18px; letter-spacing:.05em; border-radius:var(--r-sm);
    transition:transform .12s, box-shadow .18s, opacity .2s; box-shadow:0 12px 28px -10px var(--volt-glow);
}
.btn-volt.sm { width:auto; padding:11px 20px; font-size:15px; margin-top:12px; }
.btn-volt:hover { box-shadow:0 16px 34px -10px var(--volt-glow); }
.btn-volt:active { transform:scale(.98); }
.btn-volt:disabled, .btn-volt.is-busy { opacity:.6; cursor:progress; }
.alert {
    background:rgba(255,82,71,.12); border:1px solid rgba(255,82,71,.4);
    color:#ffb3ad; font-size:13px; padding:11px 14px; border-radius:var(--r-sm);
}

/* ---------- States ---------- */
.denied { padding:60px 0; }
.denied h1 { font-family:var(--font-display); font-size:42px; text-transform:uppercase; }
.empty { text-align:center; padding:50px 20px; color:var(--ink-2); }
.empty-ico { font-size:34px; display:block; margin-bottom:10px; color:var(--volt); }
.skeleton-card {
    min-height:170px;
    background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
    background-size:200% 100%; animation:shimmer 1.3s infinite;
}
.skeleton-card.tall { min-height:300px; }
.boot { min-height:100dvh; display:grid; place-items:center; background:var(--bg); }
.boot-mark {
    width:64px; height:64px; display:grid; place-items:center;
    font-family:var(--font-display); font-size:42px; color:var(--bg);
    background:var(--volt); border-radius:14px; transform:skewX(-6deg);
    animation:pulse 1.1s ease-in-out infinite;
}

@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes shimmer { to { background-position:-200% 0; } }
@keyframes pulse { 0%,100% { transform:skewX(-6deg) scale(1); opacity:1; } 50% { transform:skewX(-6deg) scale(.9); opacity:.6; } }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .shell { grid-template-columns:1fr; }
    .sidebar {
        position:fixed; bottom:0; top:auto; left:0; right:0; height:auto; width:100%;
        flex-direction:row; align-items:center; gap:10px; z-index:40;
        padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
        border-right:none; border-top:1px solid var(--line-soft);
    }
    .side-brand, .nav-group, .side-user-meta { display:none; }
    .side-nav { flex-direction:row; flex:1; justify-content:space-around; gap:4px; }
    .nav-item { flex-direction:column; gap:3px; font-size:11px; padding:6px 10px; }
    .side-user { padding:6px; background:none; border:none; }
    .content { padding:24px 18px 96px; }
    .content::before { inset:0; }
}

/* ===================== Admin: equipamentos & incidentes ===================== */
.card-title{font-weight:700;font-size:16px;margin-bottom:12px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.alert.ok{background:rgba(198,242,60,.08);border-color:var(--volt-dim);color:var(--volt)}
.muted.sm{font-size:12px;margin-top:3px}
.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tbl th{background:var(--bg-2);text-align:left;font-weight:700;padding:11px 14px;border-bottom:2px solid var(--volt-dim);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl strong{color:var(--ink)}
.sev{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;border:1px solid var(--line)}
.sev-low{color:#9FC52E;border-color:var(--volt-dim)}
.sev-medium{color:#E8B23A;border-color:rgba(232,178,58,.5)}
.sev-high{color:#FF8A3D;border-color:rgba(255,138,61,.5)}
.sev-critical{color:#FF5247;border-color:rgba(255,82,71,.5);background:rgba(255,82,71,.08)}

/* ===================== Admin: extras (validações, desempenho, concessões, templates) ===================== */
.section-title{font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;margin:26px 0 12px}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn-mini{padding:6px 12px;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);font-size:12px;font-weight:600;transition:.15s}
.btn-mini:hover{border-color:var(--volt-dim);color:var(--ink)}
.badge-volt-text{color:var(--volt);font-weight:700}
.perf-detail.win{border-color:var(--volt-dim)}
.perf-score-big{font-family:var(--font-display);font-size:56px;color:var(--volt);line-height:1}
.perf-score-big span{font-size:22px;color:var(--muted)}
.perf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-top:14px}
.perf-grid .m-num{display:block;font-family:var(--font-display);font-size:24px;color:var(--ink)}
.perf-grid .m-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* ===================== Mayhem (importação de PDF) ===================== */
.upload{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;border:1px dashed var(--line);border-radius:10px;background:var(--bg-2)}
.upload input[type=file]{color:var(--ink-2);font-size:13px}
.json{background:#0A0A0A;border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:#B6F09C;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow:auto;margin:6px 0}
.upload code,.field-hint code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px;color:var(--volt)}

/* ===================== Conversas (WhatsApp / Beatriz) ===================== */
.wa-thread{display:flex;flex-direction:column;gap:8px}
.wa-msg{max-width:70%;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--bg-2)}
.wa-msg.in{align-self:flex-start;border-bottom-left-radius:4px}
.wa-msg.out{align-self:flex-end;background:rgba(198,242,60,.08);border-color:var(--volt-dim);border-bottom-right-radius:4px}
.wa-body{font-size:13.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.wa-time{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}