html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--kendo-color-app-surface, #ffffff);
    color: var(--bs-body-color, var(--kendo-color-on-app-surface, #1f2937));
    overflow-x: hidden;
}

/* CSS Custom Properties for Layout Heights */
:root {
    --aa-navbar-height: 3.25rem;
    --aa-footer-height: 4rem;
    --aa-footer-height-mobile: 12rem;
    --aa-appbar-bg: var(--kendo-color-primary, #1f3a8a);
    --aa-appbar-link-color: var(--kendo-color-on-primary, var(--kendo-color-on-base, #ffffff));
}

/* App Shell - Full viewport container */
.aa-app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* TelerikRootComponent - Flex container for header/main/footer */
.k-rootcomponent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* Layout Header - Fixed navbar at top */
.aa-layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--aa-navbar-height);
    z-index: 1030;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Header menus are rendered inside the Telerik AppBar and must escape its box. */
.aa-layout-header .k-appbar {
    overflow: visible;
}

.aa-layout-header .dropdown-menu {
    z-index: 2147482000 !important;
}

/* Layout Main - Flexible content area with padding for fixed header/footer */
.aa-layout-main {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: var(--aa-navbar-height);
    padding-bottom: var(--aa-footer-height);
    min-height: 0;
}

.k-appbar,
.k-appbar.k-appbar-primary {
    color: var(--kendo-color-on-primary);
    background-color: var(--kendo-color-primary);
}

/* Invert Telerik tooltip surfaces against the active application theme. */
.k-tooltip {
    background-color: var(--kendo-color-on-app-surface, #1f2937);
    color: var(--kendo-color-app-surface, #ffffff);
}

.k-tooltip .k-callout {
    background-color: var(--kendo-color-on-app-surface, #1f2937);
    border-color: var(--kendo-color-on-app-surface, #1f2937);
}

html {
    /* stable (not both-edges) — gutter only on the right so layout doesn't shift */
    scrollbar-gutter: stable;
    height: 100%;
}

body {
    min-height: 100%;
    /* flex column so sticky-top navbar and sticky-bottom footer work correctly */
    display: flex;
    flex-direction: column;
    /* Keep native page scrolling enabled across all breakpoints */
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

body.aa-modal-scroll-lock,
body.aa-modal-scroll-lock .aa-layout-main {
    overflow: hidden !important;
    overscroll-behavior: contain;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--kendo-color-on-surface, #1f2937) 40%, transparent);
    border-radius: 999px;
}

body[data-bs-theme='dark'] {
    scrollbar-color: color-mix(in srgb, var(--kendo-color-on-surface, #f3f4f6) 60%, transparent) transparent;
}

body[data-bs-theme='light'] {
    scrollbar-color: color-mix(in srgb, var(--kendo-color-on-surface, #1f2937) 45%, transparent) transparent;
}

html::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: url('/Images/action-ambulance.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: min(38vw, 360px);
    opacity: 0.045;
}

html[data-bs-theme='dark'],
body[data-bs-theme='dark'] {
    color-scheme: dark;
}

html[data-bs-theme='light'],
body[data-bs-theme='light'] {
    color-scheme: light;
}

body[data-bs-theme='light'] {
    --bs-body-bg: var(--kendo-color-app-surface, #ffffff);
    --bs-body-color: var(--kendo-color-on-app-surface, #1f2937);
    --bs-border-color: var(--kendo-color-border, #d1d5db);
    --bs-secondary-bg: var(--kendo-color-surface, #f8fafc);
    --bs-tertiary-bg: var(--kendo-color-surface-alt, #eef2f7);
}

body[data-bs-theme='dark'] {
    --bs-body-bg: var(--kendo-color-dark-subtle, #1f2937);
    --bs-body-color: var(--kendo-color-on-dark, #ffffff);
    --bs-border-color: var(--kendo-color-border, #4b5563);
    --bs-secondary-bg: var(--kendo-color-dark, #111827);
    --bs-tertiary-bg: var(--kendo-color-dark-subtle, #1f2937);
    --aa-text-strong: var(--kendo-color-on-surface, var(--kendo-color-on-app-surface, #f3f4f6));
    --aa-text-muted: color-mix(in srgb, var(--aa-text-strong) 84%, transparent);
}

body[data-bs-theme='dark'] main,
body[data-bs-theme='dark'] main .k-card,
body[data-bs-theme='dark'] main .k-window-content {
    color: var(--aa-text-strong);
}

body[data-bs-theme='dark'] :is(h1, h2, h3, h4, h5, h6, .k-h1, .k-h2, .k-h3, .k-h4, .k-h5, .k-h6) {
    color: var(--aa-text-strong);
}

html[data-bs-theme='dark'] :is(.k-text-secondary, .text-muted, .text-body-secondary, .aa-page-header-subtitle, .k-form-hint, .form-text),
body[data-bs-theme='dark'] :is(.k-text-secondary, .text-muted, .text-body-secondary, .aa-page-header-subtitle, .k-form-hint, .form-text),
html[data-aa-theme-mode='dark'] :is(.k-text-secondary, .text-muted, .text-body-secondary, .aa-page-header-subtitle, .k-form-hint, .form-text),
body[data-aa-theme-mode='dark'] :is(.k-text-secondary, .text-muted, .text-body-secondary, .aa-page-header-subtitle, .k-form-hint, .form-text) {
    color: var(--aa-text-muted) !important;
}

html[data-bs-theme='dark'] :is(.k-form-label, .k-label),
body[data-bs-theme='dark'] :is(.k-form-label, .k-label),
html[data-aa-theme-mode='dark'] :is(.k-form-label, .k-label),
body[data-aa-theme-mode='dark'] :is(.k-form-label, .k-label) {
    color: var(--aa-text-strong) !important;
}

html[data-bs-theme='dark'] .aa-theme-surface :is(.k-text-secondary, p, .aa-page-header-subtitle),
body[data-bs-theme='dark'] .aa-theme-surface :is(.k-text-secondary, p, .aa-page-header-subtitle),
html[data-aa-theme-mode='dark'] .aa-theme-surface :is(.k-text-secondary, p, .aa-page-header-subtitle),
body[data-aa-theme-mode='dark'] .aa-theme-surface :is(.k-text-secondary, p, .aa-page-header-subtitle) {
    color: var(--aa-text-muted) !important;
}

body[data-bs-theme='dark'] :is(textarea, .k-textarea textarea, .k-textarea .k-input-inner, input, .k-input-inner) {
    color: var(--aa-text-strong);
    -webkit-text-fill-color: var(--aa-text-strong);
}

body[data-bs-theme='dark'] :is(textarea, .k-input-inner)::placeholder {
    color: color-mix(in srgb, var(--aa-text-strong) 60%, transparent);
}

/* Keep document scroll available by default; avoid global lock from hidden modal overlay nodes. */
body:has(.k-overlay[style*="display: block"]),
body:has(.k-overlay[style*="display:block"]),
body:has(.aa-modal-window.k-window:not([style*="display: none"])) {
    overflow: hidden;
}

/* Keep Telerik dialog wrapper below notifications so error messages remain visible. */
.k-dialog-wrapper {
    z-index: 1003 !important;
}

/* Ensure app toasts are visible above modal windows and overlays. */
.k-notification-container,
.k-notification-group,
.k-animation-container:has(.k-notification),
.k-animation-container-sm:has(.k-notification),
.k-animation-container,
.k-animation-container-sm {
    z-index: 2147483000 !important;
}

.aa-app-shell .k-notification-container,
.aa-app-shell .k-notification-group {
    position: fixed !important;
}

.aa-app-shell .k-notification-group {
    max-width: min(44rem, calc(100vw - 1.5rem));
}

.aa-app-shell .k-notification {
    max-height: min(40vh, 14rem);
    align-items: flex-start;
}

.aa-app-shell .k-notification-content {
    max-height: calc(min(40vh, 14rem) - 1.75rem);
    overflow-y: auto;
    white-space: normal;
}

.k-window .k-window-content {
    max-height: min(82dvh, 82vh, 900px);
    overflow-y: auto;
}

.k-popup-edit-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(90dvh, 90vh);
}

.k-popup-edit-form .k-form-layout,
.k-popup-edit-form .k-grid-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.k-popup-edit-form :is(.k-form-buttons, .k-actions) {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--kendo-color-surface, var(--bs-body-bg, #fff));
    border-top: 1px solid var(--kendo-color-border, #1e1e3a);
    padding-top: 13px;
}


.aa-modal-window {
    max-width: calc(100vw - 1rem);
}

.aa-modal-window .k-window-content {
    padding: 0;
    max-height: min(90dvh, 90vh);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* User Management Wizard Modals (New User, Edit User, View User) */
.aa-user-wizard-window,
.aa-new-user-window,
.aa-edit-user-window,
.aa-view-user-window {
    max-height: min(92dvh, 92vh, 850px);
}

.aa-user-wizard-window .k-window-content,
.aa-new-user-window .k-window-content,
.aa-edit-user-window .k-window-content,
.aa-view-user-window .k-window-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: min(85dvh, 85vh, 780px);
    overflow: hidden;
}

.aa-new-user-wizard-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.aa-new-user-wizard-container .k-wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.aa-new-user-wizard-container .k-wizard-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

.aa-new-user-wizard-container .k-wizard-buttons,
.aa-new-user-wizard-container .k-wizard-actions {
    flex: 0 0 auto;
    border-top: 1px solid var(--kendo-color-border, #d1d5db);
    padding: 1rem;
    background: var(--kendo-color-surface, var(--bs-body-bg, #ffffff));
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.aa-modal-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(90dvh, 90vh);
}

.aa-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.aa-modal-body--compact {
    padding: 0.75rem;
}

.aa-modal-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--kendo-color-border, #d1d5db);
    background: var(--kendo-color-surface, var(--bs-body-bg, #ffffff));
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.aa-modal-footer--split {
    justify-content: space-between;
    align-items: center;
}

.aa-responsive-grid-shell {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.aa-responsive-grid-shell:focus-visible {
    outline: 2px solid var(--kendo-color-primary, #0d6efd);
    outline-offset: 2px;
}

.aa-theme-surface {
    color: var(--kendo-color-on-surface, var(--kendo-color-text, #1f2937));
}

.aa-theme-surface :is(h1, h2, h3, h4, h5, h6, .k-h1, .k-h2, .k-h3, .k-h4, .k-h5, .k-h6) {
    color: var(--kendo-color-on-surface, var(--kendo-color-text, #1f2937));
}

.aa-theme-surface :is(.k-text-secondary, p, .aa-page-header-subtitle) {
    color: color-mix(in srgb, var(--kendo-color-on-surface, #1f2937) 86%, transparent);
}

.aa-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

#MainViewport {
    margin-bottom: 60px;
    background-color: var(--kendo-color-app-surface, #ffffff);
    min-width: 0;
}

.content {
    padding-top: 1.1rem;
}

.aa-api-health-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.aa-api-health-dot-ok {
    background-color: var(--kendo-color-success, #22c55e);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kendo-color-on-surface, #1f2937) 20%, transparent), 0 0 9px color-mix(in srgb, var(--kendo-color-success, #22c55e) 72%, transparent);
}

.aa-api-health-dot-down {
    background-color: var(--kendo-color-error, #ef4444);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--kendo-color-on-surface, #1f2937) 20%, transparent), 0 0 9px color-mix(in srgb, var(--kendo-color-error, #ef4444) 68%, transparent);
}

.k-loader,
.k-loader-canvas {
    position: relative;
}

.k-loader::after,
.k-loader-canvas::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background-image: url('/Images/action-ambulance.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;
    opacity: 0.28;
    animation: aa-light-pulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aa-light-pulse {
    0%,
    100% {
        filter: brightness(0.75);
        opacity: 0.18;
    }

    50% {
        filter: brightness(1.35);
        opacity: 0.44;
    }
}

/* ============================================================
   Logo spinner animation for full-screen loading / form submission
   ============================================================ */
@keyframes spin-logo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--kendo-color-success, #26b050);
}

.invalid {
    outline: 1px solid var(--kendo-color-error, #e50000);
}

.validation-message {
    color: var(--kendo-color-error, #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.";
}

#blazor-error-ui {
    display: none;
    margin: 6px;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    background-color: var(--kendo-color-error, crimson);
    color: var(--kendo-color-on-error, #ffffff);
    z-index: 2147483647 !important;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
}

.aa-admin-company-selector-shell {
    width: min(100%, 20rem);
    min-width: 14rem;
    margin: 6px 0;
}

.aa-admin-company-selector-shell .k-picker,
.aa-admin-company-selector-shell .k-input,
.aa-admin-company-selector-shell .k-dropdownlist,
.aa-admin-company-selector-shell .k-combobox {
    width: 100%;
}

/* Outline pickers inherit --kendo-color-on-base (#FFFFFF in this palette) from the
   Telerik theme, but render on a white surface, so selected text is invisible.
   Hover has the same problem via --kendo-color-base-subtle. */
.k-picker.k-picker-outline,
.k-picker.k-picker-outline .k-input-inner,
.k-picker.k-picker-outline .k-input-value-text,
.k-picker.k-picker-outline:hover,
.k-picker.k-picker-outline.k-hover,
.k-picker.k-picker-outline:hover .k-input-inner,
.k-picker.k-picker-outline.k-hover .k-input-inner,
.k-picker.k-picker-outline:focus-within .k-input-inner,
.k-picker.k-picker-outline.k-focus .k-input-inner {
    color: var(--kendo-color-on-app-surface);
}

.k-picker.k-picker-outline .k-input-inner::placeholder {
    color: var(--kendo-color-subtle);
}