.attention-pointer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.attention-arrow {
    font-size: 6rem;
    color: var(--mud-palette-primary);
}

/* Expanded back-and-forth animation */
@keyframes mudSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-60px); /* Double the motion range */
    }
}

/* IGN-879 slice E (review round 2): MudBlazor's default 24px top offset for a TopRight snackbar
   sits inside the fixed MudAppBar's own height, so a toast renders under the header instead of
   below it. Moving the snackbar to the bottom instead (tried first) puts it on top of the fixed
   AI assistant FAB (Components/AIAssistant.razor, bottom:24/right:24) at phone width, where the
   snackbar's own width reaches most of the way across the screen; there is no bottom corner a
   wide enough toast can sit in without sharing that FAB's 24px margin band. Pushing the existing
   TopRight position down clears the header without going anywhere near the FAB. The AppBar itself
   is 64px tall on desktop and 56px on mobile (Material's default toolbar heights, no override in
   this app); 88px (64px + the original 24px gutter) clears both with room to spare. */
#mud-snackbar-container.mud-snackbar-location-top-right {
    top: 88px !important;
}

/* Scrollbar theming handled by JavaScript in MainLayout.razor */

/* IGN-573: bridge Syncfusion input fields into the app's dark palette. Scope is every
   Syncfusion input group in dark mode (date/time pickers, dropdowns, grid filter and
   search inputs, Scheduler editor fields), which gives consistent theming across all
   of them, not only the date/time pickers the ticket named.
   Syncfusion's Material default theme (loaded before site.css) wins the cascade over
   the CDN bootstrap5-dark theme for the outlined input-focus rules, so these fields
   show Syncfusion's own off-brand pink focus ring and near-black input text against a
   dark background instead of the app's palette. `!important` matches the specificity
   those upstream rules need to be beaten; body.ignite-dark-mode is toggled by
   updateScrollbarTheme() in Script.js on load and on every theme switch.
   Every picker binds CssClass to "" (no e-outline) in dark mode, which renders
   Material's underline variant: its focus indicator is a `::before`/`::after` pair
   painted with `background: #e3165b`, not a border or box-shadow, so it needs its own
   override below. When e-outline is present material sets `content: none` on those
   pseudos, making the rule inert, so this cannot regress the outlined variant. */
body.ignite-dark-mode .e-input-group.e-control-wrapper input,
body.ignite-dark-mode .e-date-wrapper input,
body.ignite-dark-mode .e-time-wrapper input,
body.ignite-dark-mode .e-datetime-wrapper input {
    color: var(--mud-palette-text-primary) !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
}

body.ignite-dark-mode .e-input-group.e-control-wrapper.e-input-focus,
body.ignite-dark-mode .e-date-wrapper.e-input-focus,
body.ignite-dark-mode .e-time-wrapper.e-input-focus,
body.ignite-dark-mode .e-datetime-wrapper.e-input-focus {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.35) !important;
}

body.ignite-dark-mode .e-input-group.e-control-wrapper.e-input-focus::before,
body.ignite-dark-mode .e-input-group.e-control-wrapper.e-input-focus::after {
    background: var(--mud-palette-primary) !important;
}

body.ignite-dark-mode .e-input-group.e-control-wrapper.e-disabled input,
body.ignite-dark-mode .e-date-wrapper.e-disabled input,
body.ignite-dark-mode .e-time-wrapper.e-disabled input,
body.ignite-dark-mode .e-datetime-wrapper.e-disabled input {
    color: var(--mud-palette-text-primary) !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    opacity: 0.7;
}

/* IGN-848 item 1: light mode has its own version of the same Syncfusion Material
   underline focus indicator described above, painted with the framework's default
   pink (`rgb(227, 22, 91)`, Material's error/accent color) instead of the app's
   primary. Same cause as the dark-mode block: every picker binds CssClass to "" (no
   e-outline) so the underline `::before`/`::after` pair renders; this just aligns the
   color with the app palette in light mode too. Scoped to body:not(.ignite-dark-mode)
   so it cannot double up with or fight the dark-mode override above. */
body:not(.ignite-dark-mode) .e-input-group.e-control-wrapper.e-input-focus::before,
body:not(.ignite-dark-mode) .e-input-group.e-control-wrapper.e-input-focus::after,
body:not(.ignite-dark-mode) .e-date-wrapper.e-input-focus::before,
body:not(.ignite-dark-mode) .e-date-wrapper.e-input-focus::after,
body:not(.ignite-dark-mode) .e-time-wrapper.e-input-focus::before,
body:not(.ignite-dark-mode) .e-time-wrapper.e-input-focus::after,
body:not(.ignite-dark-mode) .e-datetime-wrapper.e-input-focus::before,
body:not(.ignite-dark-mode) .e-datetime-wrapper.e-input-focus::after {
    background: var(--mud-palette-primary) !important;
}

/* IGN-848 item 1 follow-up: every picker that binds CssClass to "e-outline" in light mode
   (every picker in this app does, via the `IsDarkMode ? "" : "e-outline"` ternary, e.g.
   ShiftDialog's Shift Start/End and the Schedule page Filters drawer Start/End Time) is
   untouched by the underline override above, because Material sets `content: none` on the
   `::before`/`::after` pseudos once `.e-outline` is present. The outline variant instead
   paints its focus ring with `border-color` and three inset `box-shadow`s on
   `.e-input-group.e-outline.e-input-focus` (mirrored on `.e-float-input.e-outline.e-input-focus`
   for the float-label cutout), plus a separate `color` on the floated `label.e-label-top`
   text. `!important` is used for the same reason as the two blocks above: Syncfusion's own
   rules already carry 5-6 chained classes/`:not()`s per selector (and a `:hover` variant on
   top), so matching that exactly here would be brittle across a Syncfusion version bump;
   `:not(.e-error):not(.e-success):not(.e-warning)` keeps validation coloring untouched, the
   one exclusion that actually matters for correctness. Scoped to body:not(.ignite-dark-mode)
   since e-outline never applies in dark mode (the ternary above always clears it there). */
body:not(.ignite-dark-mode) .e-input-group.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-input-group.e-control-wrapper.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-date-wrapper.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-time-wrapper.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-datetime-wrapper.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-float-input.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning),
body:not(.ignite-dark-mode) .e-float-input.e-control-wrapper.e-outline.e-input-focus:not(.e-error):not(.e-success):not(.e-warning) {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: inset 1px 1px var(--mud-palette-primary), inset -1px 0 var(--mud-palette-primary), inset 0 -1px var(--mud-palette-primary) !important;
}

body:not(.ignite-dark-mode) .e-outline.e-input-focus label.e-float-text::before,
body:not(.ignite-dark-mode) .e-outline.e-input-focus label.e-float-text::after {
    border-top-color: var(--mud-palette-primary) !important;
}

body:not(.ignite-dark-mode) .e-float-input.e-outline.e-input-focus label.e-label-top,
body:not(.ignite-dark-mode) .e-float-input.e-control-wrapper.e-outline.e-input-focus label.e-label-top {
    color: var(--mud-palette-primary) !important;
}

/* IGN-661: MudBlazor dialogs clipped both edges on phones below ~800px. The audit's
   "min-width: 800px" on .mud-dialog-width-lg and its siblings is not an authored rule anywhere
   (MudBlazor.min.css 9.4.0 and this file both searched); .mud-dialog-width-lg only ever sets
   max-width:1280px. The real cause is .mud-dialog's flex-item auto min-content size:
   .mud-dialog-container sets display:flex, and a flex item with no explicit min-width defaults
   to the min-content size of its own contents (a wide MudTable, fixed-width columns, etc.),
   which can exceed a phone viewport even though max-width would otherwise cap it. Below 599px
   (MudBlazor's own Xs/Sm breakpoint cutoff) this caps every .mud-dialog-width-* class to the
   viewport width and zeroes .mud-dialog's min-width so it can actually shrink to fit.
   `!important` is needed for the same reason as the IGN-573 block above: site.css loads before
   MudBlazor.min.css in _Host.cshtml, so it must out-rank the upstream classes on specificity. */
@media (max-width: 599px) {
    .mud-dialog-width-false,
    .mud-dialog-width-xs,
    .mud-dialog-width-sm,
    .mud-dialog-width-md,
    .mud-dialog-width-lg,
    .mud-dialog-width-xl,
    .mud-dialog-width-xxl {
        max-width: calc(100vw - 32px) !important;
    }

    .mud-dialog-width-full {
        width: calc(100vw - 32px) !important;
    }

    .mud-dialog {
        min-width: 0 !important;
    }
}

/* IGN-670: on Customer Details, CustomerAdmin.razor's own <MudContainer> renders nested inside
   Admin.razor's already-full-width page container (MaxWidth.False), so its default (Large)
   gutters stack a SECOND 16px-per-side padding on top of the outer one, then the MudGrid's own
   xs=12 item padding stacks another 24px per side. DOM-probed at 390px: the Time Zone
   MudAutocomplete's <input> measured clientWidth 242 against a scrollWidth of 294, so its value
   clipped (audit finding F8). This container is shared boilerplate with other *Admin.razor
   components (removing it there is out of this ticket's scope), so the fix is scoped to the
   customer-details-container class CustomerAdmin.razor's own root MudContainer carries, not a
   sitewide container-gutter change. `!important` for the same site.css-loads-before-MudBlazor
   reason as the blocks above. */
@media (max-width: 599px) {
    /* Reclaiming CustomerAdmin's own gutters (below) was still 24px short of the Time Zone value's
       measured 294px scrollWidth at 360px viewport width: Admin.razor's page-level MudContainer
       (MaxWidth.False, one level further out, shared by every *Admin.razor component) also carries
       16px-per-side gutters. `:has()` conditions the reclaim on actually containing Customer
       Details, so every other Admin section keeps its normal padding; only this section's page
       ever matches. */
    .mud-container.mud-container--gutters:has(> .customer-details-container) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .customer-details-container.mud-container--gutters {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The grid's own negative margin-left assumes the 24px item padding it is paired with below;
       zeroing one without the other shifts every item's content 24px past the left edge (found
       live: the caption text under Time Zone rendered as "hanging the timezone..." with its
       leading "C" cut off screen). MudBlazor's paired .mud-grid-spacing-xs-6 rule also sets
       width: calc(100% + 24px), which margin-left: 0 alone leaves in place: the grid box stays
       24px wider than its container, so the Paper scrolls horizontally (measured 414 scrollWidth
       against 390 clientWidth) even though every field looks fine internally. width: 100%
       restores the box to the container's width (QA verdict on PR #670, commit 49e31627). */
    .customer-details-container > .mud-grid {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .customer-details-container .mud-grid-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* IGN-670 follow-up (QA verdict on PR #670, cdf364ac): the reclaims above fix the outer
       container/grid/item gutters, but the Time Zone MudAutocomplete's own end-adornment (the
       dropdown-arrow icon button, 48px wide with 12px padding per side and a -12px margin-right
       that pulls it flush, netting 36px) plus the input's own 14px left padding still consume
       50px of the control's 328px width at 360px, leaving 278px for the 294px-wide
       "(UTC-08:00) Pacific Time (Los Angeles)" value: the input clipped internally even though
       the enclosing Paper and page did not overflow. Shrinking the adornment button's own
       padding (not its icon) and the input's left padding reclaims 22px without touching any
       other icon button or field on the page, since both selectors are scoped to this field. */
    .customer-details-container .mud-select .mud-input-adornment-end .mud-icon-button {
        padding: 2px !important;
    }

    .customer-details-container .mud-select .mud-input-root-adorned-end {
        padding-left: 6px !important;
    }

    /* IGN-848 item 4: the 2px padding above shrinks this button's own box to 28x28,
       under the 44px HIG tap-target guideline (still above the WCAG 2.5.8 24px floor).
       Reclaiming that padding would reopen the IGN-670 clipping this block exists to
       fix, so instead an invisible ::after overlay extends the HIT area to 44x44 via
       negative inset without enlarging the button's own layout box; the icon's visible
       size and the field's reclaimed width are both untouched. position:relative is
       needed so the absolutely-positioned overlay anchors to the button, not an
       ancestor. */
    .customer-details-container .mud-select .mud-input-adornment-end .mud-icon-button {
        position: relative;
    }

    .customer-details-container .mud-select .mud-input-adornment-end .mud-icon-button::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}