/* generated by Generator Studio — standard theme (DevExtreme-derived)
   UI Framework: Native · mode: light
   Edit colours in Generator Studio, not here: this file is regenerated. */

:root {
    color-scheme: light;

    /* brand */
    --app-primary: #2d6cdf;
    --app-secondary: #6c757d;
    --app-accent: #b87333;
    --ui-primary-hover: #2963cd;
    --ui-primary-active: #265bbb;
    --ui-secondary-hover: #636c73;
    --ui-focus-ring: rgba(45,108,223,0.25);

    /* typography — DevExtreme Generic stack */
    --ui-font: 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
    --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ui-font-size: 14px;
    --ui-font-size-sm: 12px;
    --ui-line-height: 1.5;
    --ui-font-weight-bold: 700;

    /* metrics */
    --ui-control-height: 34px;
    --ui-field-font-size: .875rem;
    --ui-label-font-size: .8125rem;
    --ui-field-gap: 14px;
    --ui-button-radius: 6px;
    --ui-radius: 6px;
    --ui-radius-sm: 4px;
    --ui-pad-x: 8px;
    --ui-pad-y: 5px;
    --ui-row-gap: 10px;
    --ui-topbar-h: 0px;
    --ui-sidebar-w: 258px;
    --ui-subbar-h: 46px;
    --ui-page-gap: 24px;
    --ui-gap: 6px;
    --ui-transition: 150ms ease;

    /* surfaces — light is always the base. The AdminLTE shell this
       template ships is not dark-aware, so emitting dark values at
       :root produced dark inputs and grids inside a white page. Dark
       is applied below, scoped to a body class, together with the
       page containers so the whole thing flips at once. */
    --ui-bg: #fff;
    --ui-bg-subtle: #f9f9f9;
    --ui-bg-hover: #f5f5f5;
    --ui-bg-active: #ebebeb;
    --ui-bg-disabled: #f5f5f5;
    --ui-bg-overlay: #fff;
    --ui-text: #333;
    --ui-text-muted: #626b75;
    --ui-text-disabled: #bbb;
    --ui-border: #ddd;
    --ui-border-strong: #c9c9c9;
    --ui-card-border: #e7e9ec;
    --ui-shadow: 0 4px 6px rgba(0,0,0,.16);
    --ui-shadow-lg: 0 10px 40px rgba(0,0,0,.25);
    --ui-text-inverse: #fff;

    /* status — DevExtreme Generic palette */
    --ui-danger: #d9534f;
    --ui-success: #5cb85c;
    --ui-warning: #f0ad4e;
    --ui-info: #5bc0de;
}

/* ==========================================================================
   1b. ONE TYPEFACE
   The shell loads Montserrat and Open Sans and applies them element by
   element, so a form came out with its labels in one face and its inputs
   in another, and the brand in a third. Rather than chase every shell
   selector, the family is stated on the document and restated on the
   elements the shell names directly.

   Deliberately no descendant or universal selectors here: icon fonts set
   their own family on the icon element, and a rule like ".btn *" would
   override it and turn every glyph into letters.
   ========================================================================== */

html,
body {
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
}

button,
input,
select,
textarea,
optgroup { font-family: var(--ui-font); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ui-font); }

label,
legend,
.form-label,
.col-form-label,
.card-title,
.card-header,
.breadcrumb,
.navbar-brand,
.brand-text,
.content-header-title,
.nav,
.btn,
.table,
table,
.modal,
.dropdown-menu,
.badge,
.alert { font-family: var(--ui-font); }

/* Widget frameworks keep their own class chains, so name them too. */
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.tabulator,
.select2-container { font-family: var(--ui-font); }

/* Anything genuinely monospaced stays that way. */
code, kbd, pre, samp { font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }

/* ==========================================================================
   2. NATIVE ADAPTER SKIN (.ua-*)
   Every rule below resolves to a token, never to a raw value, so the whole
   surface re-themes from :root alone.
   ========================================================================== */

.ua-input,
.ua-button,
.ua-dd-input,
.ua-grid,
.ua-dialog,
.ua-popup {
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
}

/* ---- text inputs ----
   One field for the whole application: the one the Setup screen draws.
   A hairline border, the value in the text colour, the accent on the
   border when focused and no glow around it. It is stated for
   .form-control too, so the Bootstrap inputs a few account and profile
   views still render look the same as the adapter's.

   A height, not a min-height: the vendor bundle fixes .form-control at
   calc(2.75rem + 2px), which a min-height cannot undo, so every form
   field came out 41px tall while the Setup fields were 34. Vertical
   padding is left at zero because a single-line input centres its own
   text; the multi-line controls below put it back. */
.ua-input,
.form-control {
    width: 100%;
    height: var(--ui-control-height);
    min-height: 0;
    padding: 0 var(--ui-pad-x);
    font-family: var(--ui-font);
    font-size: var(--ui-field-font-size);
    line-height: var(--ui-line-height);
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color var(--ui-transition);
}
/* Bootstrap sizes a single-line select through a longer selector than
   the one above, so it is restated at that weight. */
select.form-control:not([size]):not([multiple]) { height: var(--ui-control-height); }
/* The shell's theme bundle colours every field inside a form through
   "form .form-control" (#ccd6e6 border, #3f587e text, #b1c1d8
   placeholder), which outweighs a single class. Only those properties
   are restated at that weight, so the focus, hover, read-only and
   lookup rules below - all heavier still - keep applying. */
form .ua-input,
form .form-control { color: var(--ui-text); border-color: var(--ui-border); }
.ua-input::placeholder,
.form-control::placeholder,
form .ua-input::placeholder,
form .form-control::placeholder { color: var(--ui-text-muted); opacity: 1; }
.ua-input:hover,
.form-control:hover { border-color: var(--ui-border-strong); }
/* The border carries focus, as it does on the Setup screen. A ring
   outside the border also clipped inside table cells and the grid
   filter row. */
.ua-input:focus,
.ua-input:focus-visible,
.form-control:focus {
    outline: none;
    color: var(--ui-text);
    background: var(--ui-bg);
    border-color: var(--app-primary);
    box-shadow: none;
}
.ua-input:disabled,
.form-control:disabled {
    background: var(--ui-bg-disabled);
    color: var(--ui-text-muted);
    cursor: not-allowed;
}
/* The detail views show a record through read-only fields. The adapter
   renders those disabled and marks them ua-readonly; they keep the text
   colour on a sunken field, because a greyed value is hard to read and
   reading it is the whole point of the page. */
.ua-input.ua-readonly,
.ua-input[readonly],
.form-control[readonly] {
    background: var(--ui-bg-subtle);
    color: var(--ui-text);
    -webkit-text-fill-color: var(--ui-text);
    opacity: 1;
    cursor: default;
}
textarea.ua-input,
textarea.form-control,
select.ua-input[size],
select.form-control[size],
select.form-control[multiple],
input[type='file'].ua-input,
input[type='file'].form-control {
    height: auto;
    padding: var(--ui-pad-y) var(--ui-pad-x);
}
textarea.ua-input,
textarea.form-control { min-height: calc(var(--ui-control-height) * 2); resize: vertical; }
/* has-icon-left reserves room for an icon; without one the value was
   indented by an empty 40px gap. */
.has-icon-left:not(:has(.form-control-position)) .ua-input,
.has-icon-left:not(:has(.form-control-position)) .form-control { padding-left: var(--ui-pad-x); }
.ua-check,
.ua-radio,
.ua-switch,
input[type='checkbox'],
input[type='radio'] { accent-color: var(--app-primary); }

.ua-radio-label,
.ua-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}
.ua-radio-label { margin-right: 14px; }

/* ---- buttons ---- */
.ua-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--ui-control-height);
    /* was a fixed 16px, which left density and theme family changing the
       button's height but never its width */
    padding: 0 calc(var(--ui-pad-x) * 2);
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-button-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ui-transition), border-color var(--ui-transition);
}
.ua-button:hover { background: var(--ui-bg-hover); }
.ua-button:active { background: var(--ui-bg-active); }
.ua-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus-ring); }
.ua-button:disabled { color: var(--ui-text-disabled); background: var(--ui-bg-disabled); cursor: not-allowed; }
/* Inline SVG icons: sized in em so they track the control's font-size,
   and stroke inherits currentColor so one path set serves every variant. */
.ua-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.15em; }
.ua-button > .ua-icon { margin: 0; }
.ua-grid-btn .ua-icon { width: 1.1em; height: 1.1em; }
.ua-dd-btn .ua-icon,
.ua-dd-toggle .ua-icon { width: 1em; height: 1em; }

.ua-button-default {
    color: var(--ui-text-inverse);
    background: var(--app-primary);
    border-color: var(--app-primary);
}
.ua-button-default:hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.ua-button-default:active { background: var(--ui-primary-active); border-color: var(--ui-primary-active); }
.ua-button-normal { color: var(--ui-text-inverse); background: var(--app-secondary); border-color: var(--app-secondary); }
.ua-button-normal:hover { background: var(--ui-secondary-hover); border-color: var(--ui-secondary-hover); }
.ua-button-success { color: var(--ui-text-inverse); background: var(--ui-success); border-color: var(--ui-success); }
.ua-button-danger  { color: var(--ui-text-inverse); background: var(--ui-danger);  border-color: var(--ui-danger); }

/* ---- Bootstrap buttons ----
   Module pages (tenant administration, invite member, setup wizard,
   audit events, form designer, knowledge base) are hand-written Razor
   with Bootstrap .btn classes. The Stack theme's colors.min.css states
   .btn-primary and the other contextual buttons with !important, so a
   plain token rule lost and every primary button came out Stack teal and
   every secondary one Stack slate, whatever accent was picked. These
   restate them on the tokens, with !important to match. The sign-in and
   error pages are left out: they draw their own buttons further down.
   .btn-secondary, .btn-default and .btn-light read as the neutral
   .ua-button, which is what Platform Administration's secondary looks
   like. */
body:not(.ua-auth-page):not(.ua-error-page) .btn-primary {
    color: var(--ui-text-inverse) !important;
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) .btn-primary:hover {
    background-color: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) .btn-primary:active,
body:not(.ua-auth-page):not(.ua-error-page) .btn-primary.active {
    background-color: var(--ui-primary-active) !important;
    border-color: var(--ui-primary-active) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) .btn-outline-primary {
    color: var(--app-primary) !important;
    background-color: transparent !important;
    border-color: var(--app-primary) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) .btn-outline-primary:hover,
body:not(.ua-auth-page):not(.ua-error-page) .btn-outline-primary:active {
    color: var(--ui-text-inverse) !important;
    background-color: var(--app-primary) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) :is(.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary) {
    color: var(--ui-text) !important;
    background-color: var(--ui-bg) !important;
    border-color: var(--ui-border) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) :is(.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary):hover {
    background-color: var(--ui-bg-hover) !important;
    border-color: var(--ui-border-strong) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) :is(.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary):active {
    background-color: var(--ui-bg-active) !important;
}
body:not(.ua-auth-page):not(.ua-error-page) .btn-success { color: var(--ui-text-inverse) !important; background-color: var(--ui-success) !important; border-color: var(--ui-success) !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn-danger  { color: var(--ui-text-inverse) !important; background-color: var(--ui-danger)  !important; border-color: var(--ui-danger)  !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn-warning { color: var(--ui-text-inverse) !important; background-color: var(--ui-warning) !important; border-color: var(--ui-warning) !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn-info    { color: var(--ui-text-inverse) !important; background-color: var(--ui-info)    !important; border-color: var(--ui-info)    !important; }
body:not(.ua-auth-page):not(.ua-error-page) :is(.btn-success, .btn-danger, .btn-warning, .btn-info):hover { filter: brightness(.92); }
body:not(.ua-auth-page):not(.ua-error-page) .btn-outline-info { color: var(--ui-info) !important; background-color: transparent !important; border-color: var(--ui-info) !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn-outline-info:hover { color: var(--ui-text-inverse) !important; background-color: var(--ui-info) !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus-ring) !important; }
body:not(.ua-auth-page):not(.ua-error-page) .btn:focus:not(:focus-visible) { box-shadow: none !important; }

/* The same palette pins text, badge and alert colours with !important:
   Stack teal for primary, and alert tints drawn for a white page that
   glare in dark mode. Restated on the tokens. */
body .text-primary { color: var(--app-primary) !important; }
body .text-danger  { color: var(--ui-danger) !important; }
body .text-info    { color: var(--ui-info) !important; }
body .badge-primary { color: var(--ui-text-inverse); background-color: var(--app-primary); }
body .alert-danger {
    color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-text)) !important;
    background-color: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-bg)) !important;
    border-color: color-mix(in srgb, var(--ui-danger) 38%, var(--ui-bg)) !important;
}
body .alert-warning {
    color: color-mix(in srgb, var(--ui-warning) 55%, var(--ui-text)) !important;
    background-color: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-bg)) !important;
    border-color: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-bg)) !important;
}

/* ---- lookup dropdown (SelectBox / Autocomplete / TagBox) ---- */
.ua-dd { position: relative; }
.ua-dd-input { padding-right: 30px; }

.ua-dd-clear,
.ua-dd-toggle,
.ua-dd-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ui-text-muted);
    line-height: 1;
    transition: color var(--ui-transition);
}
.ua-dd-clear { right: 26px; font-size: 18px; padding: 0 4px; }
.ua-dd-toggle { right: 4px; padding: 4px 6px; }
.ua-dd-clear:hover,
.ua-dd-toggle:hover,
.ua-dd-btn:hover { color: var(--app-primary); }

.ua-dd-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform var(--ui-transition);
}
.ua-dd-open .ua-dd-caret { transform: rotate(180deg); }

.ua-dd-extras { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; }
.ua-dd-btn { position: static; transform: none; padding: 4px 5px; }

/* Room reserved inside the field per visible button, so the icons never
   sit on top of the text. */
.ua-dd-btns-1 .ua-dd-input { padding-right: 30px; }
.ua-dd-btns-2 .ua-dd-input { padding-right: 74px; }
.ua-dd-btns-3 .ua-dd-input { padding-right: 98px; }
.ua-dd-btns-2 .ua-dd-clear { right: 48px; }
.ua-dd-btns-3 .ua-dd-clear { right: 72px; }

.ua-dd-list {
    /* Fixed, and placed by the adapter: absolute positioning left the
       list inside .card, which clips its overflow. Left, top, width
       and max-height are all set inline when it opens. */
    position: fixed;
    z-index: 1080;
    max-height: 260px;
    overflow-y: auto;
    background: var(--ui-bg-overlay);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.ua-dd-option {
    padding: var(--ui-pad-y) var(--ui-pad-x);
    cursor: pointer;
    transition: background var(--ui-transition);
}
.ua-dd-option:hover { background: var(--ui-bg-hover); }
/* Keyboard focus is the strong state; hover stays subtle so the two are
   distinguishable when both apply. */
.ua-dd-active { background: var(--app-primary); color: var(--ui-text-inverse); }
.ua-dd-empty,
.ua-dd-more { padding: var(--ui-pad-y) var(--ui-pad-x); color: var(--ui-text-muted); font-size: var(--ui-font-size-sm); }
.ua-dd-more { border-top: 1px solid var(--ui-border); }
.ua-dd-action .ui-link { color: var(--app-primary); }
.ua-dd-active.ua-dd-action .ui-link { color: var(--ui-text-inverse); }

.ua-dd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ua-dd-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--app-primary);
    color: var(--ui-text-inverse);
    border-radius: 12px;
    font-size: var(--ui-font-size-sm);
}
.ua-dd-tag-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }

/* ---- validation ---- */
.ua-invalid .ua-input,
.ua-invalid .ua-dd-input,
.ua-invalid input,
.ua-invalid textarea,
.ua-invalid select { border-color: var(--ui-danger); }
.ua-invalid .ua-input:focus,
.ua-invalid .form-control:focus { border-color: var(--ui-danger); box-shadow: none; }
.ua-invalid-badge {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ui-danger);
    color: var(--ui-text-inverse);
    font-size: 11px;
    font-weight: var(--ui-font-weight-bold);
    line-height: 16px;
    text-align: center;
    cursor: help;
    z-index: 2;
}
.ua-invalid-message { color: var(--ui-danger); font-size: var(--ui-font-size-sm); margin-top: 4px; }
.ua-validation-summary { color: var(--ui-danger); font-size: var(--ui-font-size-sm); }

/* ---- overlays ---- */
.ua-dialog-backdrop,
.ua-popup-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1050; }
.ua-dialog,
.ua-popup {
    position: fixed;
    z-index: 1060;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    min-width: 320px;
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    background: var(--ui-bg-overlay);
    color: var(--ui-text);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
}
.ua-dialog { padding: 20px; }
.ua-dialog-title { font-weight: 600; margin-bottom: 10px; }
.ua-dialog-buttons { display: flex; justify-content: flex-end; gap: var(--ui-gap); margin-top: 18px; }
.ua-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ui-border);
    font-weight: 600;
}
.ua-popup-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ui-text-muted); }
.ua-popup-close:hover { color: var(--ui-text); }
.ua-popup-content { padding: 16px; }
.ua-popup-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-gap);
    padding: 12px 16px;
    border-top: 1px solid var(--ui-border);
}

.ua-toast-host { position: fixed; z-index: 1070; top: 16px; right: 16px; display: flex; flex-direction: column; gap: var(--ui-gap); }
.ua-toast {
    padding: 10px 16px;
    border-radius: var(--ui-radius);
    color: var(--ui-text-inverse);
    background: var(--app-secondary);
    box-shadow: var(--ui-shadow);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}
.ua-toast-success { background: var(--ui-success); }
.ua-toast-error   { background: var(--ui-danger); }
.ua-toast-warning { background: var(--ui-warning); }
.ua-toast-info    { background: var(--ui-info); }

.ua-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap); padding: 6px 0; }
.ua-toolbar-before, .ua-toolbar-center, .ua-toolbar-after { display: flex; align-items: center; gap: var(--ui-gap); }

.ua-drawer {
    position: fixed;
    z-index: 1040;
    top: 0; bottom: 0;
    width: 280px;
    background: var(--ui-bg);
    box-shadow: var(--ui-shadow-lg);
    transition: transform .2s ease;
}
.ua-drawer-left { left: 0; transform: translateX(-100%); }
.ua-drawer-right { right: 0; transform: translateX(100%); }
.ua-drawer-open { transform: translateX(0); }

.ua-map { width: 100%; min-height: 320px; }
.ua-map-unavailable,
.ua-grid-unavailable {
    padding: 16px;
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-text-muted);
}

/* ---- unified surfaces ----
   Framework cards previously used a darker outline and a different
   corner radius than dialogs, grids and builder panels. A quiet
   hairline keeps groups readable without boxing every section in. */
.card,
.modal-content,
.dropdown-menu,
.popover,
.tabulator,
.dx-overlay-content {
    border-radius: var(--ui-radius);
}
.card {
    border: 1px solid var(--ui-card-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}
.card-header,
.card-footer {
    border-color: var(--ui-card-border);
}
.card-header:first-child,
.card-footer:last-child {
    border-radius: 0;
}
body.app-dark .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* ---- form density ----
   The generated create/edit views lay fields out in Bootstrap rows. The
   template's default gutters were tuned for a handful of fields, not the
   ~20 these entities produce, so rows are tightened here rather than in
   each generated view. */
.ua-form-row,
.card-body .row > [class^='col-'] > .form-group,
.card-body .row > [class*=' col-'] > .form-group { margin-bottom: var(--ui-field-gap); }
.ua-form-fields { row-gap: var(--ui-field-gap); }

/* ---- labels above fields ----
   The generated views pair a label column with a control column:
   label.col-md-4 + .col-md-8 on the entity forms, col-md-3 + col-md-9 on
   the access screens. Both halves take the full width instead, so the
   caption sits directly over its field the way the Setup screen lays a
   field out, and a long caption no longer wraps beside a short input.
   Done here rather than in each view so a view customised in a
   generated application follows as well. */
.row > label[class*='col-'],
.row > label[class*='col-'] + [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
}
.row > label[class*='col-'],
.form-group > label,
label.control-label {
    display: block;
    margin-bottom: 4px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--ui-label-font-size);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ui-text);
    text-align: left;
    overflow-wrap: anywhere;
}
/* a label wrapping its own checkbox is the option's text, not a caption */
.form-group > label:has(> input[type='checkbox']),
.form-group > label:has(> input[type='radio']) { font-weight: 400; }

/* Client-supplied logos arrive at arbitrary sizes; every slot that
   shows one gets a hard cap so a 2000px upload cannot cover the
   screen. width:auto preserves aspect ratio within the cap. */
.header-navbar .brand-logo,
.navbar-header img,
.main-menu img,
.navbar-brand img {
    max-height: 34px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.preloader img, .loader img { max-height: 72px; width: auto; }

/* ---- topbar (white, DevExtreme-demos style) ----
   The header partial keeps its Bootstrap/AdminLTE skeleton; only the
   surface is defined here. High-specificity shell rules for
   .header-navbar are out-specified by the class chain, and this file
   loads last. */
.header-navbar.ua-topbar {
    background: var(--ui-bg-overlay);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: none;
    /* Above the sidebar rail (1020). The theme never stated this, so
       the shell's own value applied; with the rail pinned to left 0 it
       covered the navbar's left corner — which is where the menu
       toggle lives, so the button could not be clicked at all. */
    z-index: 1030;
}
.header-navbar.ua-topbar .nav-link,
.header-navbar.ua-topbar .navbar-brand,
.header-navbar.ua-topbar .brand-text,
.header-navbar.ua-topbar .user-name,
.header-navbar.ua-topbar i {
    color: var(--ui-text) !important;
}
.header-navbar.ua-topbar .nav-link:hover,
.header-navbar.ua-topbar .nav-link:hover i { color: var(--app-primary) !important; }
.header-navbar.ua-topbar .brand-text { font-weight: var(--ui-font-weight-bold); }
/* the shell paints these with the primary colour; on a white bar that
   left a stray blue block beside the toggles */
.header-navbar.ua-topbar .navbar-header,
.header-navbar.ua-topbar .navbar-container,
.header-navbar.ua-topbar .navbar-wrapper { background: transparent; }
.header-navbar.ua-topbar .dropdown-menu {
    background: var(--ui-bg-overlay);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.header-navbar.ua-topbar .dropdown-item { color: var(--ui-text); }
.header-navbar.ua-topbar .dropdown-item:hover { background: var(--ui-bg-hover); color: var(--app-primary); }
.header-navbar.ua-topbar .search-input .input {
    background: var(--ui-bg);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
/* the secondary horizontal menu strip under the topbar */
.header-navbar.navbar-horizontal {
    background: var(--ui-bg-overlay);
    border-bottom: 1px solid var(--ui-border);
}

/* ---- auth (login/register) pages ----
   blank-page shells: subtle page background, the existing card
   markup inside gets elevated and centred. */
body.ua-auth-page,
body.ua-error-page { background: var(--ui-bg-subtle); }
/* Block flow with a margin-centred card, NOT flex on the wrapper:
   the login views nest the card in Bootstrap .row/.col chains whose
   widths are percentages, and a shrink-to-fit flex container
   collapsed that whole chain to intrinsic width - a 140px card with
   the title wrapping letter by letter. */
/* Grid with align-content:center gives true vertical centring while
   justify-items:stretch keeps children full-width - unlike flex or
   place-items:center, which shrink-wrap the child and re-collapse
   the view's percentage-based column chain. */
body.ua-auth-page .content-wrapper,
body.ua-error-page .content-wrapper {
    display: grid;
    align-content: center;
    justify-items: stretch;
    min-height: calc(100vh - 40px);
    padding: 24px 16px;
}
/* The account and error views wrap their card in
   section.flexbox-container > .col-12.d-flex > .col-lg-4. That chain,
   and only that chain, is flattened to full-width blocks so the card's
   own margin:auto is the single centring mechanism - mixing the shell's
   flex chain with forced widths parked the card at the left edge, and
   on the error pages it shrank the column to its content, about 90px,
   with the title wrapping over three lines and the buttons clipped.
   The rows inside the card keep their Bootstrap columns, so "Remember
   me" and "Forgot password?" share a line again. The wrapper's
   box-shadow-2 is dropped: stretched to the page width, it drew a
   shadow band across the whole screen behind the card. */
body.ua-auth-page .flexbox-container,
body.ua-error-page .flexbox-container,
body.ua-auth-page .flexbox-container > [class*='col-'],
body.ua-error-page .flexbox-container > [class*='col-'],
body.ua-auth-page .flexbox-container > [class*='col-'] > [class*='col-'],
body.ua-error-page .flexbox-container > [class*='col-'] > [class*='col-'] {
    display: block !important;
    width: 100% !important;
    max-width: none;
    flex: none;
    padding: 0;
    height: auto !important;
    box-shadow: none !important;
}
body.ua-auth-page .card .row,
body.ua-error-page .card .row { margin-left: 0; margin-right: 0; }
body.ua-auth-page .card .row > [class*='col-'],
body.ua-error-page .card .row > [class*='col-'] { padding-left: 0; padding-right: 0; }
body.ua-auth-page .card .row > [class*='col-'] + [class*='col-'],
body.ua-error-page .card .row > [class*='col-'] + [class*='col-'] { padding-left: 8px; }
@media (max-width: 575.98px) {
    body.ua-auth-page .card .row > [class*='col-'] + [class*='col-'],
    body.ua-error-page .card .row > [class*='col-'] + [class*='col-'] { padding-left: 0; }
}
body.ua-auth-page .card,
body.ua-error-page .card {
    background: var(--ui-bg-overlay);
    color: var(--ui-text);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    width: 100%;
    max-width: 430px;
    /* the login view puts .m-0 on this card, which is margin:0
       !important in Bootstrap and silently beat a plain margin:auto */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
/* Account and error actions share one full-width command treatment. */
body.ua-auth-page .content-wrapper .ui-button,
body.ua-error-page .content-wrapper .ui-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
body.ua-auth-page .content-wrapper .ui-button > .dx-button,
body.ua-error-page .content-wrapper .ui-button > .dx-button,
body.ua-auth-page .content-wrapper .ui-button > button,
body.ua-error-page .content-wrapper .ui-button > button,
body.ua-auth-page .content-wrapper .ui-button > a,
body.ua-error-page .content-wrapper .ui-button > a,
body.ua-auth-page .content-wrapper a.btn:not(.btn-social-icon),
body.ua-error-page .content-wrapper a.btn:not(.btn-social-icon),
body.ua-auth-page .content-wrapper button.btn:not(.close),
body.ua-error-page .content-wrapper button.btn:not(.close) {
    display: block;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}
/* keep the remember-me / forgot-password row on one line each side */
body.ua-auth-page .card label { white-space: nowrap; }
body.ua-auth-page .card .card-header,
body.ua-auth-page .card .card-title { border: none; background: transparent; text-align: center; }
/* "Login with your account": the shell draws its label on a fixed
   white chip over a light rule, which showed as a white block in dark
   mode. Both follow the card instead. */
body.ua-auth-page .line-on-side { border-color: var(--ui-border); }
body.ua-auth-page .line-on-side > span { background: var(--ui-bg-overlay); color: var(--ui-text-muted); }
/* One page background behind the card. The dark block paints the
   content wrapper, which left a lighter panel ending short of the
   bottom of the screen. */
body.app-dark.ua-auth-page .app-content,
body.app-dark.ua-auth-page .content-wrapper,
body.app-dark.ua-auth-page .content-body,
body.app-dark.ua-error-page .app-content,
body.app-dark.ua-error-page .content-wrapper,
body.app-dark.ua-error-page .content-body { background: transparent; }
body.ua-auth-page .card img { max-height: 64px; width: auto; max-width: 80%; object-fit: contain; }
body.ua-error-page .card { max-width: 560px; text-align: center; }
body.ua-error-page .card .card-header,
body.ua-error-page .card .card-footer { border: none; background: transparent; }
/* links inside the card follow the accent; the shell left "Forgot
   password?" in the body text colour, indistinguishable from a label */
body.ua-auth-page .card a:not(.btn),
body.ua-error-page .card a:not(.btn) { color: var(--app-primary); }
body.ua-auth-page .card a:not(.btn):hover,
body.ua-error-page .card a:not(.btn):hover { color: var(--ui-primary-hover); text-decoration: underline; }
/* the older error views title with h2.error-code; the error card below
   uses its own h1 and must not pick this size up */
body.ua-error-page .error-code {
    font-size: clamp(44px, 9vw, 72px);
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.1;
    color: var(--app-primary);
    margin-bottom: 4px;
}
body.ua-error-page .card h3 { font-size: 1.125rem; color: var(--ui-text); }
body.ua-error-page .card h6 { font-size: var(--ui-field-font-size); font-weight: 400; color: var(--ui-text-muted); }
body.ua-error-page .content-wrapper > * { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---- error pages: one card for every status ----
   401, 403, 404, 500, the read-only notice and the generic error all
   draw this card. The 401 view introduced it with its own green and
   its own dark palette; here it is on the theme's surfaces and accent,
   so it follows the person's theme like the rest of the application. */
.ua-error-shell { display: grid; place-items: center; width: 100%; }
.ua-error-card {
    width: min(100%, 520px);
    padding: clamp(28px, 5vw, 44px);
    text-align: center;
    color: var(--ui-text);
    background: var(--ui-bg-overlay);
    border: 1px solid var(--ui-card-border);
    border-radius: calc(var(--ui-radius) * 2);
    box-shadow: var(--ui-shadow-lg);
}
.ua-error-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    color: var(--ui-text-inverse);
    font-size: 24px;
    background: var(--app-primary);
    border-radius: 50%;
}
.ua-error-eyebrow {
    margin: 0 0 8px;
    color: var(--app-primary);
    font-size: var(--ui-label-font-size);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ua-error-card h1 {
    margin: 0;
    color: var(--ui-text);
    font-size: clamp(26px, 5vw, 36px);
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.15;
}
.ua-error-message {
    max-width: 420px;
    margin: 12px auto 26px;
    color: var(--ui-text-muted);
    font-size: .9375rem;
    line-height: 1.6;
}
.ua-error-detail {
    max-height: 240px;
    overflow: auto;
    margin: 0 0 24px;
    padding: 10px 12px;
    text-align: left;
    white-space: pre-wrap;
    color: var(--ui-text-muted);
    font-family: var(--ui-font-mono);
    font-size: var(--ui-font-size-sm);
    background: var(--ui-bg-subtle);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
.ua-error-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ua-error-actions .ui-button { min-width: 0; }
.ua-error-actions .ua-button,
.ua-error-actions .dx-button,
.ua-error-actions .btn { width: 100% !important; }
.ua-error-footer {
    margin-top: 28px;
    padding-top: 18px;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
    border-top: 1px solid var(--ui-border);
}
.ua-error-footer a { color: var(--app-primary); }
@media (max-width: 480px) {
    .ua-error-card { padding: 28px 20px; }
    .ua-error-actions { grid-auto-flow: row; }
}
body.ua-auth-page .btn-primary,
body.ua-error-page .btn-primary,
body.ua-auth-page .btn-danger,
body.ua-auth-page .input-group .btn {
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: var(--ui-text-inverse);
}
body.ua-auth-page .btn-primary:hover,
body.ua-error-page .btn-primary:hover {
    background: var(--ui-primary-hover);
    border-color: var(--ui-primary-hover);
}

/* ---- tree menu (DevExtreme-demos style sidebar) ----
   The shell markup keeps its menu-dark class because the template's
   own JS keys on it; the surface is restyled here instead. Light
   sidebar on light mode, token-driven so dark mode flips it too. */
/* Docked to the left edge, below the optional environment banner, flush - no
   float, no rounding, no drop shadow. The shell shipped it as a
   detached floating panel and nothing reserved space for it, so
   content ran underneath. */
.main-menu,
.main-menu.menu-dark,
.main-menu.menu-light {
    position: fixed;
    top: var(--ui-topbar-h);
    left: 0;
    bottom: 0;
    width: var(--ui-sidebar-w);
    /* strictly under Bootstrap's .fixed-top (1030) so the navbar and
       its dropdowns always win; the sidebar previously covered them */
    z-index: 1020;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ui-bg-overlay);
    border-right: 1px solid var(--ui-border);
    border-radius: 0;
    box-shadow: none;
    transition: width var(--ui-transition);
}
/* The inner column keeps its full width while the outer element
   animates to zero, so nothing rewraps mid-slide. */
.main-menu .main-menu-content,
.main-menu .ua-nav,
.main-menu .ua-nav-search { width: var(--ui-sidebar-w); }
.main-menu .main-menu-content { padding-top: 0; }

/* Content reserves the sidebar's width. Scoped away from blank-page,
   which is what the login and error layouts use - they have no menu
   and must not be indented by it. */
body:not(.blank-page) .app-content {
    margin-left: var(--ui-sidebar-w);
    /* The shell indents .app-content for its own rail as well. Left in
       place that stacks with the margin above and the content starts at
       roughly twice the sidebar width, so the reservation is expressed
       once, here. */
    padding-left: 0;
    transition: margin-left var(--ui-transition);
}

/* Collapsed: the menu is text-only below the dashboard row, so an
   icon rail would show nothing useful - it closes fully instead,
   which is also what the reference sidebar's toggle does. */
/* The shell's own rail geometry, overridden.
   vertical-overlay-menu positions .main-menu through selectors more
   specific than anything above (body.vertical-overlay-menu.menu-open
   .main-menu and friends), so the plain .main-menu rules lost and the
   rail rendered one sidebar-width to the right of where the content
   margin had reserved space for it. Matching that specificity would
   mean guessing at the shell's exact selector chain; these six
   properties are geometry we own outright, so they are pinned. Nothing
   cosmetic is forced — colour, borders and shadow still come from the
   rules above and stay themeable. */
body:not(.app-menu-collapsed) .main-menu {
    position: fixed !important;
    /* The banner's measured bottom edge supplies this offset. */
    top: var(--ui-topbar-h) !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: var(--ui-sidebar-w) !important;
    margin: 0 !important;
    padding-left: 0 !important;
    /* a width rule cannot undo a transform, which is what kept the rail
       parked off-canvas before */
    transform: none !important;
    visibility: visible;
    opacity: 1;
}
body.app-menu-collapsed .main-menu {
    left: 0 !important;
    /* Pinned as well: a collapsed rail left at full width would keep
       covering whatever sits beneath it, including the toggle. */
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    transform: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.app-menu-collapsed .main-menu { width: 0; border-right-color: transparent; }
body.app-menu-collapsed:not(.blank-page) .app-content { margin-left: 0; }

@media (max-width: 991.98px) {
    /* On a small screen the rail overlays the page rather than
       displacing it — there is not enough width to give away. Pinned,
       because the base indent is pinned and the shell adds its own. */
    body:not(.blank-page) .app-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body:not(.app-menu-collapsed) .main-menu {
        /* never the full screen: the page stays visible behind it, so
           it reads as a panel over the page rather than a new one */
        width: min(86vw, var(--ui-sidebar-w)) !important;
        box-shadow: var(--ui-shadow-lg);
        z-index: 1025;
    }

    .main-menu .main-menu-content,
    .main-menu .ua-nav,
    .main-menu .ua-nav-search { width: 100%; }

    /* Dimmed page behind the open rail. Tapping it closes the menu,
       wired in the switcher, which is the gesture anyone expects from
       an overlay. */
    body:not(.app-menu-collapsed)::after {
        content: '';
        position: fixed;
        top: var(--ui-topbar-h);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1024;
    }

    /* Touch targets. 32px is fine for a mouse and not for a thumb. */
    .ua-nav .ua-nav-link,
    .ua-nav .ua-nav-parent > a { min-height: 44px; }
    .ua-nav .ua-nav-add { width: 40px; height: 40px; right: 2px; }
    .ua-nav .ua-nav-leaf-add > .ua-nav-link { padding-right: 48px; }
}

@media (max-width: 575.98px) {
    /* Keep breadcrumb and account access on the same row. */
    body:not(.blank-page) .content-header {
        flex-wrap: nowrap;
        padding-left: 12px;
        padding-right: 12px;
    }
    .app-content { padding-left: 10px; padding-right: 10px; }
}

.ua-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 24px;
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}
.ua-nav ul { list-style: none; margin: 0; padding: 0; }

/* Shown when the menu service returns nothing, so an empty rail always
   says why rather than looking like a dead toggle. */
.ua-nav-note {
    padding: 12px 16px;
    font-size: var(--ui-font-size-sm);
    line-height: 1.5;
    color: var(--ui-text-muted);
}

/* section header: bold row with a rotating chevron, like the demo
   sidebar's category headings */
.ua-nav-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--ui-text);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--ui-font-weight-bold);
    transition: background var(--ui-transition), color var(--ui-transition);
}
.ua-nav-head:hover { background: var(--ui-bg-hover); }
.ua-nav-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-nav-chev { width: 14px; height: 14px; color: var(--ui-text-muted); transition: transform var(--ui-transition); }
.open > .ua-nav-head > .ua-nav-chev { transform: rotate(180deg); }

/* second level: normal-weight rows with the small solid caret the
   demo list items use, rotating when expanded */
.ua-nav-subhead { font-weight: 400; padding: 7px 14px 7px 22px; }
.ua-nav-caret { width: 12px; height: 12px; color: var(--ui-text-muted); transition: transform var(--ui-transition); flex: 0 0 auto; }
.open > .ua-nav-subhead > .ua-nav-caret { transform: rotate(90deg); color: var(--app-primary); }

/* collapse/expand */
.ua-nav-children { display: none; }
.open > .ua-nav-children { display: block; }

/* leaves */
.ua-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 38px;
    color: var(--ui-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--ui-transition), color var(--ui-transition);
}
.ua-nav-top > .ua-nav-link { padding-left: 14px; font-weight: var(--ui-font-weight-bold); }
.ua-nav-link:hover { background: var(--ui-bg-hover); color: var(--app-primary); }
.ua-nav-link .ua-icon { width: 15px; height: 15px; flex: 0 0 auto; }

/* an entity's new-record screen, on the same row as its records. It
   is an icon rather than text so the sidebar search, which matches on
   a row's text, still finds the entity by its name alone. */
.ua-nav-leaf { position: relative; }
.ua-nav-leaf-add > .ua-nav-link { padding-right: 40px; }
.ua-nav-add {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ui-radius);
    color: var(--ui-text-muted);
    text-decoration: none;
    transition: background var(--ui-transition), color var(--ui-transition);
}
.ua-nav-add:hover,
.ua-nav-add:focus-visible { background: var(--ui-bg-hover); color: var(--app-primary); }
.ua-nav-add svg { width: 14px; height: 14px; }

/* active leaf: accent bar + tinted row, active trail stays open via
   the server-rendered 'open'/'active' classes from Html.IsSelected */
.ua-nav-leaf.active > .ua-nav-link,
.ua-nav-leaf.open > .ua-nav-link {
    border-left-color: var(--app-primary);
    background: var(--ui-focus-ring);
    color: var(--app-primary);
    font-weight: var(--ui-font-weight-bold);
}

/* ---- content bar: breadcrumb, account menu + menu toggle ----
   Fixed below the optional environment banner and starting at the sidebar's right edge,
   exactly as the reference does: it stays put while the page
   scrolls, and slides to the viewport edge when the menu collapses.
   _PageHeading renders .content-header.row, so that IS the bar
   rather than something wrapped around it. */
body:not(.blank-page) .content-header {
    position: fixed;
    top: var(--ui-topbar-h);
    left: var(--ui-sidebar-w);
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-height: var(--ui-subbar-h);
    margin: 0;
    padding: 0 16px;
    background: var(--ui-bg-subtle);
    border-bottom: 1px solid var(--ui-border);
    transition: left var(--ui-transition);
}
body.app-menu-collapsed:not(.blank-page) .content-header { left: 0; }
@media (max-width: 991.98px) {
    /* menu overlays rather than displaces, so the bar spans fully */
    body:not(.blank-page) .content-header { left: 0; }
}

/* the partial lays the bar out as a Bootstrap .row of columns; those
   columns become flex children of the bar instead */
body:not(.blank-page) .content-header > [class^='col-'],
body:not(.blank-page) .content-header > [class*=' col-'] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
/* whatever the partial puts second is pushed to the right edge */
body:not(.blank-page) .content-header > [class^='col-']:last-child,
body:not(.blank-page) .content-header > [class*=' col-']:last-child {
    margin-left: auto;
    text-align: right;
}
body:not(.blank-page) .content-header .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: var(--ui-font-size);
    white-space: nowrap;
}
body:not(.blank-page) .content-header .breadcrumb-item.active { color: var(--ui-text-muted); }
body:not(.blank-page) .content-header .breadcrumb a { color: var(--app-primary); }
body:not(.blank-page) .content-header .ua-heading-actions { overflow: visible; }
.ua-heading-context { margin-right: 14px !important; }
.ua-account-dropdown { position: relative; flex: 0 0 auto; }
body:not(.blank-page) .content-header .ua-account-trigger {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    gap: 6px;
    color: var(--ui-text);
    white-space: nowrap;
    text-decoration: none;
}
body:not(.blank-page) .content-header .ua-account-trigger:hover,
body:not(.blank-page) .content-header .ua-account-trigger:focus { color: var(--app-primary); text-decoration: none; }
/* A border triangle. The vendor caret pads its FontAwesome glyph and
   nudges it down; left in place, the padding widens the top border
   into a flat bar, so both are reset here. */
.ua-account-trigger.dropdown-toggle::after {
    content: '' !important;
    display: inline-block;
    box-sizing: content-box;
    width: 0;
    height: 0;
    padding: 0 !important;
    margin: 0 0 0 2px !important;
    position: static;
    font-family: inherit !important;
    border-top: 5px solid currentColor !important;
    border-right: 5px solid transparent !important;
    border-bottom: 0 !important;
    border-left: 5px solid transparent !important;
    vertical-align: middle;
}
.ua-account-dropdown .dropdown-menu {
    background: var(--ui-bg-overlay);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.ua-account-dropdown .dropdown-item { color: var(--ui-text); cursor: pointer; }
.ua-account-dropdown .dropdown-item:hover,
.ua-account-dropdown .dropdown-item:focus { background: var(--ui-bg-hover); color: var(--app-primary); }

/* All built-in and entity views render into this wrapper. Reserve the
   fixed breadcrumb height plus one visible gap before the first card;
   the vendor shell otherwise supplies only its generic page padding. */
html body:not(.blank-page) .app-content.content > .content-wrapper {
    padding-top: calc(var(--ui-subbar-h) + var(--ui-page-gap));
}

/* sidebar search, pinned above the tree like the reference */
.ua-nav-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ui-subbar-h);
    padding: 8px 12px;
    background: var(--ui-bg-overlay);
    border-bottom: 1px solid var(--ui-border);
    box-sizing: border-box;
}
.ua-nav-search svg { width: 15px; height: 15px; color: var(--ui-text-muted); flex: 0 0 auto; }
.ua-nav-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}
.ua-nav-search input::placeholder { color: var(--ui-text-muted); }
/* while filtering, every surviving branch is shown open */
.ua-nav-filtered .ua-nav-children { display: block; }

/* always-visible collapse toggle at the left of the content header */
.ua-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    margin-right: 10px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ui-radius);
    background: transparent;
    color: var(--ui-text-muted);
    cursor: pointer;
    vertical-align: middle;
}
.ua-menu-btn:hover { background: var(--ui-bg-hover); color: var(--app-primary); }
.ua-menu-btn svg { width: 18px; height: 18px; }

/* ---- theme switcher ---- */
.ua-theme-gear {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 1090;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: var(--ui-bg-overlay);
    color: var(--ui-text-muted);
    cursor: pointer;
    box-shadow: var(--ui-shadow);
    transition: color var(--ui-transition), transform var(--ui-transition);
}
.ua-theme-gear:hover { color: var(--app-primary); transform: rotate(20deg); }
.ua-theme-gear svg { width: 20px; height: 20px; }
.ua-theme-panel {
    position: fixed;
    right: 18px; bottom: 68px;
    z-index: 1090;
    width: 230px;
    padding: 14px;
    background: var(--ui-bg-overlay);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
}
.ua-theme-group { margin-bottom: 12px; }
.ua-theme-label { font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.ua-theme-seg { display: flex; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.ua-theme-opt {
    flex: 1;
    padding: 5px 0;
    border: none;
    background: var(--ui-bg);
    color: var(--ui-text);
    cursor: pointer;
    font-size: var(--ui-font-size-sm);
}
.ua-theme-opt + .ua-theme-opt { border-left: 1px solid var(--ui-border); }
.ua-theme-opt.ua-theme-on { background: var(--app-primary); color: var(--ui-text-inverse); }
.ua-theme-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ua-theme-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--ui-border);
    cursor: pointer;
    padding: 0;
}
.ua-theme-swatch.ua-theme-on { border-color: var(--ui-text); box-shadow: 0 0 0 2px var(--ui-focus-ring); }
.ua-theme-reset {
    width: 100%;
    padding: 6px 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-bg);
    color: var(--ui-text-muted);
    cursor: pointer;
    font-size: var(--ui-font-size-sm);
}
.ua-theme-reset:hover { color: var(--ui-text); background: var(--ui-bg-hover); }

/* ---- grid chrome ---- */
:root { --ui-bg-surface: var(--ui-bg); }
body.app-dark { --ui-bg-surface: var(--ui-bg); }
.ua-grid { width: 100%; min-width: 0; }
/* Folded fields sit in as many columns as the row has room for, label over
   value. A label column and a value column across the full row width put
   the values a third of a wide table away from their labels. */
.ua-grid-card-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 24px; margin: 0; padding: 10px 12px; white-space: normal; }
.ua-grid-card-item { min-width: 0; }
.ua-grid-card-details dt { color: var(--ui-text-muted); font-size: var(--ui-font-size-sm); font-weight: 500; overflow-wrap: anywhere; }
.ua-grid-card-details dd { color: var(--ui-text); margin: 0; overflow-wrap: anywhere; }
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { width: 18px; height: 18px; background: var(--ui-text-muted); }
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open { background: var(--app-primary); }
.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg { stroke: var(--ui-text-inverse); }
.app-content, .content-wrapper, .content-body, .card-body { min-width: 0; }
.app-content .text-muted { color: var(--ui-text-muted) !important; }
body.app-dark .app-content .text-body { color: var(--ui-text) !important; }
.form-body .row { row-gap: var(--ui-row-gap); }
.form-body > .mg-l-auto { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
@media (max-width: 767.98px) {
    body:not(.blank-page) { --ui-page-gap: 16px; }
    body:not(.blank-page) .content-header > [class*='col-']:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    body:not(.blank-page) .content-header > [class*='col-']:last-child { flex: 0 0 auto; }
    body:not(.blank-page) .content-header .breadcrumb { overflow: auto; }
    body:not(.blank-page) .content-header .ua-heading-context { display: none; }
    .app-content .content-wrapper { padding: 12px; }
    .app-content .card-body { padding: 12px; }
    .ua-grid-toolbar-before, .ua-grid-toolbar-after { flex-wrap: wrap; max-width: 100%; }
    .ua-grid-toolbar-after { width: 100%; }
    .ua-grid-search { flex: 1; min-width: 0; max-width: 100%; }
    .tabulator .tabulator-footer .tabulator-footer-contents { display: flex; flex-wrap: wrap; gap: 12px; }
    .tabulator .tabulator-footer .tabulator-paginator { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
    .tabulator .tabulator-footer .tabulator-pages { margin: 0; }
    .ua-input, .form-control, .ua-button { min-height: 44px; }
    .ua-form-field { grid-column: 1 / -1 !important; width: 100% !important; }
}
.ua-grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-gap); margin-bottom: var(--ui-gap); flex-wrap: wrap; }
.ua-grid-toolbar-before, .ua-grid-toolbar-after { display: flex; align-items: center; gap: 6px; }
.ua-grid-search { width: 220px; }
.ua-grid-buttons { display: flex; gap: var(--ui-gap); justify-content: center; }
.ua-grid-btn { color: var(--app-primary); text-decoration: none; }
.ua-grid-btn:hover { opacity: .7; }

/* The row a person has opened for editing. It has to be obvious which
   one is in an editor, because the save and the cancel in its command
   column are the only way out of it. */
.ua-row-editing { background: var(--ui-surface-alt, rgba(45, 108, 223, .07)); }
.ua-row-editing > .tabulator-cell { border-top: 1px solid var(--app-primary); border-bottom: 1px solid var(--app-primary); }
.ua-row-editing .ua-grid-buttons .ua-grid-btn { white-space: nowrap; }
.ua-row-editing .ua-grid-buttons { gap: 12px; align-items: center; min-height: 30px; }
.ua-row-editing .ua-grid-btn { display: inline-flex; align-items: center; gap: 4px; }
/* Row controls fill their cells and share the application's typography. */
.ua-cell-editor,
.ua-row-editing > .tabulator-cell > input:not([type="checkbox"]):not(.ua-cell-editor) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 2px 4px;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
}
.ua-grid-loading { position: relative; opacity: .6; pointer-events: none; }
.ua-row-editing .ua-cell-editor {
    min-height: 30px;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    padding: 4px 6px;
    background: var(--ui-surface, var(--ui-bg));
}
.ua-row-editing .ua-cell-editor:focus {
    outline: 2px solid var(--app-primary);
    outline-offset: -2px;
}
.ua-colchooser-row { display: flex; align-items: center; gap: var(--ui-gap); padding: 3px 0; }

/* ==========================================================================
   3. TABULATOR SKIN
   Tabulator ships a Bootstrap stylesheet; these rules pull it onto the same
   tokens so the grid matches the forms instead of looking like a different
   product bolted on.
   ========================================================================== */

.tabulator {
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    color: var(--ui-text);
}
.tabulator .tabulator-header {
    background: var(--ui-bg);
    color: var(--ui-text);
    border-bottom: 1px solid var(--ui-border);
    font-weight: var(--ui-font-weight-bold);
}
.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--ui-border);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    padding: var(--ui-pad-y) var(--ui-pad-x);
}
/* Headers must stay readable: with ~18 columns fitColumns squeezed each
   to about 90px and every caption ellipsised to 'Org...'. A min width
   plus horizontal scroll is better than a table of unreadable stubs. */
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: var(--ui-bg-hover);
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    width: 100%;
    min-height: 28px;
    padding: 4px 6px;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size-sm);
    box-sizing: border-box;
}
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus {
    outline: none;
    border-color: var(--app-primary);
    box-shadow: none;
}
/* The adapter's filters are a box around an input, so focus shows on the
   box, as it does on a form field: the accent on its border. The box
   draws its border inline, hence the !important on the colour. */
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter .ua-flt input:focus { box-shadow: none; }
.tabulator .tabulator-header .tabulator-col .tabulator-header-filter .ua-flt:focus-within {
    border-color: var(--app-primary) !important;
    box-shadow: none;
}
.tabulator .tabulator-tableholder { background: var(--ui-bg); }
.tabulator .tabulator-tableholder .tabulator-placeholder span {
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size);
    font-weight: 400;
}
.tabulator .tabulator-row { background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); }
.tabulator .tabulator-row.tabulator-row-even { background: var(--ui-bg-subtle); }
.tabulator .tabulator-row:hover { background: var(--ui-bg-hover); }
.tabulator .tabulator-row.tabulator-selected { background: var(--ui-focus-ring); }
.tabulator .tabulator-row .tabulator-cell {
    padding: var(--ui-pad-y) var(--ui-pad-x);
    border-right: 1px solid var(--ui-border);
}
.tabulator .tabulator-row .tabulator-cell.tabulator-editing input { font-family: var(--ui-font); font-size: var(--ui-font-size); }
.tabulator .tabulator-footer {
    background: var(--ui-bg);
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text);
}
.tabulator .tabulator-footer .tabulator-page {
    min-height: 30px;
    padding: 4px 10px;
    margin: 0 2px;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background: var(--ui-bg-hover);
    color: var(--ui-text);
}
.tabulator .tabulator-footer .tabulator-page.active {
    color: var(--ui-text-inverse);
    background: var(--app-primary);
    border-color: var(--app-primary);
}
.tabulator .tabulator-footer .tabulator-page.disabled { color: var(--ui-text-disabled); }
.tabulator .tabulator-col-resize-handle { border-color: var(--ui-border); }
.tabulator-menu {
    background: var(--ui-bg-overlay);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}
.tabulator-menu .tabulator-menu-item:hover { background: var(--ui-bg-hover); }

/* ==========================================================================
   4. DEVEXTREME OVERRIDES
   So DevExtreme mode uses the project's palette instead of the stock theme
   accent, and the two frameworks agree on brand colour and font.
   ========================================================================== */

.dx-widget { font-family: var(--ui-font); }
.dx-texteditor { border-radius: var(--ui-radius); }
/* The bundled DevExtreme sheet starts in light mode. Its controls and
   overlays still need the same surfaces when the user selects dark. */
body.app-dark .dx-widget { color: var(--ui-text); }
body.app-dark .dx-texteditor,
body.app-dark .dx-texteditor-input,
body.app-dark .dx-button-mode-contained,
body.app-dark .dx-popup-content,
body.app-dark .dx-overlay-content,
body.app-dark .dx-toolbar,
body.app-dark .dx-list,
body.app-dark .dx-menu,
body.app-dark .dx-datagrid,
body.app-dark .dx-datagrid-headers,
body.app-dark .dx-datagrid-rowsview,
body.app-dark .dx-datagrid-rowsview .dx-row > td,
body.app-dark .dx-pager {
    background-color: var(--ui-bg-overlay);
    color: var(--ui-text);
    border-color: var(--ui-border);
}
body.app-dark .dx-placeholder,
body.app-dark .dx-texteditor-input::placeholder { color: var(--ui-text-muted); }

/* Sizing, not just colour. The bridge previously restated the palette
   and left DevExtreme's own metrics in place, so changing density or
   theme family moved the buttons and the shell while every data entry
   control kept its stock height — the two halves of a form visibly
   disagreed. These resolve to the same tokens everything else uses. */
.dx-widget { font-size: var(--ui-font-size); }
.dx-texteditor-container,
.dx-texteditor-input-container { min-height: var(--ui-control-height); }
.dx-texteditor-input {
    height: auto;
    min-height: var(--ui-control-height);
    padding: var(--ui-pad-y) var(--ui-pad-x);
    font-family: var(--ui-font);
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
}
.dx-placeholder { font-size: var(--ui-font-size); }
.dx-placeholder::before { padding: var(--ui-pad-y) var(--ui-pad-x); }
.dx-button {
    min-height: var(--ui-control-height);
    border-radius: var(--ui-radius);
}
.dx-button-content { padding: var(--ui-pad-y) var(--ui-pad-x); }
.dx-button-text { font-size: var(--ui-font-size); line-height: var(--ui-line-height); }
.dx-datagrid, .dx-treelist { font-size: var(--ui-font-size); }
.dx-checkbox-icon { border-radius: var(--ui-radius-sm); }

/* ---- command bars ----
   Every generated form emits its commands as block-level divs in a
   plain container, so they stacked vertically and each button sized to
   its own label: Edit above Create, Save above Cancel, all different
   widths. One row, one gap, one width floor. */
#CommandContainter,
#RestoreCommandContainter,
.col-md-offset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-gap);
}
.col-md-offset > .ui-button,
.col-md-offset .ua-button,
.col-md-offset .dx-button {
    min-width: 104px;
}
/* The label sits centred rather than left, so a short command and a
   long one read as the same control at different lengths. */
.col-md-offset .ua-button { justify-content: center; }
.col-md-offset .dx-button-content { justify-content: center; }

.dx-texteditor.dx-state-focused,
.dx-texteditor.dx-state-active { border-color: var(--app-primary); }
.dx-texteditor.dx-invalid .dx-texteditor-container { border-color: var(--ui-danger); }
.dx-button-mode-contained.dx-button-default {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}
.dx-button-mode-contained.dx-button-default.dx-state-hover { background-color: var(--ui-primary-hover); }
.dx-button-mode-contained.dx-button-default.dx-state-active { background-color: var(--ui-primary-active); }
.dx-button-mode-contained.dx-button-success { background-color: var(--ui-success); border-color: var(--ui-success); }
.dx-button-mode-contained.dx-button-danger { background-color: var(--ui-danger); border-color: var(--ui-danger); }
.dx-list-item.dx-state-focused,
.dx-list-item.dx-list-item-selected { background-color: var(--app-primary); color: var(--ui-text-inverse); }
.dx-datagrid .dx-row-alt > td { background-color: var(--ui-bg-subtle); }
.dx-datagrid-rowsview .dx-selection > td { background-color: var(--ui-focus-ring); }
.dx-pager .dx-page.dx-selection { background-color: var(--app-primary); color: var(--ui-text-inverse); }
.dx-checkbox-checked .dx-checkbox-icon { background-color: var(--app-primary); border-color: var(--app-primary); }/* ==========================================================================
   5. LIFECYCLE STEPPER — record status and workflow status
   ========================================================================== */
.ui-recordstatus,
.ui-workflowstatus { display: block; }
.ui-recordstatus .steps,
.ui-workflowstatus .steps {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-font-size-sm);
}
.ui-recordstatus .steps > li,
.ui-workflowstatus .steps > li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 14px 5px 20px;
    color: var(--ui-text-muted);
    background: var(--ui-bg-subtle);
    border: 1px solid var(--ui-border);
    border-left-width: 0;
    white-space: nowrap;
}
.ui-recordstatus .steps > li:first-child,
.ui-workflowstatus .steps > li:first-child {
    padding-left: 14px;
    border-left-width: 1px;
    border-top-left-radius: var(--ui-radius);
    border-bottom-left-radius: var(--ui-radius);
}
.ui-recordstatus .steps > li:last-child,
.ui-workflowstatus .steps > li:last-child {
    border-top-right-radius: var(--ui-radius);
    border-bottom-right-radius: var(--ui-radius);
}
/* The connector between two stages is a rotated square painted in the
   previous stage's own colour, so the bar reads as one continuous
   chevron strip without needing an icon font. */
.ui-recordstatus .steps > li + li::before,
.ui-workflowstatus .steps > li + li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: inherit;
    border-left: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    transform: rotate(45deg);
}
.ui-recordstatus .steps > li > p,
.ui-workflowstatus .steps > li > p { margin: 0; line-height: 1.25; }

/* done — already passed. */
.ui-recordstatus .steps > li.done,
.ui-workflowstatus .steps > li.done {
    color: var(--ui-text-inverse);
    background: var(--app-primary);
    border-color: var(--app-primary);
}
.ui-recordstatus .steps > li.done + li::before,
.ui-workflowstatus .steps > li.done + li::before {
    background: var(--app-primary);
    border-color: var(--app-primary);
}

/* active — where the record is now. Danger red, matching the action
   buttons the same status produces, so the two never disagree. */
.ui-recordstatus .steps > li.active,
.ui-workflowstatus .steps > li.active {
    color: var(--ui-text-inverse);
    background: var(--ui-danger);
    border-color: var(--ui-danger);
    font-weight: var(--ui-font-weight-bold);
}
.ui-recordstatus .steps > li.active + li::before,
.ui-workflowstatus .steps > li.active + li::before {
    background: var(--ui-danger);
    border-color: var(--ui-danger);
}/* ==========================================================================
   6. RECORD HEADER — title, record status, record actions
   ========================================================================== */
.ua-record-header { display: block; }

.ua-record-header .ua-record-header-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.ua-record-header .ua-record-header-main .card-title {
    margin-bottom: 0;
    min-width: 0;
}

/* Back into normal flow. The band below owns the vertical space, so the
   card header grows to fit the stepper instead of the stepper being
   pinned to a corner of the card. */
.ua-record-header .heading-elements {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Guard against the small-screen reveal class: the actions are always in
   the flow here, so an absolutely positioned overlay would reintroduce
   the clipping this layout exists to avoid. */
.ua-record-header .heading-elements.visible {
    position: static;
    top: auto;
    width: auto;
    padding: 0;
    border: 0;
}

/* Nothing left to reveal, so the toggle has no job. */
.ua-record-header .heading-elements-toggle { display: none; }

.ua-record-status-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 20px;
}

.ua-record-status-band:empty {
    display: none;
    margin-top: 0;
}

/* The band is a row of steppers; neither may push the card wider. */
.ua-record-status-band > .ui-recordstatus,
.ua-record-status-band > .ui-workflowstatus {
    min-width: 0;
    max-width: 100%;
}

.ua-record-status-band .steps { max-width: 100%; }

.ua-record-status-band > .ui-recordaction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
}

.ua-record-status-band > .ui-recordaction > .ui-button {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

.ua-record-status-band > .ui-recordaction .record-action-none {
    max-width: 36rem;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ua-record-status-band > .ui-recordaction {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* The action slot when there is no action to offer. The stepper beside
   it still shows where the record has got to, so a blank box reads as a
   broken button; this says why instead of leaving the reader to guess. */
.record-action-none {
    color: var(--ui-text-disabled);
    font-size: var(--ui-font-size-sm);
    line-height: var(--ui-line-height);
    max-width: 100%;
}/* ==========================================================================
   7. STATUS NAVIGATION — module dashboard, status overview, list chips
   ========================================================================== */
.ua-module-dashboard,
.ua-status-overview {
    --ua-tone-open: var(--ui-warning);
    --ua-tone-completed: var(--ui-success);
    --ua-tone-stopped: var(--ui-danger);
    --ua-attention: var(--app-primary);
    display: grid;
    gap: var(--ui-page-gap);
    margin: 16px 0;
}
/* Brand-coloured text drops below a readable contrast on the dark
   surfaces, so it is lifted towards white there; fills and borders
   keep the brand colour itself. */
.ua-status-chips { --ua-attention: var(--app-primary); }
body.app-dark .ua-module-dashboard,
body.app-dark .ua-status-overview,
body.app-dark .ua-status-chips { --ua-attention: color-mix(in srgb, var(--app-primary) 55%, #fff); }

.ua-module-dashboard [data-tone="open"],
.ua-status-overview [data-tone="open"] { --ua-tone: var(--ua-tone-open); }
.ua-module-dashboard [data-tone="completed"],
.ua-status-overview [data-tone="completed"] { --ua-tone: var(--ua-tone-completed); }
.ua-module-dashboard [data-tone="stopped"],
.ua-status-overview [data-tone="stopped"] { --ua-tone: var(--ua-tone-stopped); }

.ua-module-group__title,
.ua-status-group__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight-bold);
    line-height: var(--ui-line-height);
    color: var(--ui-text);
}

/* Module dashboard: a card per document, a row per lookup. */
.ua-module-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.ua-module-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
}
.ua-module-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.ua-module-card__title {
    min-width: 0;
    font-weight: var(--ui-font-weight-bold);
    color: var(--ui-text);
    overflow-wrap: anywhere;
    text-decoration: none;
}
.ua-module-card__title:hover { color: var(--ua-attention); text-decoration: underline; }
.ua-module-card__total {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--ui-font-size-sm);
}
.ua-module-card__count {
    margin-right: 2px;
    font-size: 1.5rem;
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.2;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}
.ua-module-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}

.ua-status-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    overflow: hidden;
    background: var(--ui-bg-active);
    border-radius: 3px;
}
.ua-status-bar__segment { min-width: 4px; background: var(--ua-tone); }
.ua-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-font-size-sm);
}
.ua-status-legend a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-muted);
    text-decoration: none;
}
.ua-status-legend a:hover { color: var(--ua-attention); }
.ua-status-legend strong { color: var(--ui-text); font-variant-numeric: tabular-nums; }
.ua-status-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ua-tone, var(--ui-text-disabled));
}

.ua-module-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.ua-module-cards + .ua-module-rows { margin-top: 12px; }
.ua-module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    text-decoration: none;
}
.ua-module-row:hover { color: var(--ua-attention); border-color: var(--app-primary); text-decoration: none; }
.ua-module-row__label { min-width: 0; overflow-wrap: anywhere; }
.ua-module-row__count { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }

.ua-module-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ui-text-muted);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius);
}
.ua-module-empty__title { margin: 0 0 4px; font-weight: var(--ui-font-weight-bold); color: var(--ui-text); }
.ua-module-empty__body { margin: 0; }

/* What waits on the reader: the next move is theirs to make. */
.ua-waiting-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: var(--ui-font-size-sm);
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--ua-attention, var(--app-primary));
    background: var(--ui-bg-subtle);
    background: color-mix(in srgb, var(--app-primary) 10%, var(--ui-bg));
    border: 1px solid var(--app-primary);
    border-radius: 999px;
    text-decoration: none;
}
a.ua-waiting-badge:hover { color: var(--ui-text-inverse); background: var(--app-primary); text-decoration: none; }

/* Entity overview: one tile per status, grouped as the stepper is. */
.ua-status-overview { gap: 18px; }
.ua-status-overview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ua-status-overview__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    margin: 0;
    color: var(--ui-text-muted);
}
.ua-status-overview__count {
    font-size: 1.75rem;
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.1;
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}
.ua-status-overview__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-status-group {
    padding-top: 12px;
    border-top: 2px solid var(--ua-tone, var(--ui-border));
    scroll-margin-top: calc(var(--ui-subbar-h) + 16px);
}
.ua-status-group__count { font-weight: normal; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.ua-status-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.ua-status-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    text-decoration: none;
    transition: border-color var(--ui-transition), background-color var(--ui-transition);
}
.ua-status-tile:hover { color: var(--ui-text); background: var(--ui-bg-hover); border-color: var(--app-primary); text-decoration: none; }
.ua-status-tile__count {
    font-size: 1.5rem;
    font-weight: var(--ui-font-weight-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.ua-status-tile__label { font-size: var(--ui-font-size-sm); color: var(--ui-text-muted); }
.ua-status-tile__hint { font-size: var(--ui-font-size-sm); font-weight: var(--ui-font-weight-bold); color: var(--ua-attention); }
.ua-status-tile.is-empty .ua-status-tile__count { color: var(--ui-text-disabled); }
.ua-status-tile.is-waiting { border-color: var(--app-primary); box-shadow: inset 3px 0 0 var(--app-primary); }

/* List: filter by status without leaving the page. */
.ua-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}
.ua-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: var(--ui-font-size-sm);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    text-decoration: none;
}
.ua-status-chip:hover { color: var(--ua-attention); border-color: var(--app-primary); text-decoration: none; }
.ua-status-chip__count { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.ua-status-chip.is-empty { color: var(--ui-text-muted); }
.ua-status-chip.is-waiting .ua-status-chip__count { font-weight: var(--ui-font-weight-bold); color: var(--ua-attention); }
.ua-status-chip.is-active,
.ua-status-chip.is-active:hover { color: var(--ui-text-inverse); background: var(--app-primary); border-color: var(--app-primary); }
.ua-status-chip.is-active .ua-status-chip__count { color: inherit; }

.ua-module-card__title:focus-visible,
.ua-status-legend a:focus-visible,
.ua-module-row:focus-visible,
.ua-waiting-badge:focus-visible,
.ua-status-tile:focus-visible,
.ua-status-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ui-focus-ring); }
.ua-status-tile.is-waiting:focus-visible { box-shadow: inset 3px 0 0 var(--app-primary), 0 0 0 3px var(--ui-focus-ring); }
/* ---- dark mode (body.app-dark) ---- */
body.app-dark {
    --ui-bg: #2a2a2a;
    --ui-bg-subtle: #313131;
    --ui-bg-hover: #383838;
    --ui-bg-active: #404040;
    --ui-bg-disabled: #333;
    --ui-bg-overlay: #2f2f2f;
    --ui-text: #dedede;
    --ui-text-muted: #b4bcc6;
    --ui-text-disabled: #6b6b6b;
    --ui-border: #515151;
    --ui-border-strong: #6a6a6a;
    --ui-card-border: #454545;
    --ui-shadow: 0 4px 12px rgba(0,0,0,.45);
    --ui-shadow-lg: 0 10px 40px rgba(0,0,0,.6);
    --ui-primary-hover: #427be2;
    --ui-primary-active: #5386e5;
    background: #222;
    color: var(--ui-text);
}
body.app-dark .card,
body.app-dark .content-wrapper,
body.app-dark .content-body,
body.app-dark .app-content { background: var(--ui-bg-overlay); color: var(--ui-text); }
body.app-dark .card { border-color: var(--ui-card-border); }
body.app-dark .card-header,
body.app-dark .card-footer,
body.app-dark .card-body,
body.app-dark .content-header,
body.app-dark .modal-content,
body.app-dark .dropdown-menu {
    background: var(--ui-bg-overlay);
    color: var(--ui-text);
    border-color: var(--ui-border);
}
body.app-dark .card-header .card-title,
body.app-dark .content-header-title,
body.app-dark h1, body.app-dark h2, body.app-dark h3,
body.app-dark h4, body.app-dark h5 { color: var(--ui-text); }
body.app-dark .dropdown-item { color: var(--ui-text); }
body.app-dark .dropdown-item:hover { background: var(--ui-bg-hover); }
body.app-dark .breadcrumb { background: transparent; }
body.app-dark label,
body.app-dark .card-title,
body.app-dark .breadcrumb a { color: var(--ui-text); }
body.app-dark.ua-auth-page, body.app-dark.ua-error-page { background: #222; }

/* ---- theme families (body[data-app-theme]) ---- */
body[data-app-theme="fluent"] {
    --app-primary: #0f6cbd;
    --ui-primary-hover: #115ea3;
    --ui-primary-active: #0c3b5e;
    --ui-focus-ring: rgba(15, 108, 189, .30);
    --ui-font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ui-font-size: 14px;
    --ui-font-size-sm: 12px;
    --ui-line-height: 1.43;
    --ui-font-weight-bold: 600;
    --ui-control-height: 32px;
    --ui-radius: 6px;
    --ui-radius-sm: 4px;
    --ui-pad-x: 10px;
    --ui-pad-y: 5px;
    --ui-row-gap: 12px;
    --ui-field-gap: 16px;
    --ui-gap: 8px;
    --ui-border: #d1d1d1;
    --ui-border-strong: #a19f9d;
    --ui-card-border: #e3e1df;
    --ui-bg-subtle: #faf9f8;
    --ui-bg-hover: #f3f2f1;
    --ui-bg-active: #ededeb;
    --ui-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --ui-shadow-lg: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
    --ui-transition: 100ms cubic-bezier(.33,0,.67,1);
}
body.app-dark[data-app-theme="fluent"] {
    --app-primary: #479ef5;
    --ui-primary-hover: #62abf5;
    --ui-primary-active: #77b7f7;
    --ui-border: #3d3d3d;
    --ui-border-strong: #565656;
    --ui-card-border: #353535;
    --ui-bg-subtle: #1f1f1f;
    --ui-bg-hover: #2b2b2b;
    --ui-bg-active: #333;
}
body[data-app-theme="material"] {
    --app-primary: #6750a4;
    --ui-primary-hover: #56438d;
    --ui-primary-active: #4a3880;
    --ui-focus-ring: rgba(103, 80, 164, .28);
    --ui-font: Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ui-font-size: 14px;
    --ui-font-size-sm: 12px;
    --ui-line-height: 1.5;
    --ui-font-weight-bold: 500;
    --ui-control-height: 40px;
    --ui-radius: 8px;
    --ui-radius-sm: 4px;
    --ui-pad-x: 14px;
    --ui-pad-y: 8px;
    --ui-row-gap: 16px;
    --ui-field-gap: 18px;
    --ui-button-radius: 20px;
    --ui-gap: 8px;
    --ui-border: #cac4d0;
    --ui-border-strong: #79747e;
    --ui-card-border: #e4dfe7;
    --ui-bg-subtle: #f7f2fa;
    --ui-bg-hover: #f3edf7;
    --ui-bg-active: #ece6f0;
    --ui-shadow: 0 1px 3px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.12);
    --ui-shadow-lg: 0 6px 12px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.14);
    --ui-transition: 200ms cubic-bezier(.2,0,0,1);
}
body.app-dark[data-app-theme="material"] {
    --app-primary: #d0bcff;
    --ui-primary-hover: #c0a9f8;
    --ui-primary-active: #b195f0;
    --ui-text-inverse: #381e72;
    --ui-border: #49454f;
    --ui-border-strong: #635b70;
    --ui-card-border: #403c43;
    --ui-bg-subtle: #1d1b20;
    --ui-bg-hover: #262329;
    --ui-bg-active: #2f2b34;
}
body[data-app-theme="material"] .ua-button,
body[data-app-theme="material"] .btn { border-radius: 20px; }
body[data-app-theme="material"] .ua-textbox,
body[data-app-theme="material"] .ua-select { border-radius: var(--ui-radius) var(--ui-radius) 0 0; }

/* ---- compact density (body.app-compact) ---- */
body.app-compact {
    --ui-control-height: 26px;
    --ui-font-size: 12px;
    --ui-font-size-sm: 11px;
    --ui-field-font-size: .8125rem;
    --ui-label-font-size: .75rem;
    --ui-field-gap: 8px;
    --ui-pad-x: 6px;
    --ui-pad-y: 3px;
    --ui-row-gap: 6px;
    --ui-gap: 4px;
}

/* ---- accent presets (body[data-app-accent]) ---- */
body[data-app-accent="blue"] {
    --app-primary: #2d6cdf;
    --ui-primary-hover: #2963cd;
    --ui-primary-active: #265bbb;
    --ui-focus-ring: rgba(45,108,223,0.25);
}
body.app-dark[data-app-accent="blue"] {
    --ui-primary-hover: #427be2;
    --ui-primary-active: #5386e5;
}
body[data-app-accent="teal"] {
    --app-primary: #0f9d8f;
    --ui-primary-hover: #0e9084;
    --ui-primary-active: #0d8478;
    --ui-focus-ring: rgba(15,157,143,0.25);
}
body.app-dark[data-app-accent="teal"] {
    --ui-primary-hover: #27a79a;
    --ui-primary-active: #3aafa3;
}
body[data-app-accent="green"] {
    --app-primary: #3f9c35;
    --ui-primary-hover: #3a9031;
    --ui-primary-active: #35832d;
    --ui-focus-ring: rgba(63,156,53,0.25);
}
body.app-dark[data-app-accent="green"] {
    --ui-primary-hover: #52a649;
    --ui-primary-active: #62ae59;
}
body[data-app-accent="purple"] {
    --app-primary: #7c4dbe;
    --ui-primary-hover: #7247af;
    --ui-primary-active: #6841a0;
    --ui-focus-ring: rgba(124,77,190,0.25);
}
body.app-dark[data-app-accent="purple"] {
    --ui-primary-hover: #895fc4;
    --ui-primary-active: #946dca;
}
body[data-app-accent="orange"] {
    --app-primary: #e07b39;
    --ui-primary-hover: #ce7134;
    --ui-primary-active: #bc6730;
    --ui-focus-ring: rgba(224,123,57,0.25);
}
body.app-dark[data-app-accent="orange"] {
    --ui-primary-hover: #e3884d;
    --ui-primary-active: #e6935d;
}
body[data-app-accent="red"] {
    --app-primary: #cf4b3f;
    --ui-primary-hover: #be453a;
    --ui-primary-active: #ae3f35;
    --ui-focus-ring: rgba(207,75,63,0.25);
}
body.app-dark[data-app-accent="red"] {
    --ui-primary-hover: #d45d52;
    --ui-primary-active: #d86b62;
}