/* ============================================================ CRM theme — maps the generic Team.Core.Blazor.Components --tcc-* tokens (defined in teamcore-components.css) and the CRM shell --crm-* tokens to two palettes: a clean light default and an EOM-style dark variant. Loaded AFTER teamcore-components.css so these overrides win; the dark block uses the [data-theme="dark"] attribute set on by the crmTheme helper in index.html. Only colour / surface tokens change between themes — shape, weight and spacing stay constant so toggling a theme just flips the palette. ============================================================ */ /* --------------------------------------------------------------------------- LIGHT (default). team.core's stock light defaults, re-pointed to the Emsurge gold accent so the CRM reads as part of the family while staying bright and legible for dense tables and forms. --------------------------------------------------------------------------- */ :root { /* Shell */ --crm-bg: #f5f6f8; --crm-surface: #ffffff; --crm-surface-2: #fafbfc; --crm-text: #1f2937; --crm-text-muted: #6b7280; --crm-border: #e5e7eb; --crm-nav-bg: #ffffff; --crm-nav-border: #e5e7eb; --crm-accent: #9a6d1c; --crm-accent-soft: rgba(154, 109, 28, .1); --crm-danger: #b3261e; --crm-shadow-nav: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --crm-font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* team.core component tokens — accent everything gold. */ --tcc-font: var(--crm-font); --tcc-font-display: var(--crm-font); --tcc-btn-primary-bg: #9a6d1c; --tcc-btn-primary-bg-hover: #845c14; --tcc-btn-primary-fg: #ffffff; --tcc-icon-primary: #9a6d1c; --tcc-iconbtn-primary-bg: #9a6d1c; --tcc-field-accent: #9a6d1c; --tcc-chip-accent-bg: var(--crm-accent-soft); --tcc-chip-accent-fg: #7a5616; --tcc-stepper-accent: #9a6d1c; --tcc-switch-track-on: #9a6d1c; --tcc-radio-checked: #9a6d1c; --tcc-checkbox-checked-bg: #9a6d1c; --tcc-tab-accent: #9a6d1c; --tcc-grid-accent: #9a6d1c; --tcc-grid-hover: rgba(154, 109, 28, .07); --tcc-grid-selected: rgba(154, 109, 28, .13); --tcc-nav-active-fg: #9a6d1c; --tcc-nav-active-bg: var(--crm-accent-soft); --tcc-nav-active-accent: #9a6d1c; } /* --------------------------------------------------------------------------- DARK (EOM-style). Mirrors EOM's teamcore-eom-theme.css palette: dark slate surfaces (rgb(17,23,32) page, #182431 cards), gold primary, light text — without EOM's MudBlazor-derived tokens (CRM has no MudBlazor). --------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* Shell */ --crm-bg: #111720; --crm-surface: #182431; --crm-surface-2: #1e2d3a; --crm-text: #e9e3de; --crm-text-muted: #9aa6b2; --crm-border: #2f3746; --crm-nav-bg: #182431; --crm-nav-border: #2f3746; --crm-accent: #c9b07a; --crm-accent-soft: rgba(154, 109, 28, .18); --crm-danger: #f8a0ac; --crm-shadow-nav: 0 1px 0 rgba(0, 0, 0, .4); /* Buttons */ --tcc-btn-primary-bg: #9a6d1c; --tcc-btn-primary-bg-hover: #b9842a; --tcc-btn-primary-fg: #ffffff; --tcc-btn-secondary-bg: #1e2d3a; --tcc-btn-secondary-fg: #e9e3de; --tcc-btn-secondary-bg-hover: #26384a; --tcc-btn-ghost-fg: #c7c8c9; --tcc-btn-ghost-border: #2f3746; --tcc-btn-ghost-fg-hover: #ffffff; --tcc-btn-danger-bg: #f84c64; --tcc-btn-danger-bg-hover: #e23552; --tcc-btn-success-bg: rgba(11, 186, 131, 1); --tcc-btn-success-bg-hover: rgba(10, 167, 118, 1); /* Icons */ --tcc-icon-primary: #c9b07a; --tcc-icon-success: rgba(11, 186, 131, 1); --tcc-icon-warning: rgba(255, 168, 0, 1); --tcc-icon-danger: rgba(246, 78, 98, 1); --tcc-iconbtn-fg: #c7c8c9; --tcc-iconbtn-hover-bg: rgba(255, 255, 255, .08); --tcc-iconbtn-primary-bg: #9a6d1c; --tcc-iconbtn-disabled-fg: #6b7280; --tcc-iconbtn-disabled-bg: rgba(255, 255, 255, .07); /* Cards + dialogs (the base .tcc-dialog draws on --tcc-card-bg, so a solid dark card surface covers both). */ --tcc-card-bg: #182431; --tcc-card-border: #2f3746; /* Fields */ --tcc-field-scheme: dark; --tcc-field-bg: #1e2d3a; --tcc-field-bg-hover: #26384a; --tcc-field-fg: #e9e3de; --tcc-field-label: #9aa6b2; --tcc-field-placeholder: #6b7886; --tcc-field-line: #3a4a5a; --tcc-field-accent: #9a6d1c; --tcc-field-disabled-bg: #18222c; --tcc-ac-surface: #182431; --tcc-ac-fg: #e9e3de; --tcc-ac-hover: #26384a; --tcc-ac-border: #2f3746; --tcc-popover-surface: #182431; --tcc-popover-fg: #e9e3de; --tcc-popover-border: #2f3746; /* Chips */ --tcc-chip-bg: #1e2d3a; --tcc-chip-fg: #e9e3de; --tcc-chip-accent-bg: rgba(154, 109, 28, .25); --tcc-chip-accent-fg: #c9b07a; --tcc-chipset-bg: #1e2d3a; --tcc-chipset-fg: #e9e3de; --tcc-chipset-hover-bg: #26384a; --tcc-chipset-selected-bg: #9a6d1c; --tcc-chipset-selected-fg: #ffffff; /* Banners — dark tinted surfaces with the severity colour on the accent edge (the light pastels would glare). */ --tcc-banner-info-bg: rgba(59, 130, 246, .12); --tcc-banner-info-border: #3b82f6; --tcc-banner-info-fg: #cfe1fb; --tcc-banner-success-bg: rgba(16, 185, 129, .12); --tcc-banner-success-border: #10b981; --tcc-banner-success-fg: #c7f0e1; --tcc-banner-warning-bg: rgba(245, 158, 11, .12); --tcc-banner-warning-border: #f59e0b; --tcc-banner-warning-fg: #f3ddb0; --tcc-banner-urgent-bg: rgba(248, 76, 100, .12); --tcc-banner-urgent-border: #f84c64; --tcc-banner-urgent-fg: #f8c9d0; /* Controls */ --tcc-switch-track: #3a4a5a; --tcc-switch-track-on: #9a6d1c; --tcc-switch-thumb: #e9e3de; --tcc-radio-border: #5f6b78; --tcc-radio-checked: #9a6d1c; --tcc-checkbox-border: #5f6b78; --tcc-checkbox-checked-bg: #9a6d1c; --tcc-checkbox-checked-fg: #ffffff; /* Tooltip */ --tcc-tooltip-bg: #2f3746; --tcc-tooltip-fg: #e9e3de; /* Tabs */ --tcc-tab-fg: #c7c8c9; --tcc-tab-fg-hover: #ffffff; --tcc-tab-fg-active: #c9b07a; --tcc-tab-accent: #9a6d1c; /* Panels */ --tcc-panel-line: #2f3746; --tcc-panel-header-hover-bg: rgba(255, 255, 255, .06); /* DataGrid / tables */ --tcc-grid-fg: #e9e3de; --tcc-grid-muted: #9aa0a6; --tcc-grid-line: #2f3746; --tcc-grid-surface: #111720; --tcc-grid-head-bg: #182431; --tcc-grid-stripe: #182431; --tcc-grid-hover: rgba(154, 109, 28, .30); --tcc-grid-selected: rgba(121, 86, 22, .5); --tcc-grid-accent: #9a6d1c; --tcc-grid-totals-bg: #182431; /* Nav */ --tcc-nav-active-fg: #c9b07a; --tcc-nav-active-bg: rgba(154, 109, 28, .15); --tcc-nav-active-accent: #9a6d1c; --tcc-shadow-s: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); --tcc-shadow: 0 6px 10px -3px rgba(0, 0, 0, .4); }