/* ── NeraGest Admin — tema Light/Dark + cores de seção ──────────────────── */ /* Dark ativado por [data-admin-theme="dark"] no (toggle + localStorage). */ /* Cores das seções (Light) — tints suaves, bom contraste, leves. */ :root { --sec-cliente-bg: #f3f7fb; /* azul muito claro */ --sec-itens-bg: #fff7ef; /* âmbar claro (tema pizza) */ --sec-pagamentos-bg: #f1f8f3; /* verde claro (dinheiro) */ --sec-border: rgba(0, 0, 0, 0.08); --sec-subtle-bg: #fafafa; } /* Cores das seções (Dark) — superfícies escuras distintas. */ [data-admin-theme="dark"] { --sec-cliente-bg: #1f2733; --sec-itens-bg: #2a241b; --sec-pagamentos-bg: #1c2a22; --sec-border: #3c3c3c; --sec-subtle-bg: #2d2d30; --bs-body-bg: #1e1e1e; --bs-body-color: #d4d4d4; --bs-secondary-bg: #252526; --bs-tertiary-bg: #2d2d30; --bs-border-color: #3c3c3c; --bs-emphasis-color: #ffffff; --bs-link-color: #4ec9b0; --bs-link-hover-color: #5fd9c0; } /* Seções coloridas (Pedidos: Cliente, Itens, Pagamentos). */ .pe-sec { border: 1px solid var(--sec-border) !important; transition: background-color 0.2s, border-color 0.2s; } .pe-sec--cliente { background-color: var(--sec-cliente-bg); } .pe-sec--itens { background-color: var(--sec-itens-bg); } .pe-sec--pagamentos { background-color: var(--sec-pagamentos-bg); } /* ── Overrides Dark (admin baseado em Bootstrap + classes próprias) ──────── */ html[data-admin-theme="dark"] { background-color: #1e1e1e; min-height: 100vh; } [data-admin-theme="dark"] body { background-color: #1e1e1e; color: #d4d4d4; } [data-admin-theme="dark"] .content, [data-admin-theme="dark"] main { background-color: #1e1e1e; } [data-admin-theme="dark"] .form-card, [data-admin-theme="dark"] .card { background-color: #252526; border-color: #3c3c3c; color: #d4d4d4; } [data-admin-theme="dark"] .card-header { background-color: #2d2d30; border-color: #3c3c3c; } [data-admin-theme="dark"] .border { border-color: #3c3c3c !important; } [data-admin-theme="dark"] hr { border-color: #3c3c3c; opacity: 1; } [data-admin-theme="dark"] .text-muted { color: #9a9a9a !important; } [data-admin-theme="dark"] .form-control, [data-admin-theme="dark"] .form-select { background-color: #3c3c3c; color: #d4d4d4; border-color: #555555; } [data-admin-theme="dark"] .form-control:focus, [data-admin-theme="dark"] .form-select:focus { background-color: #3c3c3c; color: #ffffff; border-color: #007acc; box-shadow: 0 0 0 0.2rem rgba(0, 122, 204, 0.25); } [data-admin-theme="dark"] .form-control[readonly] { background-color: #2d2d30 !important; color: #969696; } [data-admin-theme="dark"] .form-control::placeholder { color: #777; } [data-admin-theme="dark"] .input-group-text { background-color: #2d2d30; border-color: #555555; color: #969696; } [data-admin-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #d4d4d4; --bs-table-border-color: #3c3c3c; --bs-table-hover-bg: #2a2d2e; --bs-table-striped-bg: #252526; color: #d4d4d4; } [data-admin-theme="dark"] .table th, [data-admin-theme="dark"] .table td { border-color: #3c3c3c; } [data-admin-theme="dark"] .table-active, [data-admin-theme="dark"] .table-active > td { background-color: #094771 !important; color: #fff; } [data-admin-theme="dark"] .list-group-item { background-color: #252526; border-color: #3c3c3c; color: #d4d4d4; } [data-admin-theme="dark"] .list-group-item-action:hover { background-color: #2a2d2e; } [data-admin-theme="dark"] .alert-success { background-color: #1d3a2a; border-color: #2e5b41; color: #b8e6c8; } [data-admin-theme="dark"] .btn-outline-secondary { color: #d4d4d4; border-color: #555; } [data-admin-theme="dark"] .btn-outline-secondary:hover { background-color: #3c3c3c; color: #fff; } [data-admin-theme="dark"] .modal-content { background-color: #252526; color: #d4d4d4; border-color: #3c3c3c; } /* Painel de preço (app.css usa fundo claro fixo). */ [data-admin-theme="dark"] .price-panel { background-color: #2d2d30; border-color: #3c3c3c; color: #d4d4d4; } /* Alertas Bootstrap não cobertos (danger/warning/info) — versões escuras legíveis. */ [data-admin-theme="dark"] .alert-danger { background-color: #3a1f1f; border-color: #5b2e2e; color: #ffb4b4; } [data-admin-theme="dark"] .alert-warning { background-color: #3a3320; border-color: #5b5230; color: #ffe08a; } [data-admin-theme="dark"] .alert-info { background-color: #1f2f3a; border-color: #2e4a5b; color: #a9d8ff; } /* Botão de alternância de tema na top-row. */ .theme-toggle-btn { background: transparent; border: 1px solid var(--sec-border); border-radius: 8px; padding: 4px 8px; cursor: pointer; color: inherit; display: inline-flex; align-items: center; } .theme-toggle-btn:hover { background: var(--sec-subtle-bg); }