/* Best.Controls - the styling of every control in the library, one section per control.
   Loaded by the host app (App.razor) before its own site.css, so a host can override a rule. Colours
   and radii come from the Bootstrap / DevExpress theme variables (--bs-*), so every theme skin fits. */

/* ===================================================================== SPLIT LAYOUT - the form-over-grid frame (SplitLayout, SerialEntryShell's + button) */
/* ==== SPLIT LAYOUT ==================================================
   Everything that styles the form-above-grid frame lives here, in this one
   section, next to its component (Best.Controls/Layout/SplitLayout.razor - the
   only place a DxSplitter is used; the SplitLayout tests fails if
   any other screen uses one). The entry screens and Manage Modules are both
   drawn by it, so a splitter fix made in this section (or in the component)
   reaches every form and grid at once.

   1. The root fills the height left under the page header.               */
.module-editor-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.flex-fill-height {
    flex: 1;
    min-height: 0;
}

.grid-pane-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative; /* the floating + button (.grid-add-fab) is placed against this */
}

/* The list's floating + button (SerialEntryShell.AddNew): a round primary
   button over the bottom-right corner of the grid pane, above the grid. */
.grid-add-fab.dxbl-btn {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    padding: 0;
    min-width: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    z-index: 5;
}

.grid-add-fab svg {
    fill: currentColor;
}

.grid-fill-height {
    flex: 1;
    min-height: 0;
}

/* Every grid (user, 2026-10-11: "in all grid hover, show the full row highlighted"): the row under the mouse is lit across all its cells,
   lighter than the row open in the form (.grid-row-editing below), which stays the stronger of the two. */
.dxbl-grid tr[data-visible-index]:hover > td {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.grid-row-editing td {
    background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
}

/* 2. DxSplitterPane clips its content by default (overflow: hidden) - on a
   short viewport the edit form's fields run past the pane's 40%/260px
   allotment and get cut off instead of the pane just scrolling to them. */
.module-editor-root .dxbl-splitter-pane {
    overflow-y: auto;
}

/* 3. Collapsing one splitter pane (the arrows on the bar) must move the bar to
   the edge and give the other pane everything: the splitter's height is
   otherwise whatever its panes' content adds up to, so it shrank and the bar
   stayed put with only the collapsed pane vanishing. While a pane is
   collapsed, the page's <form> (SerialEntryShell sits inside one on most
   screens), the loading panel's content and the splitter all fill the
   content area in turn. The normal two-pane layout is left exactly as it
   was. */
.content > form:has(> .module-editor-root.pane-collapsed) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.module-editor-root.pane-collapsed .dxbl-loading-panel-target-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* 4. The maximize / restore button in each pane's top-right corner: stays in view while the pane scrolls, quiet until hovered. */
.module-editor-root .pane-max-btn {
    position: sticky;
    top: 4px;
    float: right;
    z-index: 5;
    margin: 4px 6px 0 0;
    padding: 2px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 0;
    opacity: 0.6;
    cursor: pointer;
}

.module-editor-root .pane-max-btn:hover {
    opacity: 1;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
}

/* ==== end of SPLIT LAYOUT ============================================ */

/* ===================================================================== ValidationSummaryBox */
/* ValidationSummaryBox - a horizontal, "|"-separated list of clickable
   error messages instead of the framework's default stacked <ul>, each one
   jumping focus straight to its field. */
.validation-summary-box {
    border: 1px solid var(--bs-danger);
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--bs-danger-rgb), 0.08);
    padding: 0.5rem 0.75rem;
}

.validation-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.validation-summary-list li {
    white-space: nowrap;
}

.validation-summary-list li:not(:first-child)::before {
    content: "|";
    margin: 0 0.5rem;
    color: var(--bs-danger);
    opacity: 0.5;
}

.validation-summary-link {
    display: inline-block;
    width: auto;
    text-align: left;
    background: none;
    border: none;
    padding: 0.25rem 0;
    color: var(--bs-danger);
    text-decoration: underline;
    cursor: pointer;
}

.validation-summary-link:hover,
.validation-summary-link:focus {
    color: var(--bs-danger);
    text-decoration: none;
}

/* ===================================================================== Reserved invalid-icon gutter in an editor root */
/* DevExpress only renders the invalid-state icon (dxbl-edit-validation-status)
   as a real flex sibling in front of the input when a field is actually
   invalid - with no reserved space for it otherwise, the input's text jumps
   right the moment validation fails and jumps back left the moment it's
   fixed. Reserving that gutter unconditionally, then pulling the icon out of
   flow to sit inside it, keeps every field's text start fixed regardless of
   validity. */
.module-editor-root .dxbl-text-edit,
.module-editor-root dxbl-memo-editor {
    position: relative;
    padding-left: 26px;
}

.module-editor-root .dxbl-edit-validation-status {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 1;
}

/* ===================================================================== PasswordTextBox */
/* PasswordTextBox - hand-copied invalid icon (DxTextBox binds to its own
   local Value, not the model directly, so it never gets the automatic one)
   plus the CSS-only masking toggle. */
.password-field-wrapper {
    position: relative;
}

.password-field-wrapper .password-validation-status {
    position: absolute;
    top: 50%;
    left: var(--dxbl-text-edit-validation-status-padding-left, 8px);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.password-field-wrapper .password-validation-status .dxbl-edit-validation-status-icon-invalid {
    color: var(--bs-danger);
}

.password-field-wrapper.has-password-error .dxbl-text-edit-input {
    padding-inline-start: var(--dxbl-text-edit-first-child-padding-x, 28px);
}

.password-toggle-btn svg,
.password-generate-btn svg {
    fill: currentColor;
}

.password-masked .dxbl-text-edit-input {
    -webkit-text-security: disc;
}

/* ===================================================================== Required-field marker */
/* Marks a required DevExpress editor with a thin red line on its own right
   border, instead of a separate asterisk/label decoration. */
.required-field {
    border-right-width: 3px !important;
    border-right-style: solid !important;
    border-right-color: var(--bs-danger) !important;
}

.required-field:focus-within,
.required-field.dxbl-focused {
    border-right-color: var(--bs-danger) !important;
}

/* ===================================================================== AppDateEdit */
/* AppDateEdit - a typed date that can't be read (31-02, half typed): red box
   and a one-line note under it, until it's corrected or picked from the calendar. */
.app-date-invalid {
    border-color: var(--bs-danger) !important;
}

.app-date-error {
    color: var(--bs-danger);
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Under the date box's calendar: the chosen date with its month's name (05/Nov/2026), read-only, centred. */
.app-date-long {
    text-align: center;
    font-weight: 600;
    padding: 0.35rem 0.5rem 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    user-select: text;
}

/* ===================================================================== GridPrintLink */
/* The print icon in a document grid row. */
.grid-print-link {
    color: var(--bs-primary);
    display: inline-flex;
    padding: 2px 4px;
}

.grid-print-link:hover {
    color: var(--bs-link-hover-color);
}

/* ===================================================================== LookupComboBox and its quick-add popup */
/* LookupComboBox's "+" editor button uses DevExpress's own dx-plus sprite
   so its stroke weight matches the dropdown arrow beside it. */
.lookup-add-btn svg {
    fill: currentColor;
}

/* The quick-add popup body: its own form gets the same reserved icon
   gutter the main editors have (see .module-editor-root above), since it
   isn't inside one. */
.lookup-add-popup .dxbl-popup-body {
    padding: 1rem 1.25rem 1.25rem;
}

.lookup-add-popup .dxbl-text-edit {
    position: relative;
    padding-left: 26px;
}

.lookup-add-popup .dxbl-edit-validation-status {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 1;
}

/* ===================================================================== GridToolbar */
/* Grid toolbar (SerialEntryShell): the search-row magnifier toggle, the
   page-size selector, and the pager that only shows once needed - ported
   from MyAccount's identical grid toolbar. */
/* The grid toolbar's icon buttons (filter, export, import) are DxButtons in
   Link style - no padding, so they sit as tight as MyAccount's bare icons. */
.grid-icon-btn.dxbl-btn {
    padding: 0;
    min-width: 0;
    line-height: 1;
}

.grid-icon-btn svg {
    fill: currentColor;
}

.grid-filter-toggle-btn svg {
    fill: currentColor;
    opacity: 0.55;
}

.grid-filter-toggle-btn.active {
    color: var(--bs-primary);
}

.grid-filter-toggle-btn.active svg {
    opacity: 1;
}

.grid-page-size-label {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.grid-page-size-input {
    width: 90px;
}

/* The pager's page-number box: DevExpress sizes it to its own content
   (2 characters' worth) via an inline style, too narrow for a typed "+2" or
   "-15" - matched to .grid-page-size-input's width instead, !important since
   an inline style otherwise wins over anything here. */
.dxbl-pager-page-edit {
    width: 90px !important;
}

.dxbl-pager-page-edit .dxbl-text-edit-input {
    text-align: center;
}

/* ===================================================================== SerialEntryShell actions bar */
/* FormActions (SerialEntryShell): Save/Reset and friends, below the whole
   splitter rather than inside the scrollable form pane, so they're always
   reachable without scrolling. */
.entry-actions-bar {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* ===================================================================== Floating labels (DxFormLayout CssClass="floating-form") */
/* Floating labels (DxFormLayout CssClass="floating-form" with vertical
   captions): each caption sits on the field's top edge, small, so the value
   gets the field's whole width. The "#..." hint is a NullText that only shows
   while the empty field has focus - typing (or leaving) hides it; an auto-generated box's "#auto ..." hint shows always (below). */
.floating-form .dxbl-fl-item {
    position: relative;
    margin-top: 0.6rem;
}

.floating-form .dxbl-fl-cpt {
    position: absolute;
    top: -0.55rem;
    left: 0.6rem;
    z-index: 2;
    margin: 0;
    padding: 0 0.3rem;
    font-size: 0.72rem;
    line-height: 1.1;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-body-bg, #fff);
    pointer-events: none;
    transition: color 0.15s ease;
}

/* An item whose caption is a single blank (Caption=" ", used to line a button or check box up with its neighbours) still renders a
   label: absolutely placed on the item's top edge with the page background, it paints a small pale square over the top-left corner of
   the button (most visible in Edge and on tinted themes). The item keeps its margin; only the blank label is hidden. */
.floating-form .dxbl-fl-item:has(> .dxbl-fl-ctrl > :is(.dxbl-btn, dxbl-check)) > .dxbl-fl-cpt {
    display: none;
}

.floating-form .dxbl-fl-item:focus-within .dxbl-fl-cpt {
    color: var(--bs-primary);
}

.floating-form input::placeholder,
.floating-form textarea::placeholder {
    opacity: 0;
    font-style: italic;
    transition: opacity 0.15s ease;
}

.floating-form input:focus::placeholder,
.floating-form textarea:focus::placeholder {
    opacity: 0.55;
}

/* An auto-generated box (serial / voucher number: its hint starts with "#auto", e.g. "#auto on save - ...") shows the hint ALWAYS while
   it is empty, focused or not - typing hides it (user, 2026-10-11). */
.floating-form input[placeholder^="#auto"]::placeholder {
    opacity: 0.55;
}

/* A field's own message (ValidationMessage) sits ON the box's lower edge, right-aligned - the way its caption sits on the top edge -
   so it takes no height of its own. As a line under the box it pushed every row below it down 20px when it came and pulled them back
   when it went, which made the form jump while a bill was being typed (user, 2026-10-11). A long message is cut with "..."; the
   summary box (shown on Save) has it in full. */
.floating-form .dxbl-fl-item .validation-message {
    position: absolute;
    right: 0.6rem;
    bottom: -0.45rem;
    z-index: 2;
    max-width: calc(100% - 1.2rem);
    margin: 0;
    padding: 0 0.3rem;
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-form-invalid-color, var(--bs-danger, #dc3545));
    background: var(--bs-body-bg, #fff);
    pointer-events: none;
}

/* A read-only value shown in a floating-label form (an estimated total) is
   boxed like a field so its floating caption has an edge to sit on. */
.floating-form .form-control-plaintext {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 0.375rem 0.75rem;
    min-height: 2.25rem;
}

/* ===================================================================== SerialEntryShell drafts picker */
/* The drafts picker in the entry form's draft bar: a sensible width, so the
   Discard / Clear all / Save draft buttons stay on the same row. */
.draft-bar .draft-select {
    flex: 0 1 26rem;
    min-width: 12rem;
}

/* ===================================================================== noAutofill.js */
/* Autofill is switched off (js/noAutofill.js), but if a browser fills a field
   anyway it must not paint its own pale tint and blue text over the theme -
   that is what made a filled Phone box look wrong on the dark themes. The
   field keeps the theme's own background and text colour. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--bs-body-color);
    caret-color: var(--bs-body-color);
    box-shadow: 0 0 0 1000px var(--dxbl-text-edit-bg, var(--bs-body-bg)) inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* ===================================================================== NavIcon */
/* DevExpress Image Library icons (NavIcon): a small white tile behind each, so
   the grey and coloured artwork reads on the purple side menu, on cards and on
   dark themes alike. */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.nav-icon img {
    width: 1.15rem;
    height: 1.15rem;
    pointer-events: none;
}

.nav-icon-lg {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.6rem;
}

.nav-icon-lg img {
    width: 1.9rem;
    height: 1.9rem;
}

/* ===================================================================== SKELETON (Skeleton.razor) */
/* ---------------------------------------------------------------- SKELETON
   Shown in place of a screen's content while its data loads (Skeleton.razor), so nothing is ever blank: the shapes
   of the cards / form / list that are about to appear, softly shimmering in a tint of the theme skin's colour. */
.skeleton-wrap {
    width: 100%;
}

.skeleton {
    --skeleton-base: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 10%, var(--bs-body-bg));
    --skeleton-shine: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 22%, var(--bs-body-bg));
    display: block;
    border-radius: 0.4rem;
    background-color: var(--skeleton-base);
    background-image: linear-gradient(90deg, transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
    background-position: 200% 0;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

.skeleton-line {
    height: 0.9rem;
}

.skeleton-line-sm {
    height: 0.7rem;
}

.skeleton-title {
    height: 1.3rem;
    width: 30%;
    margin-bottom: 1rem;
}

.skeleton-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
}

.skeleton-input {
    height: 2.4rem;
    width: 100%;
}

.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.skeleton-panel {
    padding: 1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    max-width: 60rem;
}

.skeleton-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.skeleton-table {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.skeleton-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.skeleton-row:first-child {
    border-top: 0;
}

.skeleton-row-head {
    background-color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 5%, var(--bs-body-bg));
}

/* ===================================================================== GridToolbar search box */
/* The search box the magnifier opens in a grid toolbar (entry screens and the Auditor Extract lists). */
.grid-search-box {
    width: 15rem;
}

/* The magnifier sits INSIDE the search box at its left edge - one control, not a box and a separate icon (user, 2026-10-11). */
.grid-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.grid-search-wrap .grid-filter-toggle-btn.dxbl-btn {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* The text and the cursor start AFTER the magnifier (0.55rem in, about 1rem wide): 1.2rem put the cursor and "Search..." under the lens
   (user, 2026-10-24: "grid search cursor and magnifier lens overlapping"). !important - DevExpress sets the input's own padding. */
.grid-search-wrap .grid-search-box input {
    padding-left: 1.65rem !important;
}

/* ===================================================================== RelatedRecordsPanel */
/* A small, read-only, collapsed-by-default history grid at the foot of a form (see the component's
   own comment) - margin above to separate it from the form's own fields, and a max-height with its
   own scroll on the grid itself so a supplier with fifty bills doesn't grow the whole form pane. */
.related-records-accordion {
    margin-top: 1rem;
}

.related-records-empty {
    padding: 0.5rem 0;
}

.related-records-grid {
    max-height: 14rem;
}

.related-records-grid .dxbl-grid-view-header,
.related-records-grid .dxbl-grid-view-data-row {
    font-size: 0.85rem;
}

/* The + at the right of a related-records header (inside the header's own row, so it is vertically centred on it): goes to
   the screen for those records with a new one prefilled. */
.related-records-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.related-records-title {
    flex: 1 1 auto;
}

.related-records-add {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vk-brand, var(--bs-primary));
    border-radius: 50%;
    color: var(--vk-brand, var(--bs-primary));
    background: var(--bs-body-bg);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
}

.related-records-add:hover,
.related-records-add:focus-visible {
    color: #fff;
    background: var(--vk-brand, var(--bs-primary));
    text-decoration: none;
}

/* ===================================================================== The field in use glows (user, 2026-10-11) */
/* The box the cursor is in - text, number, date, drop-down, memo - gets a soft glow in the theme colour and a slightly stronger edge,
   so it is easy to see where typing goes. Buttons and check boxes reached with Tab get the same ring (not on a mouse click). The red
   right-hand line of a required field stays. */
.dxbl-text-edit:focus-within:not(.required-field),
dxbl-memo-editor:focus-within:not(.required-field),
.dxbl-memo-edit:focus-within:not(.required-field) {
    border-color: var(--vk-brand, var(--bs-primary)) !important;
}

.dxbl-text-edit:focus-within,
dxbl-memo-editor:focus-within,
.dxbl-memo-edit:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 22%, transparent),
                0 0 10px color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 18%, transparent) !important;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.dxbl-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 30%, transparent) !important;
    border-radius: var(--bs-border-radius);
}

/* A check box: the ring goes round the small tick box only - round the whole item it drew a band across the form's width (user,
   2026-10-11: "remove selection band"). */
.dxbl-checkbox:has(:focus-visible) .dxbl-checkbox-check-element {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 30%, transparent) !important;
}

.dxbl-checkbox:focus-within {
    outline: none;
    box-shadow: none !important;
}

/* The lit row of a list (formKeyboard.js, keyboard use - the first row by default): like the hover, with a bar at its left edge; brighter
   while the keyboard is on it. The row open in the form (.grid-row-editing) stays the strongest. */
.dxbl-grid tr.grid-row-kb > td {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.dxbl-grid tr.grid-row-kb > td:first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.dxbl-grid tr.grid-row-kb:focus-within > td:focus {
    outline: none;
}

.dxbl-grid tr.grid-row-kb:focus-within > td {
    background-color: rgba(var(--bs-primary-rgb), 0.14);
}

/* StatusBadge: status and warning labels (document validity, ID card status, attendance, payroll, stage budgets). Was the Best app's
   own site.css; it lives with the component so every app gets the same look. */
.hr-badge {
    display: inline-block;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    border: 1px solid transparent;
}

.hr-badge-ok {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.45);
    color: #146c43;
}

.hr-badge-warn {
    background-color: rgba(255, 193, 7, 0.22);
    border-color: rgba(204, 154, 0, 0.6);
    color: #7a5b00;
}

.hr-badge-danger {
    background-color: rgba(220, 53, 69, 0.14);
    border-color: rgba(220, 53, 69, 0.5);
    color: #b02a37;
}

.hr-badge-muted {
    background-color: rgba(108, 117, 125, 0.14);
    border-color: rgba(108, 117, 125, 0.4);
    color: #565e64;
}

.hr-badge-info {
    background-color: rgba(13, 110, 253, 0.12);
    border-color: rgba(13, 110, 253, 0.4);
    color: #0a58ca;
}

[data-vk-dark] .hr-badge-ok { color: #75d6a4; }
[data-vk-dark] .hr-badge-warn { color: #ffd966; }
[data-vk-dark] .hr-badge-danger { color: #f1919b; }
[data-vk-dark] .hr-badge-muted { color: #adb5bd; }
[data-vk-dark] .hr-badge-info { color: #8bb9fe; }

/* The form / list splitter bar follows the theme (user, 2026-10-12: "form + splitter + grid, splitter also need to use themes"): DevExpress
   draws it a fixed light grey with a near-black grip in every theme - a pale stripe on a dark theme. A light tint of the theme colour
   over the page background, the grip and arrows in the theme colour; a little stronger while hovered or dragged. */
.dxbl-splitter-separator {
    background-color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 10%, var(--bs-body-bg)) !important;
    border-color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 25%, transparent) !important;
    transition: background-color 0.15s ease;
}

.dxbl-splitter-separator:hover,
.dxbl-splitter-separator:active {
    background-color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 22%, var(--bs-body-bg)) !important;
}

.dxbl-splitter-separator .dxbl-splitter-resize-handle-image {
    background-color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 70%, var(--bs-body-color)) !important;
}

.dxbl-splitter-separator .dxbl-splitter-button {
    color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 70%, var(--bs-body-color));
}