/* * 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; --radius-max: 12px; /* Nenhum elemento (exceto círculos) deve passar disso */ --radius-badge: 4px; --radius-btn: 6px; --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: 6px; 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: var(--radius-badge) !important; 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: 4px; padding: 4px 8px 4px 4px; display: inline-flex; align-items: center; gap: 8px; 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; margin-right: 5px } /* ===== 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); } /* Sidebar close button — branco em dark, padrão em light */ :root:not(.theme-light) .sidebar-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Sidebar user footer (mobile offcanvas) */ .sidebar-user-footer { padding: 16px; border-top: 1px solid var(--border); margin-top: auto; } .sidebar-user-footer .footer-name { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text); } .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 — cor somente no dark mode (via :root:not(.theme-light) abaixo) */ :root:not(.theme-light) .alert-info { background-color: rgba(64, 196, 255, 0.15); border: 1px solid rgba(64, 196, 255, 0.3); } .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 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: var(--card-radius); } .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: var(--card-radius); 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); } /* ========================================================= PDV - Talão Térmico (Venda Balcão - Oficina) Usa variáveis CSS do Bootstrap 5 para adaptar ao tema ========================================================= */ /* Container principal do talão */ .pdv-talao { font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; background-color: var(--bs-body-bg); border: 1px dashed var(--bs-border-color); border-radius: 4px; padding: 14px 12px; color: var(--bs-body-color); line-height: 1.5; } /* Linha de item do talão */ .pdv-talao .talao-item { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; padding: 3px 0; border-bottom: 1px dotted var(--bs-border-color-subtle); } .pdv-talao .talao-item:last-of-type { border-bottom: none; } /* Nome do produto + quantidade */ .pdv-talao .talao-item-desc { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } /* Preenchimento de pontos (.....) entre nome e valor */ .pdv-talao .talao-dots { flex: 1; border-bottom: 1px dotted var(--bs-border-color); margin: 0 4px 3px; min-width: 20px; } /* Subtotal do item */ .pdv-talao .talao-item-subtotal { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; min-width: 70px; } /* Linha separadora do TOTAL — dupla e dashed */ .pdv-talao .talao-total-sep { border: none; border-top: 2px dashed var(--bs-border-color); margin: 10px 0 6px; } /* Bloco do TOTAL */ .pdv-talao .talao-total-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.03em; padding-top: 4px; } /* Ação de remover item (botão lixo) dentro do talão */ .pdv-talao .talao-remove { background: none; border: none; cursor: pointer; padding: 0 0 0 6px; color: var(--bs-danger); line-height: 1; font-size: 0.8rem; opacity: 0.7; transition: opacity 0.15s; } .pdv-talao .talao-remove:hover { opacity: 1; } /* Campo de quantidade inline no talão */ .pdv-talao .talao-qty-input { width: 50px; text-align: center; font-family: 'Courier New', monospace; font-size: 0.8rem; padding: 1px 4px; height: auto; } /* Mensagem vazia */ .pdv-talao .talao-empty { text-align: center; color: var(--bs-secondary-color); font-style: italic; padding: 12px 0; } /* ========================================================= Impressão do Talão — esconde tudo exceto #areaTalaoImpressao ========================================================= */ @media print { body * { visibility: hidden !important; } #areaTalaoImpressao, #areaTalaoImpressao * { visibility: visible !important; } #areaTalaoImpressao { position: fixed; top: 0; left: 0; width: 80mm; /* Largura padrão de impressora térmica 80mm */ padding: 8px; font-family: 'Courier New', Courier, monospace; font-size: 11px; color: #000 !important; background: #fff !important; } /* Esconde botão de imprimir na hora de imprimir */ .pdv-no-print { display: none !important; } } /* ========================================================================== SweetAlert2 & SomaAlert Theme Interop Automático: Herda --panel e --text compatíveis com Light/Dark nativo. ========================================================================== */ /* Glassmorphism Backdrop */ .swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; } .soma-swal-popup { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .swal2-popup.soma-swal-popup { border-radius: 12px !important; } .soma-swal-popup .swal2-title, .soma-swal-popup .swal2-html-container { color: var(--text) !important; } /* Toast container override */ .soma-swal-toast { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .soma-swal-toast .swal2-title { color: var(--text) !important; } /* ── Notification toast (SomaAlert.notif) ──────────────────────────────── */ .soma-swal-notif-toast { background: var(--panel) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--bs-primary, #3b82f6) !important; border-radius: 10px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .12) !important; min-width: 300px !important; max-width: 380px !important; padding: 0 !important; cursor: pointer; } .soma-swal-notif-toast .swal2-html-container { margin: 0 !important; padding: 0 !important; overflow: visible !important; } .soma-notif-toast-body { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; } .soma-notif-toast-icon { font-size: 1.1rem; color: var(--bs-primary, #3b82f6); flex-shrink: 0; margin-top: 1px; } .soma-notif-toast-content { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; } .soma-notif-toast-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #888); line-height: 1; } .soma-notif-toast-text { font-size: 0.85rem; color: var(--text, #111); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .soma-notif-toast-extra { font-size: 0.75rem; color: var(--bs-primary, #3b82f6); font-weight: 500; margin-top: 1px; } /* ============================================================ * CSP Phase 5 — SOMA utility classes * Substitui style="" inline frequentes em views PHP. * Não usa !important salvo onde Bootstrap sobrepõe. * ============================================================ */ /* Cores via variáveis CSS */ .c-muted { color: var(--muted); } .c-text { color: var(--text); } .c-border { color: var(--border); } .c-master-primary { color: var(--master-primary); } .c-master-accent { color: var(--master-accent); } /* Fundos */ .bg-panel { background: var(--panel); } .bg-border { background: var(--border); } .bg-dark-input { background: #111827; border: 1px solid var(--border); color: var(--text); } .bg-panel-brd { background: var(--panel); border: 1px solid var(--border); } .bg-border-text { background: var(--border); color: var(--text); } /* Bordas */ .brd { border: 1px solid var(--border); } .brd-t { border-top: 1px solid var(--border); } .brd-b { border-bottom: 1px solid var(--border); } .brd-c { border-color: var(--border); } /* Tamanhos de fonte (rem) — nomes: fz-NNN onde NNN = valor × 100 */ .fz-55 { font-size: .55rem; } .fz-58 { font-size: .58rem; } .fz-60 { font-size: .60rem; } .fz-65 { font-size: .65rem; } .fz-68 { font-size: .68rem; } .fz-70 { font-size: .70rem; } .fz-72 { font-size: .72rem; } .fz-75 { font-size: .75rem; } .fz-76 { font-size: .76rem; } .fz-78 { font-size: .78rem; } .fz-80 { font-size: .80rem; } .fz-82 { font-size: .82rem; } .fz-85 { font-size: .85rem; } .fz-90 { font-size: .90rem; } .fz-95 { font-size: .95rem; } .fz-105 { font-size: 1.05rem; } .fz-110 { font-size: 1.10rem; } .fz-150 { font-size: 1.50rem; } .fz-200 { font-size: 2rem; } .fz-250 { font-size: 2.5rem; } .fz-300 { font-size: 3rem; } .fz-350 { font-size: 3.5rem; } /* Visibilidade sem !important — JS pode sobrescrever com style.display */ .soma-hidden { display: none; } /* Cursor */ .cp { cursor: pointer; } /* Object-fit */ .obj-cover { object-fit: cover; } .obj-contain { object-fit: contain; } /* Flex utils */ .flex-2 { flex: 2; } /* Dimensões fixas frequentes */ .wh-24 { width: 24px; height: 24px; } .wh-32 { width: 32px; height: 32px; } .wh-40 { width: 40px; height: 40px; } .wh-48 { width: 48px; height: 48px; } .wh-56 { width: 56px; height: 56px; } .wh-80 { width: 80px; height: 80px; } /* Max-height */ .mxh-30 { max-height: 30px; } .mxh-36 { max-height: 36px; } .mxh-40 { max-height: 40px; } .mxh-48 { max-height: 48px; } .mxh-60 { max-height: 60px; } .mxh-80 { max-height: 80px; } .mxh-100 { max-height: 100px; } /* Larguras percentuais não cobertas pelo Bootstrap */ .w-0-pct { width: 0%; } .w-18 { width: 18%; } .w-30 { width: 30%; } .w-32 { width: 32%; } .w-40 { width: 40%; } .w-55 { width: 55%; } /* Fallback/Empty state */ .fallback-page { font-family: sans-serif; text-align: center; padding: 80px; } .empty-panel { padding: 20px; text-align: center; color: var(--muted, #888); font-size: .8rem; } /* Utilitários adicionais */ .bg-bg { background: var(--bg); } .bg-bg-brd { background: var(--bg); border: 1px solid var(--border); } .ls-wide { letter-spacing: .08em; } .card-no-top { border-top: none !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .font-preview { background: var(--panel); border: 1px solid var(--border); color: var(--text); min-height: 52px; transition: font-family 0.3s; } .btn-master { background: var(--master-primary); color: #fff; } /* Spinners com tamanho fixo */ .spinner-22 { width: 22px !important; height: 22px !important; } .spinner-24 { width: 24px !important; height: 24px !important; } /* Modais Bootstrap — bordas no tema escuro */ .modal-header, .modal-footer { border-color: var(--border) !important; } /* Dashboard — gráfico de donut e legenda */ .cat-legend-scroll { max-height: 250px; overflow-y: auto; overflow-x: hidden; } .chart-container { height: 180px; } .chart-svg { max-height: 180px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); overflow: visible; } .chart-center-label { font-size: 1.5rem; letter-spacing: -0.5px; } .chart-slice { transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); cursor: pointer; transform-origin: center; } .chart-slice:hover { transform: scale(1.05); } .legend-label { max-width: 75%; font-size: 0.85rem; } .legend-pct { font-size: 0.85rem; } .legend-track { height: 6px; border-radius: 4px; background-color: var(--border); box-shadow: none; } .legend-bar { border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════ Fase 5 CSP — inline styles → classes (layouts tenant/master + notif) ═══════════════════════════════════════════════════════════════════ */ /* Impersonate banner (tenant layout) */ .impersonate-banner { z-index: 10000; position: sticky; top: 0; font-size: .95rem; background: #dc3545 !important; color: #fff !important; } /* Logo img constraint */ .btn-brand-logo img { width: auto; max-width: 180px; } /* Readonly search input */ .topbar-search input[readonly] { cursor: pointer; } /* Notification dropdown panel */ .notif-dropdown-menu { width: 320px; max-height: 480px; overflow-y: auto; } /* Extra-small role badge */ .badge--xs { font-size: .58rem !important; font-weight: 500 !important; border-radius: 3px !important; width: fit-content; } /* Master topbar min-height */ .topbar .container-fluid { min-height: 56px; } /* Master sidebar offcanvas header border */ .sidebar-offcanvas-header { border-bottom: 1px solid var(--sidebar-border); } /* Master avatar placeholders */ .master-avatar-placeholder { width: 34px; height: 34px; background: var(--master-active-bg); color: var(--master-primary); } .master-avatar-placeholder-lg { width: 36px; height: 36px; flex-shrink: 0; background: var(--master-active-bg); color: var(--master-primary); } /* Notification items (gerados dinamicamente em notificacoes_core.js) */ .notif-item { min-width: 280px; max-width: 320px; } .notif-icon-circle { width: 36px; height: 36px; min-width: 36px; } .notif-text { font-size: .85rem; line-height: 1.3; } .notif-date { font-size: .75rem; } .notif-read-btn { line-height: 1; } /* ═══════════════════════════════════════════════════════════════ Fase 5 CSP — empresa.php ═══════════════════════════════════════════════════════════════ */ .empresa-container { max-width: 860px; } .igt-sm { font-size: .85em; } .preview-logo-img { object-fit: contain; } .preview-thumb-lg { width: 80px; height: 80px; } .preview-thumb-sm { width: 32px; height: 32px; } .form-color-sm { height: 31px; } .wm-png-preview { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; border: 1px solid #dee2e6; background: repeating-conic-gradient(#ccc 0% 25%, white 0% 50%) 0/12px 12px; } .wm-pos-grid { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; } .wm-pos-btn { width: 34px !important; height: 34px !important; padding: 0 !important; font-size: 13px; } .btn-half { flex: 1 0 50%; } .btn-compact { font-size: .75rem; line-height: 1.6; } .aspect-3-2 { aspect-ratio: 3/2; } /* ═══════════════════════════════════════════════════════════════ Fase 5 CSP — extrato.php (larguras das colunas da tabela) ═══════════════════════════════════════════════════════════════ */ .extrato-th-sel { width: 40px; } .extrato-th-data { width: 100px; } .extrato-th-conta { width: 100px; } .extrato-th-valor { width: 110px; } .extrato-th-tipo { width: 72px; } .extrato-th-cat { width: 140px; } .extrato-th-orig { width: 50px; } .extrato-th-lanc { width: 110px; } .extrato-desc-trunc { max-width: 330px; } .extrato-conta-trunc { max-width: 100px; } .btn-converter-sm { font-size: .75rem; } .barra-lote { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1055; white-space:nowrap; } .barra-lote-card { background:#1e293b; color:#f1f5f9; border-radius:12px; } /* ═══════════════════════════════════════════════════════════════ Fase 5 CSP — financeiro (lancamentos, categorias, contas, regras) ═══════════════════════════════════════════════════════════════ */ .modal-themed { background: var(--panel); color: var(--text); } .modal-themed-dark { background: #111827; border: 1px solid var(--border); color: var(--text); } .modal-themed-header { border-bottom: 1px solid var(--border) !important; } .modal-themed-footer { border-top: 1px solid var(--border) !important; } .cat-color-picker { height: 38px; width: 60px; border: 0 !important; padding: 0 !important; } .regra-container { max-width: 860px; } /* ═══ Fase 5 CSP — docs/editor.php ═══ */ .autosave-feedback { font-size: 0.7rem; opacity: 0.8; } .sidebar-doc-header { background: rgba(255,255,255,0.05); } .sidebar-doc-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; } .sidebar-doc-title { font-size: 0.95rem; min-height: 1.2em; } .label-sm { font-size: 0.75rem; } .label-xs { font-size: 0.7rem; } .text-xxs { font-size: 0.65rem; } .text-xxxs { font-size: 0.6rem; } .quill-editor-sm { height: 150px; } .quill-editor-md { height: 200px; } .item-input-transparent { background: transparent !important; max-width: 85%; } .item-sess-row { background: #fff3cd; } .item-sig-row { background: rgba(13,110,253,0.05); } /* ═══ Fase 5 CSP — oficina/ordem_editar.php ═══ */ .card-sm-pad { padding: 10px !important; } .btn-photo-edit { transform: translate(25%, 25%); width: 32px; height: 32px; padding: 0 !important; } .hr-light { opacity: 0.15; } .search-dropdown { z-index: 1055; max-height: 200px; overflow-y: auto; width: 100%; } .search-dropdown-modal { z-index: 1050; max-height: 200px; overflow-y: auto; width: calc(100% - 32px); } .fs-near-base { font-size: 0.95rem; } /* ═══ Fase 6 CSP — assinatura_view.php ═══ */ .assinatura-container { max-width: 700px; margin: 0 auto; } /* ═══ Fase 7 CSP — workflow ═══ */ .prog-sm { height: 8px; } .prog-thick { height: 30px; } .tipo-icon-badge { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; } .img-capa-thumb { max-height: 200px; } .te-th-icon { width: 50px; } .te-th-dur { width: 120px; } .te-th-jobs { width: 100px; } .te-th-status { width: 80px; } /* ═══ Fase 7 CSP — frota ═══ */ .img-logo-sm { max-height: 30px; } .img-logo-md { max-height: 40px; } .img-foto-thumb { max-height: 80px; } /* ═══ Fase 7 CSP — pessoas ═══ */ .icon-xl { font-size: 3rem; } .img-qr-max { max-width: 200px; } .section-header-sm { font-size: 0.85rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; } .img-max-100 { max-height: 100px; } .border-themed { border: 1px solid var(--border); } .card-header-wa { background: #25D366; color: white; padding: 0.5rem 0.75rem; } .btn-compact-xs { padding: 0.15rem 0.5rem; } .alert-compact { font-size: 0.75rem; padding: 0.4rem 0.6rem; } .btn-wa-send { background: #25D366; color: white; border: none; font-weight: 500; } /* ═══ Fase 8 CSP — financeiro/importar, categorias ═══ */ .cat-color-swatch { display: inline-block; width: 24px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.06); } .cat-th-actions { width: 110px; } /* ═══ Fase 9 CSP — import compartilhado + produtos ═══ */ .import-zi-top { z-index: 50; } .import-shadow-up { box-shadow: 0 -2px 8px rgba(0,0,0,.06); } .import-th-col { width: 30%; } .import-th-sys { width: 40%; } .prog-md { height: 20px; } .prog-commit { height: 24px; max-width: 400px; } .btn-32 { width: 32px; height: 32px; } .img-logo-preview { max-height: 80px; max-width: 100%; } /* ═══════════════════════════════════════════════════════════════ Fase 10 CSP — oficina/index.php + docs/layout_config.php ═══════════════════════════════════════════════════════════════ */ /* Animação de pulse (removida de