/* ==========================================================================
LARA Theme Overrides (DevExpress Fluent + custom design tokens)
Applied via Themes.Fluent.Clone() -> AddFilePaths() in App.razor
========================================================================== */
/* --------------------------------------------------------------------------
1. Application Design Tokens
-------------------------------------------------------------------------- */
:root {
/* Zeplin palette — "Kontrola adres" design system */
--lara-primary: #0C3D82;
--lara-primary-rgb: 12, 61, 130; /* matches --lara-primary; used for focus-ring alphas */
--lara-primary-hover: #0858CA;
--lara-primary-light: rgba(65, 137, 241, 0.2);
--lara-surface: #FFFFFF;
--lara-surface-secondary: rgba(239, 242, 245, 0.5); /* even-row tint */
--lara-surface-tint: #EFF2F5; /* solid form of surface-secondary; page body, row separators */
--lara-surface-header: #E1E6EB; /* grid / panel header bg */
--lara-surface-dark: #39424C; /* footer / pager bar */
--lara-border-light: #D6DCE0;
--lara-border-medium: #E1E6EB;
--lara-border-strong: #E7EBEE; /* Zeplin card / chip outline */
--lara-text-primary: #39424C;
--lara-text-secondary: #5B6470;
--lara-text-muted: #939DA7;
--lara-text-on-dark: #FFFFFF;
--lara-success: #34B416;
--lara-success-hover: #2DA214;
--lara-success-active: #279115;
--lara-success-disabled: #B8E0AC;
--lara-success-light: rgba(52, 180, 22, 0.12);
--lara-warning: #FF8800;
--lara-warning-light: rgba(255, 136, 0, 0.1);
--lara-danger: #FF0000;
--lara-danger-hover: #D60000;
--lara-danger-active: #B30000;
--lara-danger-disabled: #F0A6A6;
--lara-danger-light: rgba(255, 0, 0, 0.1);
--lara-radius-sm: 3px;
--lara-radius-md: 6px;
--lara-radius-pill: 12px;
--lara-z-action-popup: 50;
/* App-shell layout — single source of truth for the top-bar height. Drives BOTH the
.lara-top-bar height and the maximized-element top inset (--lara-content-top in
MainLayout's ShellStyle), so a maximized grid/map can never overlap or gap the bar.
Change the bar height here and everything follows. */
--lara-top-bar-height: 47px;
}
/* --------------------------------------------------------------------------
2. Typography - Proxima Nova
-------------------------------------------------------------------------- */
html, body {
font-family: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
line-height: 1.45;
color: var(--lara-text-primary);
background-color: #EFF2F5; /* Zeplin: page body — distinguishes from white top bar / sidebar */
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
:root {
--bs-body-font-family: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--bs-body-font-size: 13px;
--bs-body-line-height: 1.45;
--bs-body-color: #39424C;
/* Override DX Fluent theme font - applies to all DevExpress components. */
--dxds-font-family-sans-serif: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* --------------------------------------------------------------------------
3. Navigation Drawer
-------------------------------------------------------------------------- */
.lara-drawer .dxbl-drawer-panel {
border-right: 1px solid var(--lara-border-light) !important;
background-color: var(--lara-surface);
z-index: 200 !important;
}
/* Main content-area height chain (DevExpress 26.1.3 regression, LA-355).
The page content host is .lara-drawer's TargetContent: a DxLoadingPanel wrapping
MainLayout's height:100% body div. LaraFormLayout fills that with height:100% and
scrolls its grid internally (.form-layout__grid--normal overflow-y:auto) — but
height:100% only resolves when EVERY ancestor has a definite height. Since 26.1.3
the DxLoadingPanel renders inline-block / height:auto, so it sizes to content
instead of its 1031px parent, breaking the chain: list grids stretch to all rows
(timeline pushed off-screen) and low-row grids collapse to ~96px. Force the main
loading panel + its target content to fill the definite-height .dxbl-drawer-content.
Scoped to the direct child chain so nested grid/dialog/nav loading panels are untouched. */
.lara-drawer > .dxbl-drawer-content > .dxbl-loading-panel,
.lara-drawer > .dxbl-drawer-content > .dxbl-loading-panel > .dxbl-loading-panel-target-content {
display: block;
height: 100%;
}
/* When the drawer is in mini (minimized) mode, let hover flyouts escape the
56px rail. DevExpress sets overflow:hidden on drawer, panel, and body — we
override those so absolutely-positioned .lara-nav-children can render
outside the rail's bounding box. */
.lara-drawer.dxbl-drawer-mini,
.lara-drawer.dxbl-drawer-mini .dxbl-drawer-panel,
.lara-drawer.dxbl-drawer-mini .dxbl-drawer-body {
overflow: visible !important;
}
/* Drop the left gap between the collapsed rail and the page content.
DevExpress reserves horizontal padding on .dxbl-drawer-body that becomes
visually obvious once the panel shrinks to the 56px mini rail. */
.lara-drawer.dxbl-drawer-mini .dxbl-drawer-body {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* nav menu item icons - default gray */
.lara-nav-menu .dxbl-menu-item-content-container .dxbl-image {
color: var(--lara-text-secondary);
}
/* active nav item - blue icon + left accent border */
.lara-nav-menu .dxbl-active > .dxbl-menu-item-content-container .dxbl-image {
color: var(--lara-primary);
}
.lara-nav-menu .dxbl-active {
border-left: 3px solid var(--lara-primary);
background-color: var(--lara-primary-light);
}
/* hover state for nav items */
.lara-nav-menu .dxbl-menu-item:hover {
background-color: var(--lara-surface-secondary);
}
/* --------------------------------------------------------------------------
3b. Stops-Relevance Detail Drawer
DevExpress sets align-items:flex-start on the flex-column .dxbl-drawer-body,
so the detail content sizes to itself (~510px) instead of filling the panel.
Stretch the content to the full drawer width.
-------------------------------------------------------------------------- */
[data-testid="request-stops-relevance-drawer"] .dxbl-drawer-body > div {
width: 100%;
}
/* --------------------------------------------------------------------------
3c. Detail Drawer — fill full height
The right-side detail drawer's body (.dxbl-drawer-body) fills the panel (~1031px),
but DevExpress wraps its content in a DxLoadingPanel that defaults to flex:0 1 auto /
height:auto, so it stops at content height (~525px) and the editor sits at the top with
dead space below. Make that loading panel fill the body so the editor — and any Star/fill
element inside it (e.g. the asset Timeline) — stretches to the full drawer height.
Direct-child (>) keeps nested grid/component loading panels untouched. Cross-feature:
targets every detail flyout (assets, requests, locations, …), not the list behind it
(which lives in the drawer's TargetContent, not its body). Same DX 26.1.3 height-chain
break as the main content fix in section 3. */
.dxbl-drawer-right .dxbl-drawer-body > .dxbl-loading-panel {
flex: 1 1 auto;
min-height: 0;
}
.dxbl-drawer-right .dxbl-drawer-body > .dxbl-loading-panel > .dxbl-loading-panel-target-content {
height: 100%;
}
/* --------------------------------------------------------------------------
3c. Add Stop Location dialog
Layout for the add-location popup: stacked label+control fields, a
constrained width for simple inputs, a full-width grid picker, and a
right-aligned footer (the default footer stretches buttons full-width).
-------------------------------------------------------------------------- */
.add-stop-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 3px 2px;
}
.add-stop-field {
display: flex;
flex-direction: column;
gap: 3px;
}
.add-stop-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--lara-text-secondary);
}
.add-stop-input {
max-width: 340px;
}
.add-stop-footer {
display: flex;
justify-content: flex-end;
gap: 5px;
width: 100%;
}
/* Generic right-aligned dialog footer. The default DxPopup footer stretches its
buttons full-width and stacks them; this lays them out as a compact right-aligned row. */
.lara-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 5px;
width: 100%;
}
/* Inner padding for the small admin dialog forms so fields aren't flush to the popup edges. */
.lara-dialog-body {
padding: 10px 16px 13px;
/* Space the form rows so fields aren't cramped (DevExpress form-layout gap var). */
--dxbl-form-layout-item-gap: 8px;
row-gap: 8px;
}
/* ── Global dialog sizing ──────────────────────────────────────────────────
.lara-dialog is stamped on EVERY LaraDialog popup (it lands on the DxPopup
root, .dxbl-popup). Cap the popup to the viewport and let its body scroll so
no dialog can ever overflow the screen and push its footer out of reach.
.dxbl-modal-content is already a flex column (header + body + footer), so this
mirrors DevExpress's own .dxbl-popup-scrollable behaviour — forced on for all
Lara dialogs regardless of the popup's scrollable mode. */
.lara-dialog > .dxbl-modal-content {
max-height: 92vh !important;
}
.lara-dialog > .dxbl-modal-content > .dxbl-modal-body {
min-height: 0;
overflow-y: auto;
}
/* Grid dialogs: opt in with CssClass="lara-dialog-grid" AND set
VirtualScrollingEnabled="true" on the grid(s). Each grid is bounded to a
viewport-relative height so DevExpress virtual scrolling engages (the grid
scrolls its own rows) instead of paginating.
NOTE: .lara-grid-container / .dxbl-grid default to flex:1 (flex-basis:0%);
as a flex child that overrides any `height` on the main axis, so reset flex to
`none` first — THEN the height takes effect. Targets LaraGrid (via its
.lara-grid-container) and raw DxGrid (.dxbl-grid:not(.lara-grid)) at any
nesting depth. Multi-grid dialogs scroll the body between grids (cap above
keeps the footer reachable). */
.lara-dialog-grid .lara-grid-container,
.lara-dialog-grid .dxbl-grid:not(.lara-grid) {
flex: none !important;
height: min(440px, 45vh) !important;
min-height: 0;
}
/* Cancel buttons in a dialog footer OR an action-popup save bar render as a RED OUTLINE
(transparent fill, red border + text), filling solid red on hover. This is the intended
house polish (green-solid confirm + outline cancel) and keeps the drawer editor save bars
visually aligned with the dialogs. The extra .lara-dialog-footer / .lara-action-popup scope
gives these rules higher specificity than the global solid-red [data-testid$="-cancel"] /
.lara-cancel-btn hooks below. */
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled),
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled),
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled),
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled) {
background: transparent !important;
border: 1px solid var(--lara-danger) !important;
color: var(--lara-danger) !important;
}
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover,
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active {
background: var(--lara-danger) !important;
border-color: var(--lara-danger) !important;
color: var(--lara-text-on-dark) !important;
}
/* The outline cancel above has red text on a transparent fill, so its icon must be red too —
not the white it would otherwise inherit from the solid-red cancel variant (the
.dxbl-btn-icon / .dxbl-image rule further below forces white). On hover the fill turns solid
red, so the icon flips back to white in the matching :hover/:active block. */
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled) .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled) .dxbl-image,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled) .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled) .dxbl-image,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled) .dxbl-btn-icon,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled) .dxbl-image,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled) .dxbl-btn-icon,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled) .dxbl-image {
color: var(--lara-danger) !important;
}
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover .dxbl-image,
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active .dxbl-image,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover .dxbl-image,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active .dxbl-btn-icon,
.lara-dialog-footer .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active .dxbl-image,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover .dxbl-btn-icon,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):hover .dxbl-image,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active .dxbl-btn-icon,
.lara-action-popup .dxbl-btn[data-testid$="-cancel"]:not(:disabled):not(.dxbl-disabled):active .dxbl-image,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover .dxbl-btn-icon,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):hover .dxbl-image,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active .dxbl-btn-icon,
.lara-action-popup .dxbl-btn.lara-cancel-btn:not(:disabled):not(.dxbl-disabled):active .dxbl-image {
color: var(--lara-text-on-dark) !important;
}
/* Body message of the shared confirmation dialog (IConfirmService / LaraConfirmHost):
preserve caller line breaks and keep comfortable reading line-height. */
.lara-confirm-message {
white-space: pre-wrap;
line-height: 1.5;
}
/* Destructive confirmation with itemized consequences — used when a caller passes a
consequences list to IConfirmService.Confirm (e.g. cancelling a planning session). A warning
icon + bold lead + message, followed by a red-dotted list of effects. Tokens fall back to the
theme's amber/danger values so it stays aligned with the rest of the dialog styling. */
.lara-confirm-warn {
display: flex;
gap: 8px;
align-items: flex-start;
}
.lara-confirm-warn__icon {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--lara-warning-tint, #FCF3E1);
color: var(--lara-warning, #E1930A);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.lara-confirm-warn__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lara-confirm-warn__lead {
font-weight: 700;
color: var(--lara-text-primary, #39424C);
}
.lara-confirm-consequences {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.lara-confirm-consequences li {
display: flex;
gap: 6px;
align-items: flex-start;
line-height: 1.45;
}
.lara-confirm-consequences__dot {
flex: none;
margin-top: 5px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lara-danger);
}
/* Rich confirmation item cards (IConfirmService rich overload): an optional leading glyph, a bold
title and a muted detail line, accented by a coloured left border per severity. Used by the
planning remove-scope and swap-route confirmations that were previously bespoke dialogs. */
.lara-confirm-items {
display: flex;
flex-direction: column;
gap: 5px;
}
.lara-confirm-item {
display: flex;
gap: 6px;
align-items: flex-start;
border: 1px solid var(--lara-border-light, #D6DCE0);
border-left-width: 3px;
border-radius: 6px;
padding: 5px 8px;
font-size: 0.85rem;
}
.lara-confirm-item--normal { border-left-color: var(--lara-border-light, #D6DCE0); }
.lara-confirm-item--danger { border-left-color: #C0392B; }
.lara-confirm-item--warning { border-left-color: #F59E0B; }
.lara-confirm-item--info { border-left-color: var(--lara-primary, #0C3D82); }
.lara-confirm-item--muted {
border-left-color: #F59E0B;
background: #FDF9F0;
color: var(--lara-text-secondary, #5B6470);
}
.lara-confirm-item__ic {
flex: none;
width: 20px;
text-align: center;
}
.lara-confirm-item__text { min-width: 0; }
.lara-confirm-item__name { font-weight: 700; }
.lara-confirm-item__detail {
color: var(--lara-text-secondary, #5B6470);
font-size: 0.8rem;
}
/* Optional toggle inside a confirmation (e.g. "re-optimize affected routes"). */
.lara-confirm-option {
border: 1px solid var(--lara-border-light, #D6DCE0);
border-left: 3px solid var(--lara-primary, #0C3D82);
border-radius: 6px;
padding: 5px 8px;
margin-top: 5px;
}
/* Dashed footnote inside a confirmation (e.g. "the undo/redo history will be cleared"). */
.lara-confirm-note {
border: 1px dashed var(--lara-border-light, #D6DCE0);
border-radius: 6px;
padding: 5px 8px;
margin-top: 5px;
color: var(--lara-text-secondary, #5B6470);
font-size: 0.78rem;
}
/* --------------------------------------------------------------------------
3d. Entity Detail Drawers
The list pages render a white grid card on the page tint (--lara-surface-tint),
so the content reads as a card. Entity detail editors (Requests, Assets, Routes,
Locations, Compositions, Planning) open in a DevExpress drawer whose panel is
white by default, so their field-group cards (.element-renderer — already
bordered) and the map blend into the white panel with no separation. Tint the
detail-drawer panel to match the list pages and fill the cards white so they
pop the same way. Scoped via :has(.element-renderer) so the white navigation
drawer (.lara-drawer — menu only, no form layout) is left untouched.
-------------------------------------------------------------------------- */
.dxbl-drawer-panel:has(.element-renderer) {
background-color: var(--lara-surface-tint);
}
.dxbl-drawer-panel:has(.element-renderer) .element-renderer {
background-color: var(--lara-surface);
}
/* Small perimeter gutter so the tint frames the cards (the form layout already
inserts 6px spacer tracks between cards, but none at the outer edge). */
.dxbl-drawer-panel:has(.element-renderer) .form-layout__grid--normal {
padding: 4px;
}
/* Align the detail-drawer toolbar (the Split/Consolidate ribbon) with the list
page's toolbar above it, and tighten the whole-drawer perimeter. DX gives the
.dxbl-drawer-body ~19.5px side padding + the .form-layout adds 8px, which stacked
on top of the 6px grid gutter above to inset the cards ~34px from every edge — a
wide tinted frame. Zero the body padding (top also fixes the .mt-3 overflow noted
below) and the form-layout padding so only the intended 6px gutter frames the
content and it uses the full drawer width. */
.dxbl-drawer-panel:has(.element-renderer) .dxbl-drawer-body {
padding: 0;
}
.dxbl-drawer-panel:has(.element-renderer) .form-layout {
padding: 0;
}
/* The detail form's Bootstrap .mt-3 is also .h-100, so its top margin made
height:100% + margin overflow the body and added a stray inner scrollbar. Drop it
(needs !important to beat Bootstrap's .mt-3 utility). */
.dxbl-drawer-panel:has(.element-renderer) form.mt-3 {
margin-top: 0 !important;
}
/* The import script editor (ImportScriptEditor.razor) is not a LaraFormLayout, so it
has no .element-renderer and instead manages its own tint + white cards inside
.script-editor-container. Give its host drawer the same treatment: tint the panel and
drop the body padding so the tinted layout reaches the drawer edges (no white frame). */
.dxbl-drawer-panel:has(.script-editor-container) {
background-color: var(--lara-surface-tint);
}
.dxbl-drawer-panel:has(.script-editor-container) .dxbl-drawer-body {
padding: 0;
}
/* --------------------------------------------------------------------------
4. Top Bar
-------------------------------------------------------------------------- */
.lara-top-bar {
border-bottom: 1px solid var(--lara-border-light);
background-color: var(--lara-surface);
padding: 3px 0;
height: var(--lara-top-bar-height);
align-items: center;
position: relative;
z-index: 50;
}
.lara-top-bar .dxbl-btn {
padding: 3px 4px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
}
/* Align the leading hamburger button with the collapsed sidebar rail
(DxDrawer MiniPanelWidth = 56px). Zeplin: both icon centers at x = 31. */
.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item:first-child {
width: 56px;
min-width: 56px;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
border-right: 1px solid var(--lara-border-light);
}
.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item:first-child > .dxbl-btn {
padding: 3px 0;
}
/* Right-cluster slots have fixed widths (Branch/Optim/View/User in MainLayout).
Clip overflow so wide content (long view names, long usernames, count blowing
up to many digits) doesn't visually escape its slot or push neighbors. */
.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item {
min-width: 0;
overflow: hidden;
}
/* The LARA logo (24px tall) and "L A R A" title (36px line-height) sit in
separate stacklayout-item wrappers that top-align by default. Make the
logo's wrapper a flex-centering slot matching the title's 36px height
so the logo's vertical center lines up with the title text. */
.lara-top-bar .dxbl-stacklayout-item:has(> img[src*="lara-logo"]) {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.lara-top-bar .dxbl-btn .dxbl-image {
font-size: 14px;
}
.lara-app-title {
font-weight: 700;
white-space: nowrap;
display: inline-flex;
align-items: center;
line-height: 36px;
font-size: 18px;
}
/* Ribbon strip is transparent so the page body color shows through.
Secondary toolbar buttons inside the ribbon are also transparent —
only primary buttons (e.g. New Location) keep their fill. */
.dxbl-ribbon,
.dxbl-ribbon-toolbar {
background-color: transparent !important;
}
.dxbl-ribbon .dxbl-btn-text-secondary,
.dxbl-ribbon .dxbl-toolbar-btn:not(.dxbl-btn-primary) {
background-color: transparent !important;
}
/* Grid and map panel header toolbars (Location / Edit_Columns row,
Map_Colors row) — same treatment so the body color shows through. */
.lara-toolbar.lara-toolbar--top {
background-color: transparent;
}
.lara-page-title {
font-weight: 600;
margin-left: 21px;
color: var(--lara-text-primary);
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 6px;
/* Override the 36px line-height inherited from .lara-app-title so the inner flex
container has a clean line box — without this, the text glyph's effective vertical
center drifts and no longer matches the icon's flex-centered position. */
line-height: 1;
}
/* Section/page icon next to the page title — sourced from the active route's
navigation chain (root → leaf, first non-empty IconCssClass wins).
Per Zeplin (Top panel / Heading): 13x13 glyph, primary text color, 10px to title. */
.lara-page-title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
font-size: 13px;
line-height: 1;
color: var(--lara-text-primary);
/* Open Iconic applies `.oi { position: relative; top: 1px }` to all .oi spans, which
shifts the icon glyph 1px below the text center. Cancel that here so the icon and
the page-title caption share the same vertical center inside the flex container. */
position: relative;
top: 0;
align-self: center;
}
/* Top-bar Undo / Redo widget — split buttons styled as inline blue links with the
Open Iconic icon (oi-action-undo / -redo) preserved before the caption. Strips DevExpress
chrome (borders, shadows, dividers) so the affordance reads as a link with a soft pill on
hover. The dropdown caret on each split still opens the history popup unchanged. */
.lara-top-bar-undoredo {
display: inline-flex;
align-items: center;
align-self: center !important;
margin-left: 21px;
}
/* The undo/redo lives inside a DxStackLayout (grid) which sizes each row to the item's
intrinsic height. That leaves the 24px button visually pinned to the top of the 43px
top-bar, so we explicitly center the stack-layout chain above the widget. */
.lara-top-bar > .dxbl-stacklayout-root {
align-items: center;
}
.lara-top-bar .dxbl-stacklayout-item:has(> .lara-top-bar-undoredo) {
align-self: center;
display: flex;
align-items: center;
/* DxStackLayoutItem ships with overflow:hidden which clips the widget when the
top bar gets crowded (icon + title + branch selector etc.). Allow the buttons
to render in full — they live in a fixed-width container so they won't bleed. */
overflow: visible;
}
/* Let each stack item size to its split's intrinsic width — the default fixed-width grid
tracks were narrow enough that the second split's main button overlapped the first
split's dropdown caret. The wider column-gap gives a visible breathing space between
Undo and Redo (the inner buttons overflow their grid tracks by a few px, so a small gap
collapses to overlap). `!important` is required because DxStackLayout writes the
`ItemSpacing` value as an inline `column-gap` style on this element. */
.lara-top-bar-undoredo > .dxbl-stacklayout-root {
grid-auto-columns: max-content !important;
column-gap: 16px !important;
}
/* The global rule `.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item { overflow: hidden }`
matches descendant-style and ALSO hits the inner stack-items of this widget. The Undo split-button
is wider than its grid track (icon + caption + chevron > 56px), so it bleeds left and the icon
gets clipped. Force overflow visible on the inner items so the full button — icon included — renders. */
.lara-top-bar-undoredo .dxbl-stacklayout-item {
width: auto;
min-width: 0;
overflow: visible !important;
}
/* Split container — transparent, no border/shadow. */
.lara-top-bar-undoredo .dxbl-btn-split {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Shared base: both the caption half and the dropdown caret. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn {
height: 28px !important;
min-height: 28px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--lara-primary-hover) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
transition: color 0.12s ease, background 0.12s ease !important;
}
/* Main button — icon + caption. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-first {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-width: 0 !important;
padding: 0 5px 0 4px !important;
border-radius: 4px 0 0 4px !important;
}
/* Dropdown caret half — tight, with a CSS-rendered chevron so the affordance is visible
regardless of which icon glyph DevExpress decides to inject. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-split-dropdown {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 14px !important;
width: 14px !important;
padding: 0 !important;
border-radius: 0 4px 4px 0 !important;
}
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-split-dropdown::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-top: 1px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
}
/* Hover / active — soft blue pill on either half, no underline. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn:not(.dxbl-disabled):hover {
color: var(--lara-primary) !important;
background: rgba(var(--lara-primary-rgb), 0.08) !important;
}
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn:not(.dxbl-disabled):active {
color: var(--lara-primary) !important;
background: rgba(var(--lara-primary-rgb), 0.16) !important;
}
/* Disabled state — muted, no pointer feedback. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn.dxbl-disabled {
color: var(--lara-text-muted) !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
/* Icon (Open Iconic .oi glyph) sized to fit inside the 28px caption half — explicit
flex centering keeps the glyph dead-center inside its 14px box regardless of the
font's baseline metrics. */
.lara-top-bar-undoredo .dxbl-btn-icon,
.lara-top-bar-undoredo .dxbl-image.oi {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 14px !important;
height: 14px !important;
font-size: 12px !important;
line-height: 1 !important;
vertical-align: middle !important;
flex: 0 0 auto !important;
overflow: visible !important;
}
.lara-top-bar-undoredo .dxbl-btn-caption {
font-size: 12px !important;
letter-spacing: 0 !important;
}
/* Kill the vertical divider line DevExpress draws between the caption half
and the dropdown half (and any wrapper borders the global split rule adds). */
.lara-top-bar-undoredo .dxbl-btn-split,
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn,
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-first,
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-split-dropdown {
box-shadow: none !important;
border-left: none !important;
border-right: none !important;
}
/* The hamburger-button slot rule `.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item:first-child`
gives its target a right border. Its descendant selector also matches the FIRST stack-item
inside this widget (Undo's wrapper), drawing an unwanted vertical line between Undo and Redo.
Higher specificity here (.lara-top-bar + .lara-top-bar-undoredo) overrides it. */
.lara-top-bar .lara-top-bar-undoredo .dxbl-stacklayout-item:first-child {
border-right: none !important;
}
/* Section 17b's `.dxbl-btn-split > .dxbl-btn-split-dropdown.dxbl-disabled` rule draws a 1px
inset shadow as a divider — it has `!important` and higher specificity than our generic
"kill divider" rule above (which doesn't include `.dxbl-disabled`), so the line still
appears on disabled buttons. Match its specificity, scoped to this widget, to suppress it. */
.lara-top-bar-undoredo .dxbl-btn-split > .dxbl-btn-split-dropdown.dxbl-disabled,
.lara-top-bar-undoredo .dxbl-btn-split:not(:has(.dxbl-btn-primary)) > .dxbl-btn-split-dropdown {
box-shadow: none !important;
}
/* DevExpress injects an SVG chevron (#dx-chevron-down-compact) into the enabled
split-dropdown half but skips it on disabled buttons. We draw our own CSS-triangle
chevron via ::after on the dropdown (see rule above), so the SVG would render as
a duplicate arrow on the enabled button. Hide it — only the ::after triangle remains,
keeping enabled/disabled visually consistent. */
.lara-top-bar-undoredo .dxbl-btn-split-dropdown svg {
display: none !important;
}
/* --------------------------------------------------------------------------
5. Data Grid Refinements
-------------------------------------------------------------------------- */
/* Zeplin spec: row separators in #EFF2F5 (lighter than the global border token). */
.dxbl-grid table tr > td {
border-color: #EFF2F5 !important;
}
/* compact grid body cells - reduced padding for dense data display
Scoped to td only so header th rule (section 20) wins. */
.dxbl-grid table tr > td {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* compact filter row */
.dxbl-grid .dxbl-grid-edit-cell {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* Tighter horizontal cell padding so more of each value is visible before it
truncates (grids use TextWrapEnabled=false, so wide padding = clipped text).
DevExpress defaults --dxbl-grid-text-cell-padding-x to .5rem (8px); trimming
it to 5px reclaims ~6px per column for the data without crowding the text. */
.dxbl-grid {
--dxbl-grid-text-cell-padding-x: 5px;
}
/* header cells - Zeplin grey, primary text (all with !important to beat DX) */
.dxbl-grid .dxbl-grid-header-row > th,
.dxbl-grid-header-row > th {
color: var(--lara-text-primary) !important;
font-weight: 600 !important;
font-size: 12px !important;
line-height: 1.3 !important;
background-color: var(--lara-surface-header) !important;
border-bottom: 1px solid #EFF2F5 !important;
border-top: none !important;
}
/* even row tint (Zeplin zebra) — skip the empty-row filler and no-data row */
.dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-empty-row):not(:has(> .dxbl-grid-empty-data-area)):nth-child(even) > td {
background-color: var(--lara-surface-secondary);
}
/* row hover - brand blue tint. Skip the empty-row filler, the no-data row,
and the "no data to display" cell so hovering dead zones below the last
real row doesn't tint them. */
.dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-empty-row):not(:has(> .dxbl-grid-empty-data-area)):hover > td {
background-color: var(--lara-primary-light);
}
/* selected / focused row */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td {
background-color: var(--lara-primary-light);
}
/* group row - Zeplin header tone */
.dxbl-grid .dxbl-grid-group-row > td {
background-color: var(--lara-surface-header);
color: var(--lara-primary);
font-weight: 600;
}
/* pager / footer - Zeplin dark bar */
.dxbl-grid-pager,
.dxbl-pager {
background-color: var(--lara-surface-dark);
color: var(--lara-text-on-dark);
border-top: none;
min-height: 29px;
}
.dxbl-pager .dxbl-pager-item,
.dxbl-pager .dxbl-pager-text,
.dxbl-grid-pager * {
color: var(--lara-text-on-dark);
}
.dxbl-pager .dxbl-active {
background-color: var(--lara-primary);
color: var(--lara-text-on-dark);
}
/* Zeplin spec: 12 px body text, 25 px line-height to produce a 29 px row
(25 px content + 2 px top + 2 px bottom padding). */
.dxbl-grid table,
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
font-size: 12px !important;
line-height: 25px !important;
color: var(--lara-text-primary) !important;
}
/* --------------------------------------------------------------------------
5b. Tags grid — per-row hover actions (edit / delete)
Flat icon buttons that stay hidden until the row is hovered, selected, or
focused (focus-within keeps them reachable by keyboard).
-------------------------------------------------------------------------- */
.tags-row-actions {
display: inline-flex;
align-items: center;
gap: 2px;
opacity: 0;
transition: opacity 0.12s ease;
}
.dxbl-grid .dxbl-grid-table > tbody > tr:hover .tags-row-actions,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row .tags-row-actions,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-focused-row .tags-row-actions,
.tags-row-actions:focus-within {
opacity: 1;
}
.tags-row-actions .dxbl-btn {
padding: 2px 3px !important;
min-width: 0 !important;
color: var(--lara-text-muted) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.tags-row-actions .dxbl-btn:hover {
color: var(--lara-primary) !important;
}
.tags-row-actions .dxbl-btn .dxbl-image {
font-size: 13px !important;
}
/* --------------------------------------------------------------------------
6. Buttons - utility classes for custom actions
-------------------------------------------------------------------------- */
/* danger button (e.g. "Zrusit") */
.btn-lara-danger {
background-color: var(--lara-danger) !important;
border-color: var(--lara-danger) !important;
color: #FFFFFF !important;
}
.btn-lara-danger:hover {
background-color: #B91C1C !important;
border-color: #B91C1C !important;
}
/* danger text link (e.g. "Zrusit vyber") */
.text-lara-danger {
color: var(--lara-danger);
cursor: pointer;
font-weight: 500;
}
.text-lara-danger:hover {
color: #B91C1C;
text-decoration: underline;
}
/* --------------------------------------------------------------------------
7. Tabs - clean underline style
-------------------------------------------------------------------------- */
.dxbl-tabs .dxbl-tabs-header .dxbl-tab.dxbl-active {
border-bottom-color: var(--lara-primary);
}
/* --------------------------------------------------------------------------
8. Form Inputs
-------------------------------------------------------------------------- */
/* subtle input borders */
.dxbl-edit-input-container {
border-color: var(--lara-border-medium);
border-radius: var(--lara-radius-sm);
}
/* focused input - brand color ring */
.dxbl-edit-input-container:focus-within {
border-color: var(--lara-primary);
box-shadow: 0 0 0 2px var(--lara-primary-light);
}
/* field labels */
.dxbl-fl-label {
color: var(--lara-text-secondary);
font-size: 0.8125rem;
}
/* --------------------------------------------------------------------------
9. Validation / Error States
-------------------------------------------------------------------------- */
/* error row highlight */
.lara-error-row > td {
background-color: var(--lara-danger-light) !important;
}
/* warning row highlight */
.lara-warning-row > td {
background-color: var(--lara-warning-light) !important;
}
/* status indicator dots */
.lara-dot-danger {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--lara-danger);
}
.lara-dot-warning {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--lara-warning);
}
/* --------------------------------------------------------------------------
10. Popover / Dropdown
-------------------------------------------------------------------------- */
.dxbl-dropdown-area {
border-radius: var(--lara-radius-md);
border-color: var(--lara-border-light);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* --------------------------------------------------------------------------
11. Loading Progress (startup)
-------------------------------------------------------------------------- */
.loading-progress circle:last-child {
stroke: var(--lara-primary);
}
/* --------------------------------------------------------------------------
12. Bottom Action Bar (bulk selection)
-------------------------------------------------------------------------- */
.lara-action-bar {
background-color: var(--lara-surface);
border-top: 1px solid var(--lara-border-light);
padding: 5px 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* --------------------------------------------------------------------------
13. Grid Toolbar & Filter Panel
--------------------------------------------------------------------------
Scoped CSS (::deep) cannot target DevExpress custom elements because no
HTML element in the Razor template receives the Blazor scope attribute.
These rules live here as global styles instead.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Base toolbar — shared visuals for any horizontal bar (map, grid, future).
Variants (.laramap-toolbar, .lara-grid-toolbar, the DxGrid ribbon) layer
their own class on top and only override what's specific.
-------------------------------------------------------------------------- */
.lara-toolbar {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: var(--lara-toolbar-gap, 5px);
padding: var(--lara-toolbar-padding, 4px 6px);
min-height: var(--lara-toolbar-min-height, 40px);
background: var(--lara-surface);
color: var(--lara-text-primary);
font-size: 13px;
box-sizing: border-box;
flex-shrink: 0;
min-width: 0;
}
.lara-toolbar--top {
border-bottom: 1px solid var(--lara-border-light);
}
.lara-toolbar--bottom {
border-top: 1px solid var(--lara-border-light);
}
/* Maximize / restore and pop-out buttons — shared across every toolbar (.lara-grid-toolbar and
.laramap-toolbar both carry the .lara-toolbar base class). Flat icon-only look:
transparent fill, no border or shadow, primary-color glyph, subtle grey hover —
matching the inline toolbar actions and the cell maximize (.element-renderer__maximize).
The .dxbl-* !important overrides are required because the DxButton's
RenderStyle="Light" default styling loads after ours. */
.lara-toolbar .dxbl-btn.lara-toolbar-maximize-btn,
.lara-toolbar .dxbl-btn.lara-toolbar-popout-btn {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--lara-text-primary) !important;
border-radius: 4px !important;
}
.lara-toolbar .dxbl-btn.lara-toolbar-maximize-btn .dxbl-btn-icon,
.lara-toolbar .dxbl-btn.lara-toolbar-maximize-btn .dxbl-image,
.lara-toolbar .dxbl-btn.lara-toolbar-popout-btn .dxbl-btn-icon,
.lara-toolbar .dxbl-btn.lara-toolbar-popout-btn .dxbl-image {
font-size: 12px !important;
}
.lara-toolbar .dxbl-btn.lara-toolbar-maximize-btn:not(.dxbl-disabled):not(:disabled):hover,
.lara-toolbar .dxbl-btn.lara-toolbar-popout-btn:not(.dxbl-disabled):not(:disabled):hover {
background: color-mix(in srgb, var(--lara-text-primary) 8%, transparent) !important;
border-color: transparent !important;
color: var(--lara-text-primary) !important;
}
/* toolbar horizontal margin to align with ribbon / splitter pane content.
No bottom gap and no separator border between the toolbar (title +
Edit Columns) and the grid header — they read as one block. The
border-bottom inherited from .lara-toolbar--top is cleared here. */
.lara-grid-toolbar {
margin-left: 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0;
border-bottom: 0;
}
/* filter panel stretches to fill toolbar's remaining space */
.lara-grid-filter-panel {
width: 100%;
}
/* filter panel internal grid: chips fill space, clear button stays right */
.lara-grid-filter-panel > dxbl-stack-layout-root {
grid-template-columns: 1fr auto !important;
}
/* filter panel items align to bottom of toolbar */
.lara-grid-filter-panel > dxbl-stack-layout-root > dxbl-stack-layout-item {
align-self: end;
}
/* chips container: single line, overflow hidden */
.lara-grid-filter-chips-item {
overflow: hidden;
min-width: 0;
}
/* clear-all button: pushed to far right, never wraps or shrinks */
.lara-grid-filter-clear-item {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
/* filter badge close icon */
.lara-grid-filter-badge-close {
cursor: pointer;
font-size: 0.625rem;
line-height: 1;
opacity: 0.5;
margin-left: 2px;
}
.lara-grid-filter-badge-close:hover {
opacity: 1;
}
/* Vertically center every toolbar item (title, column chooser, inline content,
actions) on every grid toolbar. These items ship with Bootstrap's
align-items-baseline (!important), which drops single-line content to the
text baseline — out of line with the centered chips / search / actions.
DevExpress wraps the items in an intermediate dxbl-stack-layout-root, so a
direct-child (>) selector matches nothing — use a descendant combinator.
The filter panel is excluded: it keeps its own bottom-alignment (above). */
.lara-grid-toolbar dxbl-stack-layout-item:not(:has(.lara-grid-filter-panel)) {
align-items: center !important;
}
/* --------------------------------------------------------------------------
13b. Grid toolbar inline actions (Split / Consolidate / Load to ...)
Responsive: icon + text when the panel is wide, icon-only (tooltip via the
title attr) when narrow via a container query, and the title truncates so
the action buttons never clip. Global rather than scoped because the toolbar
root is a DevExpress element with no scope attribute (see LaraGridToolbar.razor.css).
-------------------------------------------------------------------------- */
.lara-grid-toolbar--has-actions {
container-type: inline-size;
container-name: lara-grid-toolbar;
}
/* title yields space (truncates with an ellipsis) so the action buttons stay on one line */
.lara-grid-toolbar__title {
min-width: 0;
overflow: hidden;
flex-shrink: 1 !important;
}
.lara-grid-toolbar__title * {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* the action group keeps its size; the title shrinks instead */
.lara-grid-toolbar__actions-item {
flex-shrink: 0 !important;
}
.lara-grid-toolbar__actions {
display: inline-flex;
align-items: center;
gap: 2px;
flex-wrap: nowrap;
}
.lara-grid-toolbar__action {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 6px;
font-size: 13px;
line-height: 1.5;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--lara-text-primary);
cursor: pointer;
white-space: nowrap;
font-family: inherit;
}
.lara-grid-toolbar__action:hover:not(:disabled) {
background: color-mix(in srgb, var(--lara-text-primary) 8%, transparent);
}
.lara-grid-toolbar__action:disabled {
color: color-mix(in srgb, var(--lara-text-primary) 45%, transparent);
cursor: default;
}
.lara-grid-toolbar__action-icon {
font-size: 12px;
}
.lara-grid-toolbar__sep {
width: 1px;
align-self: stretch;
background: var(--lara-border-light);
margin: 2px 4px;
flex: 0 0 auto;
}
/* narrow panel: hide the labels, keep the icons (text stays available as a tooltip) */
@container lara-grid-toolbar (max-width: 700px) {
.lara-grid-toolbar__action-label {
display: none;
}
.lara-grid-toolbar__action {
padding: 3px 5px;
}
}
/* --------------------------------------------------------------------------
14. Grid Column Chooser
--------------------------------------------------------------------------
DxDropDown renders its body content in a portal outside the component's
DOM tree, so Blazor scoped CSS (::deep) cannot reach these elements.
-------------------------------------------------------------------------- */
/* Let the dropdown body control its own size & padding — DxDropDown would
otherwise impose its own (mirrors the .lara-topbar-chip-dd pattern). */
.column-chooser-dropdown .dxbl-dropdown-body,
.column-chooser-dropdown .dxbl-popup-content {
min-height: 0;
padding: 0;
}
/* body container: flex column so rows stretch to full width.
Capped at half the viewport with its own scrollbar; widened so column
captions don't wrap; tight horizontal padding against the popup borders. */
.column-chooser-body {
padding: 5px 4px 6px;
display: flex;
flex-direction: column;
min-width: 300px;
max-width: 350px;
max-height: 50vh;
overflow-y: auto;
}
/* Master "All Columns" toggle (first direct child): align its checkbox
visual square with the per-column rows' checkboxes (which sit after the
drag handle + gap + the checkbox's own inner padding ≈ 27px total) and
add a divider below to separate it from the column list. */
.column-chooser-body > .dxbl-checkbox:first-child {
padding-left: 27px;
padding-bottom: 5px;
margin-bottom: 4px;
border-bottom: 1px solid var(--lara-border-light);
}
/* individual row layout */
.column-chooser-row {
padding: 0;
cursor: grab;
border: 2px solid transparent;
border-radius: 4px;
transition: border-color 0.15s, opacity 0.15s, background-color 0.15s;
}
/* trim the DevExpress checkbox's built-in vertical padding so rows stay
compact but comfortably tall (~28px). */
.column-chooser-row .dxbl-checkbox {
padding-top: 4px;
padding-bottom: 4px;
}
.column-chooser-row:active {
cursor: grabbing;
}
.column-chooser-dragging {
opacity: 0.4;
}
.column-chooser-drag-over {
border-color: var(--dxbl-cp-accent, #1976d2);
background-color: color-mix(in srgb, var(--dxbl-cp-accent, #1976d2) 8%, transparent);
}
.column-chooser-drag-handle {
cursor: grab;
color: #999;
font-size: 14px;
user-select: none;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.column-chooser-dragging .column-chooser-drag-handle {
cursor: grabbing;
}
/* action buttons container: pushed to the right */
.column-chooser-actions {
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0;
}
/* edit & delete icon buttons */
.column-chooser-edit-btn,
.column-chooser-delete-btn {
flex-shrink: 0;
opacity: 0.4;
padding: 2px 2px !important;
min-width: unset !important;
transition: opacity 0.15s;
}
.column-chooser-edit-btn:hover,
.column-chooser-delete-btn:hover {
opacity: 1;
}
.column-chooser-delete-btn:hover {
color: var(--bs-danger, #dc3545);
}
.column-chooser-edit-btn .dxbl-image,
.column-chooser-delete-btn .dxbl-image {
font-size: 12px;
}
/* --------------------------------------------------------------------------
15. Ribbon — Zeplin "middle panel" look
--------------------------------------------------------------------------
Unified flat bar. All controls (primary, outline, link) share 32px height
and 4px radius; native DX dividers styled in-place (no custom ::before).
-------------------------------------------------------------------------- */
.dxbl-ribbon {
border-bottom: 1px solid var(--lara-border-light) !important;
padding: 8px 16px !important;
min-height: 48px !important;
}
.dxbl-ribbon-toolbar,
.dxbl-btn-toolbar.dxbl-btn-plain-toolbar {
background: transparent !important;
padding: 0 !important;
gap: 0 !important;
align-items: center !important;
}
/* Right-align ONLY the view-specific action button group on each page.
Filters, search, stats and export stay on the left (their natural DOM order).
For margin-left:auto to push the action group to the SCREEN edge, the whole
wrapper chain that holds the toolbar groups must span the full ribbon width.
DX 25.2 nests the groups inside an inner items-container whose class name
varies, so we select it structurally with :has() rather than by name —
any element inside the ribbon that contains a toolbar group is stretched to
full width. The groups themselves are never matched (a group never contains
another group), so left-side groups keep their natural content width. */
.dxbl-ribbon-toolbar,
.dxbl-ribbon .dxbl-toolbar,
.dxbl-ribbon *:has(.dxbl-btn-group.dxbl-toolbar-group) {
width: 100% !important;
max-width: 100% !important;
}
/* The direct flex parent of the groups must lay out in a row and grow to fill
the toolbar, so the trailing auto-margin has space to consume. */
.dxbl-ribbon *:has(> .dxbl-btn-group.dxbl-toolbar-group) {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
}
/* The action group (the only group containing .lara-plan-btn): order:999 makes
it visually last; margin-left:auto pushes it to the right edge of the now
full-width toolbar. */
.dxbl-ribbon .dxbl-btn-group.dxbl-toolbar-group:has(.lara-plan-btn) {
order: 999 !important;
margin-left: auto !important;
}
.dxbl-ribbon .dxbl-btn-group.dxbl-toolbar-group {
background: transparent !important;
border: none !important;
padding: 0 !important;
gap: 5px !important;
align-items: center !important;
height: 32px !important;
}
.dxbl-ribbon .dxbl-btn-group.dxbl-toolbar-group.dxbl-btn-group-first {
padding-left: 0 !important;
}
/* DX 26.1.3 renamed the ribbon DOM: groups are now .dxbl-ribbon-group inside
.dxbl-adaptive-container-content (not .dxbl-btn-group.dxbl-toolbar-group), and
the adaptive container ships a default box-shadow. The rules above target the
pre-26.1.3 names and no longer match, so re-apply the same intent for the new
structure: flat container (no shadow/border — the shadow otherwise reads as a
stray floating "border" around the toolbar), a full-width content row, and the
primary action group (the green PRIMARY .lara-plan-btn — "New …" / "Create" /
"Plan" / "Split" / "Consolidate") pushed to the right edge while export/stats/info
groups keep their natural left order. Two traps with .lara-plan-btn: (1) it is also
worn by tool buttons, so we gate on .dxbl-btn-primary; (2) the "Conditional
formatting" TOGGLE (data-testid *-cf-toggle) turns .dxbl-btn-primary (green) when
ACTIVE, which would then satisfy the gate and drift to the middle — so cf-toggle
groups are explicitly excluded. Without these, a lone matched group gets a stray
margin-left:auto and flex splits the free space, stranding it mid-bar. */
.dxbl-ribbon .dxbl-adaptive-container.dxbl-btn-plain-toolbar,
.dxbl-ribbon .dxbl-ribbon-adaptive-container {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
.dxbl-ribbon .dxbl-adaptive-container-content {
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 5px;
}
.dxbl-ribbon .dxbl-ribbon-group:has(.lara-plan-btn.dxbl-btn-primary):not(:has([data-testid$="cf-toggle"])) {
order: 999 !important;
margin-left: auto !important;
}
/* DX 26.1.3 also dropped the within-group button gap (the old .dxbl-toolbar-group
carried gap:8px). Restore spacing between adjacent buttons inside a group — e.g.
Excel/CSV, or Plan/New Request which render in one group. Between-group spacing
comes from the .dxbl-adaptive-container-content gap above; adjacent-sibling here
only matches within a single group, so there's no double gap at group borders. */
.dxbl-ribbon .dxbl-bar-item + .dxbl-bar-item {
margin-left: 5px !important;
}
/* Native DX group separators — stretched through the ribbon's vertical padding */
.dxbl-ribbon .dxbl-toolbar-group-separator,
.dxbl-toolbar .dxbl-toolbar-group-separator {
width: 1px !important;
height: 48px !important;
min-height: 48px !important;
background: var(--lara-border-light) !important;
margin: -8px 14px !important;
align-self: center !important;
border: none !important;
flex-shrink: 0 !important;
}
/* Hide phantom ribbon tab scroll arrows */
.dxbl-tabs-scroll-btn-prev,
.dxbl-tabs-scroll-btn-next {
display: none !important;
}
/* --------------------------------------------------------------------------
16. Ribbon Buttons — uniform base + state variants
-------------------------------------------------------------------------- */
.dxbl-ribbon button.dxbl-btn,
.dxbl-ribbon .dxbl-btn {
height: 32px !important;
min-height: 32px !important;
padding: 0 9px !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1 !important;
border-radius: 4px !important;
letter-spacing: 0 !important;
text-transform: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
border: 1px solid transparent !important;
box-shadow: none !important;
transition: background-color 120ms, color 120ms, border-color 120ms !important;
}
.dxbl-ribbon .dxbl-btn > span {
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-transform: none !important;
}
.dxbl-ribbon .dxbl-btn .dxbl-image {
font-size: 14px !important;
color: inherit !important;
margin: 0 !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* Flat toolbar / secondary-text buttons (Excel, CSV, etc.) — outlined like Customize.
The :not(.lara-plan-btn) carve-out lets primary action buttons (green Zeplin
style, declared further down) win without specificity gymnastics. */
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary:not(.lara-plan-btn),
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn:not(.lara-plan-btn),
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn:not(.lara-plan-btn) {
background: var(--lara-surface) !important;
border: 1px solid var(--lara-border-light) !important;
color: var(--lara-text-primary) !important;
}
/* Collapse empty icon slots and drop the label's left margin so text truly
centers. Font-icon spans (Open Iconic .oi, FontAwesome .fa/.fas/.far/.fab,
DevExpress .dxbl-btn-icon) ARE empty in the DOM — their glyph is drawn
via a CSS ::before content rule — so we must exclude them or they get
hidden too (e.g. Undo/Redo icons disappear). */
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon),
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon),
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon) {
display: none !important;
}
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon) + span,
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon) + span,
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn > .dxbl-image:empty:not(.oi):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.dxbl-btn-icon) + span {
margin: 0 !important;
}
/* When the icon IS a font-icon glyph (.oi, .fa*, .dxbl-btn-icon), give the
following label an explicit 8px left margin so it doesn't crash into the
icon. */
.dxbl-ribbon button.dxbl-btn > .dxbl-image.oi + span,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fa + span,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fas + span,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.far + span,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fab + span,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.dxbl-btn-icon + span {
margin-left: 5px !important;
}
/* Center the glyph vertically inside the icon span. Font-icon glyphs are
drawn via ::before content, which by default sits on the span's baseline
rather than at its visual center — causing the icon to look slightly lower
than the adjacent label. Forcing inline-flex with align-items:center fixes
this without touching the parent's flex layout. */
.dxbl-ribbon button.dxbl-btn > .dxbl-image.oi,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fa,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fas,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.far,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.fab,
.dxbl-ribbon button.dxbl-btn > .dxbl-image.dxbl-btn-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* The violations-trigger button lives inside the ribbon, so the generic
.dxbl-ribbon button.dxbl-btn { gap: 0 } reset wins over the scoped
razor.css .violations-trigger { gap: 10px } on specificity. Restore
the gap with a matching-specificity selector here. */
.dxbl-ribbon button.dxbl-btn.violations-trigger {
gap: 6px !important;
}
/* Group separator — compensate for the group's 8px flex gap so the divider sits
symmetrically between adjacent groups (14px on each side). */
.dxbl-ribbon .dxbl-toolbar-group-separator {
margin-right: 4px !important;
}
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary:not(.lara-plan-btn):hover,
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn:not(.lara-plan-btn):hover,
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn:not(.lara-plan-btn):hover {
background: var(--lara-surface) !important;
border-color: var(--lara-primary) !important;
color: var(--lara-primary) !important;
}
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled):active,
.dxbl-ribbon button.dxbl-btn.dxbl-btn-text-secondary:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled):active,
.dxbl-ribbon button.dxbl-btn.dxbl-toolbar-btn:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled).dxbl-active,
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled):active,
.dxbl-ribbon .dxbl-toolbar-item button.dxbl-btn:not(.lara-plan-btn):not(.dxbl-disabled):not(:disabled).dxbl-active {
background: var(--lara-primary-light) !important;
border-color: var(--lara-primary) !important;
color: var(--lara-primary) !important;
}
/* Light / outline-secondary buttons (Customize) — same treatment */
.dxbl-ribbon .dxbl-btn.dxbl-btn-light,
.dxbl-ribbon .dxbl-btn.dxbl-btn-secondary.dxbl-btn-standalone {
background: var(--lara-surface) !important;
border: 1px solid var(--lara-border-light) !important;
color: var(--lara-text-primary) !important;
}
.dxbl-ribbon .dxbl-btn.dxbl-btn-light:hover,
.dxbl-ribbon .dxbl-btn.dxbl-btn-secondary.dxbl-btn-standalone:hover {
border-color: var(--lara-primary) !important;
color: var(--lara-primary) !important;
background: var(--lara-surface) !important;
}
/* Primary buttons — green Zeplin spec, applied globally (ribbon, top bar, dialogs).
Colors share the --lara-success-* palette with .lara-plan-btn so re-skinning
is a single-token change. The :not(.lara-plan-btn) carve-out is preserved so
the dedicated plan-button rule keeps its own size/icon overrides. The
:not(.lara-top-bar-undoredo *) carve-out exempts the Undo/Redo widget, which
uses .dxbl-btn-primary purely to flag an enabled state but is styled as a
transparent inline blue link, not a filled action button. */
.dxbl-btn.dxbl-btn-primary:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]) {
background: var(--lara-success) !important;
border: 1px solid var(--lara-success) !important;
color: var(--lara-text-on-dark) !important;
}
.dxbl-btn.dxbl-btn-primary:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]):hover,
.dxbl-btn-split > .dxbl-btn.dxbl-btn-primary:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]):hover {
background: var(--lara-success-hover) !important;
border-color: var(--lara-success-hover) !important;
color: var(--lara-text-on-dark) !important;
}
.dxbl-btn.dxbl-btn-primary:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]):active,
.dxbl-btn.dxbl-btn-primary:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]).dxbl-active,
.dxbl-btn-split > .dxbl-btn.dxbl-btn-primary.dxbl-active:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):not(.dxbl-disabled):not([disabled]) {
background: var(--lara-success-active) !important;
border-color: var(--lara-success-active) !important;
color: var(--lara-text-on-dark) !important;
}
.dxbl-btn.dxbl-btn-primary.dxbl-disabled:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *),
.dxbl-btn.dxbl-btn-primary[disabled]:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *) {
background: var(--lara-success-disabled) !important;
border: 1px solid var(--lara-success-disabled) !important;
color: var(--lara-text-on-dark) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* Disabled state wins over any hover/active — no colour flicker on mouseover */
.dxbl-btn.dxbl-btn-primary.dxbl-disabled:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):hover,
.dxbl-btn.dxbl-btn-primary[disabled]:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):hover,
.dxbl-btn.dxbl-btn-primary.dxbl-disabled:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):active,
.dxbl-btn.dxbl-btn-primary[disabled]:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *):active,
.dxbl-btn-split:hover > .dxbl-btn.dxbl-btn-primary.dxbl-disabled:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *),
.dxbl-btn-split:hover > .dxbl-btn.dxbl-btn-primary[disabled]:not(.lara-plan-btn):not(.lara-cancel-btn):not(.lara-top-bar-undoredo *) {
background: var(--lara-success-disabled) !important;
border-color: var(--lara-success-disabled) !important;
color: var(--lara-text-on-dark) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
.dxbl-btn.dxbl-btn-primary.dxbl-disabled:not(.lara-top-bar-undoredo *) .dxbl-image,
.dxbl-btn.dxbl-btn-primary[disabled]:not(.lara-top-bar-undoredo *) .dxbl-image {
opacity: 0.85 !important;
}
/* Split button pairing (Undo/Redo dropdown arrow) — seamless pill */
.dxbl-ribbon .dxbl-btn-split { display: inline-flex !important; }
.dxbl-ribbon .dxbl-btn-split .dxbl-btn-first {
border-radius: 4px 0 0 4px !important;
border-right: none !important;
}
.dxbl-ribbon .dxbl-btn-split .dxbl-btn-last,
.dxbl-ribbon .dxbl-btn-split-dropdown {
border-radius: 0 4px 4px 0 !important;
border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
padding: 0 5px !important;
}
.dxbl-ribbon .dxbl-btn-split-dropdown.dxbl-disabled {
border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
}
/* Ribbon focus ring — replaces raw outline with brand-blue halo */
.dxbl-ribbon .dxbl-btn:focus,
.dxbl-ribbon .dxbl-btn:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px rgba(var(--lara-primary-rgb), 0.15) !important;
}
/* --------------------------------------------------------------------------
17. Ribbon Combobox — clean border, integrated chevron
--------------------------------------------------------------------------
DX renders a material-style dark bottom underline by default. Neutralised
here; the chevron split-button is absolute-positioned to span border-to-
border of the combo container with a subtle left divider.
-------------------------------------------------------------------------- */
.dxbl-ribbon .dxbl-text-edit,
.dxbl-ribbon dxbl-combo-box {
position: relative !important;
overflow: hidden !important;
height: 32px !important;
min-height: 32px !important;
border: 1px solid var(--lara-border-light) !important;
border-radius: 4px !important;
background: var(--lara-surface) !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: stretch !important;
font-size: 13px !important;
color: var(--lara-text-primary) !important;
}
.dxbl-ribbon .dxbl-text-edit::after,
.dxbl-ribbon .dxbl-text-edit::before,
.dxbl-ribbon .dxbl-edit-input-container::after,
.dxbl-ribbon .dxbl-edit-input-container::before {
display: none !important;
content: none !important;
border: none !important;
}
.dxbl-ribbon .dxbl-text-edit:focus-within,
.dxbl-ribbon .dxbl-edit-input-container:focus-within {
border-color: var(--lara-primary) !important;
box-shadow: 0 0 0 2px rgba(var(--lara-primary-rgb), 0.12) !important;
}
.dxbl-ribbon input,
.dxbl-ribbon .dxbl-edit-input {
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
}
.dxbl-ribbon .dxbl-text-edit .dxbl-edit-input,
.dxbl-ribbon .dxbl-text-edit input {
padding-right: 32px !important;
}
/* Chevron dropdown button inside combo — borderless, spans full container */
.dxbl-ribbon button.dxbl-btn.dxbl-edit-btn-dropdown,
.dxbl-ribbon button.dxbl-btn.dxbl-edit-btn-dropdown:hover,
.dxbl-ribbon button.dxbl-btn.dxbl-edit-btn-dropdown:focus,
.dxbl-ribbon button.dxbl-btn.dxbl-edit-btn-dropdown:active {
position: absolute !important;
top: -1px !important;
bottom: -1px !important;
right: -1px !important;
height: auto !important;
width: 30px !important;
min-width: 30px !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-left: 1px solid var(--lara-border-medium) !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--lara-text-muted) !important;
outline: none !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dxbl-ribbon button.dxbl-btn.dxbl-edit-btn-dropdown:hover {
background: var(--lara-surface-secondary) !important;
color: var(--lara-primary) !important;
}
.dxbl-ribbon .dxbl-btn.dxbl-edit-btn-dropdown .dxbl-image {
font-size: 10px !important;
margin: 0 !important;
}
/* --------------------------------------------------------------------------
17b. Split Buttons — Undo / Redo (DxSplitButton)
--------------------------------------------------------------------------
Real DOM (verified against DevExpress.Blazor 24.x):
Out of the box the chevron sits flush against the action button with no
visible divider — the two halves blend into a single primary fill and the
user can't see they're separately clickable. We:
• round only the outer corners of the wrapper
• flatten the seam between the two halves
• draw a 1px divider in primary-on-white (or border-light on disabled)
• shrink the chevron icon
• add an independent hover state on each half
-------------------------------------------------------------------------- */
.dxbl-btn-split {
display: inline-flex !important;
align-items: stretch !important;
border-radius: 4px !important;
box-shadow: none !important;
}
.dxbl-btn-split > .dxbl-btn {
box-shadow: none !important;
margin: 0 !important;
}
.dxbl-btn-split > .dxbl-btn-first {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
padding-right: 6px !important;
}
.dxbl-btn-split > .dxbl-btn-split-dropdown {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
min-width: 24px !important;
padding: 0 4px !important;
/* Divider between action and chevron — light line over the primary fill */
box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.35) !important;
}
/* Divider colour for non-primary or disabled split buttons (no white fill to
contrast against — use the standard light border colour instead). */
.dxbl-btn-split:not(:has(.dxbl-btn-primary)) > .dxbl-btn-split-dropdown,
.dxbl-btn-split > .dxbl-btn-split-dropdown.dxbl-disabled {
box-shadow: inset 1px 0 0 0 var(--lara-border-light) !important;
}
/* Chevron icon sizing — DX defaults are too large for ribbon scale. */
.dxbl-btn-split > .dxbl-btn-split-dropdown .dxbl-image,
.dxbl-btn-split > .dxbl-btn-split-dropdown .dxbl-btn-icon {
font-size: 10px !important;
margin: 0 !important;
}
/* Independent hover / active state per half so the user sees which part of
the split button they're about to click. */
.dxbl-btn-split > .dxbl-btn:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-btn-split > .dxbl-btn:not(.dxbl-disabled):not(:disabled).dxbl-active {
filter: brightness(0.92);
}
.dxbl-btn-split > .dxbl-btn.dxbl-disabled,
.dxbl-btn-split > .dxbl-btn[disabled] {
cursor: not-allowed !important;
opacity: 0.55 !important;
}
/* --------------------------------------------------------------------------
17c. Split-Button Dropdown Popup — visible border + shadow
--------------------------------------------------------------------------
Real DOM (mounted under , NOT inside the ribbon):
…
The default popup has no visible boundary, so the undo history floats
ungrounded over the page. Give it a clear border + rounded corners + soft
elevation, and put consistent padding / hover on each list item.
-------------------------------------------------------------------------- */
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup {
background: var(--lara-surface) !important;
border: 1px solid var(--lara-border-light) !important;
border-radius: 6px !important;
box-shadow: 0 6px 20px rgba(12, 61, 130, 0.12) !important;
overflow: hidden !important;
}
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-dropdown-body {
padding: 3px 0 !important;
background: transparent !important;
}
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item {
padding: 0 !important;
margin: 0 !important;
}
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item {
display: flex !important;
align-items: center !important;
gap: 5px !important;
padding: 4px 9px !important;
font-size: 13px !important;
color: var(--lara-text-primary) !important;
cursor: pointer !important;
transition: background-color 0.12s ease, color 0.12s ease;
}
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-item:hover,
.dxbl-dropdown-dialog.dxbl-btn-dropdown-popup .dxbl-btn-dropdown-list-item:hover .dxbl-btn-dropdown-item {
background: var(--lara-primary-light) !important;
color: var(--lara-primary) !important;
}
/* --------------------------------------------------------------------------
18. Form-Grid Caption — "Location" table name
-------------------------------------------------------------------------- */
.d-flex.align-items-end.dxbl-stacklayout-item > span {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: var(--lara-text-primary) !important;
letter-spacing: -0.01em !important;
padding-right: 5px !important;
}
/* --------------------------------------------------------------------------
19. Edit-Columns Button — rendered as link text
-------------------------------------------------------------------------- */
[data-testid="grid-column-chooser-button"],
.dxbl-btn[data-testid="grid-column-chooser-button"] {
background: transparent !important;
border: none !important;
color: var(--lara-primary) !important;
padding: 3px 4px !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-decoration: none !important;
box-shadow: none !important;
border-radius: 0 !important;
height: auto !important;
min-height: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
[data-testid="grid-column-chooser-button"] > i,
[data-testid="grid-column-chooser-button"] > .dxbl-image,
[data-testid="grid-column-chooser-button"] > svg,
[data-testid="grid-column-chooser-button"] > .dxbl-btn-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
vertical-align: middle !important;
}
[data-testid="grid-column-chooser-button"]:hover {
background: transparent !important;
color: var(--lara-primary-hover) !important;
text-decoration: none !important;
box-shadow: none !important;
}
[data-testid="grid-column-chooser-button"]:focus,
[data-testid="grid-column-chooser-button"]:active {
background: transparent !important;
box-shadow: 0 0 0 2px rgba(var(--lara-primary-rgb), 0.15) !important;
outline: none !important;
}
/* --------------------------------------------------------------------------
19b. Search Box (DxSearchBox) — borderless soft-rounded fill
-------------------------------------------------------------------------- */
/* Borderless search field: 285x34, soft grey fill, 8px radius, no border at any
time. On focus the fill stays and a soft primary ring appears. The built-in
DevExpress icon buttons (magnifier + clear) are hidden; a single magnifier
glyph is drawn on the left via a background image, so there is no clear (x)
button. */
dxbl-input-editor.lara-search-box.dxbl-text-edit {
width: 285px !important;
min-width: 285px !important;
height: 34px !important;
border: 0 !important;
border-radius: 8px !important;
background-color: var(--lara-surface-tint, #EFF2F5) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939DA7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 12px center !important;
box-shadow: none !important;
transition: box-shadow 0.12s ease !important;
}
/* Focus: keep the fill, add a soft primary ring (no border). */
dxbl-input-editor.lara-search-box.dxbl-text-edit:focus-within {
box-shadow: 0 0 0 3px var(--lara-primary-light, rgba(65, 137, 241, 0.2)) !important;
}
/* Hide the built-in magnifier and clear buttons — the magnifier above is drawn
via the editor background image, and there is no clear (x) button. */
dxbl-input-editor.lara-search-box button.dxbl-btn {
display: none !important;
}
/* Flatten the input and leave room for the drawn magnifier glyph. */
dxbl-input-editor.lara-search-box input.dxbl-text-edit-input {
background: transparent !important;
padding-left: 36px !important;
}
dxbl-input-editor.lara-search-box input.dxbl-text-edit-input::placeholder {
color: #6B7280 !important;
font-weight: 400 !important;
opacity: 1 !important;
}
/* --------------------------------------------------------------------------
19b. Top-bar contextual search
A single search pill that stretches across the free space of the top bar.
It searches within the current page (scope chip shows which one); the "All"
scope is disabled until cross-entity server search exists. Shares the soft
grey fill / focus-ring look of .lara-search-box but flexes to fill the bar.
-------------------------------------------------------------------------- */
.lara-topbar-search {
display: flex;
align-items: center;
gap: 5px;
width: 100%;
height: 34px;
padding: 0 6px 0 8px;
background-color: var(--lara-surface-tint, #EFF2F5);
border-radius: 8px;
box-shadow: 0 0 0 3px transparent;
transition: box-shadow 0.12s ease;
}
.lara-topbar-search:focus-within {
box-shadow: 0 0 0 3px var(--lara-primary-light, rgba(65, 137, 241, 0.2));
}
.lara-topbar-search--disabled {
opacity: 0.6;
}
/* The search occupies the flex-grow ("*") top-bar slot. Exempt that slot from the global
.lara-top-bar item overflow:hidden clip (same technique as the undo/redo carve-out above)
so the focus ring isn't sheared off at the slot edges. */
.lara-top-bar .dxbl-stacklayout-root > .dxbl-stacklayout-item:has(.lara-topbar-search) {
overflow: visible;
}
.lara-topbar-search__icon {
display: inline-flex;
align-items: center;
flex: none;
color: #939DA7;
}
.lara-topbar-search__scope {
display: inline-flex;
align-items: center;
gap: 3px;
flex: none;
height: 24px;
padding: 0 5px;
background: var(--lara-surface, #FFFFFF);
border: 1px solid var(--lara-border-strong, #E7EBEE);
border-radius: 6px;
font-size: 12px;
color: var(--lara-text-primary, #1F2933);
cursor: pointer;
text-decoration: none;
}
.lara-topbar-search--disabled .lara-topbar-search__scope {
cursor: default;
pointer-events: none;
}
.lara-topbar-search__scope:hover {
background: var(--lara-surface-tint, #EFF2F5);
}
.lara-topbar-search__scope-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #1D9E75;
flex: none;
}
.lara-topbar-search__scope-label {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lara-topbar-search__chevron {
display: inline-flex;
align-items: center;
color: #939DA7;
}
.lara-topbar-search__divider {
width: 1px;
height: 18px;
background: var(--lara-border-strong, #E7EBEE);
flex: none;
}
.lara-topbar-search__input {
flex: 1 1 auto;
min-width: 0;
height: 32px;
border: 0;
background: transparent;
outline: none;
font-size: 14px;
color: var(--lara-text-primary, #1F2933);
}
.lara-topbar-search__input::placeholder {
color: #6B7280;
opacity: 1;
}
/* Scope dropdown (rendered in a DxDropDown body portal). */
.lara-topbar-search-scope-menu {
padding: 4px;
}
.lara-topbar-search-scope-menu__header {
font-size: 12px;
font-weight: 600;
color: var(--lara-text-secondary, #6B7280);
padding: 3px 5px 5px;
}
.lara-topbar-search-scope-menu__item {
display: flex;
align-items: center;
gap: 6px;
padding: 5px;
border-radius: 6px;
}
.lara-topbar-search-scope-menu__item--active {
background: var(--lara-primary-light, rgba(65, 137, 241, 0.12));
}
.lara-topbar-search-scope-menu__item--disabled {
opacity: 0.7;
cursor: not-allowed;
}
.lara-topbar-search-scope-menu__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--lara-primary, #4189F1);
color: #FFFFFF;
flex: none;
}
.lara-topbar-search-scope-menu__box {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1.5px solid var(--lara-border-strong, #C7CFD6);
flex: none;
}
.lara-topbar-search-scope-menu__text {
display: flex;
flex-direction: column;
gap: 1px;
}
.lara-topbar-search-scope-menu__title {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 500;
color: var(--lara-text-primary, #1F2933);
}
.lara-topbar-search-scope-menu__subtitle {
font-size: 12px;
color: var(--lara-text-secondary, #6B7280);
}
.lara-topbar-search-scope-menu__badge {
font-size: 10px;
font-weight: 400;
color: #854F0B;
background: #FAEEDA;
padding: 1px 5px;
border-radius: 6px;
}
/* --------------------------------------------------------------------------
20. Grid Row Padding & Selection Indicator
-------------------------------------------------------------------------- */
/* Zeplin spec: 2 px top/bottom padding so a 25 px line-height yields a 29 px row. */
.dxbl-grid-table > tbody > tr > td {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
/* When the grid shows "No data to display", collapse the DevExpress
virtual-scroll spacer rows above/below so they don't appear as
two phantom empty rows around the empty-state message.
Target .dxbl-grid-empty-data-area — the inner "No data" message div
that DxGrid only renders when the grid is actually empty. We can NOT
target tr.dxbl-grid-empty-row or td.dxbl-grid-empty-cell here: both are
structural markers that DxGrid keeps in the DOM (display:none) even when
data exists, so matching them would collapse the virtual spacers under
normal conditions and break vertical virtual scrolling. */
.dxbl-grid-table tbody:has(.dxbl-grid-empty-data-area) [dxbl-top-virtual-spacer-element],
.dxbl-grid-table tbody:has(.dxbl-grid-empty-data-area) [dxbl-bottom-virtual-spacer-element] {
display: none !important;
}
/* Compact header row: trimmed from the old 36px / 11px-12px spec for a denser
grid that leaves more room for the data below it. */
.dxbl-grid-header-row > th {
padding: 6px 6px !important;
height: 30px !important;
vertical-align: middle !important;
}
/* Filter funnel flush to the header cell's right edge. The button carries
margin-left:auto (DevExpress), so it already sits at the right of the header
content; the negative margin cancels the cell's 6px right padding so the icon
reads as sitting at the very end of the cell. The button keeps its own inner
padding, so the glyph is not clipped against the border. */
.dxbl-grid .dxbl-grid-header-content > .dxbl-grid-filter-menu-funnel-btn {
margin-right: -6px;
}
/* Zeplin spec for chips inside a grid cell (pill, ~19 px tall): the cell rule
above sets `line-height: 25 px` to make the 29 px row math work for text-only
cells. But that line-height is inherited by inline-block pill spans
(LaraBadge, WorkflowStatusBadge, etc.), which inflates them to fill the whole
row. Reset line-height on inline children of cells so pills size to their own
font, while the cell itself keeps its 29 px line-height for empty/text rows.
The font-size/padding/radius rules style the pill itself. */
.dxbl-grid .dxbl-grid-table > tbody > tr > td span,
.dxbl-grid .dxbl-grid-table > tbody > tr > td div > span,
.dxbl-grid .lara-badge {
line-height: 1.4 !important;
}
.dxbl-grid .lara-badge,
.dxbl-grid .tag-readonly-container > span,
.dxbl-grid .dxbl-tagbox-tag {
font-size: 10px !important;
font-weight: 600 !important;
padding: 2px 4px !important;
border-radius: 50px !important;
}
/* Multi-value (MultiChoice) cells — outlined tags + "+N" overflow instead of raw
JSON like [ "tail_lift", "adr" ]. Emitted by MultiChoiceRenderer.Render. nowrap +
overflow keeps the cell on one grid row; the full list is in the cell title tooltip. */
.lara-multivalue-cell {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 3px;
max-width: 100%;
overflow: hidden;
}
.lara-multivalue-tag {
display: inline-flex;
align-items: center;
line-height: 1.4;
white-space: nowrap;
font-size: 10px;
font-weight: 500;
padding: 2px 5px;
color: var(--lara-text-secondary);
background: var(--lara-surface);
border: 1px solid var(--lara-border-strong);
border-radius: var(--lara-radius-pill);
}
.lara-multivalue-more {
flex: none;
line-height: 1.4;
white-space: nowrap;
font-size: 10px;
font-weight: 600;
color: var(--lara-text-muted);
}
/* Custom column filter menu for multi-value (MultiChoice) columns — a checkbox list of the
configured allowed values (MultiChoiceColumnFilter). The built-in menu can't list array values. */
.lara-mvfilter {
min-width: 220px;
padding: 2px;
}
.lara-mvfilter-list {
min-height: 80px;
max-height: 280px;
}
/* Selected / focused row — brand-blue left accent */
.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:first-child,
.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td:first-child {
box-shadow: inset 3px 0 0 0 var(--lara-primary) !important;
}
/* Grid links (Identifier column, etc.) in brand blue */
.dxbl-grid-table a {
color: var(--lara-primary) !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.dxbl-grid-table a:hover {
color: var(--lara-primary-hover) !important;
text-decoration: underline !important;
}
/* --------------------------------------------------------------------------
21. Grid Footer / Pager — Zeplin dark bar (29px)
-------------------------------------------------------------------------- */
.dxbl-grid-footer-row,
.dxbl-grid-footer-row > td,
.dxbl-grid-footer-row th {
height: 29px !important;
min-height: 29px !important;
background-color: var(--lara-surface-dark) !important;
color: var(--lara-text-on-dark) !important;
border-top: none !important;
}
.dxbl-grid-footer-row > td {
padding: 5px 8px !important;
font-size: 12px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
vertical-align: middle !important;
}
.dxbl-grid-footer-row > td,
.dxbl-grid-footer-row > td * {
color: var(--lara-text-on-dark) !important;
}
/* --------------------------------------------------------------------------
Plan ("Plánovat") primary action button — Zeplin spec
Project 69d4e4e567283b0f48ac766d / screen 69d632301694c0543dd70012
Colors come from the --lara-success-* palette so theme overrides can re-skin
this button without editing CSS rules. The `!important` declarations remain
because the DevExpress button selectors are highly specific; collapsing them
would require a deeper specificity rework on the DxButton class chain.
-------------------------------------------------------------------------- */
.lara-plan-btn.dxbl-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 5px;
height: 33px !important;
min-height: 33px !important;
padding: 0 8px !important;
background: var(--lara-success) !important;
color: var(--lara-text-on-dark) !important;
border: 0 !important;
border-radius: 3px !important;
box-shadow: none !important;
font-weight: 700 !important;
font-size: 13px !important;
line-height: 16px !important;
text-transform: none !important;
}
.lara-plan-btn.dxbl-btn:not(:disabled):not(.dxbl-disabled):hover {
background: var(--lara-success-hover) !important;
color: var(--lara-text-on-dark) !important;
border-color: transparent !important;
}
.lara-plan-btn.dxbl-btn:not(:disabled):not(.dxbl-disabled):active,
.lara-plan-btn.dxbl-btn:not(:disabled):not(.dxbl-disabled).dxbl-active {
background: var(--lara-success-active) !important;
color: var(--lara-text-on-dark) !important;
}
.lara-plan-btn.dxbl-btn:disabled,
.lara-plan-btn.dxbl-btn.dxbl-disabled {
background: var(--lara-success-disabled) !important;
color: var(--lara-text-on-dark) !important;
cursor: not-allowed;
}
/* Icon: white, sized to match the 13px label, sits after the text via
the row-reverse direction on the host. */
.lara-plan-btn .dxbl-btn-icon,
.lara-plan-btn .dxbl-image,
.lara-plan-btn .lara-plan-btn__icon {
color: var(--lara-text-on-dark);
font-size: 13px;
line-height: 13px;
margin: 0 !important;
}
/* --------------------------------------------------------------------------
Cancel / dismiss buttons — red "danger" treatment, applied app-wide.
Two interchangeable hooks, both resolving to the same red style:
• [data-testid$="-cancel"] — the repo's existing Cancel-button test-id
convention. DevExpress splats data-testid onto the rendered