/* ========================================================================= SISGEDI — Tema (custom.css) ------------------------------------------------------------------------- Arquitetura: UMA fonte de verdade de design via tokens (variáveis CSS). - :root -> paleta do MODO CLARO (padrão) - body.dark-mode -> sobrescreve os MESMOS tokens para o MODO ESCURO As regras de componente são escritas UMA vez e referenciam os tokens; muda-se o token, não a regra. A sidebar é escura nos dois modos. Identidade: marinho + âmbar (âmbar = acento único). Cores fortes só para status real (verde/âmbar/vermelho). ========================================================================= */ /* ===================== FONTES (self-hospedadas) ========================= */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter-400.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter-500.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter-600.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter-700.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/jetbrains-mono-700.woff2') format('woff2'); } /* ============================== TOKENS ================================== */ :root{ /* Forma e tipografia */ --sg-radius:14px; --sg-radius-sm:10px; --sg-radius-xs:8px; --sg-radius-pill:999px; --sg-font:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sg-mono:'JetBrains Mono', "Cascadia Code", Consolas, "Roboto Mono", ui-monospace, monospace; /* Superfícies (MODO CLARO) */ --sg-bg:#f4f6f9; --sg-surface:#ffffff; --sg-surface-2:#f8fafc; --sg-border:#e3e7ec; --sg-input-bg:#ffffff; /* Texto */ --sg-ink:#1b1e26; --sg-ink-muted:#6b7280; /* Acento âmbar (único) */ --sg-accent:#e2a33c; --sg-accent-strong:#b9791f; /* mais escuro p/ contraste sobre claro */ --sg-accent-contrast:#14161d; /* texto sobre preenchimento âmbar */ --sg-accent-hover:rgba(226,163,60,.14); /* Status */ --sg-success:#2f9e6e; --sg-warning:#e2a33c; --sg-danger:#cf4a39; /* Neutros para botões/badges não-semânticos */ --sg-neutral-fill:#eef1f5; --sg-neutral-fill-2:#e4e8ee; --sg-neutral-ink:#3a4049; /* Sidebar — escura nos DOIS modos */ --sg-sidebar:#101218; --sg-sidebar-elev:#171a22; --sg-sidebar-ink:#e6e9ef; --sg-sidebar-ink-muted:#9aa1ae; --sg-sidebar-border:#282d38; } /* html.sg-dark = aplicado por script no ANTES da pintura (anti-FOUC); body.dark-mode = aplicado/alternado pelo toggle. Ambos sobrescrevem os tokens. */ body.dark-mode, html.sg-dark{ /* Superfícies (MODO ESCURO — marinho) */ --sg-bg:#14161d; --sg-surface:#1b1e26; --sg-surface-2:#20242e; --sg-border:#282d38; --sg-input-bg:#11141c; /* Texto */ --sg-ink:#e6e9ef; --sg-ink-muted:#9aa1ae; /* Acento (âmbar mais claro sobre escuro) */ --sg-accent-strong:#eab863; --sg-accent-hover:rgba(226,163,60,.16); /* Neutros */ --sg-neutral-fill:#262b36; --sg-neutral-fill-2:#2f3543; --sg-neutral-ink:#cdd2db; } /* ============================ TIPOGRAFIA =============================== */ body, .wrapper, .content-wrapper, .main-sidebar, .main-header, .btn, .form-control, .card, .modal, .swal2-popup, .select2-container{ font-family:var(--sg-font); } /* Números/códigos (BO, procedimento, prazo, datas) */ .sg-mono{ font-family:var(--sg-mono); letter-spacing:.2px; } /* ============================ APP SHELL =============================== */ body, body.dark-mode, .wrapper, body.dark-mode .wrapper, .content-wrapper, body.dark-mode .content-wrapper{ background-color:var(--sg-bg) !important; color:var(--sg-ink) !important; } /* Cabeçalho de página (content-header) */ .content-header{ padding:18px 0 12px; margin-bottom:0 !important; border-bottom:1px solid var(--sg-border); } /* Cabeçalho em flex: título ocupa o espaço (sem quebrar à toa), breadcrumb à direita; empilha no mobile */ .content-header .sg-page-head{ display:flex; align-items:center; justify-content:space-between; gap:.4rem 1.5rem; flex-wrap:wrap; } .content-header .sg-page-titles{ min-width:0; } .content-header .breadcrumb{ background:transparent; padding:0; margin:0; font-size:.8rem; } .content-header h1{ font-size:1.6rem; font-weight:700; letter-spacing:-.2px; line-height:1.25; margin-bottom:.3rem; color:var(--sg-ink); } .content-header p.lead{ font-size:1rem; font-weight:400; color:var(--sg-ink-muted) !important; margin-bottom:0; } /* ============================== CARDS ================================= */ .card, .content-wrapper .card{ background-color:var(--sg-surface); border:1px solid var(--sg-border); border-radius:var(--sg-radius); box-shadow:none; color:var(--sg-ink); } .card-header, .content-wrapper .card-header{ background-color:var(--sg-surface-2); border-bottom:1px solid var(--sg-border); color:var(--sg-ink); border-top-left-radius:var(--sg-radius); border-top-right-radius:var(--sg-radius); } .card-footer, .content-wrapper .card-footer{ background:transparent; border-top:1px solid var(--sg-border); border-bottom-left-radius:var(--sg-radius); border-bottom-right-radius:var(--sg-radius); } .card-header .card-title{ font-size:1.15rem; font-weight:600; letter-spacing:-.1px; line-height:1.3; color:var(--sg-ink); } .card-header .card-title i.fas, .card-header .card-title i.far{ margin-right:.6rem; font-size:.95em; color:inherit; opacity:.8; } .card-header .card-tools .btn{ font-size:.8rem; padding:.25rem .6rem; border-radius:var(--sg-radius-xs); } /* Cards "outline": borda sutil e uniforme (sem o excesso de âmbar no topo). O acento fica reservado para casos com significado (modificadores abaixo). */ .card.card-outline, .card.card-primary.card-outline, .card.card-secondary.card-outline, .card.card-info.card-outline, .card.card-success.card-outline, .card.card-warning.card-outline, .card.card-danger.card-outline, .card.card-purple.card-outline, .card.card-dark.card-outline{ border-top-width:1px; border-top-color:var(--sg-border); } /* Destaque OPCIONAL no topo do card (usar só quando a cor tiver sentido) */ .card.card-accent{ border-top-width:3px; border-top-color:var(--sg-accent) !important; } .card.card-accent-danger{ border-top-width:3px; border-top-color:var(--sg-danger) !important; } .card.card-accent-success{ border-top-width:3px; border-top-color:var(--sg-success) !important; } /* ============================= ABAS (pílulas) ========================= */ /* Usar `class="nav sg-tabs"`. Aba ativa em ÂMBAR (tema), não no azul do Bootstrap. */ .sg-tabs{ gap:.4rem; margin-bottom:1.1rem; border-bottom:1px solid var(--sg-border); padding-bottom:.6rem; } .sg-tabs .nav-link{ border-radius:var(--sg-radius-pill); padding:.4rem .95rem; font-weight:600; font-size:.9rem; color:var(--sg-ink-muted); border:1px solid var(--sg-border); background:var(--sg-surface); } .sg-tabs .nav-link:hover{ color:var(--sg-accent-strong); background:var(--sg-accent-hover); border-color:var(--sg-accent); } .sg-tabs .nav-link.active{ color:var(--sg-accent-contrast); background:var(--sg-accent); border-color:var(--sg-accent); } /* ============================= ESTADO VAZIO ========================== */ /* Bloco amigável para "não há nada aqui" (centrado, com ícone). */ .sg-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem; padding:2.4rem 1rem; color:var(--sg-ink-muted); background:var(--sg-surface-2); border:1px dashed var(--sg-border); border-radius:var(--sg-radius); } .sg-empty .sg-empty-ico{ font-size:1.9rem; color:var(--sg-accent); opacity:.85; } .sg-empty p{ margin:0; } /* ============================= TABELAS ================================ */ .content-wrapper .table{ color:var(--sg-ink); } /* Números/códigos (mono) não quebram linha na tabela (ex.: IPL-1999/2026) */ .content-wrapper .table .sg-mono{ white-space:nowrap; } .content-wrapper .table thead th{ border:none; border-bottom:1px solid var(--sg-border); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--sg-ink-muted); padding:.6rem 1rem; } .content-wrapper .table tbody td{ border-top:none; border-bottom:1px solid var(--sg-border); padding:.55rem 1rem; font-size:.875rem; vertical-align:middle; } .content-wrapper .table tbody tr:last-child td{ border-bottom:none; } /* Hover usa .table.table-hover (especificidade maior) p/ VENCER o zebrado (.table-striped tr:nth-of-type) — senão as linhas ímpares não destacariam. */ .content-wrapper .table.table-hover tbody tr:hover, .content-wrapper .table.table-hover tbody tr:hover > td, .content-wrapper .table.table-hover tbody tr:hover > th{ background-color:var(--sg-accent-hover); } /* Mantém o texto legível no hover (o Bootstrap força color:#212529, que sumiria no escuro) */ .content-wrapper .table.table-hover tbody tr:hover, .content-wrapper .table.table-hover tbody tr:hover > td, .content-wrapper .table.table-hover tbody tr:hover > th{ color:var(--sg-ink); } .content-wrapper .table.table-hover tbody tr:hover td a{ color:var(--sg-accent-strong); } /* Linha inteira clicável (tr[data-href]); o identificador da linha fica como texto normal (não "linkado" em âmbar), pois a linha toda já é o link. */ .content-wrapper tr[data-href]{ cursor:pointer; } .content-wrapper .table a.sg-rowtitle, .content-wrapper .table a.sg-rowtitle:hover, .content-wrapper .table.table-hover tbody tr:hover td a.sg-rowtitle{ color:var(--sg-ink); font-weight:600; text-decoration:none; } /* Ações discretas na listagem: ícones neutros que só ganham cor no hover da linha. */ .content-wrapper .table .sg-action{ background:transparent !important; border-color:transparent !important; color:var(--sg-ink-muted) !important; box-shadow:none !important; } .content-wrapper .table.table-hover tbody tr:hover .sg-action-edit{ color:var(--sg-accent-strong) !important; } .content-wrapper .table.table-hover tbody tr:hover .sg-action-delete{ color:var(--sg-danger) !important; } /* Hover direto no ícone reforça com leve fundo */ .content-wrapper .table .sg-action-edit:hover{ background:var(--sg-accent-hover) !important; color:var(--sg-accent-strong) !important; } .content-wrapper .table .sg-action-delete:hover{ background:rgba(207,74,57,.14) !important; color:var(--sg-danger) !important; } .content-wrapper .table-striped tbody tr:nth-of-type(odd){ background-color:var(--sg-surface-2); } /* =========================== FORMULÁRIOS ============================== */ .content-wrapper .form-group > label, .content-wrapper .col-form-label{ font-weight:500; font-size:.86rem; margin-bottom:.4rem; color:var(--sg-ink); } .form-control, .content-wrapper .form-control{ background-color:var(--sg-input-bg); color:var(--sg-ink); border:1px solid var(--sg-border); border-radius:var(--sg-radius-sm); transition:border-color .15s ease, box-shadow .15s ease; } .form-control:focus, .content-wrapper .form-control:focus{ background-color:var(--sg-input-bg); border-color:var(--sg-accent); box-shadow:0 0 0 3px var(--sg-accent-hover); } .content-wrapper label, .content-wrapper .form-check-label, .content-wrapper .form-text{ color:var(--sg-ink); } .content-wrapper .form-text.text-muted{ color:var(--sg-ink-muted) !important; } .content-wrapper .form-check-input{ accent-color:var(--sg-accent); } .input-group-text{ background-color:var(--sg-surface-2); border-color:var(--sg-border); color:var(--sg-ink-muted); } /* Subtítulo de seção dentro de formulários longos (agrupa campos) */ .content-wrapper .sg-form-section{ font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--sg-accent-strong); margin:1.6rem 0 .9rem; padding-bottom:.45rem; border-bottom:1px solid var(--sg-border); } .content-wrapper .sg-form-section:first-child{ margin-top:.25rem; } /* Select2 — TEMA (cores via tokens) */ .select2-container--bootstrap4 .select2-selection, /* Regras agnósticas de tema: .select2-container casa --bootstrap4 E --default (o django_select2 renderiza alguns campos no tema --default). */ .select2-container .select2-selection{ background-color:var(--sg-input-bg) !important; border:1px solid var(--sg-border) !important; border-radius:var(--sg-radius-sm) !important; } .select2-container--focus .select2-selection{ border-color:var(--sg-accent) !important; box-shadow:0 0 0 3px var(--sg-accent-hover) !important; } .select2-container .select2-selection--single .select2-selection__rendered{ color:var(--sg-ink) !important; } .select2-container .select2-selection--single .select2-selection__placeholder{ color:var(--sg-ink-muted) !important; } .select2-dropdown{ background-color:var(--sg-surface) !important; border:1px solid var(--sg-border) !important; } .select2-container .select2-results__option{ color:var(--sg-ink) !important; } .select2-container .select2-results__option--highlighted{ background-color:var(--sg-accent) !important; color:var(--sg-accent-contrast) !important; } .select2-container .select2-results__option[aria-selected="true"]{ background-color:var(--sg-accent-hover) !important; color:var(--sg-ink) !important; } .select2-container .select2-selection--multiple .select2-selection__choice{ background-color:var(--sg-accent) !important; border-color:var(--sg-accent) !important; color:var(--sg-accent-contrast) !important; } .select2-container .select2-selection--multiple .select2-selection__choice__remove{ color:var(--sg-accent-contrast) !important; } .select2-search--dropdown .select2-search__field{ background-color:var(--sg-input-bg) !important; color:var(--sg-ink) !important; border:1px solid var(--sg-border) !important; } /* Campo de busca inline do Select2 MÚLTIPLO (texto digitado): legível no escuro */ .select2-container .select2-selection--multiple .select2-search__field{ color:var(--sg-ink) !important; background:transparent !important; } /* Select2 — LAYOUT (quebra de linha, altura, rolagem) — funcional */ .select2-container--bootstrap4 .select2-results__option, .select2-container--default .select2-results__option{ white-space:normal !important; word-wrap:break-word !important; } .select2-container--bootstrap4 .select2-results > .select2-results__options, .select2-container--default .select2-results > .select2-results__options{ max-height:250px; overflow-y:auto; } .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-selection--single .select2-selection__rendered{ white-space:normal !important; word-wrap:break-word !important; line-height:1.5; padding-right:20px; } .select2-container--bootstrap4 .select2-selection--single, .select2-container--default .select2-selection--single{ height:auto !important; min-height:calc(1.5em + .75rem + 2px); } .select2-container--bootstrap4 .select2-dropdown{ min-width:100%; } .select2-dropdown{ z-index:9999 !important; } /* ============================== BOTÕES ================================ */ .content-wrapper .btn{ border-radius:var(--sg-radius-xs); font-weight:500; } .content-wrapper .btn-group:not(.btn-group-xs) > .btn{ border-radius:0; } .content-wrapper .btn-group:not(.btn-group-xs) > .btn:first-child{ border-top-left-radius:var(--sg-radius-xs); border-bottom-left-radius:var(--sg-radius-xs); } .content-wrapper .btn-group:not(.btn-group-xs) > .btn:last-child{ border-top-right-radius:var(--sg-radius-xs); border-bottom-right-radius:var(--sg-radius-xs); } .content-wrapper .btn-group-xs > .btn, .content-wrapper .table .btn-xs{ border-radius:6px; } /* "Menos cor": âmbar = ação principal; resto neutro; status contidos */ .btn-primary, .btn-warning{ background-color:var(--sg-accent); border-color:var(--sg-accent); color:var(--sg-accent-contrast); } .btn-primary:hover, .btn-warning:hover{ background-color:var(--sg-accent-strong); border-color:var(--sg-accent-strong); color:#fff; } .btn-info, .btn-secondary, .btn-dark, .btn-purple, .btn-default{ background-color:var(--sg-neutral-fill); border-color:var(--sg-neutral-fill-2); color:var(--sg-neutral-ink); } .btn-info:hover, .btn-secondary:hover, .btn-dark:hover, .btn-purple:hover, .btn-default:hover{ background-color:var(--sg-neutral-fill-2); color:var(--sg-ink); } .btn-success{ background-color:var(--sg-success); border-color:var(--sg-success); color:#fff; } .btn-danger{ background-color:var(--sg-danger); border-color:var(--sg-danger); color:#fff; } .btn-outline-primary{ color:var(--sg-accent-strong); border-color:var(--sg-accent); } .btn-outline-primary:hover{ background-color:var(--sg-accent); border-color:var(--sg-accent); color:var(--sg-accent-contrast); } .btn-outline-secondary{ color:var(--sg-ink-muted); border-color:var(--sg-border); } .btn-outline-secondary:hover{ background-color:var(--sg-accent-hover); border-color:var(--sg-accent); color:var(--sg-accent-strong); } .btn-outline-danger{ color:var(--sg-danger); border-color:var(--sg-danger); } .btn-outline-danger:hover{ background-color:var(--sg-danger); border-color:var(--sg-danger); color:#fff; } /* ============================== BADGES =============================== */ .badge{ border-radius:var(--sg-radius-pill); padding:.4em .7em; font-weight:500; } .content-wrapper .table .badge{ font-size:.72rem; } /* Não-semânticas -> pílula neutra */ .badge-info, .badge.bg-info, .badge-primary, .badge.bg-primary, .badge-secondary, .badge.bg-secondary, .badge-light, .badge.bg-light, .badge-dark, .badge.bg-dark, .badge-purple{ background-color:var(--sg-neutral-fill) !important; color:var(--sg-neutral-ink) !important; } /* Semânticas -> tom contido */ .badge-success, .badge.bg-success{ background-color:rgba(47,158,110,.16) !important; color:var(--sg-success) !important; } .badge-warning, .badge.bg-warning{ background-color:rgba(226,163,60,.18) !important; color:var(--sg-accent-strong) !important; } .badge-danger, .badge.bg-danger{ background-color:rgba(207,74,57,.18) !important; color:var(--sg-danger) !important; } /* =========================== PAGINAÇÃO =============================== */ .content-wrapper .pagination .page-link{ border:none; margin:0 2px; border-radius:var(--sg-radius-xs); min-width:34px; text-align:center; background:transparent; color:var(--sg-ink-muted); } .content-wrapper .pagination .page-link:hover{ background-color:var(--sg-accent-hover); color:var(--sg-accent-strong); } .content-wrapper .pagination .page-item.active .page-link{ background-color:var(--sg-accent); color:var(--sg-accent-contrast); } /* ===================== LINKS / BREADCRUMB / DETALHES ================= */ /* Links de texto em âmbar — exceto botões (.btn), que mantêm a cor própria */ .content-wrapper a:not(.btn){ color:var(--sg-accent-strong); } .content-wrapper a:not(.btn):hover{ color:var(--sg-accent); } .breadcrumb-item a{ color:var(--sg-accent-strong); } .breadcrumb-item.active{ color:var(--sg-ink-muted); } /* Telas de detalhe (dl.row chave/valor) */ .content-wrapper dl.row dt{ font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--sg-ink-muted); padding-top:.55rem; } .content-wrapper dl.row dd{ font-size:.95rem; padding-bottom:.55rem; margin-bottom:.2rem; border-bottom:1px solid var(--sg-border); color:var(--sg-ink); } /* Subtítulo de seção (dt ocupando a linha inteira) em âmbar */ .content-wrapper dl.row dt.col-sm-12{ text-transform:none; font-size:.95rem; letter-spacing:0; color:var(--sg-accent-strong); border-top:1px solid var(--sg-border); margin-top:.6rem; } .content-wrapper dl.row dt.col-sm-12 strong{ color:var(--sg-accent-strong) !important; } /* Blocos de texto sem cara de código */ .content-wrapper pre.pre-wrap, .content-wrapper pre{ white-space:pre-wrap; word-wrap:break-word; font-family:inherit; font-size:.95rem; background:transparent; border:none; padding:0; margin:0; color:inherit; } .content-wrapper .card-footer.text-sm{ background:transparent; } /* ============================= ALERTAS =============================== */ .alert-info{ background-color:var(--sg-accent-hover); border-color:rgba(226,163,60,.3); color:var(--sg-ink); } .alert-secondary{ background-color:var(--sg-surface-2); border-color:var(--sg-border); color:var(--sg-ink); } .alert-success{ background-color:rgba(47,158,110,.12); border-color:rgba(47,158,110,.3); color:var(--sg-success); } .alert-warning{ background-color:rgba(226,163,60,.12); border-color:rgba(226,163,60,.3); color:var(--sg-accent-strong); } .alert-danger{ background-color:rgba(207,74,57,.12); border-color:rgba(207,74,57,.3); color:var(--sg-danger); } /* ============================== SIDEBAR ============================== */ /* Escura nos DOIS modos (tokens --sg-sidebar*) */ .main-sidebar.sidebar-dark-primary{ background-color:var(--sg-sidebar) !important; } .main-sidebar.sidebar-dark-primary .sidebar{ background-color:transparent !important; } /* Marca + painel do usuário */ .main-sidebar .brand-link{ background-color:var(--sg-sidebar) !important; border-bottom:1px solid var(--sg-sidebar-border) !important; padding:14px 16px; } .main-sidebar .brand-link .brand-text{ color:#fff !important; font-weight:700; letter-spacing:1.2px; } .main-sidebar .user-panel{ border-bottom-color:var(--sg-sidebar-border) !important; } .main-sidebar .user-panel .info a{ color:var(--sg-sidebar-ink) !important; } /* Itens de menu em pílula arredondada */ .main-sidebar.sidebar-dark-primary .nav-sidebar{ padding:4px 8px; } .main-sidebar.sidebar-dark-primary .nav-item{ background-color:transparent !important; margin-bottom:1px; max-width:100%; } .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link{ border-radius:var(--sg-radius-sm); margin:2px 0; padding:10px 12px; transition:background-color .15s ease, color .15s ease; /* Mantém o item (e o contador/badge) dentro da largura da sidebar: sem isto o nav-link transborda ~25px e o badge à direita fica cortado na borda. */ max-width:100%; } .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link p{ color:var(--sg-sidebar-ink) !important; font-size:.92rem; } .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link .nav-icon{ color:var(--sg-sidebar-ink-muted); font-size:1.0rem; margin-right:.65rem; width:1.75rem; text-align:center; } /* Item ativo: pílula âmbar */ .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active{ background-color:var(--sg-accent) !important; color:var(--sg-accent-contrast) !important; box-shadow:none !important; } .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active p, .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active > i.nav-icon{ color:var(--sg-accent-contrast) !important; } /* Hover: tinta âmbar translúcida */ .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item:not(.menu-open) > .nav-link:hover{ background-color:var(--sg-accent-hover) !important; color:var(--sg-accent-strong) !important; } .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item:not(.menu-open) > .nav-link:hover p, .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item:not(.menu-open) > .nav-link:hover > i.nav-icon{ color:var(--sg-accent-strong) !important; } /* Cabeçalhos de seção */ .main-sidebar.sidebar-dark-primary .nav-header{ background:transparent !important; color:var(--sg-sidebar-ink-muted) !important; font-size:.7rem !important; font-weight:bold; text-transform:uppercase; letter-spacing:1.2px !important; padding:16px 14px 6px !important; margin:0 !important; } /* Badge na sidebar */ .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link .badge.right{ background-color:var(--sg-accent) !important; color:var(--sg-accent-contrast) !important; font-size:.7rem; padding:.3em .55em; font-weight:bold; } /* Barra de rolagem fina */ .main-sidebar::-webkit-scrollbar{ width:6px; } .main-sidebar::-webkit-scrollbar-thumb{ background:rgba(226,163,60,.4); border-radius:3px; } /* ============================== NAVBAR =============================== */ /* Segue o modo (claro=surface branco / escuro=marinho) via tokens */ .main-header.navbar{ background-color:var(--sg-surface) !important; border-bottom:1px solid var(--sg-border) !important; box-shadow:none !important; } .main-header .navbar-nav .nav-link, .main-header .nav-link{ color:var(--sg-ink-muted) !important; border-radius:var(--sg-radius-xs); } .main-header .navbar-nav .nav-link:hover, .main-header .nav-link:hover{ color:var(--sg-accent-strong) !important; } .main-header .navbar-badge.badge-warning{ background-color:var(--sg-accent) !important; color:var(--sg-accent-contrast) !important; } /* Dropdowns da navbar */ .main-header .dropdown-menu{ background-color:var(--sg-surface); border:1px solid var(--sg-border); } .main-header .dropdown-item{ color:var(--sg-ink); } .main-header .dropdown-item:hover{ background-color:var(--sg-accent-hover); color:var(--sg-accent-strong); } .main-header .dropdown-divider{ border-top-color:var(--sg-border); } .main-header .user-menu .dropdown-menu .user-header{ background-color:var(--sg-sidebar) !important; color:#fff; } /* ===================== AVATAR DE INICIAIS (sem imagem) ================ */ .sg-avatar{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--sg-accent); color:var(--sg-accent-contrast); font-family:var(--sg-font); font-weight:600; font-size:.85rem; line-height:1; text-transform:uppercase; flex:0 0 auto; user-select:none; } .sg-avatar-lg{ width:64px; height:64px; font-size:1.5rem; } .main-header .user-menu .sg-avatar{ margin-right:.4rem; } /* ==================== DASHBOARD (cards de métrica) =================== */ /* Movido de dashboard.html; usa os tokens globais. */ .metric-card{ background:var(--sg-surface); border:1px solid var(--sg-border); border-radius:var(--sg-radius); padding:18px 20px; margin-bottom:1rem; height:calc(100% - 1rem); transition:transform .15s ease, box-shadow .15s ease; } .metric-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); } .metric-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .metric-chip{ width:38px; height:38px; border-radius:var(--sg-radius-sm); display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; } .metric-label{ font-size:.82rem; color:var(--sg-ink-muted); } .metric-value{ font-size:2.1rem; font-weight:600; line-height:1.05; color:var(--sg-ink); } .metric-sub{ font-size:.78rem; color:var(--sg-ink-muted); margin-top:4px; } /* Variações de chip (âmbar = acento; azul/roxo viram neutros) */ .metric-chip.chip-amber{ background:rgba(226,163,60,.16); color:var(--sg-accent-strong); } .metric-chip.chip-green{ background:rgba(47,158,110,.16); color:var(--sg-success); } .metric-chip.chip-blue, .metric-chip.chip-purple, .metric-chip.chip-neutral{ background:rgba(148,160,176,.14); color:var(--sg-ink-muted); } .metric-chip.chip-danger{ background:rgba(207,74,57,.15); color:var(--sg-danger); } /* ===== Impressão (botão "Imprimir" nos detalhes / window.print) ===== Esconde sidebar, navbar, breadcrumb, botões e o chat do Steve; deixa só o conteúdo do registro, com cores preservadas. Use .d-print-none (Bootstrap 4) em qualquer elemento que não deva sair na impressão/PDF. */ @media print { /* Garante que fundos/cores (cabeçalhos de card, badges) saiam no papel. */ *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .main-sidebar, .main-header, .main-footer, .content-header .breadcrumb, .card-tools, .btn, .sg-action, #stive-chat, .stive-launcher, [data-widget="control-sidebar"], .control-sidebar, .toasts-top-right { display: none !important; } /* Conteúdo ocupa a página inteira (sem o recuo da sidebar). */ .content-wrapper, .content-wrapper.sg-bg, body.sidebar-mini .content-wrapper { margin-left: 0 !important; } body, .content-wrapper { background: #fff !important; } .content-header { padding-left: 0 !important; } /* Cards limpos, sem sombra, evitando quebra no meio. */ .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; } a[href]::after { content: ""; } /* não imprime a URL após links */ .table td, .table th { color: #000 !important; } }