/* ========================================================================== GASTO admin theme — entrypoint Loaded LAST by AdminControl (after Bootstrap + default admin CSS) so the --gasto-* tokens and the Bootstrap bridge win. See docs/brand-token-contract.md and the designer handoff. Light = :root, dark = . ========================================================================== */ @import url("gasto-fonts.css"); @import url("gasto-tokens.css"); /* Warm sidebar tone — the designer's --sidebar (#FBF6EE) was dropped from gasto-tokens.css; reintroduce it here so the sidebar reads as a distinct warm-cream panel next to the white content cards (surface #FFFDFA is too close to white to be visible). Dark = the designer's #1D1812. */ :root { --gasto-sidebar: #FBF6EE; } [data-bs-theme="dark"] { --gasto-sidebar: #1D1812; } /* Typography (designer): Instrument Sans = UI/body, JetBrains Mono = aligning DATA (IDs/amounts/times/ codes), Bricolage Grotesque = display (headings/KPI). Bridge the Bootstrap font vars so body + all code/.font-monospace follow, then set headings to the display font. */ :root { --bs-font-sans-serif: var(--gasto-font-body); --bs-body-font-family: var(--gasto-font-body); --bs-font-monospace: var(--gasto-font-mono); } /* — ires-core-library host-override tokens (underscore convention) mapped from --gasto-*. "Explicitly themed host wins" → the library uses these deterministically instead of its background-luminance guess. Values reference --gasto-* so they flip with data-bs-theme automatically (no separate dark block needed). Component-specific --ires__* tokens default to these roots. See docs/brand-token-contract.md. — */ :root { --ires_accent: var(--gasto-primary); --ires_accent_fg: var(--gasto-on-primary); --ires_surface_bg: var(--gasto-surface); --ires_surface_raised_bg: var(--gasto-surface); --ires_surface_fg: var(--gasto-text); --ires_surface_border: var(--gasto-border); --ires_surface_muted: var(--gasto-muted); --ires_danger: var(--gasto-danger); --ires_success: var(--gasto-success); --ires_warning: var(--gasto-warning); --ires_disabled_fg: var(--gasto-disabled-fg); --ires_disabled_bg: var(--gasto-disabled-bg); /* Neutral hover surface — shared knob the library uses for Select/MultiSelect (and other) hover states (default #f1f3f5 grey). Point it at surface-2 so hover stays warm. Since library ask #6 (2026-07-11) the selection/focus states derive from --ires_accent themselves, so the accent + these surface knobs are all a brand needs — no per-component state overrides. */ --ires_surface_hover: var(--gasto-surface-2); } /* — Typography — the bridge maps colors/radii onto --bs-*, but fonts are ours — */ body { font-family: var(--gasto-font-body); background: var(--gasto-bg); color: var(--gasto-text); } h1, h2, h3, h4, h5, h6, .sidebar-brand, .navbar-brand { font-family: var(--gasto-font-display); } /* DATA font — opt-in on aligning values (IDs, amounts, times, codes); tabular figures. */ .mono, .gasto-mono, .font-monospace, code, kbd, samp { font-family: var(--gasto-font-mono); font-variant-numeric: tabular-nums; } /* — Admin shell chrome (GASTO) — override the bespoke sidebar CSS + Bootstrap's .bg-light utility. Real selectors from mainmenu_sidebar.css. !important is used ONLY where fighting a Bootstrap utility class (.bg-light on #adminSidebar / .misc-bar), which itself is !important. — */ body.ires-admin-sidebar { background-color: var(--gasto-bg); } body.ires-admin-sidebar .sidebar { background-color: var(--gasto-sidebar) !important; /* warm cream, beats .bg-light !important */ border-right: 1px solid var(--gasto-border) !important; } /* Header (topbar) + footer share the BODY background (designer): they blend with the page, only the sidebar is a distinct warm panel. */ body.ires-admin-sidebar .topbar { background-color: var(--gasto-bg) !important; border-color: var(--gasto-border); } body.ires-admin-sidebar .misc-bar { background-color: var(--gasto-surface) !important; border-color: var(--gasto-border); } /* Footers (admin-footer / generic .footer / quicksearch footer) hardcode white/#f8f9fa → surface. */ body.ires-admin-sidebar .admin-footer, .footer, #qs-modern-root .qs-modern-footer { background-color: var(--gasto-bg) !important; border-color: var(--gasto-border) !important; color: var(--gasto-muted) !important; } /* Nav items: ink by default, subtle warm hover, terracotta-soft when active (current page). */ body.ires-admin-sidebar .sidebar .nav-link, body.ires-admin-sidebar .btn-toggle, body.ires-admin-sidebar .btn-toggle-nav a { color: var(--gasto-text); } body.ires-admin-sidebar .btn-toggle:hover, body.ires-admin-sidebar .btn-toggle:focus, body.ires-admin-sidebar .sidebar .nav-link:hover, body.ires-admin-sidebar .btn-toggle-nav a:hover, body.ires-admin-sidebar .btn-toggle-nav a:focus { background-color: var(--gasto-nav-hover); border-radius: var(--gasto-radius-md); } /* Submenu + recent-items links carry Bootstrap's .link-dark (!important, does NOT flip in dark → near-black on the dark sidebar). Force readable text; hover terracotta. */ body.ires-admin-sidebar .sidebar a.link-dark { color: var(--gasto-text) !important; } body.ires-admin-sidebar .sidebar a.link-dark:hover, body.ires-admin-sidebar .sidebar a.link-dark:focus { color: var(--gasto-primary) !important; } body.ires-admin-sidebar .sidebar .nav-link.active, body.ires-admin-sidebar .btn-toggle-nav a.active { background-color: var(--gasto-nav-active-bg) !important; color: var(--gasto-nav-active-fg) !important; border-radius: var(--gasto-radius-md); } /* Sidebar widgets: pin toggle, profile button */ body.ires-admin-sidebar .sidebar-pin { background-color: var(--gasto-surface-2); border-color: var(--gasto-border); } body.ires-admin-sidebar .btn-profile { background-color: var(--gasto-text); color: #fff; } body.ires-admin-sidebar .btn-profile:hover { background-color: color-mix(in srgb, var(--gasto-text) 88%, #000); color: #fff; } /* — Cards / tables lean on the tokens directly where Bootstrap vars fall short — */ .card { background: var(--gasto-surface); border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-lg); box-shadow: var(--gasto-shadow-sm); } .table tbody tr:hover { background: var(--gasto-row-hover); } .form-control:focus, .form-select:focus { border-color: var(--gasto-primary); box-shadow: var(--gasto-focus-ring); } /* — Bootstrap button variants — they compile --bs-btn-* statically from Sass (they do NOT read --bs-primary), so map each variant's local vars to the GASTO tokens. Filled hovers darken via color-mix. Warning keeps dark text (oker is light). — */ .btn-primary { --bs-btn-bg: var(--gasto-primary); --bs-btn-border-color: var(--gasto-primary); --bs-btn-color: var(--gasto-on-primary); --bs-btn-hover-color: var(--gasto-on-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--gasto-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--gasto-primary) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--gasto-primary) 82%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--gasto-primary) 80%, #000); --bs-btn-disabled-bg: var(--gasto-primary); --bs-btn-disabled-border-color: var(--gasto-primary); } .btn-outline-primary { --bs-btn-color: var(--gasto-primary); --bs-btn-border-color: var(--gasto-primary); --bs-btn-hover-bg: var(--gasto-primary); --bs-btn-hover-border-color: var(--gasto-primary); --bs-btn-hover-color: var(--gasto-on-primary); --bs-btn-active-bg: var(--gasto-primary); --bs-btn-active-border-color: var(--gasto-primary); --bs-btn-active-color: var(--gasto-on-primary); } .btn-info { --bs-btn-bg: var(--gasto-info); --bs-btn-border-color: var(--gasto-info); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--gasto-info) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--gasto-info) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--gasto-info) 82%, #000); } .btn-outline-info { --bs-btn-color: var(--gasto-info); --bs-btn-border-color: var(--gasto-info); --bs-btn-hover-bg: var(--gasto-info); --bs-btn-hover-border-color: var(--gasto-info); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--gasto-info); --bs-btn-active-color: #fff; } .btn-success { --bs-btn-bg: var(--gasto-success); --bs-btn-border-color: var(--gasto-success); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--gasto-success) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--gasto-success) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--gasto-success) 82%, #000); } .btn-outline-success { --bs-btn-color: var(--gasto-success); --bs-btn-border-color: var(--gasto-success); --bs-btn-hover-bg: var(--gasto-success); --bs-btn-hover-border-color: var(--gasto-success); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--gasto-success); --bs-btn-active-color: #fff; } .btn-danger { --bs-btn-bg: var(--gasto-danger); --bs-btn-border-color: var(--gasto-danger); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--gasto-danger) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--gasto-danger) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--gasto-danger) 82%, #000); } .btn-outline-danger { --bs-btn-color: var(--gasto-danger); --bs-btn-border-color: var(--gasto-danger); --bs-btn-hover-bg: var(--gasto-danger); --bs-btn-hover-border-color: var(--gasto-danger); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--gasto-danger); --bs-btn-active-color: #fff; } .btn-warning { --bs-btn-bg: var(--gasto-warning); --bs-btn-border-color: var(--gasto-warning); --bs-btn-color: var(--gasto-text); --bs-btn-hover-color: var(--gasto-text); --bs-btn-hover-bg: color-mix(in srgb, var(--gasto-warning) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--gasto-warning) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--gasto-warning) 82%, #000); } .btn-outline-warning { --bs-btn-color: var(--gasto-warning); --bs-btn-border-color: var(--gasto-warning); --bs-btn-hover-bg: var(--gasto-warning); --bs-btn-hover-border-color: var(--gasto-warning); --bs-btn-hover-color: var(--gasto-text); --bs-btn-active-bg: var(--gasto-warning); --bs-btn-active-color: var(--gasto-text); } /* — Light/dark toggle: show the icon of the mode you'd switch TO — */ .theme-toggle-light { display: none; } [data-bs-theme="dark"] .theme-toggle-light { display: inline; } [data-bs-theme="dark"] .theme-toggle-dark { display: none; } /* — GASTO logo: swap light/dark lockup on theme — */ .gasto-lockup-dark { display: none; } [data-bs-theme="dark"] .gasto-lockup-light { display: none; } [data-bs-theme="dark"] .gasto-lockup-dark { display: inline; } /* — Dark-mode content islands — third-party/component surfaces that hardcode white and don't respond to data-bs-theme. Darken them to the GASTO surface tokens in dark mode. NOTE: TinyMCE/CKEditor render content in an IFRAME — parent CSS can't reach it; that needs a dark editor skin/content_css at init time (separate, JS-config change). — */ /* dhtmlx suite widgets (grids, scheduler/calendar, forms, charts) build on --dhx-* vars. Map the derived vars to GASTO tokens so all dhtmlx surfaces / zebra / borders / accent follow the brand — in BOTH light and dark (the tokens flip via data-bs-theme). Fixes the white grids, calendar background and even/odd zebra rows in one place. */ .dhx_widget, [class*="dhx_"] { /* HSL component vars — dhtmlx derives ALL surfaces/borders/overlays/accent from these, so set them (not just the derived ones) or header/rows/hover keep the dhtmlx defaults (white bg, blue hue 200). */ --dhx-h-background: 40; --dhx-s-background: 56%; --dhx-l-background: 99%; --dhx-h-primary: 15; --dhx-s-primary: 69%; --dhx-l-primary: 52%; /* Explicit derived overrides (exact tokens) + font colors (the secondary/additional are hardcoded rgba in dhtmlx and don't follow HSL, so set them per mode). */ --dhx-color-white: var(--gasto-surface); --dhx-background-primary: var(--gasto-surface); --dhx-background-secondary: var(--gasto-surface-2); /* grid header cells read this dedicated var (not the derived bg ones); map it too or the header keeps dhtmlx' hardcoded light #f7f7f7 and cream text sits on white in dark mode. Use the deeper app-canvas token so the header reads as its own recessed band, distinct from the white row surface (gives the grid a GASTO identity instead of one flat field). */ --dhx-s-grid-header-background: var(--gasto-bg); --dhx-border-color: var(--gasto-border); --dhx-color-primary: var(--gasto-primary); --dhx-font-color-primary: var(--gasto-text); --dhx-font-color-secondary: rgba(42, 35, 28, .70); --dhx-font-color-additional: rgba(42, 35, 28, .55); } [data-bs-theme="dark"] .dhx_widget, [data-bs-theme="dark"] [class*="dhx_"] { --dhx-h-background: 30; --dhx-s-background: 21%; --dhx-l-background: 11%; --dhx-h-primary: 15; --dhx-s-primary: 78%; --dhx-l-primary: 59%; --dhx-font-color-secondary: rgba(243, 234, 221, .72); --dhx-font-color-additional: rgba(243, 234, 221, .55); } /* Grid identity — give the dhtmlx grid its own GASTO panel look instead of blending into the warm canvas. Framed container + recessed header band (via --dhx-s-grid-header-background above) + clean white rows with a clearly readable zebra and fine row separators. All token-driven so it flips light/dark. */ .dhx_grid.ires-dhtmlx { border: 1px solid var(--gasto-border); border-radius: var(--gasto-radius-md); box-shadow: var(--gasto-shadow-sm); overflow: hidden; /* clip rows to the rounded frame */ } .ires-dhtmlx .dhx_grid-header-cell { border-bottom: 2px solid var(--gasto-border); font-weight: 600; } /* Zebra — themes/default/css/grid.css hardcodes .alternate_row rows to #fff / #F8F8F8 (theme- unaware literals, so the --dhx var mapping can't reach them). Re-point with higher specificity (.ires-dhtmlx.alternate_row = 0,3,0 > grid.css 0,2,0) so this wins regardless of sheet order. Odd rows = clean surface, even rows = the dedicated zebra tint; fine bottom border per row aids horizontal scanning across the wide grid. */ .ires-dhtmlx.alternate_row .dhx_grid-row { background: var(--gasto-surface); } .ires-dhtmlx.alternate_row .dhx_grid-row:nth-child(2n) { background: var(--gasto-zebra); } .ires-dhtmlx .dhx_grid-row { border-bottom: 1px solid color-mix(in srgb, var(--gasto-border) 55%, transparent); } .dhx_widget--bg_white, .dhx_chart { background: var(--gasto-surface) !important; color: var(--gasto-text); } [data-bs-theme="dark"] #qs-modern-root .qs-modern-footer { background-color: var(--gasto-surface-2) !important; color: var(--gasto-muted) !important; } [data-bs-theme="dark"] .copyright, [data-bs-theme="dark"] .misc-bar { background-color: var(--gasto-surface) !important; } /* Chrome header strips (card / dashboard block / modal) → warm sidebar tint, distinct from the white card bodies. Both light + dark via the token; beats Bootstrap's .bg-white utility. */ .card-header, .card-header.bg-white, #dashboard-table .mod-header, .modal-header { background-color: var(--gasto-sidebar) !important; border-bottom-color: var(--gasto-border) !important; color: var(--gasto-text); } /* Popup/modal title renders as its own

that computes to hardcoded black, so it doesn't inherit the header color → black-on-dark in dark mode. Pin it to the text token. */ .modal-title, .modal-header .modal-title { color: var(--gasto-text) !important; } /* TinyMCE chrome — the toolbar + frame render in the PARENT DOM (only the content is in an iframe), so style them here. The iframe *content* is themed via content_style in admin-ui.js (it can't read these vars). Both modes via the tokens. */ .tox.tox-tinymce { border-color: var(--gasto-border) !important; border-radius: var(--gasto-radius-md) !important; } .tox .tox-editor-header, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__group, .tox .tox-statusbar { background-color: var(--gasto-sidebar) !important; border-color: var(--gasto-border) !important; } .tox .tox-edit-area__iframe { background-color: var(--gasto-surface) !important; } /* Toolbar buttons: the oxide skin (injected at runtime, so it can win on equal specificity) paints .tox-tbtn on a white face. Force transparent so the themed toolbar bar shows through, and drive label/icon off --gasto-text; hover/active use the nav/soft tokens. Covers plain, split and select-chevron buttons. */ .tox .tox-tbtn, .tox .tox-tbtn--select, .tox .tox-split-button, .tox .tox-tbtn__select-chevron { background-color: transparent !important; color: var(--gasto-text) !important; } .tox .tox-tbtn svg, .tox .tox-tbtn__select-chevron svg { fill: var(--gasto-text) !important; } .tox .tox-tbtn:hover, .tox .tox-tbtn:focus, .tox .tox-split-button:hover { background-color: var(--gasto-nav-hover) !important; } .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background-color: var(--gasto-primary-soft) !important; } /* dhtmlxScheduler (rooster) — a separate widget with its OWN --dhx-scheduler-* token system (theme "terrace"), independent of data-bs-theme, so it stays light in dark mode and uses a blue accent (--...-primary #537CFA, today-highlight --...-select #EFF3FF). Remap its base-color tokens to the GASTO tokens; because those flip via data-bs-theme, this single mapping themes the scheduler in BOTH modes. MUST be on :root, not the container: the widget's derived vars (container-background → timescale-background → cell bg) are declared on :root and resolve their var() there, so overriding the base only on a descendant is too late — the derived values are already frozen at :root and inherited literally. theme.css loads after dhtmlxscheduler.css, so :root here wins on source order and the whole derived chain re-resolves against these values. Covers body-appended popups too. */ :root { --dhx-scheduler-base-colors-background: var(--gasto-surface); --dhx-scheduler-base-colors-white: var(--gasto-surface); --dhx-scheduler-base-colors-text-base: var(--gasto-text); --dhx-scheduler-base-colors-text-light: var(--gasto-muted); --dhx-scheduler-base-colors-border: var(--gasto-border); --dhx-scheduler-base-colors-select: var(--gasto-primary-soft); /* today-column highlight → warm, not blue */ --dhx-scheduler-base-colors-hover-color: var(--gasto-surface-2); --dhx-scheduler-base-colors-secondary: var(--gasto-surface-2); --dhx-scheduler-base-colors-primary: var(--gasto-primary); --dhx-scheduler-base-colors-primary-hover: var(--gasto-link-hover); --dhx-scheduler-base-colors-primary-active: var(--gasto-primary); --dhx-scheduler-base-colors-primary-lighter: var(--gasto-primary-soft); /* events → brand terracotta with readable on-primary text (default is a blue gradient) */ --dhx-scheduler-event-background: var(--gasto-primary); --dhx-scheduler-event-color: var(--gasto-on-primary); --dhx-scheduler-today-marker-color: var(--gasto-primary); /* current-time line stays a brand accent */ } /* css/roster7.css hardcodes .roster_container .dhx_cal_container to white (a theme-unaware literal, like grid.css did for rows) which shows through the transparent day/section headers → washed cream-on-white text. Re-point the container itself to the surface token. */ .roster_container .dhx_cal_container { background-color: var(--gasto-surface) !important; } /* Scheduler navline (the toolbar strip with Vandaag / date-nav / title / view switch) is transparent, so it just shows the canvas. Give it the same warm chrome band as the card/modal/TinyMCE toolbars (--gasto-sidebar) with a divider, so it reads as the scheduler's header bar. */ .dhx_cal_navline { background-color: var(--gasto-sidebar); border-bottom: 1px solid var(--gasto-border); } /* Form fields — ONE base rule (not per-component): white surface so inputs / selects / date / search are visible on the cream body + tinted headers. Covers Bootstrap + legacy select2; the ires-core-library follows the same intent via its --ires_surface_bg host-token. A new brand only changes the token values — this rule stays. */ /* Filter-bar consistency — the ires-multiselect toggle fills with surface (`var(--ires-ms-bg)`, same token as its dropdown panel) while the sibling filters (`.dropdown-searchfield > .btn-outline-secondary`) are transparent outline buttons. Same border/radius/size, only the fill differed → mixed white/cream bar. Make the multiselect toggle transparent too so the whole bar is one outline style. Only the button is touched (not the panel — the shared token can't separate the two). */ .ires-multiselect-btn { background: transparent; } .form-control, .form-select, .select2-choice, .select2-container .select2-choice { background-color: var(--gasto-surface) !important; border-color: var(--gasto-border) !important; } /* Form inputs (incl. the hover-revealed inline-edit inputs + legacy select2) hardcode white → darken in dark mode. Broad but scoped to [data-bs-theme=dark] + the GASTO theme. */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] .select2-choice, [data-bs-theme="dark"] .select2-container .select2-choice { background-color: var(--gasto-input-bg) !important; color: var(--gasto-text) !important; border-color: var(--gasto-border) !important; } [data-bs-theme="dark"] ::placeholder { color: var(--gasto-faint) !important; }