:root {
    /* Primary - Deep industrial blue */
    --bm-primary: #1e3a8a;
    --bm-primary-light: #3b82f6;
    --bm-primary-dark: #1e293b;

    /* Secondary - Safety orange */
    --bm-secondary: #f97316;
    --bm-secondary-light: #fb923c;
    --bm-secondary-dark: #ea580c;

    /* Success - Forest green */
    --bm-success: #059669;
    --bm-success-light: #10b981;
    --bm-success-dark: #047857;

    /* Warning - Amber */
    --bm-warning: #f59e0b;
    --bm-warning-light: #fbbf24;
    --bm-warning-dark: #d97706;

    /* Danger - Red */
    --bm-danger: #dc2626;
    --bm-danger-light: #ef4444;
    --bm-danger-dark: #b91c1c;

    /* Info - Primary light */
    --bm-info: #3b82f6;
    --bm-info-dark: #2563eb;

    /* Neutral - Grey */
    --bm-neutral: #6b7280;
    --bm-neutral-light: #9ca3af;
    --bm-neutral-dark: #4b5563;

    /* Spacing scale */
    --bm-space-1: 0.25rem;
    --bm-space-2: 0.5rem;
    --bm-space-3: 0.75rem;
    --bm-space-4: 1rem;
    --bm-space-5: 1.5rem;
    --bm-space-6: 2rem;
    --bm-space-7: 3rem;
    --bm-space-8: 4rem;

    /* Radius, shadow, border */
    --bm-radius-sm: 4px;
    --bm-radius-md: 8px;
    --bm-radius-lg: 12px;
    --bm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --bm-shadow-md: 0 2px 8px rgba(15, 23, 42, 0.10);
    --bm-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.16);

    /* Surfaces and borders */
    --bm-surface: #ffffff;
    --bm-surface-raised: #f8fafc;
    --bm-surface-sunken: #f1f5f9;
    --bm-border: #e2e8f0;
    --bm-border-strong: #cbd5e1;

    /* Text */
    --bm-text: #1e293b;
    --bm-text-muted: #64748b;
    --bm-text-inverse: #ffffff;

    /* Layout */
    --bm-sidebar-width: 260px;
    --bm-sidebar-rail: 68px;
    --bm-appbar-height: 3.5rem;
    --bm-content-max: 1600px;

    /* Z-index scale */
    --bm-z-appbar: 1020;
    --bm-z-drawer: 1040;
    --bm-z-backdrop: 1035;
    --bm-z-modal: 1055;
    --bm-z-toast: 1080;

    /* Background */
    --bm-bg-default: #f1f5f9;
    --bm-bg-paper: #ffffff;

    /* Overlay backdrops. The drawer and the access-denied overlay were never the same
       shade before consolidation (0.4 and 0.7 respectively), so each keeps its own token
       rather than being flattened onto one value and changing either surface's look. */
    --bm-backdrop-color: rgba(15, 23, 42, 0.4);
    --bm-backdrop-color-strong: rgba(15, 23, 42, 0.7);

    /* Font */
    --bm-font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;

    /* Override Bootstrap's font variables */
    --bs-font-sans-serif: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --bs-body-font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --bs-body-font-weight: 500;
    --bs-body-bg: var(--bm-surface-sunken);

    /* Override Bootstrap's border, color, and card variables */
    --bs-border-color: var(--bm-border);
    --bs-border-radius: var(--bm-radius-sm);
    --bs-border-radius-lg: var(--bm-radius-md);
    --bs-body-color: var(--bm-text);
    --bs-secondary-color: var(--bm-text-muted);
    --bs-card-bg: var(--bm-surface);
    --bs-primary: var(--bm-primary);
    --bs-danger: var(--bm-danger);
    --bs-success: var(--bm-success);
    --bs-warning: var(--bm-warning);
    --bs-info: var(--bm-info);
}

/* Base font */
html, body {
    font-family: var(--bm-font-family);
    font-weight: 500;
    background-color: var(--bm-surface-sunken);
}

/* Links */
a, .btn-link {
    color: var(--bm-primary);
}

a:hover, .btn-link:hover {
    color: var(--bm-primary-dark);
}

/* All buttons - heavier font weight */
.btn {
    font-weight: 500;
}

/* Primary button */
.btn-primary {
    color: #fff;
    background-color: var(--bm-primary);
    border-color: var(--bm-primary);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--bm-primary-dark);
    border-color: var(--bm-primary-dark);
}

.btn-primary:focus {
    background-color: var(--bm-primary);
    border-color: var(--bm-primary);
}

/* Secondary button */
.btn-secondary {
    color: #fff;
    background-color: var(--bm-secondary);
    border-color: var(--bm-secondary);
}

.btn-secondary:hover, .btn-secondary:active {
    background-color: var(--bm-secondary-dark);
    border-color: var(--bm-secondary-dark);
}

/* Success button */
.btn-success {
    color: #fff;
    background-color: var(--bm-success);
    border-color: var(--bm-success);
}

.btn-success:hover, .btn-success:active {
    background-color: var(--bm-success-dark);
    border-color: var(--bm-success-dark);
}

/* Warning button */
.btn-warning {
    color: #fff;
    background-color: var(--bm-warning);
    border-color: var(--bm-warning);
}

.btn-warning:hover, .btn-warning:active {
    background-color: var(--bm-warning-dark);
    border-color: var(--bm-warning-dark);
}

/* Danger button */
.btn-danger {
    color: #fff;
    background-color: var(--bm-danger);
    border-color: var(--bm-danger);
}

.btn-danger:hover, .btn-danger:active {
    background-color: var(--bm-danger-dark);
    border-color: var(--bm-danger-dark);
}

/* Info button */
.btn-info {
    color: #fff;
    background-color: var(--bm-info);
    border-color: var(--bm-info);
}

.btn-info:hover, .btn-info:active {
    background-color: var(--bm-info-dark);
    border-color: var(--bm-info-dark);
}

/* Outline buttons */
.btn-outline-primary {
    color: var(--bm-primary);
    border-color: var(--bm-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #fff;
    background-color: var(--bm-primary);
    border-color: var(--bm-primary);
}

.btn-outline-secondary {
    color: var(--bm-secondary);
    border-color: var(--bm-secondary);
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
    color: #fff;
    background-color: var(--bm-secondary);
    border-color: var(--bm-secondary);
}

.btn-outline-success {
    color: var(--bm-success);
    border-color: var(--bm-success);
}

.btn-outline-success:hover, .btn-outline-success:active {
    color: #fff;
    background-color: var(--bm-success);
    border-color: var(--bm-success);
}

.btn-outline-warning {
    color: var(--bm-warning);
    border-color: var(--bm-warning);
}

.btn-outline-warning:hover, .btn-outline-warning:active {
    color: #fff;
    background-color: var(--bm-warning);
    border-color: var(--bm-warning);
}

.btn-outline-danger {
    color: var(--bm-danger);
    border-color: var(--bm-danger);
}

.btn-outline-danger:hover, .btn-outline-danger:active {
    color: #fff;
    background-color: var(--bm-danger);
    border-color: var(--bm-danger);
}

.btn-outline-info {
    color: var(--bm-info);
    border-color: var(--bm-info);
}

.btn-outline-info:hover, .btn-outline-info:active {
    color: #fff;
    background-color: var(--bm-info);
    border-color: var(--bm-info);
}

/* Focus states */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--bm-primary-light);
}

/* Text color utilities */
.text-primary {
    color: var(--bm-primary) !important;
}

.text-secondary {
    color: var(--bm-secondary) !important;
}

.text-success {
    color: var(--bm-success) !important;
}

.text-warning {
    color: var(--bm-warning) !important;
}

.text-danger {
    color: var(--bm-danger) !important;
}

.text-info {
    color: var(--bm-info) !important;
}

/* Background utilities */
.bg-primary {
    background-color: var(--bm-primary) !important;
}

.bg-secondary {
    background-color: var(--bm-secondary) !important;
}

.bg-success {
    background-color: var(--bm-success) !important;
}

.bg-warning {
    background-color: var(--bm-warning) !important;
}

.bg-danger {
    background-color: var(--bm-danger) !important;
}

.bg-info {
    background-color: var(--bm-info) !important;
}

.bg-neutral {
    background-color: var(--bm-neutral) !important;
}

/* Border utilities */
.border-primary {
    border-color: var(--bm-primary) !important;
}

.border-secondary {
    border-color: var(--bm-secondary) !important;
}

.border-success {
    border-color: var(--bm-success) !important;
}

.border-warning {
    border-color: var(--bm-warning) !important;
}

.border-danger {
    border-color: var(--bm-danger) !important;
}

.border-info {
    border-color: var(--bm-info) !important;
}

/* Alerts */
.alert-primary {
    color: var(--bm-primary-dark);
    background-color: #dbeafe;
    border-color: #bfdbfe;
}

.alert-secondary {
    color: var(--bm-secondary-dark);
    background-color: #ffedd5;
    border-color: #fed7aa;
}

.alert-success {
    color: var(--bm-success-dark);
    background-color: #d1fae5;
    border-color: #a7f3d0;
}

.alert-warning {
    color: var(--bm-warning-dark);
    background-color: #fef3c7;
    border-color: #fde68a;
}

.alert-danger {
    color: var(--bm-danger-dark);
    background-color: #fee2e2;
    border-color: #fecaca;
}

.alert-info {
    color: var(--bm-info-dark);
    background-color: #dbeafe;
    border-color: #bfdbfe;
}

h1:focus:not(:focus-visible) {
    outline: none;
}

/* Bootstrap's visually-hidden-focusable drops the link into normal document flow on
   focus (position: static, normal display), which would push the whole shell down and
   add a scrollbar. Position it instead so focusing it never shifts layout. */
.bm-skip-link:focus {
    position: fixed;
    top: var(--bm-space-2);
    left: var(--bm-space-2);
    z-index: calc(var(--bm-z-appbar) + 1);
    padding: var(--bm-space-2) var(--bm-space-3);
    background: var(--bm-primary);
    color: var(--bm-text-inverse);
    border-radius: var(--bm-radius-sm);
    box-shadow: var(--bm-shadow-md);
}

/* One visible focus treatment for every interactive element. Keyboard users get a ring;
   pointer users do not, via :focus-visible. The tabindex clause excludes tabindex="-1"
   containers (the mobile drawer, dialog panels, and the skip link's #bm-main target) that are
   focused programmatically rather than reached by Tab, so opening or jumping to one from the
   keyboard does not paint a ring around the whole container - .sidenav, .bm-dialog, and
   #bm-main each carry their own unconditional outline: none for that reason (.sidenav in
   SideNav.razor.css, .bm-dialog in DialogHost.razor.css, #bm-main in MainLayout.razor.css).
   h1 is included because FocusOnNavigate gives it tabindex="-1" before focusing it, which
   would otherwise exclude it from this rule and leave it showing the browser default ring
   instead of the branded one. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
h1:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--bm-primary-light);
    outline-offset: 2px;
    border-radius: var(--bm-radius-sm);
}

/* .btn/.form-control/.form-select/.form-check-input already carry a branded box-shadow ring
   (above). Without this, a focused instance would show that ring AND the outline above at once. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Bootstrap's own accommodation slows spinners to 1.5s rather than stopping them, so
       they still communicate activity; the blanket rule above would otherwise freeze them
       into a static arc. Same treatment for the appbar's route-change progress strip. */
    .spinner-border,
    .spinner-grow,
    .appbar-progress {
        animation-duration: 1.5s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--bm-success);
}

.invalid {
    outline: 1px solid var(--bm-danger);
}

.validation-message {
    color: var(--bm-danger);
}

/* Displays typed text in uppercase for code fields. The field keeps what was typed and the page
   uppercases it where it is used, because rewriting the input from the server overwrites any
   keys pressed while that write is in flight. */
.bm-input-uppercase {
    text-transform: uppercase;
}

.bm-input-uppercase::placeholder {
    text-transform: none;
}

/* Badges - lighter font weight */
.badge {
    font-weight: 400;
}

/* Outline purple - for timezone buttons on outline-style pages */
.btn-outline-purple {
    color: #A14DBD;
    border-color: #A14DBD;
    background-color: transparent;
}
.btn-outline-purple:hover {
    color: #fff;
    background-color: #A14DBD;
    border-color: #A14DBD;
}

/* Clickable table rows */
tr.clickable-row {
    cursor: pointer;
}
tr.clickable-row:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Spin animation for refresh icons */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Skeleton loading placeholders */
.bm-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--bm-border) 25%, var(--bm-surface-raised) 50%, var(--bm-border) 75%);
    background-size: 200% 100%;
    animation: bm-skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--bm-radius-sm);
}

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

.bm-skeleton-text > .bm-skeleton + .bm-skeleton {
    margin-top: var(--bm-space-2);
}

.bm-skeleton-row {
    display: grid;
    gap: var(--bm-space-2) var(--bm-space-3);
    margin-bottom: var(--bm-space-2);
}

/* DataTable column priority - a column is hidden below its breakpoint and its
   detail entry is shown only below that same breakpoint. Xl's breakpoint is
   1400px rather than the sidebar's own 1200px rail/expanded threshold, so its
   columns never reveal at the exact width where the expanded sidebar has just
   eaten the content area (see MainLayout.razor, spec 3.2). */
@media (max-width: 767.98px) {
    .bm-dt-md { display: none; }
}
@media (max-width: 991.98px) {
    .bm-dt-lg { display: none; }
}
@media (max-width: 1399.98px) {
    .bm-dt-xl { display: none; }
}
@media (min-width: 768px) {
    .bm-dt-detail-md { display: none; }
}
@media (min-width: 992px) {
    .bm-dt-detail-lg { display: none; }
}
@media (min-width: 1400px) {
    .bm-dt-detail-xl { display: none; }
}
@media (min-width: 768px) {
    .bm-dt-chevron-md { display: none; }
}
@media (min-width: 992px) {
    .bm-dt-chevron-lg { display: none; }
}
@media (min-width: 1400px) {
    .bm-dt-chevron-xl { display: none; }
}

.bm-dt {
    max-width: 100%;
}

.bm-dt-table thead th {
    position: sticky;
    top: var(--bm-appbar-height);
    background-color: var(--bm-surface);
    z-index: 1;
}

/* Opt-in horizontal scroll for hosts too narrow for the table's min-content width. Without
   it the table paints outside its container, and .bm-section's rounded border does not clip,
   so header text and row rules run past the card edge. */
.bm-dt-scroll {
    overflow-x: auto;
}

/* The scroll container becomes the nearest scrollport, so a sticky header now resolves
   against it rather than the viewport. The table's height is unconstrained and never scrolls
   vertically, leaving the header permanently unstuck - pin it normally instead. */
.bm-dt-scroll .bm-dt-table thead th {
    position: static;
}

.bm-dt-chevron-col {
    width: 2.5rem;
}

.bm-dt-chevron-btn {
    padding: 0;
    color: var(--bm-text-muted);
}

.bm-dt-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--bm-space-1) var(--bm-space-4);
    margin: 0;
}

.bm-dt-detail-list > div {
    display: contents;
}

.bm-dt-detail-list dt {
    font-weight: 600;
    color: var(--bm-text-muted);
}

.bm-dt-detail-list dd {
    margin: 0;
}

.bm-dt-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bm-space-2) 0;
}

.consol-people-search {
    max-width: 28rem;
}

.consol-narrow {
    max-width: 32rem;
}

.consol-person-form {
    max-width: 48rem;
}