/* ========================================================================= OCTO — Tema visual do sistema interno ------------------------------------------------------------------------- Arquivo PURAMENTE VISUAL. Não contém nenhuma regra de negócio. Paleta de marca extraída do logo: verde #10F400 / #00A800 e amarelo #EACD00. TROCA DE VISUAL: o atributo data-octo-skin no (definido no index.php) escolhe a paleta. Nenhuma outra linha do sistema precisa mudar. escuro suave (padrão) claro com menu escuro claro por inteiro Este arquivo é carregado pelo index.php duas vezes (no e no fim do ): cada página interna recarrega o Bootstrap dentro do , então só o link final vence a cascata. É o mesmo arquivo — baixa uma vez só. ========================================================================= */ /* ========================================================================= 1. MARCA (igual em todas as paletas) ========================================================================= */ :root { --octo-green: #10f400; /* verde neon do logo — fios e destaques */ --octo-green-deep: #00a800; /* verde do logo — preenchimentos */ --octo-green-dark: #067a04; --octo-yellow: #eacd00; --octo-radius: .75rem; --octo-radius-sm: .5rem; --octo-space: 1.25rem; --octo-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ========================================================================= 2. PALETAS ========================================================================= */ /* ---------- GRAFITE: escuro suave, sem preto puro (padrão) ---------- */ :root, [data-octo-skin="grafite"] { color-scheme: dark; --bg: #1b2124; --bg-sunken: #171c1f; --surface: #232a2d; --surface-2: #2b3337; --surface-3: #333c40; --border: #384347; --border-soft: #2f393d; --text: #e9eeef; --text-dim: #aeb9bb; --text-faint: #859396; --accent: #2ee61e; /* verde legível sobre escuro */ --accent-fill: #23d616; /* verde vivo: preenchimento */ --accent-on: #04240a; /* texto escuro sobre o verde vivo */ --accent-wash: rgba(46, 230, 30, .12); --accent-line: rgba(46, 230, 30, .30); --row-hover: rgba(46, 230, 30, .07); --row-selected: rgba(46, 230, 30, .14); --row-stripe: rgba(255, 255, 255, .018); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 2px 8px rgba(0, 0, 0, .28); --side-bg: #171d20; --side-border: #2a3438; --side-text: #b3bec0; --side-icon: #7d8b8e; --side-hover: rgba(255, 255, 255, .05); --side-active: rgba(46, 230, 30, .13); --side-accent: #2ee61e; /* verde legível sobre menu escuro */ --danger: #f0605f; --danger-fill: #c33b3c; --info: #34aec2; --info-fill: #1a7f90; --warning: #e3c72b; } /* ---------- CLARO: conteúdo claro, menu lateral escuro ---------- */ [data-octo-skin="claro"] { color-scheme: light; --bg: #f4f6f5; --bg-sunken: #eceff0; --surface: #ffffff; --surface-2: #f5f8f7; --surface-3: #eaefed; --border: #e0e6e4; --border-soft: #eef2f0; --text: #1c2523; --text-dim: #55625f; --text-faint: #626f6c; --accent: #08811f; /* verde escurecido: contraste AA sobre branco */ --accent-fill: #0a7f1e; --accent-on: #ffffff; --accent-wash: rgba(16, 158, 24, .09); --accent-line: rgba(16, 158, 24, .28); --row-hover: rgba(16, 158, 24, .06); --row-selected: rgba(16, 158, 24, .13); --row-stripe: rgba(28, 37, 35, .018); --shadow-sm: 0 1px 2px rgba(20, 32, 28, .06); --shadow: 0 2px 10px rgba(20, 32, 28, .07); --side-bg: #17201d; --side-border: #26312d; --side-text: #b7c2be; --side-icon: #7f8c88; --side-hover: rgba(255, 255, 255, .06); --side-active: rgba(46, 230, 30, .15); --side-accent: #3ce62b; /* menu é escuro: verde claro */ --danger: #c0392f; --danger-fill: #bf3a30; --info: #10788a; --info-fill: #12879b; --warning: #a97e07; } /* ---------- CLARO TOTAL: menu lateral também claro ---------- */ [data-octo-skin="claro-total"] { color-scheme: light; --bg: #f4f6f5; --bg-sunken: #eceff0; --surface: #ffffff; --surface-2: #f5f8f7; --surface-3: #eaefed; --border: #e0e6e4; --border-soft: #eef2f0; --text: #1c2523; --text-dim: #55625f; --text-faint: #626f6c; --accent: #08811f; --accent-fill: #0a7f1e; --accent-on: #ffffff; --accent-wash: rgba(16, 158, 24, .09); --accent-line: rgba(16, 158, 24, .28); --row-hover: rgba(16, 158, 24, .06); --row-selected: rgba(16, 158, 24, .13); --row-stripe: rgba(28, 37, 35, .018); --shadow-sm: 0 1px 2px rgba(20, 32, 28, .06); --shadow: 0 2px 10px rgba(20, 32, 28, .07); --side-bg: #ffffff; --side-border: #e0e6e4; --side-text: #4a5754; --side-icon: #93a09c; --side-hover: rgba(16, 158, 24, .07); --side-active: rgba(16, 158, 24, .12); --side-accent: #076f19; /* menu é claro: verde escuro */ --danger: #c0392f; --danger-fill: #bf3a30; --info: #10788a; --info-fill: #12879b; --warning: #a97e07; } /* ========================================================================= 3. PONTE COM AS VARIÁVEIS DO BOOTSTRAP 5.3 ========================================================================= */ :root, [data-octo-skin] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-dim); --bs-tertiary-color: var(--text-faint); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-heading-color: var(--text); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-fill); --bs-body-font-family: var(--octo-font); } /* ========================================================================= 4. BASE ========================================================================= */ body { background-color: var(--bg) !important; color: var(--text); font-family: var(--octo-font); font-size: .9375rem; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; letter-spacing: -.015em; } /* Título de cada tela */ main h1, main h2 { font-size: 1.375rem; font-weight: 650; line-height: 1.3; margin-top: 0 !important; margin-bottom: 1.25rem; padding-left: 0; border-left: 0; } main h1.display-4 { font-size: 1.75rem; } main h3 { font-size: 1.0625rem; font-weight: 600; } main h5 { font-size: .95rem; font-weight: 600; } a { text-decoration: none; color: var(--accent); } a:hover { color: var(--accent-fill); text-decoration: underline; text-underline-offset: 3px; } hr { border-color: var(--border); opacity: 1; } ::selection { background: var(--accent-wash); color: var(--text); } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Barras de rolagem discretas */ * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ========================================================================= 5. ESTRUTURA — menu lateral, barra de topo, conteúdo ========================================================================= */ #wrapper { background: var(--bg); } #sidebar { background: var(--side-bg) !important; border-right: 1px solid var(--side-border) !important; padding: 1.1rem .7rem !important; } /* Marca */ .octo-brand { display: flex; align-items: center; justify-content: center; padding: .25rem 0 1.1rem; border-bottom: 1px solid var(--side-border); margin-bottom: 1.1rem; } .octo-brand img { width: 122px; max-width: 100%; height: auto; transition: width .25s ease; } #sidebar.collapsed .octo-brand img { width: 34px; } #sidebar.collapsed .octo-brand { padding-bottom: .8rem; } /* Usuário */ .octo-user { display: flex; align-items: center; gap: .65rem; padding: .5rem .55rem; margin-bottom: 1.1rem; border-radius: var(--octo-radius-sm); background: var(--side-hover); } .octo-user img { width: 38px; height: 38px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 1px solid var(--side-border) !important; background: var(--side-bg); } .octo-user .octo-user-name { font-size: .875rem; font-weight: 600; color: var(--side-text); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; } .octo-user .octo-user-role { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--side-icon); } #sidebar.collapsed .octo-user { justify-content: center; padding: .4rem; } #sidebar.collapsed .octo-user .octo-user-name, #sidebar.collapsed .octo-user .octo-user-role { display: none; } /* Itens do menu */ #sidebar .nav { gap: 1px; } #sidebar .nav-link { color: var(--side-text) !important; border-radius: var(--octo-radius-sm); font-size: .875rem; font-weight: 500; display: flex; align-items: center; transition: background-color .15s ease, color .15s ease; } #sidebar .nav-link .nav-icon { color: var(--side-icon); font-size: 1rem; transition: color .15s ease; } #sidebar .nav-link:hover { background-color: var(--side-hover) !important; color: var(--text) !important; } #sidebar .nav-link:hover .nav-icon { color: var(--side-accent); } #sidebar .nav-link.active { background-color: var(--side-active) !important; color: var(--side-accent) !important; font-weight: 600; } #sidebar .nav-link.active .nav-icon { color: var(--side-accent); } #sidebar .nav-link.text-danger { color: var(--danger) !important; } #sidebar .nav-link.text-danger .nav-icon { color: var(--danger); } #sidebar .nav-link.text-danger:hover { background-color: rgba(200, 60, 55, .12) !important; color: var(--danger) !important; } [data-octo-skin="claro-total"] #sidebar .nav-link:hover { color: var(--text) !important; } /* Botão de recolher */ #sidebarToggle { background: var(--surface) !important; color: var(--text-dim) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); } #sidebarToggle:hover { background: var(--accent-fill) !important; color: var(--accent-on) !important; border-color: var(--accent-fill) !important; } /* Barra de topo */ .octo-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .55rem .9rem; margin-bottom: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--octo-radius); box-shadow: var(--shadow-sm); } .octo-crumb { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-dim); margin: 0; } .octo-crumb i { color: var(--accent); } .octo-crumb .bi-chevron-right { color: var(--text-faint); font-size: .6rem; } .octo-crumb strong { color: var(--text); font-weight: 650; } .octo-topbar-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .octo-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent); font-size: .75rem; font-weight: 600; } .octo-chip.octo-chip-neutral { background: var(--surface-2); border-color: var(--border); color: var(--text-dim); font-weight: 500; } .octo-chip i { opacity: .8; } main { padding: 1.5rem 1.75rem 3rem !important; } /* ========================================================================= 6. FORMULÁRIOS ========================================================================= */ .form-label { color: var(--text-dim); font-size: .78rem; font-weight: 600; margin-bottom: .3rem; } .form-control, .form-select, textarea.form-control { background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: var(--octo-radius-sm); font-size: .875rem; padding: .45rem .7rem; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: var(--text-faint) !important; } .form-control:hover, .form-select:hover { border-color: var(--text-faint) !important; } .form-control:focus, .form-select:focus { border-color: var(--accent-fill) !important; box-shadow: 0 0 0 3px var(--accent-wash) !important; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2) !important; color: var(--text-faint) !important; } /* Seta do select e ícone de data por paleta */ [data-octo-skin="grafite"] .form-select, :root:not([data-octo-skin]) .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aeb9bb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } [data-octo-skin="claro"] .form-select, [data-octo-skin="claro-total"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235d6b68' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; } [data-octo-skin="grafite"] input[type="date"]::-webkit-calendar-picker-indicator, :root:not([data-octo-skin]) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); } input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; } .form-select option { background-color: var(--surface); color: var(--text); } /* Checkbox / radio */ .form-check-input, input[type="checkbox"], input[type="radio"] { background-color: var(--surface); border: 1px solid var(--text-faint); accent-color: var(--accent-fill); cursor: pointer; } .form-check-input:checked { background-color: var(--accent-fill) !important; border-color: var(--accent-fill) !important; } .form-check-input:focus { border-color: var(--accent-fill) !important; box-shadow: 0 0 0 3px var(--accent-wash) !important; } table input[type="checkbox"] { width: 1rem; height: 1rem; vertical-align: middle; } /* Bloco de filtros */ main form.row.g-3 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--octo-radius); padding: 1.1rem 1.15rem 1.25rem; margin: 0 0 1.35rem; box-shadow: var(--shadow-sm); } /* ========================================================================= 7. BOTÕES — planos, sem gradiente ========================================================================= */ .btn { border-radius: var(--octo-radius-sm); font-weight: 600; font-size: .8125rem; padding: .45rem .9rem; border-width: 1px; box-shadow: none !important; transition: filter .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { filter: brightness(1.08); } .btn:active { filter: brightness(.94); } .btn-primary, .btn-success { background-color: var(--accent-fill) !important; border-color: var(--accent-fill) !important; color: var(--accent-on) !important; } .btn-danger { background-color: var(--danger-fill) !important; border-color: var(--danger-fill) !important; color: #fff !important; } .btn-info { background-color: var(--info-fill) !important; border-color: var(--info-fill) !important; color: #fff !important; } .btn-warning{ background-color: var(--octo-yellow) !important; border-color: var(--octo-yellow) !important; color: #2e2700 !important; } .btn-secondary { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } .btn-secondary:hover { background-color: var(--surface-3) !important; } /* "Visualizar" é ação neutra: fica discreta para não competir com aprovar/recusar */ .btn-info { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-dim) !important; } .btn-info:hover { background-color: var(--surface-3) !important; color: var(--text) !important; } .btn-outline-primary { color: var(--accent) !important; border-color: var(--accent-line) !important; background: transparent !important; } .btn-outline-primary:hover { background: var(--accent-fill) !important; color: var(--accent-on) !important; border-color: var(--accent-fill) !important; } .btn-outline-success { color: var(--accent) !important; border-color: var(--accent-line) !important; background: transparent !important; } .btn-outline-success:hover { background: var(--accent-fill) !important; color: var(--accent-on) !important; } .btn-outline-secondary { color: var(--text-dim) !important; border-color: var(--border) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--surface-2) !important; color: var(--text) !important; } .btn-outline-danger { color: var(--danger) !important; border-color: var(--border) !important; background: transparent !important; } .btn-outline-danger:hover { background: var(--danger-fill) !important; color: #fff !important; border-color: var(--danger-fill) !important; } .btn-outline-warning { color: var(--warning) !important; border-color: var(--border) !important; background: transparent !important; } .btn-outline-warning:hover { background: var(--octo-yellow) !important; color: #2e2700 !important; } .btn-link { color: var(--accent) !important; } .btn-sm { padding: .3rem .65rem; font-size: .78rem; } [data-octo-skin="grafite"] .btn-close, :root:not([data-octo-skin]) .btn-close { filter: invert(1) grayscale(1) brightness(1.7); opacity: .6; } .btn-close:hover { opacity: 1; } /* ========================================================================= 8. TABELAS — leves, sem grade pesada ========================================================================= */ .table-responsive { border: 1px solid var(--border); border-radius: var(--octo-radius); overflow: auto; background: var(--surface); box-shadow: var(--shadow-sm); } .table { --bs-table-bg: transparent; --bs-table-color: var(--text); color: var(--text); margin-bottom: 0; font-size: .8125rem; vertical-align: middle; border-color: var(--border-soft); } /* Cabeçalho */ .table > thead th, .table > thead.table-dark th { background: var(--surface-2) !important; color: var(--text-dim) !important; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: .65rem .75rem; position: sticky; top: 0; z-index: 2; } /* Corpo: só linha divisória horizontal, sem grade vertical */ .table > tbody > tr > td { background-color: transparent; border: 0 !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--text); padding: .6rem .75rem; white-space: nowrap; } .table > tbody > tr:last-child > td { border-bottom: 0 !important; } .table > tbody > tr:hover > td { background-color: var(--row-hover) !important; } .table-bordered > :not(caption) > * > * { border: 0 !important; border-bottom: 1px solid var(--border-soft) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; color: var(--text); } /* Botões dentro da tabela */ .table td .btn { padding: .25rem .6rem; font-size: .75rem; white-space: nowrap; } .table td .btn + .btn { margin-left: .3rem; } /* Linha destacada (clicada). As páginas declaram esse destaque com !important e seletor de ID (#flowsTable / #entregadoresTable), então aqui repetimos a mesma força. */ #flowsTable tbody tr.selected td, #entregadoresTable tbody tr.selected td, table tbody tr.selected td { background-color: var(--row-selected) !important; color: var(--text) !important; } #flowsTable tbody tr.selected td:first-child, #entregadoresTable tbody tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); } #flowsTable tbody tr, #entregadoresTable tbody tr { cursor: pointer; } /* Coluna do checkbox */ td.check-cell, th:has(> #selectAll) { width: 40px; text-align: center; } /* Coluna de Ações ancorada à direita quando a tabela rola na horizontal. (Navegadores sem :has ignoram: a tabela apenas rola.) */ #flowsTable:has(tbody td .btn) thead th:last-child, #flowsTable:has(tbody td .btn) tbody td:last-child { position: sticky; right: 0; z-index: 3; background-color: var(--surface) !important; border-left: 1px solid var(--border) !important; } #flowsTable:has(tbody td .btn) thead th:last-child { z-index: 4; background-color: var(--surface-2) !important; } #flowsTable:has(tbody td .btn) tbody tr:hover td:last-child { background-color: var(--surface-2) !important; } .table-light, .table-light > th, .table-light > td { --bs-table-bg: var(--surface-2); --bs-table-color: var(--text); background-color: var(--surface-2) !important; color: var(--text) !important; } /* ========================================================================= 9. CARTÕES E PAINÉIS ========================================================================= */ .card { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--octo-radius); box-shadow: var(--shadow-sm); color: var(--text); } .card-header { background: transparent !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--text) !important; font-weight: 600; padding: .85rem 1.1rem; border-radius: var(--octo-radius) var(--octo-radius) 0 0 !important; } .card-header.bg-primary, .card-header.bg-dark { background: transparent !important; color: var(--text) !important; } .card-body { color: var(--text); padding: 1.1rem; } .card-footer { background: var(--surface-2) !important; border-top: 1px solid var(--border-soft) !important; } .card-title { color: var(--text); } .list-group-item { background-color: var(--surface) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } .list-group-item:hover { background-color: var(--surface-2) !important; } .list-group-item.active { background-color: var(--accent-fill) !important; border-color: var(--accent-fill) !important; color: var(--accent-on) !important; } /* Utilitários claros do Bootstrap reinterpretados */ .bg-white, .bg-light { background-color: var(--surface) !important; color: var(--text) !important; } .text-dark { color: var(--text) !important; } .text-muted { color: var(--text-faint) !important; } .border { border-color: var(--border) !important; } .shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow) !important; } /* ========================================================================= 10. MODAIS ========================================================================= */ .modal-content { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--octo-radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .28); color: var(--text); } .modal-header { border-bottom: 1px solid var(--border-soft) !important; padding: 1rem 1.15rem; } .modal-header .modal-title { color: var(--text); font-weight: 650; font-size: 1.05rem; } .modal-body { padding: 1.15rem; } .modal-footer { border-top: 1px solid var(--border-soft) !important; padding: .85rem 1.15rem; } .modal-backdrop.show { opacity: .55; } /* ========================================================================= 11. ALERTAS, ETIQUETAS, PAGINAÇÃO, ABAS ========================================================================= */ .alert { border-radius: var(--octo-radius-sm); border: 1px solid var(--border); border-left: 3px solid var(--border); padding: .7rem .9rem; font-size: .875rem; } .alert-danger { background-color: var(--surface-2) !important; border-left-color: var(--danger) !important; color: var(--danger) !important; } .alert-success { background-color: var(--accent-wash) !important; border-left-color: var(--accent-fill) !important; color: var(--accent) !important; } .alert-warning { background-color: var(--surface-2) !important; border-left-color: var(--octo-yellow) !important; color: var(--warning) !important; } .alert-info { background-color: var(--surface-2) !important; border-left-color: var(--info) !important; color: var(--info) !important; } .alert-secondary { background-color: var(--surface-2) !important; color: var(--text-dim) !important; } .alert-primary { background-color: var(--accent-wash) !important; border-left-color: var(--accent-fill) !important; color: var(--accent) !important; } .badge { font-weight: 600; font-size: .72rem; border-radius: 999px; padding: .3em .65em; border: 1px solid transparent; } .badge.bg-primary { background-color: var(--accent-wash) !important; color: var(--accent) !important; border-color: var(--accent-line); } .badge.bg-success { background-color: var(--accent-wash) !important; color: var(--accent) !important; border-color: var(--accent-line); } .badge.bg-danger { background-color: var(--surface-2) !important; color: var(--danger) !important; border-color: var(--border); } .badge.bg-warning { background-color: var(--surface-2) !important; color: var(--warning) !important; border-color: var(--border); } .badge.bg-info { background-color: var(--surface-2) !important; color: var(--info) !important; border-color: var(--border); } .badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background-color: var(--surface-2) !important; color: var(--text-dim) !important; border-color: var(--border); } .page-link { background-color: transparent !important; border-color: var(--border) !important; color: var(--text-dim) !important; font-size: .8125rem; } .page-link:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } .page-item.active .page-link { background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; color: var(--accent-on) !important; } .page-item.disabled .page-link { background-color: transparent !important; color: var(--text-faint) !important; } .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { color: var(--text-dim); border: 0; border-bottom: 2px solid transparent; font-size: .875rem; font-weight: 500; } .nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border); background: transparent; } .nav-tabs .nav-link.active { background: transparent !important; border: 0 !important; border-bottom: 2px solid var(--accent) !important; color: var(--accent) !important; font-weight: 600; } /* ========================================================================= 12. ELEMENTOS DAS TELAS (somente aparência) ========================================================================= */ /* Painel "Itens Selecionados / Valor Total" */ #itensSelecionados, #valorTotalSelecionado { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } #avisoTodosFiltro { color: var(--text-faint) !important; font-size: .8rem; } /* Cartões de indicadores do Painel */ .octo-kpi { position: relative; display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .95rem 1.05rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--octo-radius); box-shadow: var(--shadow-sm); overflow: hidden; } .octo-kpi-label { font-size: .75rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; } .octo-kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; } .octo-kpi-icon { position: absolute; right: .85rem; bottom: .6rem; font-size: 1.9rem; opacity: .12; } .octo-kpi-total { border-left-color: var(--text-faint); } .octo-kpi-pendente { border-left-color: var(--octo-yellow); } .octo-kpi-pendente .octo-kpi-value { color: var(--warning); } .octo-kpi-aprovado { border-left-color: var(--accent-fill); } .octo-kpi-aprovado .octo-kpi-value { color: var(--accent); } .octo-kpi-recusado { border-left-color: var(--danger-fill); } .octo-kpi-recusado .octo-kpi-value { color: var(--danger); } /* ------------------------------------------------------------------------- Componentes próprios de algumas telas, harmonizados com a paleta. Só cor e superfície — nenhuma alteração de conteúdo ou comportamento. ------------------------------------------------------------------------- */ /* Contas a Pagar: cartões de resumo (eram azul-marinho fixo) */ .card-resumo { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); border-left-width: 4px !important; border-radius: var(--octo-radius) !important; box-shadow: var(--shadow-sm); } .card-resumo .label { color: var(--text-dim) !important; opacity: 1 !important; } .card-resumo .valor { font-family: inherit !important; font-variant-numeric: tabular-nums; } .periodo-tag { background: var(--surface-2) !important; color: var(--text-dim) !important; } /* nas paletas claras, os valores vinham em tons pastel ilegíveis sobre branco */ [data-octo-skin="claro"] .card-pagar .valor, [data-octo-skin="claro-total"] .card-pagar .valor { color: #a35d06 !important; } [data-octo-skin="claro"] .card-vencida .valor, [data-octo-skin="claro-total"] .card-vencida .valor { color: var(--danger) !important; } [data-octo-skin="claro"] .card-paga .valor, [data-octo-skin="claro-total"] .card-paga .valor { color: var(--accent) !important; } [data-octo-skin="claro"] .card-total .valor, [data-octo-skin="claro-total"] .card-total .valor { color: var(--text) !important; } /* Cabeçalhos de cartão coloridos das telas Guri / Relatório / Entregadores */ .card-header-guri, .card-header-rel, .card-header-e, .card-header-table { background: var(--surface-2) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; } .btn-guri { background-color: var(--accent-fill) !important; color: var(--accent-on) !important; border-color: var(--accent-fill) !important; } .btn-guri:hover { background-color: var(--accent-fill) !important; filter: brightness(1.08); color: var(--accent-on) !important; } /* Cabeçalho do painel de detalhe (Tesouraria) */ .octo-detalhe-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .15rem .6rem; font-size: .82rem; color: var(--text-dim); } .octo-detalhe-head i { color: var(--accent); } .octo-detalhe-head strong { color: var(--text); } /* Visualizador de documentos */ #inline-viewer { border: 1px solid var(--border) !important; border-radius: var(--octo-radius); background: var(--bg-sunken); overflow: hidden; box-shadow: var(--shadow-sm); } #inline-viewer iframe { background: var(--surface); } /* Barra de ações da Tesouraria */ #action-buttons { background: var(--surface) !important; border: 1px solid var(--border); border-radius: var(--octo-radius); padding: .7rem !important; margin-bottom: .85rem; box-shadow: var(--shadow-sm); display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } #action-buttons .btn { margin: 0 !important; } td { font-variant-numeric: tabular-nums; } /* Faixa de boas-vindas do Painel (era azul #007bff) */ .jumbotron { background: var(--surface) !important; border: 1px solid var(--border); border-left: 3px solid var(--accent) !important; color: var(--text) !important; border-radius: var(--octo-radius) !important; box-shadow: var(--shadow-sm); padding: 1.5rem !important; text-align: left !important; } .jumbotron h1, .jumbotron h2 { color: var(--text); margin-bottom: 0; } .chart-container { background: transparent; } canvas { max-width: 100%; } /* ========================================================================= 13. TELA DE LOGIN ========================================================================= */ .octo-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--bg) !important; } .octo-login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--octo-radius); padding: 2.25rem 2rem; box-shadow: var(--shadow); } .octo-login-card .octo-login-logo { text-align: center; margin-bottom: 1.75rem; } .octo-login-card .octo-login-logo img { width: 132px; } .octo-login-card h1 { font-size: 1.05rem; font-weight: 650; text-align: center; color: var(--text); margin-bottom: .2rem; } .octo-login-card .octo-login-sub { text-align: center; color: var(--text-faint); font-size: .8rem; margin-bottom: 1.75rem; } .octo-login-card .btn-primary { width: 100%; padding: .55rem; font-size: .9rem; } .octo-login-foot { text-align: center; margin-top: 1.35rem; font-size: .8rem; } .octo-login-foot a { color: var(--text-dim); } .octo-login-foot a:hover { color: var(--accent); } /* ========================================================================= 14. RESPONSIVO E IMPRESSÃO ========================================================================= */ @media (max-width: 992px) { main { padding: 1rem !important; } #sidebar { width: 68px !important; } #sidebar .link-text { display: none !important; } .octo-brand img { width: 34px !important; } .octo-user { justify-content: center; } .octo-user .octo-user-name, .octo-user .octo-user-role { display: none !important; } } @media print { body, .table, .card { background: #fff !important; color: #000 !important; } #sidebar, .octo-topbar, #action-buttons, .btn { display: none !important; } .table > thead th { background: #eee !important; color: #000 !important; } .table > tbody > tr > td { color: #000 !important; } }