html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--ao-page-bg);
    color: var(--ao-text);
    cursor: default;
}

 :root {
    --ao-app-gradient-bg:
        radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--ao-accent) 12%, transparent), transparent 34%),
        radial-gradient(circle at 88% 112%, color-mix(in srgb, var(--ao-accent) 7%, transparent), transparent 42%);
    --ao-elevated-bg: color-mix(in srgb, var(--ao-card-bg) 86%, white 14%);
    --ao-elevated-border: color-mix(in srgb, var(--ao-border) 78%, rgba(99, 102, 241, 0.28));
    --ao-elevated-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
    --ao-surface-glass: color-mix(in srgb, var(--ao-card-bg) 78%, transparent);
    --ao-section-title: #1e293b;
    --ao-section-subtle: #64748b;
    --ao-card-premium-bg: color-mix(in srgb, var(--ao-accent) 8%, var(--ao-card-bg));
    --ao-card-premium-glow: none;
    --ao-btn-premium-bg: rgba(255, 255, 255, 0.95);
    --ao-btn-premium-bg-hover: rgba(79, 70, 229, 0.06);
    --ao-btn-premium-text: #3a3252;
    --ao-btn-premium-border: rgba(100, 90, 130, 0.18);
    --ao-btn-muted-bg: rgba(255, 255, 255, 0.95);
    --ao-btn-muted-border: rgba(100, 90, 130, 0.18);
    --ao-grid-hover-bg: #e2e8f0;
    --ao-grid-hover-fg: #0f172a;
    --ao-grid-selected-bg: #cbd5e1;
    --ao-grid-selected-fg: #0f172a;
    --ao-grid-selected-hover-bg: #bfcde0;
    --ao-grid-selected-hover-fg: #0f172a;
    --ao-grid-filter-editor-bg: #ffffff;
    --ao-grid-filter-editor-border: #cbd5e1;
    --ao-grid-filter-editor-fg: inherit;
    --ao-toolbar-font-size: 0.8rem;
    --ao-toolbar-control-height: 2rem;
    --ao-toolbar-padding-y: 0.25rem;
    --ao-toolbar-padding-x: 0.7rem;
    --ao-toolbar-label-font-size: 0.75rem;
    --ao-toolbar-gap: 0.75rem;
    --ao-toolbar-field-gap: 0.35rem;
    --ao-toolbar-search-min-width: 16rem;
    --ao-toolbar-search-max-width: 22rem;
    --ao-grid-cell-padding-y: 0.45rem;
    --ao-grid-cell-padding-x: 0.75rem;
    --ao-grid-font-size: 0.85rem;
    --ao-grid-header-font-size: 0.8rem;
    --ao-scrollbar-track: #e2e8f0;
    --ao-scrollbar-thumb: #94a3b8;
    --ao-scrollbar-thumb-hover: #64748b;
}

.ao-density-small {
    --ao-toolbar-font-size: 0.75rem;
    --ao-toolbar-control-height: 1.75rem;
    --ao-toolbar-padding-y: 0.2rem;
    --ao-toolbar-padding-x: 0.6rem;
    --ao-toolbar-label-font-size: 0.7rem;
    --ao-toolbar-gap: 0.6rem;
    --ao-toolbar-field-gap: 0.3rem;
    --ao-btn-font-size: 0.75rem;
    --ao-btn-height: 1.75rem;
    --ao-btn-padding-y: 0.2rem;
    --ao-btn-padding-x: 0.6rem;
    --ao-grid-cell-padding-y: 0.35rem;
    --ao-grid-cell-padding-x: 0.6rem;
    --ao-grid-font-size: 0.78rem;
    --ao-grid-header-font-size: 0.75rem;
}

.ao-density-medium {
    --ao-toolbar-font-size: 0.8rem;
    --ao-toolbar-control-height: 2rem;
    --ao-toolbar-padding-y: 0.25rem;
    --ao-toolbar-padding-x: 0.7rem;
    --ao-toolbar-label-font-size: 0.75rem;
    --ao-toolbar-gap: 0.75rem;
    --ao-toolbar-field-gap: 0.35rem;
    --ao-btn-font-size: 0.8rem;
    --ao-btn-height: 2rem;
    --ao-btn-padding-y: 0.25rem;
    --ao-btn-padding-x: 0.7rem;
    --ao-grid-cell-padding-y: 0.45rem;
    --ao-grid-cell-padding-x: 0.75rem;
    --ao-grid-font-size: 0.85rem;
    --ao-grid-header-font-size: 0.8rem;
}

.ao-density-large {
    --ao-toolbar-font-size: 0.9rem;
    --ao-toolbar-control-height: 2.25rem;
    --ao-toolbar-padding-y: 0.3rem;
    --ao-toolbar-padding-x: 0.85rem;
    --ao-toolbar-label-font-size: 0.85rem;
    --ao-toolbar-gap: 0.85rem;
    --ao-toolbar-field-gap: 0.4rem;
    --ao-btn-font-size: 0.9rem;
    --ao-btn-height: 2.25rem;
    --ao-btn-padding-y: 0.3rem;
    --ao-btn-padding-x: 0.85rem;
    --ao-grid-cell-padding-y: 0.55rem;
    --ao-grid-cell-padding-x: 0.9rem;
    --ao-grid-font-size: 0.95rem;
    --ao-grid-header-font-size: 0.9rem;
}

[data-bs-theme="dark"] {
    --ao-grid-hover-bg: #1f2937;
    --ao-grid-hover-fg: #f8fafc;
    --ao-grid-selected-bg: #273449;
    --ao-grid-selected-fg: #f8fafc;
    --ao-grid-selected-hover-bg: #2d3d55;
    --ao-grid-selected-hover-fg: #f8fafc;
    --ao-grid-filter-editor-bg: var(--bs-body-bg);
    --ao-grid-filter-editor-border: #374151;
    --ao-grid-filter-editor-fg: inherit;
    --ao-scrollbar-track: #0f172a;
    --ao-scrollbar-thumb: #475569;
    --ao-scrollbar-thumb-hover: #64748b;
}

html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ao-scrollbar-thumb) var(--ao-scrollbar-track);
}

*::-webkit-scrollbar {
    width: 0.85rem;
    height: 0.85rem;
}

*::-webkit-scrollbar-track {
    background: var(--ao-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--ao-scrollbar-thumb);
    border: 3px solid var(--ao-scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ao-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: var(--ao-scrollbar-track);
}

a, .btn-link {
    color: #006bb7;
}

.ao-grid-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    font-size: inherit !important;
    line-height: inherit !important;
}

.ao-grid-link :is(.dxbl-btn-content, .dxbl-btn-text) {
    font-size: inherit !important;
    line-height: inherit !important;
}

.ao-grid-link:hover,
.ao-grid-link:focus {
    text-decoration: underline;
}

.ao-text-center {
    text-align: center !important;
}

.ao-text-end {
    text-align: end !important;
}

.app-density-toggle {
    min-width: 6.5rem;
}

.app-density-toggle :is(.dxbl-text-edit, .dxbl-edit, .dxbl-combo-box) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
}

.ao-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.ao-page {
    position: relative;
}

.ao-page > .feature-gate {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.grid-toolbar-card,
.ao-panel,
.card,
.dxbs-grid,
.dxbl-grid {
    border-radius: var(--ao-radius-l);
}

.grid-toolbar-card {
    background: var(--ao-surface-glass);
    border: 1px solid var(--ao-elevated-border);
    box-shadow: var(--ao-elevated-shadow);
    backdrop-filter: blur(8px);
}

.grid-toolbar-card .card-body {
    padding: clamp(0.85rem, 1.2vw, 1.15rem);
}


.ao-page > .grid-toolbar-card:first-child,
.ao-page > .feature-gate > .grid-toolbar-card:first-child {
    background: var(--ao-card-bg);
    border-color: var(--ao-elevated-border);
    border-bottom: 1px solid rgba(13, 148, 136, 0.22);
}

[data-bs-theme="dark"] .ao-page > .grid-toolbar-card:first-child,
[data-bs-theme="dark"] .ao-page > .feature-gate > .grid-toolbar-card:first-child {
    border-bottom-color: rgba(20, 184, 166, 0.18);
}

/* Card-header title panel (PageHeader in card-header, toolbar in card-body) */
.ao-title-header {
    padding: 0.75rem 1rem 0.6rem;
    border-bottom: 1px solid var(--ao-elevated-border, rgba(0, 0, 0, 0.08));
}

.card {
    border: 1px solid color-mix(in srgb, var(--ao-border) 82%, rgba(99, 102, 241, 0.16));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}

.ao-grid,
.dxbs-grid,
.dxbl-grid {
    border: 1px solid color-mix(in srgb, var(--ao-border) 84%, rgba(59, 130, 246, 0.12));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    overflow: clip;
}

.dxbs-grid .dxbs-table thead th,
.dxbl-grid .dxbl-grid-table thead th,
.dxbl-grid-table thead th {
    letter-spacing: 0.04em;
    font-size: clamp(0.72rem, 0.82vw, 0.8rem);
    text-transform: uppercase;
    color: var(--ao-section-subtle);
    font-weight: 700;
}

.ao-panel {
    background: var(--ao-surface-glass);
    border-color: var(--ao-elevated-border);
    box-shadow: var(--ao-elevated-shadow);
}


/* Shared visual uplift for all page cards (lists/forms/details) */
.ao-page :is([class$="-card"], [class*="-card "]) {
    border-radius: var(--ao-radius-l);
    border: 1px solid color-mix(in srgb, var(--ao-border) 82%, rgba(99, 102, 241, 0.16));
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.ao-page :is(table.table, .table-responsive) {
    border-radius: 0.9rem;
}

.ao-page .alert {
    border-radius: var(--ao-radius-m);
    border-width: 1px;
}


.ao-page .card {
    position: relative;
    overflow: clip;
    background: var(--ao-card-premium-glow), var(--ao-card-premium-bg);
}

.ao-page .card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.35), transparent);
    pointer-events: none;
}

[data-bs-theme="dark"] {
    --ao-app-gradient-bg:
        radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--ao-accent) 18%, transparent), transparent 34%),
        radial-gradient(circle at 90% 112%, color-mix(in srgb, var(--ao-accent) 11%, transparent), transparent 42%);
    --ao-elevated-bg: color-mix(in srgb, var(--ao-card-bg) 90%, black 10%);
    --ao-elevated-border: color-mix(in srgb, var(--ao-border) 62%, rgba(125, 211, 252, 0.34));
    --ao-elevated-shadow: 0 16px 36px rgba(2, 6, 23, 0.42);
    --ao-surface-glass: color-mix(in srgb, var(--ao-card-bg) 80%, rgba(15, 23, 42, 0.2));
    --ao-section-title: #e2e8f0;
    --ao-section-subtle: #94a3b8;
    --ao-card-premium-bg: color-mix(in srgb, var(--ao-accent) 10%, var(--ao-card-bg));
    --ao-card-premium-glow: none;
    --ao-btn-premium-bg: rgba(30, 41, 59, 0.60);
    --ao-btn-premium-bg-hover: rgba(99, 102, 241, 0.15);
    --ao-btn-premium-text: #cbd5e1;
    --ao-btn-premium-border: rgba(148, 163, 184, 0.12);
    --ao-btn-muted-bg: rgba(30, 41, 59, 0.60);
    --ao-btn-muted-border: rgba(148, 163, 184, 0.12);
}

.ao-toolbar,
.ao-toolbar-row,
.ao-actions-row,
.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ao-toolbar-gap);
    font-size: var(--ao-toolbar-font-size);
}

/* UI-005: explicit opt-in surfaces for action glow + menu/popup clipping safety. */
.ui-no-clip {
    overflow: visible !important;
}

.ui-popup-surface {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.ui-popup-surface :is(.card-body, .dxbl-accordion-item, .dxbl-accordion-item-body, .dxbl-accordion-item-content) {
    overflow: visible !important;
}

.ui-popup-surface :is(.dxbl-dropdown-button, .dxbl-drop-down-button, .dxbl-split-button, .dxbl-split-btn, .dxbl-btn-group, .dxbl-combo-box, .dxbl-drop-down-edit) {
    position: relative;
    z-index: 3;
}

.ui-popup-surface :is(.dxbl-dropdown-menu, .dropdown-menu, .dxbl-dropdown-dialog, .dxbl-dropdown-area, .dxbl-listbox, .dxbl-popup) {
    z-index: 2000 !important;
}

.ui-action-surface {
    position: relative;
    isolation: isolate;
    overflow: visible !important;
}

.ui-action-surface :is(.ao-btn, .btn, .dxbl-btn):is(:hover, :focus-visible) {
    position: relative;
    z-index: 2;
}

.ao-toolbar,
.ao-toolbar-row {
    align-items: center;
}

.ao-toolbar :is(.ao-btn, .ao-toolbar-btn, .dxbl-btn),
.ao-toolbar-row :is(.ao-btn, .ao-toolbar-btn, .dxbl-btn),
.ao-actions-row :is(.ao-btn, .ao-toolbar-btn, .dxbl-btn),
.page-header-actions :is(.ao-btn, .ao-toolbar-btn, .dxbl-btn) {
    font-size: var(--ao-btn-font-size) !important;
    padding: var(--ao-btn-padding-y) var(--ao-btn-padding-x) !important;
    height: var(--ao-btn-height) !important;
    min-height: var(--ao-btn-height) !important;
}

.ao-toolbar :is(.dxbl-text-edit, .dxbl-text-editor, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-drop-down-edit, input, select, textarea),
.ao-toolbar-row :is(.dxbl-text-edit, .dxbl-text-editor, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-drop-down-edit, input, select, textarea),
.ao-actions-row :is(.dxbl-text-edit, .dxbl-text-editor, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-drop-down-edit, input, select, textarea),
.page-header-actions :is(.dxbl-text-edit, .dxbl-text-editor, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-drop-down-edit, input, select, textarea) {
    font-size: var(--ao-toolbar-font-size) !important;
}

.ao-grid-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
}

.ao-grid-pager__summary {
    margin-right: 0;
    text-align: left;
}

.ao-grid-pager .page-link {
    background-color: var(--ao-card-bg);
    border-color: var(--ao-border);
    color: var(--ao-text);
}

.ao-grid-pager .page-item.active .page-link {
    background-color: var(--ao-sidebar-active-bg);
    border-color: var(--ao-sidebar-active-bg);
    color: var(--ao-sidebar-active-text);
}

.ao-grid-pager .page-link:hover {
    background-color: var(--ao-sidebar-hover-bg);
    color: var(--ao-text);
}

.ao-grid-pager .page-item.disabled .page-link {
    background-color: var(--ao-header-bg);
    border-color: var(--ao-border);
    color: var(--ao-muted);
}

.ao-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ao-toolbar-gap);
    align-items: center;
}

.ao-actions-row,
.page-header-actions {
    align-items: center;
}

.ao-toolbar :is(input, select, textarea),
.ao-toolbar-row :is(input, select, textarea) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ao-toolbar :is(.ao-btn, .ao-toolbar-btn),
.ao-toolbar-row :is(.ao-btn, .ao-toolbar-btn) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ao-actions-row :is(.ao-btn, .ao-toolbar-btn),
.page-header-actions :is(.ao-btn, .ao-toolbar-btn) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ao-toolbar :is(.dxbl-spin-edit, .dxbl-spin-edit .dxbl-text-editor, .dxbl-spin-edit .dxbl-edit),
.ao-toolbar-row :is(.dxbl-spin-edit, .dxbl-spin-edit .dxbl-text-editor, .dxbl-spin-edit .dxbl-edit) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    line-height: 1;
    display: flex;
    align-items: center;
}

.ao-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: var(--ao-toolbar-field-gap);
    min-width: 160px;
    font-size: var(--ao-toolbar-font-size);
}

.ao-toolbar-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.ao-toolbar-field--search {
    min-width: var(--ao-toolbar-search-min-width);
    flex: 0 1 clamp(var(--ao-toolbar-search-min-width), 28vw, var(--ao-toolbar-search-max-width));
    width: clamp(var(--ao-toolbar-search-min-width), 28vw, var(--ao-toolbar-search-max-width));
    max-width: var(--ao-toolbar-search-max-width);
}

.ao-toolbar-field--take {
    min-width: 120px;
    max-width: 140px;
}

.ao-toolbar-control {
    width: 100%;
    font-size: var(--ao-toolbar-font-size);
}

.ao-toolbar-control--narrow {
    width: 100%;
    min-width: 120px;
    max-width: 140px;
    flex: 0 0 auto;
}

.ao-toolbar .ao-toolbar-control,
.ao-toolbar-row .ao-toolbar-control {
    height: var(--ao-toolbar-control-height);
    max-height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    box-sizing: border-box;
}

.ao-toolbar .ao-toolbar-control[class*="dxbl-"],
.ao-toolbar-row .ao-toolbar-control[class*="dxbl-"] {
    height: var(--ao-toolbar-control-height);
    max-height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    box-sizing: border-box;
}

.ao-toolbar-control:is(input, select, textarea) {
    min-height: var(--ao-toolbar-control-height);
    height: var(--ao-toolbar-control-height);
    padding: var(--ao-toolbar-padding-y) var(--ao-toolbar-padding-x);
}

.ao-toolbar-control :is(input, select, textarea) {
    min-height: var(--ao-toolbar-control-height);
    height: var(--ao-toolbar-control-height);
    padding: var(--ao-toolbar-padding-y) var(--ao-toolbar-padding-x);
    font-size: var(--ao-toolbar-font-size);
}

.ao-toolbar .ao-toolbar-field--take,
.ao-toolbar-row .ao-toolbar-field--take {
    min-width: 120px;
    max-width: 140px;
}

.ao-toolbar .ao-toolbar-control--narrow,
.ao-toolbar-row .ao-toolbar-control--narrow {
    width: 100%;
    max-width: 140px;
}

.ao-toolbar :is(.dxbl-text-editor, input, textarea, .dxbl-memo textarea),
.ao-toolbar-row :is(.dxbl-text-editor, input, textarea, .dxbl-memo textarea) {
    height: var(--ao-toolbar-control-height);
    max-height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
}

.ao-toolbar :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-edit),
.ao-toolbar-row :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combo-box, .dxbl-edit) {
    height: var(--ao-toolbar-control-height);
    min-height: var(--ao-toolbar-control-height);
    align-items: center;
    font-size: var(--ao-toolbar-font-size);
}

/* --- Glue ComboBox + SpinEdit parts in toolbars (remove gaps / double borders) --- */
.ao-toolbar :is(.dxbl-combo-box, .dxbl-drop-down-edit, .dxbl-spin-edit),
.ao-toolbar-row :is(.dxbl-combo-box, .dxbl-drop-down-edit, .dxbl-spin-edit) {
    gap: 0 !important;
    column-gap: 0 !important;
}

/* ComboBox: collapse seam between edit area and dropdown button */
.ao-toolbar :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn,
.ao-toolbar-row :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn {
    margin-left: -1px !important; /* collapses double border / tiny gap */
    border-left-color: var(--card-border-color) !important;
}

/* ComboBox: ensure the edit part doesn't create extra divider */
.ao-toolbar :is(.dxbl-combo-box, .dxbl-drop-down-edit) :is(.dxbl-text-edit, .dxbl-edit),
.ao-toolbar-row :is(.dxbl-combo-box, .dxbl-drop-down-edit) :is(.dxbl-text-edit, .dxbl-edit) {
    border-right-width: 0 !important; /* prevents double vertical line */
}

/* SpinEdit: collapse seam between edit area and spin buttons */
.ao-toolbar .dxbl-spin-edit .dxbl-spin-buttons,
.ao-toolbar-row .dxbl-spin-edit .dxbl-spin-buttons {
    margin-left: -1px !important; /* glue buttons to the edit box */
}

/* SpinEdit: if input keeps reserved padding for overlay buttons, remove it in toolbars */
.ao-toolbar .dxbl-spin-edit :is(input, .dxbl-edit input),
.ao-toolbar-row .dxbl-spin-edit :is(input, .dxbl-edit input) {
    padding-right: var(--ao-toolbar-padding-x, 0.7rem) !important;
}

.ao-toolbar :is(.ao-btn, .ao-toolbar-btn) :is(.dxbl-btn-content, .dxbl-btn-text),
.ao-toolbar-row :is(.ao-btn, .ao-toolbar-btn) :is(.dxbl-btn-content, .dxbl-btn-text),
.ao-actions-row :is(.ao-btn, .ao-toolbar-btn) :is(.dxbl-btn-content, .dxbl-btn-text),
.page-header-actions :is(.ao-btn, .ao-toolbar-btn) :is(.dxbl-btn-content, .dxbl-btn-text) {
    display: flex;
    align-items: center;
    line-height: 1;
    height: 100%;
}

.ao-toolbar :is(.ao-btn, .ao-toolbar-btn),
.ao-toolbar-row :is(.ao-btn, .ao-toolbar-btn),
.ao-actions-row :is(.ao-btn, .ao-toolbar-btn),
.page-header-actions :is(.ao-btn, .ao-toolbar-btn) {
    border-radius: var(--ao-btn-radius) !important;
}

[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page) :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn,
[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page) :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn:hover,
[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page) :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn:active,
[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page) :is(.dxbl-combo-box, .dxbl-drop-down-edit) .dxbl-btn:focus {
    background-color: var(--ao-card-bg) !important;
    border-color: var(--card-border-color) !important;
    color: var(--ao-text) !important;
    border-left-color: transparent !important;
    border-radius: 0 var(--ao-btn-radius) var(--ao-btn-radius) 0 !important;
}

[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page)
    :is(.dxbl-dropdown-button, .dxbl-drop-down-button, .dxbl-split-button, .dxbl-split-btn, .dxbl-btn-group) .dxbl-btn + .dxbl-btn {
    border-left-color: transparent;
}

[data-bs-theme="light"] :is(.ao-toolbar, .ao-toolbar-row, .ao-actions-row, .page-header-actions, .ao-page)
    :is(.dxbl-dropdown-button, .dxbl-drop-down-button, .dxbl-split-button, .dxbl-split-btn, .dxbl-btn-group) .dxbl-btn + .dxbl-btn::before {
    display: none;
}

.ao-toolbar textarea,
.ao-toolbar .dxbl-memo textarea,
.ao-toolbar-row textarea,
.ao-toolbar-row .dxbl-memo textarea {
    resize: none;
}

.ao-toolbar :is(.form-label, .dxbl-text-edit-label),
.ao-toolbar-field :is(.form-label, .dxbl-text-edit-label) {
    font-size: var(--ao-toolbar-label-font-size);
    margin-bottom: 0;
}

.ao-card {
    background-color: var(--app-surface);
    border: 1px solid var(--card-border-color);
    border-radius: var(--bs-border-radius);
}

.ao-actions-row {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    --ao-btn-font-size: var(--ao-toolbar-font-size);
    --ao-btn-height: var(--ao-toolbar-control-height);
    --ao-btn-padding-y: var(--ao-toolbar-padding-y);
    --ao-btn-padding-x: var(--ao-toolbar-padding-x);
}

/* Ensure density-driven button sizing in app shell without impacting external layouts. */
.app-shell :is(.ao-btn, .ao-toolbar-btn, .ao-action-btn, .dxbl-btn) {
    font-size: var(--ao-btn-font-size) !important;
}

.app-shell :is(.ao-btn, .ao-toolbar-btn, .ao-action-btn) {
    padding: var(--ao-btn-padding-y) var(--ao-btn-padding-x) !important;
    min-height: var(--ao-btn-height);
}

/* AoActionButton sizing driven by density vars (DevExpress buttons do not reliably inherit font-size) */
.ao-btn,
.ao-btn .dxbl-btn {
    font-size: var(--ao-btn-font-size) !important;
    height: var(--ao-btn-height) !important;
    min-height: var(--ao-btn-height) !important;
    padding: var(--ao-btn-padding-y) var(--ao-btn-padding-x) !important;
    line-height: 1 !important;
}

.ao-btn :is(.dxbl-btn-content, .dxbl-btn-text) {
    font-size: inherit !important;
}

.ao-grid-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.ao-grid-actions--nowrap {
    flex-wrap: nowrap;
}

.ao-grid-actions > * {
    flex: 0 0 auto;
}

.ao-grid-actions .ao-action-btn {
    width: auto;
    min-width: 0;
}

.ao-action-btn {
    width: auto;
    white-space: nowrap;
}

.ao-grid-actions :is(.dxbl-btn, .btn, button) {
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

.ao-actions-inline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.ao-actions-inline :is(.dxbl-btn, .btn, button, .ao-action-btn) {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.ao-actions-inline-tight {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.ao-actions-inline-tight :is(.dxbl-btn, .btn, button, .ao-action-btn) {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

.ao-actions-row-start {
    justify-content: flex-start;
}

.ao-actions-row--end {
    justify-content: flex-end;
}

.ao-toolbar-field--take .dxbl-spin-edit {
    min-width: 0;
    width: 100%;
}

.ao-toolbar-field--take :is(.dxbl-text-editor, .dxbl-spin-edit, input) {
    min-width: 0;
}

.ao-details-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.ao-details-actions-row--nowrap {
    flex-wrap: nowrap;
}

.ao-details-actions-row--nowrap .ao-action-group {
    flex-wrap: nowrap;
}

.ao-details-actions-row .ao-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ao-details-actions-row .ao-danger-zone {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--card-border-color);
}

.ao-filter-search {
    width: 100%;
    max-width: 360px;
}

a,
button,
[role="button"],
.btn {
    cursor: pointer;
}

input,
textarea,
select,
[contenteditable="true"] {
    cursor: text;
}

/* Caret-browsing mitigation: hide synthetic caret on non-editable app surfaces. */
.app-shell,
.app-shell :where(.ao-page, .card, .card-body, .ao-panel, .dxbl-card, .dxbl-card-body, .tab-pane, .tab-content, .page-header, .page-header-subtitle, .page-header-title, .text-muted, p, span, div, dt, dd, li, h1, h2, h3, h4, h5, h6) {
    caret-color: transparent;
}

/* Keep normal caret behavior in real editors/inputs (including DevExpress editors). */
.app-shell :is(input, textarea, [contenteditable="true"], .dxbl-input, .dxbl-texteditor-input, .dxbl-spin-edit-input, .dxbl-memo-input, .dxbl-filter-row input, .dxbs-input, .dxbs-editor input, .dxbs-editor textarea) {
    caret-color: auto;
}

.dxbl-text,
.dxbs-text,
.dxbs-grid .dxbs-table > tbody > tr > td,
.dxbs-grid .dxbs-table > tbody > tr > th,
.dxbl-grid-table > tbody > tr > td,
.dxbl-grid-table > tbody > tr > th {
    cursor: default;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(15, 23, 42, 0.85), 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

.dx-checkbox-wrap {
    width: auto;
    max-width: none;
    overflow: visible;
}


/* Unified, restrained premium buttons (for non-AO legacy buttons only) */
.app-shell :is(.ao-actions-row .btn, .page-header-actions .btn, .ao-toolbar .btn, .ao-toolbar-row .btn):not(.ao-btn):not(.dxbl-btn):not(.btn-link):not(.dxbl-btn-link):not(.ao-grid-link):not(.page-link) {
    border-radius: 0.72rem !important;
    border-width: 1px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.app-shell :is(.ao-actions-row .btn, .page-header-actions .btn, .ao-toolbar .btn, .ao-toolbar-row .btn):not(.ao-btn):not(.dxbl-btn):not(.btn-link):not(.dxbl-btn-link):not(.ao-grid-link):not(.page-link):hover {
    transform: none;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.15);
}

.ao-page .card :is(.ao-actions-row, .page-header-actions) :is(.ao-btn-toolbar, .btn):hover {
    transform: none !important;
}

.app-shell :is(.ao-toolbar .btn-primary, .ao-actions-row .btn-primary, .page-header-actions .btn-primary):not(.ao-btn):not(.dxbl-btn) {
    background: var(--ao-btn-premium-bg) !important;
    color: var(--ao-btn-premium-text) !important;
    border-color: var(--ao-btn-premium-border) !important;
}

.app-shell :is(.ao-toolbar .btn-primary, .ao-actions-row .btn-primary, .page-header-actions .btn-primary):not(.ao-btn):not(.dxbl-btn):hover {
    background: var(--ao-btn-premium-bg-hover) !important;
}

.app-shell :is(.ao-toolbar .btn-secondary, .ao-toolbar .btn-outline-secondary, .ao-toolbar-row .btn-secondary, .ao-toolbar-row .btn-outline-secondary, .ao-actions-row .btn-secondary, .ao-actions-row .btn-outline-secondary, .page-header-actions .btn-secondary, .page-header-actions .btn-outline-secondary):not(.ao-btn):not(.dxbl-btn):not(.ao-btn--add):not(.ao-btn--refresh):not(.ao-btn--actions) {
    background: var(--ao-btn-muted-bg) !important;
    border-color: var(--ao-btn-muted-border) !important;
    color: color-mix(in srgb, var(--ao-text) 90%, transparent) !important;
}


.dx-checkbox-label {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.dxbs-grid .dxbs-table > tbody > tr:hover > td,
.dxbs-grid .dxbs-table > tbody > tr[aria-selected="true"] > td {
    background-color: var(--ao-grid-hover-bg) !important;
    color: var(--ao-grid-hover-fg) !important;
}

.dxbs-grid .dxbs-table > tbody > tr.dxbs-selected-row > td,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-focused-row > td,
.dxbs-grid .dxbs-table > tbody > tr[aria-selected="true"] > td {
    background-color: var(--ao-grid-selected-bg) !important;
    color: var(--ao-grid-selected-fg) !important;
}

.dxbs-grid .dxbs-table > tbody > tr.dxbs-selected-row:hover > td,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-focused-row:hover > td,
.dxbs-grid .dxbs-table > tbody > tr[aria-selected="true"]:hover > td {
    background-color: var(--ao-grid-selected-hover-bg) !important;
    color: var(--ao-grid-selected-hover-fg) !important;
}

.dxbs-grid .dxbs-table > tbody > tr:hover > td a,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-selected-row > td a,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-focused-row > td a,
.dxbs-grid .dxbs-table > tbody > tr[aria-selected="true"] > td a,
.dxbs-grid .dxbs-table > tbody > tr:hover > td .btn,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-selected-row > td .btn,
.dxbs-grid .dxbs-table > tbody > tr.dxbs-focused-row > td .btn,
.dxbs-grid .dxbs-table > tbody > tr[aria-selected="true"] > td .btn {
    color: inherit;
}

.dxbl-grid-table > tbody > tr:hover > td,
.dxbl-grid-table > tbody > tr[aria-selected="true"] > td {
    background-color: var(--ao-grid-hover-bg) !important;
    color: var(--ao-grid-hover-fg) !important;
}

.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td,
.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td,
.dxbl-grid-table > tbody > tr[aria-selected="true"] > td {
    background-color: var(--ao-grid-selected-bg) !important;
    color: var(--ao-grid-selected-fg) !important;
}

.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row:hover > td,
.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row:hover > td,
.dxbl-grid-table > tbody > tr[aria-selected="true"]:hover > td {
    background-color: var(--ao-grid-selected-hover-bg) !important;
    color: var(--ao-grid-selected-hover-fg) !important;
}

.dxbl-grid-table > tbody > tr:hover > td a,
.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td a,
.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td a,
.dxbl-grid-table > tbody > tr[aria-selected="true"] > td a,
.dxbl-grid-table > tbody > tr:hover > td .btn,
.dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td .btn,
.dxbl-grid-table > tbody > tr.dxbl-grid-focused-row > td .btn,
.dxbl-grid-table > tbody > tr[aria-selected="true"] > td .btn {
    color: inherit;
}

.dxbl-grid-table > thead > tr > th,
.dxbs-grid .dxbs-table > thead > tr > th {
    font-size: var(--ao-grid-header-font-size) !important;
    padding: var(--ao-grid-cell-padding-y) var(--ao-grid-cell-padding-x) !important;
    line-height: 1.25 !important;
}

.dxbl-grid,
.dxbs-grid {
    font-size: var(--ao-grid-font-size) !important;
}

.ao-grid :is(.dxbs-grid-content, .dxbs-table, table) {
    font-size: var(--ao-grid-font-size) !important;
}

.ao-grid :is(.dxbs-table thead th, thead th) {
    font-size: var(--ao-grid-header-font-size) !important;
}

.ao-grid :is(.dxbs-table td, tbody td) {
    padding: var(--ao-grid-cell-padding-y) var(--ao-grid-cell-padding-x) !important;
}

.ao-grid td a,
.ao-grid td .dxbl-link,
.ao-grid td .dxbs-link,
.ao-grid td .dxbl-btn-link,
.ao-grid td .dxbs-btn-link,
.ao-grid td .ao-grid-link {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.dxbl-grid-table .dxbl-btn-link,
.dxbl-grid-table .dxbl-btn-link * {
    font-size: inherit !important;
    line-height: inherit !important;
}

.dxbl-grid-table .dxbl-btn-link {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

.dxbl-grid-table > tbody > tr > td,
.dxbs-grid .dxbs-table > tbody > tr > td {
    padding: var(--ao-grid-cell-padding-y) var(--ao-grid-cell-padding-x) !important;
    font-size: var(--ao-grid-font-size) !important;
    line-height: 1.25 !important;
}

.dxbl-grid-table > tbody > tr > td,
.dxbs-grid .dxbs-table > tbody > tr > td,
.dxbl-grid-table > tbody > tr > td *,
.dxbs-grid .dxbs-table > tbody > tr > td * {
    cursor: default;
}

.dxbl-grid-table > tbody > tr > td a,
.dxbl-grid-table > tbody > tr > td button,
.dxbl-grid-table > tbody > tr > td [role="button"],
.dxbs-grid .dxbs-table > tbody > tr > td a,
.dxbs-grid .dxbs-table > tbody > tr > td button,
.dxbs-grid .dxbs-table > tbody > tr > td [role="button"] {
    cursor: pointer;
}

.dxbl-grid-table > tbody > tr > td input,
.dxbl-grid-table > tbody > tr > td textarea,
.dxbl-grid-table > tbody > tr > td select,
.dxbs-grid .dxbs-table > tbody > tr > td input,
.dxbs-grid .dxbs-table > tbody > tr > td textarea,
.dxbs-grid .dxbs-table > tbody > tr > td select {
    cursor: text;
}

/* Chrome interaction guardrails: avoid accidental caret artifacts in nav/action chrome */
.app-topbar button,
.app-topbar [role="button"],
.app-topbar .btn,
.app-user-dropdown,
.app-user-dropdown .dropdown-item,
.app-nav .nav-link,
.app-nav .nav-section-toggle,
.nav-tabs .nav-link,
.dxbl-dropdown .dxbl-dropdown-item,
.dxbs-dropdown .dropdown-item {
    user-select: none;
    -webkit-user-select: none;
}

.dxbs-grid .dxbs-filter-row input,
.dxbs-grid .dxbs-filter-row select,
.dxbs-grid .dxbs-filter-row textarea,
.dxbs-grid .dxbs-filter-row .dxbs-editor input,
.dxbs-grid .dxbs-filter-row .dxbs-editor select,
.dxbs-grid .dxbs-filter-row .dxbs-editor textarea,
.dxbl-grid .dxbl-grid-filter-row input,
.dxbl-grid .dxbl-grid-filter-row select,
.dxbl-grid .dxbl-grid-filter-row textarea {
    background-color: var(--ao-grid-filter-editor-bg) !important;
    border-color: var(--ao-grid-filter-editor-border) !important;
    color: var(--ao-grid-filter-editor-fg) !important;
}

@media (max-width: 767.98px) {
    .ao-page,
    .ao-page > .feature-gate,
    .grid-toolbar-card,
    .ao-panel,
    .ao-list-grid-card {
        min-width: 0;
    }

    .ao-page {
        gap: 0.75rem;
    }

    .ao-list-toolbar,
    .ao-list-toolbar__main,
    .ao-list-toolbar__aside {
        align-items: stretch;
    }

    .ao-list-toolbar__main,
    .ao-list-toolbar__aside {
        flex: 1 1 100%;
        width: 100%;
    }

    .ao-list-toolbar__aside {
        margin-left: 0;
        justify-content: space-between;
    }

    .ao-list-toolbar__search,
    .ao-list-toolbar__search .ao-toolbar-control {
        min-width: 0;
        width: 100%;
    }

    .dxbl-grid,
    .dxbs-grid,
    .ao-list-grid-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dxbl-grid .dxbl-grid-table,
    .dxbs-grid .dxbs-table,
    .ao-grid :is(.dxbs-table, .dxbl-grid-table, table) {
        min-width: 40rem;
    }

    .dxbl-grid-table > thead > tr > th,
    .dxbs-grid .dxbs-table > thead > tr > th,
    .dxbl-grid-table > tbody > tr > td,
    .dxbs-grid .dxbs-table > tbody > tr > td {
        white-space: nowrap;
    }
}

/* -------------------------------------------------------------------------- */
/* Bootstrap 5.1 dark mode shim                                               */
/* -------------------------------------------------------------------------- */
.ao-panel {
    background-color: var(--ao-surface-2, var(--ao-card-bg));
    border: 1px solid var(--ao-border);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] {
    --ao-input-bg: rgba(255, 255, 255, 0.04);
    --ao-input-bg-disabled: rgba(255, 255, 255, 0.02);
    --ao-surface-2: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control,
[data-bs-theme="dark"] input.form-control {
    background-color: var(--ao-input-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] textarea.form-control::placeholder,
[data-bs-theme="dark"] input.form-control::placeholder {
    color: color-mix(in srgb, var(--bs-body-color) 55%, transparent);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
    background-color: var(--ao-input-bg-disabled);
    color: color-mix(in srgb, var(--bs-body-color) 70%, transparent);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] textarea.form-control:focus,
[data-bs-theme="dark"] input.form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary) 35%, transparent);
}

[data-bs-theme="dark"] .form-check-input {
    background-color: var(--ao-input-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .form-check-input:checked,
[data-bs-theme="dark"] .form-check-input:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn:not([class*="btn-"]) {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-secondary {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-secondary:hover,
[data-bs-theme="dark"] .btn-secondary:focus {
    background-color: color-mix(in srgb, var(--ao-surface-2) 75%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 70%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-secondary:active {
    background-color: color-mix(in srgb, var(--ao-surface-2) 60%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-secondary:disabled,
[data-bs-theme="dark"] .btn-secondary.disabled {
    background-color: var(--ao-input-bg-disabled);
    border-color: var(--bs-border-color);
    color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: color-mix(in srgb, var(--bs-border-color) 70%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus {
    background-color: color-mix(in srgb, var(--ao-surface-2) 75%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-outline-secondary:active {
    background-color: color-mix(in srgb, var(--ao-surface-2) 60%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 50%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-outline-secondary:disabled,
[data-bs-theme="dark"] .btn-outline-secondary.disabled {
    border-color: var(--bs-border-color);
    color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
}

[data-bs-theme="dark"] .btn-light {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .btn-light:focus {
    background-color: color-mix(in srgb, var(--ao-surface-2) 75%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 70%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-light:active {
    background-color: color-mix(in srgb, var(--ao-surface-2) 60%, var(--bs-body-color));
    border-color: color-mix(in srgb, var(--bs-border-color) 60%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .btn-light:disabled,
[data-bs-theme="dark"] .btn-light.disabled {
    background-color: var(--ao-input-bg-disabled);
    border-color: var(--bs-border-color);
    color: color-mix(in srgb, var(--bs-body-color) 60%, transparent);
}

[data-bs-theme="dark"] .btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-danger:focus {
    background-color: color-mix(in srgb, var(--bs-danger) 85%, #000);
    border-color: color-mix(in srgb, var(--bs-danger) 85%, #000);
    color: #fff;
}

[data-bs-theme="dark"] .btn-danger:active {
    background-color: color-mix(in srgb, var(--bs-danger) 70%, #000);
    border-color: color-mix(in srgb, var(--bs-danger) 70%, #000);
    color: #fff;
}

[data-bs-theme="dark"] .btn-danger:disabled,
[data-bs-theme="dark"] .btn-danger.disabled {
    background-color: color-mix(in srgb, var(--bs-danger) 60%, #000);
    border-color: color-mix(in srgb, var(--bs-danger) 60%, #000);
    color: color-mix(in srgb, #fff 70%, transparent);
}

[data-bs-theme="dark"] .table {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: color-mix(in srgb, var(--ao-surface-2) 70%, var(--bs-body-bg));
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--ao-surface-2) 65%, var(--bs-body-color));
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .alert {
    background-color: var(--ao-surface-2);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .alert-info {
    background-color: color-mix(in srgb, var(--bs-info) 18%, var(--ao-surface-2));
    border-color: color-mix(in srgb, var(--bs-info) 40%, var(--bs-border-color));
    color: color-mix(in srgb, var(--bs-info) 70%, var(--bs-body-color));
}

[data-bs-theme="dark"] .alert-warning {
    background-color: color-mix(in srgb, var(--bs-warning) 18%, var(--ao-surface-2));
    border-color: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-border-color));
    color: color-mix(in srgb, var(--bs-warning) 80%, var(--bs-body-color));
}

[data-bs-theme="dark"] .alert-success {
    background-color: color-mix(in srgb, var(--bs-success) 18%, var(--ao-surface-2));
    border-color: color-mix(in srgb, var(--bs-success) 40%, var(--bs-border-color));
    color: color-mix(in srgb, var(--bs-success) 70%, var(--bs-body-color));
}

[data-bs-theme="dark"] .alert-danger {
    background-color: color-mix(in srgb, var(--bs-danger) 16%, var(--ao-surface-2));
    border-color: color-mix(in srgb, var(--bs-danger) 40%, var(--bs-border-color));
    color: color-mix(in srgb, var(--bs-danger) 70%, var(--bs-body-color));
}

.ao-w-xxs { max-width: 8rem; }
.ao-w-xs { max-width: 12rem; }
.ao-w-sm { max-width: 16rem; }
.ao-note-2l { min-height: 4.5rem; }

.ao-toolbar.ao-toolbar--split {
    display: flex;
    gap: var(--ao-toolbar-gap);
    align-items: flex-end;
    flex-wrap: wrap;
}

.ao-toolbar-left {
    display: flex;
    gap: var(--ao-toolbar-gap);
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1 1 auto;
}

.ao-toolbar-right {
    display: flex;
    gap: var(--ao-toolbar-gap);
    align-items: flex-end;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.ao-toolbar-field--inline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.ao-toolbar-field--inline .form-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.ao-toolbar-field--search-sm {
    width: min(18rem, 100%);
}

.ao-pager-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ao-pager-inline__text {
    font-size: 0.8rem;
    white-space: nowrap;
}

.ao-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ao-toolbar-gap);
    align-items: center;
    margin-bottom: .75rem;
}

.ao-picker-grid-scroll {
    max-height: 380px;
    overflow: auto;
}

.ao-picker-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
}

.ao-label-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.ao-label {
  width: 100mm;
  min-height: 150mm;
  border: 1px solid #000;
  padding: 6mm;
  display: grid;
  grid-template-columns: 1fr 35mm;
  gap: 5mm;
  align-items: start;
}

.ao-label__code { font-size: 22px; font-weight: 700; margin-bottom: 4mm; }
.ao-label__qr svg { width: 35mm; height: 35mm; }

@media print {
  .sidebar, .top-row, .navbar, .nav-scrollable, .ao-label-toolbar, .no-print { display: none !important; }
  .ao-print-layout { padding: 0 !important; }
  .ao-label {
    border: none;
    width: 100mm;
    min-height: 150mm;
    margin: 0;
    page-break-inside: avoid;
  }
  @page { size: 100mm 150mm; margin: 2mm; }
}

[data-bs-theme="dark"] .ao-attention-strip.ao-strip.ao-strip-accent-warning {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.84) 0%, rgba(15, 23, 42, 0.74) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(2, 6, 23, 0.44), 0 0 0 1px rgba(148, 163, 184, 0.16);
}

.batchdetails-preflight-status .ao-pill {
    margin-inline-start: 0.55rem !important;
}

[data-bs-theme="light"] .batchdetails-preflight-status .ao-pill-premium-warning,
:root:not([data-bs-theme="dark"]) .batchdetails-preflight-status .ao-pill-premium-warning {
    color: #78350f;
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(217, 119, 6, 0.46);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.14), 0 4px 10px rgba(217, 119, 6, 0.16);
}