/* MudDialog Styles */

.mud-dialog-container .mud-input:not(.mud-shrink) ~ .mud-input-label,
.mud-form .mud-input:not(.mud-shrink) ~ .mud-input-label {
    color: var(--mud-palette-primary) !important;
    font-weight: 400;
}

.mud-dialog-container .mud-dialog-actions .mud-button {
    width: 100px;
}

.mud-dialog-container .mud-dialog-actions .mud-button-root.wide-button {
    width: 150px !important;
}

.mud-dialog-container .mud-dialog-actions .mud-button-root.default-button {
    width: auto;
}

.gsr-dialog {
    max-width: 800px !important; 
    width: 90vw !important; 
    max-height: 90vh !important; 
    overflow-y: scroll !important;
}


/* GsrAutoComplete Styles */

/* Base styles for all GsrAutoComplete instances */
/* Base styles for all GsrAutoComplete instances */
.mud-list-item:has(> .mud-list-item-text > .mud-typography-body1 > .mud-button) {
    padding: 0 !important;
}

/* GsrAutoComplete with Actions Styles */
.gsr-autocomplete-with-actions {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Hide the dropdown arrow when actions are present */
.gsr-autocomplete-with-actions .mud-input-adornment.mud-input-adornment-end {
    display: none !important;
}

/* Adjust clear button positioning to make room for actions */
.gsr-autocomplete-with-actions .mud-input-clear-button {
    right: var(--actions-padding, 16px) !important;
}

.gsr-autocomplete-with-actions .mud-input-slot,
.gsr-autocomplete-with-actions .mud-input-root {
    padding-right: var(--actions-padding, 16px) !important;
}

.gsr-autocomplete-with-actions .mud-input-outlined .mud-input-slot,
.gsr-autocomplete-with-actions .mud-input-filled .mud-input-slot,
.gsr-autocomplete-with-actions .mud-input-text .mud-input-slot {
    padding-right: var(--actions-padding, 16px) !important;
}

.gsr-autocomplete-actions {
    position: absolute;
    right: 0px;
    top: 0%;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 1000;
    pointer-events: auto;
    height: auto;
}

.gsr-autocomplete-actions.standalone {
    top: 34%;
}

.gsr-autocomplete-actions * {
    pointer-events: auto;
    box-sizing: border-box;
}

.gsr-autocomplete-actions .mud-button-root {
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 50% !important;
}

.gsr-autocomplete-actions .mud-icon-button {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 4px !important;
}

.gsr-autocomplete-with-actions.variant-outlined .gsr-autocomplete-actions {
    right: 12px;
}

.gsr-autocomplete-with-actions.variant-filled .gsr-autocomplete-actions {
    right: 12px;
}

@media (max-width: 600px) {
    .gsr-autocomplete-actions .mud-icon-button {
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
    }

    /* Stack MudDialog action buttons vertically on narrow viewports.
       The default row layout combined with the fixed 100px width above
       makes longer labels ("Save and view", "Send Sms") wrap to two
       lines and squeezes neighbouring buttons.

       Pin the actions sticky-to-bottom: .gsr-dialog scrolls the whole
       dialog (overflow-y: scroll on the dialog itself), so without this
       3 stacked buttons would push the last one below the visible area.
       For default MudDialogs the actions already sit below the scroll
       container, so the sticky declaration is a harmless no-op. */
    .mud-dialog-container .mud-dialog-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 16px;
        position: sticky;
        bottom: 0;
        background: var(--mud-palette-surface, #fff);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        z-index: 2;
    }

    .mud-dialog-container .mud-dialog-actions .mud-button,
    .mud-dialog-container .mud-dialog-actions .mud-button-root,
    .mud-dialog-container .mud-dialog-actions .mud-button-root.wide-button,
    .mud-dialog-container .mud-dialog-actions .mud-button-root.default-button {
        width: 100% !important;
        margin: 0 !important;
        white-space: nowrap;
    }
}

.gsr-autocomplete-with-actions .mud-disabled .gsr-autocomplete-actions {
    opacity: 0.6;
    pointer-events: none;
}


#hubspot-messages-iframe-container {
    margin-bottom: 25px;
}


/*JOB ROSTER SCHEDULER*/

.e-schedule .e-table-wrap .e-resource-left-td {
    width: 300px;
}

.e-schedule .e-table-wrap .e-parent-node {
    padding-left: 2px;
}

/* Weekend cells: e-work-cells but NOT e-work-days */
.e-schedule .e-timeline-month-view .e-work-cells:not(.e-work-days) {
    background-color: #EEEEEE !important;  /* light orange for weekends */
}

/* Highlight current day header (e.g. "16 Tue") */
.e-schedule .e-header-cells.e-date-header.e-current-day {
    background-color: #e0f7fa !important;  /* light blue */
    color: #006064 !important;             /* dark teal text */
    font-weight: 600;
    border-bottom: 2px solid #00bcd4 !important;
}

/* Optionally also highlight the vertical column under the current day */
.e-schedule .e-timeline-month-view .e-work-cells.e-current-day {
    background-color: #f1fbfd !important;
}

.e-schedule .e-appointment-details .e-indicator {
    color: gray;
}

.e-timeline-month-view .e-schedule-table col {
    width: 140px !important;
}



/*JOB ROSTER MULTIPLE SELECTION*/
.e-schedule .e-appointment.selected-event {
    box-shadow: 0 0 0 3px #2196f3 !important;
    z-index: 1000 !important;
    position: relative !important;
}

.e-schedule .e-appointment.selected-event {
    box-shadow: 0 0 0 3px #2196f3 !important;
    z-index: 1000 !important;
    position: relative !important;
}

.e-schedule .e-appointment.selected-event::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    z-index: 1001;
}

.e-schedule .e-appointment.multi-selected-event {
    box-shadow: 0 0 0 2px #9c27b0 !important;
    z-index: 999 !important;
}

.e-schedule .e-appointment.multi-selected-event::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 4px;
    color: white;
    font-weight: bold;
    font-size: 10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    background-color: #9c27b0;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

/* Worksite Legend Bar */
.worksite-legend-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
}

.worksite-legend-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.035);
    margin-right: 4px;
}

.worksite-legend-header .worksite-legend-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.87);
}

.worksite-legend-header .worksite-legend-count {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.54);
}

.worksite-legend-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    overflow: hidden;
    min-width: 0;
}

.worksite-chip,
.worksite-overflow-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
    background-color: #fff;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: 220px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    user-select: none;
}

.worksite-chip:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.32);
}

.worksite-chip-selected {
    border-color: var(--mud-palette-primary);
    border-width: 1.5px;
    background-color: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.08);
    font-weight: 500;
}

.worksite-chip-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.14);
    border-color: var(--mud-palette-primary);
}

.worksite-legend-clear {
    padding: 2px !important;
    margin-left: 2px;
    color: rgba(0, 0, 0, 0.54);
}

.worksite-legend-clear:hover {
    color: var(--mud-palette-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

.worksite-legend-clear .mud-icon-root {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

.worksite-chip .worksite-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.worksite-chip .worksite-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.worksite-overflow-chip {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.75);
    padding-right: 6px;
    font-weight: 500;
    border-color: rgba(0, 0, 0, 0.24);
    transition: background-color 120ms ease, border-color 120ms ease;
}

.worksite-overflow-chip:hover {
    background-color: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.06);
    border-color: var(--mud-palette-primary, rgba(0, 0, 0, 0.4));
}

.worksite-overflow-chip .worksite-overflow-count {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.worksite-overflow-chip .mud-icon-root {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--mud-palette-primary);
}

.worksite-overflow-selected {
    border-color: var(--mud-palette-primary);
    border-width: 1.5px;
    background-color: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.1);
}

.worksite-overflow-selected:hover {
    background-color: rgba(var(--mud-palette-primary-rgb, 25, 118, 210), 0.18);
    border-color: var(--mud-palette-primary);
}

.worksite-overflow-selected .worksite-overflow-count {
    color: var(--mud-palette-primary);
}

.worksite-overflow-popover {
    padding: 10px;
    max-width: 360px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.timezone-box {
    flex-shrink: 0;
    width: 240px;
}

/* Align the timezone autocomplete height with the worksite chips (36px). */
.timezone-box .mud-input-control.mud-input-control-margin-dense .mud-input.mud-input-outlined > input {
    padding-top: 8px;
    padding-bottom: 8px;
}

/*Job Scheduler Loading*/
.scheduler-wrapper {
    position: relative;
}

/* Positioning context for the reload overlay so it's scoped to the SfSchedule
   area only — worksite chips, timezone, and the page toolbar stay interactive. */
.schedule-render-zone {
    position: relative;
}

.loading-overlay {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;            /* uses height of scheduler-wrapper */
    background-color: rgba(255, 255, 255, 0.7); /* optional dimming */
    z-index: 2000;           /* higher than SfSchedule internal elements */
}

/* Initial load: in-flow centered block using inline height */
.scheduler-loading-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Subsequent reloads: overlays the rendered scheduler while Syncfusion re-binds.
   Absolute-positioned so MudGrid stays in layout underneath (prevents content jump). */
.scheduler-loading-overlay--over {
    position: absolute;
    inset: 0;
    height: auto !important;
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(1px);
    z-index: 10;
    animation: fadeIn 120ms ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.loading-content {
    text-align: center;
    max-width: 400px;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease-out;
}

/* Appbar avatar menu: tighten the divider that separates the admin-only items
   (Subscription / Settings) from Profile / Sign Out. MudBlazor's default
   divider has 8px+ vertical margin which feels airy in a 4-item menu. */
.gsr-appbar-menu-list .mud-divider {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Viewport visibility helpers for GsrTable FilterBarContent slots.
   <MudHidden> doesn't react to viewport changes reliably when its content is
   captured as a RenderFragment in another component's slot, so list pages
   apply these classes directly to each MudItem to swap radio groups for
   compact MudSelect dropdowns at the Xs breakpoint. */
.gsr-show-mobile { display: none !important; }

@media (max-width: 599.98px) {
    .gsr-show-desktop { display: none !important; }
    .gsr-show-mobile { display: block !important; }
}

/* Dashboard widget cards (mobile fallback for wide tables that can't fit a
   phone viewport). Each row of the original table becomes one card with
   label-left / value-right stat rows beneath the title. */
.gsr-widget-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background-color: #fff;
}

.gsr-widget-card--total {
    background-color: rgba(0, 0, 0, 0.02);
}

.gsr-widget-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.78);
    margin-bottom: 6px;
}

.gsr-widget-card-stats {
    display: flex;
    flex-direction: column;
}

.gsr-widget-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.gsr-widget-stat:first-child {
    border-top: none;
}

.gsr-widget-stat:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.gsr-widget-stat-label {
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.7);
}

.gsr-widget-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
}

.gsr-widget-stat-value--success { color: var(--mud-palette-success); }
.gsr-widget-stat-value--warning { color: var(--mud-palette-warning); }
.gsr-widget-stat-value--error   { color: var(--mud-palette-error); }

/* Total row inside a stats list reads as a sum/footer — slightly stronger
   top border, label/value get a touch more weight. Used by the simple
   single-list widgets (People/Equipment by Status). */
.gsr-widget-stat--total {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding-top: 8px;
}

.gsr-widget-stat--total .gsr-widget-stat-label {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
}

/* ---- Mobile (Xs, < 600px) overrides ---------------------------------------- */

/* Page header: shrink title/icon and let MoreMenu wrap onto its own row.
   Without this, long titles (e.g. "Job Scheduler") and the FILTER button
   cause horizontal overflow on phones. */
@media (max-width: 599.98px) {
    .gsr-page-header-title {
        font-size: 1.125rem !important;
        line-height: 1.4;
    }

    .gsr-page-header-icon {
        font-size: 1.5rem !important;
        height: 1.5rem;
        width: 1.5rem;
        margin-right: 0.5rem !important;
    }

    /* On mobile the page title is rendered in the global MudAppBar (see
       AdminLayout). Hide the in-page title row so the actions row sits flush
       under the appbar. The !important is needed because the title row carries
       MudBlazor's `d-flex` utility (display: flex !important) which would
       otherwise win against a plain `display: none`. */
    .gsr-page-header .gsr-page-header-title-area {
        display: none !important;
    }

    /* Tighten the vertical chrome around the actions row on mobile so the
       schedule (or list) below it gets back the ~24px we'd otherwise spend on
       MudContainer's pt-4 (16px) + GsrPageHeader's mb-3 (12px). */
    .mud-main-content > .mud-container.pt-4 {
        padding-top: 4px !important;
    }

    .gsr-page-header.mb-3 {
        margin-bottom: 4px !important;
    }

    .gsr-page-header .gsr-page-header-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        gap: 4px;
        row-gap: 4px;
    }

    /* Inside the scheduler MoreMenu the row is: refresh | FILTER (grow) | help.
       The MoreMenu wrapper grabs the leftover space (flex: 1, not 1 1 100% —
       that would push the help icon to a new line). FILTER then flex-grows
       inside the wrapper, which is where the actual stretch happens. */
    .gsr-page-header-actions .gsr-scheduler-actions {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .gsr-scheduler-actions .gsr-scheduler-filter-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100%;
    }

    /* Mobile-only timezone bar replaces the worksite + timezone row. */
    .timezone-box-mobile {
        width: 100%;
    }

    .timezone-box-mobile .mud-input-control.mud-input-control-margin-dense .mud-input.mud-input-outlined > input {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Toolbar buttons inside the schedule are touch-cramped at default sizes —
       give them a bit more padding so the date-nav arrows and view picker are
       hittable with a thumb. */
    .gsr-schedule-mobile .e-schedule-toolbar .e-toolbar-item {
        min-width: 36px;
    }

    .gsr-schedule-mobile .e-schedule-toolbar .e-tbar-btn {
        padding: 6px 8px;
    }

    /* Show the asset/person row inside the event card on mobile. */
    .gsr-schedule-mobile .job-event-card__asset {
        display: block;
    }

    /* Syncfusion's Agenda view ships a fixed appointment height (~48px) which
       crops a 3-row event card. Let the row grow with content so the asset
       row is visible. */
    .gsr-schedule-mobile .e-agenda-cell .e-appointment,
    .gsr-schedule-mobile .e-agenda-view .e-appointment,
    .gsr-schedule-mobile .e-month-agenda-view .e-appointment {
        height: auto !important;
        min-height: 64px;
    }

    .gsr-schedule-mobile .e-agenda-cell {
        height: auto !important;
    }

    /* Bump the inner padding so the third line breathes. */
    .gsr-schedule-mobile .job-event-card__body {
        padding-top: 6px;
        padding-bottom: 4px;
    }

    /* Syncfusion auto-injects a recurrence indicator in the top-right of the
       appointment for recurring events. It's redundant alongside our compact
       3-line mobile card, so suppress it here. */
    .gsr-schedule-mobile .e-appointment .e-recurrence-icon,
    .gsr-schedule-mobile .e-appointment .e-recurrence-edit-icon {
        display: none !important;
    }

    /* Compact MonthAgenda calendar grid on mobile. Syncfusion stretches the
       inner schedule-table to 100% of the calendar area, so the 6 weekly
       rows expand to ~60–70px each and crowd the agenda strip below.
       Forcing height:auto on the table + fixed compact row heights trims the
       grid by ~70px, giving the agenda strip room for one more event card.
       MonthAgenda has no public "dense" knob — CSS is the only lever. */
    .gsr-schedule-mobile .e-month-agenda-view .e-content-wrap > table,
    .gsr-schedule-mobile .e-month-agenda-view .e-content-table {
        height: auto !important;
    }

    .gsr-schedule-mobile .e-month-agenda-view .e-header-cells {
        height: 22px !important;
        font-size: 0.7rem;
    }

    .gsr-schedule-mobile .e-month-agenda-view .e-work-cells {
        height: 30px !important;
    }

    .gsr-schedule-mobile .e-month-agenda-view .e-date-header {
        height: 20px;
        width: 20px;
        line-height: 20px;
        font-size: 0.8rem;
        margin-top: 2px;
    }

    /* Pull the event-indicator dot tight under the date number. */
    .gsr-schedule-mobile .e-month-agenda-view .e-appointment-indicator {
        margin-top: 0;
    }

    /* MudAppBar page title — fits between hamburger and the right-side icons.
       Truncates if the title is long so the appbar buttons stay reachable. */
    .gsr-appbar-title {
        min-width: 0;
        max-width: 55vw;
        overflow: hidden;
    }

    .gsr-appbar-title-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

    /* User chip on mobile: drop the username text so the chip collapses to an
       icon-only avatar trigger. The full name is still visible when the menu opens
       (and accessibility tools can still read the underlying chip). */
    .gsr-appbar-user-chip-name {
        display: none;
    }

    .gsr-appbar-user-chip {
        padding-right: 4px !important;
        padding-left: 4px !important;
        min-width: 36px;
    }

    /* Mobile menu items: shrink the leading icon and pull it closer to the text.
       MudMenuItem inherits Material's 56px icon gutter, which reads as too airy
       inside the tight appbar dropdown. */
    .gsr-appbar-menu-list .mud-list-item-icon {
        min-width: 28px;
        margin-right: 6px;
    }

    .gsr-appbar-menu-list .mud-list-item-icon .mud-icon-root {
        font-size: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Training Needs Analysis card header: stack the title above the radio
       group on mobile (otherwise the title wraps into 3 narrow lines and the
       radios get squeezed off-screen). */
    .gsr-tna-card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }

    .gsr-tna-card-header .mud-card-header-content {
        width: 100%;
    }

    .gsr-tna-radio-group {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Certifications list rows on mobile: promote the Asset name to a card title
       and let the Expires In chip sit at the bottom-right of its row. The MudTable
       label/value mode renders each TD with a data-label attribute matching the
       column header — we lean on that for targeting without touching GsrTable. */

    /* Hide the inline "label:" prefix for cells where the value is self-evident
       (asset name, asset type, skill, status). Date fields keep their labels. */
    .gsr-certifications-list td[data-label="Asset"]::before,
    .gsr-certifications-list td[data-label="Asset Type"]::before,
    .gsr-certifications-list td[data-label="Skill"]::before,
    .gsr-certifications-list td[data-label="Expires In"]::before {
        display: none !important;
    }

    /* Asset name = card title. */
    .gsr-certifications-list td[data-label="Asset"] {
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding-bottom: 2px !important;
        text-align: left !important;
    }

    /* Asset Type = subtle uppercase subtitle directly under the title. */
    .gsr-certifications-list td[data-label="Asset Type"] {
        font-size: 0.7rem !important;
        color: rgba(0, 0, 0, 0.55) !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding-top: 0 !important;
        padding-bottom: 6px !important;
        text-align: left !important;
    }

    /* Skill text condensed; allows wrap to multiple lines. */
    .gsr-certifications-list td[data-label="Skill"] {
        font-size: 0.85rem !important;
        line-height: 1.35;
        padding-top: 4px !important;
        padding-bottom: 6px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Expires In chip stays in flow, right-aligned at the bottom of the row.
       Keeping it in flow avoids overlap with the eye action button MudTable
       renders at the top-right of each mobile row. */
    .gsr-certifications-list td[data-label="Expires In"] {
        text-align: right !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    /* Generic mobile-list helpers shared by any GsrTable page that wants a
       tighter mobile chrome. A page opts in by wrapping its <GsrTable> in
       <div class="gsr-mobile-list"> and tagging each mobile MudItem inside
       FilterBarContent with class="gsr-mobile-filter-item". */

    /* Strip MudGrid's default 24px Spacing-6 padding so the dropdown can stretch
       edge-to-edge of the row instead of sitting inset, and remove the big gap
       between consecutive filter items. */
    .gsr-mobile-filter-item {
        padding: 0 !important;
    }

    /* Breathing room between the search row above and the first mobile filter.
       Adjacent-sibling selector targets the first .gsr-mobile-filter-item that
       follows the last hidden .gsr-show-desktop item — :first-of-type doesn't
       work because the desktop branch is still in DOM (just display:none). */
    .gsr-show-desktop + .gsr-mobile-filter-item {
        margin-top: 8px;
    }

    /* Small gap between consecutive mobile filter items (replaces the MudGrid
       padding we stripped above). */
    .gsr-mobile-filter-item + .gsr-mobile-filter-item {
        margin-top: 4px;
    }

    /* Multi-select checkbox cell sits awkwardly at the top of the mobile row
       in MudTable's stacked label/value mode (an empty band with just a
       checkbox). Pin it to the top-right corner of the row card and reserve
       horizontal room on the actions cell so the icons sit on the SAME line
       as the checkbox (checkbox on the right, icons left of it). The transparent
       top border creates visual breathing room between consecutive cards AND
       pushes the absolute checkbox down (it's positioned against the padding
       edge, which sits below the border). */
    .gsr-mobile-list .mud-table-row {
        position: relative;
        border-top: 12px solid transparent;
    }

    .gsr-mobile-list .mud-table-row td.mud-table-cell-checkbox {
        position: absolute;
        top: 4px;
        right: 4px;
        padding: 0 !important;
        background: transparent !important;
        z-index: 1;
    }

    /* Shift the right-aligned action icons left by ~40px so they don't overlap
       with the absolute-positioned checkbox at right:4px. */
    .gsr-mobile-list .mud-table-row td.mud-table-cell-checkbox + td {
        padding-right: 40px !important;
    }

    /* Shrink the visible text in every input + dropdown on the page (filter
       dropdowns, search box, MudTable mobile "Sort by" selector). Font-size
       only — overriding padding/min-height breaks the outlined-input
       floating-label notch. */
    .gsr-mobile-list .mud-input input,
    .gsr-mobile-list .mud-input .mud-input-slot,
    .gsr-mobile-list .mud-select-input,
    .gsr-mobile-list .mud-input-label {
        font-size: 0.875rem !important;
    }

    /* Help drawer fills the viewport on mobile. The default 400px width clipped
       past the right edge of small phones, and the appbar above the drawer
       showed as an empty orange strip. Pulling the drawer to top:0 with full
       width turns the drawer into a proper full-screen sheet — GsrHelpContent
       already provides its own header + close button.

       --mud-drawer-width-right MUST be overridden to match the forced width.
       MudBlazor's persistent-drawer closed state uses
           right: calc(-1 * var(--mud-drawer-width-right))
       to slide the drawer off the right edge. If the variable stays at its
       Razor-set 400px while we render the drawer at 100vw, on phones wider
       than 400px CSS-px (e.g. iPhone 14 Pro Max @ 430px) the closed drawer's
       right edge ends up 30px inside the viewport, which iOS Safari surfaces
       as horizontal page scroll — appearing as the left side of the page
       being clipped. Android Chrome absorbs the same overflow silently. */
    .gsr-help-drawer.mud-drawer {
        --mud-drawer-width-right: 100vw;
        width: 100vw !important;
        top: 0 !important;
        height: 100vh !important;
        max-width: 100vw !important;
    }

    /* HubSpot chat ("Gazza, the GO! Bot") floats over the schedule on phones.
       Newer HubSpot widgets ship under different IDs/classes than the legacy
       "messages-iframe-container" — broadened here to cover all observed forms.
       Body prefix bumps specificity above any inline style HubSpot injects. */
    body #hubspot-messages-iframe-container,
    body [id^="hubspot-messages-iframe"],
    body [id^="hubspot-conversations-inline"],
    body iframe[id^="hubspot"],
    body iframe[title*="HubSpot" i],
    body .hbspt-bot-launcher,
    body [data-test-id*="chat-launcher"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slightly compact form-field labels inside the scheduler filter popover. */
.gsr-filter-popover .mud-input-label,
.gsr-filter-popover .mud-input-label-root,
.gsr-filter-popover .mud-input-label.mud-input-label-inputcontrol {
    font-size: 0.9rem;
}

.gsr-filter-popover .mud-input-slot,
.gsr-filter-popover .mud-select-input {
    font-size: 0.9rem;
}

/* Radio labels (Person / Equipment) and selected chips inside MultiSelect
   (e.g. Include Assets in Roles values) — keep consistent with form labels. */
.gsr-filter-popover .mud-radio .mud-typography,
.gsr-filter-popover .mud-chip,
.gsr-filter-popover .mud-chip-content {
    font-size: 0.9rem;
}

/*RESOURCE HEADER (left-hand row labels)*/
/* Name is rendered as MudLink for click-through, but we want it to read as
   plain text until hovered — reduces visual competition with the colored events. */
.resource-header-name,
.resource-header-name:visited {
    color: var(--mud-palette-text-primary) !important;
    text-decoration: none !important;
}

.resource-header-name:hover,
.resource-header-name:focus-visible {
    text-decoration: underline !important;
}

/* Subtle row hover on the resource cell for easier scanning. */
.e-schedule .e-resource-cells:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/*JOB EVENT TEMPLATE*/
.job-event-card {
    position: relative;
    display: flex;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.job-event-card__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.job-event-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.job-event-card__header {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.job-event-card__lead-icon {
    font-size: 0.8rem !important;
    flex-shrink: 0;
}

.job-event-card__lead-icon--day {
    color: #f59e0b;
}

.job-event-card__lead-icon--night {
    color: #475569;
}

.job-event-card__subject {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.job-event-card__meta {
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asset/person row — hidden on desktop, shown on mobile via the @media block below.
   Color is intentionally NOT set here so the row inherits _foreColor from
   .job-event-card__inner (computed by ComputeAdaptiveForeColor against the user's
   chosen background). */
.job-event-card__asset {
    display: none;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.job-event-card__icons {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-event-card__icons .mud-icon-root {
    font-size: 0.95rem;
}

/* job floater icons */
.job-floater-icon {
    display: none;
}

/* When combined with show-job-floater-red, display and color red */
.job-floater-icon.show-job-floater-red {
    display: inline-block;
    color: var(--mud-palette-error);
}

/* When combined with show-job-floater-green, display and color green */
.job-floater-icon.show-job-floater-green {
    display: inline-block;
    color: var(--mud-palette-success);
}

/* unresolved icons */
.job-unresolved-notes-icon {
    display: none;
}
.show-unresolved-notes .job-unresolved-notes-icon {
    display: inline-block;
}

/* status icons */
.job-timesheet-status-icon {
    display: none;
}

.job-timesheet-status-icon-green {
    color: var(--mud-palette-success);
}

.job-timesheet-status-icon-amber {
    color: var(--mud-palette-warning);
}

.job-timesheet-status-icon-red {
    color: var(--mud-palette-error);
}

/* Show icons */
.show-timesheet-status .job-timesheet-status-icon {
    display: inline-block;
}

/*JOB EVENT TOOLTIP*/
/* Job Event Tooltip Styles */
/* Neutralise Syncfusion's default dark tooltip container — let the inner .job-event-tooltip own the visible box.
   Selectors are un-scoped because Syncfusion renders tooltip popups on document.body, outside the .e-schedule tree. */
.e-tooltip-wrap.e-popup,
.e-schedule-tooltip-container,
.e-tooltip-wrap.e-popup .e-tip-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    padding: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    color: inherit !important;
}

.e-tooltip-wrap .e-arrow-tip-outer,
.e-tooltip-wrap .e-arrow-tip-inner {
    display: none !important;
}

.job-event-tooltip {
    background: #ffffff;
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 14px 16px;
    max-width: 380px;
    min-width: 260px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.job-event-tooltip__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.job-event-tooltip__icon {
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.job-event-tooltip__title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-word;
}

.job-event-tooltip__shift {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
    width: fit-content;
    line-height: 1;
}

.job-event-tooltip__shift--day {
    background: rgba(251, 191, 36, 0.14);
    color: #b45309;
}

.job-event-tooltip__shift--night {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.job-event-tooltip__shift-icon {
    font-size: 0.95rem !important;
    width: 0.95rem !important;
    height: 0.95rem !important;
    color: inherit !important;
}

.job-event-tooltip__shift-text {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.job-event-tooltip__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
}

.job-event-tooltip__field {
    display: contents;
}

.job-event-tooltip__field-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    line-height: 1.6;
    padding-top: 1px;
    white-space: nowrap;
}

.job-event-tooltip__field-value {
    font-size: 0.825rem;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.87);
    word-break: break-word;
}

.job-event-tooltip__notes {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.job-event-tooltip__notes-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin-bottom: 6px;
}

.job-event-tooltip__note-item {
    background: rgba(0, 0, 0, 0.035);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
}

.job-event-tooltip__note-subject {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87);
    margin-bottom: 2px;
}

.job-event-tooltip__note-contents {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.72);
    line-height: 1.4;
    word-break: break-word;
}

/* ---- Compliance Finder filter section ----------------------------------- */

/* Desktop: align the "Only show..." checkboxes flush with the field above. */
.compliance-filter-section .compliance-filter-checkbox {
    margin-left: -14px;
}

/* Mobile: tighten the stacked filter section, align the checkboxes to the
   left edge of the input above, and constrain the progress-bar column so the
   "X of Y" cell doesn't blow up the row height. */
@media (max-width: 599.98px) {
    .compliance-filter-section.mud-grid > .mud-grid-item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .compliance-filter-section .mud-typography-overline {
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    .compliance-filter-section .mud-input-control {
        margin-top: 4px !important;
    }

    .compliance-filter-section .compliance-filter-checkbox {
        margin-top: -4px !important;
        margin-left: -4px !important;
    }

    .compliance-filter-section .compliance-filter-checkbox .mud-button-root {
        padding: 4px !important;
    }

    .compliance-filter-section .mud-radio-group {
        margin-top: -4px !important;
    }

    .compliance-filter-section .mud-radio .mud-button-root {
        padding: 4px !important;
    }

    /* Compliance progress-bar column: in MudTable's stacked mobile rows, the
       <td> becomes a flex row with the data-label on the left and value on
       the right. Give the link wrapper a definite width so the bar isn't
       collapsed to min-content (which would force "3 of 3" to wrap one
       character per line), and slim the bar height to fit the row. */
    .compliance-section .mud-table-cell .mud-link {
        display: block;
        width: 140px;
        margin-left: auto;
    }

    .compliance-section .mud-table-cell .mud-progress-linear {
        width: 100% !important;
        height: 16px !important;
    }

    .compliance-section .mud-table-cell .mud-progress-linear .mud-typography {
        font-size: 0.75rem !important;
        line-height: 16px !important;
        white-space: nowrap;
    }
}

/* ---- VoC Viewer filter section ------------------------------------------ */

/* Mobile: tighten the gap between the Asset Role and Search fields, and let
   the nested skills table inside CustomChildRowContent occupy the full row
   width (otherwise the parent table's column widths squeeze it into the left
   ~50% of the row). */
@media (max-width: 599.98px) {
    .voc-filter-section.mud-grid > .mud-grid-item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .voc-filter-section .mud-input-control {
        margin-top: 4px !important;
    }

    /* The Search input has a hard-coded mt-4 (16px) for desktop alignment;
       collapse it on mobile since each field is on its own row. */
    .voc-filter-section .mud-input-control.mt-4 {
        margin-top: 4px !important;
    }

    /* Plain <td colspan> in MudTable's CustomChildRowContent isn't a
       mud-table-cell, so MudTable's mobile flex rule doesn't apply — but the
       parent table's auto-width columns still leave it sized to one column.
       Take both the row and the cell out of table-layout entirely so the
       inner skills table can use the full viewport width. */
    .voc-section .voc-child-tr {
        display: block !important;
        width: 100% !important;
    }

    .voc-section .voc-child-row {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .voc-section .voc-child-row > .mud-table-container,
    .voc-section .voc-child-row .mud-table-root {
        width: 100% !important;
    }

    /* The inner table's <colgroup> widths (9% / 42% / 10% / 10% / 18% / 12%)
       still apply on mobile and combined with the narrow parent cell can
       produce wrapped, partial-width rows. Strip them so each stacked cell
       gets the full width. */
    .voc-section .voc-child-row .mud-table-root colgroup {
        display: none !important;
    }
}