/* ========================================================= ERP UI TOKENS (compatível com seu CSS atual) Controlado por: ========================================================= */ /* -------- Defaults (Light + Orange) -------- */ :root{ /* Accent (default = orange) */ --brand-600:#ea580c; --brand-500:#f97316; --brand-400:#fb923c; --brand-700:#c2410c; /* Surfaces / text */ --bg-soft:#f7f8fb; --surface:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --border-2:#eef2f7; /* Tables */ --stripe: rgba(2,6,23,.035); /* Layout */ --card-radius:16px; --control-radius:12px; --shadow:0 10px 30px rgba(2,6,23,.06); /* Density */ --pad-y:.55rem; --pad-x:.75rem; --table-pad-y:.55rem; --table-pad-x:.75rem; } /* -------- Accent palettes -------- */ html[data-accent="orange"]{ --brand-600:#ea580c; --brand-500:#f97316; --brand-400:#fb923c; --brand-700:#c2410c; } html[data-accent="blue"]{ --brand-600:#2563eb; --brand-500:#3b82f6; --brand-400:#60a5fa; --brand-700:#1d4ed8; } html[data-accent="emerald"]{ --brand-600:#059669; --brand-500:#10b981; --brand-400:#34d399; --brand-700:#047857; } html[data-accent="violet"]{ --brand-600:#6d28d9; --brand-500:#7c3aed; --brand-400:#a78bfa; --brand-700:#5b21b6; } html[data-accent="slate"]{ --brand-600:#334155; --brand-500:#475569; --brand-400:#94a3b8; --brand-700:#1e293b; } /* -------- Density -------- */ html[data-density="compact"]{ --card-radius:14px; --control-radius:10px; --pad-y:.45rem; --pad-x:.65rem; --table-pad-y:.45rem; --table-pad-x:.65rem; } /* -------- Theme: Light / Dark / System -------- */ html[data-theme="light"]{ color-scheme: light; --bg-soft:#f7f8fb; --surface:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --border-2:#eef2f7; --shadow:0 10px 30px rgba(2,6,23,.06); } html[data-theme="dark"]{ /* Ajuda o navegador a renderizar controles nativos em modo escuro (select/date input/options), evitando texto preto/contraste ruim. */ color-scheme: dark; --bg-soft:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --border:#1e293b; --border-2:#1e293b; --shadow:0 18px 40px rgba(0,0,0,.35); /* Tables */ --stripe: rgba(226,232,240,.04); } /* System theme uses OS preference */ @media (prefers-color-scheme: dark){ html[data-theme="system"]{ color-scheme: dark; --bg-soft:#0b1220; --surface:#0f172a; --text:#e2e8f0; --muted:#94a3b8; --border:#1e293b; --border-2:#1e293b; --shadow:0 18px 40px rgba(0,0,0,.35); /* Tables */ --stripe: rgba(226,232,240,.04); } } /* Se o usuário estiver em "system" e o SO for claro */ @media (prefers-color-scheme: light){ html[data-theme="system"]{ color-scheme: light; } } /* ========================================================= Bootstrap variables sync (evita preto-no-preto no modo escuro) ========================================================= */ :root{ --bs-body-bg: var(--bg-soft); --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-emphasis-color: var(--text); --bs-border-color: var(--border); --bs-link-color: var(--brand-600); --bs-link-hover-color: var(--brand-500); --bs-card-bg: var(--surface); --bs-card-color: var(--text); --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--brand-500) 12%, var(--surface)); --bs-dropdown-link-active-bg: color-mix(in srgb, var(--brand-500) 18%, var(--surface)); --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-table-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-striped-bg: var(--stripe); --bs-table-hover-color: var(--text); --bs-table-hover-bg: color-mix(in srgb, var(--brand-500) 7%, transparent); } /* placeholders (Bootstrap nem sempre herda) */ input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--muted) 78%, transparent); } /* ========================================================= Base ========================================================= */ body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg-soft); color: var(--text); } .bg-soft{ background-color: var(--bg-soft) !important; } .brand-gradient{ background: linear-gradient(90deg,var(--brand-600),var(--brand-500)); } /* ========================================================= Navbar / Cards ========================================================= */ .navbar, header, .topbar{ background: var(--surface) !important; border-bottom: 1px solid var(--border); } .navbar-brand img{ box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius: 8px; } .card{ border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow); background: var(--surface); color: var(--text); } .card-header{ border-bottom: 1px solid var(--border); font-weight: 600; background: transparent; color: var(--text); } /* ========================================================= Tables ========================================================= */ .table{ --bs-table-bg: transparent; /* Bootstrap 5.3 define a cor final nas células com: .table>:not(caption)>*>* { color: var(--bs-table-color-state, ... ) } então não basta só "color" na .table. Aqui forçamos as variáveis que o Bootstrap usa, pra nunca ficar preto-no-preto no modo escuro. */ --bs-table-color: var(--text); --bs-table-striped-color: var(--text); --bs-table-hover-color: var(--text); --bs-table-active-color: var(--text); color: var(--text); } /* Força a cor final em todas as células (Bootstrap seta cor direto nelas). */ .table>:not(caption)>*>*{ color: var(--text) !important; } .table thead th{ font-weight: 600; color: var(--muted); border-bottom-color: var(--border); padding: var(--table-pad-y) var(--table-pad-x) !important; } .table tbody td{ border-color: var(--border-2); padding: var(--table-pad-y) var(--table-pad-x) !important; } /* Sub-seções de tabela (ex.: Receitas / Despesas no Planejado × Real) */ .table-group td{ background: color-mix(in srgb, var(--surface) 88%, var(--brand-500)); color: var(--muted) !important; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* ========================================================= Buttons / Inputs ========================================================= */ .btn-primary{ background-color: var(--brand-600); border-color: var(--brand-600); } .btn-primary:hover{ background-color: var(--brand-500); border-color: var(--brand-500); } .btn-outline-primary{ border-color: var(--brand-600); color: var(--brand-600); } .btn-outline-primary:hover{ background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .form-control, .form-select, textarea{ border-radius: var(--control-radius); padding: var(--pad-y) var(--pad-x); background: var(--surface); color: var(--text); border: 1px solid var(--border); } /* Reforço (modo escuro): alguns browsers/inputs (ex.: ) insistem em renderizar texto preto. Aqui forçamos contraste correto. */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, html[data-theme="dark"] .input{ color: var(--text) !important; background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft)) !important; border-color: var(--border) !important; } @media (prefers-color-scheme: dark){ html[data-theme="system"] .form-control, html[data-theme="system"] .form-select, html[data-theme="system"] textarea, html[data-theme="system"] .input{ color: var(--text) !important; background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft)) !important; border-color: var(--border) !important; } } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] textarea::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent) !important; } @media (prefers-color-scheme: dark){ html[data-theme="system"] .form-control::placeholder, html[data-theme="system"] textarea::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent) !important; } } .form-control:focus, .form-select:focus, textarea:focus{ border-color: var(--brand-500); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-500) 18%, transparent); } /* ========================================================= Badges / Muted text ========================================================= */ .badge-soft{ background: color-mix(in srgb, var(--brand-500) 12%, var(--surface)); color: color-mix(in srgb, var(--brand-600) 70%, var(--text)); border: 1px solid color-mix(in srgb, var(--brand-400) 35%, var(--border)); padding: .35rem .5rem; border-radius: 999px; } .text-muted{ color: var(--muted) !important; } .form-text{ color: var(--muted) !important; } /* ========================================================= Badge variants (padronizados) Use: ... ========================================================= */ .badge-soft-neutral{} .badge-soft-success{ background: color-mix(in srgb, #22c55e 14%, var(--surface)); border: 1px solid color-mix(in srgb, #22c55e 35%, var(--border)); color: color-mix(in srgb, #16a34a 75%, var(--text)); } .badge-soft-warning{ background: color-mix(in srgb, #f59e0b 16%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--border)); color: color-mix(in srgb, #b45309 78%, var(--text)); } .badge-soft-danger{ background: color-mix(in srgb, #ef4444 14%, var(--surface)); border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border)); color: color-mix(in srgb, #b91c1c 75%, var(--text)); } .badge-soft-info{ background: color-mix(in srgb, #3b82f6 14%, var(--surface)); border: 1px solid color-mix(in srgb, #3b82f6 35%, var(--border)); color: color-mix(in srgb, #1d4ed8 75%, var(--text)); } /* ========================================================= Command palette (Busca global) ========================================================= */ .icon-btn-wide{ display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .65rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .icon-btn-wide:hover{ background: color-mix(in srgb, var(--brand-500) 6%, var(--surface)); border-color: color-mix(in srgb, var(--brand-500) 22%, var(--border)); } .kbd-hint kbd{ font-size: .72rem; padding: .1rem .35rem; background: color-mix(in srgb, var(--bg-soft) 70%, var(--surface)); border: 1px solid var(--border); border-bottom-width: 2px; color: var(--muted); border-radius: 6px; margin-left: .1rem; } .grz-search-modal{ border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow); background: var(--surface); color: var(--text); } .grz-search-results{ max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 10px; } .grz-search-group__title{ font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 4px 0 6px; } .grz-search-item{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft)); } .grz-search-item:hover{ background: color-mix(in srgb, var(--brand-500) 6%, var(--surface)); border-color: color-mix(in srgb, var(--brand-500) 22%, var(--border)); } .grz-search-item.is-active{ background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); border-color: color-mix(in srgb, var(--brand-500) 35%, var(--border)); } .grz-search-item__title{ font-weight: 600; } .grz-search-item__sub{ font-size: .82rem; color: var(--muted); margin-top: 2px; } /* ========================================================= Empty states (padronizados) ========================================================= */ .empty-state{ padding: 2.25rem 1.5rem; text-align: center; } .empty-state .empty-icon{ font-size: 2.1rem; color: var(--muted); } .empty-state h3{ font-size: 1.1rem; margin-top: .75rem; margin-bottom: .25rem; } .empty-state p{ color: var(--muted); margin-bottom: 1rem; } /* ========================================================= Notificações (sininho) ========================================================= */ .grz-notif-menu{ width: 380px; max-width: 92vw; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); } .grz-notif-menu .list-group{ max-height: 320px; overflow: auto; } .grz-notif-menu .list-group-item{ border-left: 0; border-right: 0; background: transparent; color: var(--text); } .grz-notif-menu .list-group-item:hover, .grz-notif-menu .list-group-item:focus{ background: var(--stripe); color: var(--text); } .grz-notif-menu .border-bottom, .grz-notif-menu .border-top{ border-color: var(--border) !important; } .grz-notif-title{ color: var(--text); } .grz-notif-title.is-read{ color: var(--muted); } .grz-notif-menu .text-muted, .grz-notif-menu small.text-muted{ color: var(--muted) !important; } /* Erros de formulário (mostrar quais campos estão inválidos) */ .errorlist{ margin: .25rem 0 0; padding-left: 1.15rem; color: var(--bs-danger); } .errorlist li{ margin: 0; } .grz-notif-menu .list-group-item:first-child{ border-top: 0; } .grz-notif-menu .list-group-item:last-child{ border-bottom: 0; }