/* Tela "Monitoramento de Agentes" (Heartbeat Fase 2). Fiel ao mockup heartbeat-monitor.html. Tudo escopado sob .hb-page para não colidir com o app/MudBlazor. Tema segue o data-theme do (mesmo mecanismo do app). */ /* Vars no :root pra cascatearem TAMBÉM pro drawer (que é irmão de .hb-page, não filho — se ficassem em .hb-page o drawer sairia sem cor). */ :root { --hb-bg: #f4f6f8; --hb-surface: #fff; --hb-surface-2: #fafbfc; --hb-border: #e3e8ee; --hb-border-strong: #cdd5df; --hb-text: #1a2331; --hb-text-2: #5b6879; --hb-text-3: #8a97a8; --hb-brand: #0a4d8c; --hb-brand-2: #1367b8; --hb-brand-tint: #eaf2fb; --hb-ok: #178a4c; --hb-ok-tint: #e6f4ec; --hb-warn: #b7791f; --hb-warn-tint: #fbf3e2; --hb-danger: #c0392b; --hb-danger-tint: #fbeae8; --hb-mono: 'SF Mono','Cascadia Code','Roboto Mono',ui-monospace,monospace; --hb-radius: 10px; --hb-shadow: 0 1px 2px rgba(16,32,56,.04), 0 2px 8px rgba(16,32,56,.06); } [data-theme="dark"], .mud-theme-dark { --hb-bg: #0e1420; --hb-surface: #161d2b; --hb-surface-2: #1b2433; --hb-border: #263041; --hb-border-strong: #35425a; --hb-text: #e8edf4; --hb-text-2: #9fb0c6; --hb-text-3: #6b7c94; --hb-brand: #4d9fe8; --hb-brand-2: #3b8ad9; --hb-brand-tint: #16273c; --hb-ok: #45c07a; --hb-ok-tint: #143025; --hb-warn: #e0a83e; --hb-warn-tint: #2e2415; --hb-danger: #e57368; --hb-danger-tint: #2e1a18; --hb-shadow: 0 1px 2px rgba(0,0,0,.2), 0 2px 10px rgba(0,0,0,.28); } .hb-page { color: var(--hb-text); font-size: 14px; line-height: 1.5; padding: 4px 26px 36px; } .hb-page * { box-sizing: border-box; } .hb-page .page-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:20px; flex-wrap:wrap; } .hb-page .page-title { font-size:22px; font-weight:750; letter-spacing:-.4px; } .hb-page .page-desc { font-size:13px; color:var(--hb-text-2); margin-top:3px; } .hb-page .live-dot { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--hb-text-2); font-weight:500; } .hb-page .live-dot i { width:7px; height:7px; border-radius:50%; background:var(--hb-ok); box-shadow:0 0 0 3px var(--hb-ok-tint); animation:hb-pulse 2s infinite; } @keyframes hb-pulse { 0%,100%{opacity:1} 50%{opacity:.45} } .hb-page .kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; } .hb-page .kpi { background:var(--hb-surface); border:1px solid var(--hb-border); border-radius:var(--hb-radius); padding:16px 18px; box-shadow:var(--hb-shadow); } .hb-page .kpi-label { font-size:12px; color:var(--hb-text-2); font-weight:600; display:flex; align-items:center; gap:7px; } .hb-page .kpi-label .ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; } .hb-page .kpi-val { font-size:27px; font-weight:760; letter-spacing:-.6px; margin-top:8px; } .hb-page .kpi-val small { font-size:14px; color:var(--hb-text-3); font-weight:600; } .hb-page .kpi-delta { font-size:11.5px; margin-top:4px; font-weight:600; color:var(--hb-text-2); } .hb-page .kpi-delta.up { color:var(--hb-ok); } .hb-page .kpi-delta.down { color:var(--hb-danger); } .hb-page .kpi-ver { display:flex; flex-direction:column; } .hb-page .kpi-ver-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .hb-page .kpi-ver-toggle { display:inline-flex; border:1px solid var(--hb-border-strong); border-radius:6px; overflow:hidden; } .hb-page .kpi-ver-toggle button { border:none; background:var(--hb-surface); color:var(--hb-text-3); font-size:10.5px; font-weight:700; padding:3px 8px; cursor:pointer; } .hb-page .kpi-ver-toggle button.on { background:var(--hb-brand); color:#fff; } .hb-page .ver-bars { display:flex; flex-direction:column; gap:7px; } .hb-page .ver-bar-row { display:flex; align-items:center; gap:8px; } .hb-page .ver-bar-label { font-family:var(--hb-mono); font-size:11px; font-weight:700; color:var(--hb-text-2); width:48px; flex-shrink:0; text-align:right; } .hb-page .ver-bar-track { flex:1; height:16px; background:var(--hb-surface-2); border-radius:5px; overflow:hidden; position:relative; } .hb-page .ver-bar-fill { height:100%; border-radius:5px; transition:width .5s cubic-bezier(.4,0,.2,1); } .hb-page .ver-bar-count { font-family:var(--hb-mono); font-size:11px; font-weight:700; color:var(--hb-text-2); width:62px; flex-shrink:0; text-align:right; } .hb-page .ver-bar-pct { color:var(--hb-text-3); font-weight:600; } .hb-page .ver-bar-row.latest .ver-bar-label { color:var(--hb-ok); } .hb-page .ver-legend { font-size:10.5px; color:var(--hb-text-3); margin-top:9px; display:flex; align-items:center; gap:6px; } .hb-page .ver-legend i { width:8px; height:8px; border-radius:2px; background:var(--hb-ok); } .hb-page .panel { background:var(--hb-surface); border:1px solid var(--hb-border); border-radius:var(--hb-radius); box-shadow:var(--hb-shadow); overflow:hidden; } .hb-page .filters { display:flex; gap:12px; padding:16px 18px; align-items:flex-end; flex-wrap:wrap; border-bottom:1px solid var(--hb-border); } .hb-page .field { display:flex; flex-direction:column; gap:5px; } .hb-page .field label { font-size:11.5px; font-weight:600; color:var(--hb-text-2); } .hb-page .input, .hb-page .select { height:38px; border:1px solid var(--hb-border-strong); border-radius:8px; background:var(--hb-surface); color:var(--hb-text); font-size:13.5px; padding:0 12px; min-width:180px; } .hb-page .input:focus, .hb-page .select:focus { outline:none; border-color:var(--hb-brand); box-shadow:0 0 0 3px var(--hb-brand-tint); } .hb-page .search-wrap { position:relative; } .hb-page .search-wrap svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--hb-text-3); stroke-width:2; pointer-events:none; } .hb-page .search-wrap .input { padding-left:34px; min-width:260px; } .hb-page .seg { display:inline-flex; border:1px solid var(--hb-border-strong); border-radius:8px; overflow:hidden; height:38px; } .hb-page .seg button { border:none; background:var(--hb-surface); color:var(--hb-text-2); padding:0 14px; font-size:13px; font-weight:600; cursor:pointer; border-right:1px solid var(--hb-border); } .hb-page .seg button:last-child { border-right:none; } .hb-page .seg button.on { background:var(--hb-brand); color:#fff; } .hb-page .filter-spacer { flex:1; } .hb-page .btn { height:38px; padding:0 16px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hb-border-strong); background:var(--hb-surface); color:var(--hb-text); } .hb-page .btn svg { width:15px; height:15px; stroke-width:2; } .hb-page .btn.ghost:hover { background:var(--hb-surface-2); } .hb-page .btn.primary { background:var(--hb-brand); border-color:var(--hb-brand); color:#fff; } .hb-page .btn.primary:hover { background:var(--hb-brand-2); } .hb-page .result-meta { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; font-size:12.5px; color:var(--hb-text-2); background:var(--hb-surface-2); border-bottom:1px solid var(--hb-border); } .hb-page .result-meta b { color:var(--hb-text); } .hb-page .chips { display:flex; gap:6px; flex-wrap:wrap; } .hb-page .chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; background:var(--hb-brand-tint); color:var(--hb-brand); padding:3px 8px 3px 10px; border-radius:20px; } .hb-page .chip .x { cursor:pointer; font-weight:700; opacity:.7; margin-left:2px; background:none; border:none; color:inherit; } .hb-page .chip .x:hover { opacity:1; } .hb-page .tbl-wrap { overflow-x:auto; } .hb-page table { width:100%; border-collapse:collapse; } .hb-page thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--hb-text-3); font-weight:700; padding:11px 16px; white-space:nowrap; border-bottom:1px solid var(--hb-border); background:var(--hb-surface); cursor:pointer; user-select:none; } .hb-page thead th:hover { color:var(--hb-text-2); } .hb-page thead th .arrow { opacity:.4; font-size:9px; margin-left:3px; } .hb-page thead th.sorted .arrow { opacity:1; color:var(--hb-brand); } .hb-page tbody td { padding:12px 16px; border-bottom:1px solid var(--hb-border); font-size:13px; vertical-align:middle; } .hb-page tbody tr:hover { background:var(--hb-surface-2); } .hb-page tbody tr:last-child td { border-bottom:none; } .hb-page .cli-cell { display:flex; align-items:center; gap:10px; } .hb-page .tenant-badge { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; font-weight:800; font-size:12px; color:#fff; flex-shrink:0; letter-spacing:-.5px; } .hb-page .cli-name { font-weight:650; } .hb-page .cli-tenant { font-size:11px; color:var(--hb-text-3); font-family:var(--hb-mono); } .hb-page .mono { font-family:var(--hb-mono); font-size:12.5px; } .hb-page .maquina { font-weight:600; } .hb-page .status { display:inline-flex; align-items:center; gap:6px; font-weight:650; font-size:12px; padding:3px 9px; border-radius:20px; white-space:nowrap; } .hb-page .status i { width:7px; height:7px; border-radius:50%; } .hb-page .status.online { background:var(--hb-ok-tint); color:var(--hb-ok); } .hb-page .status.online i { background:var(--hb-ok); } .hb-page .status.stale { background:var(--hb-warn-tint); color:var(--hb-warn); } .hb-page .status.stale i { background:var(--hb-warn); } .hb-page .status.offline, .hb-page .status.blocked { background:var(--hb-danger-tint); color:var(--hb-danger); } .hb-page .status.offline i, .hb-page .status.blocked i { background:var(--hb-danger); } .hb-page .ver { font-family:var(--hb-mono); font-size:12px; color:var(--hb-text-2); } .hb-page .qtd { font-family:var(--hb-mono); font-weight:700; } .hb-page .qtd.zero { color:var(--hb-text-3); } .hb-page .qtd.high { color:var(--hb-warn); } .hb-page .rel { color:var(--hb-text-2); font-size:12.5px; } .hb-page .rel small { display:block; color:var(--hb-text-3); font-size:11px; font-family:var(--hb-mono); } .hb-page .sentinel { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:6px; background:var(--hb-danger-tint); color:var(--hb-danger); } .hb-page .repouso-btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--hb-mono); font-size:12.5px; font-weight:700; color:var(--hb-brand); background:var(--hb-brand-tint); border:1px solid transparent; border-radius:7px; padding:4px 9px; cursor:pointer; } .hb-page .repouso-btn:hover { border-color:var(--hb-brand); } .hb-page .repouso-btn svg { width:13px; height:13px; } .hb-page .repouso-zero { font-family:var(--hb-mono); font-size:12.5px; color:var(--hb-text-3); padding-left:9px; } .hb-page .empty { padding:60px 20px; text-align:center; color:var(--hb-text-3); } .hb-page .empty svg { width:40px; height:40px; stroke-width:1.5; margin-bottom:12px; opacity:.5; } .hb-page .empty h3 { font-size:15px; color:var(--hb-text-2); font-weight:600; margin-bottom:4px; } .hb-page .tbl-foot { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; font-size:12.5px; color:var(--hb-text-2); } /* Drawer de arquivos em repouso */ .hb-drawer-scrim { position:fixed; inset:0; background:rgba(10,20,35,.42); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:1400; } .hb-drawer-scrim.open { opacity:1; pointer-events:auto; } .hb-drawer { position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:var(--hb-surface); border-left:1px solid var(--hb-border); box-shadow:-8px 0 30px rgba(10,20,35,.18); z-index:1401; transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; color:var(--hb-text); } .hb-drawer.open { transform:translateX(0); } .hb-drawer .drawer-head { padding:18px 20px 14px; border-bottom:1px solid var(--hb-border); } .hb-drawer .drawer-head .row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .hb-drawer .drawer-maq { font-family:var(--hb-mono); font-weight:700; font-size:15px; } .hb-drawer .drawer-cli { font-size:12.5px; color:var(--hb-text-2); margin-top:2px; } .hb-drawer .drawer-close { width:32px; height:32px; border-radius:8px; border:1px solid var(--hb-border); background:var(--hb-surface); color:var(--hb-text-2); cursor:pointer; display:grid; place-items:center; flex-shrink:0; } .hb-drawer .drawer-close:hover { background:var(--hb-surface-2); color:var(--hb-text); } .hb-drawer .drawer-close svg { width:16px; height:16px; stroke-width:2; } .hb-drawer .drawer-stat { display:flex; gap:18px; margin-top:14px; } .hb-drawer .drawer-stat .s-val { font-size:20px; font-weight:750; } .hb-drawer .drawer-stat .s-lbl { font-size:11px; color:var(--hb-text-3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .hb-drawer .drawer-note { margin-top:12px; font-size:11.5px; color:var(--hb-text-3); background:var(--hb-surface-2); border:1px solid var(--hb-border); border-radius:8px; padding:8px 10px; line-height:1.45; } .hb-drawer .drawer-body { flex:1; overflow-y:auto; padding:8px 12px 20px; } .hb-drawer .file-row { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:8px; } .hb-drawer .file-row:hover { background:var(--hb-surface-2); } .hb-drawer .file-ic { width:28px; height:28px; border-radius:7px; background:var(--hb-brand-tint); color:var(--hb-brand); display:grid; place-items:center; flex-shrink:0; } .hb-drawer .file-ic svg { width:14px; height:14px; stroke-width:2; } .hb-drawer .file-name { font-family:var(--hb-mono); font-size:12.5px; font-weight:600; word-break:break-all; } .hb-drawer .file-meta { font-size:11px; color:var(--hb-text-3); margin-top:1px; } .hb-drawer .file-idx { margin-left:auto; font-family:var(--hb-mono); font-size:11px; color:var(--hb-text-3); flex-shrink:0; } .hb-drawer .drawer-foot { padding:12px 20px; border-top:1px solid var(--hb-border); display:flex; gap:8px; } /* O .btn do drawer fica fora de .hb-page — precisa das próprias regras (senão o SVG fica sem tamanho e estoura a tela). */ .hb-drawer .btn { height:38px; padding:0 16px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--hb-border-strong); background:var(--hb-surface); color:var(--hb-text); } .hb-drawer .btn svg { width:15px; height:15px; stroke-width:2; flex-shrink:0; } .hb-drawer .btn.ghost:hover { background:var(--hb-surface-2); } @media (max-width:1320px) { .hb-page .kpis { grid-template-columns:repeat(3,1fr); } } @media (max-width:760px) { .hb-page .kpis { grid-template-columns:repeat(2,1fr); } } @media (max-width:620px) { .hb-page .kpis { grid-template-columns:1fr 1fr; } .hb-page .search-wrap .input { min-width:100%; } .hb-drawer { width:100vw; } }