/* =========================================================
DETECTREX — Design System
Paleta: REXSUITE brand tokens
Fonte: Geist + Geist Mono (família TYREXCO)
========================================================= */
/* ---------------------------------------------------------
DESIGN TOKENS — alinhados ao REXSUITE brand guide
--------------------------------------------------------- */
:root {
/* ── Surface layers (rex-ink family) ── */
--bg-base: #0A0A0B; /* --rex-ink */
--bg-surface: #131316; /* --rex-ink-2 */
--bg-elevated: #1E1E22; /* --rex-ink-3 */
--bg-hover: #2A2A30; /* --rex-ink-4 */
--bg-active: #2E2E34; /* --rex-line */
--border: rgba(255,255,255,0.06);
--border-strong: rgba(255,255,255,0.12);
/* ── Text ── */
--text-primary: #F4F1EA; /* --rex-paper */
--text-secondary: #9A9AA1; /* --muted-2 */
--text-tertiary: #6B6B72; /* --muted */
--text-inverse: #0A0A0B;
/* ── DETECTREX accent — sodium amber ── */
--accent: #FFC400;
--accent-dim: rgba(255, 196, 0, 0.10);
--accent-glow:rgba(255, 196, 0, 0.28);
/* ── Status ── */
--green: #00D17A; /* --rex-clock (emerald) */
--green-dim: rgba(0, 209, 122, 0.10);
--green-glow: rgba(0, 209, 122, 0.28);
--red: #FF4D2E; /* --rex-help (coral) */
--red-dim: rgba(255, 77, 46, 0.10);
--amber: #FFC400;
--amber-dim: rgba(255, 196, 0, 0.10);
/* ── Fonts — Geist family (REXSUITE brand) ── */
--font-display: 'Geist', system-ui, sans-serif;
--font-body: 'Geist', system-ui, sans-serif;
--font-mono: 'Geist Mono', 'Courier New', monospace;
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
--space-12: 3rem; --space-16: 4rem;
--sidebar-w: 228px;
--radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow: 0 4px 16px rgba(0,0,0,0.5);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}
/* ---------------------------------------------------------
RESET & BASE
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; font-size: 14px; -webkit-font-smoothing: antialiased; }
body {
height: 100%;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.9375rem;
line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { font-family: var(--font-display); }
/* ---------------------------------------------------------
PAGE LAYOUT
--------------------------------------------------------- */
.app-shell {
display: flex;
min-height: 100vh;
}
.app-sidebar {
width: var(--sidebar-w);
height: 100vh;
background: var(--bg-surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
flex-shrink: 0;
overflow-y: auto;
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-content {
flex: 1;
padding: var(--space-8) var(--space-10);
animation: fadeUp 0.35s ease both;
}
/* Só opacidade: um transform residual (fill-mode both) criaria containing block
e quebraria o position:fixed do rail de seção (.secnav). */
@keyframes fadeUp {
from { opacity: 0; }
to { opacity: 1; }
}
/* ---------------------------------------------------------
SIDEBAR
--------------------------------------------------------- */
.sidebar-logo {
padding: var(--space-5) var(--space-5);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
}
/* Logo mark — now an ![]()
with rex-mark-detect.png */
.logo-mark { display: none; } /* legacy, mantido pra não quebrar se usado */
.logo-text {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-primary);
line-height: 1.15;
}
.logo-sub {
font-size: 0.5625rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
font-family: var(--font-mono);
margin-top: 1px;
}
.sidebar-nav {
flex: 1;
padding: var(--space-4) var(--space-3);
display: flex; flex-direction: column; gap: var(--space-1);
}
.nav-section-label {
font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-tertiary);
padding: var(--space-4) var(--space-3) var(--space-2);
}
.nav-item {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
color: var(--text-secondary); text-decoration: none;
font-size: 0.875rem; font-weight: 400;
transition: background 0.15s, color 0.15s;
border: 1px solid transparent;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav-item.active {
background: var(--accent-dim); color: var(--accent);
border-color: rgba(245,158,11,0.2); font-weight: 500;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active svg { opacity: 1; }
.sidebar-footer { padding: var(--space-4) var(--space-3); border-top: 1px solid var(--border);
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2); }
/* Seletor de idioma compacto (dropdown CSS-only via ) — ao lado do perfil,
abre para cima e alinhado à direita. As opções são links p/ /_culture (recarrega). */
.lang-dropdown { position: relative; flex-shrink: 0; }
.lang-dropdown > summary {
list-style: none; cursor: pointer; width: fit-content;
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 8px; border-radius: var(--radius-sm);
font-size: 0.72rem; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.04em; user-select: none;
transition: background 0.15s, color 0.15s;
}
.lang-dropdown > summary::-webkit-details-marker,
.lang-dropdown > summary::marker { display: none; content: ""; }
.lang-dropdown > summary:hover { background: var(--bg-hover); color: var(--text-secondary); }
.lang-chev { flex-shrink: 0; transition: transform 0.15s; }
.lang-dropdown[open] > summary .lang-chev { transform: rotate(180deg); }
.lang-menu {
position: absolute; bottom: calc(100% + 4px); right: 0; left: auto; min-width: 150px;
background: var(--bg-elevated); border: 1px solid var(--border-strong);
border-radius: var(--radius); padding: 4px;
display: flex; flex-direction: column; gap: 2px;
box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 50;
}
.lang-opt {
padding: 6px 10px; border-radius: var(--radius-sm);
font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap;
}
.lang-opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-opt.active { color: var(--accent); font-weight: 600; }
/* ---------------------------------------------------------
PAGE HEADER
--------------------------------------------------------- */
.page-header { margin-bottom: var(--space-8); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.page-header-left { flex: 1; }
.page-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; }
.page-subtitle { font-size: 0.875rem; color: var(--text-secondary); margin-top: var(--space-1); }
/* ---------------------------------------------------------
CARDS
--------------------------------------------------------- */
.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.card-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.card-title { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
.card-body { padding: var(--space-4) var(--space-6); }
/* ---------------------------------------------------------
STATUS PILLS
--------------------------------------------------------- */
.stat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 500; }
.stat-pill.green { background: var(--green-dim); color: var(--green); }
.stat-pill.amber { background: var(--amber-dim); color: var(--amber); }
.stat-pill.muted { background: var(--bg-hover); color: var(--text-secondary); }
.stat-pill.red { background: var(--red-dim); color: var(--red); }
/* ---------------------------------------------------------
STATUS DOT
--------------------------------------------------------- */
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.active { background: var(--green); box-shadow: 0 0 8px var(--green-glow); animation: pulse-green 2s ease-in-out infinite; }
.status-dot.idle { background: var(--amber); box-shadow: 0 0 6px rgba(245,158,11,0.3); }
.status-dot.offline{ background: var(--text-tertiary); }
@keyframes pulse-green {
0%,100% { box-shadow: 0 0 4px var(--green-glow); }
50% { box-shadow: 0 0 14px var(--green-glow); }
}
/* ── Avatar inline override (garante brand DETECTREX amber) ── */
.avatar {
border-color: rgba(255,196,0,0.22);
background: rgba(255,196,0,0.08);
color: var(--accent);
}
/* ---------------------------------------------------------
TABLE
--------------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table thead tr { border-bottom: 1px solid var(--border); }
.data-table th { padding: var(--space-3) var(--space-4); text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; }
.data-table td { padding: var(--space-3) var(--space-4); color: var(--text-primary); border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.td-mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }
.td-dim { color: var(--text-secondary); font-size: 0.875rem; }
/* ---------------------------------------------------------
ACTIVITY BAR
--------------------------------------------------------- */
.activity-bar { display: flex; align-items: center; gap: var(--space-3); min-width: 140px; }
.activity-track { flex: 1; height: 4px; background: var(--bg-hover); border-radius: 100px; overflow: hidden; }
.activity-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--green) 0%, #16d47b 100%); transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.activity-fill.low { background: linear-gradient(90deg, var(--amber) 0%, #fbbf24 100%); }
.activity-fill.none { background: var(--text-tertiary); }
.activity-pct { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); min-width: 2.25rem; text-align: right; }
/* ---------------------------------------------------------
FORMS
--------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.form-input {
width: 100%; background: var(--bg-hover); border: 1px solid var(--border-strong);
border-radius: var(--radius); padding: var(--space-3) var(--space-4);
color: var(--text-primary); font-family: var(--font-body); font-size: 0.9375rem; outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.form-input::placeholder { color: var(--text-tertiary); }
/* ---------------------------------------------------------
BUTTONS
--------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: all 0.15s; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.btn-primary:hover { background: #fbbf24; box-shadow: 0 4px 16px rgba(245,158,11,0.35); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm { font-size: 0.8125rem; padding: var(--space-2) var(--space-3); }
button { cursor: pointer; }
/* ---------------------------------------------------------
ALERTS
--------------------------------------------------------- */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: 0.875rem; display: flex; align-items: center; gap: var(--space-2); }
.alert-error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.alert-info { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(245,158,11,0.2); }
.alert-success { background: var(--green-dim); color: var(--green); border: 1px solid rgba(74,222,128,0.2); }
/* ---------------------------------------------------------
EMPTY STATE
--------------------------------------------------------- */
.empty-state { text-align: center; padding: var(--space-16) var(--space-8); color: var(--text-tertiary); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto var(--space-4); opacity: 0.25; display: block; }
.empty-state p { font-size: 0.9375rem; }
/* ---------------------------------------------------------
TIMELINE
--------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-4);
align-items: flex-start; transition: background 0.12s;
border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: var(--bg-hover); }
.timeline-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); min-width: 5.5rem; padding-top: 3px; flex-shrink: 0; }
.timeline-badge {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 4px; font-size: 0.625rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; margin-top: 2px; white-space: nowrap;
}
.badge-app { background: var(--accent-dim); color: var(--accent); }
.badge-idle { background: var(--bg-active); color: var(--text-tertiary); }
.badge-sample { background: var(--green-dim); color: var(--green); }
.badge-logon { background: rgba(99,102,241,0.12); color: #818cf8; }
.badge-info { background: rgba(56,189,248,0.1); color: #38bdf8; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-app { font-weight: 500; font-size: 0.875rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-detail { font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.timeline-dur { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); flex-shrink: 0; padding-top: 3px; }
/* ---------------------------------------------------------
VIEW TOGGLE (modos de visualização)
--------------------------------------------------------- */
.view-toggle { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.view-toggle button {
background: transparent; border: none; color: var(--text-secondary);
padding: var(--space-2) var(--space-4); font-size: 0.8125rem; font-family: inherit;
cursor: pointer; transition: background 0.12s, color 0.12s; display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle button:not(:last-child) { border-right: 1px solid var(--border-strong); }
.view-toggle button:hover { background: var(--bg-hover); color: var(--text-primary); }
.view-toggle button.active { background: var(--accent); color: var(--text-inverse); }
.view-toggle button svg { width: 14px; height: 14px; }
/* ---------------------------------------------------------
SCRUB TIMELINE (linha do tempo reta com bolinha)
--------------------------------------------------------- */
.scrub-legend { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: var(--space-5); }
.scrub-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.scrub-legend .lg-active { background: var(--green); }
.scrub-legend .lg-personal { background: var(--red); }
.scrub-legend .lg-unclassified { background: var(--text-secondary); opacity: 0.65; }
.scrub-legend .lg-idle { background: var(--accent); opacity: 0.6; }
.scrub-legend .lg-off { background: var(--bg-active); border: 1px solid var(--border-strong); }
.scrub-wrap { position: relative; padding-top: 4px; }
.scrub-bar {
position: relative; height: 30px; border-radius: 6px; overflow: hidden;
background: var(--bg-active); border: 1px solid var(--border);
background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.025) 6px 12px);
}
.scrub-seg { position: absolute; top: 0; bottom: 0; }
.scrub-seg.active { background: var(--green); }
.scrub-seg.personal { background: var(--red); }
.scrub-seg.unclassified { background: var(--text-secondary); opacity: 0.5; }
.scrub-seg.idle { background: var(--accent); opacity: 0.55; }
.scrub-seg.off { background: transparent; }
.scrub-range {
position: absolute; left: -2px; right: -2px; top: 4px; width: calc(100% + 4px);
height: 30px; margin: 0; background: transparent; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.scrub-range:focus { outline: none; }
.scrub-range::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.scrub-range::-moz-range-track { height: 30px; background: transparent; }
.scrub-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: 4px;
border-radius: 50%; background: #fff; border: 3px solid var(--accent);
box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.6); cursor: grab;
}
.scrub-range::-webkit-slider-thumb:active { cursor: grabbing; }
.scrub-range::-moz-range-thumb {
width: 22px; height: 22px; border-radius: 50%; background: #fff;
border: 3px solid var(--accent); box-shadow: 0 0 0 2px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.6); cursor: grab;
}
.scrub-ticks { position: relative; height: 16px; margin-top: var(--space-3); }
.scrub-tick { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); white-space: nowrap; }
.scrub-preview { display: flex; gap: var(--space-6); margin-top: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.scrub-shot {
width: 320px; max-width: 100%; aspect-ratio: 16/9; border-radius: var(--radius);
overflow: hidden; background: #0f0f0f; border: 1px solid var(--border-strong); cursor: pointer; flex-shrink: 0;
}
.scrub-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrub-shot.empty { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 0.8125rem; cursor: default; }
.scrub-meta { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--space-3); }
.scrub-cursor-time { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
.scrub-meta-row { font-size: 0.875rem; color: var(--text-secondary); }
.scrub-meta-row b { color: var(--text-primary); font-weight: 500; }
/* Setas de navegação do lightbox (◀ ▶) — fixas nas bordas, sobre o overlay. */
.lb-nav {
position: fixed; top: 50%; transform: translateY(-50%); z-index: 1001;
width: 52px; height: 52px; border-radius: 50%; border: none;
background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s ease; -webkit-user-select: none; user-select: none; touch-action: none;
}
.lb-nav:hover { background: rgba(255, 255, 255, 0.24); }
.lb-nav svg { width: 28px; height: 28px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
/* ---------------------------------------------------------
FILTER BAR
--------------------------------------------------------- */
.filter-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.filter-bar input[type="date"] {
background: var(--bg-elevated); border: 1px solid var(--border-strong);
border-radius: var(--radius); padding: var(--space-2) var(--space-3);
color: var(--text-primary); font-family: var(--font-mono); font-size: 0.875rem;
outline: none; color-scheme: dark;
}
.filter-bar input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
/* ---------------------------------------------------------
REPORT BARS
--------------------------------------------------------- */
.report-row {
display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border); transition: background 0.12s;
}
.report-row:last-child { border-bottom: none; }
.report-row:hover { background: var(--bg-hover); }
.report-date { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); min-width: 5.5rem; flex-shrink: 0; }
.report-bar-wrap { flex: 1; display: flex; gap: 2px; height: 20px; border-radius: var(--radius-sm); overflow: hidden; }
.seg-active { background: var(--green); }
.seg-idle { background: var(--bg-active); }
.seg-prod { background: #818cf8; }
.seg-neutral{ background: var(--text-tertiary); opacity: 0.5; }
.seg-unp { background: var(--red); }
.report-nums { display: flex; gap: var(--space-6); min-width: 14rem; flex-shrink: 0; justify-content: flex-end; }
.report-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-secondary); text-align: right; }
.report-num span { display: block; font-size: 0.5625rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
/* ---------------------------------------------------------
AVATAR
--------------------------------------------------------- */
.avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--accent-dim); border: 1px solid rgba(245,158,11,0.2);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 0.6875rem; font-weight: 700;
color: var(--accent); flex-shrink: 0; text-transform: uppercase;
}
/* ---------------------------------------------------------
LOGIN SHELL
--------------------------------------------------------- */
.login-shell {
min-height: 100vh; background: var(--bg-base);
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.login-shell::before {
content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%;
background: radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 70%);
top: -180px; left: -180px; pointer-events: none;
}
.login-shell::after {
content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,0.04) 0%, transparent 70%);
bottom: -120px; right: -120px; pointer-events: none;
}
.login-card {
background: var(--bg-surface); border: 1px solid var(--border-strong);
border-radius: var(--radius-lg); padding: var(--space-10);
width: 100%; max-width: 400px; box-shadow: var(--shadow-lg);
position: relative; z-index: 1; animation: fadeUp 0.5s ease both;
}
.login-logo { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.login-logo-mark { display: none; } /* legacy */
.login-logo-text {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-primary);
line-height: 1.15;
}
.login-logo-sub {
font-family: var(--font-mono);
font-size: 0.5625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-top: 2px;
}
.login-heading {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.login-sub { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: var(--space-8); }
.login-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
/* ---------------------------------------------------------
MISC
--------------------------------------------------------- */
.refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; animation: blink 2s ease infinite; }
@keyframes blink { 0%,90%,100%{opacity:1;} 50%{opacity:0.2;} }
.section-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
/* ---------------------------------------------------------
BLAZOR INFRA
--------------------------------------------------------- */
.blazor-error-boundary { background: var(--red-dim); border: 1px solid rgba(239,68,68,0.2); color: var(--red); padding: var(--space-4) var(--space-6); border-radius: var(--radius); margin: var(--space-4); }
.blazor-error-boundary::after { content: "Erro inesperado. Recarregue a página."; }
#blazor-error-ui {
color-scheme: dark; background: var(--bg-surface); border-top: 1px solid var(--border);
color: var(--text-secondary); bottom: 0; left: 0; padding: var(--space-3) var(--space-6);
position: fixed; width: 100%; z-index: 1000; display: none; font-size: 0.875rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); }
/* custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
/* =========================================================
MONITORAMENTO — página unificada (Monitor / Insights / Gerenciar)
========================================================= */
/* ── Barra de seções sticky no topo (scroll-spy) ── */
.sectabs {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: var(--space-1);
margin: calc(var(--space-8) * -1) calc(var(--space-10) * -1) var(--space-6);
padding: var(--space-3) var(--space-10);
background: rgba(10,10,11,0.88); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.sectabs a {
font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
padding: var(--space-2) var(--space-4); border-radius: var(--radius);
text-decoration: none; white-space: nowrap; transition: color .15s, background .15s;
}
.sectabs a:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
.sectabs a.active { color: var(--accent); background: var(--accent-dim); }
section[id^="sec-"] { scroll-margin-top: 72px; margin-bottom: var(--space-12); }
/* ── Cabeçalho de seção ── */
.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.sec-title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; display: flex; align-items: baseline; gap: var(--space-3); }
.sec-title .sec-count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-tertiary); font-weight: 500; }
.sec-sub { font-size: 0.9rem; color: var(--text-secondary); margin-top: var(--space-1); }
.sec-search { width: 240px; max-width: 45vw; }
/* ── Grupos do Monitor (Online / Offline / Aguardando) ── */
.mon-group { margin-bottom: var(--space-5); }
.mon-group-label { display: flex; align-items: center; gap: var(--space-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-3); }
.mon-group-label.clickable { cursor: pointer; user-select: none; }
.mon-group-label.clickable:hover { color: var(--text-secondary); }
.mon-group-label .chev { width: 12px; height: 12px; transition: transform .15s; opacity: .7; }
.mon-group-label .chev.open { transform: rotate(90deg); }
.mon-group-label .dot { width: 7px; height: 7px; border-radius: 50%; }
.mon-group-label .dot.on { background: var(--green); }
.mon-group-label .dot.off { background: var(--text-tertiary); }
.mon-group-label .dot.wait { background: var(--accent); }
.mon-group-label .count { color: var(--text-secondary); font-family: var(--font-mono); }
/* ── KPI cards ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.kpi-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.kpi-label-row { display: flex; align-items: center; gap: 6px; }
/* ── Ícone sutil de info (tooltip nativo no hover) ── */
.info-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--border-strong); color: var(--text-tertiary);
font-family: var(--font-mono); font-size: 9px; font-weight: 600; font-style: normal;
line-height: 1; cursor: help; user-select: none;
transition: color .15s, border-color .15s;
}
.info-dot:hover { color: var(--text-secondary); border-color: var(--text-tertiary); }
/* ── Botões de classificação de categoria ── */
.cat-prod:hover { background: var(--green-dim) !important; color: var(--green) !important; border-color: rgba(0,209,122,0.3) !important; }
.cat-neu:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
.cat-unp:hover { background: var(--red-dim) !important; color: var(--red) !important; border-color: rgba(255,77,46,0.3) !important; }
.kpi-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin-top: var(--space-2); }
.kpi-value small { font-size: 0.9rem; font-weight: 500; color: var(--text-tertiary); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.72rem; margin-top: var(--space-2); }
.kpi-delta svg { width: 11px; height: 11px; }
.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi-delta.flat { color: var(--text-tertiary); }
/* ── Grid de painéis de insight ── */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.ins-grid.full { grid-template-columns: 1fr; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* ── Barras horizontais (top apps / sites / equipes) ── */
.bars { display: flex; flex-direction: column; gap: var(--space-4); }
.bar-item { display: flex; flex-direction: column; gap: 5px; }
.bar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bar-label { font-size: 0.85rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.bar-cat { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 7px; flex-shrink: 0; }
.bar-cat.productive { background: var(--green); }
.bar-cat.neutral { background: var(--text-tertiary); }
.bar-cat.unproductive { background: var(--red); }
.bar-cat.uncat { background: transparent; border: 1px dashed var(--text-tertiary); }
.bar-val { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.bar-track { height: 8px; background: var(--bg-hover); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 100px; transition: width .5s cubic-bezier(0.4,0,0.2,1); }
.bar-fill.productive { background: var(--green); }
.bar-fill.neutral { background: var(--text-tertiary); }
.bar-fill.unproductive { background: var(--red); }
.bar-fill.uncat { background: var(--text-tertiary); opacity: .45; }
.bar-fill.accent { background: var(--accent); }
/* ── Heatmap por hora ── */
.heat { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.heat-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; }
.heat-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--green), #0a9d5c); }
.heat-bar.zero { background: var(--bg-active); }
.heat-hour { font-family: var(--font-mono); font-size: 0.5625rem; color: var(--text-tertiary); }
/* ── Legenda compacta reaproveitável ── */
.legend { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: 0.75rem; color: var(--text-tertiary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* =========================================================
IMPRESSÃO (Relatórios → PDF via window.print)
========================================================= */
@media print {
.app-sidebar, .secnav, .filter-bar, .no-print, #blazor-error-ui, .reconnect-modal { display: none !important; }
.app-shell, .app-main, .app-content { display: block !important; padding: 0 !important; margin: 0 !important; }
body, html { background: #fff !important; color: #000 !important; }
.card { border: 1px solid #ccc !important; box-shadow: none !important; background: #fff !important; }
.page-title, .sec-title, .kpi-value, .kpi-label { color: #000 !important; }
.data-table td, .data-table th { color: #000 !important; border-color: #ddd !important; }
.td-mono, .td-dim, .report-num, .report-date { color: #222 !important; }
a { color: #000 !important; text-decoration: none !important; }
}