/* * Base theme variables * * The application originally shipped only a dark theme defined on the * :root scope. To support both a light and dark appearance and allow * switching between them at runtime we keep the existing dark values as * the default and provide a separate .theme-light class that overrides * these variables with a lighter palette. The dark theme remains the * default so existing pages continue to render as before. When the * .theme-light class is added to or the colours below * are used instead. */ :root { /* Dark theme (default) */ --bg: #0f172a; --panel: #1e293b; --text: #f8fafc; --text-muted: #94a3b8; --muted: #9ca3af; --primary: #3b82f6; /* Azul moderno */ --primary-600: #2563eb; --good: #10b981; /* Esmeralda SaaS */ --bad: #ef4444; --danger: #ef4444; --border: #334155; --card: var(--panel); --input-bg: #0f172a; --table-stripe: rgba(255, 255, 255, 0.02); --table-hover: rgba(255, 255, 255, 0.05); /* Variáveis Base (Tipografia e Estrutura) */ --font-family-base: 'Inter', system-ui, -apple-system, sans-serif; --card-radius: 12px; --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); /* Sidebar defaults (Dark) */ --sidebar-bg: #0f172a; --sidebar-border: #1e293b; --sidebar-text: #94a3b8; --sidebar-hover-bg: #1e293b; --sidebar-hover-text: #f8fafc; --sidebar-active-bg: rgba(59, 130, 246, 0.12); --sidebar-active-text: #93c5fd; --sidebar-active-border: #3b82f6; --sidebar-section-text: #64748b; /* Master/Admin palette (Dark) */ --master-primary: #6f42c1; --master-accent: #dcb0ff; --master-active-bg: rgba(111, 66, 193, 0.12); --master-active-text: #dcb0ff; --master-active-border: #6f42c1; } /* Light theme overrides. When the 'theme-light' class is set on * document.documentElement the variables below override the defaults * defined above. These values are chosen to contrast well on light * backgrounds and mirror the design of the dashboard mock‑up provided by * the user. */ .theme-light { --bg: #f8fafc; /* Fundo off-white clássico SaaS */ --panel: #ffffff; --card: #ffffff; --text: #0f172a; --text-muted: #64748b; --muted: #64748b; --primary: #4f46e5; /* Indigo intenso SaaS */ --primary-600: #4338ca; --good: #10b981; --bad: #ef4444; --border: #e2e8f0; --input-bg: #ffffff; --table-stripe: rgba(0, 0, 0, 0.015); --table-hover: rgba(0, 0, 0, 0.03); /* Ajuste de Sombras para cartões brancos */ --card-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02); --sidebar-bg: #ffffff; --sidebar-border: #e2e8f0; --sidebar-text: #64748b; --sidebar-hover-bg: #f1f5f9; --sidebar-hover-text: #0f172a; --sidebar-active-bg: rgba(79, 70, 229, 0.08); --sidebar-active-text: #4f46e5; --sidebar-active-border: #4f46e5; --sidebar-section-text: #94a3b8; /* Master/Admin palette (Light) */ --master-primary: #6f42c1; --master-accent: #6f42c1; --master-active-bg: rgba(111, 66, 193, 0.08); --master-active-text: #6f42c1; --master-active-border: #6f42c1; } /* Force theme toggle icon to be visible */ #btnTheme, .theme-toggle { color: var(--text) !important; } #btnTheme:hover { color: var(--primary) !important; } /* Topbar user name and links specific fix */ .topbar .nav-link, .topbar .dropdown-toggle, .topbar span { color: var(--text); } /* Modal dark theme: força modais a usar o tema escuro */ .modal-content { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } * { box-sizing: border-box; } /* * Base styles * * Set the default font to Titillium Web (loaded via a Google Fonts link in the * header). We include a series of fallbacks to ensure the text still * renders if the font fails to load. The colour palette and gradient * backgrounds remain unchanged from the original dark theme. */ body { margin: 0; font-family: var(--font-family-base); color: var(--text); background: var(--bg); letter-spacing: -0.01em; } /* When the theme-light class is applied to the element we need to * override the dark gradient on the body. Using a descendant selector * ensures we only apply this in the light theme. */ .theme-light body { background: var(--bg); } .theme-light .topbar { background: transparent; } .theme-light .topbar-inner { background: var(--panel); } /* Charts: prevent canvas elements from growing indefinitely. We * constrain the height of canvases inside cards so that Chart.js * respects the allocated space and avoids causing the page to * scroll endlessly. */ .card canvas { /* Maximum height for dashboard charts. Adjust as needed for other charts elsewhere in the application. */ max-height: 240px; width: 100%; } .canvas-chart { max-height: 240px; } .container { max-width: 1100px; margin: 0 auto; padding: 16px; } .topbar { background: transparent; border-bottom: none; color: var(--text); padding: 10px 20px 0 20px; z-index: 1030; position: relative; } .topbar-inner { background: var(--panel); border-radius: 10px; padding: 6px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05); border: 1px solid var(--border); width: 100%; margin-bottom: 14px; min-height: 52px; } .topbar .navbar-brand { color: var(--text); } .topbar h1 { margin: 0 0 8px 0; font-size: 18px; color: var(--text); } .topbar nav a { color: var(--muted); margin-right: 16px; text-decoration: none; } .topbar nav a:hover { color: var(--text); } /* Navigation styles using Bootstrap classes */ .topbar nav a.nav-link { color: var(--muted); margin-right: 12px; text-decoration: none; text-transform: uppercase; font-size: 14px; } /* * Highlight the active navigation link. We give it a contrasting * background colour derived from the primary accent and switch the * foreground to the page background colour. Rounded corners tie the * link into the rest of the UI. Non-active links remain muted and * underline-free. */ .topbar nav a.nav-link.active { color: var(--bg); background-color: var(--primary); border-radius: 6px; } .topbar nav a.nav-link:hover { color: var(--text); } /* Dropdown menu styling for dark theme */ .dropdown-menu { background: var(--panel); border: 1px solid var(--border); } .dropdown-menu .dropdown-item { color: var(--text); } .dropdown-menu .dropdown-item:hover { background: var(--border); color: var(--text); } .panel { background: var(--panel); border: 1px solid var(--border); /* Slightly softer corners for panels */ border-radius: 6px; padding: 16px; margin-bottom: 16px; } .panel h2 { margin-top: 0; font-size: 18px; } .grid { display: grid; gap: 16px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* Explicit Table Styling for Light/Dark Modes */ .table { color: var(--text); border-color: var(--border); } .table> :not(caption)>*>* { background-color: transparent; /* Remove default Bootstrap backgrounds */ color: var(--text); border-bottom-color: var(--border); } .table-striped>tbody>tr:nth-of-type(odd) { background-color: var(--table-stripe) !important; color: var(--text); } .table-hover>tbody>tr:hover { background-color: var(--table-hover) !important; color: var(--text); } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } .table { width: 100%; border-collapse: collapse; background-color: inherit; --bs-table-bg: inherit; } .table thead th.sortable { cursor: pointer; position: relative; } .table thead th.sortable::after { content: '⇅'; opacity: .35; margin-left: 6px; font-size: .8em; } .table thead th.asc::after { content: '▲'; opacity: 1; } .table thead th.desc::after { content: '▼'; opacity: 1; } .table th, .table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; color: var(--text); font-size: smaller; font-weight: 300; } /* * Badge styles * * The badges indicate receipt or expense categories and appear on both * dark and light table backgrounds. To ensure they remain legible when * rendered on a white table row (e.g. Bootstrap tables), we provide a * subtle translucent background derived from the text colour. We keep * the pill shape by using a large border radius. */ .badge { display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 999px; border: 1px solid var(--border); } .badge.receita { color: #16a34a; border-color: #14532d; background-color: rgba(22, 163, 74, 0.15); } .badge.despesa { color: #f87171; border-color: #7f1d1d; background-color: rgba(248, 113, 113, 0.15); } /* Helper text contrast */ .form-text, .text-muted { color: var(--muted) !important; } /* Ensure headings and strong text are readable in dark mode */ h1, h2, h3, h4, h5, h6, strong, b { color: var(--text); } /* Suggestion dropdowns (dark) */ .suggest-box { background: #0f172a; border: 1px solid var(--border); color: var(--text); border-radius: .375rem; } .suggest-item { padding: .25rem .5rem; cursor: pointer; } .suggest-item:hover { background: #1f2937; } .input, input, select { width: 100%; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); padding: 10px; /* Inputs and selects should use a smaller corner radius */ border-radius: 4px; } label { text-transform: uppercase; font-size: x-small; } .btn-primary, button[type="submit"], .btn-action { background: var(--primary); border: none; padding: 10px 14px; border-radius: 4px; color: #06280f; /* Cor do texto no botão verde */ font-weight: 700; cursor: pointer; display: inline-block; text-decoration: none; } /* Remove default styles from generic buttons to prevent conflicts with icons/toggles */ button { background: transparent; border: none; cursor: pointer; } .btn.danger { background: var(--danger); color: #2a0b0b; } .btn.link { background: transparent; color: var(--text); text-decoration: underline; border: 0; padding: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } /* * Icon buttons used in tables (edit, convert, delete). They should * appear as plain icons without any button chrome. The .btn-link class * provided by Bootstrap adds padding and a coloured background on * hover/focus; we override those behaviours here. */ .btn-link { background-color: transparent !important; border: none !important; padding: 0; box-shadow: none; } .btn-link:hover, .btn-link:focus { background-color: transparent !important; box-shadow: none; } /* Icon buttons (edit/delete etc.) have no background by default and a subtle hover effect. */ .btn-icon { background: transparent; border: none; padding: 4px; border-radius: 6px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-icon:hover { background: rgba(255, 255, 255, 0.05); color: var(--primary); } /* Alerts for flash messages * * We define custom colours for success and danger alerts to fit the * dark theme. Alerts have gentle corners and include padding to * separate from other content. */ .alert { border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; } .alert-success { background-color: rgba(34, 197, 94, 0.2); border: 1px solid #14532d; color: #16a34a; } .alert-danger { background-color: rgba(239, 68, 68, 0.2); border: 1px solid #7f1d1d; color: #ef4444; } /* * Responsividade e usabilidade * * Para melhorar a experiência em dispositivos menores, ajustamos o layout * do cabeçalho, grades e tabelas. A barra de navegação passa a ocupar * 100% da largura e os links quebram em várias linhas. O grid passa a * utilizar uma única coluna e as tabelas permitem rolagem horizontal. */ /* * Dashboard components * * A new dashboard layout was introduced to mirror the mock‑up provided by * the user. These classes define cards, key performance indicators (KPIs), * compact tables and progress bars that work on both the dark and light * themes. They intentionally avoid conflicting with existing styles by * using specific class names instead of reusing .panel or Bootstrap * components. Feel free to reuse them elsewhere in the application. */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 24px; /* Padding mais amplo e limpo */ box-shadow: var(--card-shadow); margin-bottom: 24px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .card-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--text); } .card-sub { font-size: 0.85rem; color: var(--muted); } .kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; border-radius: var(--card-radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--card-shadow); transition: transform 0.2s ease; } .kpi:hover { transform: translateY(-2px); } .kpi .value { font-size: 2rem; /* Mais destaque (SaaS) */ font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; } .kpi .delta { font-weight: 600; font-size: 0.85rem; padding: 4px 10px; border-radius: 4px; /* Ajuste para o padrao 4px */ display: inline-flex; align-items: center; } .kpi .delta.up { color: var(--good); background: rgba(16, 185, 129, 0.1); } .kpi .delta.down { color: var(--bad); background: rgba(239, 68, 68, 0.1); } .progress-wrap { margin-top: 14px; } .progress-wrap .d-flex span { font-size: 0.9rem; font-weight: 500; color: var(--text); margin-bottom: 6px; display: block; } .progress { height: 12px; background: var(--border); border-radius: 4px; /* Ajuste para o padrao 4px */ overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); } .progress-bar { height: 12px; background: var(--primary); border-radius: 4px; /* Ajuste para o padrao 4px */ transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* A more compact table for listing recent transactions. Use this in * conjunction with .table-responsive. */ .table-compact tr { border-bottom: 1px solid var(--border); } .table-compact th, .table-compact td { padding: 8px 6px; font-size: 0.92rem; color: var(--text); } /* User Profile */ .user-profile-pill { background: transparent; border-radius: 8px; padding: 4px 8px 4px 4px; display: inline-flex; align-items: center; transition: all 0.2s ease; } .user-profile-pill:hover { background: var(--border); } .user-profile-pill span { font-size: 0.875rem; font-weight: 500; } /* Brand Logo */ .btn-brand-logo { font-size: 1.1rem; font-weight: 700; text-decoration: none; flex-shrink: 0; } /* Avatar cover */ .avatar-cover { object-fit: cover; } /* ===== Theme Switch (icons inside the track) ===== */ .topbar-theme-switch { display: inline-flex; align-items: center; cursor: pointer; } .topbar-theme-switch .theme-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 64px; height: 30px; background: #1c2a3a; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 0 7px; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; flex-shrink: 0; gap: 0; } .theme-light .topbar-theme-switch .theme-track { background: #dde9fb; border-color: #c5d8f5; } /* The sliding knob */ .topbar-theme-switch .theme-knob { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #94a3b8; left: 3px; top: 50%; transform: translateY(-50%); transition: left 0.28s cubic-bezier(.4, 0, .2, 1), background 0.28s ease; z-index: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .theme-light .topbar-theme-switch .theme-knob { left: calc(64px - 27px); background: #4f46e5; } /* Icons sit inside the track, above the knob in z-order */ .topbar-theme-switch .ti-moon, .topbar-theme-switch .ti-sun { font-size: 0.72rem; position: relative; z-index: 2; pointer-events: none; transition: color 0.3s; line-height: 1; } /* Dark mode: moon lit, sun dim */ .topbar-theme-switch .ti-moon { color: #e2e8f0; } .topbar-theme-switch .ti-sun { color: #475569; } /* Light mode: sun lit, moon dim */ .theme-light .topbar-theme-switch .ti-moon { color: #94a3b8; } .theme-light .topbar-theme-switch .ti-sun { color: #f59e0b; } /* ===== Topbar Search ===== */ .topbar-search-wrap { flex: 1; max-width: 320px; margin: 0 auto; } .topbar-search { position: relative; display: flex; align-items: center; } .topbar-search input { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.85rem; padding: 5px 12px 5px 34px; width: 100%; outline: none; transition: border-color 0.2s; height: 34px; } .topbar-search input:focus { border-color: var(--primary); } .topbar-search input::placeholder { color: var(--text-muted); } .topbar-search .search-icon { position: absolute; left: 10px; color: var(--text-muted); font-size: 0.85rem; pointer-events: none; } .topbar-search .search-kbd { position: absolute; right: 8px; font-size: 0.65rem; color: var(--text-muted); background: var(--border); border-radius: 4px; padding: 1px 5px; pointer-events: none; } /* ===== Notification Bell ===== */ .topbar-notif { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--border); cursor: pointer; color: var(--text); transition: background 0.2s; flex-shrink: 0; } .topbar-notif:hover { background: var(--border); } .topbar-notif .notif-badge { position: absolute; top: -5px; right: -5px; background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; border: 2px solid var(--panel); } .topbar-notif .notif-badge:empty, .topbar-notif .notif-badge[data-count="0"] { display: none; } @media (max-width: 768px) { /* Topbar: coluna única e alinhamento à esquerda */ .topbar .container { flex-direction: column; align-items: flex-start; } .topbar nav { width: 100%; margin-top: 8px; flex-wrap: wrap; } .topbar nav a.nav-link { margin-right: 8px; margin-bottom: 4px; } /* Grids colapsam em uma coluna */ .grid-3, .grid-2 { grid-template-columns: 1fr; } /* Tabelas horizontais com scroll para não quebrar layout */ .table { display: block; overflow-x: auto; white-space: nowrap; } } /* Sidebar layout */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 220px; background: var(--sidebar-bg); border-right: none; } .sidebar .nav-link { color: var(--sidebar-text); padding: .6rem 1rem; display: flex; align-items: center; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; margin: 1px 8px 1px 0; transition: all 0.15s ease; font-size: 0.875rem; } .sidebar .nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); border-left-color: var(--sidebar-active-border, var(--primary)); font-weight: 500; } .sidebar .nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-hover-text); } .sidebar .nav-section { font-size: .65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sidebar-section-text); padding: .75rem 1rem .25rem; } /* Sidebar brand area (logo at top) */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: none; font-size: 1.15rem; } .sidebar-brand .brand-icon { color: var(--master-primary, var(--primary)); } .sidebar-brand .brand-text { color: var(--text); font-weight: 700; } .sidebar-brand .brand-accent { color: var(--master-primary, var(--primary)); } /* Sidebar footer (user profile at bottom) */ .sidebar-footer { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: none; margin-top: auto; } .sidebar-footer .footer-name { display: block; font-weight: 600; font-size: 0.875rem; color: var(--text); } .sidebar-footer .footer-role { font-size: 0.75rem; color: var(--muted); } .content, .main-content { flex: 1; min-width: 0; } @media (max-width: 768px) { .sidebar { width: 85vw; } } .sidebar.collapsed { width: 72px; } .sidebar.collapsed .nav-link span { display: none; } .sidebar.collapsed .nav-link i { margin-right: 0 !important; } /* Hide topbar nav when sidebar is active */ body.has-sidebar header.topbar #topNavbar { display: none !important; } /* ==================================================================== * Sidebar Premium Accordion * Classes de cor de ícone por módulo + sub-menu hierárquico * ==================================================================== */ /* Grupo pai clicável */ .sidebar .nav-link[data-bs-toggle="collapse"] { cursor: pointer; } .sidebar .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .sidebar-chevron { transform: rotate(180deg); } .sidebar .nav-link[data-bs-toggle="collapse"] .sidebar-chevron { transition: transform 0.2s ease; font-size: 0.65rem; flex-shrink: 0; opacity: 0.5; } /* Rótulo do grupo pai */ .sidebar .nav-grp-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; } /* Sub-list: tree-view connector (remove border-left do container) */ .sidebar .sidebar-sub-list { list-style: none; padding: 2px 0 4px 0; margin: 0 0 0 2.5rem; border-left: none; } /* Cada li cria o conector em └ com cantoneira arredondada */ .sidebar .sidebar-sub-list li { position: relative; } /* Segmento vertical + braço horizontal curvo (└) */ .sidebar .sidebar-sub-list li::before { content: ''; position: absolute; left: -1rem; top: 0; bottom: 50%; width: 0.7rem; border-left: 1.5px solid rgba(255, 255, 255, 0.13); border-bottom: 1.5px solid rgba(255, 255, 255, 0.13); border-bottom-left-radius: 6px; } /* Continua a linha vertical para baixo (exceto no último item) */ .sidebar .sidebar-sub-list li:not(:last-child)::after { content: ''; position: absolute; left: -1rem; top: 50%; bottom: 0; border-left: 1.5px solid rgba(255, 255, 255, 0.13); } /* Versão light theme (linha mais escura) */ .theme-light .sidebar .sidebar-sub-list li::before, .theme-light .sidebar .sidebar-sub-list li:not(:last-child)::after { border-color: rgba(0, 0, 0, 0.1); } /* Sub-item links */ .sidebar .sidebar-sub-list li>.nav-link { padding: 0.35rem 0.75rem; font-size: 0.82rem; border-radius: 0 6px 6px 0; border-left: none; margin-left: 0; color: var(--sidebar-text); opacity: 0.75; transition: opacity 0.15s, background 0.15s, color 0.15s; } .sidebar .sidebar-sub-list li>.nav-link:hover { opacity: 1; color: var(--sidebar-hover-text); background: var(--sidebar-hover-bg); } .sidebar .sidebar-sub-list li>.nav-link.active { opacity: 1; font-weight: 600; color: var(--sidebar-active-text); background: var(--sidebar-active-bg); border-left: 2px solid var(--sidebar-active-border); margin-left: -2px; } /* ---- Cores dos ícones por módulo ---- */ .nav-icon-dashboard { color: #6366f1; } .nav-icon-financeiro { color: #10b981; } .nav-icon-produtos { color: #3b82f6; } .nav-icon-docs { color: #8b5cf6; } .nav-icon-workflow { color: #f59e0b; } .nav-icon-frota { color: #f97316; } .nav-icon-midia { color: #06b6d4; } .nav-icon-pessoas { color: #ec4899; } .nav-icon-ajustes { color: #94a3b8; } /* ---- Cor do label do grupo pai por módulo ---- */ .nav-label-financeiro { color: #10b981; } .nav-label-docs { color: #8b5cf6; } .nav-label-frota { color: #f97316; } /* ---- Módulo Oficina ---- */ .nav-icon-oficina { color: #e11d48; } .nav-label-oficina { color: #e11d48; } /* ==================================================================== * Admin Dashboard Components (SuperAdmin Panel) * * All components below use CSS variables to ensure correct rendering * in both dark and light themes. No hardcoded colour values are used. * ==================================================================== */ /* Admin Stat Cards */ .admin-stat { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; margin-bottom: 0; } .admin-stat:hover { transform: translateY(-2px); } .admin-stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .admin-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; } .admin-stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 2px; } /* Stat card colour variants (rgba works on both dark/light backgrounds) */ .admin-stat--blue .admin-stat-icon { background: rgba(59, 130, 246, 0.12); color: #3b82f6; } .admin-stat--green .admin-stat-icon { background: rgba(16, 185, 129, 0.12); color: #10b981; } .admin-stat--orange .admin-stat-icon { background: rgba(249, 115, 22, 0.12); color: #f97316; } .admin-stat--purple .admin-stat-icon { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; } /* Admin Quick Action Buttons */ .admin-action-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: all 0.15s ease; } .admin-action-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform: translateY(-1px); text-decoration: none; } /* Admin Charts Row (2-column grid) */ .admin-charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } .admin-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } @media (max-width: 992px) { .admin-charts-row { grid-template-columns: 1fr; } } /* Admin Empty State (chart placeholders) */ .admin-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--muted); text-align: center; } .admin-empty-state i { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; } .admin-empty-state p { font-size: 0.875rem; max-width: 280px; } /* Topbar Search Bar */ .topbar-search { display: flex; align-items: center; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text); gap: 8px; min-width: 240px; transition: border-color 0.15s ease; } .topbar-search:focus-within { border-color: var(--primary); } .topbar-search i { color: var(--muted); font-size: 0.875rem; } .topbar-search input { border: none; background: transparent; outline: none; color: var(--text); flex: 1; font-size: 0.875rem; padding: 2px 0; width: auto; } .topbar-search input::placeholder { color: var(--muted); } .topbar-search kbd { font-size: 0.7rem; padding: 2px 6px; background: var(--border); border-radius: 4px; color: var(--muted); font-family: inherit; line-height: 1.4; } /* Topbar Brand (logo in topbar) */ .topbar-brand { gap: 10px; color: var(--text); } .topbar-brand .brand-icon { color: var(--master-primary, #6f42c1); } .topbar-brand .brand-text { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; } .topbar-brand .brand-accent { color: var(--master-primary, #6f42c1); } /* Sidebar needs flex column for footer to push to bottom */ .sidebar .offcanvas-body { display: flex; flex-direction: column; } .sidebar .offcanvas-body nav { flex: 1; } /* Login Styles moved to assets/css/login.css */ /* Estilos específicos para a página de Contatos em tema escuro (Merged from contatos.css) */ .person-list-header { display: grid; grid-template-columns: 3fr 2fr 1.5fr 100px 100px 140px; gap: 10px; align-items: center; height: 44px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); padding-left: 15px; padding-right: 15px; margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .person-card { display: grid; grid-template-columns: 3fr 2fr 1.5fr 100px 100px 140px; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 15px; margin-bottom: 10px; transition: all 0.2s ease; } .person-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .person-info { display: flex; align-items: center; gap: 12px; } .person-logo { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--input-bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1rem; font-weight: 600; } .person-details { display: flex; flex-direction: column; overflow: hidden; } .person-name { font-weight: 600; color: var(--text); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-doc { font-size: 0.75rem; color: var(--muted); } .person-contact { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--muted); } .person-contact div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-local { font-size: 0.85rem; color: var(--text); } /* Badges */ .badge-tipo { padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; text-align: center; } .tipo-cliente { background: rgba(64, 196, 255, 0.15); color: #40c4ff; } .tipo-parceiro { background: rgba(179, 136, 255, 0.15); color: #b388ff; } .tipo-fornecedor { background: rgba(255, 171, 0, 0.15); color: #ffab00; } .status-ativo { color: var(--accent); font-weight: 500; font-size: 0.85rem; } .status-inativo { color: var(--muted); font-weight: 500; font-size: 0.85rem; } /* Responsive */ @media (max-width: 992px) { .person-list-header { display: none; } .person-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 20px; } .person-info { width: 100%; margin-bottom: 5px; } .person-contact, .person-local { font-size: 0.9rem; } /* Reposition badges and actions */ .center-mobile { display: flex; gap: 10px; align-items: center; width: 100%; justify-content: space-between; } .person-actions { position: absolute; top: 15px; right: 15px; } } /* Utilities extracted from inline styles */ .ws-nowrap { white-space: nowrap !important; } .text-end { text-align: right !important; } /* Custom Dark Modal Overrides */ .modal-custom-dark .modal-content { background: #111827; border: 1px solid var(--border); color: var(--text); } .modal-custom-dark .modal-header { border-bottom: 1px solid var(--border); } .modal-custom-dark .modal-footer { border-top: 1px solid var(--border); } body.has-sidebar header.topbar .navbar-toggler { display: none !important; } .panel-auth { max-width: 500px; margin: 40px auto; } /* User Management Styles */ .user-list-header { display: grid; grid-template-columns: 3fr 2fr 1.5fr 1.5fr 1.5fr 100px; gap: 10px; align-items: center; height: 44px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); padding-left: 15px; padding-right: 15px; margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .user-card { display: grid; grid-template-columns: 3fr 2fr 1.5fr 1.5fr 1.5fr 100px; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 15px; margin-bottom: 10px; transition: all 0.2s ease; } .user-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .user-info { display: flex; align-items: center; gap: 12px; } .user-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--input-bg); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1rem; font-weight: 600; } .user-details { display: flex; flex-direction: column; overflow: hidden; } .user-name { font-weight: 400; color: var(--text); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-email { font-size: 0.85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* User Badges */ .user-role-badge { padding: 4px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; text-align: center; display: inline-block; } .role-master { background: rgba(179, 136, 255, 0.15); color: #b388ff; } .role-user { background: rgba(64, 196, 255, 0.15); color: #40c4ff; } .status-badge { padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; display: inline-block; } .status-verified { color: var(--accent); background: rgba(34, 197, 94, 0.1); } .status-pending { color: var(--muted); background: rgba(255, 255, 255, 0.05); } /* Responsive Users */ @media (max-width: 992px) { .user-list-header { display: none; } .user-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 20px; } .user-info { width: 100%; margin-bottom: 5px; } .user-card>div { width: 100%; } } /* DARK MODE OVERRIDES FOR FORMS & TABLES */ /* Fix Input/Select backgrounds */ input.form-control, textarea.form-control, select.form-select, input.form-control:focus, textarea.form-control:focus, select.form-select:focus, .input-group-text, input[type='date'], input[type='text'], input[type='number'], textarea { background-color: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border); } /* Specific placeholder fix */ ::placeholder { color: var(--muted) !important; opacity: 0.7; } /* Fix Tables links (blue on dark background is hard to read) */ table a { color: var(--text); text-decoration: none; font-weight: 500; } table a:hover { color: var(--primary); text-decoration: underline; } /* Alerts consistency */ .alert-info { background-color: rgba(64, 196, 255, 0.15); /* light blue transparent */ border: 1px solid rgba(64, 196, 255, 0.3); color: #40c4ff; } .alert-warning { background-color: rgba(255, 171, 0, 0.15); border: 1px solid rgba(255, 171, 0, 0.3); color: #ffab00; } /* Fix Modal Titles in Dark Mode */ .modal-title { color: var(--text); } /* Fix Contract Editor Box */ .tox .tox-edit-area__iframe { background: #fff !important; /* TinyMCE usually needs white unless configured otherwise */ } /* FORCE DARK MODE CONTRAST FIXES */ /* Fix Labels visibility */ .form-label, label { color: var(--text) !important; font-weight: 600; } /* Fix Input Text Color & Background (Force Specificity) */ body.dark-mode input.form-control, body.dark-mode select.form-select, body.dark-mode textarea, .modal-content input, .modal-content select, .modal-content textarea { background-color: var(--input-bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } /* Fix Editor Area */ .tox .tox-edit-area__iframe { background-color: white !important; /* Keep white for 'paper' feel */ } /* But ensure the CONTAINER is dark */ .tox-tinymce { border: 1px solid var(--border) !important; } /* Fix Alerts Text Color */ .alert-info .alert-heading, .alert-info p, .alert-info li { color: #0c5460; /* return to readable dark teal for light blue bg */ } /* Or if we want dark mode alert: */ .alert-info { background-color: rgba(64, 196, 255, 0.1); color: #bae6fd !important; border-color: rgba(64, 196, 255, 0.2); } /* Fix Table Headers */ .table thead th { color: var(--muted) !important; background-color: var(--panel); border-bottom: 1px solid var(--border); } /* DARK MODE SPECIFIC FIXES (Without breaking Light Mode) */ /* 1. Labels & Headers - Applies only when NOT in light theme */ :root:not(.theme-light) .form-label, :root:not(.theme-light) label, :root:not(.theme-light) .card-header, :root:not(.theme-light) h1, :root:not(.theme-light) h2, :root:not(.theme-light) h3, :root:not(.theme-light) h4, :root:not(.theme-light) h5, :root:not(.theme-light) h6 { color: var(--text) !important; } /* 2. Inputs Backgrounds - Dark Mode Only */ :root:not(.theme-light) input.form-control, :root:not(.theme-light) select.form-select, :root:not(.theme-light) textarea.form-control, :root:not(.theme-light) .input-group-text { background-color: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } /* 3. Table Headers - Dark Mode Only */ :root:not(.theme-light) .table thead th { color: var(--muted) !important; background-color: var(--panel) !important; border-bottom: 1px solid var(--border); } /* 4. Alert Info - Dark Mode Only */ :root:not(.theme-light) .alert-info { background-color: rgba(14, 165, 233, 0.15) !important; border-color: rgba(14, 165, 233, 0.3) !important; color: #bae6fd !important; } :root:not(.theme-light) .alert-info strong, :root:not(.theme-light) .alert-info code { color: #e0f2fe !important; } /* 5. Placeholder Opacity in Dark Mode */ :root:not(.theme-light) ::placeholder { color: var(--muted) !important; opacity: 0.6; } /* Fix Contract List Links (Dark Mode) */ :root:not(.theme-light) .table td a.text-body { color: var(--text) !important; } :root:not(.theme-light) .table td a.text-body:hover { color: var(--primary) !important; } /* DARK MODE GLOBAL MODAL FIXES */ /* Invert close buttons in Dark Mode, BUT ignore those already white (.btn-close-white) */ :root:not(.theme-light) .modal-content .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(200%); } /* * FLIP CARDS & GRID REFINEMENT * Specific styles for the Datagrid 'Grid' view (Cards) */ .user-card-grid { background-color: transparent; perspective: 1000px; /* Enable 3D space */ min-height: 280px; height: 100%; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 16px; } .user-card-grid:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background-color: var(--panel); } /* Front Face */ .flip-card-front { color: var(--text); } .flip-card-front .user-avatar { width: 80px; height: 80px; margin-bottom: 16px; border: 2px solid var(--input-bg); } .flip-card-front .user-name { font-size: 1.1rem; margin-bottom: 4px; } .flip-card-front .user-role { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; font-weight: 500; } .flip-card-front .user-location { font-size: 0.8rem; color: var(--muted); opacity: 0.8; } /* Back Face */ .flip-card-back { color: var(--text); transform: rotateY(180deg); background-color: var(--input-bg); /* Slightly darker/different for contrast */ gap: 12px; } /* TOOLBAR REFINEMENTS (Rounded Style) */ .toolbar-pill .form-control, .toolbar-pill .form-select, .toolbar-pill .input-group-text, .toolbar-pill .btn { border-radius: 8px !important; /* Soft rounded corners */ font-size: 0.9rem; } .toolbar-pill .form-control:focus, .toolbar-pill .form-select:focus { box-shadow: none; border-color: var(--primary); } .toolbar-pill .input-group-text { background: transparent; padding-right: 0; } .toolbar-pill .form-control { border-left: 0; padding-left: 8px; } /* Toggle Switcher Style (Segmented Control look) */ .view-switcher .btn { border: 1px solid var(--border); color: var(--muted); background: var(--panel); } .view-switcher .btn.active { background: var(--input-bg); color: var(--text); border-color: var(--border); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }