/* ════════════════════════════════════════════════════════════════════ ARGUS · custom.css Periwinkle (light) + Midnight (dark) · single source of truth Tema é alternado via [data-theme="dark"] no . ════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS · light (default) ─────────────────────────────────── */ :root { /* Surfaces */ --bg: #F2F2F7; --bg-subtle: #E9E9F0; --surface: #FFFFFF; --surface-alt: #FAFAFC; --border: #E3E3EC; --border-soft: #EDEDF3; /* Text */ --text: #16172B; --text-primary: #16172B; --text-muted: #6C6E89; --text-dim: #A1A3BA; --text-inv: #FFFFFF; /* Brand */ --primary: #5159E6; --primary-dim: #E8E9FB; --primary-deep: #2A30A8; --primary-fg: #FFFFFF; --accent: var(--primary); --accent-dim: var(--primary-dim); --accent-glow: rgba(81, 89, 230, .25); /* Semantic */ --coral: #F26B5E; --coral-dim: #FCE0DC; --coral-deep: #9B3023; --butter: #E5B135; --butter-dim: #FBEFCF; --butter-deep: #7A5A0F; --mint: #3CB489; --mint-dim: #D6F0E5; --mint-deep: #216548; /* Legacy aliases (mantém compat com seus templates) */ --success: var(--mint); --success-glow: var(--mint-dim); --warning: var(--butter); --warning-glow: var(--butter-dim); --danger: var(--coral); --danger-glow: var(--coral-dim); --info: #3F8FE0; --info-glow: #DCEAF8; --bg-elevated: var(--surface); --bg-card: var(--surface); --card-bg: var(--surface); /* Shape */ --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(22,23,43,.05); --shadow-md: 0 4px 12px rgba(22,23,43,.06); --shadow-lg: 0 12px 32px rgba(22,23,43,.10); /* Type */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* Sidebar dimensions */ --sidebar-w: 232px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; } /* ── 1b. TOKENS · dark ───────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0E0F23; --bg-subtle: #171935; --surface: #1A1D3C; --surface-alt: #22264A; --border: #2F3358; --border-soft: #262A47; --text: #ECEDF9; --text-primary: #ECEDF9; --text-muted: #9DA1C2; --text-dim: #6A6E91; --text-inv: #0E0F23; --primary: #7D85FF; --primary-dim: #2C3068; --primary-deep: #C2C7FF; --primary-fg: #FFFFFF; --accent-glow: rgba(125, 133, 255, .35); --coral: #FF7E72; --coral-dim: #48262C; --coral-deep: #FFB4AC; --butter: #F0C155; --butter-dim: #3F3014; --butter-deep: #F5D78A; --mint: #5DD2A2; --mint-dim: #1B3A2D; --mint-deep: #A5E8C9; --info: #6BA3E9; --info-glow: #1E2B45; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 20px 48px rgba(0,0,0,.5); } /* ── 2. BASE ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } code, kbd, samp, pre { font-family: var(--sans); font-size: .92em; } h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -0.018em; font-weight: 700; } h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* ── 3. SIDEBAR ──────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; overflow: hidden; /* evita logo/conteúdo vazar quando colapsada */ transition: width .2s ease, transform .2s ease; } .sidebar.collapsed { width: var(--sidebar-w-collapsed); } .sidebar.collapsed .sidebar-link-text, .sidebar.collapsed .sidebar-logo-tag, .sidebar.collapsed .nav-group-label > span, .sidebar.collapsed .nav-chevron, .sidebar.collapsed .sidebar-footer .flex-grow-1, .sidebar.collapsed .sidebar-user .bi-chevron-up, .sidebar.collapsed .sidebar-pin-btn .sidebar-link-text, .sidebar.collapsed .theme-toggle-label, .sidebar.collapsed .theme-toggle-track { display: none; /* mais robusto que opacity em modo colapsado */ } .sidebar.collapsed .sidebar-link, .sidebar.collapsed .nav-group-label, .sidebar.collapsed .sidebar-pin-btn, .sidebar.collapsed .theme-toggle-btn, .sidebar.collapsed .sidebar-user > div { justify-content: center; padding-inline: 8px; } .sidebar.collapsed .nav-group-label { padding-block: 6px; } .sidebar.collapsed .sidebar-logo { padding: 12px 8px; justify-content: center; } .sidebar.collapsed .sidebar-logo img { max-width: 36px; height: auto; max-height: 36px; object-fit: contain; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; } .sidebar-overlay.active { display: block; } .sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: var(--text); overflow: hidden; /* logo wordmark não pode vazar */ min-height: 60px; /* garante altura consistente */ } .sidebar-logo img { height: 28px; width: auto; max-width: 100%; /* não passa do container */ object-fit: contain; flex-shrink: 0; } /* Logo branca / SVG monocromático: inverte para preto no tema claro. Se sua logo já é colorida, adicione a classe `.logo-no-invert` no . */ .sidebar-logo img:not(.logo-no-invert) { filter: brightness(0); /* logo branca → preta no light */ transition: filter .15s; } [data-theme="dark"] .sidebar-logo img:not(.logo-no-invert) { filter: brightness(0) invert(1); /* logo branca → branca no dark */ } .sidebar-logo-tag { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-subtle); padding: 3px 7px; border-radius: 4px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 10px 12px; } .nav-group { margin-top: 12px; } .nav-group-label { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; padding: 4px 10px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; } .nav-chevron { font-size: 10px; transition: transform .15s; } .nav-group.collapsed .nav-chevron { transform: rotate(-90deg); } .nav-group.collapsed .nav-group-items { display: none; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 1px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; cursor: pointer; transition: background .12s, color .12s; } .sidebar-link i { font-size: 14px; width: 16px; color: var(--text-muted); flex-shrink: 0; } .sidebar-link:hover { background: var(--bg-subtle); color: var(--text); } .sidebar-link.active { background: var(--primary); color: var(--primary-fg); font-weight: 600; } .sidebar-link.active i { color: var(--primary-fg); } /* Sidebar footer + user */ .sidebar-pin-btn { margin: 8px 12px; display: flex; align-items: center; padding: 6px 10px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 7px; color: var(--text-muted); cursor: pointer; font-size: 11px; } .sidebar-pin-btn:hover { background: var(--bg-subtle); color: var(--text); } .sidebar-footer { border-top: 1px solid var(--border-soft); padding: 10px; } .sidebar-user { display: flex; align-items: center; gap: 10px; } .sidebar-avatar { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--coral)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .sidebar-uname { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.2; } .sidebar-urole { font-size: 10.5px; color: var(--text-muted); text-transform: capitalize; } /* Theme toggle button (in sidebar) */ .theme-toggle-row { border-top: 1px solid var(--border-soft); padding: 10px 12px; } .sidebar.collapsed .theme-toggle-row { padding: 8px; } .theme-toggle-btn { width: 100%; display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border-soft); color: var(--text); padding: 7px 10px; border-radius: 7px; font: 600 12px var(--sans); cursor: pointer; transition: background .12s; white-space: nowrap; overflow: hidden; } .sidebar.collapsed .theme-toggle-btn { padding: 8px; gap: 0; } .theme-toggle-btn:hover { background: var(--bg-subtle); } .theme-toggle-btn i { color: var(--primary); font-size: 13px; } .theme-toggle-label { flex: 1; text-align: left; } .theme-toggle-track { width: 28px; height: 14px; background: var(--border); border-radius: 99px; position: relative; transition: background .15s; } .theme-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: #fff; border-radius: 50%; transition: left .2s; } [data-theme="dark"] .theme-toggle-track { background: var(--primary); } [data-theme="dark"] .theme-toggle-thumb { left: 15px; } /* ── 4. MAIN WRAPPER + TOPBAR ─────────────────────────────────────── */ .main-wrapper { margin-left: var(--sidebar-w); min-height: 100vh; background: var(--bg); transition: margin-left .2s ease; } body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-w-collapsed); } .topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 28px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20; } .topbar-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; } .topbar-workspace { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 7px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .topbar-workspace i { color: var(--primary); } .sidebar-toggle { display: none; background: transparent; border: none; color: var(--text); font-size: 20px; cursor: pointer; padding: 4px 8px; } .page-content { padding: 24px 28px 40px; } /* ── 5. BREADCRUMB ───────────────────────────────────────────────── */ .argus-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; } .argus-breadcrumb a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .argus-breadcrumb a:hover { color: var(--text); } .bc-sep { font-size: 9px; color: var(--text-dim); } .bc-current { color: var(--text); font-weight: 600; } /* ── 6. CARDS (Bootstrap override) ───────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--text); } .card-header, .card-footer { background: transparent; border-color: var(--border-soft); color: var(--text); } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { color: var(--text); } .card-body { color: var(--text); } /* ── 7. BUTTONS ──────────────────────────────────────────────────── */ .btn { font-family: var(--sans); font-weight: 600; font-size: 12.5px; border-radius: 8px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; letter-spacing: -0.005em; } .btn-sm { font-size: 11.5px; padding: 5px 10px; border-radius: 7px; } .btn-lg { font-size: 14px; padding: 10px 18px; } .btn-primary { background: var(--text); color: var(--text-inv); border-color: var(--text); } .btn-primary:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .btn-success { background: var(--mint); color: #fff; border-color: var(--mint); } .btn-success:hover { background: var(--mint-deep); border-color: var(--mint-deep); color: #fff; } .btn-danger { background: var(--coral); color: #fff; border-color: var(--coral); } .btn-danger:hover { filter: brightness(0.95); color: #fff; } .btn-warning { background: var(--butter); color: var(--butter-deep); border-color: var(--butter); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); background: transparent; } .btn-outline-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .btn-outline-secondary { color: var(--text); border-color: var(--border); background: var(--surface); } .btn-outline-secondary:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--border); } .btn-outline-success { color: var(--mint); border-color: var(--mint-dim); background: transparent; } .btn-outline-success:hover { background: var(--mint); color: #fff; border-color: var(--mint); } .btn-outline-danger { color: var(--coral); border-color: var(--coral-dim); background: transparent; } .btn-outline-danger:hover { background: var(--coral); color: #fff; } .btn-outline-info { color: var(--info); border-color: var(--info-glow); background: transparent; } .btn-outline-info:hover { background: var(--info); color: #fff; } .btn-secondary { background: var(--bg-subtle); color: var(--text); border-color: transparent; } .btn-secondary:hover { background: var(--border); } /* sv-btn — utility ghost button used em vários templates */ .sv-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 11px; border-radius: 7px; font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s; } .sv-btn:hover { background: var(--bg-subtle); color: var(--text); } .sv-btn i { font-size: 12px; } /* Loading state */ .btn-loading { opacity: 0.7; pointer-events: none; } .btn-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; display: inline-block; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .spin { animation: btn-spin 1s linear infinite; display: inline-block; } /* ── 8. FORMS ─────────────────────────────────────────────────────── */ .form-control, .form-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 7px; font-size: 13px; padding: 8px 12px; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--surface); color: var(--text); outline: none; } .form-control::placeholder { color: var(--text-dim); } .form-label { color: var(--text-muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 4px; } .field-valid { border-color: var(--mint) !important; } .field-invalid { border-color: var(--coral) !important; } .field-feedback { display: none; font-size: 11px; margin-top: 4px; align-items: center; gap: 4px; } .field-feedback.show { display: flex; } .field-feedback.valid { color: var(--mint-deep); } .field-feedback.invalid { color: var(--coral-deep); } /* ── 9. TABLES ───────────────────────────────────────────────────── */ .table { color: var(--text); margin: 0; --bs-table-bg: transparent; } .table > :not(caption) > * > * { background: transparent; border-color: var(--border-soft); padding: 12px 14px; } .table thead th { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; background: var(--surface-alt); border-bottom: 1px solid var(--border); } .table-hover tbody tr:hover > * { background: var(--bg-subtle); color: var(--text); } .table-light, .table-light > th, .table-light > td { background: var(--surface-alt); } /* ── 10. BADGES + PILLS ─────────────────────────────────────────── */ .badge { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; } .badge.bg-success, .badge.bg-mint { background: var(--mint-dim) !important; color: var(--mint-deep) !important; } .badge.bg-warning { background: var(--butter-dim) !important; color: var(--butter-deep) !important; } .badge.bg-danger { background: var(--coral-dim) !important; color: var(--coral-deep) !important; } .badge.bg-info { background: var(--info-glow) !important; color: var(--info) !important; } .badge.bg-secondary { background: var(--bg-subtle) !important; color: var(--text-muted) !important; } .badge.bg-primary { background: var(--primary-dim) !important; color: var(--primary-deep) !important; } .badge.bg-dark { background: var(--text) !important; color: var(--text-inv) !important; } /* ── 11. ALERTS ──────────────────────────────────────────────────── */ .alert { border-radius: var(--radius-lg); border: 1px solid transparent; font-size: 13px; padding: 12px 16px; } .alert-info { background: var(--info-glow); color: var(--text); border-color: var(--info-glow); } .alert-success { background: var(--mint-dim); color: var(--mint-deep); border-color: var(--mint-dim); } .alert-warning { background: var(--butter-dim); color: var(--butter-deep); border-color: var(--butter-dim); } .alert-danger { background: var(--coral-dim); color: var(--coral-deep); border-color: var(--coral-dim); } .btn-close { filter: var(--btn-close-filter, none); opacity: .6; } [data-theme="dark"] .btn-close { filter: invert(1) brightness(1.2); } /* ── 12. MODALS ──────────────────────────────────────────────────── */ .modal-content { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: var(--border-soft); } .modal-title { color: var(--text); } /* ── 13. DROPDOWNS ───────────────────────────────────────────────── */ .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 4px; font-size: 13px; } .dropdown-item { color: var(--text); padding: 7px 10px; border-radius: 5px; } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-subtle); color: var(--text); } .dropdown-item.active { background: var(--primary-dim); color: var(--primary-deep); } .dropdown-divider { border-color: var(--border-soft); } .dropdown-header { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; } /* ── 14. NAV TABS ────────────────────────────────────────────────── */ .nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; } .nav-tabs .nav-link { border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nav-tabs .nav-link:hover { color: var(--text); border-color: transparent; } .nav-tabs .nav-link.active { background: transparent; color: var(--text); font-weight: 700; border-color: var(--primary); } /* ── 15. PROGRESS BARS ───────────────────────────────────────────── */ .progress { background: var(--bg-subtle); border-radius: 99px; height: 8px; overflow: hidden; } .progress-slim { height: 4px; } .progress-bar { background: var(--primary); border-radius: 99px; } .progress-bar.bg-success { background: var(--mint) !important; } .progress-bar.bg-warning { background: var(--butter) !important; } .progress-bar.bg-danger { background: var(--coral) !important; } .progress-bar.bg-info { background: var(--info) !important; } /* ── 16. STATUS DOT ──────────────────────────────────────────────── */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-dim); } .status-dot.bg-success { background: var(--mint) !important; box-shadow: 0 0 0 3px var(--mint-dim); } .status-dot.bg-warning { background: var(--butter) !important; box-shadow: 0 0 0 3px var(--butter-dim); } .status-dot.bg-danger { background: var(--coral) !important; box-shadow: 0 0 0 3px var(--coral-dim); } /* ── 17. TOASTS ──────────────────────────────────────────────────── */ .argus-toast-wrap { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; pointer-events: none; } .argus-toast { pointer-events: auto; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 12px 16px; display: flex; gap: 10px; min-width: 260px; max-width: 380px; color: var(--text); font-size: 13px; } .argus-toast.success { border-left-color: var(--mint); } .argus-toast.warning { border-left-color: var(--butter); } .argus-toast.danger { border-left-color: var(--coral); } .argus-toast.info { border-left-color: var(--info); } .argus-toast-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; } .argus-toast.success .argus-toast-icon { color: var(--mint); } .argus-toast.warning .argus-toast-icon { color: var(--butter); } .argus-toast.danger .argus-toast-icon { color: var(--coral); } .argus-toast.info .argus-toast-icon { color: var(--info); } .argus-toast-body { flex: 1; } .argus-toast-title { font-weight: 700; font-size: 12.5px; color: var(--text); margin-bottom: 1px; } .argus-toast-sub { font-size: 12px; color: var(--text-muted); } /* ── 18. DASHBOARD WIDGETS ──────────────────────────────────────── */ .db-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .db-widget { position: relative; min-height: 80px; } .db-widget[data-widget="health-stats"] { grid-column: span 12; } .db-widget[data-widget="health-chart"] { grid-column: span 5; } .db-widget[data-widget="disk-top"] { grid-column: span 7; } .db-widget[data-widget="top-metrics"] { grid-column: span 5; } .db-widget[data-widget="cert-alerts"] { grid-column: span 7; } .db-widget[data-widget="health-scores"] { grid-column: span 6; } .db-widget[data-widget="predictions"] { grid-column: span 6; } .db-widget[data-widget="recent-logs"] { grid-column: span 7; } .db-widget[data-widget="stopped-services"] { grid-column: span 5; } .db-widget[data-widget="uptime-kuma"] { grid-column: span 12; } .db-widget-handle { display: none; position: absolute; top: 8px; right: 8px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 6px; padding: 4px 6px; cursor: grab; color: var(--text-muted); font-size: 14px; z-index: 10; } .db-grid.editing .db-widget { outline: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 4px; } .db-grid.editing .db-widget-handle { display: flex; align-items: center; } .db-grid.editing .db-widget.dragging { opacity: .4; outline-color: var(--primary); } .db-grid.editing .db-widget.drag-over { outline-color: var(--primary); background: var(--primary-dim); } /* KPI cards (Dashboard) — modern look com sparkline */ .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; height: 100%; } .kpi-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .kpi-value { font-size: 36px; font-weight: 700; color: var(--text); letter-spacing: -0.04em; line-height: 1; margin-top: 6px; font-feature-settings: "tnum"; } .kpi-suffix { font-size: 13px; color: var(--text-dim); font-weight: 500; } .kpi-delta { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em; } .kpi-delta.up { background: var(--mint-dim); color: var(--mint-deep); } .kpi-delta.warn { background: var(--butter-dim); color: var(--butter-deep); } .kpi-delta.down { background: var(--coral-dim); color: var(--coral-deep); } .kpi-spark { margin-top: 10px; display: block; height: 22px; width: 100%; } /* Section title in cards */ .section-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.015em; margin: 0; display: flex; align-items: center; gap: 8px; } .section-subtitle { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } /* Generic list-group override (used for widget rows) */ .list-group-item { background: transparent; border-color: var(--border-soft); color: var(--text); padding: 11px 16px; font-size: 13px; } .list-group-item:first-child { border-top: none; } .list-group-item:last-child { border-bottom: none; } .list-group-flush > .list-group-item { border-width: 0 0 1px; } .list-group-flush > .list-group-item:last-child { border-bottom: 0; } /* Empty state */ .empty-state { text-align: center; padding: 32px 16px; color: var(--text-muted); } .empty-state i { font-size: 24px; color: var(--text-dim); display: block; margin-bottom: 8px; } /* ── 19. UTILITIES ───────────────────────────────────────────────── */ .text-muted { color: var(--text-muted) !important; } .text-primary { color: var(--primary) !important; } .text-success { color: var(--mint) !important; } .text-warning { color: var(--butter) !important; } .text-danger { color: var(--coral) !important; } .text-info { color: var(--info) !important; } .text-light { color: var(--text) !important; } /* legacy alias — Bootstrap text-light */ .text-white { color: var(--text) !important; } /* legacy alias — texto que era branco no dark */ .text-dark { color: var(--text) !important; } /* legacy alias — Bootstrap text-dark */ .text-body { color: var(--text) !important; } .border-secondary { border-color: var(--border) !important; } .border { border-color: var(--border) !important; } .bg-dark { background: var(--surface) !important; } .bg-black { background: var(--bg-subtle) !important; } .bg-light { background: var(--surface-alt) !important; } .bg-body { background: var(--bg) !important; } .bg-white { background: var(--surface) !important; } .bg-transparent { background: transparent !important; } /* Code/pre/kbd defensivos — sempre legíveis */ code, pre, kbd, samp { color: var(--text); background: var(--bg-subtle); padding: 1px 5px; border-radius: 3px; font-size: .9em; } pre { padding: 10px 12px; border-radius: 6px; } pre code { background: transparent; padding: 0; } /* Input-group (Bootstrap) — usa surface */ .input-group-text { background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); } /* List-group itens */ .list-group-item-light { background: var(--surface-alt) !important; color: var(--text) !important; } .list-group-item-dark { background: var(--surface) !important; color: var(--text) !important; } /* Garantir que cards, modais e outros containers SEMPRE usem var(--text) */ .card, .card-body, .card-header, .card-footer, .modal-content, .modal-body, .modal-header, .modal-footer, .list-group, .list-group-item, .alert, .table { color: var(--text); } hr { border-color: var(--border-soft); opacity: 1; } /* ── 20. MOBILE ──────────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); width: var(--sidebar-w); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .main-wrapper { margin-left: 0; } body.sidebar-collapsed .main-wrapper { margin-left: 0; } .sidebar-toggle { display: block; } .sidebar-pin-btn { display: none; } .page-content { padding: 16px; } .topbar { padding: 0 16px; } .db-widget { grid-column: span 12 !important; } } /* ── 21. PRINT ───────────────────────────────────────────────────── */ @media print { .sidebar, .topbar, .argus-toast-wrap { display: none; } .main-wrapper { margin-left: 0; } .card { break-inside: avoid; box-shadow: none; } } /* ── 22. AUTH PAGES (login, 2FA, recovery, etc) ──────────────────── */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); } @media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-brand { display: none; } } /* Left brand panel */ .auth-brand { position: relative; background: radial-gradient(ellipse at 20% 10%, var(--primary-dim) 0%, transparent 45%), radial-gradient(ellipse at 80% 90%, var(--coral-dim) 0%, transparent 50%), var(--bg-subtle); display: flex; flex-direction: column; justify-content: space-between; padding: 48px; overflow: hidden; border-right: 1px solid var(--border); } .auth-brand-logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .auth-brand-logo img { height: 28px; width: auto; max-width: 140px; object-fit: contain; } .auth-brand-logo img:not(.logo-no-invert) { filter: brightness(0); } [data-theme="dark"] .auth-brand-logo img:not(.logo-no-invert) { filter: brightness(0) invert(1); } .auth-brand-hero { max-width: 480px; } .auth-brand-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); padding: 5px 11px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; } .auth-brand-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-dim); } .auth-brand h1 { font-size: 38px; font-weight: 700; color: var(--text); letter-spacing: -0.03em; line-height: 1.05; margin: 18px 0 12px; } .auth-brand h1 em { font-style: normal; background: linear-gradient(120deg, var(--primary), var(--coral)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .auth-brand p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; max-width: 460px; } .auth-brand-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .auth-brand-stat-val { font-size: 22px; font-weight: 700; color: var(--text); font-feature-settings: "tnum"; letter-spacing: -0.02em; } .auth-brand-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } .auth-brand-foot { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 12px; } .auth-dots { position: absolute; top: 30%; right: -40px; width: 200px; height: 220px; opacity: 0.5; pointer-events: none; } /* Right form panel */ .auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; position: relative; } .auth-form-wrap { width: 100%; max-width: 380px; } .auth-theme-toggle { position: absolute; top: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; } .auth-theme-toggle:hover { background: var(--bg-subtle); } .auth-form-wrap h2 { font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.025em; margin: 0 0 6px; } .auth-form-wrap .sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 28px; } .auth-field { margin-bottom: 14px; } .auth-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; margin-bottom: 6px; text-transform: uppercase; } .auth-input-wrap { position: relative; display: flex; align-items: center; } .auth-input-wrap > .bi { position: absolute; left: 12px; color: var(--text-dim); font-size: 14px; pointer-events: none; } .auth-input-wrap input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 9px; font-size: 14px; padding: 11px 14px 11px 38px; font-family: var(--sans); transition: border-color .12s, box-shadow .12s; } .auth-input-wrap input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-glow); } .auth-input-wrap input::placeholder { color: var(--text-dim); } /* OTP/2FA specific: centered, big — uses Inter com tabular nums */ .auth-input-otp input { padding: 16px; text-align: center; font-family: var(--sans); font-feature-settings: "tnum"; font-size: 22px; font-weight: 600; letter-spacing: 0.4em; } .auth-input-otp > .bi { display: none; } .auth-helptext { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; display: flex; align-items: center; gap: 5px; } .auth-submit { width: 100%; background: var(--text); color: var(--text-inv); border: 1px solid var(--text); border-radius: 9px; padding: 11px 14px; font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; transition: background .12s, transform .04s; } .auth-submit:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .auth-submit:active { transform: translateY(1px); } .auth-error { background: var(--coral-dim); color: var(--coral-deep); border: 1px solid var(--coral-dim); border-radius: 9px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .auth-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--text-muted); text-align: center; } .auth-foot a { color: var(--primary); text-decoration: none; font-weight: 600; } .auth-foot a:hover { text-decoration: underline; }