/* Load order: App.razor links this file (app.css) AFTER css/FMS.css (and css/Mobile.css), so any
   rule here beats a same-specificity rule in FMS.css without needing !important. FMS.css is the
   legacy, RadGrid-era stylesheet being incrementally patched around as pages are migrated to
   Blazor/Telerik - when a rule in FMS.css conflicts with a fix needed here, prefer
   removing/narrowing the conflicting rule in FMS.css over adding !important to win the cascade. */

:root {
    --Font_Family: Lato-Regular, Lato-Thin, Lato-Light;
}

/* Consolidated font-family declarations. body's font-family would normally cascade to every
   element via inheritance, but several more specific selectors below (and in Mobile.css,
   TimeClock.css) must still set font-family explicitly - Kendo/Telerik
   widgets (.k-grid, .k-window, .k-calendar, .k-menu, etc.) set their own font-family directly on
   the element via var(--kendo-font-family), which is more specific than an inherited value and
   would otherwise win the cascade. All such selectors are grouped into this single rule (per
   file) instead of repeating the font-family declaration across many separate rules, so the
   fonts used across the app can be reviewed/changed in one place. Merged in from FMS.css - see
   Docs/LayoutStructure.md/app.css migration policy. */
body,
.k-menu-bar,
.k-menu,
.checkboxLabel,
.dropdownLabel,
.ModalPanel,
h2,
#MainContentContainer,
.k-grid,
.ControlTitle,
.k-window,
.k-window label,
div.k-popup textarea,
div.k-grid-edit-form select,
div.k-grid-edit-form textarea,
div.k-popup select,
tr.PersonalEditForm textarea,
div#reportViewer1 input.trv-parameter-editor-datetime.k-input {
    font-family: var(--Font_Family); /*, 'Segoe UI', Tahoma, Verdana, sans-serif*/
}

/* Needs !important to beat Kendo's own more-specific var(--kendo-font-family) rule on
   .k-calendar, so kept separate from the grouped rule above rather than merged into it. */
.k-calendar {
    font-family: var(--Font_Family) !important;
}

html, body {
    height: 100%; /* pinned so #tblMain/MainLayout.razor.css's height:100% chain resolves - see Docs/LayoutStructure.md */
}

body {
    background-size: cover;
    margin: 0;
}

    body > form {
        height: inherit;
        width: 100%;
    }
    /* Blazor: TelerikRootComponent renders its own wrapper div directly in body (Routes.razor's
       <Router>/<RouteView> render no wrapping element of their own, so this really is body's
       only child). That wrapper has no explicit height by default, so #tblMain's height:100%
       chain resolves against an unconstrained ancestor and never actually clips to the
       viewport - allowing tall page content to grow the whole document instead of scrolling
       internally. Pin it here (by direct-child position, not by class name, since Telerik's
       internal wrapper class isn't a stable public contract) so the height:100% chain
       documented in Docs/LayoutStructure.md actually takes effect. */
    body > div:first-child {
        height: 100%;
    }

/* ==========================================================================
   Generic utility classes - moved from FMS.css (not layout-topic, but simple,
   widely-applicable text/display helpers appropriate for app.css). See
   Docs/LayoutStructure.md for the project convention (app.css is the target
   for new/updated global styles; FMS.css is legacy and being phased out).
   ========================================================================== */
.SiteTitle {
    display: none;
}

.TextWhite {
    color: #ffffff;
}

.TextBold {
    font-weight: bold;
}

.TextNormal {
    font-weight: normal;
}

.Opacity {
    opacity: .9;
}

.TextLighter {
    font-weight: lighter;
    font-family: Lato-Thin;
}

.FlexStyling {
    display: flex;
}

.Rockwell {
    font-family: Rock;
}
.JustifyLeft {
    justify-content: left;
}
/* ==========================================================================
   Application shell layout - see Docs/LayoutStructure.md for the full write-up.
   The outer shell (#tblMain/#NavContainer/#SideNav/#RightNav/#MainContentContainer/
   #MainContent) is rendered directly by MainLayout.razor, so that structural CSS now
   lives in MainLayout.razor.css (CSS isolation) instead of here. Only the page-content
   classes that CHILD page components render into (.MainTableContainer and friends) stay
   global in app.css, since Blazor CSS isolation does not reach into child components.
   ========================================================================== */

/* #MainContent is display:flex/flex-direction:column (see MainLayout.razor.css) and only
   correctly bounds .MainTableContainer's own flex:1 1 auto/min-height:0/overflow:auto rules
   (below) when .MainTableContainer is a DIRECT flex child of #MainContent. Several pages
   (e.g. MissedStandbys.razor, Messages.razor) instead wrap their whole page - PageHeader +
   .MainTableContainer - in one extra plain <div id="XContainer"> root, so #MainContent has a
   single direct child rather than PageHeader/.MainTableContainer being siblings there. That
   wrapper div has no height/flex rules of its own, so it just grows to fit its content instead
   of being clipped to #MainContent's height - and since .MainTableContainer's own flex rules
   only take effect when its immediate parent is a flex container, they become no-ops one level
   too deep, letting tall grid/report content push the wrapper (and the whole document) taller
   than the viewport and forcing a browser-level scroll instead of scrolling internally. Making
   this sole wrapper div itself a flex column (with its own height/min-height pinned) restores
   the same flex chain the wrapper-less pages already get for free. */
#MainContent > div:only-child {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden; /* only .MainTableContainer should scroll internally - without this the
                          wrapper can show its own outer scrollbar alongside the grid's inner one */
}

/* Primary scrollable main-content wrapper for grid/report pages (see Docs/LayoutStructure.md).
   flex: 1 1 auto + min-height: 0 lets this region shrink within #MainContent's flex column
   (a flex child's default min-height is auto, which would otherwise prevent shrinking and
   break scrolling); overflow: auto on both axes scrolls the content if it exceeds the box. */
.MainTableContainer {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: auto;
}
.MainTableContainer.AskFMSBody {
    padding: 10px;
}
/* TelerikGrid's own root (.k-grid) is display:flex/flex-direction:column/overflow:hidden (see
   Kendo's own stylesheet), and its .k-grid-container child is flex:1 1 auto/overflow:hidden -
   i.e. Kendo expects the grid to be given an explicit height so ITS OWN body content scrolls
   internally while the header/toolbar/pager stay pinned. None of our TelerikGrid usages set
   Height, so .k-grid has no height at all and just grows to fit every row - meaning
   .MainTableContainer's own overflow-y:auto (above) ends up scrolling the WHOLE grid (header +
   every row + pager) as one long block instead of the grid managing its own internal scroll
   with a fixed header/pager, which is what produced the "double/wrong" scrolling users saw.
   Cap (not force) every TelerikGrid hosted in .MainTableContainer at the container's height, so
   Kendo's internal flex/overflow rules have a height to work against ONLY when the grid's own
   content is tall enough to need it. max-height (instead of height) lets small grids - e.g.
   Admin/Adjustments.aspx's "Personnel Deployed on <date>" grid, which may only have 1-2 rows -
   shrink to fit their actual content instead of always stretching to fill the container. */
.MainTableContainer > .k-grid {
    max-height: 100%;
}

/* Kendo's .k-grid is itself a flex column whose .k-grid-aria-root/.k-grid-container/
   .k-grid-content descendants are flex items with the default min-height: auto, which means
   they refuse to shrink below their content's natural height (i.e. all the rows) even though
   we just gave .k-grid an explicit height above - this pushes the grid taller than that height
   and clips the last row against an ancestor's overflow: hidden instead of letting Kendo's own
   .k-grid-content (which already has overflow: auto in Kendo's stylesheet) scroll internally.
   min-height: 0 lets each of them actually shrink to fit the space so the grid's own scrollbar
   takes over instead of the last row(s) being clipped.
   (Legacy FMS.css previously had a "div.k-grid-content { max-height: calc(75vh) !important;
   height: fit-content !important; ... }" rule left over from the RadGrid-era design that fought
   this flex-based sizing - it has been removed from FMS.css since it no longer serves a purpose
   now that every grid manages its own height via this flex chain.) */
.MainTableContainer > .k-grid .k-grid-aria-root,
.MainTableContainer > .k-grid .k-grid-container,
.MainTableContainer > .k-grid .k-grid-content {
    min-height: 0;
}

/* Grid-based tabs hosted inside a TelerikTabStrip that itself lives inside
   .MainTableContainer (e.g. PersonnelEdit.razor's Class/Cert, Committees, Crews, History, IECS
   Ranks, Leave, Qualifications, Sign Ons tabs - see PersonnelAdmin.razor) aren't a DIRECT child
   of .MainTableContainer, so the ".MainTableContainer > .k-grid" rule above never matches them.
   Confirmed via rendered DOM inspection that PersonnelEdit.razor also wraps its TelerikTabStrip
   in its own "fms-personnel-edit" div, so the real chain is
   .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content > .k-grid -
   the wrapper div breaks a ">" chain that skips it, which is why the previous attempt (targeting
   ".MainTableContainer > .k-tabstrip" directly) had no effect. Kendo's own
   .k-tabstrip/.k-tabstrip-content/.k-tabstrip-content.k-active are NOT flex containers by default
   and have no height of their own, so a nested .k-grid still has nothing to size against and
   grows to fit every row instead of pinning its own header/pager - the same underlying problem
   the rule above fixes for grids that aren't inside a tab strip. Make the wrapper div and the tab
   strip itself fill .MainTableContainer as a flex column, and the active content pane fill the
   remaining space, so any .k-grid nested inside picks up a real height the same way. */
.MainTableContainer > .fms-personnel-edit {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

    .MainTableContainer > .fms-personnel-edit > .k-tabstrip {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
    }

        /* These tabs (Class/Cert, Committees, Crews, History, IECS Ranks, Leave, Qualifications,
           Sign Ons) host small, Pageable grids (e.g. PageSize=20) that should behave the same way
           as any other TelerikGrid hosted in .MainTableContainer: fill the available space with
           header/toolbar/pager pinned and only the row body (.k-grid-content) scrolling
           internally. Give the content pane a real height to work against so the nested .k-grid
           can fill it and only .k-grid-content scrolls. */
        .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            overflow-y: auto
        }

            .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content > .k-grid {
                max-height: 100%;
            }

                .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content > .k-grid .k-grid-aria-root,
                .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content > .k-grid .k-grid-container,
                .MainTableContainer > .fms-personnel-edit > .k-tabstrip > .k-tabstrip-content > .k-grid .k-grid-content {
                    min-height: 0;
                }



    .MainTableContainer.AllowOverflow {
        overflow-x: auto;
    }

    .MainTableContainer.PivotContainer {
        overflow: hidden;
    }



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

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.k-pager-sizes .k-dropdownlist {
    Width: 80px !important;
}
/* Reserves the ExportGridButton's footprint so a page's filter controls (e.g. a date picker)
   don't shift position when the button is hidden (grid has no data). Width mirrors the rendered
   TelerikDropDownButton's typical width ("Export" text + download icon + padding). */
.ExportGridButtonSlot {
    display: inline-block;
    min-width: 100px;
}

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

.validation-message {
    color: #e50000;
}
.k-link-text {
    color: var(--Body_Text_Color);
}
/* Mirrors legacy ucTimeEntryEdit.ascx's inline RequiredFieldValidators/CompareValidator: a small
   red message directly under the offending field, in addition to the popup's summary banner. */
.inlineValidator {
    display: block;
    color: #e50000;
    font-size: 0.8rem;
    margin-top: 2px;
}

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

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

/* Legacy InlineEditForm/PersonalEditForm pill-shaped Save/Cancel buttons target raw HTML
   input[type=submit]/button.FakeSaveButton elements (see FMS.css); Telerik's TelerikButton
   renders as <button class="k-button">, which needs its own matching pill-outline styling to
   look consistent with the legacy edit forms.
   Every host context that renders a SaveButtonTable (bare/unscoped, .fms-edit-panel embedded
   edit forms, and the page/modal-level .fms-edit-page-save-bar/.fms-modal-save-bar bars) shares
   this exact same pill-outline look, so all contexts are combined into one selector list here
   instead of being redefined per-context - previously each context had its own copy of these
   rules with colors that had drifted out of sync; keep any future context-specific SaveButtonTable
   styling (e.g. .fms-edit-page-save-bar/.fms-modal-save-bar's zero top/bottom padding below) as a
   small addition after this shared block rather than re-copying the whole ruleset.
   .k-dialog-actions .k-button is included alongside the SaveButtonTable contexts so TelerikDialog's
   <DialogButtons> (used by confirm/prompt dialogs, e.g. PersonnelAdminHistoryGrid's close-open-
   record/delete-confirm/reopen-previous dialogs) get this same pill-outline Yes/No/OK/Cancel look
   instead of Telerik's default button styling. This also covers the built-in confirm dialogs
   produced by DialogFactory.ShowConfirmAsync/DialogFactory.ShowAlertAsync (e.g. a plain "Confirm
   Delete" prompt with a Delete/Cancel button pair) - Telerik renders their destructive action
   button with a `.k-button-error` class instead of `.cancelButton`/`.k-button-primary`, so that
   class is added to the cancelButton/k-button-text selector groups below to keep every dialog's
   buttons visually consistent, whether it's a custom TelerikDialog or a DialogFactory prompt. */
.SaveButtonTable,
.fms-edit-panel .SaveButtonTable,
.fms-edit-page-save-bar .SaveButtonTable,
.fms-modal-save-bar .SaveButtonTable {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 0px;
}

/* DutyAdmin's Duty Assignment popup edit form (GridPopupEditSettings Class="SetPositionDutyPopup"
   wrapping DutyAssignmentEdit.razor, whose root carries "fms-duty-assignment-edit") is rendered by
   Telerik into a portal outside DutyAdmin's own component subtree, so it never carries DutyAdmin's
   CSS-isolation scope attribute and a DutyAdmin.razor.css ::deep rule can never match it - this
   override has to live here, unscoped, keyed off the two classes actually present in that DOM. */
.SetPositionDutyPopup .fms-duty-assignment-edit .SaveButtonTable {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 15px;
    padding-bottom: 0px;
}

.fms-edit-page-save-bar .SaveButtonTable,
.fms-modal-save-bar .SaveButtonTable {
    padding-top: 5px;
}

    .SaveButtonTable .k-button,
    .fms-edit-panel .SaveButtonTable .k-button,
    .fms-edit-page-save-bar .SaveButtonTable .k-button,
    .fms-modal-save-bar .SaveButtonTable .k-button,
    .k-dialog-actions .k-button{
        background-color: transparent;
        border-radius: 20px;
        min-width: 100px;
        padding: 3px 5px;
    }
        .SaveButtonTable .k-button:hover,
        .fms-edit-panel .SaveButtonTable .k-button:hover,
        .fms-edit-page-save-bar .SaveButtonTable .k-button:hover,
        .fms-modal-save-bar .SaveButtonTable .k-button:hover,
        .k-dialog-actions .k-button:hover,
        .k-dialog-actions .k-button.k-button-primary:hover {
            background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
            border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
            color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
        }
        .k-dialog-actions .k-button:focus {
            box-shadow: none !important;
        }
            .SaveButtonTable .k-button.cancelButton,
            .fms-edit-panel .SaveButtonTable .k-button.cancelButton,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.cancelButton,
            .fms-modal-save-bar .SaveButtonTable .k-button.cancelButton,
            .k-dialog-actions .k-button.cancelButton,
            .k-dialog-actions .k-button.k-button-error {
                background-color: transparent;
                color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
            }
            .SaveButtonTable .k-button.cancelButton:hover,
            .fms-edit-panel .SaveButtonTable .k-button.cancelButton:hover,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.cancelButton:hover,
            .fms-modal-save-bar .SaveButtonTable .k-button.cancelButton:hover,
            .k-dialog-actions .k-button.cancelButton:hover,
            .k-dialog-actions .k-button.k-button-error:hover {
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
            }
        .SaveButtonTable .k-button .k-button-text,
        .fms-edit-panel .SaveButtonTable .k-button .k-button-text,
        .fms-edit-page-save-bar .SaveButtonTable .k-button .k-button-text,
        .fms-modal-save-bar .SaveButtonTable .k-button .k-button-text,
        .k-dialog-actions .k-button .k-button-text {
            color: var(--LeftSidebar_Text_ScrollbarBackground_Color, #b21f26);
            font-size: 12px;
            position: relative;
            top:0px;
            padding:0px
        }
        .k-dialog-actions .k-button {
            border-width: 2px;
        }

        .k-dialog-actions .k-button.k-button-error .k-button-text {
            color: var(--Body_Text_Color, #b21f26);
        }
            .SaveButtonTable .k-button.k-button-primary,
            .SaveButtonTable .k-button.k-button-solid-primary,
            .fms-edit-panel .SaveButtonTable .k-button.k-button-primary,
            .fms-edit-panel .SaveButtonTable .k-button.k-button-solid-primary,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.k-button-primary,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.k-button-solid-primary,
            .fms-modal-save-bar .SaveButtonTable .k-button.k-button-primary,
            .fms-modal-save-bar .SaveButtonTable .k-button.k-button-solid-primary,
            .k-dialog-actions .k-button.k-button-primary,
            .k-dialog-actions .k-button.k-button-solid-primary {
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                color: var(--Body_Text_Color, #b21f26);
                background-color: transparent;
            }
            .SaveButtonTable .k-button.k-button-primary:hover,
            .SaveButtonTable .k-button.k-button-solid-primary:hover,
            .fms-edit-panel .SaveButtonTable .k-button.k-button-primary:hover,
            .fms-edit-panel .SaveButtonTable .k-button.k-button-solid-primary:hover,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.k-button-primary:hover,
            .fms-edit-page-save-bar .SaveButtonTable .k-button.k-button-solid-primary:hover,
            .fms-modal-save-bar .SaveButtonTable .k-button.k-button-primary:hover,
            .fms-modal-save-bar .SaveButtonTable .k-button.k-button-solid-primary:hover,
            .k-dialog-actions .k-button.k-button-solid-primary:hover {
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
            }
.SaveButtonTable.LogoutButtons {
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
}
/*Popup needs to be high enough to give enough room for datetime buttons to be accessible */
.PopupBody.SetPositionTimePopup {
    overflow-y: auto;
    top: 236px;
}
.SetPositionDutyPopup {
    overflow: hidden;
}

.SetPositionDutyPopup .k-window-content {
    overflow-x: auto;
}
/* Zero-hour edit popup's flexContainer rows need to wrap on narrower viewports so the
   Station/Unit/Status/Purpose/Position TelerikComboBox dropdowns have enough room to render
   without being clipped by the popup's edges. */
.PopupBody.WithBorder .flexContainer {
    flex-wrap: wrap;
    row-gap: 10px;
}

/* The Row1/Row2 field rows in the zero-hour edit popup (TimeEntriesGrid.razor FormTemplate) must
   never wrap - Unit/Position are always present in the DOM (just visibility-toggled) so the row's
   item count/width never changes, but the popup must be wide enough to fit all 4 columns on one
   line or the browser will still wrap them even without any add/remove. */
.PopupBody.WithBorder .flexContainer.noWrap {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
}

/* FMS.css's .flexChild has margin:auto, which vertically CENTERS each flexChild within the row.
   Since flexChild heights differ (e.g. Personnel's plain label+span is much shorter than
   Station/Unit's label+combobox+helper-text), the labels end up misaligned/floating at different
   heights. Force all labels in the zero-hour popup rows to sit flush at the top of their column.
   Each column is also given an equal fixed basis/width so the 4 columns line up vertically between
   Row1 (Personnel/Enter/Station/Unit) and Row2 (Status/Exit/Purpose/Position). */
.PopupBody.WithBorder .flexContainer.noWrap > .flexChild {
    margin: 0;
    align-self: flex-start;
    flex: 0 0 220px;
    width: 220px;
}

/* .dropdownLabel is a <label>, which is inline by default. Telerik inputs (TelerikComboBox,
   TelerikDateTimePicker) render as block-level <div>s, so the inline label gets forced onto its
   own line above them - but plain read-only <span> values (Personnel, disabled Enter/Exit) are
   ALSO inline, so the label stays on the same line beside them instead. Force the label to always
   be block-level so every field in the zero-hour popup stacks label-above-value consistently. */
.PopupBody.WithBorder .flexContainer.noWrap > .flexChild > .dropdownLabel {
    display: block;
}

/* Legacy ModalPopupExtender positioning (colors/borders come from FMS.css/skin files). */
div.ModalPopupBG {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

    div.ModalPopup {
        position: fixed;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10001;
        max-width: 90vw;
    }

/* Message Assignment popup (MessagesGrid.razor "Assign" action): the Available/Assigned grids
   are pageable, so the popup doesn't need to grow to fit every row - cap its height and let the
   body scroll instead of pushing the popup (and its Close button) off-screen. */
    div.ModalPopup.AssignMessagePopup {
        width: fit-content;
        max-width: 90vw;
        min-width: 850px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }

    div.ModalPopup.AssignMessagePopup .PopupBody {
        overflow-y: auto;
    }

/* Header X close button for the Assign popup (MessagesGrid.razor), mirroring the built-in close
   icon Telerik renders automatically for the GridEditMode.Popup edit/create window's title bar -
   which this hand-rolled ModalPopup doesn't get for free since it isn't a TelerikWindow. */
#AssignPopupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    #AssignPopupHeader .AssignPopupCloseButton {
        margin-left: auto;
    }

    /* FMS.css's base ".k-button-group .k-button { width: 50px }" plus its
   ".k-group-start/.k-group-end { border-radius: 50px ... }" rules assume a narrow icon-only
   toggle switch (legacy's small pill/circle switches). Text-driven toggle groups (e.g. "Administer
   by Date"/"Administer by Personnel") previously opted out of that fixed 50px sizing via an extra
   ".LongButton" class on the legacy ".PageInfoItem.PageSwitch" wrapper (FMS.css: ".PageSwitch.LongButton
   button { width: 175px; }"). The shared PageHeader component's CenterContent wrapper
   (.fms-page-header-center) has no equivalent override, so any TelerikButtonGroup placed there was
   silently shrunk to 50px-wide, fully-rounded buttons - causing overlapping circular buttons whose
   click targets no longer lined up with their visible (clipped) text. Override back to
   content-sized buttons with normal (non-circular) rounding for every button group hosted here. */
/* !important is required on width here: FMS.css's own equal-specificity ".k-button-group .k-button"
   rule is linked AFTER app.css in App.razor's <head>, so without !important the later legacy rule
   wins the cascade tie and silently reverts these buttons back to the narrow 50px sizing. Border-
   radius is intentionally NOT overridden here - FMS.css's own ".k-group-start"/".k-group-end" rules
   (50px 0 0 50px / 0 50px 50px 0) already produce the correct legacy pill/oval shape once the
   button is no longer clipped to 50px wide; overriding radius down to 4px (a prior attempt) made
   the buttons look like plain rectangles instead of matching legacy's rounded toggle. Height is
   overridden too: legacy's compact 24px look came from ".PageInfoItem .k-button-group { height:
   24px; margin: auto; }", but that selector doesn't match the new ".fms-page-header-center" wrapper,
   so without an equivalent override here the button group stretches to the full 48px header height. */
.fms-page-header-center .k-button-group {
    height: 24px;
    margin: auto;
}

.fms-page-header-center .k-button-group .k-button {
    width: auto !important;
    min-width: 140px;
    height: 24px;
    padding: 0 12px;

}

    /* Telerik Blazor ButtonGroup renders <button class="k-button"> inside a <div class="k-button-group">.
   Theme it with the SAME CSS custom properties legacy's ".PageInfoItem.PageSwitch"/".k-button-group
   .k-button" rules used (FMS.css: base/hover via --Body_Button_Color/--Body_Text_Color/
   --Body_Button_Border_Color/--Body_Button_Hover_Color, selected via --Grid_Button_Color/
   --Grid_Icon_Color/--Grid_Button_Hover_Color) - NOT the --Header_* variables, which theme a
   different legacy element (the header/nav bar) and do not match the "Administer by Date/Personnel"
   toggle's actual legacy look. Scoped to the shared PageHeader component's CenterContent wrapper
   (.fms-page-header-center), which replaced the legacy .PageInfoItem.PageSwitch element. */
.ControlTitle, 
.fms-page-header {
    color: var(--Body_Text_Color);
}
.fms-page-header-center .k-button-group .k-button {
    color: var(--Body_Text_Color) !important;
}

    /* PageHeader.razor.css sets "pointer-events: none" on .fms-page-header-center itself (an
   overlay-centering trick so it can span the full header width without blocking clicks on the
   title/right zones). It re-enables pointer-events only via CSS isolation scoping applied to
   elements PageHeader.razor renders directly - but CenterContent is a RenderFragment supplied by
   each consuming page, so its markup never receives that scope attribute, and a scoped
   ".fms-page-header-center > *" rule would silently fail to match, leaving buttons unclickable
   despite rendering correctly. This global (non-isolated) rule re-enables pointer-events on any
   direct child of the center zone regardless of which component authored it. */
.fms-page-header-center > * {
    pointer-events: auto;
}

    .fms-page-header-center .k-button-group .k-button:hover {
        background-color: var(--Body_Button_Hover_Color) !important;
        border-color: var(--Body_Button_Border_Color) !important;
        color: var(--Body_Text_Color) !important;
    }
        .fms-page-header-center .k-button-group .k-button.k-selected {
            background-color: var(--Grid_Button_Color) !important;
            border-color: var(--Body_Button_Border_Color) !important;
            color: var(--Grid_Icon_Color) !important;
        }
        .fms-page-header-center .k-button-group .k-button.k-selected:hover {
            background-color: var(--Grid_Button_Hover_Color) !important;
            color: var(--Grid_Icon_Color) !important;
        }

    /* Theme the Export button (TelerikDropDownButton, migrated from legacy ucExportGrid.ascx) with
   the same skin color as the toggle buttons above, so both pick up FMS_Blue.css/FMS_Red.css/etc.
   Must live here in global app.css, NOT in ExportGridButton.razor.css's scoped CSS isolation:
   Blazor's scoping attribute is only applied to elements rendered directly by this component's own
   markup, but the actual <button class="k-button ExportGridButton"> DOM element is rendered
   internally by TelerikDropDownButton's own render tree, so the scope attribute never lands on it -
   confirmed via rendered DOM inspection that scoped rules silently do not apply here. Scoped to the
   shared PageHeader component's RightContent wrapper (.fms-page-header-right), which replaced the
   legacy .PageInfoItem.PageExport element. */
    .fms-page-header-right .k-button.ExportGridButton {
        background-color: var(--Header_Button_Color, #b21f26);
        border-color: var(--Header_Button_Color, #b21f26);
        color: var(--Header_Text_Color, #fff);
    }

        .fms-page-header-right .k-button.ExportGridButton .k-icon,
        .fms-page-header-right .k-button.ExportGridButton .k-button-text {
            color: white;
        }

        .fms-page-header-right .k-button.ExportGridButton:hover {
            background-color: var(--Header_Button_Hover_Color, #b21f26);
        }
    /* Theme the Export button's dropdown menu items (Excel/PDF/etc.) to match the button above. This
   popup is portaled to the DOM root by Telerik (NOT nested under .PageInfoItem.PageExport or
   carrying the button's ExportGridButton class - see the width-fix comment below), so it must be
   scoped via :has() on the Excel export icon, which is unique to this Export menu's items, rather
   than an ancestor/class selector. */
    .k-menu-popup:has(.k-svg-i-file-excel) .k-menu-link {
        background-color: var(--Header_Button_Color, #b21f26) !important;
        color: white;
    }

        .k-menu-popup:has(.k-svg-i-file-excel) .k-menu-link .k-svg-icon,
        .k-menu-popup:has(.k-svg-i-file-excel) .k-menu-link .k-menu-link-text {
            color: white;
        }

    .k-menu-group:has(.k-svg-i-file-excel) .k-item > .k-link:hover {
        background-color: var(--Header_Button_Hover_Color, #b21f26) !important;
    }
    /*Telerik portals the TelerikDropDownButton's item popup to the DOM root (inside a
   .k-animation-container wrapping a bare <div class="k-popup k-menu-popup"> with NO custom
   class carried over from the button's Class="ExportGridButton" - confirmed via rendered DOM
   inspection, so it is NOT reachable via the component's own scoped ExportGridButton.razor.css
   (::deep can't cross the portal boundary anyway) nor via a ".ExportGridButton" popup selector
   (that class never lands on the popup, only on the <button>). Telerik's JS already computes the
   correct inline "left"/"top" position to anchor the popup under the button (confirmed via
   rendered DOM: style="left: 1130.09px; top: 93.5625px"), so that must NOT be overridden - the
   only problem is the base swatch rule ".k-animation-container{width:100%}", which stretches the
   popup across the remaining page width from that anchored left position. Scope the fix using
   :has() on the Excel export icon, which is unique to this Export menu's items, so it doesn't
   affect other popups in the app; just shrink the width to fit its content instead of touching
   position. */
    .k-animation-container:has(.k-menu-popup .k-svg-i-file-excel) {
        width: max-content !important;
    }

    .k-menu-popup:has(.k-svg-i-file-excel) {
        width: max-content;
        min-width: 0;
    }

        .k-menu-popup:has(.k-svg-i-file-excel) .k-menu-link {
            padding: 8px 16px;
            white-space: nowrap;
        }
    /* Keeps the action buttons strictly aligned in a single horizontal row */
    .nowrap-command-cell {
        white-space: nowrap !important;
    }

    /* TelerikComboBox portals its dropdown/HeaderTemplate content to the DOM root (NOT nested under
       the combo's own render tree), so Blazor CSS isolation scoping from a component's .razor.css
       file (e.g. PersonnelPicker.razor.css) never applies to it. Style the "Show Active Only" header
       row shared by PersonnelPicker and BadgeFireServiceIDLookup's combo box globally here instead. */
    .fms-activeonly-picker-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--kendo-color-border, #dee2e6);
    }

.k-panelbar > .k-panelbar-header > .k-link.k-selected {
    color: var(--Body_Text_Color) !important;
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color) !important;
}
.k-panelbar {
    border-color: var(--Header_Footer_Border_LeftSidebarText_Color);
    color: var(--Body_Text_Color);
    /*background-color: var(--Header_Footer_Border_LeftSidebarText_Color);*/
    background-color: transparent;
}
k-panelbar > .k-panelbar-header + .k-panelbar-header {
    border-block-start-width: 1px;
    color: var(--Body_Text_Color) !important;
}
div.PanelHeaderLabel,
span.PanelHeaderLabel .rpText {
    font-weight: bold;
    color: var(--Body_Text_Color) !important;
}
.k-panelbar > .k-panelbar-header > .k-link {
    color: var(--Body_Text_Color) !important;
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color) !important;
}

/* Explicit expand/collapse affordance icon rendered in MyStationOperations.razor's PanelBar
   HeaderTemplate (legacy RadPanelBar's .PanelHeaderLabel:before +/- glyph has no equivalent in the
   Telerik Blazor PanelBar's DOM, so a TelerikSvgIcon is rendered directly in markup instead). */
.PanelHeaderToggleIcon {
    float: left;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    color: var(--Body_Text_Color);
}


/* fms-edit-panel: generic, reusable wrapper class for any "header calls detail edit form"
   component (e.g. DutyAdmin.razor -> DutyAssignmentEdit.razor, TimeEntriesGrid.razor's
   zero-hour popup -> TimeEntryEdit.razor). Add this class to an edit form's root element so
   shared control class names (dropdownLabel, inlineValidator, checkboxHolder, etc.) can be
   styled DIFFERENTLY inside the edit form vs. their default/header-row appearance, without ever
   renaming the shared class. Header rows keep using the unscoped rule (e.g. plain
   ".dropdownLabel { ... }" above); add edit-form-only overrides here, scoped under
   ".fms-edit-panel", e.g.:

       .fms-edit-panel .dropdownLabel {
           font-weight: 600;
       }

   Add further ".fms-edit-panel <shared-class> { ... }" overrides below as needed - do not
   duplicate these rules per-component; keep them centralized here so every edit form that opts
   into ".fms-edit-panel" behaves consistently. */

.fms-edit-panel {
    /*You need border:none with inputs first before custom styling w/ borders*/
    border: none;
    padding: 10px;
}
.PersonalEditForm,
.InlineEditForm,
.InlineEditForm.NoErrorTable {
    padding: 0;
}

    .PersonalEditForm td {
        padding-right: 20px;
        vertical-align: text-top;
    }

    .PersonalEditForm.WebSettings td {
        padding-right: 0px;
    }

    .fms-edit-panel .k-combobox {
        /*background-color: var(--Grid_Button_Color);*/
    }
        .fms-edit-panel .k-combobox .k-input-inner::placeholder {
            font-style: italic;
        }

/* Legacy .checkboxHolder (FMS.css) uses position: absolute, which was designed for the old
   WebForms table layout with a positioned ancestor. Inside the Bootstrap col-based fms-edit-panel
   layout (e.g. ShiftEdit.razor's Approved checkbox) that makes it float out of its column, so
   pin it back to normal flow here. */
.fms-edit-panel .checkboxHolder {
    position: static;
}

        .fms-edit-panel .k-combobox .k-input-button {
            background-color: var(--Grid_Button_Color, blue);
        }

    .fms-edit-panel .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
        color: var(--Grid_Icon_Color);
    }
    .fms-edit-panel .k-input .k-clear-value {
        padding-block: var(--kendo-spacing-1) calc(1 * 0.25rem);
        padding-inline: var(--kendo-spacing-1);
        box-sizing: content-box;
        /*background-color: #fff;*/
    }
    /* The k-clear-value ("X") button only renders once a ComboBox has a value, and since it's a
       flex sibling of k-input-inner inside the input wrapper, its presence/absence changes how
       much width is left for the input text - causing the field's text/cursor to visibly shift
       left/right each time a value is selected/cleared. Keep the clear button in normal flow
       (so it still renders/behaves as a real, clickable Telerik control), but reserve an
       equivalent "ghost" width before the chevron button whenever the clear button is NOT
       present, so the total space consumed by clear-button-or-placeholder stays constant and
       k-input-inner's available width never changes. */
    .fms-edit-panel span.k-combobox:not(:has(.k-clear-value)) .k-input-button::before {
        content: '';
        display: inline-block;
        width: 1.75rem;
    }
    .fms-edit-panel span.k-picker,
    .fms-edit-panel span.k-input:not(.k-textarea) {
        border: none;
        border-bottom: 2px solid;
        border-radius: 3px 3px 0 0;
        outline: none;
        border-bottom-color: var(--Modal_Input_Border_Color);
        height: 28px;
    }
    /* Same underline treatment as the single-line inputs above, but without the fixed 28px
       height that was clamping TelerikTextArea (rendered as span.k-input.k-textarea) down to a
       single visible line regardless of its Rows parameter. */
    span.k-input.k-textarea {
        border: none;
        border-bottom: 2px solid;
        border-radius: 3px 3px 0 0;
        outline: none;
        border-bottom-color: var(--Modal_Input_Border_Color);
    }
    .fms-edit-panel span.k-input.k-focus {
        border-bottom-color: var(--Body_Field_Border_Focus_Color);
    }

    .fms-edit-panel .k-button,
    .fms-edit-panel .k-button.k-button-base,
    .fms-edit-panel .k-button.k-button-solid,
    .fms-edit-panel .k-button.k-button-solid.k-button-base,
    .fms-edit-panel .k-button.k-button-error,
    .fms-edit-panel .k-button.k-button-solid.k-button-error,
    .fms-edit-panel .k-picker .k-input-button {
        border-color: var(--Grid_Button_Color);
        color: var(--Grid_Icon_Color);
        background-color: var(--Grid_Button_Color);
    }

        .fms-edit-panel .k-button:hover {
            border-color: var(--Modal_Input_Button_Color, #b21f26);
            background-color: var(--Grid_Button_Hover_Color);
        }

.flexChild {
    margin: 20px 13px 15px;
    display: flex;
    flex-direction: column;
}
/* fms-edit-page: page-level wrapper for the "ComboBox picker selects one record, edit form
   always shown inline below, Save/Cancel bar" page archetype (e.g. UnitMaintenance.razor).
   This is distinct from .fms-edit-panel (which scopes an embeddable edit FORM component's own
   controls, e.g. UnitEdit.razor/CrewsEdit.razor/DutyAssignmentEdit.razor) - .fms-edit-page only
   wraps the PAGE (header/picker + hosted edit form + save bar), and should not be applied to the
   edit-form component itself. The hosted edit-form component keeps using .fms-edit-panel for its
   own input/button theming, so the two classes are meant to be nested: a .fms-edit-page wraps a
   child using .fms-edit-panel. Mirrors #WebSettingsContainer/#SecuritySettingsContainer's
   "position: relative; height: inherit;" (see FMS.css) so the .fms-edit-page-save-bar child can
   be absolutely bottom-pinned within it, matching WebSettings.razor's save-bar behavior. */
.fms-edit-page {
    border: none;
    position: relative;
    height: inherit;
    overflow-x: auto;
}

/* Bottom-pinned Save/Cancel bar, mirroring WebSettings.razor's .webSettingSaveContainer
   (position: absolute; bottom: 0; width: 100%; see FMS.css .webSettingSaveContainer). Its
   SaveButtonTable buttons share the same pill-outline theming as every other host context (see
   the shared .SaveButtonTable ruleset above), aside from the zero top/bottom padding override
   defined alongside it. */
.fms-edit-page-save-bar {
    position: absolute;
    bottom: 0px;
    display: block;
    justify-content: center;
    width: 100%;
    border-top: 2px solid var(--Border_Color);
    background-color: var(--Header_Footer_Border_LeftSidebarText_Color);
}

/* Same look as .fms-edit-page-save-bar (SaveButtonTable button theming) but laid out IN-FLOW
   rather than absolutely bottom-pinned. Use this for Save bars hosted inside a TelerikWindow/
   modal (e.g. UnitMaintenance.razor's "Add New Unit" window), where absolute positioning would
   overflow the window's bounds and introduce an unwanted scrollbar. Kendo's k-window-content is
   a flex container (row direction by default), so this must force block/full-width layout,
   otherwise the button renders beside the edit form instead of below it. */
.fms-modal-save-bar {
    display: flex;
    flex: 0 0 100%;
    justify-content: center;
    width: 100%;
    margin-top: 0rem;
}

/* Selected/active TabStripTab styling, matching legacy FMS.css's #MainContentContainer
   div.RadTabStrip li.rtsLI.rtsSelected treatment (4px bottom accent border, no full border/
   background fill) rather than the Header_* variables used for the app header bar. Blazor's
   TelerikTabStrip nests the actual item markup one level deeper than legacy's RadTabStrip
   (.k-tabstrip-items-wrapper > .k-tabstrip-item, vs. legacy's ul.rtsUL > li.rtsLI directly), so
   the selector must target .k-tabstrip-item itself (not an ancestor) to match specificity. */
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-window-content .k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-window-content .k-tabstrip-items-wrapper .k-tabstrip-item.k-selected {
    border-bottom: 4px solid var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
}
.k-tabstrip-items-wrapper .k-tabstrip-item,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-selected,
.k-window-content .k-tabstrip-items-wrapper .k-tabstrip-item,
.k-window-content .k-tabstrip-items-wrapper .k-tabstrip-item.k-active,
.k-window-content .k-tabstrip-items-wrapper .k-tabstrip-item.k-selected {
    color: var(--LeftSidebar_Text_ScrollbarBackground_Color) !important;
}
.k-tabstrip-items-wrapper .k-tabstrip-item:focus,
.k-tabstrip-items-wrapper .k-tabstrip-item,
.k-tabstrip-items-wrapper .k-tabstrip-item.k-active {
    background: transparent;
    border: none;
    box-shadow: none;
}
.k-tabstrip .k-tabstrip-items .k-link {
    padding: 6px 12px;
    height: 100%;
}

.k-tabstrip img.k-image {
    height: 30px;
    margin: 0px;
}

/* Warning icon shown in a TabStripTab's HeaderTemplate (e.g. PersonnelEdit.razor's Personal/
   Operational tabs) when that tab currently contains one or more invalid fields. Scoped to the
   icon element itself (rather than a wrapping span around both title + icon) so only the icon
   is colored - the tab title text keeps its normal theme color. */
.fms-tab-error-icon.k-svg-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: var(--kendo-color-error, #d32f2f);
}
.fms-error-icon.k-svg-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0px;
    color: var(--kendo-color-error, #d32f2f);
}

.k-loader-canvas {
    color: var(--Header_Button_Color, #b21f26);
}

/* Reusable "Save As New Sort Order" button styling for the Sort Order column header of the
   lookup-table grids hosted in CategoryMaintenance.razor (DivisionsGrid, RanksGrid, etc.). */
.SortOrderSaveButton.k-button {
    background: transparent;
    border: none;
    height: 13px;
    padding: 0px;
}
.SortOrderSaveButton.k-button:hover {
    background: transparent;
}

    .SortOrderSaveButton.k-button .k-button-icon.k-svg-icon > svg {
        color: var(--Grid_Text_Color);
        width: 13px;
        height: 13px;
        margin-bottom: 3px;
    }

    .SortOrderSaveButton.k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
        color: var(--Grid_Text_Color);
        width: 13px;
        height: 13px;
        margin-left: 2px;
        margin-bottom: 3px;
    }
/* Troubleshooting Main page */
.MainTableContainer.Expandable
{
    background-color: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
    padding: 0;
}
.fms-personnel-swap {
    padding: 0px 25px 16px;
    width: 250px;
}
    .fms-personnel-swap .form-label {
        font-size: 11px;
        margin: 10px 10px 10px 0;
        font-weight: bold;
    }
    .fms-personnel-swap .RadioButtonList {
        font-weight: bold;
        font-size: 12px;
        position: relative;
        top: 0px;
        border-bottom: 1px solid #b6b7da;
        padding-bottom: 10px;
        margin-bottom: 7px;
    }
        .fms-personnel-swap .RadioButtonList .RadioButtonLabel {
            margin-bottom: 10px;
        }
/* .fms-edit-form's layout responsibilities (flex row, title/center/right positioning) have been
   superseded by the shared PageHeader component (Components/Shared/PageHeader.razor.css). The
   .PageHeaderButtonGroup button theming below is still used by pages rendering a button group in
   PageHeader's CenterContent, so it is retained, scoped under .fms-page-header-center.
   .fms-page-header-center is a flex container without align-items set (defaults to "stretch"), but
   .PageHeaderButtonGroup itself is a plain block-level div, so its <button> children were only
   vertically centered by the wrapper's own block layout, not the header's flex centering - this
   made the Add/Delete buttons sit at the top of the (taller) header instead of vertically centered.
   Make the wrapper itself a flex container so its buttons center within the header's height. */
.fms-page-header-center .PageHeaderButtonGroup {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

    .fms-page-header-center .PageHeaderButtonGroup .k-button {
        background-color: transparent;
        border-radius: 20px;
        min-width: 100px;
        padding: 3px 5px;
        border: 2px solid var(--Button_Toggle_Selected_TitleBar_Border_Color);
    }

        .fms-page-header-center .PageHeaderButtonGroup .k-button:hover {
            background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
        }

        .fms-page-header-center .PageHeaderButtonGroup .k-button.cancelButton {
            background-color: transparent;
            color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
            border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
        }

            .fms-page-header-center .PageHeaderButtonGroup .k-button.cancelButton:hover {
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
            }

        .fms-page-header-center .PageHeaderButtonGroup .k-button .k-button-text {
            color: var(--LeftSidebar_Text_ScrollbarBackground_Color, #b21f26);
            font-size: 12px;
            position: relative;
            top: 0px;
            padding: 0px
        }

        .fms-page-header-center .PageHeaderButtonGroup .k-button.k-button-primary {
            border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
            color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
            background-color: transparent;
        }

            .fms-page-header-center .PageHeaderButtonGroup .k-button.k-button-primary:hover {
                border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color, #b21f26);
                background-color: var(--FieldsBackground_DropDown_SectionBars_Border_Color);
            }
    .fms-page-header-center .k-switch-off .k-switch-thumb {
        border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
        color: var(--kendo-color-on-app-surface);
        background-color: transparent !important;
    }


    .fms-page-header-center .k-switch-on .k-switch-track {
        border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
        color: var(--kendo-color-on-primary);
        background-color: var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
    }

/* Same narrower, centered footprint as PersonnelAdmin.razor's own PersonnelAdmin.razor.css rule
   (#PersonnelAdminContainer/.fms-add-personnel-modal-content .k-tabstrip-content), applied to
   UnitMaintenance.razor and VehicleMaintenance.razor - both host a single TelerikTabStrip (via
   UnitEdit/VehicleEdit) whose tabs should share one common width boundary rather than each
   shrinking to its own intrinsic content width. */

/* FMS.css\u0027s legacy ".k-tabstrip { float: left; }" rule (still needed elsewhere for RadTabStrip
   parity) prevents this TabStrip and its "margin: auto"-centered content below from centering on
   the page, since floated elements don\u0027t participate in normal auto-margin/flex centering.
   Un-float it here so the width-capped, margin-auto .k-tabstrip-content can center correctly. */
#UnitMaintenanceContainer .k-tabstrip,
#VehicleMaintenanceContainer .k-tabstrip,
.k-window-content .k-tabstrip {
    float: none;
    width: 100%;
}

/* PersonnelAdmin.razor's "Add New Personnel" modal (.fms-add-personnel-modal-content, styled in
   PersonnelAdmin.razor.css) needs its Save/Cancel bar absolutely bottom-pinned regardless of
   active tab. Percentage/flex-based height propagation from TelerikWindow's fixed
   Height="675px" down through ".k-window" -> ".k-window-content" -> .fms-add-personnel-modal-
   content proved unreliable (.fms-add-personnel-modal-content kept sizing to its own tab content
   - e.g. 612px on Personal, 572px on Operational - instead of the window's full height). Sidestep
   that chain entirely: make ".k-window-content" a positioning context and force
   .fms-add-personnel-modal-content (see PersonnelAdmin.razor.css) to absolutely fill it exactly,
   regardless of its own content's height. Must live here (not as a scoped "::deep" rule in
   PersonnelAdmin.razor.css) since ".k-window-content" is an ancestor rendered by TelerikWindow
   itself, outside that scope. Scoped via :has() so it only affects this modal, not other
   TelerikWindows. */
.k-window-content:has(> .fms-add-personnel-modal-content) {
    position: relative;
}

/*#UnitMaintenanceContainer .k-tabstrip-content {
    max-width: 900px;
}*/

#VehicleMaintenanceContainer .k-tabstrip-content {
    max-width: 900px;
}


/* TelerikWindow (e.g. UnitMaintenance.razor's/VehicleMaintenance.razor's "Add New ..." modal)
   renders its k-window-content OUTSIDE of #UnitMaintenanceContainer/#VehicleMaintenanceContainer
   in the DOM, so the max-width/centering rules above never applied to the same UnitEdit/
   VehicleEdit form when hosted in the Add modal - making its fields render wider/narrower
   relative to the window than the inline (non-modal) edit form renders relative to its page
   container. Apply the same caps inside k-window-content so both hosts render identically. */

.k-window-content #UnitEditContainer .k-tabstrip-content {
    max-width: 900px;
}

.k-window-content .fms-vehicle-edit .k-tabstrip-content {
    max-width: 900px;
}
    #UnitMaintenanceContainer .k-tabstrip-content,
    #VehicleMaintenanceContainer .k-tabstrip-content,
    .k-window-content .k-tabstrip-content {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        align-self: center;
        overflow-x: hidden;
    }

        #UnitMaintenanceContainer .k-tabstrip-content .k-grid,
        #VehicleMaintenanceContainer .k-tabstrip-content .k-grid {
            width: 100%;
        }
    /* Bootstrap's .row applies negative gutter margins (margin-left/margin-right: calc(-.5 *
   var(--bs-gutter-x))) so its .col-* children's own padding lines back up with the container
   edge. Inside the width-capped tabstrip content above (and inside TelerikWindow "Add" modals
   hosting the same Bootstrap .row/.col-md-* based edit forms - PersonnelInsert/UnitEdit/
   VehicleEdit), this makes the .row itself render wider than its capped container, causing an
   unwanted horizontal scrollbar. Clip the .row back to the container's own width instead of
   removing the gutter margins globally (which are still needed for column alignment). */
    #UnitMaintenanceContainer .row,
    #VehicleMaintenanceContainer .row,
    .k-window-content .row {
        max-width: 100%;
    }

    div label {
        font-size: 12px;
        font-weight: bold;
        color: var(--LeftSidebar_Text_ScrollbarBackground_Color);
    }
    div.row {
        margin: 0px;
    }

/* UnitEdit.razor's and VehicleEdit.razor's "Is Active" checkbox + label row (General Info tab): lays the TelerikCheckBox
   and its label out side-by-side (checkbox first, then label) instead of stacking them. */
.ck-UnitActive-container,
.ck-VehicleActive-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* MainLayout.razor's app-wide TelerikNotification (see AppNotificationService): the Telerik
   animation container that hosts the toast(s) is position:fixed and stretches across a large
   area of the viewport (per the component's Position settings) even where no toast bubble is
   currently rendered inside it. With default pointer-events, that invisible area swallows
   clicks meant for whatever is underneath (e.g. Telerik Grid command buttons), so nothing is
   clickable there until the toast auto-dismisses/closes and the container is removed. Disable
   pointer events on the container itself and re-enable them only on the actual toast bubble so
   clicks pass through everywhere except the visible notification. */
.AppNotification {
    pointer-events: none;
}

.AppNotification .k-notification {
    pointer-events: auto;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    border-width: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

    .AppNotification .k-notification .k-svg-icon {
        width: 22px;
        height: 22px;
    }

/* Shared informational icon + tooltip, used next to a field's label (dropdownLabel) to explain
   what the field means/how it's used. Originally introduced in WebSettings.razor.css; promoted to
   this global stylesheet so any edit form (e.g. UnitEdit.razor, VehicleEdit.razor) can reuse it
   without duplicating the rule in its own CSS-isolated file. Usage:

       <label class="dropdownLabel">
           Field Name
           <span class="SettingInfoIcon" title="Explanation of the field.">
               <TelerikSvgIcon Icon="@SvgIcon.InfoCircle" />
           </span>
       </label>
*/
.SettingInfoIcon {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 3px;
    color: var(--BackGroundColorAccent, #6c757d);
    cursor: help;
    position: relative;
    top: -1px;
}


.SettingInfoIcon .k-svg-icon {
        width: 14px;
        height: 14px;
    }

/* Personnel Admin History grid: highlights the currently-open (ExitDate IS NULL) record's row,
   mirroring the legacy ucPersonnelAdminHistoryGrid.ascx shaded "Active" row (see
   PersonnelAdminHistoryGrid.razor's OnRowRender). */
.k-grid tr.fms-admin-history-open-row > td {
    background-color: var(--Grid_Selected_Row_Background_Color, #e8f1fb);
}
/*Leave Admin*/
.LeaveAdminContainer {
    display: flex;
    height: 100%;
    width: 100%;
}
#LeaveDropdownDiv {
    padding: 10px 20px 0px;
}
/*Alerts*/
div.alert {
    padding-block: 10px;
    margin-inline: 20px;
    margin-block: 10px;
}
/*Pivot grids*/
.fms-duty-crosstab-toolbar {
    padding: 3px 10px 10px;
}
/*Side Controls*/
.nestedGroup {
    font-size: 10px;
    font-style: italic;
    margin: 1px 10px 7px;
    margin-left: 40px;
}
/*Page headers*/
.ControlTitle.PageInfoItem {
    display: block;
}
.ControlTitle.PageInfo .ControlTitleRight {
    float: right;
    padding-right: 25px;
}
.ControlTitle.DefaultsTitle {
    background-color: transparent;
    margin-inline: 130px;
    border-bottom-color: var(--Header_Footer_Border_LeftSidebarText_Color);
}
.ControlTitle.PageInfoItem .ControlTitleRight {
    display: flex;
    align-items: center;
    gap: 15px;
    float: right;
    padding-right: 25px;
}
.ControlTitle.PageInfoItem .subLabel {
    font-weight: bold;
    white-space: nowrap;
}
.ControlTitle.PageInfoItem .k-combobox {
    margin-right: 0px;
}

.PageInfo.SwitchHolder .k-button-group > .k-button + .k-button {
    margin-inline-start: 1px;
}
.PageSubInfo {
    width: 100%;
}
.subLabelContainer {
    width: 150px;
    display: inline-block;
}
.SecurityAssignmentContainer .ControlTitle {
    background: transparent;
    text-align: left;
    padding-left: 19px;
    font-size: 18px;
}

.fms-page-header span.telerik-blazor.k-dropdownlist.k-picker,
.fms-page-header span.k-combobox.k-input,
.fms-page-header span.k-datepicker:hover,
.fms-page-header span.k-datepicker,
.ControlTitle span.k-datepicker:hover,
.ControlTitle span.k-datepicker,
.ControlTitle span.telerik-blazor.k-dropdownlist.k-picker,
.ControlTitle span.k-combobox.k-input,
.ControlTitle span.k-maskedtextbox.k-input,
.ControlTitle span.k-textbox.k-input,
.ControlTitle span.k-numerictextbox.k-input {
    border: 2px solid var(--Header_Field_Border_Color);
    border-radius: 4px;
}
/*Modal Panel and k-windows*/
div.k-window-titlebar {
    background-color: var(--Modal_Title_Background_Color);
    color: var(--Modal_Title_Text_Color);
    padding: 7px 10px;
    border: 1px solid var(--Modal_Background_Color);
}

div.k-window-content {
    background-color: var(--Modal_Background_Color);
    padding: 0px;
}
.k-window-content #InventorySizeMaintenanceContainer,
.k-window-content .MainTableContainer {
    height: calc(100% - 50px);
    max-height: calc(95vh - 84px);
}
.k-window-content .InlineEditTable {
    height: 100%;
    max-height: calc(95vh - 84px);
}
.k-window-content #InventorySizeMaintenanceContainer .telerik-blazor.k-grid,
.k-window-content .InlineEditTable .telerik-blazor.k-grid {
    max-height: calc(95vh - 84px);
}
.k-window-content .k-form.k-form-md {
    padding: 10px;
}
.ModalPanel .k-picker,
.ModalPanel .k-input {
    border: none;
    border-bottom: 2px solid;
    border-radius: 3px 3px 0px 0px;
    border-color: var(--Modal_Input_Border_Color);
    background-color: var(--Modal_Input_Background_Color);
    height: 28px;
}

.ModalPanel .k-timepicker.k-focus,
.ModalPanel .k-datepicker.k-focus {
    border-color: var(--Body_Field_Border_Focus_Color);
}

.ModalPanel .k-button.k-icon-button {
    background-color: var(--Modal_Input_Button_Color);
    border: none;
    padding: 3px;
}

    .ModalPanel .k-button.k-icon-button:hover {
        background-color: var(--Modal_Input_Button_Hover_Color);
    }

    .ModalPanel .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
        color: var(--Modal_Input_Icon_Color);
    }

div.k-overlay {
    background-image: linear-gradient(var(--Modal_Gradient_Color_Top), var(--Modal_Gradient_Color_Bottom)) !important;
}

.ModalPanel label {
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 0px;
    font-weight: bold;
    font-size: 11px;
    margin-right: 0px;
}

.ModalPanel td > .checkboxLabel {
    padding-top: 7px;
    padding-left: 0px;
    font-weight: bold;
}

td span.k-textbox.padded-textbox {
    margin-right: 15px;
}

.checkboxLabel,
.dropdownLabel {
    font-weight: bold;
    margin-right: 0px;
    font-size: 11px;
}
.readonlyLabel {
    padding-left: 12px;
    padding-top: 3px;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*For readonly comment box*/
span.LongNotesBox.readonlyLabel {
    display: block;
    width: 100%;
    white-space: normal;
}
input[type="radio"] {
    margin-right: 5px;
    position: relative;
    top: 2px;
    accent-color: var(--Grid_Button_Color);
}
.flexChild .RadioButtonContainer {
    display: inline-flex;
    width: 250px;
}
.flexChild .RadioButtonList {
    display: flex;
    flex-direction: column;
}
.RadioButtonContainer .k-datepicker {
    margin-left: 10px;
    margin-top: 2px;
}
div.checkBoxContainer {
    margin-bottom: 5px;
}
.k-window-actions {
    background-color: var(--Modal_Background_Color);
    border: none;
    justify-content: center;
}
/*Grid Header controls*/
div.k-grid .k-cell-inner > .k-link {
    flex: 0 1 auto;
}

div.k-grid .k-grid-header .k-filterable > .k-cell-inner .k-link {
    padding-inline: var(--kendo-spacing-2);
}
.k-grid-filter-menu.k-grid-header-menu {
    color: var(--Grid_Text_Color);
}
.k-grid-header .k-grid-filter:hover,
.k-grid-header .k-header-column-menu:hover,
.k-grid-header .k-grid-header-menu:hover,
.k-grid-header .k-hierarchy-cell .k-icon:hover {
    color: var(--Grid_Text_Color);
    background-color: color-mix(in srgb, var(--Grid_Text_Color) 12%, transparent);
}
div.k-grid-header .k-grid-header-menu.k-active:hover {
    background-color: color-mix(in srgb, var(--Grid_Text_Color) 12%, transparent);
}
div.k-grid-header .k-grid-header-menu.k-active {
    background-color: transparent;
    color: var(--Grid_Button_Color);
}

div.k-grid-header-menu.k-active .k-svg-i-filter svg path {
    /* Swaps Telerik's hollow path for a solid, fillable funnel path */
    d: path("M3.1969 5.7544A.75.75 0 0 1 3.75 4.5h16.5a.7502.7502 0 0 1 .7403.8699.75.75 0 0 1-.1853.3845L14.25 12.75v5.4984a.7496.7496 0 0 1-.3337.6244l-3 1.9997a.75.75 0 0 1-.7695.0378.75.75 0 0 1-.3968-.6603v-7.5z") !important;
    fill: currentColor !important;
    stroke-width: 1.5px;
}

div.k-grid th.ActionColHeader {
    padding-left: 0px;
    padding-right: 0px;
}

    div.k-grid th.ActionColHeader .k-link {
        flex: 1;
        justify-content: center;
    }

    div.k-grid th.ActionColHeader > span.k-cell-inner {
        margin-inline: 0px;
    }

    div.k-grid th.SortOrderHeader a,
    div.k-grid th.ActionColHeader a {
        display: none !important;
    }

.WithGroupHeader.k-grid .k-grid-aria-root {
    position: relative;
    top: -29px;
}

div.k-grid .k-grid-header,
div.k-grid-header-wrap {
    border: none;
    padding: 0px;
}
/*Accounts for scrollbar when setting header widths*/
.k-grid .k-grid-header-wrap {
    padding-right: 17px !important;
}
.k-grid-toolbar {
    border: none;
    padding-top: 25px;
    padding-bottom: 0px;
}

.hide-toolbar .k-toolbar {
    display: none;
}

.k-toolbar-items.k-toolbar-items-scroll {
    padding-inline: 0px;
}

.k-toolbar-items {
    padding: 0px;
}

.k-grid-toolbar button.telerik-blazor.k-button.k-icon-button {
    height: 32px;
    width: 32px;
}

.RightButton {
    margin: auto;
    margin-right: 0;
}

.telerik-blazor.k-grouping-header {
    padding: 2px;
    position: relative;
    background: white;
    border-radius: 5px;
    height: 34px;
    margin: 25px 0 0 0;
    border: 2px solid var(--Grid_Row_Border);
}

div.k-grid .k-table-row.k-selected > .k-table-td:not(.k-group-cell) {
    background-color: var(--Grid_Selected_Row_Background_Color, #e8f1fb);
}
/* The -33px offset below is only valid when a .k-grid-toolbar row (even an empty
   <GridToolBarTemplate>) renders above the grouping panel, since it's meant to pull the panel
   up into that toolbar's reserved space. Without a toolbar sibling, applying the same offset
   shifts the panel up into whatever precedes the grid (e.g. a PageInfo header), rendering it
   invisible/clipped behind that content instead of inside the grid. */
.k-grid-toolbar + .telerik-blazor.k-grouping-header {
    top: -33px;
    margin: 0;
    padding: 0;
    margin-left: 45px;
}

.NoAdd .k-grid-toolbar + .telerik-blazor.k-grouping-header {
    margin-left: 0px;
}

.k-grouping-header > .k-grouping-drop-container {
    justify-content: center;
    margin: 10px,0,0,0
}

div.k-grid .k-grid-header .k-table-th {
    border: none;
}

div.k-grid th.SortOrderHeader button {
    background: transparent;
    border: none;
    height: 11px;
}

div.k-grid th.SortOrderHeader .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
    color: var(--Grid_Text_Color);
    width: 13px;
    height: 13px;
    margin-bottom: 3px;
}
/*Grid Footer Controls*/
div.k-grid-pager {
    background: transparent;
    color: var(--Grid_Text_Color);
    border-top: none;
}

    div.k-grid-pager .k-pager-nav.k-button.k-icon-button .k-button-icon.k-svg-icon > svg, div.k-grid-pager button.k-button.k-button-primary {
        color: var(--Grid_Text_Color);
    }

.WithGroupHeader .k-grid-pager {
    position: relative;
    top: -29px;
}
/*Grid Contents*/
div.k-grid a:hover,
div.k-grid a {
    text-decoration: underline;
}
.MembersMainContent div.k-grid-content {
    max-height: 385px !important;
}
table.MessageTable .k-grid tr > td.custom-sorted, .k-grid td.custom-sorted {
    background-color: var(--Grid_Row_Sort_Color);
}

.MessageTable .k-grid .k-table-row:hover td.custom-sorted, .MessageTable .k-grid .k-table-alt-row:hover td.custom-sorted, .k-grid .k-table-row:hover td.custom-sorted, .k-grid .k-table-alt-row:hover td.custom-sorted {
    background-color: var(--Grid_Row_Hover);
}

table.MessageTable .k-grid tr > td.custom-sorted, .k-grid .k-table-row:hover td.custom-sorted {
    background-color: var(--Grid_Row_Sort_Color);
}

.k-grid-table button.telerik-blazor.k-icon-button.FixTelerikButtonWidth {
    margin-right: 2px;
}
tr.k-grid-edit-row .HideinEditRow {
    display: none;
}
.k-grid-table button.telerik-blazor.k-icon-button {
    margin-right: 4px;
    box-shadow: none;
}

.k-grid-edit-row .k-picker button.telerik-blazor.k-icon-button {
    margin-right: 0px;
}

div.k-grid tr.k-table-row {
    border: 0px;
}

div.k-grid .k-grouping-row td.k-table-td {
    padding-left: 0px;
    font-size: 15px;
    font-weight: normal;
    color: var( --Grid_Text_Color);
    background-color: var(--Grid_Group_Color);
    border-top-width: 2px;
}

div.k-grid .k-grouping-row p.k-reset {
    padding-left: 13px;
}

div.k-grid .k-grouping-row.k-table-row:hover > td:first-child:before {
    content: none;
}

div.k-grid .k-grouping-row .k-group-cell, .k-grid .k-grouping-row + .k-table-row .k-group-cell {
    border-block-start-width: 1px;
}

div.k-grid .k-table-row:not(.k-grouping-row,.k-group-footer):has(+.k-grouping-row) > .k-table-td {
    border-block-end-width: 0px;
}
/*border-right-color is for sticky column border*/
.k-grid .k-table-row > td,
.k-grid .k-table-alt-row > td,
.k-grid .k-table-row > td {
    border-top: 1px solid var(--Header_Footer_Border_LeftSidebarText_Color);
    border-right-color: var(--Header_Footer_Border_LeftSidebarText_Color) !important; 
}
div.k-grid .k-table-tbody .k-group-cell {
    background-color: transparent;
}

td.k-table-td.k-command-cell {
    text-align: right;
}
.k-table-thead,
.k-grid-header,
.k-grouping-header,
.k-toolbar,
div.k-grid {
    background-color: transparent;
}
.k-grid-header span.k-sort-icon {
    margin-right: 0px !important;
    margin-left: 2px !important;
}

.k-grid-header span.k-link {
    padding-right: 0px !important;
}

.k-grid-header .k-grid-filter-menu.k-grid-header-menu {
    padding: 0px !important;
    margin: 0px !important;
}
.k-grid-header .k-sort-order,
.k-grid-header .k-sort-icon {
    color: var(--Grid_Button_Color);
}

div.k-grid .k-grouping-row .k-svg-icon > svg {
    color: var(--Grid_Text_Color);
}

div.k-grid .k-cell-inner {
    width: 100%;
    overflow: visible;
}
.custom-no-data p {
    padding: 0px;
    margin: 0px;
}
/*Inline Edit Column */
    div.k-grid .k-table-alt-row {
        background-color: color-mix(in srgb, var(--Grid_Text_Color) 5%, transparent);
    }
div.k-grid .k-grid-edit-row {
    background-color: var(--Grid_Inline_Editor_Background_Color);
}

    div.k-grid .k-grid-edit-row > td:before {
        background-color: var(--Grid_Button_Color);
    }

    div.k-grid .k-grid-edit-row span.k-input {
        border: none;
        border-radius: 3px 3px 0px 0px;
        border-bottom: 2px solid var(--Grid_Inline_Editor_Field_Border_Color);
        height: 28px;
    }

    div.k-grid .k-grid-edit-row .k-input, div.k-grid .k-grid-edit-row .k-input:hover {
        background-color: var(--Grid_Inline_Editor_Field_Background_Color);
    }

    div.k-grid .k-grid-edit-row span.k-input.k-focus {
        border-bottom-color: var(--Body_Field_Border_Focus_Color);
    }

    div.k-grid .k-grid-edit-row span.k-input.k-invalid {
        border-bottom-color: red;
    }
    div.k-grid .k-grid-edit-row .k-picker .k-button.k-icon-button,
    div.k-grid .k-grid-edit-row .k-input .k-button.k-icon-button {
        background-color: var(--Grid_Inline_Editor_Field_Background_Color);
        border: none;
        padding: 3px;
        margin-right: 0px;
    }
    div.k-grid .k-grid-edit-row .k-picker .k-button.k-icon-button:hover,
    div.k-grid .k-grid-edit-row .k-input .k-button.k-icon-button:hover {
        background-color: var(--Body_Field_Button_Hover_Color);
    }
    div.k-grid .k-grid-edit-row .k-picker .k-button.k-icon-button .k-button-icon.k-svg-icon > svg,
    div.k-grid .k-grid-edit-row .k-input .k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
        color: var(--Grid_Text_Color);
    }

.validation-asterisk {
    color: red;
    margin-left: 5px;
}

div.k-grid td > a:not([href]):not([class]) {
    color: var(--Link_Color);
    text-decoration: underline;
    cursor: pointer;
}
/*Telerik Reports*/
#reportIFrame {
    height: 100%;
    width: 100%;
}
/*k-svg-icon*/
div.k-grid .k-grouping-row .k-svg-icon {
    height: 16px;
    width: 16px;
    margin-right: 6px;
    margin-inline-start: 8px; /*for grouping arrows*/
}

.k-svg-icon {
    height: 14px;
    width: 14px;
}

.k-input-spinner .k-svg-icon {
    height: 12px;
    width: 12px;
}
/* Make svg icons thicker */
.k-toolbar-items .k-svg-icon path {
    stroke: currentColor;
    stroke-width: 2.5px;
    stroke-linejoin: round;
}
.k-menu-link .k-svg-icon path,
.k-panelbar .k-svg-icon path,
.UAUnitHeader .k-svg-icon path,
.UAStaffingHeader .k-svg-icon path,
.PopupHeader .k-svg-icon path,
.k-window-titlebar .k-svg-icon path,
.k-grouping-row .k-svg-icon path,
th.SortOrderHeader .k-sort-icon .k-svg-icon path,
.k-sort-icon .k-svg-icon path,
.k-combobox .k-svg-icon path,
.k-dropdownlist .k-svg-icon path,
.k-numerictextbox .k-svg-icon path,
#RightNav .k-svg-icon path,
.bold-icn .k-svg-icon path {
    stroke: currentColor;
    stroke-width: 1.5px;
    stroke-linejoin: round;
}
.k-svg-icon.k-svg-i-filter path,
.SettingInfoIcon path,
th.SortOrderHeader .k-svg-icon path,
div.k-grid-pager .k-pager-nav .k-svg-icon path,
.k-datepicker .k-svg-icon path,
.k-table-tbody .k-svg-icon path {
    stroke: currentColor;
    stroke-width: .5px;
    stroke-linejoin: round;
}
/* =====================================================================
   K CONTROLS
   ===================================================================== */
/*k-buttons*/
.ButtonColumn {
    margin-top: 60px;
    margin-bottom: 20px;
}
.k-button-icon {
    color: white;
    align-self: center;
    position: relative
}

button.k-button.gridlike-button.k-icon-button .k-button-icon.k-svg-icon > svg {
    color: var(--Grid_Icon_Color);
}

button.k-button.gridlike-button {
    height: 30px;
    margin-left: 10px;
}

    button.k-button.gridlike-button.k-icon-button:hover {
        background-color: var(--Grid_Button_Hover_Color);
    }

.k-button.k-button-primary {
    border-color: var(--Grid_Button_Color);
    color: #fff;
    background-color: var(--Grid_Button_Color);
}

.k-button.k-button-primary:hover {
    border-color: var(--Grid_Button_Hover_Color);
    color: #fff;
    background-color: var(--Top_Color, #b21f26);
}
.k-button.k-button-primary:focus {
    box-shadow: none;
}
div.k-timeselector button.telerik-blazor.k-button.k-time-now.k-button-flat {
    border-color: var(--Grid_Button_Color) !important;
    color: #fff;
    background: var(--Grid_Button_Color) !important;
}

.k-button,
.k-button.k-button-base,
.k-button.k-button-solid,
.k-button.k-button-solid.k-button-base,
.k-button.k-button-error,
.k-button.k-button-solid.k-button-error,
.telerik-blazor.k-button.k-group-start.k-selected,
.telerik-blazor.k-button.k-group-end.k-selected,
.k-picker .k-input-button {
    border-color: var(--Grid_Button_Color);
    color: var(--Grid_Icon_Color);
    background-color: var(--Grid_Button_Color);
}

    .k-button:hover,
    .k-button.k-hover,
    .k-button.k-button-base:hover,
    .k-button.k-button-base.k-hover,
    .k-button.k-button-solid:hover,
    .k-button.k-button-solid.k-hover,
    .k-button.k-button-solid.k-button-base:hover,
    .k-button.k-button-solid.k-button-base.k-hover,
    .k-button.k-button-error:hover,
    .telerik-blazor.k-button.k-group-start.k-selected:hover,
    .k-button.k-button-solid.k-button-error:hover {
        border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color);
        color: var(--Grid_Icon_Color);
        background-color: var(--Grid_Button_Hover_Color);
    }

.flexChild .k-button:hover span.k-button-text {
    color: var(--Body_Field_Icon_Color);
}

.k-button.k-icon-button .k-button-icon.k-svg-icon > svg {
    color: var(--Grid_Icon_Color);
}
/*Switch Buttons and Group Buttons*/
.PageInfoItem .k-button-group {
    height: 24px;
    margin: auto;
}

.k-button-group .k-button.k-group-start {
    border-radius: 50px 0px 0px 50px;
}

.k-button-group .k-button.k-group-end {
    border-radius: 0px 50px 50px 0px;
}

.k-filter-menu .k-button-group .k-button.k-group-start {
    border-radius: 5px 0px 0px 5px;
}

.k-filter-menu .k-button-group .k-button.k-group-end {
    border-radius: 0px 5px 5px 0px;
}

.k-button-group .k-button {
    background: var(--Body_Button_Color);
    color: var(--Body_Text_Color);
    border-color: var(--Body_Button_Border_Color);
    border-width: 2px;
    width: 50px;
}

    .k-button-group .k-button:hover {
        background: var(--Body_Button_Hover_Color);
        color: var(--Body_Text_Color);
        border-color: var(--Body_Button_Border_Color);
    }

    .k-button-group .k-button.k-selected {
        background: var(--Grid_Button_Color);
        color: var(--Grid_Icon_Color);
    }

        .telerik-blazor.k-button.k-group-end.k-selected:hover, .k-button-group .k-button.k-selected:hover {
            background: var(--Grid_Button_Hover_Color);
            color: var(--Grid_Icon_Color);
        }

.PageInfoItem.PageSwitch button {
    background: var(--Body_Button_Color);
}

.PageSwitch button.k-button-primary .k-button-text {
    color: var(--Grid_Button_Color);
}
/*k-calendar*/
.k-calendar .k-calendar-th, .k-calendar .k-calendar-caption, .k-calendar .k-meta-header, .k-calendar .k-month-header {
    color: white;
}

.k-calendar {
    border-color: var(--kendo-color-border);
    color: var(--kendo-color-on-app-surface);
    background-color: var(--kendo-color-surface-alt)
}

.k-checkbox:indeterminate {
    color: var(--Grid_Button_Color);
    border-color: var(--Grid_Button_Color);
}
.k-popup tr.k-calendar-tr {
    background: white;
}
.k-calendar .k-calendar-td.k-selected .k-link .calendarDayNumber {
    color: #fff;
}
.calendarDayNumber {
    color: var(--Grid_Text_Color);
}
.k-other-month .calendarDayNumber {
    opacity: .7;
}
.k-calendar .k-calendar-td:hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td:hover .k-link,
.k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
.k-calendar .k-calendar-td.k-hover .k-link {
    background-color: color-mix(in srgb, var(--Grid_Text_Color) 8%, transparent);
}
div.k-calendar .k-calendar-td.k-selected .k-link:hover,
div.k-calendar .k-calendar-td.k-selected:hover .k-link {
    background-color: var(--Login_LogOff_Top_Color);
}
/*k-checkbox*/
.k-checkbox:checked,
.k-checkbox.k-checked {
    border-color: var(--Grid_Button_Color);
    color: var(--kendo-color-on-primary);
    background-color: var(--Grid_Button_Color);
    box-shadow: none;
}

    .k-checkbox:checked:focus, .k-checkbox.k-checked.k-focus, .k-checkbox:focus, .k-checkbox.k-focus {
        box-shadow: 0 0 0 2px var(--kendo-color-border);
    }
/* k-chip */
.telerik-blazor.k-chip {
    background-color: var(--Grid_Group_Chip_Color);
    color: var(--Grid_Text_Color);
    border-color: var(--Grid_Group_Chip_Border_Color);
    margin-inline: 5px;
}
/*k-columnmenu*/
.k-columnmenu-item-wrapper {
    background: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}
/*k-datepicker*/
.k-datepicker .k-input-inner::placeholder {
    color: #888888;
    font-style: italic;
}
.k-datetimepicker-popup.k-datetime-container {
    zoom: .85;
}
/*k-dialog*/
/* Telerik DialogFactory.ConfirmAsync/AlertAsync/PromptAsync (e.g. PersonnelAdmin.razor,
   UnitMaintenance.razor, VehicleMaintenance.razor's "Confirm Delete" dialogs) render their
   message text directly inside .k-dialog-content with no built-in spacing around it - add a
   margin so the text isn't flush against the dialog's edges/buttons. */
div.k-dialog {
    background-color: var(--Modal_Background_Color);
}
div.k-dialog-content {
    margin: 20px 20px 10px;
    color: var(--Body_Text_Color);
}
div.k-dialog-content p {
    margin-bottom: 0px;
}
/*k-Disabled*/
.k-disabled {
    opacity: .7;
}
.k-datetimepicker.k-disabled .k-button,
.k-datepicker.k-disabled .k-button {
    opacity: 1;
}
[aria-readonly="true"] {
    opacity: .7;
}
/*k-filter-menu*/
.k-filter-menu-container .k-input-spinner {
    background: var(--Grid_Button_Color);
    border: none;
}
/*k-inputs*/
span.k-list-item:hover,
.k-input-inner,
.k-list-item,
.k-list-item-text {
    color: var(--Body_Text_Color);
    font-size: 12px;
}
span.k-datepicker:hover,
span.k-datepicker,
span.telerik-blazor.k-dropdownlist.k-picker,
span.k-combobox.k-input,
span.k-maskedtextbox.k-input,
span.k-textbox.k-input,
span.k-numerictextbox.k-input {
    border: none;
    border-bottom: 2px solid;
    border-radius: 3px 3px 0 0;
    box-shadow: none;
    outline: none;
    height: 28px;
    background-color: var(--Body_Field_Background_Color);
    border-bottom-color: var(--Body_Field_Border_Color);
}
    span.k-datepicker.k-focus,
    span.telerik-blazor.k-dropdownlist.k-picker.k-focus,
    span.k-combobox.k-input.k-focus,
    span.k-maskedtextbox.k-input.k-focus,
    span.k-textbox.k-input.k-focus,
    span.k-numerictextbox.k-input.k-focus {
        border-bottom-color: var(--Body_Field_Border_Focus_Color);
    }
span.k-input-inner,
input.k-input-inner {
    font-size: 12px;
}

/*k-loader*/
.k-loader-container {
    z-index: 100;
}
/*k-menu*/
.k-child-animation-container .k-menu-group .k-item > .k-link.k-active,
.k-child-animation-container .k-menu-group .k-item > .k-link:hover,
.k-child-animation-container .k-menu.k-context-menu .k-item > .k-link:hover {
    color: var(--Header_Text_Color);
    background-color: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}
/*k-spinners*/
.k-input-spinner .k-spinner-increase,
.k-input-spinner .k-spinner-decrease {
    border: none;
    background: var(--Body_Field_Button_Color);
    padding-block: 3.5px;
}
.fms-edit-panel .k-input-spinner .k-spinner-increase,
.fms-edit-panel .k-input-spinner .k-spinner-decrease,
.maintenance-form .k-input-spinner .k-spinner-increase,
.maintenance-form .k-input-spinner .k-spinner-decrease {
    background: var(--Grid_Button_Color);
}
.fms-edit-panel .k-input-spinner .k-spinner-increase:hover,
.fms-edit-panel .k-input-spinner .k-spinner-decrease:hover,
.maintenance-form .k-input-spinner .k-spinner-increase:hover,
.maintenance-form .k-input-spinner .k-spinner-decrease:hover {
    background: var(--Grid_Button_Hover_Color);
}
    .k-input-spinner .k-spinner-increase > span {
        top: 2px;
    }

    .k-input-spinner .k-spinner-decrease > span {
        padding-bottom: 1px;
    }
/*k-switches*/
span.k-switch,
span.k-switch.k-switch-md {
    box-shadow: none;
    width: 80px;
    height: 28px;
    font-size: 12px;
}

.k-switch-on .k-switch-track {
    border-color: var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
    color: var(--kendo-color-on-primary);
    background-color: var(--Button_Toggle_Selected_TitleBar_Border_Color) !important;
}

span.k-switch-off .k-switch-track {
    border: 2px solid var(--Body_Field_Switch_Off_Border_Color);
}

span.k-switch-off:focus .k-switch-track,
span.k-switch-off.k-focus .k-switch-track,
span.k-switch-on:focus .k-switch-track,
span.k-switch-on.k-focus .k-switch-track {
    outline: 2px solid color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent);
    outline: none;
}

span.k-switch .k-switch-thumb,
span.k-switch.k-switch-md .k-switch-thumb {
    width: 31px;
    height: 31px;
    border: 2px solid var(--Button_Toggle_Selected_TitleBar_Border_Color);
    background-color: white;
}

span.k-switch-off .k-switch-thumb {
    border-color: var(--Body_Field_Switch_Off_Border_Color);
    color: var(--kendo-color-on-app-surface);
}

span.k-switch .k-switch-label-off,
span.k-switch.k-switch-md .k-switch-label-off {
    inset-inline-end: 15px;
}

span.k-switch .k-switch-label-on,
span.k-switch.k-switch-md .k-switch-label-on {
    inset-inline-start: 15px;
}
/*k-Time Picker*/
div.k-time-list .k-item:hover {
    color: var(--Body_Field_Border_Focus_Color);
}

/* TimeEntryExportReview.razor / MDAExportReview.razor: TelerikDatePicker's popup calendar cells
   (OnCalendarCellRender's Class) render inside Telerik's own internal popup markup, not inside
   the page's own render tree, so Blazor CSS isolation (::deep in a .razor.css) cannot reach them -
   the scope attribute is never applied to elements Telerik renders itself. These must be styled
   globally here instead. */
td.calendarCellHasExports {
    font-weight: 700;
    position: relative;
}

td.calendarCellHasExports::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--kendo-color-primary, #0d6efd);
    margin: 1px auto 0;
}


/* 1. Add a pronounced border under the header row */
 .k-grid-header th {
    border-bottom: 3px solid #000000 !important; /* Change color/thickness as desired */
}

/* 2. Add a border at the bottom of the last data row in the current view */
.k-grid-table tr.k-master-row:last-child td,
.k-grid-table tr.k-table-row:last-child td {
    border-bottom: 2px solid #000000 !important; /* Change color/thickness as desired */
}
.ActivePersonnelGrid tr.k-table-row:last-child td,
.UpcomingEventsContainer .k-grid-table tr.k-table-row:last-child td,
#RightNav .k-grid-table tr.k-master-row:last-child td,
#RightNav .k-grid-table tr.k-table-row:last-child td {
    border-bottom: none !important;
}
/* Login.razor Microsoft/Google provider buttons (#microsoftLink/#googleLink, class="IDButtons").
   Legacy Login.aspx used <asp:Button class="IDButtons" ID="microsoftLink".../>, which renders as
   <input type="submit" id="microsoftLink" class="IDButtons">, so every legacy FMS.css rule for
   these buttons is keyed off the "input" element (e.g. "#LoginBtnContainer > input",
   "#LoginBtnContainer > input:hover", Mobile.css's responsive "#LoginBtnContainer > input"
   overrides, and FMS.css's ID+class "width: 250px !important" rule). The Blazor port renders
   plain <button> elements instead, which those "input"-typed selectors never match, losing all
   height/border-radius/margin/color/font-size/border/hover-background/width/browser-chrome
   styling. Mirror all of those legacy rules here with an equivalent "button.IDButtons" selector
   so these two buttons look the same as before migration.
   NOTE: these buttons actually render inside #LoginInputContainer (not #LoginBtnContainer, which
   is a separate, empty sibling div - see Login.razor markup), so the selector must target
   #LoginInputContainer, not #LoginBtnContainer, or it silently never matches. The matching legacy
   FMS.css "#LoginBtnContainer > #microsoftLink.IDButtons, #LoginBtnContainer > #googleLink.IDButtons"
   width rule was removed/consolidated here for the same reason. */
#LoginInputContainer > button.IDButtons {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
    height: 45px;
    border: 2px solid var(--LeftSideNav_Border_Color);
    border-radius: 45px;
    margin: 0 0 25px 0;
    color: #ffffff;
    font-size: 20px;
    font-family: inherit;
    width: 250px !important;
}

#LoginInputContainer > button.IDButtons:hover {
    background: var(--Login_LogOff_Top_Color);
}
#LoginInputContainer .alert {
    color: white;
    text-align: center;
}
/* Login.razor: full-page "Signing you in..." overlay shown in place of the login box (and
   the portal name/logo above it) while an Azure AD auto-login is being completed (see
   _isCompletingAzureLogin). Fixed-positioned to cover the entire viewport regardless of the
   parent #LoginContentMain's own flex layout, so nothing but the spinner is visible on the
   page while auto-login finishes. */
#LoginSigningInOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    z-index: 10;
}

/* IDProvSelect.razor: full-page "Setting things up..." overlay shown in place of the tenant
   buttons once a tenant has been selected, covering the lag between LoginAsync completing
   and the /home navigation finishing (see _isSelecting). Fixed-positioned to cover the
   entire viewport regardless of the parent #TenantContentMain's own flex layout. */
#TenantSigningInOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    z-index: 10;
}

/* LogOff.razor: full-page "Logging you off..." overlay shown while the session is cleared
   and the logout/redirect flow completes. Mirrors #LoginSigningInOverlay/#TenantSigningInOverlay
   so all three "please wait" moments in the auth flow look and feel the same.
   NOTE: named LogOffPageOverlay (not LogOffContainer) because #LogOffContainer is already used
   by MainLayout.razor for the small top-nav "LOG OFF" link - reusing that id here previously
   turned the nav link into a full-viewport fixed overlay covering the whole app. */
#LogOffPageOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    z-index: 10;
}

/* Migrated from legacy FMS.css (td.k-table-td.RightAlignSubColumn) as part of the ongoing
   effort to move used classes out of FMS.css so it can eventually be removed. Right-aligns
   a Telerik grid cell without the bold font-weight/fixed width that RightAlignColumn applies -
   used for sub-columns like ActivePersonnelStationDetail's StartTime column. */
td.k-table-td.RightAlignSubColumn {
    text-align: right;
}

/* AskFMS.razor - light conversation follow-up support. Renders the accumulated Q&A turns for
   the current AskFMS conversation (cleared via the "New conversation" button, which calls
   IReportQueryAssistant.ResetConversation()). */
.AskFMSInputRow {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.AskFMSTextBoxWrapper {
    flex: 1 1 auto;
}

.AskFMSConversation {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.AskFMSQuestion {
    padding: 6px 10px;
}

.AskFMSAnswer {
    background-color: #f5f5f5;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.AskFMSAnswer p {
    margin: 0 0 8px;
}

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

.AskFMSAnswer ul,
.AskFMSAnswer ol {
    margin: 0 0 8px;
    padding-left: 22px;
}

.AskFMSAnswer li {
    margin-bottom: 4px;
}

.AskFMSAnswer h4 {
    margin: 10px 0 4px;
    font-size: 1em;
    font-weight: 600;
}

.AskFMSAnswer h4:first-child {
    margin-top: 0;
}

.AskFMSAnswerError {
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
    color: #611a15;
}

.AskFMSAnswerPending {
    color: #666;
    font-style: italic;
}

.AskFMSFunctionUsed {
    color: #666;
    font-size: 0.85em;
}

.AskFMSResultsTableWrapper {
    max-height: 500px;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.AskFMSResultsTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.AskFMSResultsTable th,
.AskFMSResultsTable td {
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
    white-space: nowrap;
}

.AskFMSResultsTable th {
    background-color: #f5f5f5;
    position: sticky;
    top: 0;
    z-index: 1;
}

.AskFMSResultsTable tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.AskFMSResultsCount {
    padding: 6px 10px;
    color: #666;
    font-size: 0.85em;
}

/* ===== Main nav menu (NavMenu.razor / TelerikMenu inside #tblMenu) =====
   Moved out of FMS.css per app.css migration policy - see Docs/LayoutStructure.md and
   .github/copilot-instructions.md's CSS guidance. */

/* Applies to every Telerik k-menu/k-menu-bar instance in the app (main nav, report viewer
   toolbar, etc.), not just #tblMenu - kept here since it was moved alongside the rest of the
   ".menu" rules out of FMS.css. font-family for .k-menu-bar/.k-menu is now set in the
   consolidated rule near the top of this file, alongside body's. */

/* Blazor: TelerikMenu (rendered as .k-menu) replaces the legacy RadMenu (div.RadMenu > ul)
   inside #tblMenu. The rules above target markup that no longer exists in Blazor, so the
   equivalent .k-menu structure is styled here to preserve the same layout/skin. */
#tblMenu .k-menu {
    height: 56px;
    background-image: none;
    display: flex;
    align-items: center;
    background-color: var(--Top_Color);
}

    /* Do NOT set display/flex-flow here: the Kendo theme relies on the default
       ".k-menu-item { display:flex; flex-flow:column nowrap }" to stack the link above
       the (absolutely positioned, no explicit top/left) popup group so its flow/static
       position lands below the link. Overriding it to a row layout was what caused the
       flyout to render beside the link at the same height as the bar. Vertical centering
       of the link text is instead handled on .k-menu-link below. */
    #tblMenu .k-menu > .k-menu-item {
        position: relative;
        margin: 0px;
        height: 100%;
        text-transform: uppercase;
    }

    #tblMenu .k-menu .k-menu-link {
        display: flex !important;
        align-items: center;
        color: #ffffff;
        background-image: none !important;
        background-color: inherit;
        padding: 0 25px;
        height: 100%;
        /* Legacy top-level RadMenu items rendered at 14pt (no explicit override, inheriting
           the page default); TelerikMenu instead inherits --kendo-font-size (14px) from
           all.css, so it must be set explicitly here, scoped to #tblMenu, to match legacy. */
        font-size: 1.0rem;
    }
.k-menu-popup .k-menu-group {
    padding: 0px;
}

.k-menu-popup .k-menu-popup {
    box-shadow: 4px 5px 7px -3px grey;
    border-left: 3px solid var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}

.k-menu-popup .k-menu-link {
    /* Legacy dropdown/submenu RadMenu items rendered at 13pt. */
    font-size: .85rem;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    color: var(--Dropdown_Text_Color);
    border-bottom: 1px solid var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}

.k-menu-popup .k-menu-item:last-child > .k-menu-link {
    border-bottom: 1px solid transparent;
}

.k-menu-popup .k-menu-link:hover,
.k-menu-popup .k-menu-item.k-menu-item-active > .k-menu-link {
    background-color: var(--FieldsBorder_MenuBorder_RightSidebar_Info_Color);
}
    /* Do not change height on hover/active - the popup's open position is calculated
       from the item's geometry, and resizing it after the fact re-introduces the
       "popup opens at the same height as the bar" misalignment. */
    #tblMenu .k-menu > .k-menu-item > .k-menu-link:hover,
    #tblMenu .k-menu > .k-menu-item.k-menu-item-active > .k-menu-link {
        background-image: none !important;
        background-color: var(--TopNav_Hover_Color) !important;
        color: #ffffff !important;
        padding: 0px 25px !important;
    }

    /* Legacy top-level rmExpand arrows were recolored white via background-image swaps
       (arrow-down/up-white-8x8.png). TelerikMenu renders its own .k-menu-expand-arrow
       icon which defaults to the theme's dark icon color and was left unstyled, making
       the top bar's dropdown carets look mismatched against the legacy white arrows. */
    #tblMenu .k-menu > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
        color: #ffffff;
    }

/* Blazor: second-level (and deeper) TelerikMenu items render inside a .k-menu-popup
   (equivalent of the legacy div.RadMenu .rmSlide dropdown). Its styling (below) still
   applies since the .k-menu-popup class is present on the element, but its POSITION is
   controlled by an ancestor .k-animation-container that Telerik portals to the DOM root
   (verified via DOM inspection: <div class="k-animation-container ..." style="left:
   310px; top: 0px; ...">), i.e. it is NOT a descendant of #tblMenu at all. */
.k-menu-popup {
    box-shadow: 0px 2px 7px grey;
    background-color: white;
    color: var(--Dropdown_Text_Color);
}

/* Telerik's JS popup service sets "top: 0px" inline on the .k-animation-container ONLY for
       ROOT-LEVEL nav bar flyouts (i.e. items whose trigger sits directly in #tblMenu's 56px-tall
       bar) - this is a quirk/bug in how Telerik measures the trigger's position for this specific
       menu, and renders the flyout flush with the top of the menu bar instead of below it (the
       legacy .rmSlide dropped below the 56px bar). Push ONLY those down by the bar height with a
       transform.
       Nested (3rd-level+) submenu popups, and unrelated popups like the DutyAdmin Export button's
       TelerikDropDownButton .k-menu-popup, get a correctly-computed non-zero inline "top" from
       Telerik (their trigger's real on-screen position, which already reflects any transform
       applied to an ancestor popup, since getBoundingClientRect accounts for CSS transforms) - so
       they must NOT also receive this +56px shift, or they render increasingly far below their
       true anchor at every nesting level.
       Distinguish the two cases via the inline "top: 0px" value itself (previous attempts tried
       :has(.k-menu-expand-arrow) and excluding the Export popup by content, but neither reliably
       separates "root-level bar flyout" from "any other popup" - matching on the literal
       "top: 0px" Telerik emits only for the buggy root-level case is the actual distinguishing
       signal).

       TODO: KNOWN ISSUE - deeply nested (3rd-level+) submenu-of-submenu flyouts also render with
       inline "top: 0px" (confirmed via DOM inspection), so this rule's +56px shift lands them at
       a fixed offset below the bar instead of aligned with their real calling (2nd-level) parent
       item - they visually "pin" near the bottom of the main menu rather than opening level with
       the item that triggered them. A JS-based fix (tracking the real trigger element via
       mouseenter/focusin delegated on document, since Telerik portals ALL popups - root and
       nested alike - to document.body) was attempted and reverted: Telerik appears to
       re-measure/rewrite its own inline "top" style asynchronously after the popup is inserted,
       which raced with and clobbered the JS correction, leaving popups pinned at the page top.
       A future fix will need to reliably win that race (e.g. a longer-lived MutationObserver on
       "style" that keeps reasserting the corrected value, or an interval-based correction while
       the popup remains open) before this can be revisited. Left as CSS-only (root-level +
       Export working; 3rd-level+ nesting still broken) until a robust JS approach is found. */

.k-animation-container[style*="top: 0px"]:has(.k-menu-popup) {
    transform: translateY(56px);
}



/* .WindowControls (formerly .RadWindowControls) - renamed since it has no relation to the
   legacy Telerik ASP.NET AJAX RadWindow control; it is a plain custom class applied to a
   .ControlTitle div in Blazor popup edit forms (see MeetingEdit.razor). Moved here from
   FMS.css per app.css migration policy. */
.ControlTitle.WindowControls {
    height: 27px;
    line-height: 25px;
    padding: 0px 15px;
    margin-bottom: 15px
}

.k-popup .ControlTitle.WindowControls {
    padding: 2px 15px;
    margin-bottom: 0px;
}

.PageInfo,
.PageSubInfo,
.ControlTitle.WindowControls {
    border-bottom: 2px solid #8587c1;
}

.ControlTitle,
.PageInfo,
.PageSubInfo,
.ControlTitle.WindowControls,
.RolesForm .InlineEditForm {
    border-bottom: 2px solid var(--Border_Color);
}
#AiUsageContainer .MainTableContainer {
    padding: 20px;
}

/* overlay */
.k-loader-container-overlay {
    background-color: var(--Body_Field_Background_Color) !important;
}

/* panel */
.k-loader-container-panel {
    background-color: var(--Body_Field_Background_Color) !important;
}

/* animation */
.k-loader {
    color: var(--Header_Background_Color) !important;
}

/* text */
.k-loader-container-label {
    color: var(--Body_Text_Color) !important;
    font-weight: bold;
}
/* CSS for Adjustments component */
 .k-grid-header-sticky,
 td.k-grid-content-sticky {
    background-color: transparent !important;
}

/* MakeupDutyCreate.razor: hosted in a TelerikWindow (DutyAdmin.razor) that can grow taller than the
   viewport as duty/shift edit forms are added for each selected outstanding shift. Keep the form
   fields scrollable and pin the Save button so it stays reachable without the window overflowing
   the browser window. */
.fms-makeup-duty-create {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    max-height: 100%;
    min-height: 0;
}

.fms-makeup-duty-create-top {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--Modal_Background_Color, #fff);
    padding: 0.35rem 10px 0.25rem;
}

.fms-makeup-duty-create-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.fms-makeup-duty-create .SaveButtonTable {
    flex: 0 0 auto;
    padding: 0.35rem 0;
    position: sticky;
    bottom: 0;
    z-index: 2;
    width: 100%;
    background: transparent;
    margin-top: 0;
    margin-bottom: 15px;
    border-top: 0;
}

.fms-makeup-shift-divider {
    height: 2px;
    margin: 0.5rem 0;
    background-color: var(--Body_Border_Color, #adb5bd);
    border: 0;
    opacity: 1;
}

/* Tighten vertical spacing within the makeup dialog specifically - the generic .fms-edit-panel
   spacing (row g-3 mb-2, mb-3) is comfortable for a single form but makes the makeup dialog
   (duty form + N shift blocks) taller than necessary. */
.fms-makeup-duty-create .mb-3 {
    margin-bottom: 0.75rem !important;
}

.fms-makeup-duty-create-top .form-text {
    padding-left: 2px;
}

.fms-makeup-duty-create .row.g-3 {
    --bs-gutter-y: 0.5rem;
}

.fms-makeup-duty-create .row.mb-2 {
    margin-bottom: 0.35rem !important;
}

.fms-makeup-duty-create .fms-edit-panel {
    padding: 0.5rem 10px;
}

.fms-makeup-duty-create .dropdownLabel,
.fms-makeup-duty-create .readonlyLabel {
    margin-bottom: 0.25rem;
}

.fms-makeup-duty-create .form-text {
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.fms-makeup-window-content {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 80vh;
    min-height: 0;
    overflow: hidden;
}

/* Wider variant of FMS.css's .standard-width-input (180px), used for CrewsEdit's Crew Type
   dropdown so it has more room than the other same-row dropdowns/inputs. */
.wide-width-input {
    width: 260px;
}

/* Even wider variant, used for CrewsEdit's Crew Name input which needs more room than
   Crew Type/Shift Type since crew names tend to be longer free-text descriptions. */
.extra-wide-width-input {
    width: 320px;
}

/* CrewsEdit popup layout mirrors MakeupDutyCreate behavior: top section fixed, shift list scrolls,
   save/cancel stays visible at the bottom as content grows. */
.fms-crews-edit {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

.fms-crews-edit-top {
    flex: 0 0 auto;
}

.fms-crews-edit .crew-shift-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fms-crews-edit .crew-shift-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(240px, 42vh, 420px);
}

.fms-crews-edit .SaveButtonTable {
    flex: 0 0 auto;
    padding: 0rem;
}

.fms-duty-assignment-edit .duty-shift-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.fms-duty-assignment-edit .duty-admin-top-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 4px;
    row-gap: 6px;
    margin-bottom: 8px;
}

.fms-duty-assignment-edit .duty-admin-top-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fms-duty-assignment-edit .duty-admin-top-row .dropdownLabel {
    display: flex;
    align-items: flex-end;
    min-height: 2.2em;
    margin-bottom: 2px;
    line-height: 1.15;
}

.fms-duty-assignment-edit .duty-admin-owner-col {
    flex: 0 0 200px;
}

.fms-duty-assignment-edit .duty-admin-dutydate-col {
    flex: 0 0 155px;
    margin-right: 10px;
}

.fms-duty-assignment-edit .duty-admin-dutylength-col {
    flex: 0 0 82px;
}

.fms-duty-assignment-edit .duty-admin-minutes-col {
    flex: 0 0 74px;
}

.fms-duty-assignment-edit .duty-admin-status-col {
    flex: 0 0 160px;
}

.fms-duty-assignment-edit .duty-admin-totalshifts-col {
    flex: 0 0 79px;
    margin-left: 8px;
}

.fms-duty-assignment-edit .duty-admin-bonus-col {
    flex: 0 0 100px;
}
.fms-duty-assignment-edit .duty-admin-requires-col,
.fms-duty-assignment-edit .duty-admin-override-col {
    flex: 0 0 120px;
}

.fms-duty-assignment-edit .duty-admin-override-col {
    flex: 0 0 168px;
}

.fms-duty-assignment-edit .duty-admin-override-col .dropdownLabel {
    white-space: nowrap;
}

.fms-duty-assignment-edit .duty-admin-bonus-col .dropdownContainer,
.fms-duty-assignment-edit .duty-admin-requires-col .dropdownContainer,
.fms-duty-assignment-edit .duty-admin-override-col .dropdownContainer {
    width: 100%;
}

.fms-duty-assignment-edit .duty-admin-bonus-col .k-switch,
.fms-duty-assignment-edit .duty-admin-requires-col .k-switch,
.fms-duty-assignment-edit .duty-admin-override-col .k-switch {
    max-width: 100%;
}

.fms-duty-assignment-edit .duty-shift-scroll {
    overflow-y: auto;
    overflow-x: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(240px, 42vh, 420px);
}

.duty-shift-card {
    padding-top: 8px;
    margin-top: 8px;
}

.duty-shift-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    min-width: 1004px;
}

.duty-shift-row > .flexChild {
    margin: 6px 0 8px;
    min-width: 0;
}

.fms-duty-assignment-edit .duty-shift-row .dropdownLabel {
    display: flex;
    align-items: flex-end;
    min-height: 2.2em;
    margin-bottom: 2px;
    line-height: 1.15;
}

.fms-duty-assignment-edit .duty-shift-row .readonlyLabel {
    line-height: 1.2;
    min-height: 24px;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.duty-shift-start-col {
    flex: 0 0 127px;
}

.duty-shift-status-col {
    flex: 0 0 65px;
}

.duty-shift-minutes-col {
    flex: 0 0 72px;
}

.fms-duty-assignment-edit .duty-shift-row .duty-shift-minutes-col .dropdownLabel {
    white-space: normal;
    overflow-wrap: anywhere;
}

.duty-shift-length-col {
    flex: 0 0 80px;
}

.duty-shift-length-col .text-muted {
    display: block;
    margin-top: 2px;
    line-height: 1.15;
}

.duty-shift-personnel-col {
    flex: 0 0 190px;
}

.duty-shift-station-col {
    flex: 0 0 79px;
}

.duty-shift-purpose-col {
    flex: 0 0 168px;
}

.duty-shift-unit-col,
.duty-shift-position-col {
    flex: 0 0 112px;
}

/* Keep the new Allow Override icon column compact so it doesn't force extra horizontal scroll. */
.duty-shift-override-col {
    flex: 0 0 50px;
}

/* Tighten only the Position -> Allow Override transition without changing the whole row gap. */
.duty-shift-row > .duty-shift-position-col {
    margin-right: -5px;
}

.duty-shift-row > .duty-shift-override-col {
    margin-left: -5px;
    margin-right: -5px;
}

.fms-duty-assignment-edit .duty-shift-row .duty-shift-override-col .dropdownLabel {
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: normal;
    line-height: 1.05;
}

.fms-duty-assignment-edit .duty-shift-row .duty-shift-override-col .duty-shift-override-container {
    display: flex;
    justify-content: center;
}

.duty-shift-row > .flexChild .k-input,
.duty-shift-row > .flexChild .k-picker,
.duty-shift-row > .flexChild .k-combobox,
.duty-shift-row > .flexChild .k-numerictextbox {
    width: 100% !important;
}

.fms-duty-assignment-edit .duty-shift-row .duty-shift-length-col .k-numerictextbox {
    width: 60px !important;
}

.duty-shift-action-col {
    flex: 0 0 auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.duty-shift-action-col .dropdownLabel {
    visibility: hidden;
}

    .duty-shift-action-col .k-button {
        height: 32px;
    }

.crew-shift-card {
    padding-top: 8px;
    margin-top: 8px;
}

/* Match the same left/right visual margins used by the top form row (.flexChild horizontal
   margins), so Shift Breakdown content and separators align with the rest of the form. */
.fms-edit-panel .ShiftBreakdownContainer .duty-shift-scroll {
    padding-left: 13px;
    padding-right: 13px;
}
    .fms-edit-panel .ShiftBreakdownContainer .duty-shift-card {
        padding-left: 13px;
        padding-right: 13px;
    }
.crew-shift-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 14px;
}

.crew-shift-row > .flexChild {
    margin: 10px 0 12px;
    min-width: 0;
}

.crew-shift-start-col {
    flex: 0.9 1 0;
    max-width: none;
}

.crew-shift-length-col {
    flex: 1.1 1 0;
    max-width: none;
}

.crew-shift-action-col {
    flex: 0 0 auto;
    margin-left: 0;
    justify-content: center;
}