/* FinPilot — customizações sobre o tema DashForge */ /* ============================================================ OCULTAR VALORES SENSÍVEIS Ativado pela classe .hide-sensitive em (script inline no do layout evita flash + toggle na topbar via finpilot.js). ============================================================ */ html.hide-sensitive .sensitive-value { filter: blur(5px); user-select: none; transition: filter 0.15s ease; } html.hide-sensitive .sensitive-value:hover { filter: blur(0); } /* ============================================================ FUNDO GERAL — diferencia cards do fundo da página ============================================================ */ body { background-color: #eef0f5; } .content-body { background-color: #eef0f5; } /* ============================================================ LOGO ============================================================ */ .aside-logo, .df-logo { font-size: 1.25rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -0.5px; } .aside-logo span, .df-logo span { color: #0168fa; } .aside-logo:hover, .df-logo:hover { color: #fff; text-decoration: none; } /* ============================================================ AUTH LAYOUT — SPLIT PANEL ============================================================ */ .finpilot-auth-panel { background: linear-gradient(135deg, #0f1f3d 0%, #0168fa 100%); border-radius: 12px; padding: 3rem 2.5rem; margin-right: 2rem; min-width: 360px; max-width: 460px; flex-shrink: 0; position: relative; overflow: hidden; } .finpilot-auth-panel::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; } .finpilot-auth-panel::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 220px; height: 220px; background: rgba(255, 255, 255, 0.04); border-radius: 50%; } .auth-panel-content { position: relative; z-index: 1; } .auth-panel-logo { font-size: 1.75rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -1px; margin-bottom: 2.5rem; display: block; } .auth-panel-logo span { color: rgba(255, 255, 255, 0.6); } .auth-panel-title { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.35; margin-bottom: 1rem; } .auth-panel-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.65; margin-bottom: 2.5rem; } .auth-panel-stats { display: flex; flex-direction: column; gap: 1rem; } .auth-stat-item { display: flex; align-items: center; gap: 0.75rem; color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; } .auth-stat-icon { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .auth-stat-icon svg { width: 16px; height: 16px; color: #fff; } /* Sign wrapper melhorado */ .sign-wrapper { padding: 2.5rem 0; } .content-auth .sign-wrapper h3 { font-size: 1.5rem; font-weight: 700; } /* ============================================================ AVATAR ============================================================ */ .avatar-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 600; font-size: 0.875rem; } .avatar.avatar-xl { width: 72px; height: 72px; } .avatar.avatar-xl .avatar-initial { font-size: 1.75rem; } /* ============================================================ BADGES DE STATUS ============================================================ */ .badge-warning { background-color: #f59e0b; color: #000; } .badge-success { background-color: #10b981; color: #fff; } .badge-danger { background-color: #ef4444; color: #fff; } .badge-info { background-color: #0ea5e9; color: #fff; } .badge-secondary { background-color: #64748b; color: #fff; } .badge-light { background-color: #f1f5f9; color: #475569; } /* ============================================================ METRIC CARDS — alinhamento de altura ============================================================ */ .metric-icon { opacity: 0.85; transition: opacity 0.2s; } .card.card-body .metric-icon:hover { opacity: 1; } /* Row de métricas: altura igual em todos os cards */ .row .card.card-body { height: 100%; } /* ============================================================ TABELAS FINANCEIRAS ============================================================ */ .table-financial th, .table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: #8392a5; font-weight: 600; border-bottom-width: 1px; } .table-hover tbody tr:hover { background-color: rgba(1, 104, 250, 0.03); } /* ============================================================ VALORES POSITIVOS / NEGATIVOS ============================================================ */ .tx-income, .tx-color-success { color: #10b981; } .tx-expense { color: #ef4444; } /* ============================================================ CARTÃO DE CRÉDITO — barra de progresso de limite ============================================================ */ .limit-bar { height: 5px; border-radius: 3px; background-color: #e2e8f0; overflow: hidden; margin-top: 0.5rem; } .limit-bar-fill { height: 100%; border-radius: 3px; background-color: #0168fa; transition: width 0.4s ease; } .limit-bar-fill.warning { background-color: #f59e0b; } .limit-bar-fill.danger { background-color: #ef4444; } /* ============================================================ ESTADO VAZIO (empty state) ============================================================ */ .empty-state { text-align: center; padding: 3.5rem 1.5rem; } .empty-state > svg, .empty-state i { display: block; margin: 0 auto 1.25rem; color: #cbd5e1; width: 52px; height: 52px; } .empty-state h6 { color: #64748b; font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; } .empty-state p { color: #94a3b8; font-size: 0.875rem; margin-bottom: 1.5rem; max-width: 360px; margin-left: auto; margin-right: auto; } /* ============================================================ FILTRO DE RELATÓRIOS — pílulas de tipo ============================================================ */ .report-filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .report-filter-pill { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: #64748b; background-color: #f1f5f9; border: 1px solid transparent; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; } .report-filter-pill:hover { color: #0168fa; background-color: #e6eefe; text-decoration: none; } .report-filter-pill.active { color: #fff; background-color: #0168fa; box-shadow: 0 2px 8px rgba(1, 104, 250, 0.35); } html.dark-mode .report-filter-pill { background-color: var(--fp-input); color: var(--fp-muted); } html.dark-mode .report-filter-pill:hover { background-color: rgba(1, 104, 250, 0.15); color: #fff; } html.dark-mode .report-filter-pill.active { color: #fff; background-color: #0168fa; } /* ============================================================ FILTRO DE MÊS (navegação mês/ano) ============================================================ */ .month-filter { display: flex; align-items: center; gap: 0.5rem; } .month-filter .btn { padding: 0.25rem 0.625rem; } /* Card de filtro — visual mais sutil */ .card .card-body.pd-y-12 { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* ============================================================ MONEY INPUT ============================================================ */ .money-input { text-align: right; } /* ============================================================ FLASH MESSAGES ============================================================ */ .alert-flash { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999; min-width: 300px; max-width: 420px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); animation: slideInRight 0.3s ease; } @keyframes slideInRight { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================ SIDEBAR — melhorias sobre skin.charcoal ============================================================ */ .aside-header { background-color: #191f28; border-right-color: transparent; } .aside-body { background-color: #212830; border-top-color: rgba(255, 255, 255, 0.05); border-right-color: transparent; } .aside-loggedin { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 0.5rem; } /* Bloco do usuário logado — avatar proporcional + texto truncado */ .aside-loggedin .avatar { width: 40px; height: 40px; } .aside-loggedin .avatar-initial { font-size: 1rem; font-weight: 600; } /* min-width:0 permite que o flex item encolha e o texto trunque (gotcha do flexbox) */ .aside-loggedin .aside-user { flex: 1; min-width: 0; } .aside-loggedin .aside-user-meta { min-width: 0; } .aside-loggedin .aside-user-meta h6, .aside-loggedin .aside-user-meta p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Cores legíveis sobre o fundo escuro da sidebar */ .aside-loggedin .aside-user-meta h6 { color: #fff; } .aside-loggedin .aside-user-meta p { color: rgba(255, 255, 255, 0.55); } .aside-loggedin .aside-alert-link { flex-shrink: 0; padding-left: 0.5rem; } /* Minimizada: zera o padding extra (senão o avatar vaza do trilho de 60px) e esconde nome/email */ .aside.minimize .aside-loggedin { padding-left: 0; padding-right: 0; } .aside.minimize .aside-loggedin .aside-user-meta { display: none; } .nav-aside .nav-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: rgba(255, 255, 255, 0.4); padding: 0.75rem 1.25rem 0.25rem; } /* Logo: span fica na cor primária */ .aside-logo span, .aside-logo:hover span, .aside-logo:focus span { color: #0168fa; } /* ============================================================ CARDS — visual geral ============================================================ */ .card { border-radius: 8px; border-color: #e2e8f0; } .card-header { background-color: transparent; border-bottom-color: #e2e8f0; padding: 0.875rem 1.25rem; } .card-header h6 { font-weight: 600; font-size: 0.875rem; color: #1e293b; } .card.bd-danger { border-color: #fecaca; } .card-header.bd-danger { border-bottom-color: #fecaca; } /* ============================================================ BUTTONS — refinamentos ============================================================ */ .btn-xs { padding: 0.2rem 0.45rem; font-size: 0.7rem; border-radius: 4px; } .btn-primary { background-color: #0168fa; border-color: #0168fa; } .btn-primary:hover { background-color: #0256d6; border-color: #0256d6; } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb-style1 { background: transparent; padding: 0; font-size: 0.8rem; } .breadcrumb-style1 .breadcrumb-item.active { color: #94a3b8; } /* ============================================================ PAGE HEADER — espaçamento e alinhamento ============================================================ */ .content-body > .container { padding-top: 1.5rem; padding-bottom: 2rem; } /* ============================================================ TOPBAR ============================================================ */ .content-header { border-bottom: 1px solid #e2e8f0; } /* ============================================================ PERFIL — avatar lateral grande ============================================================ */ .profile-avatar-card .avatar-initial { font-size: 2rem; font-weight: 700; } /* ============================================================ FORMULÁRIOS — refinamentos ============================================================ */ .form-control { border-color: #e2e8f0; border-radius: 6px; font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; } .form-control:focus { border-color: #0168fa; box-shadow: 0 0 0 3px rgba(1, 104, 250, 0.12); } .form-group label { font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; } /* Input group refinado */ .input-group-text { background-color: #f8fafc; border-color: #e2e8f0; color: #64748b; font-size: 0.875rem; } /* ============================================================ MODAL — melhorias ============================================================ */ .modal-content { border-radius: 10px; border: none; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .modal-header { border-bottom-color: #e2e8f0; padding: 1rem 1.25rem; } .modal-header .modal-title { font-size: 1rem; font-weight: 600; } .modal-footer { border-top-color: #e2e8f0; } /* ============================================================ COLOR / ICON SWATCHES (categorias) ============================================================ */ .swatch-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Grade de ícones: muitas opções, limita a altura e rola internamente. */ .swatch-grid--scroll { max-height: 188px; overflow-y: auto; padding: 2px; } .color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; margin: 0; transition: box-shadow 0.15s, transform 0.1s; } .color-swatch:hover { transform: scale(1.08); } .color-swatch input[type="radio"] { display: none; } .color-swatch .swatch-check { width: 15px; height: 15px; color: #fff; stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45)); transition: opacity 0.15s; } .color-swatch:has(input:checked) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.3); } .color-swatch:has(input:checked) .swatch-check { opacity: 1; } .icon-swatch { width: 38px; height: 38px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; background-color: #fff; color: #596882; margin: 0; transition: border-color 0.15s, background-color 0.15s, color 0.15s; } .icon-swatch input[type="radio"] { display: none; } .icon-swatch i { font-size: 17px; line-height: 1; } .icon-swatch:hover { border-color: #b4bdce; color: #1b2e4b; } .icon-swatch:has(input:checked) { border-color: #0168fa; background-color: rgba(1, 104, 250, 0.08); color: #0168fa; } /* ============================================================ GAP UTILITIES (Bootstrap 4 não tem gap nativo) ============================================================ */ .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } /* ============================================================ DARK MODE Ativado pela classe .dark-mode em (script inline no do layout evita flash + toggle na topbar via finpilot.js). Sobrescreve as superfícies claras do tema DashForge (Bootstrap 4). A sidebar já é escura (skin.charcoal) e não é alterada aqui. ============================================================ */ html.dark-mode { --fp-bg: #14181f; /* fundo da página */ --fp-surface: #1d232c; /* cards */ --fp-elevated: #212830; /* modais, dropdowns */ --fp-input: #1a212a; /* campos de formulário */ --fp-border: #2b333d; /* bordas */ --fp-text: #ccd3de; /* texto base */ --fp-heading: #f1f5f9; /* títulos / valores em destaque */ --fp-muted: #8392a5; /* texto secundário */ } html.dark-mode body, html.dark-mode .content-body { background-color: var(--fp-bg); color: var(--fp-text); } /* Topbar */ html.dark-mode .content-header { background-color: #191f28; border-bottom-color: var(--fp-border); } html.dark-mode .content-search { border-bottom-color: var(--fp-border); } html.dark-mode .content-search input { background-color: transparent; color: var(--fp-text); } html.dark-mode .content-search i, html.dark-mode .content-header .nav-link { color: var(--fp-muted); } html.dark-mode .content-header .nav-link:hover { color: var(--fp-heading); } /* Cards */ html.dark-mode .card, html.dark-mode .bg-white { background-color: var(--fp-surface); border-color: var(--fp-border); color: var(--fp-text); } html.dark-mode .card-header { border-bottom-color: var(--fp-border); } html.dark-mode .card-header h6 { color: var(--fp-heading); } html.dark-mode .card.bd-danger, html.dark-mode .card-header.bd-danger { border-color: #6b2230; } /* Bordas e divisores utilitários do tema */ html.dark-mode .bd, html.dark-mode .bd-t, html.dark-mode .bd-b, html.dark-mode .bd-l, html.dark-mode .bd-r, html.dark-mode hr { border-color: var(--fp-border) !important; } /* Texto utilitário do DashForge */ html.dark-mode .tx-color-01 { color: var(--fp-heading); } html.dark-mode .tx-color-02 { color: var(--fp-text); } html.dark-mode .tx-color-03, html.dark-mode .tx-color-04, html.dark-mode .text-muted { color: var(--fp-muted); } html.dark-mode .content-body h1, html.dark-mode .content-body h2, html.dark-mode .content-body h3, html.dark-mode .content-body h4, html.dark-mode .content-body h5, html.dark-mode .content-body h6 { color: var(--fp-heading); } /* Breadcrumb */ html.dark-mode .breadcrumb-style1 .breadcrumb-item a { color: var(--fp-text); } html.dark-mode .breadcrumb-style1 .breadcrumb-item a:hover { color: var(--fp-heading); } /* Tabelas */ html.dark-mode .table { color: var(--fp-text); } html.dark-mode .table th, html.dark-mode .table td { border-color: var(--fp-border); } html.dark-mode .table thead th { color: var(--fp-muted); border-bottom-color: var(--fp-border); } html.dark-mode .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--fp-text); } html.dark-mode .table tfoot, html.dark-mode .table tfoot td { background-color: var(--fp-elevated); color: var(--fp-text); } /* Formulários */ html.dark-mode .form-control, html.dark-mode .custom-file-label { background-color: var(--fp-input); border-color: var(--fp-border); color: var(--fp-text); } html.dark-mode .form-control::placeholder { color: #5d6b7d; } html.dark-mode .form-control:focus { background-color: var(--fp-input); border-color: #0168fa; } html.dark-mode .form-group label { color: #aeb7c4; } html.dark-mode .input-group-text { background-color: #161b22; border-color: var(--fp-border); color: var(--fp-muted); } /* Swatches de ícone (categorias) */ html.dark-mode .icon-swatch { background-color: var(--fp-input); border-color: var(--fp-border); color: var(--fp-muted); } html.dark-mode .icon-swatch:hover { border-color: var(--fp-muted); color: var(--fp-text); } html.dark-mode .icon-swatch:has(input:checked) { border-color: #4f9cff; background-color: rgba(79, 156, 255, 0.16); color: #6aa9ff; } /* Modais */ html.dark-mode .modal-content { background-color: var(--fp-elevated); color: var(--fp-text); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: var(--fp-border); } html.dark-mode .modal-header .close { color: var(--fp-text); text-shadow: none; } /* Dropdowns */ html.dark-mode .dropdown-menu { background-color: var(--fp-elevated); border-color: var(--fp-border); } html.dark-mode .dropdown-item { color: var(--fp-text); } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--fp-heading); } html.dark-mode .dropdown-divider { border-color: var(--fp-border); } /* Select2 — renderiza DOM próprio, fica branco se não tratado */ html.dark-mode .select2-container--default .select2-selection--single, html.dark-mode .select2-container--default .select2-selection--multiple { background-color: var(--fp-input); border-color: var(--fp-border); } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--fp-text); } html.dark-mode .select2-dropdown { background-color: var(--fp-elevated); border-color: var(--fp-border); } html.dark-mode .select2-search--dropdown .select2-search__field { background-color: var(--fp-input); border-color: var(--fp-border); color: var(--fp-text); } html.dark-mode .select2-results__option { color: var(--fp-text); } html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #0168fa; } /* Badges, empty state, limite e breadcrumb */ html.dark-mode .badge-light { background-color: #2b333d; color: #cbd5e1; } html.dark-mode .empty-state h6 { color: #aeb7c4; } html.dark-mode .empty-state p { color: var(--fp-muted); } html.dark-mode .limit-bar { background-color: #2b333d; } html.dark-mode .breadcrumb-style1 .breadcrumb-item.active { color: var(--fp-muted); } /* ============================================================ RESPONSIVIDADE — ajustes em mobile ============================================================ */ @media (max-width: 576px) { .content-body > .container { padding-left: 1rem; padding-right: 1rem; } .card-header { padding: 0.75rem 1rem; } .card-body { padding: 1rem; } .alert-flash { top: 0.75rem; right: 0.75rem; left: 0.75rem; min-width: unset; max-width: unset; } }