/* ===================================================================== THEME V2 — "zts/shadcn" portado pro Bootstrap, com cores RDC. Carregado por último no , sobrescreve o visual antigo. Reversível: basta remover o deste arquivo no base.html. Estética: neutros (zinc), bordas finas 1px, cantos arredondados, flat (sombra suave), muito whitespace. Destaque = azul/laranja RDC. ===================================================================== */ :root { /* Paleta neutra (zinc) */ --z-50:#fafafa; --z-100:#f4f4f5; --z-200:#e4e4e7; --z-300:#d4d4d8; --z-400:#a1a1aa; --z-500:#71717a; --z-600:#52525b; --z-700:#3f3f46; --z-800:#27272a; --z-900:#18181b; --z-950:#09090b; /* Marca RDC */ --rdc-blue: #003366; --rdc-blue-light: #0a4f9e; --rdc-orange: #ff6600; /* Tokens semânticos (shadcn) — claro */ --background: #ffffff; --foreground: var(--z-900); --card: #ffffff; --card-foreground: var(--z-900); --muted: var(--z-100); --muted-foreground: var(--z-500); --accent: var(--z-100); --border: var(--z-200); --input: var(--z-200); --input-bg: #ffffff; --primary: var(--rdc-blue); --primary-foreground: #ffffff; --ring: rgba(0, 51, 102, .35); --radius: 0.85rem; /* Sidebar Dark Pro (navy rico, permanente nos 2 temas) */ --sidebar-bg: #0b2545; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-text-active: #ffffff; --sidebar-active-bg: var(--rdc-orange); --sidebar-hover-bg: rgba(255, 255, 255, .08); --sidebar-border: rgba(255, 255, 255, .08); --sidebar-icon: rgba(255, 255, 255, .5); /* === Mapeamento p/ tokens do Bootstrap 5.3 === */ --bs-body-bg: var(--z-50); --bs-body-color: var(--foreground); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-border-radius: var(--radius); --bs-border-radius-sm: calc(var(--radius) - 2px); --bs-border-radius-lg: calc(var(--radius) + 2px); --bs-border-radius-xl: calc(var(--radius) + 4px); --bs-primary: var(--rdc-blue); --bs-primary-rgb: 0, 51, 102; --bs-link-color: var(--rdc-blue-light); --bs-link-color-rgb: 10, 79, 158; --bs-link-hover-color: var(--rdc-blue); --bs-secondary-bg: var(--z-100); --bs-tertiary-bg: var(--z-50); --bs-emphasis-color: var(--z-950); --bs-heading-color: inherit; } [data-bs-theme="dark"] { /* Paleta SLATE (cinza-azulado) — mais "cara de sistema" que o preto puro, e harmoniza com a sidebar navy. */ --background: #0f172a; /* fundo da página (slate-900) */ --foreground: #e6ebf3; --card: #1a2436; /* superfícies (cards) */ --card-foreground: #e6ebf3; --muted: #273347; --muted-foreground: #94a3b8; --accent: #273347; --border: rgba(148, 163, 184, .16); --input: rgba(148, 163, 184, .24); --input-bg: rgba(255, 255, 255, .035); --primary: #2f6fb3; --ring: rgba(47, 111, 179, .45); /* Clareia o azul/laranja da MARCA só no escuro, p/ textos com color: var(--rdc-blue) inline ficarem legíveis (eram preto-no-preto). */ --rdc-blue: #6aa6e0; --rdc-blue-light: #8fc0ee; --sidebar-bg: #0b2545; --sidebar-text: rgba(255, 255, 255, .72); --sidebar-text-active: #ffffff; --sidebar-active-bg: var(--rdc-orange); --sidebar-hover-bg: rgba(255, 255, 255, .08); --sidebar-border: rgba(255, 255, 255, .08); --sidebar-icon: rgba(255, 255, 255, .5); --bs-body-bg: #0f172a; --bs-body-color: var(--foreground); --bs-border-color: var(--border); --bs-border-color-translucent: var(--border); --bs-primary: #2f6fb3; --bs-primary-rgb: 47, 111, 179; --bs-link-color: #6aa6e0; --bs-link-color-rgb: 106, 166, 224; --bs-link-hover-color: #9ac4ee; --bs-secondary-bg: #273347; --bs-tertiary-bg: #1a2436; --bs-emphasis-color: #ffffff; --bs-heading-color: inherit; } /* ===================== Base ===================== */ body { background-color: var(--bs-body-bg) !important; color: var(--foreground) !important; font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } h1,h2,h3,h4,h5,h6 { font-weight: 650; letter-spacing: -0.02em; } .text-muted { color: var(--muted-foreground) !important; } hr { border-color: var(--border); opacity: 1; } a { text-decoration: none; } /* ===================== Cards ===================== */ .card { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.04); color: var(--card-foreground); } .card .card-header, .card .card-rdc-header { border-bottom: 1px solid var(--border); font-weight: 600; } /* Remove a barrinha azul no topo dos cards "RDC" — visual mais flat/clean */ .card-rdc, .ro-card { border-top: 1px solid var(--border) !important; } .shadow, .shadow-sm, .shadow-lg { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; } /* ===================== Botões ===================== */ .btn { border-radius: calc(var(--radius) - 2px); font-weight: 500; box-shadow: none !important; transition: background-color .15s, border-color .15s, color .15s, opacity .15s; } .btn-lg { border-radius: var(--radius); } .btn-primary, .btn-rdc-primary { background-color: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-rdc-primary:hover { background-color: var(--rdc-blue-light); border-color: var(--rdc-blue-light); color: #fff; } .btn-outline-secondary { border-color: var(--border); color: var(--muted-foreground); } .btn-outline-secondary:hover { background-color: var(--muted); border-color: var(--border); color: var(--foreground); } .btn-outline-primary { border-color: var(--primary); color: var(--primary); } .btn-outline-primary:hover { background-color: var(--primary); color: #fff; } /* ===================== Inputs ===================== */ .form-control, .form-select, textarea.form-control { background-color: var(--input-bg); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); color: var(--foreground); } .form-control::placeholder, textarea.form-control::placeholder { color: var(--muted-foreground); opacity: .75; } .form-control:focus, .form-select:focus, textarea.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background-color: var(--input-bg); color: var(--foreground); } .form-select option { background-color: var(--card); color: var(--foreground); } .input-group-text { background-color: var(--muted); border: 1px solid var(--input); color: var(--muted-foreground); } /* Inputs nativos legados que não usam .form-control (text/email/password/etc.) */ [data-bs-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]), [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] select { background-color: var(--input-bg); color: var(--foreground); border-color: var(--input); } .form-label { font-weight: 500; color: var(--foreground); } /* ===================== Tabelas ===================== */ .table { --bs-table-bg: transparent; --bs-table-color: var(--foreground); --bs-table-border-color: var(--border); --bs-table-hover-bg: var(--muted); --bs-table-hover-color: var(--foreground); } .table > thead th { color: var(--muted-foreground); font-weight: 600; text-transform: none; border-bottom: 1px solid var(--border); font-size: .8rem; } .table td { border-color: var(--border); vertical-align: middle; } /* ===================== Badges ===================== */ .badge { font-weight: 600; border-radius: 999px; padding: .3em .7em; } .badge.bg-light { background-color: var(--muted) !important; color: var(--muted-foreground) !important; border-color: var(--border) !important; } /* ===================== Nav pills / abas ===================== */ .nav-pills .nav-link { color: var(--muted-foreground); border-radius: calc(var(--radius) - 2px); } .nav-pills .nav-link.active { background-color: var(--primary); color: #fff; } /* ===================== Accordion ===================== */ .accordion { --bs-accordion-bg: var(--card); --bs-accordion-color: var(--foreground); --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--foreground); --bs-accordion-active-bg: var(--muted); --bs-accordion-active-color: var(--foreground); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius); } /* ===================== Alerts ===================== */ .alert { border: 1px solid var(--border); border-radius: var(--radius); } .alert-light { background-color: var(--muted); color: var(--foreground); } /* ===================== Dropdown ===================== */ .dropdown-menu { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); color: var(--foreground); } .dropdown-item { color: var(--foreground); border-radius: calc(var(--radius) - 4px); } .dropdown-item:hover { background-color: var(--muted); color: var(--foreground); } /* ===================== SIDEBAR (Dark Pro, navy) ===================== Aberto e fechado devem ser IDÊNTICOS (mesmo logo, mesmo tamanho de ícone, alinhados); fechado só esconde o texto e estreita. Scrollbar ESCONDIDA (continua rolando) pra a faixa branca do logo encostar nas bordas. */ #sidebar-wrapper { background-color: var(--sidebar-bg) !important; border-right: none; box-shadow: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; /* Firefox: sem barra (sem 'gutter') */ } #sidebar-wrapper::-webkit-scrollbar { width: 0; height: 0; } /* Chrome: sem barra */ .sidebar-logo { background-color: #ffffff !important; border-bottom: 1px solid var(--sidebar-border) !important; } /* Cores dos itens (todos os estados) */ #sidebar-wrapper .list-group-item { background-color: transparent !important; color: var(--sidebar-text) !important; border: none !important; } #sidebar-wrapper .list-group-item i, #sidebar-wrapper .menu-folder-toggle i { color: var(--sidebar-icon) !important; } #sidebar-wrapper .list-group-item:hover { background-color: var(--sidebar-hover-bg) !important; color: #fff !important; } #sidebar-wrapper .list-group-item:hover i { color: #fff !important; } #sidebar-wrapper .list-group-item.active { background-color: var(--sidebar-active-bg) !important; color: #fff !important; font-weight: 600; } #sidebar-wrapper .list-group-item.active i { color: #fff !important; } /* list-group acompanha o wrapper, sem estouro horizontal */ #sidebar-wrapper .list-group { width: 100% !important; } /* ÍCONES: UM tamanho só, alinhados (largura fixa 1.5em), em TODOS os estados — vence as regras do base.html (colapsado 1.15rem, hover 1rem) que deixavam tamanhos diferentes entre aberto/fechado. */ #sidebar-wrapper .list-group-item i.fas, #sidebar-wrapper .list-group-item i.fa, #sidebar-wrapper .list-group-item i.far, #sidebar-wrapper .list-group-item i.fab, #sidebar-wrapper .menu-folder-toggle .folder-label i.fas, #sidebar-wrapper .menu-folder-toggle .folder-label i.far, #sidebar-wrapper .menu-folder-toggle .folder-label i.fa { font-size: .95rem !important; width: 1.5em !important; } /* Layout moderno (pill) — UMA regra só pro EXPANDIDO e pro HOVER-EXPAND (mesmos seletores, com !important pra vencer o base.html). Assim os dois estados são IDÊNTICOS por construção — impossível divergir. */ #wrapper:not(.sidebar-collapsed) #sidebar-wrapper, #wrapper.sidebar-collapsed #sidebar-wrapper:hover { padding: 0 .55rem !important; } #wrapper:not(.sidebar-collapsed) .sidebar-logo, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .sidebar-logo { margin: 0 -.55rem .5rem !important; } #wrapper:not(.sidebar-collapsed) #sidebar-wrapper .list-group-item, #wrapper:not(.sidebar-collapsed) #sidebar-wrapper .menu-folder-toggle, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .list-group-item, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .menu-folder-toggle { border-radius: 10px !important; font-weight: 500; font-size: .875rem !important; padding: .55rem .75rem !important; margin: 2px 0 !important; text-align: left !important; } #wrapper:not(.sidebar-collapsed) #sidebar-wrapper .menu-folder-toggle, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .menu-folder-toggle { justify-content: space-between !important; } #wrapper:not(.sidebar-collapsed) .menu-folder-toggle .folder-label, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .menu-folder-toggle .folder-label { font-size: .875rem !important; justify-content: flex-start !important; } #wrapper:not(.sidebar-collapsed) #sidebar-wrapper .menu-folder-content .list-group-item, #wrapper.sidebar-collapsed #sidebar-wrapper:hover .menu-folder-content .list-group-item { padding: .5rem .75rem .5rem 2.4rem !important; font-size: .83rem !important; } /* Modo COLAPSADO: estreito, só ícones centralizados */ #wrapper.sidebar-collapsed #sidebar-wrapper { width: 4.5rem; } #wrapper.sidebar-collapsed #sidebar-wrapper:not(:hover) .list-group-item.active { border-radius: 0; } /* Cores de categoria/pasta/footer (estado geral) */ .menu-category { color: rgba(255,255,255,.4) !important; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: .66rem; } .menu-folder-toggle { color: var(--sidebar-text) !important; } .menu-folder-toggle:hover { background-color: var(--sidebar-hover-bg) !important; color: #fff !important; } .menu-folder-toggle i { color: var(--sidebar-icon) !important; } .menu-folder-content { background-color: transparent !important; } .sidebar-footer { border-top: 1px solid var(--sidebar-border); color: rgba(255,255,255,.5); } .sidebar-footer a, .sidebar-footer .text-muted { color: rgba(255,255,255,.55) !important; } /* ===================== TOPBAR (navbar) ===================== */ #page-content-wrapper { background-color: var(--bs-body-bg); } .navbar { background-color: var(--card) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } .navbar .navbar-brand, .navbar .nav-link { color: var(--foreground); } /* Resume/stat cards genéricos usados em várias telas */ .resume-card, .ro-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.04); } .field-name { background: var(--muted); color: var(--muted-foreground); } /* ============================================================ COMPONENTES MODERNOS (utilitários reusáveis do visual novo) ============================================================ */ /* Topbar mais alta e arejada */ .navbar { min-height: 64px; padding-top: .5rem; padding-bottom: .5rem; } /* Conteúdo com mais respiro */ #page-content-wrapper > .container-fluid, #page-content-wrapper > .container { padding-top: 1.75rem; padding-bottom: 2.5rem; } /* Cards com mais padding e cantos generosos */ .card { border-radius: var(--radius); } .card > .card-body { padding: 1.4rem 1.5rem; } /* --- Cabeçalho de página (título grande + subtítulo + ações) --- */ .page-head { margin-bottom: 1.75rem; } .page-head .page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; color: var(--foreground); margin: 0; line-height: 1.2; } .page-head .page-sub { color: var(--muted-foreground); font-size: .95rem; margin-top: .25rem; } /* --- KPI moderno: chip de ícone tintado + número grande --- */ .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.45rem; display: flex; flex-direction: column; gap: .8rem; height: 100%; position: relative; overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s; } .stat:hover { box-shadow: 0 8px 28px rgba(0,0,0,.07); transform: translateY(-2px); border-color: var(--z-300); } /* Faixa de cor à esquerda (Dark Pro) */ .stat.strip-blue::before, .stat.strip-green::before, .stat.strip-orange::before, .stat.strip-violet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .stat.strip-blue::before { background: var(--rdc-blue); } .stat.strip-green::before { background: #12a673; } .stat.strip-orange::before { background: var(--rdc-orange); } .stat.strip-violet::before { background: #6d4aff; } .stat-top { display: flex; align-items: center; justify-content: space-between; } .icon-chip { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; } .icon-chip.c-blue { background: rgba(0,51,102,.10); color: var(--rdc-blue); } .icon-chip.c-orange { background: rgba(255,102,0,.12); color: var(--rdc-orange); } .icon-chip.c-green { background: rgba(28,200,138,.14);color: #12a673; } .icon-chip.c-violet { background: rgba(124,92,255,.14);color: #6d4aff; } [data-bs-theme="dark"] .icon-chip.c-blue { color: #6aa6e0; } .stat-value { font-size: 1.9rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; color: var(--foreground); } .stat-label { font-size: .8rem; color: var(--muted-foreground); font-weight: 500; margin-top: .35rem; } .stat-delta { font-size: .78rem; font-weight: 600; } .stat-delta.up { color: #12a673; } .stat-delta.down { color: #e74a3b; } /* --- Tiles de atalho rápido --- */ .quick-tile { display: flex; align-items: center; gap: .9rem; text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.2rem; color: var(--foreground); transition: box-shadow .18s, transform .18s, border-color .18s; } .quick-tile:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); transform: translateY(-2px); border-color: var(--z-300); color: var(--foreground); } .quick-tile .qt-title { font-weight: 600; font-size: .95rem; } .quick-tile .qt-sub { font-size: .8rem; color: var(--muted-foreground); } .quick-tile .qt-arrow { margin-left: auto; color: var(--muted-foreground); } /* Variante "empilhada" (ícone no topo) — 4 colunas, estilo Dark Pro */ .quick-tile.qt-stack { flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.15rem 1.2rem; } .quick-tile.qt-stack .qt-arrow { display: none; }