/* ===================================================== */ /* ============= SCORPION THEME SYSTEM ================= */ /* ===================================================== */ /* * Tema Light = padrão (root) * Tema Dark = [data-theme="dark"] no * * Variáveis semânticas para layout, cards, forms, grids. * Não usar cores hardcoded nos componentes — usar var(--sc-*). */ /* ===== LIGHT THEME (default) ===== */ :root { /* Backgrounds */ --sc-bg-app: #fafbfc; --sc-bg-surface: #ffffff; --sc-bg-surface-alt: #f8f9fa; --sc-bg-elevated: #ffffff; --sc-bg-sidebar: linear-gradient(180deg, #12022b 0%, #26013C 100%); --sc-bg-input: #ffffff; --sc-bg-hover: #f0f1f5; --sc-bg-active: #ede9fe; /* Borders */ --sc-border: #e2e8f0; --sc-border-light: #f1f5f9; --sc-border-input: #d1d5db; --sc-border-sidebar: rgba(255, 255, 255, 0.1); /* Text */ --sc-text-primary: #1e293b; --sc-text-secondary: #64748b; --sc-text-muted: #94a3b8; --sc-chart-text-primary: #1e293b; --sc-chart-text-secondary: #475569; --sc-text-inverse: #ffffff; --sc-text-on-solid: #ffffff; --sc-text-sidebar: #ffffff; --sc-text-sidebar-muted: #c4b5fd; /* Accent / Brand */ --sc-accent: #6C5CE7; --sc-accent-hover: #5a4bd6; --sc-accent-light: #ede9fe; --sc-accent-surface: slateblue; /* Status */ --sc-success: #28C76F; --sc-danger: #EA5455; --sc-warning: #FF9F43; --sc-info: #00CFE8; /* Shadows */ --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --sc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --sc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Radii */ --sc-radius-sm: 6px; --sc-radius-md: 8px; --sc-radius-lg: 12px; --sc-radius-xl: 16px; /* Sidebar specific */ --sc-sidebar-item-hover: rgba(255, 255, 255, 0.1); --sc-sidebar-item-active: #6C5CE7; /* TopBar */ --sc-topbar-bg: linear-gradient(180deg, #12022b 0%, #26013C 100%); --sc-topbar-text: #ffffff; --sc-topbar-icon: #f1f5f9; --sc-topbar-btn-bg: rgba(255, 255, 255, 0.1); --sc-topbar-btn-hover: rgba(255, 255, 255, 0.18); /* BottomBar */ --sc-bottombar-bg: #f8f9fa; --sc-bottombar-border: #e2e8f0; --sc-bottombar-text: #64748b; /* Cards */ --sc-card-bg: #ffffff; --sc-card-border: #e2e8f0; --sc-card-header-bg: #f8f9fa; /* DataGrid */ --sc-grid-bg: #ffffff; --sc-grid-header-bg: #f8f9fa; --sc-grid-row-hover: #f0f4ff; --sc-grid-row-alt: #fafbfc; --sc-grid-border: #e2e8f0; /* Dropdown / Popup */ --sc-dropdown-bg: #ffffff; --sc-dropdown-border: #e2e8f0; --sc-dropdown-hover: #f0f1f5; /* Login */ --sc-login-input-bg: #ffffff; --sc-login-input-border: #d1d5db; --sc-login-input-text: #1e293b; --sc-login-label: #64748b; /* Radzen light base overrides (remove #f5f5f5 gray background) */ --rz-base-100: #ffffff; --rz-base-light: #ffffff; /* Radzen DataGrid light — linha selecionada */ --rz-grid-selected-background-color: #6C5CE7; --rz-grid-selected-color: #ffffff; } /* ===== DARK THEME ===== */ [data-theme="dark"] { /* Backgrounds */ --sc-bg-app: #0F0F1A; --sc-bg-surface: #1A1A2E; --sc-bg-surface-alt: #16162A; --sc-bg-elevated: #222240; --sc-bg-sidebar: #12121C; --sc-bg-input: #1A1A2E; --sc-bg-hover: #2A2A3E; --sc-bg-active: #2A2A4E; /* Borders */ --sc-border: #2A2A3E; --sc-border-light: #1A1A2E; --sc-border-input: #3A3A4E; --sc-border-sidebar: #1A1A2E; /* Text */ --sc-text-primary: #E4E4EC; --sc-text-secondary: #B4B7C9; --sc-text-muted: #6E6B7B; --sc-chart-text-primary: #F7F8FF; --sc-chart-text-secondary: #DEE3FF; --sc-text-inverse: #0F0F1A; --sc-text-on-solid: #ffffff; --sc-text-sidebar: #D8D9E6; --sc-text-sidebar-muted: #9B9DB8; /* Login */ --sc-login-input-bg: #ffffff; --sc-login-input-border: #d1d5db; --sc-login-input-text: #1e293b; --sc-login-label: #64748b; /* -- ProjetoPlanejamento Gantt (custom Bootstrap Gantt) -- */ [data-theme="dark"] .planejamento-gantt { --rz-grid-right-cell-border: 1px solid #2A2A3E; --rz-grid-bottom-cell-border: 1px solid #2A2A3E; --rz-gantt-border: 1px solid #2A2A3E; --rz-grid-header-cell-border-bottom: 1px solid #2A2A3E; --rz-grid-header-background-color: #16162A; --rz-grid-header-color: #E4E4EC; --rz-grid-stripe-background-color: #1E1E32; --rz-grid-stripe-odd-background-color: #1A1A2E; --rz-grid-background-color: #1A1A2E; --rz-grid-cell-color: #E4E4EC; --rz-gantt-background-color: #1A1A2E; } [data-theme="dark"] .planejamento-gantt .rz-gantt-header, [data-theme="dark"] .planejamento-gantt .rz-gantt-timeline-header { background: linear-gradient(180deg, #16162A 0%, #1A1A2E 100%) !important; } [data-theme="dark"] .planejamento-gantt .rz-gantt-table-header-cell { color: #B4B7C9 !important; } [data-theme="dark"] .planejamento-gantt .rz-gantt-row-grid-col.rz-gantt-nonworking { background: rgba(255, 255, 255, 0.03) !important; } [data-theme="dark"] .planejamento-gantt .rz-grid-table tbody td { background: #1A1A2E !important; color: #E4E4EC !important; border-color: #2A2A3E !important; } [data-theme="dark"] .planejamento-gantt .rz-grid-table tbody tr:nth-child(even) td { background: #1E1E32 !important; } [data-theme="dark"] .planejamento-gantt .rz-gantt-timeline-content, [data-theme="dark"] .planejamento-gantt .rz-gantt-timeline-scroll, [data-theme="dark"] .planejamento-gantt .rz-data-grid-data { background: #1A1A2E !important; } /* Bootstrap-based custom Gantt rows (planejamento-gantt-bs) */ [data-theme="dark"] .planejamento-gantt-host { background: var(--sc-bg-surface); border-color: var(--sc-border); } [data-theme="dark"] .planejamento-gantt-bs-header { background: var(--sc-grid-header-bg); color: var(--sc-text-primary); border-color: var(--sc-grid-border); } [data-theme="dark"] .planejamento-gantt-bs-row { border-color: var(--sc-grid-border); background: var(--sc-grid-bg); color: var(--sc-text-primary); } [data-theme="dark"] .planejamento-gantt-bs-row:nth-child(even) { background: var(--sc-grid-row-alt); } [data-theme="dark"] .planejamento-gantt-bs-row:hover { background: var(--sc-grid-row-hover); } [data-theme="dark"] .planejamento-gantt-titulo-texto { color: var(--sc-text-primary); } [data-theme="dark"] .planejamento-gantt-meta { color: var(--sc-text-muted); } [data-theme="dark"] .planejamento-gantt-cal-tick { color: var(--sc-text-secondary); } [data-theme="dark"] .planejamento-gantt-track { background: repeating-linear-gradient( to right, rgba(108, 92, 231, 0.06) 0, rgba(108, 92, 231, 0.06) 22px, rgba(108, 92, 231, 0.02) 22px, rgba(108, 92, 231, 0.02) 44px ); border-color: var(--sc-border); } [data-theme="dark"] .planejamento-gantt-bs-header { background: linear-gradient(180deg, var(--sc-bg-surface) 0%, var(--sc-bg-base) 100%); border-bottom-color: var(--sc-border); color: var(--sc-text-primary); } [data-theme="dark"] .planejamento-gantt-bs-row { border-bottom-color: var(--sc-border); } [data-theme="dark"] .planejamento-gantt-bs-row:hover { background: rgba(108, 92, 231, 0.07); } [data-theme="dark"] .planejamento-gantt-periodo { color: var(--sc-text-secondary); } [data-theme="dark"] .planejamento-gantt-calendario { border-top-color: var(--sc-border); } /* -- Loading Overlay -- */ --sc-accent: #6C5CE7; --sc-accent-hover: #7C6FF0; --sc-accent-light: rgba(108, 92, 231, 0.15); --sc-accent-surface: #6C5CE7; /* Status */ --sc-success: #28C76F; --sc-danger: #EA5455; --sc-warning: #FF9F43; --sc-info: #00CFE8; /* Shadows */ --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --sc-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4); --sc-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5); /* Sidebar specific */ --sc-sidebar-item-hover: #1A1A2E; --sc-sidebar-item-active: #6C5CE7; /* TopBar */ --sc-topbar-bg: #12121C; --sc-topbar-text: #E4E4EC; --sc-topbar-icon: #B4B7C9; --sc-topbar-btn-bg: rgba(255, 255, 255, 0.08); --sc-topbar-btn-hover: rgba(255, 255, 255, 0.15); /* BottomBar */ --sc-bottombar-bg: #12121C; --sc-bottombar-border: #1A1A2E; --sc-bottombar-text: #B4B7C9; /* Cards */ --sc-card-bg: #1A1A2E; --sc-card-border: #2A2A3E; --sc-card-header-bg: #16162A; /* DataGrid */ --sc-grid-bg: #1A1A2E; --sc-grid-header-bg: #16162A; --sc-grid-row-hover: #2A2A3E; --sc-grid-row-alt: #1E1E32; --sc-grid-border: #2A2A3E; /* Dropdown / Popup */ --sc-dropdown-bg: #1A1A2E; --sc-dropdown-border: #2A2A3E; --sc-dropdown-hover: #2A2A3E; /* Radzen DataGrid dark overrides via Radzen CSS variables */ --rz-grid-background-color: #1A1A2E; --rz-grid-header-background-color: #16162A; --rz-grid-header-color: #E4E4EC; --rz-grid-header-sorted-background-color: #1E1E32; --rz-grid-header-cell-border: 1px solid #2A2A3E; --rz-grid-header-cell-border-bottom: 1px solid #2A2A3E; --rz-grid-border: 1px solid #2A2A3E; --rz-grid-cell-border: 1px solid #2A2A3E; --rz-grid-right-cell-border: 1px solid #2A2A3E; --rz-grid-bottom-cell-border: 1px solid #2A2A3E; --rz-grid-cell-color: #E4E4EC; --rz-grid-cell-focus-background-color: #2A2A4E; --rz-grid-cell-focus-color: #E4E4EC; --rz-grid-hover-background-color: #2A2A3E; --rz-grid-hover-color: #E4E4EC; --rz-grid-stripe-background-color: #1E1E32; --rz-grid-stripe-odd-background-color: #1A1A2E; --rz-grid-frozen-cell-background-color: #1A1A2E; --rz-grid-frozen-stripe-background-color: #1E1E32; --rz-grid-selected-background-color: #6C5CE7; --rz-grid-selected-color: #ffffff; --rz-grid-foot-background-color: #16162A; --rz-grid-foot-cell-color: #B4B7C9; --rz-grid-toolbar-background-color: #16162A; --rz-grid-filter-background-color: #1A1A2E; --rz-grid-filter-color: #E4E4EC; --rz-grid-filter-border: 1px solid #2A2A3E; --rz-grid-filter-buttons-background-color: #16162A; --rz-grid-filter-buttons-border: 1px solid #2A2A3E; --rz-grid-sort-icon-color: #B4B7C9; --rz-grid-header-filter-icon-hover-color: #E4E4EC; --rz-grid-detail-template-background-color: #16162A; --rz-grid-detail-template-border: 1px solid #2A2A3E; --rz-grid-group-header-item-background-color: #1E1E32; --rz-grid-group-header-item-color: #B4B7C9; --rz-grid-group-header-item-border: 1px solid #2A2A3E; /* Radzen base color scale — overrides white backgrounds in RadzenBody/Stack */ --rz-base-50: #1A1A2E; --rz-base-100: #16162A; --rz-base-200: #1E1E32; --rz-base-300: #2A2A3E; --rz-base-400: #3A3A4E; --rz-base-500: #6E6B7B; --rz-base-600: #9B9DB8; --rz-base-700: #B4B7C9; --rz-base-800: #D8D9E6; --rz-base-900: #E4E4EC; /* Radzen layout/body backgrounds */ --rz-body-background-color: #0F0F1A; --rz-layout-background-color: #0F0F1A; --rz-layout-body-background-color: #fff; --rz-text-color: #E4E4EC; } /* ===================================================== */ /* ========= THEME APPLICATION (global overrides) ====== */ /* ===================================================== */ /* -- Body / App Container -- */ [data-theme="dark"] body, [data-theme="dark"] .app-layout { background: var(--sc-bg-app); color: var(--sc-text-primary); } [data-theme="dark"] .content { background: var(--sc-bg-app); } /* Radzen layout containers */ [data-theme="dark"] .rz-body, [data-theme="dark"] .rz-layout, [data-theme="dark"] .rz-main, [data-theme="dark"] .rz-content { background: var(--sc-bg-app) !important; color: var(--sc-text-primary) !important; } /* Radzen Stack / generic containers inherit dark bg */ [data-theme="dark"] .rz-stack, [data-theme="dark"] .rz-row, [data-theme="dark"] .rz-col { color: var(--sc-text-primary); } /* -- Sidebar -- */ [data-theme="dark"] .sidebar { background: var(--sc-bg-sidebar); border-right-color: var(--sc-border-sidebar); } /* -- TopBar -- */ [data-theme="dark"] .topbar-fixed { background: var(--sc-topbar-bg); border-bottom-color: var(--sc-border); } /* -- BottomBar -- */ [data-theme="dark"] .bottombar { background: var(--sc-bottombar-bg); border-top-color: var(--sc-bottombar-border); } /* -- Radzen Cards -- */ [data-theme="dark"] .rz-card { background: var(--sc-card-bg) !important; border-color: var(--sc-card-border) !important; color: var(--sc-text-primary); } /* Preserve KPI left accent border in dashboards */ [data-theme="dark"] .rz-card[class*="kpi-card"] { border-left-width: 4px; border-left-style: solid; } [data-theme="dark"] .rz-card[class*="kpi-primary"] { border-left-color: #2563eb !important; } [data-theme="dark"] .rz-card[class*="kpi-positive"] { border-left-color: #16a34a !important; } [data-theme="dark"] .rz-card[class*="kpi-warning"] { border-left-color: #f59e0b !important; } [data-theme="dark"] .rz-card[class*="kpi-negative"] { border-left-color: #dc2626 !important; } [data-theme="dark"] .rz-card[class*="kpi-info"] { border-left-color: #0ea5e9 !important; } [data-theme="dark"] .rz-card .rz-card-title, [data-theme="dark"] .rz-card h3, [data-theme="dark"] .rz-card h4 { color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-card .rz-text, [data-theme="dark"] .rz-card p { color: var(--sc-text-secondary); } /* -- Radzen DataList (usado na tela de OS) -- */ [data-theme="dark"] .rz-datalist, [data-theme="dark"] .rz-datalist-content, [data-theme="dark"] .rz-datalist-data, [data-theme="dark"] .rz-datalist-data > li { background: transparent !important; color: var(--sc-text-primary); } /* Os-datalist card: sem borda/sombra Radzen, fundo match com o container */ [data-theme="dark"] .os-datalist-card:not(.selected) { background: transparent !important; box-shadow: none !important; border: none !important; } [data-theme="dark"] .os-datalist-card.selected { background: var(--sc-accent) !important; box-shadow: none !important; border: none !important; } [data-theme="dark"] .os-datalist-card.selected .os-datalist-os, [data-theme="dark"] .os-datalist-card.selected .os-datalist-label, [data-theme="dark"] .os-datalist-card.selected .os-datalist-sub, [data-theme="dark"] .os-datalist-card.selected .os-analista-nome, [data-theme="dark"] .os-datalist-card.selected * { color: #ffffff !important; } /* -- Radzen DataGrid -- */ [data-theme="dark"] .rz-datatable, [data-theme="dark"] .rz-data-grid, [data-theme="dark"] .rz-grid { background: var(--sc-grid-bg); color: var(--sc-text-primary); border-color: var(--sc-grid-border) !important; } /* Headers */ [data-theme="dark"] .rz-datatable .rz-datatable-thead > tr > th, [data-theme="dark"] .rz-column-header, [data-theme="dark"] .rz-grid-table > thead > tr > th, [data-theme="dark"] .rz-column-title { background: var(--sc-grid-header-bg) !important; color: var(--sc-text-primary) !important; border-color: var(--sc-grid-border) !important; } /* Rows */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr, [data-theme="dark"] .rz-data-row, [data-theme="dark"] .rz-grid-table > tbody > tr { background: transparent; color: var(--sc-text-primary); border-color: var(--sc-grid-border); } /* Cells — base color */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr > td, [data-theme="dark"] .rz-grid-table > tbody > tr > td { background: var(--sc-grid-bg); border-color: var(--sc-grid-border) !important; color: var(--sc-text-primary); transition: background-color 0.1s ease, color 0.1s ease; } /* Alt rows — applies to cells */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr:nth-child(even) > td, [data-theme="dark"] .rz-grid-table > tbody > tr:nth-child(even) > td { background: var(--sc-grid-row-alt); } /* Hover — guard :not(.rz-state-highlight) prevents conflict with selected state */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr:hover:not(.rz-state-highlight) > td, [data-theme="dark"] .rz-data-row:hover:not(.rz-state-highlight) > td, [data-theme="dark"] .rz-grid-table > tbody > tr:hover:not(.rz-state-highlight) > td { background: var(--sc-grid-row-hover) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-datatable .rz-datatable-data > tr:hover:not(.rz-state-highlight) > td .rz-cell-data, [data-theme="dark"] .rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data, [data-theme="dark"] .rz-grid-table > tbody > tr:hover:not(.rz-state-highlight) .rz-cell-data { color: var(--sc-text-primary) !important; } /* Selected row — cells get accent, overrides hover */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr.rz-state-highlight, [data-theme="dark"] .rz-data-row.rz-state-highlight, [data-theme="dark"] .rz-grid-table > tbody > tr.rz-state-highlight { background: transparent; color: #ffffff !important; } [data-theme="dark"] .rz-datatable .rz-datatable-data > tr.rz-state-highlight > td, [data-theme="dark"] .rz-data-row.rz-state-highlight > td, [data-theme="dark"] .rz-grid-table > tbody > tr.rz-state-highlight > td { background: var(--sc-accent) !important; color: #ffffff !important; border-color: var(--sc-accent-hover) !important; } [data-theme="dark"] .rz-datatable .rz-datatable-data > tr.rz-state-highlight .rz-cell-data, [data-theme="dark"] .rz-data-row.rz-state-highlight .rz-cell-data, [data-theme="dark"] .rz-grid-table > tbody > tr.rz-state-highlight .rz-cell-data { color: #ffffff !important; } /* Selected + hover — keep accent background consistent, no artifacts */ [data-theme="dark"] .rz-datatable .rz-datatable-data > tr.rz-state-highlight:hover > td, [data-theme="dark"] .rz-data-row.rz-state-highlight:hover > td, [data-theme="dark"] .rz-grid-table > tbody > tr.rz-state-highlight:hover > td { background: var(--sc-accent-hover) !important; color: #ffffff !important; } /* Filter row */ [data-theme="dark"] .rz-datatable-tfoot > tr > td, [data-theme="dark"] .rz-grid-table > tfoot > tr > td { background: var(--sc-grid-header-bg) !important; border-color: var(--sc-grid-border) !important; } /* Pager */ [data-theme="dark"] .rz-pager { background: var(--sc-grid-header-bg) !important; border-color: var(--sc-grid-border) !important; color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-pager .rz-paginator-element { color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-pager .rz-paginator-element:hover { background: var(--sc-grid-row-hover) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-pager .rz-paginator-element.rz-state-active { background: var(--sc-accent) !important; color: #fff !important; } /* -- Radzen Inputs -- */ [data-theme="dark"] .rz-textbox, [data-theme="dark"] .rz-inputtext, [data-theme="dark"] .rz-dropdown, [data-theme="dark"] .rz-multiselect, [data-theme="dark"] .rz-calendar .rz-inputtext, [data-theme="dark"] .rz-datepicker > .rz-inputtext, [data-theme="dark"] .rz-datepicker > .rz-inputtext:not(.invalid), [data-theme="dark"] .rz-numeric, [data-theme="dark"] .rz-textarea, [data-theme="dark"] input.form-control, [data-theme="dark"] textarea.form-control, [data-theme="dark"] select.form-control { background: var(--sc-bg-input) !important; border-color: var(--sc-border-input) !important; color: var(--sc-text-primary) !important; } /* -- Radzen DatePicker (dark mode) -- */ /* Popup container / overlay */ [data-theme="dark"] .rz-datepicker-popup-container { background: var(--sc-bg-surface) !important; border: 1px solid var(--sc-border-input) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; color: var(--sc-text-primary) !important; } /* Trigger button (calendar icon) */ [data-theme="dark"] .rz-datepicker-trigger { background: var(--sc-bg-input) !important; border-color: var(--sc-border-input) !important; color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-datepicker:not(.rz-state-disabled):hover .rz-datepicker-trigger, [data-theme="dark"] .rz-datepicker-trigger:not(.rz-state-disabled):hover:not(:active) { background: var(--sc-bg-hover) !important; border-color: var(--sc-accent) !important; color: var(--sc-accent) !important; } /* Calendar header (mês/ano, botões prev/next) */ [data-theme="dark"] .rz-calendar-header { background: var(--sc-bg-surface) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-calendar-title { color: var(--sc-text-primary) !important; background: transparent !important; } [data-theme="dark"] .rz-calendar-prev, [data-theme="dark"] .rz-calendar-next { color: var(--sc-text-secondary) !important; background: transparent !important; } [data-theme="dark"] .rz-calendar-prev:hover, [data-theme="dark"] .rz-calendar-next:hover { color: var(--sc-accent) !important; } /* Dropdowns de mês/ano no header */ [data-theme="dark"] .rz-calendar-month-dropdown, [data-theme="dark"] .rz-calendar-year-dropdown { background: var(--sc-bg-input) !important; border-color: var(--sc-border-input) !important; color: var(--sc-text-primary) !important; } /* Tabela do calendário */ [data-theme="dark"] .rz-calendar-view { background: var(--sc-bg-surface) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-calendar-view th { color: var(--sc-text-muted) !important; background: var(--sc-bg-surface) !important; } [data-theme="dark"] .rz-calendar-view td .rz-state-default { color: var(--sc-text-primary) !important; background: transparent !important; } [data-theme="dark"] .rz-calendar-view td .rz-state-default:hover { background: var(--sc-bg-hover) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-calendar-view .rz-calendar-other-month { color: var(--sc-text-muted) !important; } [data-theme="dark"] .rz-calendar-view td .rz-state-default.rz-calendar-today { border-color: var(--sc-accent) !important; color: var(--sc-accent) !important; } [data-theme="dark"] .rz-calendar-view td .rz-state-active, [data-theme="dark"] .rz-calendar-view td .rz-state-active:hover, [data-theme="dark"] .rz-calendar-view td .rz-state-active.rz-calendar-today { background: var(--sc-accent) !important; color: #fff !important; border-color: var(--sc-accent) !important; } [data-theme="dark"] .rz-calendar-view td .rz-state-default.rz-state-focused, [data-theme="dark"] .rz-calendar-view td .rz-state-active.rz-state-focused { box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.4) !important; } [data-theme="dark"] .rz-calendar-view .rz-state-disabled { color: var(--sc-text-muted) !important; opacity: 0.4 !important; } /* Timepicker */ [data-theme="dark"] .rz-timepicker { background: var(--sc-bg-surface) !important; color: var(--sc-text-primary) !important; border-top: 1px solid var(--sc-border) !important; } [data-theme="dark"] .rz-timepicker .rz-separator a, [data-theme="dark"] .rz-timepicker a { color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-timepicker input { background: var(--sc-bg-input) !important; border-color: var(--sc-border-input) !important; color: var(--sc-text-primary) !important; } /* Footer do datepicker (botão Hoje/Limpar) */ [data-theme="dark"] .rz-datepicker-footer { background: var(--sc-bg-surface) !important; border-top: 1px solid var(--sc-border) !important; } [data-theme="dark"] .rz-datepicker-footer .rz-button { color: var(--sc-accent) !important; } [data-theme="dark"] .rz-textbox:focus, [data-theme="dark"] .rz-inputtext:focus, [data-theme="dark"] .rz-dropdown.rz-state-focused, [data-theme="dark"] input.form-control:focus, [data-theme="dark"] textarea.form-control:focus { border-color: var(--sc-accent) !important; box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2) !important; } [data-theme="dark"] .rz-placeholder { color: var(--sc-text-muted) !important; } /* -- Login: manter campos legíveis no cartão claro mesmo com dark ativo -- */ [data-theme="dark"] .saas-login-form input.form-control, [data-theme="dark"] .saas-login-form textarea.form-control, [data-theme="dark"] .saas-login-form select.form-control { background: var(--sc-login-input-bg) !important; border-color: var(--sc-login-input-border) !important; color: var(--sc-login-input-text) !important; } [data-theme="dark"] .saas-login-form input.form-control:focus, [data-theme="dark"] .saas-login-form textarea.form-control:focus, [data-theme="dark"] .saas-login-form select.form-control:focus { border-color: var(--sc-accent) !important; box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.2) !important; } [data-theme="dark"] .saas-login-form .form-floating > label { color: var(--sc-login-label) !important; } /* -- Radzen HtmlEditor -- */ /* O Radzen HtmlEditor usa .rz-html-editor-content e .rz-html-editor-toolbar, controlados pelas variáveis --rz-editor-*. Sobrescrevemos diretamente as classes. */ [data-theme="dark"] .rz-html-editor { border: 1px solid var(--sc-border-input) !important; background-color: var(--sc-bg-input) !important; } [data-theme="dark"] .rz-html-editor:focus-within { outline: none !important; border-color: var(--sc-accent) !important; } /* Área de conteúdo editável */ [data-theme="dark"] .rz-html-editor-content { background-color: var(--sc-bg-input) !important; color: var(--sc-text-primary) !important; } /* Toolbar */ [data-theme="dark"] .rz-html-editor-toolbar { background-color: var(--sc-bg-surface-alt) !important; border-color: var(--sc-border-input) !important; } /* Botões da toolbar */ [data-theme="dark"] .rz-html-editor-button { background: var(--sc-bg-surface-alt) !important; color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-html-editor-button:hover { background: var(--sc-bg-hover) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-html-editor-button.rz-selected { background-color: var(--sc-accent) !important; color: #fff !important; } /* Color picker e separador */ [data-theme="dark"] .rz-html-editor-colorpicker, [data-theme="dark"] .rz-html-editor-colorpicker .rz-colorpicker, [data-theme="dark"] .rz-html-editor-colorpicker .rz-colorpicker-trigger { background: var(--sc-bg-surface-alt) !important; color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-html-editor-separator { background-color: var(--sc-border) !important; } /* Dropdown de formatação (heading, size…) */ [data-theme="dark"] .rz-html-editor-dropdown { background: var(--sc-bg-surface-alt) !important; color: var(--sc-text-secondary) !important; border-color: var(--sc-border-input) !important; } [data-theme="dark"] .rz-html-editor-dropdown-items { background: var(--sc-dropdown-bg) !important; border-color: var(--sc-dropdown-border) !important; } [data-theme="dark"] .rz-html-editor-dropdown-item:hover { background: var(--sc-bg-hover) !important; color: var(--sc-text-primary) !important; } /* -- Radzen Dropdown Panels -- */ [data-theme="dark"] .rz-dropdown-panel, [data-theme="dark"] .rz-multiselect-panel, [data-theme="dark"] .rz-listbox, [data-theme="dark"] .rz-overlaypanel { background: var(--sc-dropdown-bg) !important; border-color: var(--sc-dropdown-border) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item:hover, [data-theme="dark"] .rz-multiselect-panel .rz-multiselect-item:hover, [data-theme="dark"] .rz-listbox .rz-listbox-item:hover { background: var(--sc-dropdown-hover) !important; } [data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight, [data-theme="dark"] .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight { background: var(--sc-accent) !important; color: #fff !important; } /* -- Radzen Dialog -- */ [data-theme="dark"] .rz-dialog-content, [data-theme="dark"] .rz-dialog { background: var(--sc-bg-surface) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-dialog-titlebar { background: var(--sc-card-header-bg) !important; color: var(--sc-text-primary) !important; border-bottom-color: var(--sc-border) !important; } /* -- Radzen Tabs -- */ [data-theme="dark"] .rz-tabview-nav { border-bottom-color: var(--sc-border) !important; } [data-theme="dark"] .rz-tabview-nav .rz-tabview-nav-link { color: var(--sc-text-secondary) !important; } [data-theme="dark"] .rz-tabview-nav .rz-tabview-nav-link.rz-tabview-selected { color: var(--sc-accent) !important; border-color: var(--sc-accent) !important; } [data-theme="dark"] .rz-tabview-panel { color: var(--sc-text-primary); } /* -- Radzen Buttons (subtle adjustments) -- */ [data-theme="dark"] .rz-button.rz-secondary { background: var(--sc-bg-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .rz-button.rz-light { background: var(--sc-bg-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text-primary) !important; } /* -- Radzen Alerts -- */ [data-theme="dark"] .rz-alert { border-color: var(--sc-border) !important; } [data-theme="dark"] .rz-alert.rz-alert-warning, [data-theme="dark"] .rz-alert-warning { background: rgba(255, 159, 67, 0.18) !important; border-color: rgba(255, 159, 67, 0.5) !important; color: #fff3dd !important; } [data-theme="dark"] .rz-alert.rz-alert-warning .rz-text, [data-theme="dark"] .rz-alert.rz-alert-warning span, [data-theme="dark"] .rz-alert.rz-alert-warning p, [data-theme="dark"] .rz-alert.rz-alert-warning b, [data-theme="dark"] .rz-alert-warning .rz-text, [data-theme="dark"] .rz-alert-warning span, [data-theme="dark"] .rz-alert-warning p, [data-theme="dark"] .rz-alert-warning b { color: #fff3dd !important; } [data-theme="dark"] .rz-alert.rz-alert-warning .rzi, [data-theme="dark"] .rz-alert-warning .rzi, [data-theme="dark"] .rz-alert.rz-alert-warning .rz-alert-close, [data-theme="dark"] .rz-alert-warning .rz-alert-close { color: #ffe7c2 !important; } /* -- Bootstrap Dropdown (used in TopBar) -- */ [data-theme="dark"] .dropdown-menu { background: var(--sc-dropdown-bg) !important; border-color: var(--sc-dropdown-border) !important; } [data-theme="dark"] .dropdown-item { color: var(--sc-text-secondary) !important; } [data-theme="dark"] .dropdown-item:hover { background: var(--sc-dropdown-hover) !important; color: var(--sc-text-primary) !important; } [data-theme="dark"] .dropdown-divider { border-color: var(--sc-border) !important; } /* -- RC Page Pattern Classes -- */ [data-theme="dark"] .rc-page-title { background-color: var(--sc-accent) !important; } [data-theme="dark"] .rc-page-search-input { background: var(--sc-bg-input); border-color: var(--sc-border-input); color: var(--sc-text-primary); } [data-theme="dark"] .rc-page-search-input::placeholder { color: var(--sc-text-muted); } /* -- Scrollbars -- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--sc-bg-app); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A3A4E; } /* -- Labels / Badges -- */ [data-theme="dark"] .rc-card-label { color: var(--sc-text-muted); } [data-theme="dark"] .text-muted { color: var(--sc-text-muted) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--sc-text-primary); } [data-theme="dark"] p { color: var(--sc-text-secondary); } [data-theme="dark"] a:not(.rz-button):not(.topbar-company-link):not(.dropdown-item) { color: var(--sc-accent); } /* -- Forms -- */ [data-theme="dark"] label, [data-theme="dark"] .rz-form-field label { color: var(--sc-text-secondary) !important; } /* ScBadge — variant badges */ [data-theme="dark"] .sc-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--sc-radius-md); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; text-transform: uppercase; } [data-theme="dark"] .sc-badge--success { background-color: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); } [data-theme="dark"] .sc-badge--danger { background-color: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } [data-theme="dark"] .sc-badge--warning { background-color: rgba(251, 146, 60, 0.1); color: #fb923c; border: 1px solid rgba(251, 146, 60, 0.3); } [data-theme="dark"] .sc-badge--info { background-color: rgba(96, 165, 250, 0.1); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); } [data-theme="dark"] .sc-badge--accent { background-color: rgba(108, 92, 231, 0.1); color: var(--sc-accent); border: 1px solid rgba(108, 92, 231, 0.3); } [data-theme="dark"] .sc-badge--muted { background-color: var(--sc-bg-surface); color: var(--sc-text-secondary); border: 1px solid var(--sc-border); } /* ScAlert — dismissible alerts */ [data-theme="dark"] .sc-alert { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--sc-radius-md); border: 1px solid; background-color: var(--sc-bg-surface); } [data-theme="dark"] .sc-alert__icon { flex-shrink: 0; display: flex; align-items: center; font-size: 1.25rem; } [data-theme="dark"] .sc-alert__content { flex: 1; color: var(--sc-text-primary); font-size: 0.9375rem; line-height: 1.5; } [data-theme="dark"] .sc-alert__close { flex-shrink: 0; padding: 0; margin: -0.25rem -0.5rem -0.25rem 0; background: none; border: none; color: var(--sc-text-secondary); cursor: pointer; font-size: 1.25rem; transition: color 0.2s ease; } [data-theme="dark"] .sc-alert__close:hover { color: var(--sc-text-primary); } [data-theme="dark"] .sc-alert--success { border-color: rgba(52, 211, 153, 0.3); background-color: rgba(52, 211, 153, 0.05); } [data-theme="dark"] .sc-alert--success .sc-alert__icon { color: #34d399; } [data-theme="dark"] .sc-alert--danger { border-color: rgba(239, 68, 68, 0.3); background-color: rgba(239, 68, 68, 0.05); } [data-theme="dark"] .sc-alert--danger .sc-alert__icon { color: #ef4444; } [data-theme="dark"] .sc-alert--warning { border-color: rgba(251, 146, 60, 0.3); background-color: rgba(251, 146, 60, 0.05); } [data-theme="dark"] .sc-alert--warning .sc-alert__icon { color: #fb923c; } [data-theme="dark"] .sc-alert--info { border-color: rgba(96, 165, 250, 0.3); background-color: rgba(96, 165, 250, 0.05); } [data-theme="dark"] .sc-alert--info .sc-alert__icon { color: #60a5fa; } [data-theme="dark"] .sc-alert--accent { border-color: rgba(108, 92, 231, 0.3); background-color: rgba(108, 92, 231, 0.05); } [data-theme="dark"] .sc-alert--accent .sc-alert__icon { color: var(--sc-accent); } [data-theme="dark"] .sc-alert--muted { border-color: var(--sc-border); background-color: var(--sc-bg-input); } [data-theme="dark"] .sc-alert--muted .sc-alert__icon { color: var(--sc-text-secondary); } /* ScCard — container cards */ [data-theme="dark"] .sc-card { border-radius: var(--sc-radius-md); border: 1px solid var(--sc-border); background-color: var(--sc-bg-surface); overflow: hidden; } [data-theme="dark"] .sc-card__header { padding: 1.25rem; border-bottom: 1px solid var(--sc-border); background-color: rgba(0, 0, 0, 0.2); } [data-theme="dark"] .sc-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--sc-text-primary); } [data-theme="dark"] .sc-card__body { padding: 1.25rem; } [data-theme="dark"] .sc-card__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--sc-border); background-color: rgba(0, 0, 0, 0.1); display: flex; gap: 0.75rem; justify-content: flex-end; } /* Hover effect for cards */ [data-theme="dark"] .sc-card:hover { border-color: var(--sc-accent); box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1); transition: all 0.2s ease; } /* Light theme support */ [data-theme="light"] .sc-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--sc-radius-md); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; text-transform: uppercase; } [data-theme="light"] .sc-badge--success { background-color: rgba(52, 211, 153, 0.15); color: #059669; border: 1px solid rgba(52, 211, 153, 0.4); } [data-theme="light"] .sc-badge--danger { background-color: rgba(239, 68, 68, 0.15); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.4); } [data-theme="light"] .sc-badge--warning { background-color: rgba(251, 146, 60, 0.15); color: #d97706; border: 1px solid rgba(251, 146, 60, 0.4); } [data-theme="light"] .sc-badge--info { background-color: rgba(96, 165, 250, 0.15); color: #1d4ed8; border: 1px solid rgba(96, 165, 250, 0.4); } [data-theme="light"] .sc-badge--accent { background-color: rgba(108, 92, 231, 0.15); color: var(--sc-accent); border: 1px solid rgba(108, 92, 231, 0.4); } [data-theme="light"] .sc-badge--muted { background-color: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; } [data-theme="light"] .sc-alert { display: flex; gap: 1rem; padding: 1rem; border-radius: var(--sc-radius-md); border: 1px solid; background-color: #f9fafb; } [data-theme="light"] .sc-alert__icon { flex-shrink: 0; display: flex; align-items: center; font-size: 1.25rem; } [data-theme="light"] .sc-alert__content { flex: 1; color: #1f2937; font-size: 0.9375rem; line-height: 1.5; } [data-theme="light"] .sc-alert__close { flex-shrink: 0; padding: 0; margin: -0.25rem -0.5rem -0.25rem 0; background: none; border: none; color: #6b7280; cursor: pointer; font-size: 1.25rem; transition: color 0.2s ease; } [data-theme="light"] .sc-alert__close:hover { color: #1f2937; } [data-theme="light"] .sc-alert--success { border-color: rgba(52, 211, 153, 0.4); background-color: rgba(52, 211, 153, 0.1); } [data-theme="light"] .sc-alert--success .sc-alert__icon { color: #059669; } [data-theme="light"] .sc-alert--danger { border-color: rgba(239, 68, 68, 0.4); background-color: rgba(239, 68, 68, 0.1); } [data-theme="light"] .sc-alert--danger .sc-alert__icon { color: #dc2626; } [data-theme="light"] .sc-alert--warning { border-color: rgba(251, 146, 60, 0.4); background-color: rgba(251, 146, 60, 0.1); } [data-theme="light"] .sc-alert--warning .sc-alert__icon { color: #d97706; } [data-theme="light"] .sc-alert--info { border-color: rgba(96, 165, 250, 0.4); background-color: rgba(96, 165, 250, 0.1); } [data-theme="light"] .sc-alert--info .sc-alert__icon { color: #1d4ed8; } [data-theme="light"] .sc-alert--accent { border-color: rgba(108, 92, 231, 0.4); background-color: rgba(108, 92, 231, 0.1); } [data-theme="light"] .sc-alert--accent .sc-alert__icon { color: var(--sc-accent); } [data-theme="light"] .sc-alert--muted { border-color: #e5e7eb; background-color: #f3f4f6; } [data-theme="light"] .sc-alert--muted .sc-alert__icon { color: #6b7280; } [data-theme="light"] .sc-card { border-radius: var(--sc-radius-md); border: 1px solid #e5e7eb; background-color: #ffffff; overflow: hidden; } [data-theme="light"] .sc-card__header { padding: 1.25rem; border-bottom: 1px solid #e5e7eb; background-color: #f9fafb; } [data-theme="light"] .sc-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: #1f2937; } [data-theme="light"] .sc-card__body { padding: 1.25rem; } [data-theme="light"] .sc-card__footer { padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; background-color: #f3f4f6; display: flex; gap: 0.75rem; justify-content: flex-end; } [data-theme="light"] .sc-card:hover { border-color: var(--sc-accent); box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.1); transition: all 0.2s ease; } /* ScNumeric — numeric input with prefix/suffix */ [data-theme="dark"] .sc-numeric { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; position: relative; } [data-theme="dark"] .sc-numeric-adornment { color: var(--sc-text-secondary); font-size: 0.9375rem; font-weight: 500; } [data-theme="dark"] .sc-numeric input[type="text"] { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background-color: var(--sc-bg-input); color: var(--sc-text-primary); font-family: 'Courier New', monospace; font-size: 0.9375rem; text-align: right; } [data-theme="dark"] .sc-numeric input[type="text"]:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1); } /* ScSelect — native select dropdown */ [data-theme="dark"] .sc-select { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background-color: var(--sc-bg-input); color: var(--sc-text-primary); font-family: Inter, sans-serif; font-size: 0.9375rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; } [data-theme="dark"] .sc-select:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1); } [data-theme="dark"] .sc-select:disabled { opacity: 0.5; cursor: not-allowed; } [data-theme="dark"] .sc-select option { background-color: var(--sc-bg-surface); color: var(--sc-text-primary); } /* -- Forms (EditForm with native inputs) -- */ [data-theme="dark"] .sc-form-container { max-width: 1200px; margin: 2rem auto; background-color: var(--sc-bg-surface); border-radius: var(--sc-radius-md); border: 1px solid var(--sc-border); overflow: hidden; } [data-theme="dark"] .sc-form-header { padding: 2rem; background: linear-gradient(135deg, var(--sc-accent) 0%, rgba(108, 92, 231, 0.8) 100%); color: white; } [data-theme="dark"] .sc-form-header-content { display: flex; align-items: center; gap: 1.5rem; } [data-theme="dark"] .sc-form-header-icon { font-size: 2.5rem; opacity: 0.9; } [data-theme="dark"] .sc-form-header-icon .material-symbols-outlined { font-size: 2.5rem; } [data-theme="dark"] .sc-form-header h1 { margin: 0; font-size: 1.75rem; font-weight: 600; } [data-theme="dark"] .sc-form-header p { margin: 0.25rem 0 0 0; font-size: 0.9375rem; opacity: 0.9; } [data-theme="dark"] .sc-form { display: flex; flex-direction: column; } [data-theme="dark"] .sc-form-body { padding: 2rem; flex: 1; } [data-theme="dark"] .sc-form-section { margin-bottom: 2rem; } [data-theme="dark"] .sc-form-section:last-child { margin-bottom: 0; } [data-theme="dark"] .sc-form-section-title { margin: 0 0 1.5rem 0; font-size: 1.125rem; font-weight: 600; color: var(--sc-text-primary); border-bottom: 2px solid var(--sc-border); padding-bottom: 0.75rem; } [data-theme="dark"] .sc-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } [data-theme="dark"] .sc-form-row:last-child { margin-bottom: 0; } [data-theme="dark"] .sc-form-group { display: flex; flex-direction: column; } [data-theme="dark"] .sc-form-label { margin-bottom: 0.5rem; color: var(--sc-text-secondary); font-size: 0.9375rem; font-weight: 500; } [data-theme="dark"] .sc-form-input, [data-theme="dark"] .sc-input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background-color: var(--sc-bg-input); color: var(--sc-text-primary); font-family: Inter, sans-serif; font-size: 0.9375rem; transition: all 0.2s ease; } [data-theme="dark"] .sc-form-input:focus, [data-theme="dark"] .sc-input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1); } [data-theme="dark"] .sc-form-input:disabled, [data-theme="dark"] .sc-input:disabled { opacity: 0.5; cursor: not-allowed; } [data-theme="dark"] .sc-form-radio-group { display: flex; align-items: center; gap: 1rem; min-height: 2.375rem; } [data-theme="dark"] .sc-form-radio-group label { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sc-text-primary); font-weight: 500; } [data-theme="dark"] .sc-form-radio-group input[type="radio"] { accent-color: var(--sc-accent); } [data-theme="dark"] .sc-form-error { margin-top: 0.375rem; color: #ef4444; font-size: 0.8125rem; } [data-theme="dark"] .sc-form-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--sc-border); background-color: rgba(0, 0, 0, 0.1); display: flex; gap: 1rem; justify-content: flex-end; } [data-theme="dark"] .sc-form-footer .sc-btn { display: flex; align-items: center; gap: 0.5rem; } /* Light theme forms */ [data-theme="light"] .sc-form-container { max-width: 1200px; margin: 2rem auto; background-color: #ffffff; border-radius: var(--sc-radius-md); border: 1px solid #e5e7eb; overflow: hidden; } [data-theme="light"] .sc-form-header { padding: 2rem; background: linear-gradient(135deg, var(--sc-accent) 0%, rgba(108, 92, 231, 0.8) 100%); color: white; } [data-theme="light"] .sc-form-header-content { display: flex; align-items: center; gap: 1.5rem; } [data-theme="light"] .sc-form-header-icon { font-size: 2.5rem; opacity: 0.9; } [data-theme="light"] .sc-form-header-icon .material-symbols-outlined { font-size: 2.5rem; } [data-theme="light"] .sc-form-header h1 { margin: 0; font-size: 1.75rem; font-weight: 600; } [data-theme="light"] .sc-form-header p { margin: 0.25rem 0 0 0; font-size: 0.9375rem; opacity: 0.9; } [data-theme="light"] .sc-form { display: flex; flex-direction: column; } [data-theme="light"] .sc-form-body { padding: 2rem; flex: 1; } [data-theme="light"] .sc-form-section { margin-bottom: 2rem; } [data-theme="light"] .sc-form-section:last-child { margin-bottom: 0; } [data-theme="light"] .sc-form-section-title { margin: 0 0 1.5rem 0; font-size: 1.125rem; font-weight: 600; color: #1f2937; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.75rem; } [data-theme="light"] .sc-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; } [data-theme="light"] .sc-form-row:last-child { margin-bottom: 0; } [data-theme="light"] .sc-form-group { display: flex; flex-direction: column; } [data-theme="light"] .sc-form-label { margin-bottom: 0.5rem; color: #6b7280; font-size: 0.9375rem; font-weight: 500; } [data-theme="light"] .sc-form-input, [data-theme="light"] .sc-input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: var(--sc-radius-md); background-color: #ffffff; color: #1f2937; font-family: Inter, sans-serif; font-size: 0.9375rem; transition: all 0.2s ease; } [data-theme="light"] .sc-form-input:focus, [data-theme="light"] .sc-input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1); } [data-theme="light"] .sc-form-input:disabled, [data-theme="light"] .sc-input:disabled { opacity: 0.5; cursor: not-allowed; } [data-theme="light"] .sc-select { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: var(--sc-radius-md); background-color: #ffffff; color: #1f2937; font-family: Inter, sans-serif; font-size: 0.9375rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem; width: 100%; box-sizing: border-box; } [data-theme="light"] .sc-select:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.1); } [data-theme="light"] .sc-select:disabled { opacity: 0.5; cursor: not-allowed; } [data-theme="light"] .sc-select option { background-color: #ffffff; color: #1f2937; } [data-theme="light"] .sc-form-radio-group { display: flex; align-items: center; gap: 1rem; min-height: 2.375rem; } [data-theme="light"] .sc-form-radio-group label { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sc-text-primary); font-weight: 500; } [data-theme="light"] .sc-form-radio-group input[type="radio"] { accent-color: var(--sc-accent); } [data-theme="light"] .sc-form-error { margin-top: 0.375rem; color: #dc2626; font-size: 0.8125rem; } [data-theme="light"] .sc-form-footer { padding: 1.5rem 2rem; border-top: 1px solid #e5e7eb; background-color: #f9fafb; display: flex; gap: 1rem; justify-content: flex-end; } [data-theme="light"] .sc-form-footer .sc-btn { display: flex; align-items: center; gap: 0.5rem; } /* ============================================================ Legacy Cadastro Forms -> New Product Form Layout (global) Applies to forms still using sc-form-container/sc-form-header/sc-form-section ============================================================ */ [data-theme="dark"] .sc-form-container, [data-theme="light"] .sc-form-container { width: 100%; max-width: none; margin: 0; padding: 0.5rem; box-sizing: border-box; background: transparent; border: none; display: flex; flex-direction: column; gap: 0.75rem; } [data-theme="dark"] .sc-form, [data-theme="light"] .sc-form { display: flex; flex-direction: column; gap: 0.75rem; } [data-theme="dark"] .sc-form-header, [data-theme="light"] .sc-form-header { padding: 0; background: transparent; color: inherit; } [data-theme="dark"] .sc-form-header-content, [data-theme="light"] .sc-form-header-content { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: 4px; background: var(--sc-accent); } [data-theme="dark"] .sc-form-header-icon, [data-theme="light"] .sc-form-header-icon { font-size: 1.25rem; opacity: 1; color: #ffffff; display: inline-flex; align-items: center; } [data-theme="dark"] .sc-form-header-icon .rzi, [data-theme="light"] .sc-form-header-icon .rzi, [data-theme="dark"] .sc-form-header-icon .material-symbols-outlined, [data-theme="light"] .sc-form-header-icon .material-symbols-outlined { color: #ffffff; font-size: 1.25rem; } [data-theme="dark"] .sc-form-header h1, [data-theme="light"] .sc-form-header h1 { margin: 0; font-size: 0.95rem; line-height: 1.2; font-weight: 700; color: #ffffff; letter-spacing: 0.03em; text-transform: uppercase; } [data-theme="dark"] .sc-form-header p, [data-theme="light"] .sc-form-header p { display: none; } [data-theme="dark"] .sc-form-footer, [data-theme="light"] .sc-form-footer { order: -1; margin: 0; padding: 0; border-top: none; background: transparent; justify-content: flex-start; gap: 0.75rem; } [data-theme="dark"] .sc-form-body, [data-theme="light"] .sc-form-body { padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } [data-theme="dark"] .sc-form-section, [data-theme="light"] .sc-form-section { margin: 0; border-radius: var(--sc-radius-md); overflow: hidden; } [data-theme="dark"] .sc-form-section { background: var(--sc-bg-surface); border: 1px solid var(--sc-border); } [data-theme="light"] .sc-form-section { background: #ffffff; border: 1px solid #e5e7eb; } [data-theme="dark"] .sc-form-section-title, [data-theme="light"] .sc-form-section-title { margin: 0; padding: 0.75rem 1.25rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 3px solid var(--sc-accent); display: inline-block; color: var(--sc-accent); } [data-theme="dark"] .sc-form-section .sc-form-row, [data-theme="light"] .sc-form-section .sc-form-row { padding: 1.25rem; margin: 0; } /* ============================================================ SC Form Page — layout padrão de formulário (topo + barra + fieldsets) ============================================================ */ /* wrapper externo da página de form */ .sc-form-page { width: 100%; max-width: none; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; } .sc-form-page--compact { gap: 0.75rem; padding: 0.5rem; } .sc-form-page--flush { padding: 0; } .sc-form-page--compact.sc-form-page--flush { gap: 1rem; } .sc-form-page--compact.sc-form-page--flush .rc-page-title { margin: 0; } .sc-form-page--compact .rc-page-title { margin: 0.25rem 0 0.5rem 0; } /* barra de botões no topo */ .sc-form-topbar { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .sc-input-action-group { display: flex; align-items: stretch; gap: 0.5rem; } .sc-input-action-group__input { flex: 1; min-width: 0; } .sc-btn--icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; min-width: 2.5rem; padding: 0; } /* Compatibilidade com telas legadas que ainda usam sc-btn-icon */ .sc-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-width: 2rem; border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); background: var(--sc-bg-input); color: var(--sc-text-secondary); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .sc-btn-icon:hover:not(:disabled) { background: var(--sc-bg-hover); color: var(--sc-text-primary); } .sc-btn-icon:focus-visible { outline: 2px solid var(--sc-info); outline-offset: 2px; } .sc-btn-icon:disabled { opacity: 0.6; cursor: not-allowed; } .sc-btn-icon .material-icons, .sc-btn-icon .material-symbols-outlined { font-size: 18px; line-height: 1; } .sc-file-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .sc-file-upload__input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sc-file-upload__trigger { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; } .sc-file-upload__name { color: var(--sc-text-secondary); font-size: 0.875rem; } /* fieldset card — equivalente nativo ao RadzenFieldset */ .sc-form-fieldset { border-radius: var(--sc-radius-md); overflow: hidden; } [data-theme="dark"] .sc-form-fieldset { background: var(--sc-bg-surface); border: 1px solid var(--sc-border); } [data-theme="light"] .sc-form-fieldset { background: #ffffff; border: 1px solid #e5e7eb; } /* aba/legenda do fieldset */ .sc-form-fieldset-legend { padding: 0.75rem 1.25rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 3px solid var(--sc-accent); display: inline-block; } [data-theme="dark"] .sc-form-fieldset-legend { color: var(--sc-accent); } [data-theme="light"] .sc-form-fieldset-legend { color: var(--sc-accent); } /* conteúdo dentro do fieldset */ .sc-form-fieldset-body { padding: 1.5rem 1.25rem; } /* -- Radzen FieldSet / Panel -- */ /* Native checkbox styling */ [data-theme="dark"] .sc-checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--sc-accent); vertical-align: middle; margin-right: 0.5rem; } [data-theme="light"] .sc-checkbox { width: 1.25rem; height: 1.25rem; cursor: pointer; accent-color: var(--sc-accent); vertical-align: middle; margin-right: 0.5rem; } [data-theme="dark"] .rz-fieldset { border-color: var(--sc-border) !important; } [data-theme="dark"] .rz-fieldset-legend { color: var(--sc-text-primary) !important; } /* -- Radzen Panel Menu (sc-nav-menu) -- */ /* Shared layout props */ .sc-nav-menu { --rz-panel-menu-background-color: transparent; --rz-panel-menu-item-background-color: transparent; --rz-panel-menu-item-2nd-level-background-color: transparent; --rz-base-300: transparent; --rz-panel-menu-item-border: none; --rz-panel-menu-item-padding-x: 0.75rem; --rz-panel-menu-item-padding-y: 0.3rem; --rz-panel-menu-item-active-background-color: var(--sc-accent); --rz-panel-menu-item-active-color: #ffffff; --rz-panel-menu-item-2nd-level-active-background-color: var(--sc-accent); --rz-panel-menu-item-2nd-level-active-color: #ffffff; --rz-panel-menu-item-color: var(--sc-text-sidebar); --rz-panel-menu-icon-color: var(--sc-text-sidebar-muted); --rz-panel-menu-item-2nd-level-color: var(--sc-text-sidebar); --rz-panel-menu-item-hover-color: #ffffff; --rz-panel-menu-item-hover-background-color: var(--sc-sidebar-item-hover); --rz-panel-menu-item-2nd-level-hover-color: #ffffff; --rz-panel-menu-item-2nd-level-hover-background-color: var(--sc-sidebar-item-hover); } /* Force sidebar text/icon colors — override Radzen --rz-primary link color */ .sc-nav-menu .rz-navigation-item-text, .sc-nav-menu .rz-panel-menu-item-text { color: var(--sc-text-sidebar) !important; } .sc-nav-menu .rzi, .sc-nav-menu .rz-navigation-item-icon { color: var(--sc-text-sidebar-muted) !important; } /* Hover state */ .sc-nav-menu .rz-navigation-item:hover .rz-navigation-item-text, .sc-nav-menu .rz-panel-menu-item:hover .rz-panel-menu-item-text { color: #ffffff !important; } .sc-nav-menu .rz-navigation-item:hover .rzi, .sc-nav-menu .rz-panel-menu-item:hover .rzi { color: #ffffff !important; } /* Active state — white text AND white icon on accent background */ .sc-nav-menu .rz-navigation-item.active .rz-navigation-item-text, .sc-nav-menu .rz-panel-menu-item.selected .rz-panel-menu-item-text, .sc-nav-menu .rz-navigation-item.active .rzi, .sc-nav-menu .rz-panel-menu-item.selected .rzi, .sc-nav-menu .rz-navigation-item.active .rz-navigation-item-icon, .sc-nav-menu .rz-panel-menu-item.selected .rz-navigation-item-icon { color: #ffffff !important; } /* -- Radzen Gantt -- */ [data-theme="dark"] { --rz-gantt-background-color: var(--sc-bg-surface); --rz-gantt-border: 1px solid var(--sc-grid-border); } /* Gantt container */ [data-theme="dark"] .rz-gantt { background: var(--sc-bg-surface) !important; border-color: var(--sc-grid-border) !important; color: var(--sc-text-primary) !important; } /* Gantt table — left column */ [data-theme="dark"] .rz-gantt .rz-data-grid, [data-theme="dark"] .rz-gantt .rz-grid-table { background: var(--sc-grid-bg) !important; } [data-theme="dark"] .rz-gantt .rz-grid-table thead th { background: var(--sc-grid-header-bg) !important; color: var(--sc-text-primary) !important; border-color: var(--sc-grid-border) !important; } [data-theme="dark"] .rz-gantt .rz-grid-table tbody td { background: var(--sc-grid-bg); color: var(--sc-text-primary) !important; border-color: var(--sc-grid-border) !important; } [data-theme="dark"] .rz-gantt .rz-grid-table tbody tr:nth-child(even) td { background: var(--sc-grid-row-alt); } [data-theme="dark"] .rz-gantt .rz-grid-table tbody tr:hover:not(.rz-state-highlight) td { background: var(--sc-grid-row-hover) !important; } /* Gantt timeline — right side */ [data-theme="dark"] .rz-gantt .rz-gantt-timeline-view, [data-theme="dark"] .rz-gantt .rz-gantt-timeline-content { background: var(--sc-grid-bg) !important; } [data-theme="dark"] .rz-gantt .rz-gantt-timeline-row { background: var(--sc-grid-bg); border-color: var(--sc-grid-border) !important; } [data-theme="dark"] .rz-gantt .rz-gantt-timeline-row:nth-child(even) { background: var(--sc-grid-row-alt); } /* Gantt header dates row */ [data-theme="dark"] .rz-gantt .rz-gantt-header, [data-theme="dark"] .rz-gantt .rz-gantt-table-header-cell { background: var(--sc-grid-header-bg) !important; color: var(--sc-text-secondary) !important; border-color: var(--sc-grid-border) !important; } /* Gantt scrollable data area */ [data-theme="dark"] .rz-gantt .rz-data-grid-data { background: var(--sc-grid-bg) !important; } /* -- Loading Overlay -- */ [data-theme="dark"] .app-loading-card { background: var(--sc-bg-surface); color: var(--sc-text-primary); } [data-theme="dark"] .app-loading-subtitle { color: var(--sc-text-muted); } /* -- Reconnect Modal -- */ [data-theme="dark"] .reconnect-card { background: var(--sc-bg-surface); color: var(--sc-text-primary); } /* -- ApexCharts (dark mode contrast) -- */ [data-theme="dark"] .apexcharts-title-text, [data-theme="dark"] .apexcharts-subtitle-text, [data-theme="dark"] .apexcharts-legend-text, [data-theme="dark"] .apexcharts-xaxis-label, [data-theme="dark"] .apexcharts-yaxis-label, [data-theme="dark"] .apexcharts-datalabel, [data-theme="dark"] .apexcharts-datalabel-label, [data-theme="dark"] .apexcharts-datalabel-value, [data-theme="dark"] .apexcharts-text { fill: var(--sc-chart-text-primary) !important; color: var(--sc-chart-text-primary) !important; fill-opacity: 1 !important; } [data-theme="dark"] .apexcharts-xaxis-title, [data-theme="dark"] .apexcharts-yaxis-title, [data-theme="dark"] .apexcharts-legend-series { fill: var(--sc-chart-text-secondary) !important; color: var(--sc-chart-text-secondary) !important; opacity: 1 !important; } [data-theme="dark"] .apexcharts-toolbar svg, [data-theme="dark"] .apexcharts-menu-icon svg, [data-theme="dark"] .apexcharts-reset-icon svg, [data-theme="dark"] .apexcharts-zoom-icon svg, [data-theme="dark"] .apexcharts-zoomin-icon svg, [data-theme="dark"] .apexcharts-zoomout-icon svg, [data-theme="dark"] .apexcharts-pan-icon svg, [data-theme="dark"] .apexcharts-selection-icon svg, [data-theme="dark"] .apexcharts-home-icon svg { fill: var(--sc-chart-text-secondary) !important; stroke: var(--sc-chart-text-secondary) !important; } [data-theme="dark"] .apexcharts-toolbar svg:hover, [data-theme="dark"] .apexcharts-menu-icon:hover svg { fill: var(--sc-chart-text-primary) !important; stroke: var(--sc-chart-text-primary) !important; } /* ============================================================ SC Buttons — global (used in pages and components) ============================================================ */ .sc-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid transparent; border-radius: var(--sc-radius-md); padding: 0.45rem 0.9rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.2; cursor: pointer; background: var(--sc-bg-input); color: var(--sc-text-primary); transition: background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease; } .sc-btn:focus-visible { outline: 2px solid var(--sc-info); outline-offset: 2px; } .sc-btn:disabled { opacity: 0.6; cursor: not-allowed; } .sc-btn--primary { background-color: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-text-on-solid); } .sc-btn--primary:hover:not(:disabled) { background-color: var(--sc-accent-hover); border-color: var(--sc-accent-hover); } .sc-btn--success { background-color: var(--sc-success); border-color: var(--sc-success); color: var(--sc-text-on-solid); } .sc-btn--success:hover:not(:disabled) { filter: brightness(0.95); } .sc-btn--secondary { background-color: var(--sc-bg-input); border-color: var(--sc-border); color: var(--sc-text-secondary); } .sc-btn--secondary:hover:not(:disabled) { background-color: var(--sc-bg-hover); color: var(--sc-text-primary); } .sc-btn--danger { background-color: var(--sc-danger); border-color: var(--sc-danger); color: var(--sc-text-on-solid); } .sc-btn--danger:hover:not(:disabled) { filter: brightness(0.9); } .sc-btn--warning { background-color: var(--sc-warning); border-color: var(--sc-warning); color: var(--sc-text-on-solid); } .sc-btn--warning:hover:not(:disabled) { filter: brightness(0.9); } .sc-btn--info { background-color: var(--sc-info); border-color: var(--sc-info); color: var(--sc-text-on-solid); } .sc-btn--info:hover:not(:disabled) { filter: brightness(0.9); } .sc-btn--light { background-color: var(--sc-bg-surface); border-color: var(--sc-border); color: var(--sc-text-muted); } .sc-btn--light:hover:not(:disabled) { background-color: var(--sc-bg-hover); color: var(--sc-text-primary); } /* Ghost (Variant.Text) — transparent fill, keeps icon/text color from ButtonStyle */ .sc-btn--ghost { background: transparent; border-color: transparent; } .sc-btn--ghost:hover:not(:disabled) { background: var(--sc-bg-hover); } .sc-btn--ghost.sc-btn--primary { color: var(--sc-accent); } .sc-btn--ghost.sc-btn--success { color: var(--sc-success); } .sc-btn--ghost.sc-btn--danger { color: var(--sc-danger); } .sc-btn--ghost.sc-btn--warning { color: var(--sc-warning); } .sc-btn--ghost.sc-btn--info { color: var(--sc-info); } .sc-btn--ghost.sc-btn--secondary { color: var(--sc-text-secondary); } .sc-btn--ghost.sc-btn--light { color: var(--sc-text-muted); } /* Outlined (Variant.Outlined) — transparent fill, colored border and text */ .sc-btn--outlined { background: transparent; } .sc-btn--outlined:hover:not(:disabled) { background: var(--sc-bg-hover); } .sc-btn--outlined.sc-btn--primary { border-color: var(--sc-accent); color: var(--sc-accent); } .sc-btn--outlined.sc-btn--success { border-color: var(--sc-success); color: var(--sc-success); } .sc-btn--outlined.sc-btn--danger { border-color: var(--sc-danger); color: var(--sc-danger); } .sc-btn--outlined.sc-btn--warning { border-color: var(--sc-warning); color: var(--sc-warning); } .sc-btn--outlined.sc-btn--info { border-color: var(--sc-info); color: var(--sc-info); } .sc-btn--outlined.sc-btn--secondary { border-color: var(--sc-border); color: var(--sc-text-secondary); } .sc-btn--outlined.sc-btn--light { border-color: var(--sc-border); color: var(--sc-text-muted); } @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: block; src: url('fonts/material-symbols-outlined-400.ttf') format('truetype'); } /* Material Symbols Outlined — self-hosted */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 1.1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; vertical-align: middle; } /* RC Page Actions toolbar */ .rc-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* RC Filter Status Bar — exibe os filtros ativos abaixo das ações */ .rc-filter-status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: var(--sc-bg-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-md); font-size: 0.8125rem; } .rc-filter-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; background: var(--sc-accent-light); border: 1px solid var(--sc-accent); border-radius: 100px; color: var(--sc-text-primary); font-size: 0.78rem; white-space: nowrap; } .rc-filter-tag b { color: var(--sc-accent); font-weight: 600; }