/* ========================================================================== Admin theme bridge — brand-NEUTRAL (IRES-14218 fase 2) Everything in here used to live in themes/gasto/css/theme.css. It is not brand-specific: it maps the --ires-* design tokens (see css/skins/*.css) onto every framework and widget the admin renders with, and it repairs the surfaces that hardcode a light literal. Keeping it here means a new skin is a token file, not another copy of this !important war. Loaded by AdminControl AFTER Bootstrap and the base admin CSS, BEFORE the brand theme, and never minified/cached with the base bundle. Two parts, and the split matters: A. var → var mappings on :root. Always active. Every one of them is a no-op for the classic look because css/skins/default.css declares the framework's own default as the token value. B. selector overrides, scoped to [data-ires-skin]. These DO change pixels, so they only apply once a skin is actually selected (AdminControl puts the attribute on ). The classic admin stays byte-identical until fase 3 has tokenised the base CSS. ========================================================================== */ /* ========================================================================== PART A — token mappings (always on, no-op for the classic look) ========================================================================== */ /* — Bootstrap. Listed for light AND dark in one rule: this sheet loads after Bootstrap, and :root would otherwise beat Bootstrap's own [data-bs-theme=dark] block on source order and freeze the admin in light values. — */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-primary: var(--ires-primary); --bs-primary-rgb: var(--ires-primary-rgb); --bs-body-bg: var(--ires-bg); --bs-body-color: var(--ires-text); --bs-secondary-color: var(--ires-muted); --bs-tertiary-color: var(--ires-faint); --bs-secondary-bg: var(--ires-surface-2); --bs-tertiary-bg: var(--ires-surface-2); --bs-border-color: var(--ires-border); --bs-success: var(--ires-success); --bs-warning: var(--ires-warning); --bs-danger: var(--ires-danger); --bs-info: var(--ires-info); --bs-link-color: var(--ires-link); --bs-link-hover-color: var(--ires-link-hover); --bs-border-radius: var(--ires-radius-md); --bs-border-radius-sm: var(--ires-radius-sm); --bs-border-radius-lg: var(--ires-radius-lg); --bs-border-radius-xl: var(--ires-radius-xl); --bs-border-radius-pill: var(--ires-radius-pill); --bs-font-sans-serif: var(--ires-font-body); --bs-body-font-family: var(--ires-font-body); --bs-font-monospace: var(--ires-font-mono); } /* — ires-core-library host-override knobs (underscore convention). "Explicitly themed host wins": the library uses these instead of guessing from background luminance. They reference --ires-* so they flip with data-bs-theme on their own — no separate dark block. See docs/multi-branding/brand-token-contract.md. — */ :root { --ires_accent: var(--ires-primary); --ires_accent_fg: var(--ires-on-primary); --ires_surface_bg: var(--ires-surface); --ires_surface_raised_bg: var(--ires-surface); --ires_surface_fg: var(--ires-text); --ires_surface_border: var(--ires-border); --ires_surface_muted: var(--ires-muted); --ires_surface_hover: var(--ires-surface-hover); --ires_danger: var(--ires-danger); --ires_success: var(--ires-success); --ires_warning: var(--ires-warning); --ires_disabled_fg: var(--ires-disabled-fg); --ires_disabled_bg: var(--ires-disabled-bg); } /* — Bootstrap button variants compile --bs-btn-* statically from Sass; they do NOT read --bs-primary. So map each variant's local vars. The percentages reproduce Bootstrap's own shade/tint steps exactly (hover 15%, hover-border 20%, active 20%, active-border 25% for the dark variants; tint 15/10/20/10 for the light ones, warning and info, where Bootstrap lightens instead of darkens) — that is what keeps this block a no-op for the classic look. A skin whose warning/info is dark gets a lighter hover, which still reads as a hover. — */ .btn-primary { --bs-btn-bg: var(--ires-primary); --bs-btn-border-color: var(--ires-primary); --bs-btn-color: var(--ires-on-primary); --bs-btn-hover-color: var(--ires-on-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--ires-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ires-primary) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ires-primary) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ires-primary) 75%, #000); --bs-btn-disabled-bg: var(--ires-primary); --bs-btn-disabled-border-color: var(--ires-primary); } .btn-outline-primary { --bs-btn-color: var(--ires-primary); --bs-btn-border-color: var(--ires-primary); --bs-btn-hover-bg: var(--ires-primary); --bs-btn-hover-border-color: var(--ires-primary); --bs-btn-hover-color: var(--ires-on-primary); --bs-btn-active-bg: var(--ires-primary); --bs-btn-active-border-color: var(--ires-primary); --bs-btn-active-color: var(--ires-on-primary); } .btn-success { --bs-btn-bg: var(--ires-success); --bs-btn-border-color: var(--ires-success); --bs-btn-color: var(--ires-on-success); --bs-btn-hover-color: var(--ires-on-success); --bs-btn-hover-bg: color-mix(in srgb, var(--ires-success) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ires-success) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ires-success) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ires-success) 75%, #000); } .btn-outline-success { --bs-btn-color: var(--ires-success); --bs-btn-border-color: var(--ires-success); --bs-btn-hover-bg: var(--ires-success); --bs-btn-hover-border-color: var(--ires-success); --bs-btn-hover-color: var(--ires-on-success); --bs-btn-active-bg: var(--ires-success); --bs-btn-active-color: var(--ires-on-success); } .btn-danger { --bs-btn-bg: var(--ires-danger); --bs-btn-border-color: var(--ires-danger); --bs-btn-color: var(--ires-on-danger); --bs-btn-hover-color: var(--ires-on-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--ires-danger) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--ires-danger) 80%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--ires-danger) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--ires-danger) 75%, #000); } .btn-outline-danger { --bs-btn-color: var(--ires-danger); --bs-btn-border-color: var(--ires-danger); --bs-btn-hover-bg: var(--ires-danger); --bs-btn-hover-border-color: var(--ires-danger); --bs-btn-hover-color: var(--ires-on-danger); --bs-btn-active-bg: var(--ires-danger); --bs-btn-active-color: var(--ires-on-danger); } .btn-warning { --bs-btn-bg: var(--ires-warning); --bs-btn-border-color: var(--ires-warning); --bs-btn-color: var(--ires-on-warning); --bs-btn-hover-color: var(--ires-on-warning); --bs-btn-hover-bg: color-mix(in srgb, var(--ires-warning) 85%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--ires-warning) 90%, #fff); --bs-btn-active-bg: color-mix(in srgb, var(--ires-warning) 80%, #fff); --bs-btn-active-border-color: color-mix(in srgb, var(--ires-warning) 90%, #fff); } .btn-outline-warning { --bs-btn-color: var(--ires-warning); --bs-btn-border-color: var(--ires-warning); --bs-btn-hover-bg: var(--ires-warning); --bs-btn-hover-border-color: var(--ires-warning); --bs-btn-hover-color: var(--ires-on-warning); --bs-btn-active-bg: var(--ires-warning); --bs-btn-active-color: var(--ires-on-warning); } .btn-info { --bs-btn-bg: var(--ires-info); --bs-btn-border-color: var(--ires-info); --bs-btn-color: var(--ires-on-info); --bs-btn-hover-color: var(--ires-on-info); --bs-btn-hover-bg: color-mix(in srgb, var(--ires-info) 85%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--ires-info) 90%, #fff); --bs-btn-active-bg: color-mix(in srgb, var(--ires-info) 80%, #fff); --bs-btn-active-border-color: color-mix(in srgb, var(--ires-info) 90%, #fff); } .btn-outline-info { --bs-btn-color: var(--ires-info); --bs-btn-border-color: var(--ires-info); --bs-btn-hover-bg: var(--ires-info); --bs-btn-hover-border-color: var(--ires-info); --bs-btn-hover-color: var(--ires-on-info); --bs-btn-active-bg: var(--ires-info); --bs-btn-active-color: var(--ires-on-info); } /* ========================================================================== PART B — surface repairs. Scoped to [data-ires-skin]: these change pixels, so the classic admin (no skin attribute) is untouched. Everything below is token-driven, so it serves every skin in both light and dark. ========================================================================== */ /* — dhtmlx suite (grids, forms, charts). It derives every surface, border, overlay and accent from HSL component vars, so set THOSE, not only the derived ones, or header/rows/hover keep the dhtmlx defaults. Skin-scoped on purpose: individual grids can ask for a dhtmlx theme of their own (data-dhx-theme), and an unscoped override would silently win over that on the classic admin. Under a skin the skin owns the palette, so overriding is the intent. — */ [data-ires-skin] .dhx_widget, [data-ires-skin] [class*="dhx_"] { --dhx-h-background: var(--ires-dhx-h-bg); --dhx-s-background: var(--ires-dhx-s-bg); --dhx-l-background: var(--ires-dhx-l-bg); --dhx-h-primary: var(--ires-dhx-h-primary); --dhx-s-primary: var(--ires-dhx-s-primary); --dhx-l-primary: var(--ires-dhx-l-primary); /* grid header cells read this dedicated var, not the derived background ones. */ --dhx-s-grid-header-background: var(--ires-grid-header-bg); /* Context-dependent inside dhtmlx (.5 / .66 / white per widget), hence skin-only as well. */ --dhx-font-color-secondary: var(--ires-dhx-font-secondary); --dhx-font-color-additional: var(--ires-dhx-font-additional); } /* — dhtmlxScheduler (rooster) has its OWN token system, independent of data-bs-theme. MUST be on the root element, not on the container: its derived vars (container-background → timescale-background → cell bg) are declared on :root and resolve there, so overriding the base further down the tree is too late. This sheet loads after dhtmlxscheduler.css, so :root here wins on source order and the whole derived chain re-resolves. Covers body-appended popups too. Scoped with [data-ires-skin] because the widget ships its own blue accent (#537CFA) that the classic admin has always had. — */ :root[data-ires-skin] { --dhx-scheduler-base-colors-background: var(--ires-surface); --dhx-scheduler-base-colors-white: var(--ires-surface); --dhx-scheduler-base-colors-text-base: var(--ires-text); --dhx-scheduler-base-colors-text-light: var(--ires-muted); --dhx-scheduler-base-colors-border: var(--ires-border); --dhx-scheduler-base-colors-select: var(--ires-primary-soft); --dhx-scheduler-base-colors-hover-color: var(--ires-surface-2); --dhx-scheduler-base-colors-secondary: var(--ires-surface-2); --dhx-scheduler-base-colors-primary: var(--ires-primary); --dhx-scheduler-base-colors-primary-hover: var(--ires-link-hover); --dhx-scheduler-base-colors-primary-active: var(--ires-primary); --dhx-scheduler-base-colors-primary-lighter: var(--ires-primary-soft); --dhx-scheduler-event-background: var(--ires-primary); --dhx-scheduler-event-color: var(--ires-on-primary); --dhx-scheduler-today-marker-color: var(--ires-primary); } [data-ires-skin] body, body[data-ires-skin] { font-family: var(--ires-font-body); background: var(--ires-bg); color: var(--ires-text); } [data-ires-skin] h1, [data-ires-skin] h2, [data-ires-skin] h3, [data-ires-skin] h4, [data-ires-skin] h5, [data-ires-skin] h6, [data-ires-skin] .sidebar-brand, [data-ires-skin] .navbar-brand { font-family: var(--ires-font-display); letter-spacing: var(--ires-heading-tracking); } /* — Section titles. Whether a card title is a heading or a quiet uppercase label is a design decision, not a colour, so it is a token the skin sets and this rule consumes. The contract's defaults (none / normal / 1rem / 600 / text) reproduce what a card header looked like before. — */ [data-ires-skin] .card-header, [data-ires-skin] #dashboard-table .mod-header h3 span[id*="_text"], [data-ires-skin] .mod-header h3 { text-transform: var(--ires-label-transform); letter-spacing: var(--ires-label-tracking); font-size: var(--ires-label-size); font-weight: var(--ires-label-weight); color: var(--ires-label-color); } /* — Hairline between rows instead of a zebra fill. Transparent by default, so a skin that wants zebra simply leaves it alone. — */ [data-ires-skin] .table > tbody > tr { border-bottom: 1px solid var(--ires-row-divider); } /* DATA font — opt-in on aligning values (ids, amounts, times, codes). */ [data-ires-skin] .mono, [data-ires-skin] .font-monospace, [data-ires-skin] code, [data-ires-skin] kbd, [data-ires-skin] samp { font-family: var(--ires-font-mono); font-variant-numeric: tabular-nums; } /* — Admin shell chrome. Real selectors from mainmenu_sidebar.css. !important is used ONLY where fighting a Bootstrap utility (.bg-light), which is itself !important. — */ [data-ires-skin] body.ires-admin-sidebar { background-color: var(--ires-bg); } [data-ires-skin] body.ires-admin-sidebar .sidebar { background-color: var(--ires-sidebar) !important; border-right: 1px solid var(--ires-border) !important; } [data-ires-skin] body.ires-admin-sidebar .topbar { background-color: var(--ires-bg) !important; border-color: var(--ires-border); } [data-ires-skin] body.ires-admin-sidebar .misc-bar { background-color: var(--ires-surface) !important; border-color: var(--ires-border); } [data-ires-skin] body.ires-admin-sidebar .admin-footer, [data-ires-skin] .footer, [data-ires-skin] #qs-modern-root .qs-modern-footer { background-color: var(--ires-bg) !important; border-color: var(--ires-border) !important; color: var(--ires-muted) !important; } /* Nav items: ink by default, subtle hover, accent-soft when active. */ [data-ires-skin] body.ires-admin-sidebar .sidebar .nav-link, [data-ires-skin] body.ires-admin-sidebar .btn-toggle, [data-ires-skin] body.ires-admin-sidebar .btn-toggle-nav a { color: var(--ires-text); } [data-ires-skin] body.ires-admin-sidebar .btn-toggle:hover, [data-ires-skin] body.ires-admin-sidebar .btn-toggle:focus, [data-ires-skin] body.ires-admin-sidebar .sidebar .nav-link:hover, [data-ires-skin] body.ires-admin-sidebar .btn-toggle-nav a:hover, [data-ires-skin] body.ires-admin-sidebar .btn-toggle-nav a:focus { background-color: var(--ires-nav-hover); border-radius: var(--ires-radius-md); } /* Submenu + recent-items links carry Bootstrap's .link-dark (!important, does NOT flip in dark → near-black on a dark sidebar). Force readable text. */ [data-ires-skin] body.ires-admin-sidebar .sidebar a.link-dark { color: var(--ires-text) !important; } [data-ires-skin] body.ires-admin-sidebar .sidebar a.link-dark:hover, [data-ires-skin] body.ires-admin-sidebar .sidebar a.link-dark:focus { color: var(--ires-primary) !important; } [data-ires-skin] body.ires-admin-sidebar .sidebar .nav-link.active, [data-ires-skin] body.ires-admin-sidebar .btn-toggle-nav a.active { background-color: var(--ires-nav-active-bg) !important; color: var(--ires-nav-active-fg) !important; border-radius: var(--ires-radius-md); } [data-ires-skin] body.ires-admin-sidebar .sidebar-pin { background-color: var(--ires-surface-2); border-color: var(--ires-border); } [data-ires-skin] body.ires-admin-sidebar .btn-profile { background-color: var(--ires-text); color: var(--ires-bg); } [data-ires-skin] body.ires-admin-sidebar .btn-profile:hover { background-color: color-mix(in srgb, var(--ires-text) 88%, #000); color: var(--ires-bg); } /* — Cards, tables, focus — where Bootstrap vars fall short. — */ [data-ires-skin] .card { background: var(--ires-surface); border: 1px solid var(--ires-border); border-radius: var(--ires-radius-lg); box-shadow: var(--ires-shadow-sm); } [data-ires-skin] .table tbody tr:hover { background: var(--ires-row-hover); } [data-ires-skin] .form-control:focus, [data-ires-skin] .form-select:focus { border-color: var(--ires-primary); box-shadow: var(--ires-focus-ring); } /* Chrome header strips (card / modal) → the sidebar tint, so they read as their own band next to the body. Beats .bg-white. NOT the dashboard block header: each block carries a colour the user picked (.ModuleHeader_color_ in sb_dashboard_colors.css), with its label set to white or black to match. Painting over the background here left that label untouched -- white on white, an unreadable header on every coloured block. Same rule as everywhere else in this theming work: a swatch the user chose is content, not chrome, and a skin does not get to override it. */ [data-ires-skin] .card-header, [data-ires-skin] .card-header.bg-white, [data-ires-skin] .modal-header { background-color: var(--ires-sidebar) !important; border-bottom-color: var(--ires-border) !important; color: var(--ires-text); } /* The popup title is its own

computing to hardcoded black, so it does not inherit the header colour → black-on-dark. Pin it. */ [data-ires-skin] .modal-title, [data-ires-skin] .modal-header .modal-title { color: var(--ires-text) !important; } /* — Grid identity. grid.css hardcodes .alternate_row to #fff / #F8F8F8 (theme-unaware literals the --dhx mapping cannot reach), so re-point with higher specificity. — */ [data-ires-skin] .dhx_grid.ires-dhtmlx { border: 1px solid var(--ires-border); border-radius: var(--ires-radius-md); box-shadow: var(--ires-shadow-sm); overflow: hidden; } [data-ires-skin] .ires-dhtmlx .dhx_grid-header-cell { border-bottom: 2px solid var(--ires-border); font-weight: 600; } [data-ires-skin] .ires-dhtmlx.alternate_row .dhx_grid-row { background: var(--ires-surface); } [data-ires-skin] .ires-dhtmlx.alternate_row .dhx_grid-row:nth-child(2n) { background: var(--ires-zebra); } [data-ires-skin] .ires-dhtmlx .dhx_grid-row { border-bottom: 1px solid color-mix(in srgb, var(--ires-border) 55%, transparent); } [data-ires-skin] .dhx_widget--bg_white, [data-ires-skin] .dhx_chart { background: var(--ires-surface) !important; color: var(--ires-text); } /* roster7.css hardcodes the scheduler container to white, which shows through the transparent day/section headers. */ [data-ires-skin] .roster_container .dhx_cal_container { background-color: var(--ires-surface) !important; } /* The scheduler navline is transparent, so it just shows the canvas. Give it the same chrome band as the card/modal/editor toolbars. */ [data-ires-skin] .dhx_cal_navline { background-color: var(--ires-sidebar); border-bottom: 1px solid var(--ires-border); } /* — TinyMCE chrome renders in the PARENT dom (only the content is in an iframe), so style it here; the iframe content is themed via content_style in admin-ui.js. — */ [data-ires-skin] .tox.tox-tinymce { border-color: var(--ires-border) !important; border-radius: var(--ires-radius-md) !important; } [data-ires-skin] .tox .tox-editor-header, [data-ires-skin] .tox .tox-toolbar, [data-ires-skin] .tox .tox-toolbar__primary, [data-ires-skin] .tox .tox-toolbar__group, [data-ires-skin] .tox .tox-statusbar { background-color: var(--ires-sidebar) !important; border-color: var(--ires-border) !important; } [data-ires-skin] .tox .tox-edit-area__iframe { background-color: var(--ires-surface) !important; } /* The oxide skin is injected at runtime, so it wins on equal specificity — force the button faces transparent so the themed toolbar shows through. */ [data-ires-skin] .tox .tox-tbtn, [data-ires-skin] .tox .tox-tbtn--select, [data-ires-skin] .tox .tox-split-button, [data-ires-skin] .tox .tox-tbtn__select-chevron { background-color: transparent !important; color: var(--ires-text) !important; } [data-ires-skin] .tox .tox-tbtn svg, [data-ires-skin] .tox .tox-tbtn__select-chevron svg { fill: var(--ires-text) !important; } [data-ires-skin] .tox .tox-tbtn:hover, [data-ires-skin] .tox .tox-tbtn:focus, [data-ires-skin] .tox .tox-split-button:hover { background-color: var(--ires-nav-hover) !important; } [data-ires-skin] .tox .tox-tbtn--enabled, [data-ires-skin] .tox .tox-tbtn--enabled:hover { background-color: var(--ires-primary-soft) !important; } /* — Form fields: ONE base rule, not one per component. Covers Bootstrap + legacy select2; the ires-core-library follows via its --ires_surface_bg knob. — */ [data-ires-skin] .form-control, [data-ires-skin] .form-select, [data-ires-skin] .select2-choice, [data-ires-skin] .select2-container .select2-choice { background-color: var(--ires-input-bg) !important; border-color: var(--ires-input-border) !important; } /* Filter-bar consistency — the multiselect toggle fills with its panel surface while the sibling filters are transparent outline buttons. Make it match. */ [data-ires-skin] .ires-multiselect-btn { background: transparent; } /* Dark-mode islands: inputs (incl. the hover-revealed inline-edit ones) hardcode white. Broad, but scoped to dark + an active skin. */ [data-ires-skin][data-bs-theme="dark"] .form-control, [data-ires-skin][data-bs-theme="dark"] .form-select, [data-ires-skin][data-bs-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), [data-ires-skin][data-bs-theme="dark"] textarea, [data-ires-skin][data-bs-theme="dark"] .select2-choice, [data-ires-skin][data-bs-theme="dark"] .select2-container .select2-choice { background-color: var(--ires-input-bg) !important; color: var(--ires-text) !important; border-color: var(--ires-input-border) !important; } [data-ires-skin][data-bs-theme="dark"] ::placeholder { color: var(--ires-placeholder) !important; } [data-ires-skin][data-bs-theme="dark"] #qs-modern-root .qs-modern-footer { background-color: var(--ires-surface-2) !important; color: var(--ires-muted) !important; } [data-ires-skin][data-bs-theme="dark"] .copyright, [data-ires-skin][data-bs-theme="dark"] .misc-bar { background-color: var(--ires-surface) !important; } /* — Light/dark toggle: show the icon of the mode you would switch TO. Not scoped: the toggle only renders when dark mode is enabled at all. — */ .theme-toggle-light { display: none; } [data-bs-theme="dark"] .theme-toggle-light { display: inline; } [data-bs-theme="dark"] .theme-toggle-dark { display: none; }