:root { color-scheme: light; --surface-1: #ffffff; --surface-2: #eef1f6; --page-plane: #f4f5f7; --text-primary: #14181f; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --border: rgba(11, 11, 11, 0.10); --brand: #0a6cf0; --brand-dark: #0a4fb0; --brand-cyan: #22d3d8; --chart-grid: #e1e0d9; --chart-tick: #52514e; --status-good: #0ca30c; --status-good-bg: #e6f6e6; --status-warning: #b5790a; --status-warning-bg: #fff3d9; --status-critical: #d03b3b; --status-critical-bg: #fbe6e6; } /* Tema escuro — ativado via [data-bs-theme="dark"] no , alternado pelo botão de tema no menu e lembrado por navegador (localStorage). O Bootstrap 5.3 já retinta seus próprios componentes (formulários, tabelas, dropdowns, paginação etc.) sozinho a partir desse mesmo atributo; aqui a gente só precisa redefinir as variáveis próprias do StatusFlow. */ [data-bs-theme="dark"] { color-scheme: dark; --surface-1: #1c2028; --surface-2: #262b35; --page-plane: #12151b; --text-primary: #e8e9ec; --text-secondary: #b8bcc4; --text-muted: #868c98; --gridline: #2f3542; --border: rgba(255, 255, 255, 0.12); --brand: #4c8dfa; --brand-dark: #2f66c4; --brand-cyan: #4be1e6; --chart-grid: rgba(255, 255, 255, 0.12); --chart-tick: #b8bcc4; --status-good: #3ddc84; --status-good-bg: rgba(61, 220, 132, 0.15); --status-warning: #ffcc66; --status-warning-bg: rgba(255, 204, 102, 0.15); --status-critical: #ff6b6b; --status-critical-bg: rgba(255, 107, 107, 0.15); } body { background: var(--page-plane); color: var(--text-primary); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; padding-bottom: 4.5rem; } /* Retinta os componentes "primary" do Bootstrap com o azul da marca StatusFlow */ .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-focus-shadow-rgb: 10, 108, 240; } .btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); } a { color: var(--brand); } a:hover { color: var(--brand-dark); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 0.25rem rgba(10, 108, 240, 0.15); } .navbar { background: var(--surface-1); border-bottom: 1px solid var(--gridline) !important; position: relative; } .navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-cyan)); } .navbar-brand { font-weight: 700; letter-spacing: -0.02em; } /* Troca automática de logo (texto escuro <-> claro) conforme o tema */ .logo-escuro { display: none; } [data-bs-theme="dark"] .logo-escuro { display: inline-block; } [data-bs-theme="dark"] .logo-claro { display: none; } .navbar-brand .brand-dot { color: var(--brand); } .app-card { background: var(--surface-1); border: 1px solid var(--gridline); border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(11, 11, 11, 0.04); } .app-card:hover.app-card-link { border-color: var(--brand); box-shadow: 0 4px 14px rgba(11, 11, 11, 0.08); } a.app-card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s ease, border-color .15s ease; } .status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; } .status-pill.status-verde { background: var(--status-good-bg); color: var(--status-good); } .status-pill.status-amarelo { background: var(--status-warning-bg); color: var(--status-warning); } .status-pill.status-vermelho { background: var(--status-critical-bg); color: var(--status-critical); } .status-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot.status-verde { background: var(--status-good); } .status-dot.status-amarelo { background: var(--status-warning); } .status-dot.status-vermelho { background: var(--status-critical); } .progress-ring { height: 8px; border-radius: 999px; overflow: hidden; background: var(--gridline); display: flex; } .text-muted-soft { color: var(--text-muted); } .timeline { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--gridline); } .timeline-item { position: relative; padding-bottom: 1.25rem; } .timeline-item::before { content: ""; position: absolute; left: -1.94rem; top: 0.2rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface-1); } .quick-action-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-1); border-top: 1px solid var(--gridline); padding: 0.6rem 1rem; z-index: 1030; } .kpi-tile { background: var(--surface-1); border: 1px solid var(--gridline); border-radius: 0.75rem; padding: 1rem 1.1rem; } .kpi-tile .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; } .badge-tipo { background: var(--surface-2); color: var(--text-secondary); font-weight: 600; border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; } .role-badge { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--gridline); font-weight: 500; } /* Botão de alternância de tema (claro/escuro) no menu */ .tema-toggle { width: 2.15rem; height: 2.15rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } @media (max-width: 575.98px) { .kpi-tile .kpi-value { font-size: 1.5rem; } h1 { font-size: 1.5rem; } } /* ------------------------------------------------------------------ */ /* Módulo de Consumo (EPIs) — tiles de KPI, deltas e ranking em barras */ /* ------------------------------------------------------------------ */ .kpi-tile .kpi-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .kpi-tile .kpi-delta { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; } .kpi-tile.kpi-alerta { border-color: rgba(208, 59, 59, 0.35); background: var(--status-critical-bg); } .kpi-tile.kpi-alerta .kpi-value { color: var(--status-critical); } .bar-row + .bar-row { margin-top: 0.65rem; } .bar-row .bar-row-label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.84rem; margin-bottom: 0.25rem; } .bar-row .bar-row-value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } .bar-track { background: var(--gridline); border-radius: 999px; height: 10px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-cyan)); } /* ------------------------------------------------------------------ */ /* Seletor de colunas do relatório de consumo */ /* ------------------------------------------------------------------ */ .coluna-oculta { display: none !important; } .colunas-painel { min-width: 300px; max-width: 92vw; padding: 0.85rem; } .colunas-painel .form-check { margin-bottom: 0.4rem; } .colunas-painel-acoes { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--gridline); } .relatorio-campo .text-muted-soft { font-size: 0.78rem; }