html, body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.page-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    flex-wrap: nowrap;
}

.page-heading-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.page-heading-logo {
    display: block;
}

.page-heading-logo-full {
    width: auto;
    height: 45px;
    max-width: none;
}

.page-heading-logo-compact {
    display: none;
    height: 40px;
}

.page-heading-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-heading-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.page-heading-subtitle {
    display: block;
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.7;
}

@media (max-width: 599.98px) {
    .page-heading-logo-full {
        display: none;
    }

    .page-heading-logo-compact {
        display: block;
    }
}


/* ─── Floating Drawer Layout ──────────────────────────────────────────────
   Converts the app from a fixed-position shell to a sticky/grid layout.
   Both drawers float (position: sticky) alongside the main content as the
   page scrolls, remaining visible without being viewport-fixed.
   Note: !important is used throughout to override MudBlazor's own specificity.
   ─────────────────────────────────────────────────────────────────────── */

/* 1. CSS Grid on MudLayout: appbar spans full width; drawers sit in their
      own columns beside the main content area */
.app-layout {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-layout > .layout-drawer,
.app-layout > .mud-main-content {
    min-height: 0;
}

.app-layout > .layout-drawer > .mud-drawer-content {
    min-height: 0;
}

/* 2. App bar: sticky at the top, spanning all three columns */
.app-layout > .mud-appbar {
    grid-row: 1;
    grid-column: 1 / -1;
    position: sticky !important;
    top: 0;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    /* Neutralise MudBlazor's right-drawer margin that shrinks the AppBar */
    margin-right: 0 !important;
}

/* 3. Left persistent drawer: sticky in the first column, scrolls with the page */
.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent {
    grid-row: 2;
    grid-column: 1;
    position: sticky !important;
    top: var(--mud-appbar-height);
    left: auto !important;
    height: calc(100vh - var(--mud-appbar-height)) !important;
    height: calc(100dvh - var(--mud-appbar-height)) !important;
    max-height: calc(100vh - var(--mud-appbar-height)) !important;
    max-height: calc(100dvh - var(--mud-appbar-height)) !important;
    overflow: hidden;
    align-self: start;
    transition: width 225ms cubic-bezier(0, 0, 0.2, 1);
}

.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent > .mud-drawer-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent > .mud-drawer-content .mud-navmenu {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
}

/* Collapse the persistent drawer column when closed */
.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent.mud-drawer--closed {
    width: 0 !important;
    overflow: hidden !important;
}

/* ─── Desktop mini (icon-only) sidebar ─────────────────────────────────────
   When the user collapses the nav drawer on a large screen, the drawer shrinks
   to a 56 px icon-only strip instead of hiding completely.  Hovering over a
   group icon shows only that group's items as a small popout panel. Hovering
   over a standalone top-level item shows just its name as a label. Both are
   clickable. Keyboard focus (:has(:focus-visible)) still expands the full menu.
   ─────────────────────────────────────────────────────────────────────────── */

/* Contain Leaflet's internal z-index stacking (tile: 200, overlay: 400, shadow: 500,
   marker: 600, tooltip: 650, popup: 700) within the map container so they do not
   compete at the page level against UI elements like the nav-mini popout panels. */
.leaflet-container {
    isolation: isolate;
}

.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent.nav-mini {
    width: 56px !important;
    overflow: visible !important; /* allow popouts to overflow the 56 px strip */
    z-index: 200;
}

/* Inner content: 56 px wide with overflow visible so group popouts
   and item-name labels can render outside the strip boundary */
.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent.nav-mini > .mud-drawer-content {
    width: 56px !important;
    overflow: visible !important;
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms !important;
}

/* Keyboard focus: expand to full menu width for accessibility */
.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-persistent.nav-mini:has(:focus-visible) > .mud-drawer-content {
    width: 240px !important;
    overflow-y: auto !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25) !important;
    background: var(--mud-palette-drawer-background) !important;
}

/* Mini mode — hide text labels, search field, group expand chevron, and
   drawer header (tenant selector) in icon-only strip; restore all when
   keyboard-focused so the full menu is readable */
.nav-mini:not(:has(:focus-visible)) .nav-link-label,
.nav-mini:not(:has(:focus-visible)) .mud-nav-link-expand-icon,
.nav-mini:not(:has(:focus-visible)) .nav-menu-search,
.nav-mini:not(:has(:focus-visible)) .mud-drawer-header {
    display: none !important;
}

.nav-menu-icon {
    flex-shrink: 0;
    margin-right: 0.25rem;
    padding-right: 2px;
    font-size: 1.25rem;
    line-height: 1;
}

.nav-menu-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mud-nav-link-text
{
    display: flex;
}

/* Mini mode — keep the text container visible but centre its icon content */
.nav-mini:not(:has(:focus-visible)) .mud-nav-link-text {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

/* Mini mode — centre icons inside nav-link buttons and group toggles */
.nav-mini:not(:has(:focus-visible)) .mud-nav-link,
.nav-mini:not(:has(:focus-visible)) .mud-nav-group-toggle {
    justify-content: center !important;
    padding: 8px 0 !important;
}

/* Mini mode — collapse nav-group children so only the group icon is shown */
.nav-mini:not(:has(:focus-visible)) .mud-collapse-container {
    display: none !important;
}

/* ─── Mini mode: group popout panel ─────────────────────────────────────────
   Hovering a group's icon reveals only that group's items as a floating panel
   anchored to the right of the 56 px icon strip. The panel stays open while
   the mouse is anywhere over the group (icon or panel), so users can click.
   ─────────────────────────────────────────────────────────────────────────── */

/* Make each nav-group a positioning context for its popout */
.nav-mini:not(:has(:focus-visible)) .mud-nav-group {
    position: relative;
}

/* Popout panel: positioned to the right of the 56 px strip */
.nav-mini:not(:has(:focus-visible)) .mud-nav-group:hover > .mud-collapse-container {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    left: 56px !important;
    top: 0 !important;
    min-width: 250px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: var(--mud-palette-drawer-background) !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25) !important;
    z-index: 300 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 4px 0 !important;
}

/* Inside the popout: restore normal label and link layout */
.nav-mini:not(:has(:focus-visible)) .mud-nav-group:hover > .mud-collapse-container .nav-link-label {
    display: inline !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    white-space: normal !important;
    pointer-events: auto !important;
}

.nav-mini:not(:has(:focus-visible)) .mud-nav-group:hover > .mud-collapse-container .mud-nav-link-text {
    justify-content: flex-start !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
}

.nav-mini:not(:has(:focus-visible)) .mud-nav-group:hover > .mud-collapse-container .mud-nav-link {
    justify-content: flex-start !important;
    padding: 0 16px !important;
}

/* Group name header shown at the top of the popout (hidden in full menu) */
.mini-nav-group-header {
    display: none;
}

.nav-mini:not(:has(:focus-visible)) .mud-nav-group:hover .mini-nav-group-header {
    display: block !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 8px 16px 4px !important;
    opacity: 0.65 !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
}

/* ─── Mini mode: top-level item name label ──────────────────────────────────
   Hovering a standalone (non-group) nav link shows its name to the right of
   the icon so the user can confirm what the icon represents before clicking.
   ─────────────────────────────────────────────────────────────────────────── */

/* Positioning context for the label popout */
.nav-mini:not(:has(:focus-visible)) .nav-top-item {
    position: relative;
}

/* Label popout: shows the item name to the right of the icon strip */
.nav-mini:not(:has(:focus-visible)) .nav-top-item:hover .nav-link-label {
    display: block !important;
    position: absolute !important;
    left: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    white-space: nowrap !important;
    background: var(--mud-palette-drawer-background) !important;
    padding: 8px 14px !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25) !important;
    z-index: 300 !important;
    border-radius: 0 4px 4px 0 !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
}

/* 4. Left temporary drawer (mobile): keep as fixed overlay */
.app-layout > .layout-drawer.mud-drawer-pos-left.mud-drawer-temporary {
    position: fixed !important;
    height: 100dvh !important;
    top: 0 !important;
}

/* 5. Right (chat) drawer: sticky in the third column, scrolls with the page */
.app-layout > .layout-drawer.mud-drawer-pos-right {
    grid-row: 2;
    grid-column: 3;
    position: sticky !important;
    top: var(--mud-appbar-height);
    right: auto !important;
    height: calc(100vh - var(--mud-appbar-height)) !important;
    height: calc(100dvh - var(--mud-appbar-height)) !important;
    max-height: calc(100vh - var(--mud-appbar-height)) !important;
    max-height: calc(100dvh - var(--mud-appbar-height)) !important;
    overflow: hidden;
    align-self: start;
}

.app-layout > .layout-drawer.mud-drawer-pos-right.mud-drawer--open {
    overflow: hidden;
    /* Dock to top of screen: extend into the AppBar row */
    grid-row: 1 / 3 !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    /* Stay above MudBlazor dialog overlay (--mud-zindex-dialog: 1400) */
    z-index: calc(var(--mud-zindex-dialog) + 50);
}

/* When chat drawer is open on desktop: shrink the AppBar to columns 1–2 so the chat
   drawer occupies the full right column from the very top of the screen */
@media (min-width: 960px) {
    .app-layout:has(.layout-drawer.mud-drawer-pos-right.mud-drawer--open) > .mud-appbar {
        grid-column: 1 / 3;
    }
}

.app-layout > .layout-drawer.mud-drawer-pos-right.mud-drawer--open > .mud-drawer-content {
    overflow-y: auto;
}

/* Collapse the right drawer column when closed */
.app-layout > .layout-drawer.mud-drawer-pos-right.mud-drawer--closed {
    width: 0 !important;
    overflow: hidden !important;
}

/* 6. Main content: fills the center column; grid handles margins */
.app-layout > .mud-main-content {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 7. Sidebar open: grid handles column spacing — neutralise old JS-driven margin shifts */
body.sidebar-open .app-layout > .mud-appbar {
    margin-left: 0 !important;
    width: auto !important;
    transition: none !important;
}

body.sidebar-open .app-layout > .mud-main-content {
    margin-left: 0 !important;
    transition: none !important;
}

/* 8. Mobile: collapse layout grid to a single content column so temporary drawers
      never leave the content area squeezed after a desktop->mobile transition. */
@media (max-width: 959.98px) {
    .app-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app-layout > .mud-main-content {
        grid-column: 1 !important;
    }
}

a, .btn-link {
    color: var(--mud-palette-primary);
}

.btn-primary {
    color: #fff;
    background-color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

.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 rgba(var(--mud-palette-primary-rgb), 0.35);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

.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;
}

/* ─── Account form inputs styled like MudBlazor Variant.Outlined ─────── */
.mud-like-field {
    position: relative;
    width: 100%;
}

.mud-like-field input {
    width: 100%;
    height: 56px;
    border: 1px solid var(--mud-palette-lines-input, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.23)));
    border-radius: 4px;
    padding: 27px 14px 10px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.1875em;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    color: inherit;
    transition: border-color 200ms;
    display: block;
}

.mud-like-field input::placeholder {
    color: transparent;
}

.mud-like-field input:hover {
    border-color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.mud-like-field input:focus {
    border: 2px solid var(--mud-palette-primary, #594ae2);
    padding: 26px 13px 9px;
}

.mud-like-field label {
    position: absolute;
    top: 18px;
    left: 14px;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    font-size: 1rem;
    line-height: 1.1875em;
    pointer-events: none;
    transition: top 200ms, font-size 200ms, color 200ms;
    background: var(--mud-palette-surface, white);
    padding: 0 2px;
    margin: 0 -2px;
}

.mud-like-field input:focus + label,
.mud-like-field input:not(:placeholder-shown) + label {
    top: 7px;
    font-size: 0.75rem;
}

.mud-like-field input:focus + label {
    color: var(--mud-palette-primary, #594ae2);
}

.mud-like-field .field-helper {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
    margin-top: 3px;
    margin-left: 14px;
}

.mud-like-field .validation-message {
    font-size: 0.75rem;
    margin-top: 3px;
    margin-left: 14px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.advanced-data-grid .mud-table-body .mud-table-row {
    cursor: pointer;
}

/* Mobile card view: show label and value on the same line with the value
   placed immediately after the label instead of pushed to the far right.
   Also enlarge the font slightly for better readability on small screens. */
@media (max-width: 599.98px) {
    .mud-table-cell[data-label]:not([data-label=""]) {
        justify-content: flex-start !important;
        font-size: 1rem !important;
    }
    .mud-table-cell[data-label=""] {
        width: auto !important;
    }
}

/* ─── Record Properties Dialog styled header ──────────────────────────────
   Replaces the plain MudDialog title with a full-bleed coloured heading.
   ─────────────────────────────────────────────────────────────────────── */

/* Clip children to the dialog's rounded top corners.
   MudBlazor sets overflow-y: auto on .mud-dialog which already clips children to
   the border-radius. Do NOT add overflow: hidden here — it would disable the
   flex scroll container causing flex items to never shrink on small screens. */

/* Constrain the dialog content area so it scrolls independently while the
   header and actions remain fixed.
   - max-height ensures the content area is bounded within the viewport, so
     overflow-y: auto can trigger a scrollbar for tall content (e.g. a
     RecordCollectionDisplay with many rows inside a dialog).
   - The 130px accounts for the rpd-header title (~68 px) + dialog actions
     (~53 px) + small buffer — adjusted values would still be safe to change.
   - min-height: 0 allows the flex item to shrink below its intrinsic content
     height so that narrow content doesn't force the dialog to overflow. */
.mud-dialog:has(.rpd-header) .mud-dialog-content {
    min-height: 0;
    max-height: calc(100dvh - var(--mud-appbar-height) - 130px);
    overflow-y: auto;
}

/* Zero-out the default MudBlazor title padding so the header fills edge-to-edge */
.mud-dialog-title {
    padding: 0 !important;
}

/* Message box title styled to match form dialog headers */
.mud-message-box .mud-dialog-title h6 {
    padding: 14px 20px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    font-weight: 500;
    letter-spacing: 0.0075em;
    line-height: 1.3;
    margin: 0;
}

.rpd-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

.rpd-header-icon {
    opacity: 0.85;
    flex-shrink: 0;
}

.rpd-header-title {
    font-weight: 500;
    letter-spacing: 0.0075em;
    line-height: 1.3;
}

.rpd-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}

.rpd-header-extra {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
}

.rpd-maximize-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.infrastructure-dialog-header-type {
    width: min(360px, 100%);
}

.infrastructure-dialog-header-type .mud-input-root,
.infrastructure-dialog-header-type .mud-input-control,
.infrastructure-dialog-header-type .mud-input-label,
.infrastructure-dialog-header-type .mud-input {
    color: inherit;
}

/* MudBlazor applies primary color classes on adornment buttons; force contrast in header. */
.infrastructure-dialog-header-type .mud-icon-button,
.infrastructure-dialog-header-type .mud-icon-button-color-primary,
.infrastructure-dialog-header-type .mud-icon-button-color-inherit,
.infrastructure-dialog-header-type .mud-input-adornment,
.infrastructure-dialog-header-type .mud-input-adornment .mud-icon-root,
.infrastructure-dialog-header-type .mud-input-adornment svg {
    color: inherit !important;
    fill: currentColor !important;
}

.infrastructure-dialog-header-type .mud-input-label {
    opacity: 0.85;
}

.infrastructure-dialog-header-type .mud-input-root::before,
.infrastructure-dialog-header-type .mud-input-root::after {
    border-bottom-color: currentColor;
}

/* Global sizing for IconSelect portal popover (rendered via MudPopoverProvider). */
.icon-select-popover-global {
    width: min(80vw, 1200px);
    max-width: 80vw;
    min-width: 320px;
    max-height: 400px;
    overflow-y: auto;
}

.mud-popover:has(.icon-select-popover-global) {
    left: 10vw !important;
}

@media (max-width: 768px) {
    .icon-select-popover-global {
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        max-height: 80vh;
        border-radius: 0;
    }

    .mud-popover:has(.icon-select-popover-global) {
        left: 0 !important;
    }
}
/* Keep end adornment icons (search, calendar) from overflowing the input field edge. */
.mud-input-adornment.mud-input-adornment-end {
    margin-right: 6px;
}

/* Global sizing for LookupField portal popover (rendered via MudPopoverProvider). */
.lookup-dropdown-global {
    width: min(96vw, 1100px);
    max-height: min(72vh, 720px);
    overflow-y: auto;
}

/* Cancel bar: hidden on desktop, shown as sticky header on mobile (full-screen mode). */
.lookup-cancel-bar {
    display: none;
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

@media (max-width: 768px) {
    .lookup-dropdown-global {
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        overflow-y: auto;
    }

    .mud-popover:has(.lookup-dropdown-global) {
        left: 0 !important;
        top: 0 !important;
    }

    .lookup-cancel-bar {
        display: block;
    }
}

/* ─── MudTabs — top-indicator nav style ──────────────────────────────────── */

/* Hide the default bottom sliding indicator bar */
.mud-tab-slider {
    display: none !important;
}

.mud-tab {
    padding: 6px 8px !important;
    min-height: 40px !important;
    min-width: auto !important;
    flex: 1 !important;
    color: var(--mud-palette-text-secondary) !important;
    opacity: 1 !important;
    border-top: 3px solid transparent !important;
    border-radius: 0 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    /* transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important; */
}

.mud-tab:hover {
    color: var(--mud-palette-text-primary) !important;
    background: rgba(0, 0, 0, 0.08) !important;
}

.mud-tab-active {
    color: var(--mud-palette-primary) !important;
    border-top: 3px solid var(--mud-palette-primary) !important;
    background: transparent !important;
}

.mud-tab-active:hover {
    background: transparent !important;
}

/* Bottom border on the whole tab strip */
.mud-tabs-header {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Round top-left corner on the first tab, top-right on the last */
.mud-tabs-tabbar-wrapper .mud-tooltip-root:first-child .mud-tab {
    border-radius: 8px 0 0 0 !important;
}

/* Last tab wrapper is the tooltip-root immediately before the slider */
.mud-tabs-tabbar-wrapper .mud-tooltip-root:has(+ .mud-tab-slider) .mud-tab {
    border-radius: 0 8px 0 0 !important;
}

/* ─── Compact mode ──────────────────────────────────────────────────────────
   Applied via .compact class on document.body when the user enables compact
   mode. Reduces padding and density across tables and form controls globally.
   ─────────────────────────────────────────────────────────────────────────── */

/* Table cells */
@media (min-width: 600px) {
    .compact .mud-table-cell {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

.mud-table-cell {
    padding: 8px !important;
}

/* Form field vertical spacing */
.compact .mud-input-control {
    margin-bottom: 4px !important;
}

.compact .mud-form-control {
    margin-bottom: 4px !important;
}

/* Toolbar */
.compact .mud-toolbar {
    min-height: 48px !important;
}

.compact .mud-input-control>.mud-input-control-input-container>div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 10px
}

.compact .mud-grid-spacing-xs-6>.mud-grid-item {
    padding-top: 4px !important;
}

.compact .mud-grid-spacing-xs-6
{
    margin-top: 4px !important;
}

.compact .mud-icon-button:not(.mud-switch-base) {
    padding: 2px !important;
}

.compact td
{
    padding: 2px 8px !important;
}

.compact th
{
    padding: 2px 8px !important;
}

/* MudContainer horizontal padding */
.compact .mud-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (max-width: 599.98px) {
    .compact .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

.mud-list-subheader
{
    padding-top: 16px !important;
    padding-bottom: 8px !important;
}

.compact .mud-menu-item
{
    padding: 5px 8px !important;
}

/* ─── Auto-tooltip ──────────────────────────────────────────────────────────
   Global tooltip rendered by spotlightInterop.initAutoTooltip().
   Shown on hover for elements with data-spotlight-tip or aria-label.
   ─────────────────────────────────────────────────────────────────────────── */
#at-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    max-width: 260px;
    background: rgba(28, 28, 30, 0.95);
    color: #fff;
    border-radius: 7px;
    padding: 7px 11px 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    font-size: 0.82rem;
    line-height: 1.35;
    transition: opacity 0.1s ease;
}

.at-tooltip-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2px;
}

.at-tooltip-body {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.80rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Schedule Calendar component styles
   ─────────────────────────────────────────────────────────────────────────── */

.schedule-calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.schedule-cal-header {
    text-align: center;
    font-weight: 600;
    font-size: 0.78rem;
    padding: 4px 2px;
    color: var(--mud-palette-text-secondary);
}

.schedule-cal-blank,
.schedule-cal-mini-blank {
    /* empty filler cell */
}

.schedule-cal-day {
    min-height: 80px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 4px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    font-size: 0.8rem;
}

.schedule-cal-day-number {
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.schedule-cal-today {
    background: var(--mud-palette-primary-lighten) !important;
}

.schedule-cal-today-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0 2px;
}

.schedule-cal-event {
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    padding: 2px 4px;
    margin-top: 2px;
    font-size: 0.72rem;
    overflow: hidden;
    cursor: default;
}

.schedule-cal-event.schedule-cal-event-clickable {
    cursor: pointer;
}

.schedule-cal-event.schedule-cal-event-clickable:hover {
    filter: brightness(1.15);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.schedule-cal-event-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Continuation slot: colored bar filling the hour cell for multi-hour events */
.schedule-cal-event-continuation {
    display: block;
    /* Bleed over the cell top border + top padding to close the gap */
    margin: -2px -2px 0 -2px;
    padding: 0;
    min-height: 43px; /* 40px cell height + 2px top bleed + 1px bottom border coverage */
    border-radius: 0;
    opacity: 0.85;
    position: relative;
    z-index: 1;
}

/* Last continuation: add bottom rounding and stop bleeding down */
.schedule-cal-event-continuation.schedule-cal-event-continuation-last {
    min-height: 42px;
    margin-bottom: 0;
    border-radius: 0 0 3px 3px;
}

.schedule-cal-event-continuation.schedule-cal-event-clickable {
    cursor: pointer;
}

.schedule-cal-event-continuation.schedule-cal-event-clickable:hover {
    filter: brightness(1.15);
    opacity: 1;
}

/* First block when a continuation follows: remove bottom rounding and extend down */
.schedule-cal-event.schedule-cal-event-has-continuation {
    border-radius: 3px 3px 0 0;
    margin-bottom: -2px;
    position: relative;
    z-index: 2;
}

/* ── Mini-month (year view) ────────────────────────────────────────────────── */
.schedule-calendar-mini-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-size: 0.72rem;
}

.schedule-cal-mini-header {
    text-align: center;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 2px 0;
}

.schedule-cal-mini-day {
    text-align: center;
    padding: 2px 0;
    min-height: 22px;
    border-radius: 3px;
    cursor: default;
    position: relative;
}

.schedule-cal-mini-has-events {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-radius: 3px;
}

.schedule-cal-mini-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 1px;
}

.schedule-cal-mini-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.schedule-cal-mini-dot.schedule-cal-event-clickable {
    cursor: pointer;
}

.schedule-cal-mini-dot.schedule-cal-event-clickable:hover {
    transform: scale(1.5);
}

/* ── Week view ─────────────────────────────────────────────────────────────── */
.schedule-calendar-week-grid {
    display: grid;
    /* time gutter + 7 day columns */
    grid-template-columns: 52px repeat(7, 1fr);
    gap: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.schedule-cal-week-gutter-header {
    background: var(--mud-palette-background-grey);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.schedule-cal-week-day-header {
    text-align: center;
    padding: 4px 2px;
    background: var(--mud-palette-background-grey);
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.78rem;
}

.schedule-cal-week-day-header.schedule-cal-today-header {
    background: var(--mud-palette-primary-lighten);
}

.schedule-cal-week-dow {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    font-size: 0.68rem;
}

.schedule-cal-week-dom {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.schedule-cal-week-allday-label {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding: 4px 4px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.schedule-cal-week-allday-cell {
    padding: 2px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    min-height: 28px;
}

.schedule-cal-week-time-label {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding: 2px 4px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    white-space: nowrap;
}

.schedule-cal-week-time-cell {
    padding: 1px 2px;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    min-height: 40px;
}

/* ── Day view ──────────────────────────────────────────────────────────────── */
.schedule-calendar-day-view {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
}

.schedule-cal-day-allday-row {
    display: flex;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.schedule-cal-day-allday-events {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.schedule-cal-day-time-row {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 48px;
}

.schedule-cal-day-time-row-has-events {
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.schedule-cal-day-time-label {
    width: 52px;
    min-width: 52px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding: 4px 6px 0 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    white-space: nowrap;
}

.schedule-cal-day-time-events {
    flex: 1;
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-cal-event-time {
    font-size: 0.65rem;
    opacity: 0.85;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Today header for week/day view ──────────────────────────────────────── */
.schedule-cal-today-header .schedule-cal-week-dom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* ─── Print styles ─────────────────────────────────────────────────────────
   Hides navigation chrome (buttons, menus, spacer) but keeps PageHeadingDisplay.
   Hides toolbars and dialog action buttons when printing.
   When a dialog is open it is expanded to fill the entire printed page.
   ─────────────────────────────────────────────────────────────────────────── */

@media print {
    /* Keep the app bar visible for the page heading, but hide all interactive chrome */
    .mud-appbar button,
    .mud-appbar .mud-toolbar-spacer,
    .mud-appbar .mud-menu {
        display: none !important;
    }

    /* Hide navigation drawers (left nav menu, right chat drawer) */
    .layout-drawer {
        display: none !important;
    }

    /* Reset the grid layout so main content fills the printable area */
    .app-layout {
        display: block !important;
        min-height: 0 !important;
    }

    /* Hide dialog action buttons (Copy, Cancel, Save) */
    .mud-dialog-actions {
        display: none !important;
    }

    /* General utility: hide any element tagged with no-print (e.g. dialog help/maximize buttons) */
    .no-print {
        display: none !important;
    }

    /* ── When a dialog is open: expand it to fill the page, hide background ── */

    /* Hide the main page layout when a dialog is open */
    body:has(.mud-overlay-dialog) .app-layout {
        display: none !important;
    }

    /* MudBlazor sets overflow:hidden on html/body when a dialog is open to block
       background scroll. Override so the print layout can expand to full content height. */
    html, body {
        overflow: visible !important;
        height: auto !important;
    }

    /* Remove the dialog overlay backdrop colour; use static positioning so
       content is not clipped to one viewport and can flow across pages */
    .mud-overlay-dialog {
        background: none !important;
        position: static !important;
        overflow: visible !important;
        height: auto !important;
        z-index: auto !important;
    }

    /* Make the dialog container flow naturally (height: auto so it grows with content) */
    .mud-dialog-container {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    /* Dialog stretches to content height so all pages are printed */
    .mud-dialog {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Allow dialog content to expand without scroll restriction */
    .mud-dialog-content {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ── Markdown rendered content ───────────────────────────────────────────── */
.markdown-content {
    line-height: 1.7;
    word-break: break-word;
}

.markdown-content p {
    margin-bottom: 0.5rem;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight: 500;
    margin-top: 0.75rem;
    margin-bottom: 0.4rem;
}

.markdown-content h1 { font-size: 1.5rem; }
.markdown-content h2 { font-size: 1.25rem; }
.markdown-content h3 { font-size: 1.1rem; }

.markdown-content code {
    background-color: var(--mud-palette-background-grey);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: monospace;
}

.markdown-content pre {
    background-color: var(--mud-palette-background-grey);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.markdown-content pre code {
    background: none;
    padding: 0;
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.markdown-content li {
    margin-bottom: 0.2rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 0.75rem;
    margin: 0.5rem 0;
    color: var(--mud-palette-text-secondary);
}

.markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content table {
    border-collapse: collapse;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    overflow-x: auto;
    display: block;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.3rem 0.6rem;
    text-align: left;
}

.markdown-content th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 600;
}

.markdown-content img {
    max-width: 100%;
    border-radius: 4px;
}

/* Responsive button label: visible on sm+ screens, hidden on xs (mobile) */
.btn-label {
    display: none;
}
@media (min-width: 600px) {
    .btn-label {
        display: inline;
    }
}