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

/* Extended Bootstrap spacing utilities (mb-6 to mb-10) */
/* Base unit is 0.375rem, values follow Bootstrap's pattern */
.mb-6 {
    margin-bottom: 1.75rem !important;
}
.mb-7 {
    margin-bottom: 2rem !important;
}
.mb-8 {
    margin-bottom: 2.5rem !important;
}
.mb-9 {
    margin-bottom: 3rem !important;
}
.mb-10 {
    margin-bottom: 3.5rem !important;
}

/* Form row spacing (used in forms for consistent field spacing) */
.fv-row {
    margin-bottom: 1rem;
}

/* Fix flatpickr z-index when inside offcanvas (Bootstrap offcanvas z-index is 1045) */
.offcanvas .flatpickr-calendar,
.offcanvas-body .flatpickr-calendar,
.flatpickr-calendar {
    z-index: 1060 !important;
}

/* Wider detail drawers for Planner task/operation review. */
.offcanvas.offcanvas-wide-xl {
    --bs-offcanvas-width: min(760px, 100vw);
    --osen-offcanvas-width: min(760px, 100vw);
    width: min(760px, 100vw) !important;
}

.offcanvas.offcanvas-workspace-full {
    --bs-offcanvas-width: min(1180px, calc(100vw - 2rem));
    --osen-offcanvas-width: min(1180px, calc(100vw - 2rem));
    width: min(1180px, calc(100vw - 2rem)) !important;
}

@media (max-width: 767.98px) {
    .offcanvas.offcanvas-wide-xl,
    .offcanvas.offcanvas-workspace-full {
        --bs-offcanvas-width: 100vw;
        --osen-offcanvas-width: 100vw;
        width: 100vw !important;
    }
}

/* Fix custom overlay z-index for location picker inside offcanvas */
.td-overlay-backdrop {
    z-index: 1055 !important;
}
.td-overlay-panel {
    z-index: 1056 !important;
}

/* Make topbar full width - extend to edges of window */
.app-topbar .topbar-menu {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

html[data-layout-mode=detached]:not([data-layout=topnav]) .wrapper .app-topbar .topbar-menu {
    max-width: 100% !important;
}

/* Fix modal z-index when opened from offcanvas or dropdown */
/* Bootstrap z-index hierarchy: dropdown(1000), offcanvas(1045), modal-backdrop(1050), modal(1055) */
/* When modal is triggered from offcanvas/dropdown, we need higher z-index to appear above */
.modal-backdrop {
    z-index: 1070 !important;
}
.modal {
    z-index: 1075 !important;
}

/* Notification dropdown styling fixes */
.notification-item .notification-item-close {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.notification-item:hover .notification-item-close {
    opacity: 1;
}

.operations-overview-location {
    min-width: 180px;
}

/* Circuit reconnect banner. Blazor's default reconnection handler toggles the
   components-reconnect-* classes on #components-reconnect-modal (see App.razor).
   It is a pill at the top of the page, not an overlay: nothing underneath is
   blocked, and the delayed transition means a blip of a second or two never
   shows anything. */
#components-reconnect-modal {
    align-items: center;
    background: #1f2230;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    color: #dbe5f5;
    display: flex;
    font-size: 0.85rem;
    gap: 0.5rem;
    left: 50%;
    opacity: 0;
    padding: 0.45rem 1rem;
    pointer-events: none;
    position: fixed;
    top: 12px;
    transform: translateX(-50%);
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    visibility: hidden;
    white-space: nowrap;
    z-index: 20000;
}

#components-reconnect-modal i {
    color: #f5b849;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    transition: opacity 0.2s ease 2.5s, visibility 0s linear 2.5s;
    visibility: visible;
}

#components-reconnect-modal .td-reconnect-retrying,
#components-reconnect-modal .td-reconnect-failed,
#components-reconnect-modal .td-reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .td-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed .td-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .td-reconnect-rejected {
    display: inline;
}

#components-reconnect-modal .td-reconnect-attempt {
    color: #aebbd0;
}

#components-reconnect-modal .td-reconnect-attempt:has(#components-reconnect-current-attempt:empty) {
    display: none;
}

/* Dispatch Choices menus are generated dynamically, so they need a global,
   opaque theme surface instead of relying only on component-scoped styling. */
.workspace-filter-studio .choices,
.workspace-filter-studio .choices.is-open,
.operations-overview-filter-studio .choices,
.operations-overview-filter-studio .choices.is-open {
    position: relative;
}

.workspace-filter-studio .choices.is-open,
.operations-overview-filter-studio .choices.is-open {
    z-index: 3050 !important;
}

.workspace-filter-studio .choices__list--dropdown,
.workspace-filter-studio .choices__list[aria-expanded],
.workspace-filter-studio .choices__list--dropdown .choices__list,
.workspace-filter-studio .choices__list[aria-expanded] .choices__list,
.operations-overview-filter-studio .choices__list--dropdown,
.operations-overview-filter-studio .choices__list[aria-expanded],
.operations-overview-filter-studio .choices__list--dropdown .choices__list,
.operations-overview-filter-studio .choices__list[aria-expanded] .choices__list {
    background: var(--osen-secondary-bg, var(--bs-secondary-bg, #fff)) !important;
    background-color: var(--osen-secondary-bg, var(--bs-secondary-bg, #fff)) !important;
    opacity: 1 !important;
}

.workspace-filter-studio .choices__list--dropdown,
.workspace-filter-studio .choices__list[aria-expanded],
.operations-overview-filter-studio .choices__list--dropdown,
.operations-overview-filter-studio .choices__list[aria-expanded] {
    z-index: 3050 !important;
    border: 1px solid var(--osen-border-color, var(--bs-border-color)) !important;
    border-radius: 0.5rem;
    box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.38) !important;
    isolation: isolate;
}

.workspace-filter-studio .choices__list--dropdown .choices__item--choice,
.workspace-filter-studio .choices__list[aria-expanded] .choices__item--choice,
.operations-overview-filter-studio .choices__list--dropdown .choices__item--choice,
.operations-overview-filter-studio .choices__list[aria-expanded] .choices__item--choice {
    background: var(--osen-secondary-bg, var(--bs-secondary-bg, #fff)) !important;
    color: var(--osen-body-color, var(--bs-body-color)) !important;
}

.workspace-filter-studio .choices__list--dropdown .choices__item--choice.is-highlighted,
.workspace-filter-studio .choices__list[aria-expanded] .choices__item--choice.is-highlighted,
.operations-overview-filter-studio .choices__list--dropdown .choices__item--choice.is-highlighted,
.operations-overview-filter-studio .choices__list[aria-expanded] .choices__item--choice.is-highlighted {
    background: var(--osen-tertiary-bg, var(--bs-tertiary-bg, rgba(var(--bs-primary-rgb), 0.18))) !important;
}

[data-bs-theme="dark"] .workspace-filter-studio .choices__list--dropdown,
[data-bs-theme="dark"] .workspace-filter-studio .choices__list[aria-expanded],
[data-bs-theme="dark"] .workspace-filter-studio .choices__list--dropdown .choices__list,
[data-bs-theme="dark"] .workspace-filter-studio .choices__list[aria-expanded] .choices__list,
[data-bs-theme="dark"] .workspace-filter-studio .choices__item--choice,
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__list--dropdown,
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__list[aria-expanded],
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__list--dropdown .choices__list,
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__list[aria-expanded] .choices__list,
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__item--choice {
    background: #1e1f27 !important;
    background-color: #1e1f27 !important;
    color: #dce5ee !important;
}

[data-bs-theme="dark"] .workspace-filter-studio .choices__item--choice.is-highlighted,
[data-bs-theme="dark"] .operations-overview-filter-studio .choices__item--choice.is-highlighted {
    background: #404954 !important;
    background-color: #404954 !important;
}

/* Breathing room between the last card on a page and the footer.

   The theme gives .page-container no bottom padding, so any page whose last
   element is a card sits flush against the footer's top border. Scoped with the
   child combinator so it only affects the page body, not the .page-container the
   theme also uses inside the footer itself. */
.page-content > .page-container {
    padding-bottom: 1.5rem;
}

/* Condensed (icon-only) sidebar.
   The theme takes the menu out of the layout flow here (position: absolute, overflow
   visible so the hover flyouts can escape) and papers over it with a fixed
   `.page-content { min-height: 1800px }`, assuming the menu always fits in 1800px.
   Ours no longer does, so the icons ran past the page, past their own background and
   below the footer. Putting the sidebar back into the flow as a grid column lets the
   page grow to whichever is taller — menu or content — so the background always
   reaches the bottom and the footer sits under both. The flyouts are positioned
   relative to each .side-nav-item, so they are unaffected.
   The children are addressed as `.wrapper > …` deliberately: App.razor loads the theme a
   second time (css/app.min.css via <Head_css />) AFTER this file, so a rule that merely
   ties the theme's specificity loses to that later copy. One extra class wins outright. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper {
    display: grid;
    grid-template-columns: var(--osen-sidenav-width-sm) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 100vh;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper > .sidenav-menu {
    position: relative;
    top: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper > .app-topbar {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .wrapper > .page-content {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    min-height: 0;
}

/* Hover tips (wwwroot/js/hover-tips.js): theme tooltips with rich content
   for dense grids such as the Dispatch Workspace. Appended to <body>, so
   these rules must be global rather than component-scoped. */
.hover-tip { --osen-tooltip-max-width: 320px; --osen-tooltip-padding-x: .7rem; --osen-tooltip-padding-y: .5rem; }
.hover-tip .tooltip-inner { text-align: left; line-height: 1.35; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); }
.hover-tip .tip-title { margin-bottom: .2rem; font-weight: 700; }
.hover-tip .tip-sub { margin-bottom: .35rem; opacity: .7; font-size: .7rem; }
.hover-tip .tip-row { display: flex; gap: .4rem; align-items: baseline; font-size: .72rem; }
.hover-tip .tip-row + .tip-row { margin-top: .15rem; }
.hover-tip .tip-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.hover-tip .tip-status { margin-left: auto; padding-left: .5rem; opacity: .7; font-size: .65rem; white-space: nowrap; }
.hover-tip .tip-day { margin-top: .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .03em; opacity: .75; text-transform: uppercase; }