/* ============================================================================= * Athmos Admin — Design System (com light/dark) * Tema: Híbrido configurável (header sempre escuro; conteúdo claro ou escuro) * Estilo: GitHub-like (denso, tabular) * ============================================================================= */ /* === TOKENS DEPENDENTES DO TEMA =========================================== * O `[data-theme]` fica no , então variáveis em cascade pra todo o app. * Tudo o que muda entre claro/escuro está nessas duas blocos. * ============================================================================*/ [data-theme="light"] { /* === Cores neutras (light surface) === */ --canvas: #f6f8fa; --surface: #ffffff; --surface-2: #f6f8fa; --surface-3: #eaeef2; --border: #d0d7de; --border-strong: #afb8c1; /* === Texto === */ --fg: #1f2328; --fg-muted: #59636e; --fg-subtle: #6e7781; /* === Acentos === */ --accent: #0969da; --accent-hover: #0860c8; --accent-fg: #ffffff; --accent-bg: #ddf4ff; --accent-border: #54aeff; /* === Estados semânticos === */ --success: #1a7f37; --success-bg: #dafbe1; --success-border: #2da44e; --warning: #9a6700; --warning-bg: #fff8c5; --warning-border: #d4a72c; --danger: #cf222e; --danger-bg: #ffebe9; --danger-border: #ff8182; --done-bg: #fbefff; --done-fg: #8250df; --done-border: #c297ff; /* === Sombras === */ --shadow-sm: 0 1px 0 rgba(31, 35, 40, 0.04); --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15); --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2); /* === Modal backdrop === */ --backdrop: rgba(15, 18, 25, 0.5); /* === Auth gradient === */ --auth-gradient-from: #f6f8fa; --auth-gradient-to: #eaeef2; } [data-theme="dark"] { /* === Cores neutras (dark surface) === */ --canvas: #0d1117; --surface: #161b22; --surface-2: #1c2128; --surface-3: #21262d; --border: #30363d; --border-strong: #484f58; /* === Texto === */ --fg: #e6edf3; --fg-muted: #8d96a0; --fg-subtle: #6e7681; /* === Acentos === */ --accent: #2f81f7; --accent-hover: #4493f8; --accent-fg: #ffffff; --accent-bg: #0d2c54; --accent-border: #1f6feb; /* === Estados semânticos === */ --success: #3fb950; --success-bg: #0f2d18; --success-border: #2ea043; --warning: #d29922; --warning-bg: #2d2304; --warning-border: #9e6a03; --danger: #f85149; --danger-bg: #2d1112; --danger-border: #da3633; --done-bg: #271642; --done-fg: #b083f0; --done-border: #6e40c9; /* === Sombras (mais sutis no dark) === */ --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* === Modal backdrop === */ --backdrop: rgba(0, 0, 0, 0.7); /* === Auth gradient === */ --auth-gradient-from: #0d1117; --auth-gradient-to: #161b22; } /* === TOKENS FIXOS ========================================================= * O header é sempre escuro nos dois temas (decisão de identidade visual). * Tipografia, raios e transições também não mudam. * ============================================================================*/ :root { /* === Header (sempre dark) === */ --header-bg: #0d1117; --header-fg: #e6edf3; --header-fg-dim: #8d96a0; --header-border: #21262d; --header-hover: #1f242c; /* === Tipografia === */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* === Tamanhos === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --header-height: 56px; /* === Transições === */ --t-fast: 80ms cubic-bezier(0.33, 1, 0.68, 1); --t-base: 150ms cubic-bezier(0.33, 1, 0.68, 1); } /* === RESET ================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--canvas); color: var(--fg); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum"; /* Transição suave entre temas (mas não prejudica perf) */ transition: background-color var(--t-base), color var(--t-base); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 600; } h1 { font-size: 24px; letter-spacing: -0.01em; } h2 { font-size: 18px; letter-spacing: -0.01em; } h3 { font-size: 15px; } p { margin: 0; } /* ============================================================================= * HEADER (sempre dark) * ============================================================================= */ .app-header { height: var(--header-height); background: var(--header-bg); color: var(--header-fg); border-bottom: 1px solid var(--header-border); display: flex; align-items: center; padding: 0 var(--space-6); gap: var(--space-6); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--header-fg); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; } .brand:hover { text-decoration: none; opacity: 0.9; } .brand-logo { width: 26px; height: 26px; flex-shrink: 0; } .nav-primary { display: flex; align-items: center; gap: var(--space-1); flex: 1; } .nav-primary a { color: var(--header-fg-dim); font-weight: 500; font-size: 14px; padding: 6px 12px; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-base), background var(--t-base); } .nav-primary a:hover { color: var(--header-fg); background: var(--header-hover); text-decoration: none; } .nav-primary a.active { color: var(--header-fg); background: var(--header-hover); } .nav-primary a.active::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .nav-end { display: flex; align-items: center; gap: var(--space-3); } .user-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 10px 4px 4px; border: 1px solid var(--header-border); border-radius: var(--radius-pill); color: var(--header-fg); font-size: 13px; } .user-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #0969da, #6f42c1); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; } .btn-logout { background: transparent; border: 1px solid var(--header-border); color: var(--header-fg); border-radius: var(--radius-md); padding: 5px 12px; font-size: 13px; font-weight: 500; transition: background var(--t-base), border-color var(--t-base); } .btn-logout:hover { background: var(--header-hover); border-color: #30363d; } /* === Theme toggle === */ .theme-toggle { background: transparent; border: 1px solid var(--header-border); color: var(--header-fg); border-radius: var(--radius-md); padding: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-base), border-color var(--t-base); } .theme-toggle:hover { background: var(--header-hover); border-color: #30363d; } /* Mostra o ícone certo baseado no tema atual. * Os dois ícones ficam no DOM; só um aparece. */ .theme-toggle__icon-sun { display: none; } .theme-toggle__icon-moon { display: block; } [data-theme="dark"] .theme-toggle__icon-sun { display: block; } [data-theme="dark"] .theme-toggle__icon-moon { display: none; } /* ============================================================================= * MAIN * ============================================================================= */ .app-main { max-width: 1280px; margin: 0 auto; padding: var(--space-6); } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-4); flex-wrap: wrap; } .page-header__title { display: flex; flex-direction: column; gap: 2px; } .page-header__subtitle { color: var(--fg-muted); font-size: 13px; } .page-header__actions { display: flex; gap: var(--space-2); align-items: center; } /* ============================================================================= * STATS * ============================================================================= */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; transition: border-color var(--t-base); } .stat-card:hover { border-color: var(--border-strong); } .stat-card__label { color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; display: flex; align-items: center; gap: 6px; } .stat-card__value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat-card--accent { border-color: var(--accent-border); background: var(--accent-bg); } .stat-card--success { border-color: var(--success-border); } .stat-card--success .stat-card__value { color: var(--success); } .stat-card--warning { border-color: var(--warning-border); } .stat-card--warning .stat-card__value { color: var(--warning); } .stat-card--danger { border-color: var(--danger-border); } .stat-card--danger .stat-card__value { color: var(--danger); } /* ============================================================================= * TOOLBAR & SEGMENTED * ============================================================================= */ .toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: none; flex-wrap: wrap; } .toolbar > .grow { flex: 1; } .segmented { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .segmented a { padding: 5px 12px; font-size: 13px; color: var(--fg-muted); background: var(--surface); border-right: 1px solid var(--border); font-weight: 500; transition: background var(--t-base), color var(--t-base); } .segmented a:last-child { border-right: none; } .segmented a:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; } .segmented a.active { color: var(--fg); background: var(--surface-3); } /* ============================================================================= * TABLES * ============================================================================= */ .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; } .table-wrap--standalone { border-radius: var(--radius-md); } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead { background: var(--surface-2); } th { text-align: left; padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 600; color: var(--fg-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background var(--t-fast); } tbody tr:hover { background: var(--surface-2); } td.cell-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); } td.cell-num { text-align: right; font-variant-numeric: tabular-nums; } td.cell-actions { white-space: nowrap; text-align: right; width: 1%; } .cell-stack { display: flex; flex-direction: column; gap: 2px; } .cell-stack .sub { color: var(--fg-muted); font-size: 12px; font-family: var(--font-mono); } /* ============================================================================= * BUTTONS * ============================================================================= */ .btn, button.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 14px; font-weight: 500; background: var(--surface); border: 1px solid var(--border); color: var(--fg); border-radius: var(--radius-md); transition: background var(--t-base), border-color var(--t-base); text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; } .btn:active { background: var(--surface-3); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--success { background: var(--success); border-color: var(--success); color: white; } .btn--success:hover { filter: brightness(0.94); } .btn--danger { background: var(--surface); border-color: var(--border); color: var(--danger); } .btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-border); } .btn--solid-danger { background: var(--danger); border-color: var(--danger); color: white; } .btn--solid-danger:hover { filter: brightness(0.94); } .btn--sm { padding: 3px 8px; font-size: 12px; } .btn--icon { padding: 5px 8px; } .actions-group { display: inline-flex; gap: var(--space-2); } .actions-group form { display: inline; } /* ============================================================================= * BADGES * ============================================================================= */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); border: 1px solid transparent; text-transform: uppercase; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--neutral { background: var(--surface-3); color: var(--fg-muted); border-color: var(--border); } .badge--success, .badge.approved, .badge.viewer, .badge.active { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .badge--warning, .badge.pending { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .badge--danger, .badge.revoked, .badge.inactive { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .badge--accent, .badge.admin, .badge.owner { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); } .badge--purple { background: var(--done-bg); color: var(--done-fg); border-color: var(--done-border); } /* ============================================================================= * FORMS * ============================================================================= */ .field { margin-bottom: var(--space-4); } .field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--fg); } .field-hint { color: var(--fg-muted); font-size: 12px; margin-top: 4px; } .field-error { color: var(--danger); font-size: 13px; margin-top: 6px; padding: 8px 10px; background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-sm); } input[type="text"], input[type="email"], input[type="password"], input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select { width: 100%; padding: 6px 12px; font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg); transition: border-color var(--t-base), box-shadow var(--t-base); outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.18); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.3); } input::placeholder { color: var(--fg-subtle); } .checkbox-row { display: flex; align-items: center; gap: var(--space-2); } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .checkbox-row label { margin-bottom: 0; cursor: pointer; } /* ============================================================================= * AUTH (login) * ============================================================================= */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: linear-gradient( 180deg, var(--auth-gradient-from) 0%, var(--auth-gradient-to) 100% ); position: relative; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); width: 100%; max-width: 380px; box-shadow: var(--shadow-md); } .auth-card__brand { text-align: center; margin-bottom: var(--space-5); color: var(--fg); } .auth-card__brand svg { width: 40px; height: 40px; margin-bottom: var(--space-2); color: var(--accent); } .auth-card h1 { font-size: 20px; } .auth-card .subtitle { color: var(--fg-muted); font-size: 13px; margin-top: 4px; text-align: center; } /* Toggle no canto da página de login (sem header) */ .theme-toggle--floating { position: absolute; top: var(--space-4); right: var(--space-4); background: var(--surface); border: 1px solid var(--border); color: var(--fg); border-radius: var(--radius-md); padding: 6px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-base), border-color var(--t-base); box-shadow: var(--shadow-sm); } .theme-toggle--floating:hover { background: var(--surface-2); border-color: var(--border-strong); } /* Login não tem header */ body.no-header .app-main { padding: 0; max-width: none; } /* ============================================================================= * CARD GENÉRICO * ============================================================================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); } .form-wrapper { max-width: 480px; margin: 0 auto; } .form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); } /* ============================================================================= * EMPTY STATES * ============================================================================= */ .empty { text-align: center; padding: var(--space-10) var(--space-6); color: var(--fg-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); } .empty__icon { width: 48px; height: 48px; margin: 0 auto var(--space-3); color: var(--fg-subtle); } .empty__title { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 4px; } .empty__desc { font-size: 13px; color: var(--fg-muted); } /* ============================================================================= * FLASH / TOASTS * ============================================================================= */ .toasts { position: fixed; top: calc(var(--header-height) + var(--space-3)); right: var(--space-4); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); max-width: 380px; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--fg-muted); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-lg); display: flex; align-items: flex-start; gap: var(--space-2); animation: toast-in 200ms cubic-bezier(0.33, 1, 0.68, 1) both, toast-out 200ms 4800ms cubic-bezier(0.33, 1, 0.68, 1) both; font-size: 13px; color: var(--fg); } .toast--success { border-left-color: var(--success); } .toast--error { border-left-color: var(--danger); } .toast--warning { border-left-color: var(--warning); } .toast--info { border-left-color: var(--accent); } .toast__icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; } .toast--success .toast__icon { color: var(--success); } .toast--error .toast__icon { color: var(--danger); } .toast--warning .toast__icon { color: var(--warning); } .toast--info .toast__icon { color: var(--accent); } @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-8px); } } /* ============================================================================= * MODAL (HTMX) * ============================================================================= */ .modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 100; animation: backdrop-in 150ms cubic-bezier(0.33, 1, 0.68, 1); } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: modal-in 200ms cubic-bezier(0.33, 1, 0.68, 1); } .modal-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .modal-header__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .modal-header h2 { font-size: 16px; } .modal-header .sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; } .modal-close { background: transparent; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--fg-muted); flex-shrink: 0; transition: background var(--t-base), color var(--t-base); } .modal-close:hover { background: var(--surface-2); color: var(--fg); } .modal-body { padding: 0; overflow-y: auto; flex: 1; } .modal-body table { font-size: 13px; } .modal-body td:first-child, .modal-body th:first-child { padding-left: var(--space-5); } .modal-body td:last-child, .modal-body th:last-child { padding-right: var(--space-5); } .modal-actions { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: var(--space-2); } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================================= * UTILS * ============================================================================= */ .mono { font-family: var(--font-mono); } .muted { color: var(--fg-muted); } .subtle { color: var(--fg-subtle); } .small { font-size: 12px; } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-accent { color: var(--accent); } /* HTMX loading indicator */ .htmx-indicator { opacity: 0; transition: opacity 200ms; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /* ============================================================ Auditoria — card de filtros + chips ============================================================ */ .filters-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-3); margin-top: var(--space-4); overflow: hidden; } .filters-card__header { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-2); } .filters-card__header h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .filters-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); } .filters-card__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: var(--space-2); } /* Linha de filtro: label em cima, controle embaixo */ .filter-row { display: flex; flex-direction: column; gap: 6px; } .filter-row--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 700px) { .filter-row--two-col { grid-template-columns: 1fr; } } .filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .filter-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .filter-input { width: 100%; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-2); color: var(--fg); font-size: 13px; } .filter-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft, rgba(9, 105, 218, 0.2)); } .filter-hint { color: var(--fg-muted); font-size: 11px; } /* Chips clicáveis pros tipos de evento. O fica escondido — o estado visual é o da label. */ .chip-group { display: flex; flex-wrap: wrap; gap: 6px; } .chip-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--fg); cursor: pointer; user-select: none; transition: background 0.12s, border-color 0.12s, color 0.12s; } .chip-toggle:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--fg-muted); } .chip-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Estado selecionado: a classe `chip-toggle--on` é setada no template pelo Jinja na primeira renderização. Após interação, o navegador toca o checkbox e usamos :has() pra refletir o estado em tempo real. */ .chip-toggle--on, .chip-toggle:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; } .chip-toggle--on:hover, .chip-toggle:has(input:checked):hover { filter: brightness(1.05); } /* ============================================================ SISTEMA BASE V2 — Agtech moderno ============================================================ Estende as variáveis já definidas com: - Verde técnico (acento secundário, status saudável) - Tipografia profissional (Inter + JetBrains Mono) - Sombras mais sutis pra tema claro (less GitHub, more SaaS) - Tokens de espaçamento e raio de borda explícitos ============================================================ */ :root { /* Acento secundário verde — usado em status OK, métricas saudáveis */ --accent-2: #1f9d55; --accent-2-bg: #e6f4ec; --accent-2-border: #2eb26b; /* Espaçamento (já existem alguns space-N — só dou nomes semânticos) */ --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-pill: 999px; /* Sombras mais sutis (SaaS feel, não GitHub) */ --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02); --elev-2: 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --elev-3: 0 12px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -4px rgba(15, 23, 42, 0.06); } [data-theme="dark"] { --accent-2: #3fb950; --accent-2-bg: #0f2d18; --accent-2-border: #2ea043; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2); --elev-2: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.25); --elev-3: 0 12px 24px -4px rgba(0, 0, 0, 0.5), 0 4px 8px -4px rgba(0, 0, 0, 0.3); } /* ── Tipografia profissional ───────────────────────────────── Inter pra UI geral. JetBrains Mono pra valores numéricos (UIDs, IPs, pressão em Pa) — ajuda a leitura em dashboards. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); body, html { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cell-mono, .mono, code, .v2-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: "zero", "ss01"; } /* ============================================================ COMPONENTES NOVOS — usam o prefixo .v2- pra não conflitar com componentes legados. Telas redesenhadas usam estes. ============================================================ */ /* ── Card padrão V2 ─────────────────────────────────────────── */ .v2-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--elev-1); transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s; } .v2-card--interactive { cursor: pointer; } .v2-card--interactive:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); transform: translateY(-1px); } /* ── Header de página V2 ─────────────────────────────────────── */ .v2-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .v2-page-header__title h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .v2-page-header__title .crumb { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 6px; } .v2-page-header__subtitle { display: block; margin-top: 4px; color: var(--fg-muted); font-size: 13px; } /* ── KPI tiles (métricas resumidas no topo) ──────────────────── */ .v2-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } .v2-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .v2-kpi::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); } .v2-kpi--ok::before { background: var(--accent-2); } .v2-kpi--warn::before { background: var(--warning); } .v2-kpi--alert::before { background: var(--danger); } .v2-kpi__label { font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; } .v2-kpi__value { font-size: 28px; font-weight: 700; color: var(--fg); font-feature-settings: "tnum"; line-height: 1; } .v2-kpi__delta { font-size: 11px; color: var(--fg-muted); margin-top: 2px; } /* ── Module cards (grid de módulos) ──────────────────────────── */ .v2-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); } .v2-module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow 0.15s, border-color 0.15s; position: relative; } .v2-module-card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); } .v2-module-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); } .v2-module-card__name { font-size: 15px; font-weight: 600; margin: 0; line-height: 1.3; } .v2-module-card__uid { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-muted); margin-top: 2px; } /* Status dot — pequeno indicador colorido tipo "LED" */ .v2-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; } .v2-status-dot--ok { background: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-2-bg); } .v2-status-dot--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); } .v2-status-dot--alert { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); } .v2-status-dot--idle { background: var(--fg-subtle); box-shadow: 0 0 0 3px var(--surface-3); } /* Module card body: faixa de pressão ─────────────────────────── */ .v2-pressure-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); background: var(--canvas); border-radius: var(--r-3); padding: var(--space-3); } .v2-pressure-cell { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; } .v2-pressure-cell__label { font-size: 10px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; } .v2-pressure-cell__value { font-family: "JetBrains Mono", monospace; font-size: 16px; font-weight: 600; font-feature-settings: "tnum"; color: var(--fg); } .v2-pressure-cell--ideal .v2-pressure-cell__value { color: var(--accent-2); } .v2-pressure-cell__unit { font-size: 9px; font-weight: 500; color: var(--fg-subtle); letter-spacing: 0.04em; } /* Módulo card footer ─────────────────────────────────────────── */ .v2-module-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--border); } .v2-module-card__meta { font-size: 11px; color: var(--fg-subtle); display: flex; align-items: center; gap: 4px; } /* Botão V2 — mais polido que o legado .btn ──────────────────── */ .v2-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); font-size: 12px; font-weight: 500; color: var(--fg); cursor: pointer; transition: all 0.12s; text-decoration: none; } .v2-btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .v2-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .v2-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .v2-btn--ghost { background: transparent; border-color: transparent; } .v2-btn--ghost:hover { background: var(--surface-2); } /* ── Tabela V2 ──────────────────────────────────────────────── */ .v2-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--elev-1); } .v2-table { width: 100%; border-collapse: collapse; font-size: 13px; } .v2-table thead th { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } .v2-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } .v2-table tbody tr:last-child td { border-bottom: none; } .v2-table tbody tr:hover { background: var(--surface-2); } .v2-table .v2-mono, .v2-table code { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-muted); } .v2-table strong { font-weight: 600; color: var(--fg); } /* Pill badges (substituem os badges legados em telas v2) */ .v2-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 500; border: 1px solid transparent; letter-spacing: 0.01em; } .v2-pill--ok { background: var(--accent-2-bg); color: var(--accent-2); border-color: var(--accent-2-border); } .v2-pill--warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .v2-pill--alert { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .v2-pill--info { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); } .v2-pill--neutral { background: var(--surface-2); color: var(--fg-muted); border-color: var(--border); } /* Toolbar V2 — barra de ações horizontal acima de listagens */ .v2-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .v2-segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: 2px; box-shadow: var(--elev-1); } .v2-segmented a { padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--fg-muted); text-decoration: none; transition: all 0.12s; } .v2-segmented a:hover { color: var(--fg); } .v2-segmented a.active { background: var(--accent); color: var(--accent-fg); } /* Empty state V2 */ .v2-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-4); padding: var(--space-7) var(--space-5); text-align: center; } .v2-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--surface-2); border-radius: 50%; color: var(--fg-subtle); margin-bottom: var(--space-3); } .v2-empty__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .v2-empty__desc { color: var(--fg-muted); font-size: 13px; max-width: 360px; margin: 0 auto; } /* Avatar circle (iniciais) — usado em listas de usuário */ .v2-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; font-size: 13px; font-weight: 600; flex-shrink: 0; } .v2-avatar--sm { width: 24px; height: 24px; font-size: 11px; } .v2-avatar--admin { background: linear-gradient(135deg, var(--accent-2), #2eb26b); } .v2-avatar--inactive { background: linear-gradient(135deg, var(--fg-subtle), var(--border-strong)); } /* User cell composto — avatar + nome/email */ .v2-user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .v2-user-cell__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .v2-user-cell__name { font-weight: 600; font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v2-user-cell__email { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Modal V2 — refinamento sobre o legado */ .v2-modal-backdrop { position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-4); } .v2-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--elev-3); max-width: 480px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; } .v2-modal__head { padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); } .v2-modal__title h2 { margin: 0; font-size: 16px; font-weight: 600; } .v2-modal__title .sub { display: block; margin-top: 4px; color: var(--fg-muted); font-size: 12px; } .v2-modal__close { background: transparent; border: 0; color: var(--fg-muted); cursor: pointer; padding: 4px; border-radius: var(--r-2); } .v2-modal__close:hover { background: var(--surface-2); color: var(--fg); } .v2-modal__body { padding: var(--space-5); overflow-y: auto; } .v2-modal__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: var(--space-2); } /* Auth (login) V2 — tela cheia, painel central */ .v2-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--canvas), var(--surface-2)); padding: var(--space-4); position: relative; overflow: hidden; } .v2-auth-shell::before { content: ""; position: absolute; width: 800px; height: 800px; top: -300px; right: -300px; background: radial-gradient(circle, var(--accent-bg) 0%, transparent 70%); opacity: 0.6; pointer-events: none; } .v2-auth-shell::after { content: ""; position: absolute; width: 600px; height: 600px; bottom: -200px; left: -200px; background: radial-gradient(circle, var(--accent-2-bg) 0%, transparent 70%); opacity: 0.4; pointer-events: none; } .v2-auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--elev-3); padding: var(--space-6) var(--space-5); width: 100%; max-width: 380px; position: relative; z-index: 1; } .v2-auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-4); } .v2-auth-brand__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); border-radius: var(--r-3); color: white; box-shadow: var(--elev-2); } .v2-auth-brand__name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .v2-auth-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 6px; text-align: center; } .v2-auth-card .v2-auth-subtitle { color: var(--fg-muted); font-size: 13px; text-align: center; margin-bottom: var(--space-5); } .v2-auth-form { display: flex; flex-direction: column; gap: var(--space-3); } .v2-auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--fg-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .v2-auth-field input { width: 100%; padding: 10px 12px; background: var(--bg, var(--canvas)); border: 1px solid var(--border); border-radius: var(--r-2); font-size: 14px; color: var(--fg); transition: border-color 0.12s, box-shadow 0.12s; } .v2-auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .v2-auth-submit { width: 100%; padding: 10px; background: var(--accent); border: 0; border-radius: var(--r-2); color: white; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: var(--space-2); transition: background 0.12s; } .v2-auth-submit:hover { background: var(--accent-hover); } .v2-auth-foot { text-align: center; margin-top: var(--space-4); font-size: 11px; color: var(--fg-subtle); }