/* ============================================================================
   Fire module — scheduling calendar, notifications, acknowledgements.

   Loaded globally via App.razor (MetroStaticAssetPaths.FireCss).
   Uses Bootstrap / metro design tokens so light/dark themes stay consistent.
   ========================================================================== */

/* Fire roster/status tokens (alias shared metro status family; UiFire2 H1). */
.dash-v2--fire,
.fire-cal,
.fire-my-schedule,
.fire-ot-board,
.fire-off-shift-page,
.fire-vbid,
.fire-vbid-page,
.fire-page-header,
.fire-ops-page,
.fire-to-page,
.fire-me-page,
.fire-ot2-panel,
.pk-page.fire-to-page {
    --fire-station-navy: #001f3f;
    --fire-station-navy-mid: #0a2f55;
    --fire-station-red: #c00000;
    --fire-station-red-deep: #9a0000;
    --fire-station-red-soft: #f97066;
    --fire-station-paper: #ffffff;
    --fire-station-hero-image: none;
    --fire-text-xs: 0.75rem;
    --fire-status-light-duty-fg: var(--metro-status-info-ink);
    --fire-status-light-duty-bg: color-mix(in srgb, var(--metro-status-info-solid) 20%, var(--bs-body-bg));
    --fire-status-light-duty-border: var(--metro-status-info-line);
    --fire-status-military-fg: var(--metro-status-success-ink);
    --fire-status-military-bg: color-mix(in srgb, var(--metro-status-success-solid) 18%, var(--bs-body-bg));
    --fire-status-military-border: var(--metro-status-success-line);
    --fire-status-ext-sick-fg: var(--metro-status-warning-ink);
    --fire-status-ext-sick-bg: color-mix(in srgb, var(--metro-status-warning-solid) 20%, var(--bs-body-bg));
    --fire-status-ext-sick-border: var(--metro-status-warning-line);
    --fire-status-pending-fg: var(--metro-status-warning-ink);
    --fire-status-pending-bg: color-mix(in srgb, var(--metro-status-warning-solid) 28%, var(--bs-body-bg));
    --fire-status-pending-border: var(--metro-status-warning-line);
    /* Time off / OT / training chips match the greeting navy (not rainbow status hues). */
    --fire-status-ot-fg: var(--fire-station-navy, #001f3f);
    --fire-status-ot-bg: color-mix(in srgb, var(--fire-station-navy, #001f3f) 12%, var(--bs-body-bg));
    --fire-status-ot-border: color-mix(in srgb, var(--fire-station-navy, #001f3f) 32%, transparent);
    --fire-status-vacation-fg: var(--fire-station-navy, #001f3f);
    --fire-status-vacation-bg: color-mix(in srgb, var(--fire-station-navy, #001f3f) 12%, var(--bs-body-bg));
    --fire-status-vacation-border: color-mix(in srgb, var(--fire-station-navy, #001f3f) 32%, transparent);
    --fire-status-sick-fg: var(--metro-status-danger-ink);
    --fire-status-sick-bg: color-mix(in srgb, var(--metro-status-danger-solid) 12%, var(--bs-body-bg));
    --fire-status-sick-border: var(--metro-status-danger-line);
    --fire-status-training-fg: var(--fire-station-navy, #001f3f);
    --fire-status-training-bg: color-mix(in srgb, var(--fire-station-navy, #001f3f) 12%, var(--bs-body-bg));
    --fire-status-training-border: color-mix(in srgb, var(--fire-station-navy, #001f3f) 32%, transparent);
    --fire-status-other-fg: var(--fire-station-navy, #001f3f);
    --fire-status-other-bg: color-mix(in srgb, var(--fire-station-navy, #001f3f) 10%, var(--bs-body-bg));
    --fire-status-other-border: color-mix(in srgb, var(--fire-station-navy, #001f3f) 28%, transparent);
}

/* ── Fire station chrome (CSS-only emblem / swoosh until city assets arrive) ─ */

.fire-station-emblem {
    --fire-emblem-size: 4.25rem;
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--fire-emblem-size);
    justify-content: center;
    width: var(--fire-emblem-size);
}

.fire-station-emblem--sm { --fire-emblem-size: 2.35rem; }
.fire-station-emblem--lg { --fire-emblem-size: 5.75rem; }

.fire-station-emblem__svg {
    display: block;
    height: 100%;
    width: 100%;
}

.fire-station-emblem--photo {
    /* Pearl Fire Rescue patch is nearly square; keep room for the gold cord. */
    --fire-emblem-size: 4.75rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}

.fire-station-emblem--photo.fire-station-emblem--sm { --fire-emblem-size: 2.65rem; }
.fire-station-emblem--photo.fire-station-emblem--lg { --fire-emblem-size: 6.25rem; }

.fire-station-emblem__photo {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.fire-station-emblem__ring {
    fill: color-mix(in srgb, var(--fire-station-navy, #001f3f) 55%, #000);
    stroke: var(--fire-station-red, #c00000);
    stroke-width: 3.5;
}

.fire-station-emblem__cross {
    fill: var(--fire-station-paper, #fff);
}

.fire-station-emblem__core {
    fill: var(--fire-station-red, #c00000);
    stroke: var(--fire-station-paper, #fff);
    stroke-width: 1.5;
}

.fire-station-swoosh {
    color: var(--fire-station-red, #c00000);
    height: 1.15rem;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
}

.fire-station-swoosh__svg {
    display: block;
    fill: currentColor;
    height: 100%;
    width: 100%;
}

.fire-station-hero-intro {
    align-items: center;
    display: flex;
    gap: .85rem;
    min-width: 0;
}

.fire-station-hero-intro__text {
    display: grid;
    gap: .15rem;
    min-width: 0;
}

.dash-v2--fire .dash-v2-next {
    background: color-mix(in srgb, var(--fire-station-red, #c00000) 88%, #000);
    border-color: color-mix(in srgb, var(--fire-station-red, #c00000) 70%, #fff);
    border-left: 4px solid var(--fire-station-paper, #fff);
}

.dash-v2--fire .dash-v2-next + .dash-v2-next {
    background: rgba(255, 255, 255, .08);
    border-left-color: transparent;
}

/* Station tile grid for Get there fast */
.dash-v2--fire .dash-v2-shortcut-section > .dash-v2-shortcuts,
.dash-v2--fire .dash-v2-shortcuts:not(.dash-v2-shortcuts--list):not(.dash-v2-shortcuts--compact) {
    gap: .65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Shortcut groups: navy/red lock also lives in dashboard-v2.css (critical) so
   ColorTemplate / rainbow accents never win before async fire.css loads. Keep
   the same rules here for dark-theme retints and MAUI cascade reinforcement. */
.dash-v2--fire .dash-v2-shortcut-groups > .dash-v2-shortcut-section:nth-child(n),
.dash-v2--fire .dash-v2-card .dash-v2-shortcut-section.dash-v2-card,
.dash-v2--fire .dash-v2-shortcut-section.dash-v2-card {
    --metro-card-accent: var(--fire-station-navy, #001f3f);
    border: 1px solid var(--fire-station-red, #c00000);
    border-left: 3px solid var(--fire-station-red, #c00000);
}

.dash-v2--fire .dash-v2-shortcut-section__head {
    background: var(--fire-station-navy, #001f3f);
    border-bottom: 1px solid color-mix(in srgb, var(--fire-station-navy, #001f3f) 70%, #000);
    color: var(--fire-station-paper, #fff);
}

.dash-v2--fire .dash-v2-shortcut-section__head h3 {
    color: var(--fire-station-paper, #fff);
}

.dash-v2--fire .dash-v2-shortcut-section__head h3::before {
    background: var(--fire-station-red, #c00000);
}

.dash-v2--fire .dash-v2-shortcut-section__head .dash-v2-shortcuts-edit-toggle {
    border-color: color-mix(in srgb, var(--fire-station-paper, #fff) 35%, transparent);
    color: color-mix(in srgb, var(--fire-station-paper, #fff) 88%, transparent);
}

.dash-v2--fire .dash-v2-shortcut-section__head .dash-v2-shortcuts-edit-toggle:hover {
    border-color: var(--fire-station-paper, #fff);
    color: var(--fire-station-paper, #fff);
}

@media (hover: hover) and (pointer: fine) {
    .dash-v2--fire .dash-v2-shortcut-section.dash-v2-card:hover {
        border-color: var(--fire-station-red, #c00000);
        box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(192, 0, 0, .12);
    }
}

.dash-v2--fire .dash-v2-shortcut-tile > a,
.dash-v2--fire .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove),
.dash-v2--fire .fire-v2-shortcut-tile > a,
.dash-v2--fire .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove) {
    background: var(--fire-station-paper, #fff);
    border: 1px solid color-mix(in srgb, var(--fire-station-navy, #001f3f) 10%, #e4e7ec);
    border-radius: .9rem;
    box-shadow: 0 1px 2px rgba(0, 31, 63, .04), 0 6px 16px rgba(0, 31, 63, .05);
    color: var(--fire-station-navy, #001f3f);
    min-height: 5.4rem;
}

.dash-v2--fire .dash-v2-shortcut-tile i,
.dash-v2--fire .fire-v2-shortcut-tile i {
    color: var(--fire-station-navy, #001f3f);
    font-size: 1.35rem;
}

.dash-v2--fire .fire-v2-attention {
    border-color: color-mix(in srgb, var(--fire-station-red, #c00000) 35%, var(--dash-line, #e4e7ec));
}

.dash-v2--fire .fire-v2-attention .dash-v2-card__head {
    align-items: center;
}

.dash-v2--fire .fire-v2-attention .dash-v2-kicker {
    color: var(--fire-station-red, #c00000);
}

@media (max-width: 767.98px) {
    .dash-v2--fire .fire-v2-attention {
        background: linear-gradient(180deg, color-mix(in srgb, var(--fire-station-red, #c00000) 92%, #000) 0 3.35rem, var(--fire-station-paper, #fff) 3.35rem);
        border: 0;
        border-radius: 1rem;
        box-shadow: 0 8px 24px rgba(0, 31, 63, .1);
        color: inherit;
        overflow: hidden;
        padding-top: 0;
    }

    .dash-v2--fire .fire-v2-attention .dash-v2-card__head {
        background: transparent;
        color: #fff;
        margin: 0;
        min-height: 3.35rem;
        padding: .65rem 1rem;
    }

    .dash-v2--fire .fire-v2-attention .dash-v2-kicker,
    .dash-v2--fire .fire-v2-attention h2 {
        color: #fff;
    }

    .dash-v2--fire .fire-v2-attention .dash-v2-count {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

    .dash-v2--fire .fire-v2-attention .dash-v2-action-list {
        padding: .35rem .75rem .75rem;
    }
}

/* Desktop Fire page header + phone navy bar */
.fire-page-header.dash-v2-hero {
    --dash-hero-gradient:
        var(--fire-station-hero-image, none),
        repeating-linear-gradient(-32deg, transparent 0 10px, rgba(255, 255, 255, .035) 10px 11px),
        linear-gradient(145deg, var(--fire-station-navy, #001f3f) 0%, var(--fire-station-navy-mid, #0a2f55) 55%, #00152c 100%);
    background: var(--dash-hero-gradient);
    background-size: cover, auto, auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
}

.fire-page-header.dash-v2-hero .fire-station-swoosh {
    bottom: -1px;
    left: 0;
    position: absolute;
    right: 0;
}

.fire-page-header__brand {
    align-items: center;
    display: flex;
    gap: .65rem;
    min-width: 0;
}

.mobile-shell .fire-page-header--phone {
    background:
        var(--fire-station-hero-image, none),
        linear-gradient(145deg, var(--fire-station-navy, #001f3f), var(--fire-station-navy-mid, #0a2f55));
    background-size: cover, auto;
    border-radius: 0 0 0 0;
    box-shadow: 0 8px 20px rgba(0, 31, 63, .18);
    color: #fff;
    margin: -.25rem -.15rem .85rem;
    padding: .55rem .85rem 1.15rem;
    position: relative;
}

.mobile-shell .fire-page-header--phone .fire-page-header__title h1 {
    color: #fff;
}

.mobile-shell .fire-page-header--phone > p {
    color: color-mix(in srgb, #fff 78%, transparent);
    margin: .15rem 0 0;
}

.mobile-shell .fire-page-header--phone .fire-icon-btn {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.mobile-shell .fire-page-header--phone .fire-station-swoosh {
    bottom: -1px;
    left: 0;
    position: absolute;
    right: 0;
}

/* Time off / OT / training / notifications station accents */
.fire-to-page .pk-hero,
.fire-ops-page .pk-hero,
.fire-me-page .pk-hero,
.fire-ot2-panel .pk-hero {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 31, 63, .04);
}

.fire-station-date-badge {
    background: var(--fire-station-red, #c00000);
    border-radius: .65rem;
    color: #fff;
    display: inline-grid;
    font-weight: 800;
    line-height: 1.05;
    min-width: 3.1rem;
    overflow: hidden;
    place-items: center;
    text-align: center;
}

.fire-station-date-badge__month {
    background: color-mix(in srgb, #000 18%, transparent);
    font-size: .62rem;
    letter-spacing: .06em;
    padding: .28rem .35rem .2rem;
    text-transform: uppercase;
    width: 100%;
}

.fire-station-date-badge__day {
    font-size: 1.15rem;
    padding: .35rem .4rem .4rem;
}

.fire-my-schedule .fire-my-day--off {
    background: color-mix(in srgb, var(--bs-secondary-color) 8%, var(--bs-body-bg));
    color: var(--metro-text-muted, #667085);
}

.fire-my-schedule .fire-my-day--working {
    border-left: 4px solid var(--fire-station-red, #c00000);
}

.fire-notif-hero {
    align-items: center;
    background: linear-gradient(135deg, var(--fire-station-red, #c00000), var(--fire-station-red-deep, #9a0000));
    border-radius: 1rem;
    color: #fff;
    display: flex;
    gap: .85rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
}

.fire-notif-hero i {
    font-size: 1.65rem;
}

.fire-notif-hero h2 {
    font-size: 1.05rem;
    font-weight: 750;
    margin: 0;
}

.fire-notif-hero p {
    color: rgba(255, 255, 255, .85);
    font-size: .82rem;
    margin: .2rem 0 0;
}

.fire-ot2-item--station {
    align-items: flex-start;
    display: grid;
    gap: .75rem .85rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.fire-ot2-item--station .fire-ot2-item__body {
    display: grid;
    gap: .35rem;
    min-width: 0;
}

.fire-to-hero--station {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .1), transparent 38%),
        linear-gradient(145deg, var(--fire-station-navy, #001f3f), var(--fire-station-navy-mid, #0a2f55));
    border: 0;
    border-left: 5px solid var(--fire-station-navy, #001f3f);
    color: #fff;
}

.fire-to-hero--station :is(.pk-hero__eyebrow, .pk-hero__headline, .pk-hero__headline > i, .pk-hero__sub, .pk-stat__label, .pk-stat__value, .fw-semibold, .small) {
    color: #fff;
}

.fire-to-hero--station .pk-hero__sub,
.fire-to-hero--station .small,
.fire-to-hero--station .text-muted {
    color: rgba(255, 255, 255, .82) !important;
}

.fire-to-hero--station .pk-pill,
.fire-to-hero--station .pk-stat {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.fire-training-hero .pk-hero__eyebrow {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mobile-shell .fire-page-header__brand {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 0;
}

.mobile-shell .fire-page-header__brand .fire-station-emblem {
    flex: 0 0 auto;
}

.mobile-shell .fire-page-header__brand h1 {
    min-width: 0;
}

/* ── Page chrome ─────────────────────────────────────────────────────────── */

.fire-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
}

.fire-related-link {
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--bs-primary);
}

.fire-related-link:hover {
    text-decoration: underline;
}

/* Admin /fire/schedule: desktop (≥992) keeps all four chips; phone/tablet (≤991.98) is Day + List + More. */
.fire-schedule-view-modes--phone {
    display: none;
}

/* Unified toolbar More menu (UiFire2 H5) — schedule + My Schedule share this pattern. */
.fire-toolbar-more,
.fire-schedule-view-more,
.fire-my-schedule-more,
.fire-my-view-more {
    position: relative;
    display: inline-flex;
    align-self: center;
    flex-shrink: 0;
}

.fire-toolbar-more__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popover, 1070) - 1);
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
}

.fire-toolbar-more__menu,
.fire-schedule-view-more__menu,
.fire-my-schedule-more__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: var(--z-popover, 1070);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 8.5rem;
    max-width: min(20rem, 92vw);
    padding: 0.65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-body-bg);
    box-shadow: var(--shadow-2, 0 0.35rem 1rem rgba(15, 23, 42, 0.08));
}

.fire-schedule-view-more {
    position: relative;
    display: flex;
}

.fire-schedule-view-more > summary {
    list-style: none;
    cursor: pointer;
}

.fire-schedule-view-more > summary::-webkit-details-marker {
    display: none;
}

/* Counter mobile.css [class*="fire-schedule"] overflow clipping (UiFire H4). */
.mobile-shell .fire-schedule-view-more,
.mobile-shell .fire-schedule-view-modes--phone,
.mobile-shell .fire-schedule-header-overflow,
.mobile-shell .fire-schedule-build-form,
.mobile-shell .fire-schedule-finalize-preview {
    overflow: visible;
}

.fire-schedule-view-more__menu {
    z-index: 6;
}

/* ── Who's working calendar ──────────────────────────────────────────────── */

.fire-cal-station-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.fire-cal-station-dot--off {
    background-color: var(--bs-secondary-color, #6c757d);
}

.fire-cal-shift {
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.65rem;
    background: var(--bs-body-bg);
    box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.04);
}

.fire-cal-shift--compact {
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.4rem;
}

.fire-cal-shift-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.fire-cal-shift-window {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.fire-cal-shift-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}

.fire-cal-station-add,
.fire-cal-shift-add {
    line-height: 1.2;
}

.fire-cal-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.fire-cal-person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 1);
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    transition: border-color var(--duration-ui, 200ms) var(--ease-out, ease-out), background-color var(--duration-ui, 200ms) var(--ease-out, ease-out);
}

.fire-cal-station-alerts {
    border-left-width: 0.35rem;
}

.fire-cal-week-day .fire-cal-station-alerts {
    font-size: 0.68rem;
    line-height: 1.25;
}

.fire-cal-week-day .fire-cal-station-alerts ul {
    padding-left: 0.9rem;
}

.fire-cal-list-station--alert > td,
.fire-cal-list-shift--alert > td {
    box-shadow: inset 0.2rem 0 0 var(--bs-danger);
}

.fire-cal-week-day--alert {
    background: rgba(var(--bs-danger-rgb), 0.06);
}

.fire-cal-person--draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.fire-cal-person--draggable:active {
    cursor: grabbing;
}

.fire-cal-station--drop-target {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.55);
    outline-offset: 2px;
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.fire-cal-person-msfa {
    color: var(--metro-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* Partial training hours beside the name — yellow bubble on the station card. */
.fire-cal-person-msfa--off {
    display: inline-block;
    color: var(--fire-status-training-fg);
    background: var(--fire-status-training-bg);
    border: 1px solid var(--fire-status-training-border);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.25;
    vertical-align: middle;
    white-space: nowrap;
}

.fire-cal-shift-presence-notes {
    border-top: 1px dashed var(--bs-border-color);
    margin-top: 0.55rem;
    padding-top: 0.4rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.fire-cal-month-presence-notes {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    line-height: 1.3;
    color: var(--bs-secondary-color);
}

/* Light duty: soft light-blue highlight (roster + Off lists). */
.fire-cal-person-light-duty {
    color: var(--fire-status-light-duty-fg);
    font-weight: 600;
    white-space: nowrap;
}

.fire-cal-person--light-duty {
    background: var(--fire-status-light-duty-bg);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    box-decoration-break: clone;
}

.fire-cal-person-military {
    color: var(--fire-status-military-fg);
    font-weight: 600;
    white-space: nowrap;
}

.fire-cal-person--military {
    background: var(--fire-status-military-bg);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    box-decoration-break: clone;
}

.fire-cal-person-extended-sick {
    color: var(--fire-status-ext-sick-fg);
    font-weight: 600;
    white-space: nowrap;
}

.fire-cal-person--extended-sick {
    background: var(--fire-status-ext-sick-bg);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    box-decoration-break: clone;
}

.fire-personnel-status-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    vertical-align: middle;
}

.fire-personnel-status-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.12rem 0.35rem;
    border-radius: 0.25rem;
    line-height: 1.2;
    white-space: nowrap;
}

.fire-personnel-status-badge--military {
    background: var(--fire-status-military-bg);
    color: var(--fire-status-military-fg);
    border: 1px solid var(--fire-status-military-border);
}

.fire-personnel-status-badge--light-duty {
    background: var(--fire-status-light-duty-bg);
    color: var(--fire-status-light-duty-fg);
    border: 1px solid var(--fire-status-light-duty-border);
}

.fire-personnel-status-badge--extended-sick {
    background: var(--fire-status-ext-sick-bg);
    color: var(--fire-status-ext-sick-fg);
    border: 1px solid var(--fire-status-ext-sick-border);
}

.fire-cal-person-ot {
    color: var(--fire-status-ot-fg);
    font-weight: 700;
    white-space: nowrap;
}

.fire-cal-person--ot {
    color: var(--fire-status-ot-fg);
    background: var(--fire-status-ot-bg);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    box-decoration-break: clone;
}

.fire-cal-month-person {
    display: block;
    line-height: 1.25;
}

.fire-cal-month-person-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fire-cal-month-person--actionable,
.fire-cal-month-offtrain-line--actionable {
    position: relative;
    border-radius: 0.35rem;
}

.fire-cal-month-person--actionable:focus-visible,
.fire-cal-month-offtrain-line--actionable:focus-visible,
.fire-unassigned-person--actionable:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.fire-cal-month-drag-handle,
.fire-unassigned-drag-handle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--bs-secondary-color);
    cursor: grab;
}

.fire-cal-month-person--ot {
    color: #dc3545;
    font-weight: 600;
}

.fire-cal-day-absences-sections {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fire-cal-day-absences-section + .fire-cal-day-absences-section {
    padding-top: 0.85rem;
    border-top: 1px solid var(--bs-border-color);
}

.fire-home-absence-list li.fire-absence-light-duty {
    background: rgba(13, 202, 240, 0.14);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-military {
    background: rgba(25, 135, 84, 0.14);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-extended-sick {
    background: rgba(253, 126, 20, 0.16);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-vacation {
    background: rgba(13, 110, 253, 0.10);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-sick {
    background: rgba(220, 53, 69, 0.10);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-pending {
    background: rgba(255, 193, 7, 0.18);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-cal-month-offtrain-line.fire-cal-month-pending {
    color: var(--fire-status-pending-fg);
}

.fire-home-absence-list li.fire-absence-training {
    background: rgba(255, 193, 7, 0.16);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-home-absence-list li.fire-absence-other {
    background: rgba(108, 117, 125, 0.10);
    border-radius: 0.35rem;
    padding: 0.15rem 0.4rem;
}

.fire-cal-person-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.fire-driver-icon {
    color: var(--bs-primary);
    font-size: 0.85em;
    vertical-align: -0.05em;
}

.fire-cal-person-meta,
.fire-cal-person-role {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.fire-cal-person-role {
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--bs-secondary-rgb), 0.12);
}

.fire-cal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.fire-cal-chips--ot {
    flex-direction: column;
    flex-wrap: nowrap;
}

.fire-cal-chips--roster {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.fire-cal-chip {
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fire-cal-chips--roster .fire-cal-chip {
    border-radius: 0.35rem;
    text-align: left;
    width: 100%;
}

.fire-cal-chip:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.fire-cal-training {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px dashed rgba(var(--bs-warning-rgb), 0.55);
    border-radius: 0.5rem;
    background: rgba(var(--bs-warning-rgb), 0.08);
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.5rem;
}

.fire-cal-training--compact {
    padding: 0.3rem 0.45rem;
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.fire-cal-training--compact .small {
    font-weight: 500;
    opacity: 0.9;
    margin-top: 0.1rem;
}

.fire-cal-training:hover {
    background: rgba(var(--bs-warning-rgb), 0.14);
}

/* Week grid */

.fire-cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.fire-cal-week-day {
    min-height: 7.5rem;
    width: 100%;
    text-align: left;
    color: inherit;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.4rem;
    background: var(--bs-tertiary-bg);
    cursor: pointer;
}

.fire-cal-week-day:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.fire-cal-week-day--today {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.25);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.fire-cal-week-day--focus {
    border-color: rgba(var(--bs-primary-rgb), 0.75);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.35);
}

.fire-cal-week-day-head {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.35rem;
}

.fire-cal-week-day-head--button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

.fire-cal-week-day-head--button:hover,
.fire-cal-week-day-head--button:focus-visible {
    color: var(--bs-primary);
    text-decoration: underline;
}

.fire-cal-mobile-day--focus {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-radius: 0.5rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.fire-cal-mobile-day {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.fire-cal-mobile-day:last-child {
    border-bottom: 0;
}

/* Month grid */

.fire-cal-month-weekdays,
.fire-cal-month-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.fire-cal-month-weekdays {
    margin-bottom: 0.35rem;
}

.fire-cal-month-weekday {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 0.25rem;
}

.fire-cal-month-week {
    margin-bottom: 0.35rem;
    align-items: start;
}

.fire-cal-month-week--duty-only {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.35rem;
    align-items: start;
}

.fire-cal-month-day-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.fire-cal-month-day-col--outside {
    opacity: 0.4;
    pointer-events: none;
}

.fire-cal-month-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: none;
    min-height: 8.5rem;
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    text-align: left;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.35rem;
    background: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color var(--duration-ui, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-ui, 200ms) var(--ease-out, ease-out);
}

.fire-cal-month-offtrain {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(var(--bs-warning-rgb), 0.35);
    border-radius: 0.5rem;
    padding: 0.35rem 0.4rem;
    background: rgba(var(--bs-warning-rgb), 0.08);
    cursor: pointer;
    transition: border-color var(--duration-ui, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-ui, 200ms) var(--ease-out, ease-out);
}

.fire-cal-month-alert-fix {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid rgba(var(--bs-danger-rgb), 0.35);
    border-radius: 0.5rem;
    background: rgba(var(--bs-danger-rgb), 0.08);
    color: var(--bs-danger);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}

.fire-cal-month-alert-fix:hover,
.fire-cal-month-alert-fix:focus-visible {
    border-color: rgba(var(--bs-danger-rgb), 0.55);
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
    text-decoration: none;
}

.fire-cal-month-offtrain:hover,
.fire-cal-month-offtrain:focus-visible {
    border-color: rgba(var(--bs-warning-rgb), 0.55);
    box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.05);
}

.fire-cal-month-day-col--focus .fire-cal-month-offtrain {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2);
}

.fire-cal-month-offtrain-line {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1.25;
}

.fire-cal-month-offtrain-line--draggable {
    cursor: grab;
    border-radius: 0.25rem;
    padding: 0.05rem 0.15rem;
    margin: 0 -0.15rem;
    user-select: none;
}

.fire-cal-month-offtrain-line--draggable:active {
    cursor: grabbing;
}

.fire-cal-month-offtrain-line--hint {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.fire-cal-month-person--draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.fire-cal-month-person--draggable:active {
    cursor: grabbing;
}

.fire-cal-month-offtrain--droppable {
    outline: 1px dashed rgba(var(--bs-warning-rgb), 0.55);
    outline-offset: 1px;
}

.fire-cal-month-offtrain--drop-target {
    outline: 2px solid rgba(var(--bs-warning-rgb), 0.85);
    outline-offset: 1px;
    background: rgba(var(--bs-warning-rgb), 0.16);
}

.fire-cal-month-side-cards {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.3rem;
    width: 100%;
}

.fire-cal-month-side-cards > .fire-cal-month-offtrain,
.fire-cal-month-side-cards > .fire-cal-month-events {
    flex: none;
    width: 100%;
    min-width: 0;
}

.fire-cal-month-events {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    border: 1px solid rgba(253, 126, 20, 0.4);
    border-radius: 0.5rem;
    padding: 0.35rem 0.4rem;
    background: rgba(253, 126, 20, 0.1);
    cursor: pointer;
    transition: border-color var(--duration-ui, 200ms) var(--ease-out, ease-out), box-shadow var(--duration-ui, 200ms) var(--ease-out, ease-out);
}

.fire-cal-month-events:hover,
.fire-cal-month-events:focus-visible {
    border-color: rgba(253, 126, 20, 0.7);
    box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.05);
}

.fire-cal-month-day-col--focus .fire-cal-month-events {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2);
}

.fire-cal-month-events-line {
    display: block;
    font-size: var(--fire-text-xs, 0.75rem);
    font-weight: 600;
    color: var(--fire-status-ext-sick-fg);
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fire-cal-month-events-line:hover,
.fire-cal-month-events-line:focus-visible {
    color: var(--fire-status-ext-sick-fg);
    text-decoration: underline;
}

.fire-cal-day-events {
    border-left: 3px solid var(--metro-status-warning-solid, #fd7e14);
}

.fire-cal-day-events-item + .fire-cal-day-events-item {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.fire-cal-month-station.metro-pointer-drop-target--active {
    outline-color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), 0.12);
}

.fire-cal-month-offtrain.metro-pointer-drop-target--active {
    outline-color: var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), 0.18);
}

.fire-cal-month-drag-handle.metro-pointer-item--dragging,
.fire-unassigned-drag-handle.metro-pointer-item--dragging {
    opacity: 0.55;
}

.fire-cal-day-absences--droppable {
    outline: 1px dashed rgba(var(--bs-warning-rgb), 0.45);
    outline-offset: 2px;
}

.fire-cal-day-absences--drop-target {
    outline: 2px solid rgba(var(--bs-warning-rgb), 0.8);
    outline-offset: 2px;
    background: rgba(var(--bs-warning-rgb), 0.08);
}

.fire-cal-month-station--vacation-droppable {
    outline: 1px dashed rgba(var(--bs-success-rgb), 0.45);
    outline-offset: 1px;
}

.fire-cal-month-station--vacation-drop {
    outline: 2px solid rgba(var(--bs-success-rgb), 0.75);
    outline-offset: 1px;
    background: rgba(var(--bs-success-rgb), 0.1);
}

.fire-cal-month-day:not(.fire-cal-month-day--outside):hover {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.06);
}

.fire-cal-month-day--outside {
    background: var(--bs-tertiary-bg);
    cursor: default;
    pointer-events: none;
}

.fire-cal-month-day--today {
    border-color: rgba(var(--bs-primary-rgb), 0.65);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.2);
}

.fire-cal-month-day--alert {
    background: rgba(var(--bs-danger-rgb), 0.06);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-danger-rgb), 0.28);
}

.fire-cal-month-day-alert-icon {
    margin-left: 0.25rem;
    font-size: 0.7rem;
    color: var(--bs-danger);
    vertical-align: 0.05rem;
}

.fire-cal-month-day-num--shift .fire-cal-month-day-alert-icon {
    color: var(--fire-shift-day-color, currentColor);
}

.fire-cal-month-station--alert {
    background: rgba(var(--bs-danger-rgb), 0.08);
    box-shadow: inset 0.2rem 0 0 var(--bs-danger);
}

.fire-cal-month-station-alert-icon {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--bs-danger);
}

.fire-cal-month-station-alerts {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--bs-danger);
    line-height: 1.25;
    margin-bottom: 0.1rem;
}

.fire-cal-month-station-alerts .fire-station-alert-override {
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.25;
}

.fire-station-alert-lines {
    list-style: disc;
}

.fire-cal-month-day--focus {
    border-color: rgba(var(--bs-primary-rgb), 0.8);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.35);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.fire-cal-month-day-num {
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 0.3rem;
    padding: 0.15rem 0.35rem;
    margin: -0.1rem -0.1rem 0.15rem;
}

.fire-cal-month-day-num--shift {
    /* Day number text only — shift color from DayNumberColorStyle; no badge / cell fill. */
    color: var(--fire-shift-day-color, inherit);
    background: transparent;
}

.fire-cal-month-empty {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--bs-secondary-color);
    padding: 0.15rem 0.1rem;
}

.fire-cal-month-station {
    border-radius: 0.35rem;
    background: var(--bs-tertiary-bg);
    padding: 0.25rem 0.35rem;
}

.fire-cal-month-station-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.fire-cal-month-station-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.fire-cal-month-station-names {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
    line-height: 1.25;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fire-cal-month-training {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bs-warning-text-emphasis, #997404);
}

.fire-cal-month-offtrain .fire-cal-month-training {
    margin: 0;
}

/* ── My Schedule — firefighter day cards (when + where) ──────────────────── */

.fire-my-schedule-nav .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
}

.fire-my-schedule-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.fire-my-schedule-actions > .btn,
.fire-my-schedule-actions > .fire-my-schedule-more > summary.btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.fire-my-schedule-more > summary,
.fire-my-view-more > summary,
.fire-schedule-view-more > summary {
    list-style: none;
    cursor: pointer;
}

.fire-my-schedule-more > summary::-webkit-details-marker,
.fire-my-view-more > summary::-webkit-details-marker {
    display: none;
}

.fire-my-schedule-nav__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.55rem;
}

.fire-my-view-modes,
.fire-my-period-nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.fire-my-view-modes > .btn,
.fire-my-view-more > summary.btn,
.fire-my-period-nav > .btn {
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700;
}

.fire-my-view-more {
    position: relative;
}

.fire-my-view-more > summary {
    list-style: none;
    cursor: pointer;
}

.fire-my-view-more > summary::-webkit-details-marker {
    display: none;
}

.fire-my-view-modes > .btn:not(.is-active):not(.btn-primary),
.fire-my-period-nav > .btn:not(.btn-primary) {
    background: transparent;
    color: var(--bs-secondary-color);
}

.fire-my-schedule--refreshing {
    opacity: 0.92;
    transition: opacity 160ms ease;
}

.fire-my-days {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.fire-my-schedule-virtual-list {
    max-height: min(70vh, 42rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.fire-my-day {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 0.08rem 0.35rem rgba(0, 0, 0, 0.04);
    content-visibility: auto;
    contain-intrinsic-size: auto 10rem;
}

.fire-my-day--today {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow: 0 0.15rem 0.5rem rgba(var(--bs-primary-rgb), 0.12);
}

.fire-my-day--working {
    border-color: rgba(var(--bs-success-rgb), 0.35);
}

.fire-my-day--off {
    opacity: 0.92;
}

.fire-my-day--pending-approval {
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 193, 7, 0.12) 0,
        rgba(255, 193, 7, 0.12) 6px,
        transparent 6px,
        transparent 12px);
    border-left: 4px solid rgba(255, 193, 7, 0.85);
}

.fire-my-day-pending-label {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fire-status-pending-fg);
    background: var(--fire-status-pending-bg);
    border: 1px solid var(--fire-status-pending-border);
}

.fire-my-day-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.fire-my-day-head-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
}

.fire-my-day-today-badge {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fire-my-day-label {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.fire-my-day-date {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.fire-my-day-off-pill {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

.fire-my-day-shift {
    border-left: 4px solid var(--fire-my-shift-accent, var(--bs-primary));
    padding: 0.55rem 0 0.55rem 0.85rem;
    margin-top: 0.35rem;
}

.fire-my-day-shift + .fire-my-day-shift {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--bs-border-color);
    border-left-width: 4px;
}

.fire-my-day-time {
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin-bottom: 0.2rem;
}

.fire-my-day-where {
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}

.fire-my-day-meta {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.fire-my-day-station {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}

.fire-my-day-station:first-of-type {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: 0;
}

.fire-my-day-station-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
}

.fire-my-day-station-head::-webkit-details-marker {
    display: none;
}

.fire-my-day-station--pinned > .fire-my-day-station-head {
    font-weight: 600;
}

.dash-v2-next__crew {
    display: block;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: 0.15rem;
}

.fire-schedule-header-overflow {
    position: relative;
    display: inline-block;
}

.fire-schedule-header-overflow > summary {
    list-style: none;
}

.fire-schedule-header-overflow > summary::-webkit-details-marker {
    display: none;
}

.fire-schedule-header-overflow__menu {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 0.35rem;
    padding: 0.5rem;
    min-width: 12rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.fire-vacation-your-turn-submit-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* Re-pick after deny: clear approved vs denied summary on your-turn. */
.fire-vacation-repick-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
}

.fire-vacation-repick-panel--approved {
    border-color: rgba(25, 135, 84, 0.45);
    background: rgba(25, 135, 84, 0.08);
}

.fire-vacation-repick-panel--approved .fw-semibold {
    color: var(--bs-success);
}

.fire-vacation-repick-panel--denied {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.08);
}

.fire-vacation-repick-panel--denied .fw-semibold {
    color: var(--bs-danger);
}

.fire-my-day-shift--roster {
    padding: 0.55rem 0.65rem;
    border-radius: 0.65rem;
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--fire-my-shift-accent, var(--bs-primary));
}

.fire-my-day-shift--roster + .fire-my-day-shift--roster {
    margin-top: 0.45rem;
}

.fire-my-day-roster {
    list-style: none;
    margin: 0.45rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.fire-my-day-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

.fire-my-day-person--me {
    font-weight: 600;
}

.fire-my-day-person-you {
    font-size: 0.7rem;
}

.fire-my-day-off {
    margin: 0;
}

.fire-my-month-grid,
.fire-my-year-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.fire-my-year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.fire-my-year-month {
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
    border-radius: 0.75rem;
    padding: 0.55rem 0.6rem 0.65rem;
    background: var(--bs-body-bg);
    content-visibility: auto;
    contain-intrinsic-size: auto 12rem;
}

.fire-my-year-month--current {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.12);
}

.fire-my-year-month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.fire-my-year-month-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.fire-my-year-month-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: 999px;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    text-align: center;
    line-height: 1.35;
}

.fire-my-year-month-grid {
    gap: 0.12rem;
}

.fire-my-month-weekday,
.fire-my-year-weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
    padding-bottom: 0.15rem;
}

.fire-my-year-weekday {
    font-size: var(--fire-text-xs, 0.75rem);
    padding-bottom: 0.05rem;
}

.fire-my-month-cell,
.fire-my-year-cell {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: var(--bs-tertiary-bg);
    color: inherit;
    min-height: 2.75rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.fire-my-year-cell {
    min-height: 1.9rem;
    min-width: 1.9rem;
    font-size: var(--fire-text-xs, 0.75rem);
    padding: 0;
    border-radius: 0.35rem;
    background: transparent;
}

.fire-my-month-cell--outside,
.fire-my-year-cell--outside {
    opacity: 0.35;
}

.fire-my-year-cell--outside {
    visibility: hidden;
    pointer-events: none;
}

.fire-my-month-cell--assigned:not(:disabled),
.fire-my-year-cell--assigned:not(:disabled) {
    cursor: pointer;
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
    font-weight: 700;
}

.fire-my-month-cell--off:not(:disabled),
.fire-my-year-cell--off:not(:disabled) {
    cursor: pointer;
    background: rgba(108, 117, 125, 0.12);
    border-color: rgba(108, 117, 125, 0.28);
    font-weight: 600;
}

.fire-my-month-off-mark {
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color);
}

.fire-my-year-cell--assigned:not(:disabled) {
    background: rgba(var(--bs-primary-rgb), 0.18);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    color: var(--bs-primary);
}

.fire-my-year-cell--off:not(:disabled) {
    background: rgba(108, 117, 125, 0.22);
    color: var(--bs-secondary-color);
}

.fire-my-month-cell--today,
.fire-my-year-cell--today {
    box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.45);
}

.fire-my-month-cell:disabled,
.fire-my-year-cell:disabled {
    opacity: 0.55;
}

.fire-my-year-cell:disabled:not(.fire-my-year-cell--outside) {
    opacity: 1;
    color: var(--bs-secondary-color);
}

.fire-my-month-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--fire-my-shift-accent, var(--bs-primary));
}

@media (max-width: 991.98px) {
    .fire-my-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (pointer: coarse) {
    .fire-cal-month-person--actionable,
    .fire-cal-month-offtrain-line--actionable {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        min-height: 2.75rem;
        cursor: pointer;
    }

    .fire-cal-month-drag-handle,
    .fire-unassigned-drag-handle {
        display: inline-flex;
        width: 2.75rem;
        min-height: 2.75rem;
    }

    .fire-unassigned-person--actionable {
        min-height: 3rem;
        cursor: pointer !important;
    }
}

@media (max-width: 575.98px) {
    .fire-my-year-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .fire-my-year-cell {
        min-height: 1.9rem;
        min-width: 1.9rem;
        font-size: var(--fire-text-xs, 0.75rem);
    }
}

.fire-my-cal-scroll {
    overflow-x: auto;
}

.fire-my-cal-weekdays,
.fire-my-cal-week,
.fire-my-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(5.5rem, 1fr));
    gap: 0.4rem;
    min-width: 42rem;
}

.fire-my-cal-weekdays {
    margin-bottom: 0.35rem;
}

.fire-my-cal-weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

.fire-my-week-day {
    appearance: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    padding: 0.55rem 0.4rem;
    min-height: 6.5rem;
    background: var(--bs-body-bg);
    color: inherit;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    cursor: pointer;
}

.fire-my-week-day--today {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    background: rgba(var(--bs-primary-rgb), 0.05);
}

.fire-my-week-day--working {
    border-color: rgba(var(--bs-success-rgb), 0.45);
    background: linear-gradient(
        180deg,
        rgba(var(--bs-success-rgb), 0.12) 0%,
        var(--bs-body-bg) 70%
    );
}

.fire-my-week-day--outside {
    opacity: 0.45;
}

.fire-my-week-day--off {
    border-color: rgba(108, 117, 125, 0.4);
    background: rgba(108, 117, 125, 0.08);
}

.fire-my-week-dow {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
}

.fire-my-week-date {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.15rem 0 0.35rem;
}

.fire-my-week-shift {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 0.35rem;
    padding: 0.2rem 0.3rem;
    margin-top: 0.2rem;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-left: 3px solid var(--fire-my-shift-accent, var(--bs-primary));
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.fire-my-week-off {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .fire-my-cal .fire-my-week-dow {
        display: none;
    }
}

.fire-my-shift-card {
    border-left: 4px solid var(--bs-primary);
}

.fire-my-shift-card--today {
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* ── Notifications & acknowledgements ────────────────────────────────────── */

.fire-ack-required {
    border: 1px solid rgba(var(--bs-danger-rgb), 0.35);
    border-radius: 0.75rem;
    background: linear-gradient(
        135deg,
        rgba(var(--bs-danger-rgb), 0.08) 0%,
        var(--bs-body-bg) 55%
    );
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
}

.fire-ack-required-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.fire-ack-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg);
    margin-top: 0.65rem;
}

.fire-ack-card--pending {
    border-color: rgba(var(--bs-danger-rgb), 0.4);
    box-shadow: 0 0.1rem 0.4rem rgba(var(--bs-danger-rgb), 0.08);
}

.fire-ack-card--done {
    opacity: 0.85;
}

.fire-ack-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.fire-ack-badge--required {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

.fire-ack-badge--done {
    background: rgba(var(--bs-success-rgb), 0.12);
    color: var(--bs-success);
}

.fire-history-item--pending {
    border-left: 3px solid var(--bs-danger);
    background: linear-gradient(
        90deg,
        rgba(var(--bs-danger-rgb), 0.08) 0%,
        transparent 42%
    );
}

.fire-notif-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.fire-notif-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.fire-notif-icon--ack {
    background: rgba(var(--bs-danger-rgb), 0.12);
    color: var(--bs-danger);
}

.fire-notif-icon--unread {
    background: rgba(var(--bs-primary-rgb), 0.18);
}

.fire-notif-item--unread {
    border-left: 3px solid var(--bs-primary);
    padding-left: 0.65rem;
    margin-left: -0.15rem;
}

.fire-notif-cta {
    font-size: 0.8rem;
    font-weight: 600;
}

.fire-public-ack {
    max-width: 640px;
    margin: 0 auto;
}

.fire-public-ack-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.fire-public-ack-icon--success {
    background: rgba(var(--bs-success-rgb), 0.14);
    color: var(--bs-success);
}

.fire-public-ack-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    background: var(--bs-tertiary-bg);
    text-align: left;
    margin-bottom: 1.25rem;
}

.fire-public-ack-shifts {
    display: grid;
    gap: 0.65rem;
}

.fire-public-ack-shift {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
}

.fire-ack-confirmed {
    --fire-ack-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    text-align: center;
    padding: 0.25rem 0 0.5rem;
}

.fire-ack-confirmed--compact {
    text-align: left;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(var(--bs-success-rgb), 0.28);
    border-radius: 0.85rem;
    background: rgba(var(--bs-success-rgb), 0.08);
    margin-bottom: 1rem;
}

.fire-ack-confirmed__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(var(--bs-success-rgb), 0.14);
    color: var(--bs-success);
    margin-bottom: 0.85rem;
}

.fire-ack-confirmed--compact .fire-ack-confirmed__icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    margin-bottom: 0.65rem;
}

.fire-ack-confirmed__title {
    font-weight: 700;
    font-size: 1.35rem;
    margin: 0 0 0.35rem;
}

.fire-ack-confirmed--compact .fire-ack-confirmed__title {
    font-size: 1.05rem;
}

.fire-ack-confirmed__body {
    color: var(--bs-secondary-color);
    font-size: 0.925rem;
    margin: 0 0 0.75rem;
}

.fire-ack-confirmed__subject {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 auto 0.85rem;
    max-width: 28rem;
}

.fire-ack-confirmed--compact .fire-ack-confirmed__subject {
    margin-left: 0;
    margin-right: 0;
}

.fire-ack-confirmed__sent {
    text-align: left;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg);
    margin: 0 auto 1rem;
    max-width: 28rem;
}

.fire-ack-confirmed--compact .fire-ack-confirmed__sent {
    margin-left: 0;
    margin-right: 0;
    background: var(--bs-tertiary-bg);
}

.fire-ack-confirmed__sent-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.55rem;
}

.fire-ack-confirmed__people {
    display: grid;
    gap: 0.45rem;
}

.fire-ack-confirmed__person {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.fire-ack-confirmed__person-name {
    font-weight: 600;
    font-size: 0.925rem;
}

.fire-ack-confirmed__person-role {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.fire-ack-confirmed__nobody {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    margin: 0 0 1rem;
}

.fire-ack-confirmed__actions {
    margin-top: 0.25rem;
}

.fire-ack-confirmed--animate .fire-ack-confirmed__icon {
    animation: fire-ack-confirm-pop 280ms var(--fire-ack-ease-out) both;
}

.fire-ack-confirmed--animate .fire-ack-confirmed__title,
.fire-ack-confirmed--animate .fire-ack-confirmed__body,
.fire-ack-confirmed--animate .fire-ack-confirmed__subject {
    animation: fire-ack-confirm-rise 260ms var(--fire-ack-ease-out) both;
}

.fire-ack-confirmed--animate .fire-ack-confirmed__body {
    animation-delay: 40ms;
}

.fire-ack-confirmed--animate .fire-ack-confirmed__subject {
    animation-delay: 70ms;
}

.fire-ack-confirmed--animate .fire-ack-confirmed__sent,
.fire-ack-confirmed--animate .fire-ack-confirmed__nobody,
.fire-ack-confirmed--animate .fire-ack-confirmed__actions {
    animation: fire-ack-confirm-rise 280ms var(--fire-ack-ease-out) both;
    animation-delay: 110ms;
}

@keyframes fire-ack-confirm-pop {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fire-ack-confirm-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fire-ack-confirmed--animate .fire-ack-confirmed__icon,
    .fire-ack-confirmed--animate .fire-ack-confirmed__title,
    .fire-ack-confirmed--animate .fire-ack-confirmed__body,
    .fire-ack-confirmed--animate .fire-ack-confirmed__subject,
    .fire-ack-confirmed--animate .fire-ack-confirmed__sent,
    .fire-ack-confirmed--animate .fire-ack-confirmed__nobody,
    .fire-ack-confirmed--animate .fire-ack-confirmed__actions {
        animation: fire-ack-confirm-fade 160ms ease both;
    }
}

@keyframes fire-ack-confirm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fire-cal-person--pending {
    border-color: rgba(230, 172, 0, 0.85);
    background: rgba(255, 193, 7, 0.18);
}

.fire-cal-person-pending-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    font-size: var(--fire-text-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fire-status-pending-fg);
    background: var(--fire-status-pending-bg);
    border: 1px solid var(--fire-status-pending-border);
}

.fire-cal-pending-bar {
    position: sticky;
    top: 0;
    z-index: 4;
}

.fire-cal-pending-bar ul {
    max-height: 5.5rem;
    overflow: auto;
}

.fire-notify-confirm-body {
    white-space: pre-wrap;
}

.fire-notify-card {
    background: var(--metro-surface-raised);
    border: 1px solid var(--metro-border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
}

.fire-notify-event-highlight {
    background: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-warning) 35%, var(--bs-border-color));
}

.fire-incident-casualty-panel {
    background: color-mix(in srgb, var(--bs-success) 10%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--bs-success) 28%, var(--bs-border-color));
}

.fire-notify-card__eyebrow {
    color: var(--metro-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.fire-notify-card__badge {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    font-size: var(--fire-text-xs, 0.75rem);
    font-weight: 700;
    color: var(--fire-status-pending-fg);
    background: var(--fire-status-pending-bg);
    border: 1px solid var(--fire-status-pending-border);
}

.fire-notify-card__title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.fire-notify-card__meta {
    color: var(--metro-text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.fire-notify-card__body {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--metro-text);
}

.fire-notify-card--shift .fire-notify-card__body {
    font-size: 0.875rem;
}

.fire-night-preview-modal .modal-dialog {
    max-width: 42rem;
}

.fire-ack-transfer-list {
    display: grid;
    gap: 0.75rem;
}

.fire-ack-transfer {
    text-align: left;
}

.fire-ack-transfer__meta {
    margin-bottom: 0.9rem;
}

.fire-ack-transfer__when {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.fire-ack-transfer__shift {
    color: var(--bs-secondary-color);
}

.fire-ack-transfer__dot {
    padding: 0 0.2rem;
}

.fire-ack-transfer__stations {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem 0.65rem;
    align-items: stretch;
}

.fire-ack-transfer__station {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    padding: 0.8rem 0.7rem;
    background: var(--bs-body-bg);
    text-align: center;
    min-width: 0;
}

.fire-ack-transfer__station--to {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.fire-ack-transfer__station-label {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bs-secondary-color);
    margin-bottom: 0.2rem;
}

.fire-ack-transfer__station-name {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-word;
}

.fire-ack-transfer__station--from .fire-ack-transfer__station-name {
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.fire-ack-transfer__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    color: var(--bs-primary);
}

.fire-ack-transfer--compact .fire-ack-transfer__when {
    font-size: 1rem;
}

.fire-ack-transfer--compact .fire-ack-transfer__station {
    padding: 0.55rem 0.5rem;
}

.fire-ack-transfer--compact .fire-ack-transfer__station-name {
    font-size: 1.05rem;
}

@media (max-width: 419.98px) {
    .fire-ack-transfer__stations {
        grid-template-columns: 1fr;
    }

    .fire-ack-transfer__arrow {
        transform: rotate(90deg);
        padding: 0.1rem 0;
        font-size: 1.15rem;
    }
}

.fire-ot-offer-action {
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .fire-ot-offer-action .btn-lg,
    .fire-ack-action .btn-lg {
        min-height: 48px;
        padding: 0.65rem 1rem;
        font-size: 1rem;
        font-weight: 700;
    }
}

.fire-ot-offer-summary {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.85rem;
    padding: 1.1rem 1.2rem;
    background: var(--bs-body-bg);
    text-align: left;
}

.fire-ot-offer-summary__hero {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.fire-ot-offer-note {
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

@media (max-width: 991.98px) {
    .fire-schedule-view-modes--wide {
        display: none !important;
    }

    .fire-schedule-view-modes--phone {
        display: inline-flex !important;
        width: 100%;
    }

    .fire-schedule-view-modes--phone > .btn,
    .fire-schedule-view-modes--phone > .fire-schedule-view-more {
        flex: 1 1 auto;
    }

    .fire-schedule-view-modes--phone > .fire-schedule-view-more > summary.btn {
        width: 100%;
    }

    /* Keep the 7-col month/week grid, but scroll inside the viewport — not a 61rem page wall. */
    .dash-v2--fire .fire-cal-month,
    .dash-v2--fire .fire-cal-week-mobile,
    .dash-v2--fire .fire-cal-week-grid {
        max-width: 100%;
        min-width: 0;
    }

    .fire-cal-month .card-body,
    .fire-cal-week-mobile .card-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fire-cal-month:not(.fire-cal-month--duty-days) .fire-cal-month-weekdays,
    .fire-cal-month:not(.fire-cal-month--duty-days) .fire-cal-month-week {
        grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
        min-width: 61rem;
    }

    .fire-cal-week-grid {
        grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 992px) {
    /* Desktop admin month/week stay a full 7-column grid (no phone scroller / 61rem min). */
    .fire-schedule-view-modes--wide {
        display: inline-flex;
    }

    .fire-schedule-view-modes--phone {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .fire-cal-week-grid {
        grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
        overflow-x: auto;
    }

    .fire-my-week {
        grid-template-columns: repeat(7, minmax(4.25rem, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .fire-my-day {
        padding: 0.85rem 0.9rem;
    }

    .fire-my-day-time {
        font-size: 1.05rem;
    }

    .fire-my-day-where {
        font-size: 0.95rem;
    }

    .fire-cal-month-day {
        height: 8.5rem;
        min-height: 8.5rem;
        max-height: 8.5rem;
        padding: 0.35rem;
    }

    .fire-cal-month:not(.fire-cal-month--duty-days) .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .fire-cal-month:not(.fire-cal-month--duty-days) .fire-cal-month-weekdays,
    .fire-cal-month:not(.fire-cal-month--duty-days) .fire-cal-month-week {
        grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
        min-width: 61rem;
    }

    .fire-cal-month-station-names {
        display: block;
        white-space: normal;
        -webkit-line-clamp: 8;
        line-clamp: 8;
    }

    .fire-cal-month-person--actionable,
    .fire-cal-month-offtrain-line--actionable {
        min-height: 3rem;
        margin: 0;
        padding: 0.15rem 0 0.15rem 0.25rem;
        border: 1px solid transparent;
    }

    .fire-cal-month-person--actionable + .fire-cal-month-person--actionable,
    .fire-cal-month-offtrain-line--actionable + .fire-cal-month-offtrain-line--actionable {
        margin-top: 0.15rem;
    }

    .fire-cal-month-person--actionable:active,
    .fire-cal-month-offtrain-line--actionable:active {
        background: rgba(var(--bs-primary-rgb), 0.08);
        border-color: rgba(var(--bs-primary-rgb), 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fire-cal-month-day,
    .fire-cal-month-offtrain,
    .fire-cal-month-events {
        transition: none;
    }
}

.fire-cal-ot-empty,
.fire-cal-ot-more,
.fire-cal-ot-name {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.fire-cal-ot-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fire-cal-ot-status {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.12rem 0.3rem;
    line-height: 1.1;
}

.fire-cal-ot-shift {
    border-radius: 0.35rem;
    border: 1px solid transparent;
    padding: 0.2rem 0.35rem;
    min-width: 0;
}

.fire-cal-ot-shift--clickable {
    cursor: pointer;
}

.fire-cal-ot-shift--clickable:hover,
.fire-cal-ot-shift--clickable:focus-visible {
    filter: brightness(1.08);
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 1px;
}

.fire-cal-ot-shift-name {
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fire-cal-ot-shift-people {
    font-size: 0.68rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.95;
}

.fire-cal-ot-shift-detail {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.65rem 0.85rem;
}

.fire-cal-ot-shift-detail-people {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 1.1rem;
}

.fire-ot-shift-lane-title--colored {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fire-ot-shift-lane-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.fire-ot-shift-lane--colored {
    border-left: 3px solid var(--fire-ot-shift-color, var(--bs-border-color));
}

/* ── Build schedule modal (Overview → Draft → Fill → Finalize) ──────────── */

.fire-schedule-build-status .btn {
    min-height: 2.5rem;
}

.fire-schedule-build-modal__content .modal-body {
    padding-top: 0.75rem;
}

.fire-schedule-build-modal__content .btn {
    min-height: 2.75rem;
}

.fire-schedule-build-modal__content .list-group-item .btn {
    min-height: 2.5rem;
}

.fire-schedule-build-form__date {
    min-width: 0;
    width: 100%;
    min-height: 2.5rem;
}

.fire-schedule-build-form input[type="date"].fire-schedule-build-form__date {
    /* Native date controls need room for value + calendar icon */
    box-sizing: border-box;
    padding-inline: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.fire-schedule-build-form__submit {
    min-height: 2.75rem;
}

@media (min-width: 576px) {
    .fire-schedule-build-form__submit {
        width: auto !important;
    }
}

@media (min-width: 768px) {
    .fire-schedule-build-modal__content .btn.w-100:not(.fire-schedule-build-form__submit) {
        width: auto !important;
    }
}

.mobile-shell .fire-schedule-build-modal__content .btn,
.mobile-shell .fire-schedule-build-status .btn {
    min-height: var(--metro-touch-target-min, 48px);
}

.mobile-shell .fire-schedule-build-modal.modal {
    padding: 0;
}

.fire-notifications-gate__row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    justify-content: space-between;
    min-width: 0;
}

.fire-notifications-gate__copy {
    flex: 1 1 12rem;
    min-width: 0;
}

.fire-notifications-gate__switch {
    flex: 0 0 auto;
}

.dash-v2--fire .fire-station-hero__art-btn {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    min-height: 44px;
}

.dash-v2--fire .fire-station-hero__art-btn:hover,
.dash-v2--fire .fire-station-hero__art-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.fire-emblem-settings__preview {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 7rem;
    padding: 0.75rem;
}

/* ── Fire home (simplified landing) ─────────────────────────────────────── */

.fire-home-cta {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fire-home-cta:hover {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.1) !important;
}

.fire-home-cta-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.fire-home-link-card {
    transition: box-shadow 0.15s ease;
}

.fire-home-link-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08) !important;
}

.fire-home-link-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    margin-bottom: 0.65rem;
    font-size: 1.1rem;
}

.fire-home-feature-card {
    min-height: 11.5rem;
    display: flex;
    flex-direction: column;
}

.fire-home-absence-list {
    display: grid;
    gap: 0.2rem;
}

.fire-home-absence-list li {
    line-height: 1.35;
}

.fire-home-feature-card .list-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.fire-home-link-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 7.75rem;
}

.fire-home-link-card .card-body .small.text-muted {
    margin-top: auto;
}

.fire-home-ot-card .card-body {
    min-height: 0;
}

.fire-home-ot-card .card-body > .small.text-muted {
    margin-top: 0.15rem;
}

.fire-home-ot-shift-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.fire-home-ot-shift-list .fire-cal-ot-shift-people {
    white-space: normal;
}

.fire-staff-balance-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.5rem;
    background: rgba(var(--bs-primary-rgb), 0.06);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.fire-staff-balance-pill__shifts {
    font-weight: 600;
    color: var(--bs-body-color);
}

.fire-staff-balance-pill__hours {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* ── Time off capacity day cards ────────────────────────────────────────── */

.fire-time-off-year__month {
    scroll-margin-top: 5rem;
}

.fire-time-off-capacity-preview__panel {
    padding: 0.85rem 1rem;
}

.fire-time-off-capacity-day-card--at-capacity {
    background-color: rgba(var(--bs-secondary-rgb), 0.08);
    opacity: 0.85;
}

.fire-time-off-capacity-day-card--selectable {
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fire-time-off-capacity-day-card--selectable:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.fire-time-off-capacity-day-card--selectable:hover:not(:disabled) {
    box-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.fire-time-off-capacity-day-card--selected {
    outline: 2px solid var(--bs-success);
    outline-offset: 1px;
    background-color: rgba(var(--bs-success-rgb), 0.08);
}

.fire-time-off-capacity-day-body {
    padding: 0.85rem 1rem;
}

.fire-time-off-capacity-day-label {
    margin-bottom: 0.35rem;
}

.fire-time-off-capacity-shifts {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.fire-time-off-capacity-shift {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.fire-time-off-capacity-personnel {
    font-size: 0.75rem;
    margin-top: 0.15rem;
    padding-left: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.fire-time-off-capacity-personnel__name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Overtime visual board ──────────────────────────────────────────────── */

.fire-ot-rank-list .fire-ot-rank-item {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.5rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
}

.fire-ot-rank-list .sortable-list-item-body {
    min-width: 0;
    flex: 1 1 8rem;
}

.fire-ot-rank-list .sortable-list-handle,
.fire-ot-rank-list .sortable-list-move-buttons {
    flex-shrink: 0;
}

.fire-ot-rank-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.fire-ot-rank-row__name {
    flex: 1 1 6rem;
    min-width: 0;
}

.fire-ot-rank-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex: 0 1 auto;
    max-width: 100%;
}

.fire-ot-rank-badge {
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fire-ot-rank-badge--sm {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
}

.fire-ot-shift-chip {
    background: rgba(var(--bs-secondary-rgb), 0.15);
    color: var(--bs-body-color);
}

.fire-ot-shift-lanes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.fire-ot-shift-lane {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.65rem;
    min-height: 8rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: rgba(var(--bs-tertiary-bg-rgb, 248, 249, 250), 0.6);
}

.fire-ot-shift-lane .fire-ot-rank-list {
    min-width: 0;
    max-width: 100%;
}

.fire-ot-shift-lane-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.fire-ot-shift-chip-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.4rem;
    cursor: grab;
}

.fire-ot-shift-lane--slot {
    min-height: auto;
}

.fire-ot-shift-chip-card .btn-link {
    line-height: 1;
    text-decoration: none;
}

.fire-ot-mini-rank {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-primary);
}

.fire-ot-week-list {
    max-height: 28rem;
    overflow: auto;
}

.fire-ot-drawer-item {
    background: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
}

/* ── Annual vacation notification queue ───────────────────────────────────── */

.fire-vacation-roster-panel {
    max-height: 28rem;
    overflow-y: auto;
}

.fire-vacation-rank-heading:first-child {
    margin-top: 0 !important;
}

.fire-vacation-roster-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    cursor: grab;
}

.fire-vacation-roster-item__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.875rem;
}

.fire-vacation-queue-drop-active {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
}

.fire-vacation-queue-list .sortable-list-item {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.4rem;
    background: var(--bs-body-bg);
    user-select: none;
}

.fire-vacation-queue-list .sortable-list-handle {
    cursor: grab;
    touch-action: none;
}

.fire-vacation-queue-list .sortable-list-item--dragging {
    opacity: 0.65;
}

.fire-vacation-queue-list .sortable-list-item--dragging .sortable-list-handle {
    cursor: grabbing;
}

.fire-vacation-queue-list .sortable-list-item--drop-target {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

.fire-vacation-queue-row__actions {
    user-select: auto;
}

.fire-vacation-queue-item--fixed,
.fire-vacation-queue-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.fire-vacation-queue-row__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
}

.fire-vacation-queue-position {
    width: 4.25rem;
    min-width: 4.25rem;
    padding-block: 0.1rem;
}

.fire-vacation-queue-item--fixed {
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.fire-vacation-queue-badge {
    min-width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fire-vacation-queue-fixed {
    margin-bottom: 0.75rem;
}

/* ── Off Shift Calendar ─────────────────────────────────────────────────── */

.fire-off-shift-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    display: inline-block;
    flex-shrink: 0;
}

.fire-off-shift-legend__swatch--vacation { background: var(--fire-station-navy, #001f3f); }
.fire-off-shift-legend__swatch--sick { background: var(--metro-status-danger-solid); }
/* Light duty / military stay distinct; training and other match greeting navy. */
.fire-off-shift-legend__swatch--light-duty { background: var(--metro-status-info-solid); }
.fire-off-shift-legend__swatch--extended-sick { background: var(--metro-status-warning-solid); }
.fire-off-shift-legend__swatch--military { background: var(--metro-status-success-solid); }
.fire-off-shift-legend__swatch--training { background: var(--fire-station-navy, #001f3f); }
.fire-off-shift-legend__swatch--other { background: var(--fire-station-navy, #001f3f); }

.fire-off-shift-filter-chip {
    border-width: 1px;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
}

.fire-off-shift-filter-chip--off {
    opacity: 0.45;
    filter: grayscale(0.4);
}

.fire-off-shift-day-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    border-top: 3px solid transparent !important;
}

.fire-off-shift-day-card:hover {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

.fire-off-shift-day-card--today {
    border-top-color: var(--bs-primary) !important;
}

.fire-off-shift-day-card--empty {
    opacity: 0.72;
}

.fire-off-shift-chip-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fire-off-shift-chip {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    border-radius: 0.35rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.25;
    border-left: 3px solid transparent;
    background: var(--bs-tertiary-bg);
    min-width: 0;
}

.fire-off-shift-chip__name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fire-off-shift-chip__type {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fire-off-shift-chip--tiny {
    padding: 0.1rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
}

.fire-off-shift-chip--vacation,
.fire-off-shift-filter-chip.fire-off-shift-chip--vacation {
    border-left-color: var(--fire-status-vacation-border);
    background: var(--fire-status-vacation-bg);
}

.fire-off-shift-chip--sick,
.fire-off-shift-filter-chip.fire-off-shift-chip--sick {
    border-left-color: var(--fire-status-sick-border);
    background: var(--fire-status-sick-bg);
}

.fire-off-shift-chip--light-duty,
.fire-off-shift-filter-chip.fire-off-shift-chip--light-duty {
    border-left-color: var(--fire-status-light-duty-border);
    background: var(--fire-status-light-duty-bg);
}

.fire-off-shift-chip--extended-sick,
.fire-off-shift-filter-chip.fire-off-shift-chip--extended-sick {
    border-left-color: var(--fire-status-ext-sick-border);
    background: var(--fire-status-ext-sick-bg);
}

.fire-off-shift-chip--military,
.fire-off-shift-filter-chip.fire-off-shift-chip--military {
    border-left-color: var(--fire-status-military-border);
    background: var(--fire-status-military-bg);
}

.fire-off-shift-chip--training,
.fire-off-shift-filter-chip.fire-off-shift-chip--training {
    border-left-color: var(--fire-status-training-border);
    background: var(--fire-status-training-bg);
}

.fire-off-shift-chip--other,
.fire-off-shift-filter-chip.fire-off-shift-chip--other {
    border-left-color: var(--fire-status-other-border);
    background: var(--fire-status-other-bg);
}

.fire-off-shift-badge.fire-off-shift-chip--vacation {
    color: var(--fire-status-vacation-fg);
    background: var(--fire-status-vacation-bg);
    border: 1px solid var(--fire-status-vacation-border);
}

.fire-off-shift-badge.fire-off-shift-chip--sick {
    color: var(--fire-status-sick-fg);
    background: var(--fire-status-sick-bg);
    border: 1px solid var(--fire-status-sick-border);
}

.fire-off-shift-badge.fire-off-shift-chip--light-duty {
    color: var(--fire-status-light-duty-fg);
    background: var(--fire-status-light-duty-bg);
    border: 1px solid var(--fire-status-light-duty-border);
}

.fire-off-shift-badge.fire-off-shift-chip--extended-sick {
    color: var(--fire-status-ext-sick-fg);
    background: var(--fire-status-ext-sick-bg);
    border: 1px solid var(--fire-status-ext-sick-border);
}

.fire-off-shift-badge.fire-off-shift-chip--military {
    color: var(--fire-status-military-fg);
    background: var(--fire-status-military-bg);
    border: 1px solid var(--fire-status-military-border);
}

.fire-off-shift-badge.fire-off-shift-chip--training {
    color: var(--fire-status-training-fg);
    background: var(--fire-status-training-bg);
    border: 1px solid var(--fire-status-training-border);
}

.fire-off-shift-badge.fire-off-shift-chip--other {
    color: var(--fire-status-other-fg);
    background: var(--fire-status-other-bg);
    border: 1px solid var(--fire-status-other-border);
}

.fire-off-shift-day-list__item {
    border-radius: 0.5rem;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    background: var(--bs-body-bg);
}

.fire-off-shift-day-list__item.fire-off-shift-chip--vacation { border-left-color: var(--fire-status-vacation-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--sick { border-left-color: var(--fire-status-sick-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--light-duty { border-left-color: var(--fire-status-light-duty-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--extended-sick { border-left-color: var(--fire-status-ext-sick-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--military { border-left-color: var(--fire-status-military-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--training { border-left-color: var(--fire-status-training-border); }
.fire-off-shift-day-list__item.fire-off-shift-chip--other { border-left-color: var(--fire-status-other-border); }

.fire-off-shift-month-day {
    min-height: 5.5rem;
}

.fire-off-shift-month-day--has-off {
    background: rgba(13, 110, 253, 0.03);
}

@media (max-width: 767.98px) {
    .fire-off-shift-month-day {
        min-height: 4.25rem;
    }
}

.fire-sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
    box-shadow: 4px 0 8px -4px rgba(15, 23, 42, 0.12);
}

.fire-time-off-grid thead .fire-sticky-col {
    background: var(--bs-table-bg);
    z-index: 3;
}

/* ── Vacation bidding: day picker + wish list (phone-first, portrait + landscape) ── */

.fire-vbid,
.fire-vbid-page {
    --vbid-gap: 0.75rem;
    --vbid-radius: 0.85rem;
    --vbid-surface: var(--bs-body-bg);
    --vbid-muted: var(--bs-secondary-color);
    --vbid-solid-held: var(--metro-status-success-solid, #198754);
    --vbid-solid-rank: var(--metro-status-info-solid, #0d6efd);
    --vbid-blackout-bg: color-mix(in srgb, var(--bs-body-color) 82%, var(--bs-body-bg));
}

.fire-vbid {
    display: flex;
    flex-direction: column;
    gap: var(--vbid-gap);
    min-width: 0;
}

/* Grid/flex display rules below would otherwise beat the hidden attribute. */
.fire-vbid [hidden] {
    display: none !important;
}

.fire-vbid-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--vbid-muted);
}

.fire-vbid-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    font-size: 0.875rem;
    line-height: 1.4;
}

.fire-vbid-note > i {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.25;
}

.fire-vbid-note > div {
    min-width: 0;
}

.fire-vbid-note--wait {
    background: var(--fire-status-pending-bg);
    border-color: var(--fire-status-pending-border);
    color: var(--fire-status-pending-fg);
}

.fire-vbid-note--info {
    background: var(--fire-status-vacation-bg);
    border-color: var(--fire-status-vacation-border);
    color: var(--fire-status-vacation-fg);
}

.fire-vbid-note--danger {
    background: var(--fire-status-sick-bg);
    border-color: var(--fire-status-sick-border);
    color: var(--fire-status-sick-fg);
}

.fire-vbid-note a {
    color: inherit;
    font-weight: 600;
}

.fire-vbid-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.fire-vbid-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.65rem;
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fire-vbid-pill--strong {
    background: color-mix(in srgb, currentColor 18%, transparent);
    font-weight: 700;
}

.fire-vbid-section-title {
    margin-bottom: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vbid-muted);
}

.fire-vbid-section-title span {
    margin-left: 0.25rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Pick days / Wish list switch */
.fire-vbid-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.fire-vbid-tabs > .metro-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    font-weight: 600;
}

.fire-vbid-tabs__count {
    min-width: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

/* Pick view layout (portrait: one column; landscape: see media query) */
.fire-vbid-pick,
.fire-vbid-pick__side,
.fire-vbid-wish__body {
    display: flex;
    flex-direction: column;
    gap: var(--vbid-gap);
    min-width: 0;
}

/* Month calendar */
.fire-vbid-cal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    background: var(--vbid-surface);
}

.fire-vbid-cal__nav {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 0.25rem;
}

.fire-vbid-cal__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.1rem;
}

.fire-vbid-cal__step:disabled {
    opacity: 0.4;
}

.fire-vbid-cal__title {
    min-height: 2.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-align-last: center;
}

select.fire-vbid-cal__title {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    color: var(--bs-body-color);
    cursor: pointer;
}

span.fire-vbid-cal__title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fire-vbid-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0 0.15rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--vbid-muted);
}

.fire-vbid-key::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    vertical-align: -0.1rem;
}

.fire-vbid-key--held::before { background: var(--vbid-solid-held); }
.fire-vbid-key--preferred::before { background: var(--fire-status-vacation-bg); border-color: var(--fire-status-vacation-border); }
.fire-vbid-key--gone::before { background: var(--fire-status-sick-bg); border-color: var(--fire-status-sick-border); }
.fire-vbid-key--full::before { background: var(--fire-status-other-bg); border-color: var(--fire-status-other-border); }
.fire-vbid-key--blackout::before { background: var(--vbid-blackout-bg); }

.fire-annual-hold-shift-legend,
.fire-vacation-pref-shift-legend {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--bs-body-color);
}

.fire-annual-hold-shift-legend::before,
.fire-vacation-pref-shift-legend::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border-radius: 0.2rem;
    background: var(--fire-shift-day-color, #adb5bd);
}

.fire-vbid-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.fire-vbid-cal__dow {
    padding-bottom: 0.1rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--vbid-muted);
}

/* Day cells (shared by the hold picker and the wish-list calendar) */
.fire-annual-hold-cell,
.fire-vacation-pref-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3rem;
    padding: 0.15rem;
    border: 1px solid transparent;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.05;
    appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.fire-annual-hold-cell:not(:disabled):active,
.fire-vacation-pref-cell:not(:disabled):active {
    transform: scale(0.93);
}

.fire-annual-hold-cell:focus-visible,
.fire-vacation-pref-cell:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.fire-annual-hold-cell:disabled,
.fire-vacation-pref-cell:disabled {
    cursor: default;
}

.fire-annual-hold-day-num,
.fire-vacation-pref-day-num {
    color: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fire-vbid-cell__rank {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 1px 3px;
    border-radius: 999px;
    background: var(--vbid-solid-rank);
    color: #fff;
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.1;
}

.fire-vbid-cell__mark {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1;
}

.fire-vbid-cell__mark .spinner-border-sm {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.12em;
}

.fire-vbid-cell__tag {
    margin-top: 2px;
    font-size: 0.56rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.75;
}

.fire-annual-hold-cell--empty,
.fire-vacation-pref-cell--empty {
    visibility: hidden;
}

.fire-annual-hold-cell--available,
.fire-vacation-pref-cell--available {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* The duty-day helper inlines a light-only shade; replace it with a theme-aware one. */
.fire-annual-hold-cell--available.fire-annual-hold-cell--duty,
.fire-vacation-pref-cell--available.fire-vacation-pref-cell--duty {
    background: color-mix(in srgb, var(--fire-shift-day-color, var(--bs-primary)) 16%, var(--bs-body-bg)) !important;
}

.fire-annual-hold-cell--duty .fire-annual-hold-day-num,
.fire-vacation-pref-cell--duty .fire-vacation-pref-day-num {
    color: var(--fire-shift-day-color, inherit);
    font-weight: 800;
}

.fire-annual-hold-cell--preferred,
.fire-vacation-pref-cell--preferred {
    background: var(--fire-status-vacation-bg);
    border-color: var(--fire-status-vacation-border);
    color: var(--fire-status-vacation-fg);
}

.fire-annual-hold-cell--held,
.fire-vacation-pref-cell--held {
    background: var(--vbid-solid-held) !important;
    border-color: var(--vbid-solid-held);
    color: #fff;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--vbid-solid-held) 70%, transparent);
}

.fire-annual-hold-cell--held .fire-annual-hold-day-num,
.fire-vacation-pref-cell--held .fire-vacation-pref-day-num {
    color: #fff;
}

.fire-annual-hold-cell--unavailable-wish,
.fire-vacation-pref-cell--unavailable-wish {
    background: var(--fire-status-sick-bg);
    border-color: var(--fire-status-sick-border);
    color: var(--fire-status-sick-fg);
}

.fire-annual-hold-cell--unavailable-wish .fire-annual-hold-day-num,
.fire-vacation-pref-cell--unavailable-wish .fire-vacation-pref-day-num {
    text-decoration: line-through;
}

.fire-annual-hold-cell--full,
.fire-vacation-pref-cell--full {
    background: var(--fire-status-other-bg);
    border-color: var(--fire-status-other-border);
    color: var(--fire-status-other-fg);
    opacity: 0.7;
}

.fire-annual-hold-cell--blackout,
.fire-vacation-pref-cell--blackout {
    background: var(--vbid-blackout-bg);
    border-color: var(--vbid-blackout-bg);
    color: var(--bs-body-bg);
    opacity: 0.8;
}

.fire-annual-hold-cell--blackout .fire-annual-hold-day-num,
.fire-vacation-pref-cell--blackout .fire-vacation-pref-day-num {
    color: var(--bs-body-bg);
    text-decoration: line-through;
}

.fire-annual-hold-cell--blackout-selectable {
    background: color-mix(in srgb, var(--bs-body-color) 68%, var(--bs-body-bg));
    border-color: var(--bs-border-color);
    color: var(--bs-body-bg);
    opacity: 0.95;
}

.fire-annual-hold-cell--blackout-selectable .fire-annual-hold-day-num {
    color: var(--bs-body-bg);
}

.fire-annual-hold-cell--outside,
.fire-vacation-pref-cell--outside {
    color: var(--vbid-muted);
    opacity: 0.35;
}

.fire-annual-hold-cell.is-armed {
    background: var(--fire-status-sick-bg) !important;
    border-color: var(--metro-status-danger-solid, #dc3545);
    color: var(--fire-status-sick-fg);
    box-shadow: 0 0 0 2px var(--metro-status-danger-solid, #dc3545);
}

.fire-annual-hold-cell.is-armed .fire-annual-hold-day-num {
    color: var(--fire-status-sick-fg);
}

/* Held-day chips */
.fire-vbid-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fire-vbid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.5rem;
    padding: 0 0.55rem 0 0.85rem;
    border: 1px solid var(--fire-status-military-border);
    border-radius: 999px;
    background: var(--fire-status-military-bg);
    color: var(--fire-status-military-fg);
    font-size: 0.85rem;
    font-weight: 600;
    appearance: none;
}

.fire-vbid-chip > i {
    font-size: 1.05rem;
}

.fire-vbid-chip.is-armed {
    border-color: var(--metro-status-danger-solid, #dc3545);
    background: var(--fire-status-sick-bg);
    color: var(--fire-status-sick-fg);
}

.fire-vbid-chip:disabled {
    opacity: 0.6;
}

/* Collapsible reason/notes and help */
.fire-vbid-notes {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    background: var(--vbid-surface);
}

.fire-vbid-notes > summary,
.fire-vbid-help > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    cursor: pointer;
}

.fire-vbid-notes > summary {
    min-height: 2.75rem;
    padding: 0 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.fire-vbid-notes > summary::-webkit-details-marker,
.fire-vbid-help > summary::-webkit-details-marker {
    display: none;
}

.fire-vbid-notes > summary::after,
.fire-vbid-help > summary::after {
    content: "\F282";
    margin-left: auto;
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.fire-vbid-notes[open] > summary::after,
.fire-vbid-help[open] > summary::after {
    transform: rotate(180deg);
}

.fire-vbid-notes__body {
    padding: 0 0.85rem 0.85rem;
}

/* 16px inputs keep iOS from zooming the page on focus. */
.fire-vbid-notes .form-control {
    min-height: 2.75rem;
    font-size: 1rem;
}

.fire-vbid-wish__intro {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fire-vbid-help {
    font-size: 0.82rem;
    color: var(--vbid-muted);
}

.fire-vbid-help > summary {
    min-height: 2.5rem;
    color: var(--bs-link-color);
    font-weight: 600;
}

.fire-vbid-help > summary::after {
    margin-left: 0;
}

.fire-vbid-help ul {
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.45;
}

/* Wish-list switches */
.fire-vbid-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* .fire-vbid prefix outranks the mobile shell's 1.25rem square checkbox rule. */
.fire-vbid .fire-vbid-toggle.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    min-height: 3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    background: var(--vbid-surface);
}

.fire-vbid .fire-vbid-toggle .form-check-input {
    flex: 0 0 auto;
    float: none;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0.05rem 0 0;
    cursor: pointer;
}

.fire-vbid-toggle .form-check-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.fire-vbid-toggle .form-check-label small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--vbid-muted);
}

/* Selected-days list (public your-turn) and ranked wish list */
.fire-vbid-list,
.fire-vbid-rank {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    background: var(--vbid-surface);
}

.fire-vbid-list__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.fire-vbid-list__count {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vbid-muted);
}

.fire-vbid-list__empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--vbid-muted);
}

.fire-vbid-list__items,
.fire-vbid-rank__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fire-vbid-list__item,
.fire-vbid-rank__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 3.1rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.fire-vbid-list__item:first-child,
.fire-vbid-rank__item:first-child {
    border-top: 0;
}

.fire-vbid-list__date,
.fire-vbid-rank__date {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.fire-vbid-list__date small,
.fire-vbid-rank__status {
    font-size: 0.75rem;
    color: var(--vbid-muted);
}

.fire-vbid-list__remove {
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
}

.fire-vbid-rank__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--fire-status-vacation-border);
    border-radius: 999px;
    background: var(--fire-status-vacation-bg);
    color: var(--fire-status-vacation-fg);
    font-size: 0.85rem;
    font-weight: 800;
}

.fire-vbid-rank__item.is-held .fire-vbid-rank__num {
    border-color: var(--vbid-solid-held);
    background: var(--vbid-solid-held);
    color: #fff;
}

.fire-vbid-rank__item.is-gone .fire-vbid-rank__num {
    border-color: var(--fire-status-sick-border);
    background: var(--fire-status-sick-bg);
    color: var(--fire-status-sick-fg);
}

.fire-vbid-rank__item.is-gone .fire-vbid-rank__date strong {
    text-decoration: line-through;
    color: var(--fire-status-sick-fg);
}

.fire-vbid-rank__status--held {
    font-weight: 600;
    color: var(--fire-status-military-fg);
}

.fire-vbid-rank__status--gone {
    font-weight: 600;
    color: var(--fire-status-sick-fg);
}

.fire-vbid-rank__actions {
    display: flex;
    flex: none;
    gap: 0.25rem;
}

.fire-vbid-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    background: transparent;
    color: var(--bs-body-color);
    appearance: none;
}

.fire-vbid-icon-btn:disabled {
    opacity: 0.3;
}

.fire-vbid-icon-btn--danger {
    color: var(--metro-status-danger-ink, #b02a37);
}

/* Sticky selection bar: rides above the MAUI bottom nav while the calendar scrolls. */
.fire-vbid-bar {
    position: sticky;
    bottom: 0.5rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--vbid-radius);
    background: var(--vbid-surface);
    box-shadow: 0 -4px 18px -6px rgba(15, 23, 42, 0.28);
}

.mobile-shell .fire-vbid-bar {
    bottom: calc(var(--mobile-bottom-h, 64px) + var(--safe-bottom, 0px) + 0.5rem);
}

.fire-vbid-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.fire-vbid-bar__summary {
    flex: 1 1 6.5rem;
    min-width: 0;
}

.fire-vbid-bar__count {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    line-height: 1.1;
}

.fire-vbid-bar__count strong {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fire-vbid-bar__count span {
    font-size: 0.85rem;
    color: var(--vbid-muted);
}

.fire-vbid-bar__status {
    overflow: hidden;
    font-size: 0.78rem;
    color: var(--vbid-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fire-vbid-meter {
    height: 4px;
    margin-top: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
}

.fire-vbid-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--vbid-solid-held);
    transition: width 0.2s ease;
}

.fire-vbid-bar__submit {
    flex: none;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    white-space: nowrap;
}

.fire-vbid-bar__alt {
    align-self: flex-start;
    min-height: 2rem;
    padding: 0.15rem 0;
    font-size: 0.8rem;
    text-align: left;
}

.fire-vbid-bar__text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.fire-vbid-bar__actions,
.fire-vbid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fire-vbid-bar__row > .fire-vbid-bar__actions {
    flex: 1 1 13rem;
}

.fire-vbid-bar__actions > .btn,
.fire-vbid-actions > .btn {
    flex: 1 1 8.5rem;
    min-height: 2.75rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.15;
}

.fire-vbid-nodays {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 999px;
}

/* Page: status card, empty state, section heading */
.fire-vbid-hero {
    margin-bottom: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.fire-vbid-hero--turn {
    background: var(--fire-status-military-bg);
    border-color: var(--fire-status-military-border);
    color: var(--fire-status-military-fg);
}

.fire-vbid-hero--wait {
    background: var(--fire-status-pending-bg);
    border-color: var(--fire-status-pending-border);
    color: var(--fire-status-pending-fg);
}

.fire-vbid-hero--free {
    background: var(--fire-status-vacation-bg);
    border-color: var(--fire-status-vacation-border);
    color: var(--fire-status-vacation-fg);
}

.fire-vbid-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.fire-vbid-hero__headline {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.5rem;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
}

.fire-vbid-hero__headline > i {
    flex: none;
    font-size: 1.35rem;
    line-height: 1.05;
}

.fire-vbid-hero__sub {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    line-height: 1.45;
}

.fire-vbid-hero a:not(.btn) {
    color: inherit;
    font-weight: 600;
}

.fire-vbid-hero .btn {
    min-height: 2.75rem;
    margin-top: 0.75rem;
    border-radius: 999px;
}

.fire-vbid-section__title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
}

.fire-vbid-empty {
    padding: 1.5rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    text-align: center;
}

.fire-vbid-empty__icon {
    font-size: 2rem;
    color: var(--vbid-muted);
}

.fire-vbid-empty__title {
    margin: 0.35rem 0;
    font-weight: 700;
}

.fire-vbid-empty p {
    font-size: 0.875rem;
    color: var(--vbid-muted);
}

.fire-vbid-empty .btn {
    min-height: 2.75rem;
    border-radius: 999px;
}

/* Wider screens: give the calendar room next to its controls. */
@media (min-width: 768px) {
    .fire-annual-hold-cell,
    .fire-vacation-pref-cell {
        min-height: 3.6rem;
    }

    .fire-vbid-cell__rank,
    .fire-vbid-cell__tag {
        font-size: 0.65rem;
    }
}

/* Phone turned sideways: calendar on the left, selection + actions on the right. */
@media (orientation: landscape) and (max-height: 540px) {
    .fire-vbid-page .fire-vbid-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.75rem;
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.85rem;
    }

    .fire-vbid-page .fire-vbid-hero__eyebrow,
    .fire-vbid-page .fire-vbid-hero__sub {
        display: none;
    }

    .fire-vbid-page .fire-vbid-hero__headline {
        flex: 1 1 16rem;
        margin: 0;
        font-size: 0.95rem;
    }

    .fire-vbid-page .fire-vbid-hero__headline > i {
        font-size: 1.1rem;
    }

    .fire-vbid-page .fire-vbid-chiprow {
        margin: 0;
    }

    .fire-vbid-page .fire-vbid-hero .btn {
        margin-top: 0;
    }

    .fire-vbid-page .fire-vbid-section__title {
        display: none;
    }

    .fire-vbid-pick {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr;
        grid-template-areas:
            "cal hint"
            "cal bar"
            "cal side"
            "cal extra";
        align-items: start;
        gap: 0.6rem 0.9rem;
    }

    .fire-vbid-pick__hint { grid-area: hint; }
    .fire-vbid-pick__cal { grid-area: cal; }
    .fire-vbid-pick__side { grid-area: side; }
    .fire-vbid-pick__extra { grid-area: extra; }
    .fire-vbid-pick > .fire-vbid-bar { grid-area: bar; }

    .fire-vbid-wish__body {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "cal bar"
            "cal rank";
        align-items: start;
        gap: 0.6rem 0.9rem;
    }

    .fire-vbid-wish__body > .fire-vbid-cal { grid-area: cal; }
    .fire-vbid-wish__body > .fire-vbid-rank { grid-area: rank; }
    .fire-vbid-wish__body > .fire-vbid-bar { grid-area: bar; }

    /* The bar now sits at the top of the right column, already in view. */
    .fire-vbid-bar,
    .mobile-shell .fire-vbid-bar {
        position: static;
        box-shadow: none;
    }

    .fire-vbid-cal {
        gap: 0.35rem;
        padding: 0.4rem;
    }

    .fire-vbid-cal__nav {
        grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
    }

    .fire-vbid-cal__step {
        width: 2.25rem;
        height: 2.25rem;
    }

    .fire-vbid-cal__title {
        min-height: 2.25rem;
        font-size: 0.95rem;
    }

    .fire-vbid-cal__grid {
        gap: 0.2rem;
    }

    .fire-vbid-cal__dow {
        padding: 0;
        font-size: 0.6rem;
    }

    .fire-vbid-keys {
        order: 3;
        font-size: 0.66rem;
    }

    .fire-annual-hold-cell,
    .fire-vacation-pref-cell {
        flex-direction: row;
        gap: 0.2rem;
        min-height: 2rem;
        border-radius: 0.45rem;
        font-size: 0.85rem;
    }

    .fire-vbid-cell__mark {
        margin: 0;
        font-size: 0.65rem;
    }

    .fire-vbid-cell__tag {
        display: none;
    }

    .fire-vbid-cell__rank {
        top: 1px;
        right: 1px;
        font-size: 0.5rem;
    }

    .fire-vbid-tabs > .metro-segmented__item {
        min-height: 2.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fire-annual-hold-cell,
    .fire-vacation-pref-cell,
    .fire-vbid-meter > span {
        transition: none;
    }
}

.metro-form-fill-input {
    box-sizing: border-box;
    color: #111;
}

.metro-form-fill-checkbox {
    margin: 0;
    cursor: pointer;
    accent-color: var(--metro-primary);
}

/* Firefighter easy basics: fat Acknowledge / Request / close. */
.dash-v2--fire .fire-ack-action,
.dash-v2--fire .fire-request-time-off {
    min-height: 48px;
    font-weight: 700;
    padding-inline: 1rem;
}

.dash-v2--fire .fire-easy-close,
.vacation-wizard-panel .fire-easy-close {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
    background-size: 1em;
    opacity: 0.85;
}

.vacation-wizard-modal {
    width: min(640px, calc(100vw - 1.5rem));
    max-width: min(640px, calc(100vw - 1.5rem));
    margin-left: auto;
    margin-right: auto;
}

.vacation-wizard-panel {
    max-width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.vacation-wizard-header {
    flex: 0 0 auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.12));
}

.vacation-wizard-header .modal-title {
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.25;
}

.vacation-wizard-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.85rem 1rem 1rem;
}

.vacation-wizard-panel .wizard-runner-stepper {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.35rem;
    margin-bottom: 0.85rem !important;
}

.vacation-wizard-panel .wizard-runner-stepper-item {
    flex: 1 1 0;
    max-width: none;
    justify-content: center;
    padding: 0.3rem 0.4rem;
    font-size: 0.72rem;
    min-width: 0;
}

.vacation-wizard-panel .wizard-runner-stepper-dot {
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.65rem;
    flex: 0 0 auto;
}

.vacation-wizard-panel .wizard-runner-stepper-label {
    max-width: 100%;
}

.vacation-wizard-review {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.25rem;
}

.vacation-wizard-section {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.12));
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg, rgba(255, 255, 255, 0.04));
}

.vacation-wizard-section--warn {
    border-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.45);
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.08);
}

.vacation-wizard-section--warn .vacation-wizard-section__value {
    color: var(--bs-warning-text-emphasis, #ffc107);
}

.vacation-wizard-section__label {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #adb5bd);
}

.vacation-wizard-section__value {
    font-size: 0.95rem;
    line-height: 1.35;
    word-break: break-word;
}

.vacation-wizard-section__meta {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #adb5bd);
}

.vacation-wizard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vacation-wizard-list > li {
    padding: 0.45rem 0.55rem;
    border-radius: 0.5rem;
    background: var(--bs-body-bg, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--bs-border-color-translucent, rgba(255, 255, 255, 0.08));
    font-size: 0.875rem;
    line-height: 1.35;
    word-break: break-word;
}

.vacation-wizard-balance {
    font-size: 0.875rem;
    line-height: 1.4;
}

.vacation-wizard-footer {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.12));
}

.vacation-wizard-footer__spacer {
    flex: 0 0 0;
}

.vacation-wizard-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-left: auto;
}

.vacation-wizard-footer .btn,
.vacation-wizard-footer__secondary {
    width: auto !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 0.55rem !important;
}

@media (max-width: 767.98px) {
    .vacation-wizard-footer {
        flex-wrap: wrap !important;
    }

    .vacation-wizard-footer .btn,
    .vacation-wizard-footer__secondary {
        min-height: var(--metro-touch-target-min, 2.75rem);
        padding: 0.45rem 0.85rem;
        font-size: 0.9375rem;
    }
}

@media (max-width: 419.98px) {
    .vacation-wizard-footer__actions {
        width: 100%;
        justify-content: stretch;
    }

    .vacation-wizard-footer__actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    .vacation-wizard-modal.modal-fullscreen-sm-down {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100dvh !important;
        margin: 0 !important;
    }

    .vacation-wizard-panel {
        height: 100%;
        max-height: 100dvh;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .vacation-wizard-header {
        /* Fullscreen sheet owns top safe area (status bar / notch). */
        padding-top: max(0.85rem, var(--mobile-safe-top, 0px), var(--maui-safe-top, 0px), env(safe-area-inset-top, 0px));
        padding-left: max(1rem, var(--mobile-safe-left, 0px), env(safe-area-inset-left, 0px));
        padding-right: max(1rem, var(--mobile-safe-right, 0px), env(safe-area-inset-right, 0px));
    }

    .vacation-wizard-footer {
        padding-bottom: max(0.75rem, var(--mobile-safe-bottom, 0px), var(--maui-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
        padding-left: max(1rem, var(--mobile-safe-left, 0px), env(safe-area-inset-left, 0px));
        padding-right: max(1rem, var(--mobile-safe-right, 0px), env(safe-area-inset-right, 0px));
    }

    .vacation-wizard-body {
        padding-left: max(1rem, var(--mobile-safe-left, 0px), env(safe-area-inset-left, 0px));
        padding-right: max(1rem, var(--mobile-safe-right, 0px), env(safe-area-inset-right, 0px));
    }
}

@media (max-width: 767.98px) {
    .dash-v2--fire .fire-ack-action,
    .dash-v2--fire .fire-request-time-off {
        width: 100%;
        min-height: 56px;
    }

    .dash-v2--fire .fire-ack-card .fire-ack-action {
        margin-top: 0.5rem;
    }
}



/* ── Monthly Schedule on a phone: assigned-shift duty days as one-column day cards ─────────────
   The duty-only strip is auto-fill 8.5rem, which is two cramped columns at 390px, and the
   ≤575px month rule above pins every day to a fixed 8.5rem height that clips rosters. */
@media (max-width: 575.98px) {
    .fire-cal-month--duty-days .card-body {
        overflow-x: visible;
        padding: 0.5rem !important;
    }

    .fire-cal-month-week--duty-only {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .fire-cal-month--duty-days .fire-cal-month-day {
        height: auto;
        min-height: 0;
        max-height: none;
        gap: 0.5rem;
        padding: 0.8rem 0.9rem;
        border-radius: 0.9rem;
        box-shadow: 0 0.08rem 0.35rem rgba(0, 0, 0, 0.05);
    }

    .fire-cal-month--duty-days .fire-cal-month-day--today {
        border-width: 2px;
    }

    .fire-cal-month--duty-days .fire-cal-month-day-num {
        font-size: 1.05rem;
        font-weight: 750;
        padding: 0;
        margin: 0;
    }

    .fire-cal-month--duty-days .fire-cal-month-station {
        padding: 0.55rem 0.7rem;
        border-radius: 0.65rem;
    }

    .fire-cal-month--duty-days .fire-cal-month-station-name {
        font-size: 0.9rem;
        gap: 0.4rem;
    }

    .fire-cal-month--duty-days .fire-cal-month-station-dot {
        width: 0.6rem;
        height: 0.6rem;
    }

    .fire-cal-month--duty-days .fire-cal-month-station-names {
        font-size: 0.88rem;
        line-height: 1.4;
        margin-top: 0.25rem;
        -webkit-line-clamp: 12;
        line-clamp: 12;
    }

    .fire-cal-month--duty-days .fire-cal-month-person {
        padding: 0.1rem 0;
    }

    .fire-cal-month--duty-days .fire-cal-month-empty {
        font-size: 0.85rem;
    }

    .fire-cal-month--duty-days .fire-cal-month-station-alerts {
        font-size: 0.8rem;
    }
}

/* FMaui1 phone header — station navy bar (tokens set above) */
.mobile-shell .fire-page-header__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 52px;
    position: relative;
    z-index: 1;
}
.mobile-shell .fire-page-header__title { flex: 1 1 auto; min-width: 0; }
.mobile-shell .fire-page-header__title h1 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shell .fire-icon-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
    color: inherit;
    font-size: 1.15rem;
    transition: transform .12s ease, background-color .12s ease;
}
.mobile-shell .fire-icon-btn:active { transform: scale(.94); }
.mobile-shell .fire-action-sheet__list > * {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 52px;
    padding: .6rem .9rem;
    border: 0;
    border-radius: var(--mobile-radius-control, 12px);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    justify-content: flex-start;
}
.mobile-shell .fire-action-sheet__list .badge { margin-left: auto; }
.mobile-shell .fire-action-sheet__list > .btn-outline-danger,
.mobile-shell .fire-action-sheet__list > .text-danger { color: var(--bs-danger) !important; }
.mobile-shell .fire-page-header--phone .fire-related-links,
.mobile-shell .fire-page-header--phone .fire-page-header-actions { display: none; }
@media (min-width: 768px) {
    .mobile-shell .fire-page-header__title h1 { font-size: 1.5rem; }
}

/* FMaui1 sheet menus */
.mobile-shell .fire-toolbar-more__menu,
.mobile-shell .fire-schedule-header-overflow__menu {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    max-width: none;
    border-radius: var(--mobile-radius-card, 16px) var(--mobile-radius-card, 16px) 0 0;
    padding: .75rem .75rem calc(.75rem + var(--mobile-safe-bottom, 0px));
    z-index: var(--z-popover, 1070);
}
.mobile-shell .fire-toolbar-more__menu > *,
.mobile-shell .fire-schedule-header-overflow__menu > * {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 52px;
    padding: .6rem .9rem;
    border: 0;
    border-radius: var(--mobile-radius-control, 12px);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    justify-content: flex-start;
}
.mobile-shell .fire-toolbar-more__menu .badge,
.mobile-shell .fire-schedule-header-overflow__menu .badge { margin-left: auto; }
.mobile-shell .fire-toolbar-more__menu > .btn-outline-danger,
.mobile-shell .fire-toolbar-more__menu > .text-danger,
.mobile-shell .fire-schedule-header-overflow__menu > .btn-outline-danger,
.mobile-shell .fire-schedule-header-overflow__menu > .text-danger { color: var(--bs-danger) !important; }

/* FMaui2 phone header primary + sheet rows */
.mobile-shell .fire-icon-btn--primary {
    background: var(--mobile-primary, var(--bs-primary, #1a56db));
    color: var(--mobile-on-primary, #fff);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mobile-primary, #1a56db) 28%, transparent);
    position: relative;
    text-decoration: none;
}
.mobile-shell .fire-icon-btn:disabled { opacity: .55; }
.mobile-shell a.fire-icon-btn { text-decoration: none; }
.mobile-shell .fire-icon-btn__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bs-warning, #f59e0b);
    color: #111;
    font-size: .7rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
.mobile-shell .fire-action-sheet__list > .btn,
.mobile-shell .fire-action-sheet__list > a {
    min-height: 52px !important;
    padding: .6rem .9rem !important;
    border: 0 !important;
    border-radius: var(--mobile-radius-control, 12px) !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
    justify-content: flex-start !important;
    text-align: left;
    text-decoration: none;
}
.mobile-shell .fire-action-sheet__list > .btn:disabled { opacity: .5; }
.mobile-shell .fire-action-sheet__list > .btn-primary { color: var(--mobile-primary, var(--bs-primary)) !important; }
.mobile-shell .fire-action-sheet__list > .btn-outline-danger { color: var(--bs-danger) !important; }
.mobile-shell .fire-action-sheet__list > .btn .spinner-border { margin-right: .25rem; }
.mobile-shell .fire-action-sheet__list > .fire-schedule-view-modes--wide { display: none !important; }

/* FMaui2 scheduler phone toolbar */
.fire-scheduler-phone-toolbar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.fire-scheduler-phone-toolbar__row {
    display: flex;
    gap: .5rem;
}
.fire-scheduler-phone-toolbar__row > .btn,
.fire-scheduler-phone-toolbar__row > .metro-filter-drawer-trigger {
    flex: 1 1 0;
    min-width: 0;
}
.fire-scheduler-phone-toolbar__row .btn .bi { margin-right: .35rem; }
.mobile-shell .fire-scheduler-phone-toolbar .metro-filter-drawer-trigger .badge { order: 2; margin-left: .35rem; }

/* FMaui3 action sheet: filter controls keep the sheet open, duplicates of the bar button hide, selects get a label */
.fire-sheet-control { display: contents; }
.fire-sheet-control__label { display: none; }
.mobile-shell .fire-action-sheet__list > .fire-sheet-control {
    display: flex;
    gap: .75rem;
    padding-block: .35rem;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-control > .form-check {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0;
    padding-left: 0;
    min-height: 0;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-control .form-check-label {
    order: 1;
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1rem !important;
    line-height: 1.3;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-control .form-check-input {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    width: 2.9em;
    height: 1.6em;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-control > .fire-sheet-control__label {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    font-weight: 600;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-control > select {
    flex: 1 1 auto;
    min-height: 44px;
    width: auto !important;
    font-size: 1rem;
    border-radius: 10px;
}
.mobile-shell .fire-action-sheet__list > .fire-sheet-hide { display: none !important; }
.mobile-shell .fire-action-sheet__list > a > .bi:first-child,
.mobile-shell .fire-action-sheet__list > .btn > .bi:first-child { font-size: 1.1rem; opacity: .85; }


/* ==========================================================================
   Phone restyle lane A (2026-11): Fire pages brought up to the vacation-bidding
   phone bar. Grouped by area: time off, overtime/callbacks, operations
   (incidents, training, apparatus, journal), admin/reports, and my group
   (shift coverage, notifications, acknowledgements, preferences, station board).
   ========================================================================== */

/* --- lane A: timeoff.css --- */
/* ===== Fire time off (sub-lane A-fire/TIMEOFF) ===== */
/* Kit vars on dash-v2 pages without turning the section into a flex column. */
.pk-page.fire-to-page { display: block; }

/* Hero balance tiles: "Taken" carries "120 (10 shifts)", so let values wrap and size down. */
.fire-to-stats .pk-stat__value {
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}
.fire-to-hero__links { margin-top: .5rem; }
.fire-to-hero__links .btn { gap: .35rem; }

/* Annual batch cards: row actions drop under the dates. */
.fire-to-batch__decide { margin-bottom: .75rem; }
.fire-to-batch-list .pk-row { flex-wrap: wrap; }
.fire-to-batch-list__actions { flex: 1 1 100%; }
@media (min-width: 641px) {
    .fire-to-batch-list__actions { flex: 0 1 auto; margin-left: auto; }
}

/* Mobile cards: actions sit below the card text. */
.metro-mobile-row__actions.pk-actions { margin-top: .5rem; }

/* Approver toggles: full-height tap rows on the phone. */
.mobile-shell .fire-to-switches .form-check {
    min-height: var(--pk-tap, 2.75rem);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.mobile-shell .fire-to-switches .form-check-input { margin-top: 0; }

/* Modal footers: buttons wrap and share the row on narrow screens. */
.fire-to-modal-footer { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) {
    .fire-to-modal-footer > .btn { flex: 1 1 8rem; min-height: var(--pk-tap, 2.75rem); margin: 0; }
}

/* Phone landscape is >= 768 px wide: force ResponsiveDataTable cards instead of the wide table. */
@media (orientation: landscape) and (max-height: 540px) {
    .mobile-shell .fire-to-page .responsive-data-table > .d-md-block { display: none !important; }
    .mobile-shell .fire-to-page .responsive-data-table__cards { display: block !important; }
    .mobile-shell .fire-to-page .responsive-data-table__cards .metro-mobile-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
    }
}

/* Public decision page (TimeOffAction): per-day rows. */
.fire-to-action-list .list-group-item { padding: .75rem 1rem; }
.fire-to-hold-add { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fire-to-hold-add .form-control { flex: 1 1 10rem; max-width: 14rem; }
.fire-to-hold-add .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
    .fire-to-hold-add .form-control { max-width: none; min-height: var(--pk-tap, 2.75rem); }
    .fire-to-hold-add .btn { flex: 1 1 100%; min-height: var(--pk-tap, 2.75rem); }
    .fire-to-hold-row .btn { min-height: 2.5rem; min-width: 5.5rem; }
}

/* Vacation your-turn (public): month stepper with real tap targets. */
.fire-to-month-nav .btn { min-width: var(--pk-tap, 2.75rem); min-height: var(--pk-tap, 2.75rem); }
.fire-to-month-nav__label { min-width: 8.5rem; text-align: center; }
@media (max-width: 640px) {
    .fire-to-month-nav > .ms-auto { flex: 1 1 100%; margin-left: 0 !important; }
}

/* Off-shift calendar: day number colour (moved from the page's inline <style>). */
.fire-off-shift-day-num { color: var(--fire-shift-day-color, inherit); }
.fire-to-count-pill { font-size: .65rem; }
.fire-to-person-select { max-width: 100%; }
@media (max-width: 640px) {
    .fire-to-person-select { flex: 1 1 100%; width: 100% !important; }
}

/* Two-choice btn-groups (sick callout, planned-days view, notice type): fill the row on phones. */
@media (max-width: 640px) {
    .fire-to-seg { display: flex; width: 100%; }
    .fire-to-seg > .btn { flex: 1 1 0; min-width: 0; white-space: normal; min-height: var(--pk-tap, 2.75rem); }
}

/* Sick callout pickers: no fixed min-width on a 320 px phone. */
.fire-to-sick-field { min-width: 11.5rem; }
.fire-to-sick-field--wide { min-width: 16rem; }
@media (max-width: 640px) {
    .fire-to-sick-field,
    .fire-to-sick-field--wide { flex: 1 1 100%; min-width: 0; }
}

/* Report filters (FireTimeOffReportPanel). */
@media (max-width: 640px) {
    .fire-to-report-filters { flex-wrap: wrap; }
    .fire-to-report-filters .form-control { flex: 1 1 9rem; min-height: var(--pk-tap, 2.75rem); }
    .fire-to-report-filters .btn { flex: 1 1 100%; min-height: var(--pk-tap, 2.75rem); }
}

/* pk-table-cards helpers: action cells, empty rows, multi-line cells. */
@media (max-width: 640px) {
    .pk-table-cards td.fire-to-row-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .4rem;
        white-space: normal !important;
        padding-top: .45rem;
    }
    .pk-table-cards td.fire-to-row-actions > .btn { flex: 1 1 8rem; min-height: 2.5rem; margin: 0 !important; }
    .pk-table-cards td.fire-to-empty-cell { justify-content: center; text-align: center; }
    .pk-table-cards td.fire-to-cell-stack { display: block; text-align: left; }
    .pk-table-cards td.fire-to-cell-stack[data-label]::before {
        display: block;
        max-width: none;
        margin-bottom: .15rem;
    }
    .pk-table-cards td .form-control { min-width: 0; }
}

/* Phone landscape keeps the desktop table: let a long action cell wrap instead of pushing the table wide. */
@media (orientation: landscape) and (max-height: 540px) {
    .mobile-shell .fire-to-page td.fire-to-row-actions { white-space: normal !important; min-width: 8.5rem; }
    .mobile-shell .fire-to-page td.fire-to-row-actions > .btn { margin: 0 0 .3rem !important; }
}

/* Calendar toolbar (TimeOffCalendar, OffShiftCalendar): four view tabs + period stepper do not fit one 320 px row. */
@media (max-width: 640px) {
    .mobile-shell .fire-to-page .fire-cal-toolbar__row { flex-wrap: wrap; }
    .mobile-shell .fire-to-page .fire-cal-toolbar__views,
    .mobile-shell .fire-to-page .fire-cal-toolbar__period { flex: 1 1 100%; }
}

/* --- lane A: ot.css --- */
/* ==========================================================================
   Fire callbacks / open shifts / overtime (fire-ot2-*), lane A-fire/OT.
   Card list used by FireCallbacksPanel, FireOvertimeOffersPanel, OpenShifts
   and the offer / coverage action pages. Sits inside a .pk-page wrapper.
   ========================================================================== */

.fire-ot2-panel + .fire-ot2-panel,
.fire-ot2-panel + .fire-ot2-links {
    margin-top: 1.25rem;
}

.fire-ot2-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.fire-ot2-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fire-ot2-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: 0.85rem;
    background: var(--bs-body-bg);
}

.fire-ot2-item--danger { border-left-color: var(--metro-status-danger-solid); }
.fire-ot2-item--wait { border-left-color: var(--metro-status-warning-solid); }
.fire-ot2-item--ok { border-left-color: var(--metro-status-success-solid); }
.fire-ot2-item--info { border-left-color: var(--metro-status-info-solid); }

.fire-ot2-item--focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

.fire-ot2-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.fire-ot2-item__head > .badge {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.fire-ot2-item__title {
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.fire-ot2-item__when {
    font-size: 0.9rem;
    font-weight: 600;
}

.fire-ot2-item__meta {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.fire-ot2-item__note {
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.fire-ot2-item__alert {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.fire-ot2-item__alert--danger { color: var(--metro-status-danger-ink); }
.fire-ot2-item__alert--wait { color: var(--metro-status-warning-ink); }

.fire-ot2-item__flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.fire-ot2-item .pk-actions {
    margin-top: auto;
    padding-top: 0.4rem;
}

/* Filter row inside the pk-fold: Bootstrap .row gutters, no card chrome. */
.fire-ot2-panel .pk-fold .pk-form .row {
    --bs-gutter-y: 0.5rem;
}

/* Phone: one card per row and roomier tap rows. */
@media (max-width: 640px) {
    .fire-ot2-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .fire-ot2-item {
        padding: 0.75rem 0.8rem;
    }
}

/* Phone sideways: two cards across so a callback and its buttons fit the short screen. */
@media (orientation: landscape) and (max-height: 540px) {
    .fire-ot2-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fire-ot2-item {
        gap: 0.2rem;
        padding: 0.6rem 0.75rem;
    }

    .fire-ot2-item .pk-actions {
        padding-top: 0.25rem;
    }
}

/* Offer / coverage action pages: the pk-page sits in a centred card. */
.fire-ot2-action {
    text-align: left;
}

/* pk-fold used outside a .pk-page (overtime board calendar). */
.fire-ot2-fold {
    --pk-line: var(--bs-border-color);
    --pk-radius: 0.85rem;
    --pk-surface: var(--bs-body-bg);
}

/* Overtime assignments table on a phone: action button spans the card. */
@media (max-width: 640px) {
    .pk-table-cards td.fire-ot2-cell-action {
        text-align: left !important;
    }

    .pk-table-cards td.fire-ot2-cell-action::before {
        display: none;
    }

    .pk-table-cards td.fire-ot2-cell-action > .btn {
        width: 100%;
        min-height: 2.75rem;
    }
}

/* Card tables on a phone: icon-button tool cells (schedule adjustments) and
   the schedule list view, whose station/shift group rows span every column. */
@media (max-width: 640px) {
    .pk-table-cards td.fire-ot2-cell-tools {
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .pk-table-cards td.fire-ot2-cell-tools::before {
        margin-right: auto;
    }

    .fire-ot2-sched-list tr:has(> td[colspan]) {
        padding: 0;
        overflow: hidden;
    }

    .fire-ot2-sched-list td[colspan] {
        display: block;
    }

    .fire-ot2-sched-list td.pk-cell-title {
        padding-left: 0 !important;
    }

    .fire-ot2-sched-list td[colspan].ps-5,
    .fire-ot2-sched-list td[colspan].ps-4 {
        padding: 0.5rem 0.75rem !important;
    }
}

/* Room under the sticky accept/decline bar so it can rest below the last
   note at the end of the scroll instead of covering it. */
.mobile-shell .fire-ot2-action:has(> .pk-bar) {
    padding-bottom: var(--pk-bar-bottom, 0.5rem);
}

/* --- lane A: ops.css --- */
/* -- Phone restyle lane A-fire/OPS: training, incidents, events, station ops --
   Kit classes (pk-*) do the heavy lifting; these are the page-specific bits.
   Colours: --bs-*, --metro-status-*, --fire-status-* only. */

/* Shared helpers */
.fire-ops-page {
    margin-bottom: 1rem;
}

.fire-ops-link-btn {
    min-height: var(--pk-tap, 2.75rem);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.fire-ops-progress-cell {
    min-width: 11rem;
}

.fire-ops-progress {
    min-width: 0;
}

.fire-ops-progress__bar {
    height: 6px;
}

@media (max-width: 640px) {
    .fire-ops-progress-cell {
        min-width: 0;
    }

    .pk-table-cards td.fire-ops-progress-cell .fire-ops-progress {
        flex: 1 1 auto;
        text-align: left;
    }

    /* Card-mode tables: icon buttons sit at the right of their row. */
    .pk-table-cards td .pk-icon-btn {
        margin-left: auto;
    }
}

/* Readiness wallet (moved from the component's inline style block). */
.wow-readiness-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-3, 0.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wow-readiness-grid > li .d-flex > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.wow-readiness-action {
    min-height: 44px;
    min-width: 44px;
}

.wow-readiness-ring {
    flex: none;
    font-size: 0.85rem;
    font-weight: var(--weight-semibold, 600);
}

.wow-readiness-stage {
    position: fixed;
    inset: 0;
    z-index: 1080;
    overflow: auto;
    background: var(--metro-text, var(--bs-emphasis-color));
    color: var(--metro-surface, var(--bs-body-bg));
    padding: var(--space-4, 1rem);
}

.wow-readiness-stage.wow-card {
    background: var(--metro-text, var(--bs-emphasis-color));
    color: var(--metro-surface, var(--bs-body-bg));
    border: 0;
    box-shadow: none;
}

.wow-readiness-stage .wow-card {
    background: transparent;
    color: inherit;
    border-color: currentColor;
}

.wow-readiness-stage .wow-ring {
    width: 9rem;
    font-size: 1.75rem;
}

.wow-readiness-stage .wow-readiness-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

@media (prefers-reduced-motion: reduce) {
    .wow-readiness-stage,
    .wow-readiness-ring,
    .wow-readiness-action {
        animation: none;
        transition: none;
    }
}

/* Modals: 44px close / footer buttons (moved from inline styles). */
.fire-ops-close {
    min-width: 44px;
    min-height: 44px;
}

.fire-ops-modal-btn {
    min-height: 44px;
}

.fire-ops-journal-modal-head {
    border-bottom: 3px solid var(--bs-danger);
}

/* Incident log */
.fire-ops-filters {
    margin-bottom: var(--pk-gap, 0.75rem);
}

.fire-ops-filter-form {
    gap: 0.5rem;
}

.fire-ops-code {
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    /* Card-mode row actions: full-width button at the foot of the card. */
    .pk-table-cards td.fire-ops-row-actions {
        justify-content: stretch;
        padding-top: 0.45rem;
    }

    .pk-table-cards td.fire-ops-row-actions > .btn {
        flex: 1 1 auto;
    }
}

/* Run-load heatmap (moved from FireIncidentHeatmap's inline style block). */
.wow-runload-scroll {
    overflow-x: auto;
}

.wow-runload-grid {
    display: grid;
    grid-template-columns: 2.75rem repeat(24, minmax(var(--metro-touch-target-min, 44px), 1fr));
    gap: var(--space-1, 0.25rem);
    min-width: max-content;
}

.wow-runload-hour,
.wow-runload-day {
    color: var(--metro-text-muted, var(--dash-muted));
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
}

.wow-runload-day {
    align-self: center;
    font-weight: var(--weight-semibold, 600);
    text-align: start;
}

.wow-runload-cell {
    justify-content: center;
    min-width: var(--metro-touch-target-min, 44px);
    min-height: var(--metro-touch-target-min, 44px);
    padding: 0;
}

.wow-runload-callout {
    font-weight: var(--weight-semibold, 600);
    margin: var(--space-2, 0.5rem) 0;
}

/* Events */
.fire-ops-hero {
    margin-bottom: var(--pk-gap, 0.75rem);
}

.fire-ops-more-filters > summary {
    display: flex;
    align-items: center;
    min-height: var(--pk-tap, 2.75rem);
    cursor: pointer;
}

.fire-event-row-open {
    cursor: pointer;
    min-width: 0;
}

.fire-ops-event-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.fire-ops-event-actions__help {
    max-width: 11rem;
}

.fire-ops-cta-preview {
    background: var(--metro-status-success-solid, var(--bs-success));
    color: var(--bs-white);
}

@media (max-width: 640px) {
    /* Row buttons wrap into a two-up grid under the event instead of a tall column. */
    .fire-ops-event-actions {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .fire-ops-event-actions > .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .fire-ops-event-actions__help {
        flex: 1 1 100%;
        max-width: none;
    }
}

.fire-ops-pre {
    white-space: pre-wrap;
}

/* Daily journal: input-group buttons are excluded from the shell's 48px rule. */
.mobile-shell .fire-ops-step-btn {
    min-width: var(--pk-tap, 2.75rem);
    min-height: var(--pk-tap, 2.75rem);
}

/* Station journal */
.fire-ops-journal-list {
    display: grid;
    gap: var(--pk-gap, 0.75rem);
}

.fire-ops-journal-card {
    border-left: 5px solid var(--bs-danger) !important;
    background: var(--pk-surface, var(--bs-body-bg));
}

.fire-ops-journal-card__title {
    min-width: 0;
}

.fire-ops-journal-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.fire-ops-journal-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.875em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fire-ops-journal-dot {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--bs-white);
    font-size: 0.75rem;
}

.fire-ops-journal-dot--apparatus {
    background: var(--metro-status-danger-solid, var(--bs-danger));
}

.fire-ops-journal-dot--training {
    background: var(--metro-status-info-solid, var(--bs-primary));
}

.fire-ops-journal-dot--maintenance {
    background: var(--metro-status-warning-solid, var(--bs-warning));
}

.fire-ops-journal-dot--general {
    background: var(--metro-status-success-solid, var(--bs-success));
}

.fire-ops-journal-text {
    white-space: pre-wrap;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    /* Author line and Edit button drop under the date, left aligned. */
    .fire-ops-journal-card__meta {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
}

/* 44px tap targets (moved from inline min-height/min-width styles). */
.fire-ops-tap {
    min-width: 44px;
    min-height: 44px;
}

/* Incident editor modal (moved from inline styles). */
.fire-ops-case-none {
    text-transform: none;
}

.fire-ops-suggest {
    z-index: 1060;
    top: 100%;
    left: 0;
    max-height: 220px;
    overflow-y: auto;
}

.fire-ops-pointer {
    cursor: pointer;
}

.fire-ops-tiny-badge {
    font-size: 0.65rem;
}

.fire-ops-search-sm {
    max-width: 14rem;
}

@media (max-width: 640px) {
    .fire-ops-search-sm {
        max-width: none;
    }
}

/* Apparatus checks */
.fire-ops-date-input {
    width: auto;
}

.fire-ops-unit-card {
    border-left: 4px solid var(--fire-ops-unit-tone, var(--bs-border-color)) !important;
}

.fire-ops-unit-card__name,
.fire-ops-item-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fire-ops-item-note {
    font-size: 0.8em;
}

@media (max-width: 640px) {
    .mobile-shell .fire-ops-date-input {
        width: 100%;
        min-height: var(--pk-tap, 2.75rem);
    }
}

/* Incident trends: bar rows (moved from inline widths). */
.fire-ops-stat-text {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.fire-ops-bar__label {
    flex: none;
    width: 80px;
}

.fire-ops-bar__label--wide {
    width: 160px;
}

.fire-ops-bar__label--unit {
    width: 50px;
}

.fire-ops-bar__label--type {
    width: 70px;
}

.fire-ops-bar__track {
    height: 14px;
}

.fire-ops-bar__track--lg {
    height: 18px;
}

.fire-ops-bar__count {
    width: 30px;
    text-align: right;
}

.fire-ops-bar__extra {
    width: 50px;
}

@media (max-width: 640px) {
    .fire-ops-bar {
        gap: 0.35rem !important;
    }

    .fire-ops-bar__label--wide {
        width: 7.5rem;
    }

    .fire-ops-bar__label--type {
        display: none;
    }
}

/* Training (admin): disclosure summaries, select column, personnel picker. */
.fire-ops-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--pk-tap, 2.75rem);
    cursor: pointer;
}

.fire-ops-check-col {
    width: 2.25rem;
}

.fire-ops-search {
    max-width: 18rem;
}

.fire-ops-picklist {
    max-height: 16rem;
    overflow: auto;
}

@media (max-width: 640px) {
    .fire-ops-search {
        max-width: none;
    }

    /* Empty-state rows span the whole card instead of sitting in a label/value pair. */
    .pk-table-cards.fire-ops-table td[colspan] {
        display: block;
        text-align: center;
    }

    .pk-table-cards.fire-ops-table tr:has(> td[colspan]) {
        border: 0;
        padding: 0;
    }
}

/* Fitness add panel (moved from the page's inline style block). */
.fitness-panel {
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
}

/* Apparatus / training compliance / schedule report: fixed-width selects (moved from inline widths). */
.fire-ops-select-year {
    width: 7.5rem;
}

.fire-ops-select-status {
    width: 9.5rem;
}

.fire-ops-rate-bar {
    min-width: 60px;
}

.fire-ops-picklist--sm {
    max-height: 140px;
    overflow-y: auto;
}

@media (max-width: 640px) {
    .mobile-shell .fire-ops-select-year,
    .mobile-shell .fire-ops-select-status {
        width: 100%;
        min-height: var(--pk-tap, 2.75rem);
    }

    .fire-ops-apply-btn {
        width: 100%;
        min-height: var(--pk-tap, 2.75rem);
    }
}

/* Station journal: beat the dark theme's `.card.border-0.shadow-sm { border: ... !important }` (0,5,0). */
.card.border-0.shadow-sm.fire-ops-journal-card.fire-ops-journal-card {
    border-left: 5px solid var(--bs-danger) !important;
}

/* --- lane A: admin.css --- */
/* -- Fire admin / profile / reports phone pass (lane A-fire ADMIN, 2026-11) -- */

/* Shared helpers */
.fire-adm-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.fire-adm-row-btn {
    min-height: var(--pk-tap, 2.75rem);
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

/* My profile */
.fire-adm-profile__email {
    overflow-wrap: anywhere;
}

.fire-adm-profile__grid > [class*="col-"] {
    min-width: 0;
}

@media (max-width: 640px) {
    .fire-adm-profile__leave-row {
        flex-wrap: wrap;
    }

    .fire-adm-profile__leave-row > .pk-row__trail {
        flex: 1 1 100%;
        justify-content: flex-end;
    }
}

/* Reports and admin tables */
.fire-adm-progress {
    height: 6px;
}

.fire-adm-stat-small {
    font-size: 0.9rem;
}

.fire-adm-search {
    max-width: 320px;
}

.fire-adm-report-links,
.fire-adm-history__sections {
    margin-top: 0;
}

@media (min-width: 641px) {
    .fire-adm-hours-cell {
        min-width: 9rem;
    }
}

@media (min-width: 768px) {
    .fire-adm-take {
        max-width: 6rem;
    }
}

@media (max-width: 640px) {
    .fire-adm-search {
        max-width: none;
        flex-basis: 100%;
    }

    .fire-adm-table-wrap {
        padding: 0.5rem;
    }

    .pk-table-cards td.fire-adm-empty-cell {
        justify-content: center;
        text-align: center;
    }

    .pk-table-cards tr:has(> td.fire-adm-group-cell) {
        padding: 0.25rem 0.1rem;
        border: 0;
        background: transparent;
    }

    .pk-table-cards td.fire-adm-group-cell {
        justify-content: flex-start;
        text-align: left;
        background: transparent;
    }

    .pk-table-cards td.fire-adm-cell-block {
        display: block;
    }

    .pk-table-cards td.fire-adm-cell-block .badge {
        margin-top: 0.25rem;
    }

    .pk-table-cards td > .fire-adm-cell-value {
        min-width: 0;
    }

    .pk-table-cards td.fire-adm-cell-select > .form-select,
    .pk-table-cards td > .fire-adm-hours {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 13rem;
        text-align: left;
    }

    .pk-table-cards td.fire-adm-cell-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.5rem;
    }

    .pk-table-cards td.fire-adm-cell-actions:empty {
        display: none;
    }

    .pk-table-cards tr:has(> td.fire-adm-cell-first) {
        display: flex;
        flex-direction: column;
    }

    .pk-table-cards td.fire-adm-cell-first {
        order: -1;
    }

    .fire-adm-icon-btn {
        min-width: var(--pk-tap, 2.75rem);
        min-height: var(--pk-tap, 2.75rem);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- lane A: me.css --- */
/* -- Shift coverage, notifications, acknowledgements, preferences, station board -- */

/* The page wrapper sits under the header; the old .mb-3 rhythm is the pk gap now. */
.fire-me-page {
    margin-bottom: 1rem;
}

.fire-me-page > .dash-v2-card,
.fire-me-page > .fire-ack-required,
.fire-me-page > div > .dash-v2-card {
    margin-bottom: 0;
}

.fire-me-page .fire-ack-required {
    margin-bottom: 0;
}

/* Filter folds: the row is the fold body, give it the fold padding without breaking gutters. */
.fire-me-filters > .row {
    margin-left: 0;
    margin-right: 0;
    padding: 0 0.6rem 0.85rem;
}

.fire-me-filters > div:not(.row) > div {
    padding: 0;
}

.fire-me-steps__body .metro-stepper,
.fire-me-steps__body nav {
    max-width: 100%;
    overflow-x: auto;
}

/* Real 44 px touch targets (replaces inline min-height/min-width styles). */
.fire-me-tap {
    min-height: var(--pk-tap, 2.75rem);
    min-width: var(--pk-tap, 2.75rem);
}

/* Coverage request cards: decision line + bigger actions. */
.fire-me-decision {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.fire-me-decision > span {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.4rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fire-me-row-actions > .btn {
    min-height: var(--pk-tap, 2.75rem);
    flex: 1 1 auto;
}

.fire-me-coverage-card > .card-header {
    background: transparent;
}

/* Notifications inbox */
.fire-me-ack-expand {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    background: var(--bs-tertiary-bg);
}

.fire-me-ack-expand .pk-actions {
    margin-top: 0;
}

.fire-me-inbox .fire-notif-item > .flex-grow-1 {
    min-width: 0;
}

.fire-me-inbox .fire-notif-item .btn-link.text-start {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Acknowledgements list */
.fire-me-ack-row--highlight {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.fire-me-ack-row > .d-flex > .flex-grow-1 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fire-me-ack-for {
    min-width: 220px;
}

/* Notification preferences matrix */
.fire-me-pref-card {
    max-width: 720px;
}

.fire-me-pref-desc {
    font-size: 0.75rem;
}

.fire-me-pref-matrix td.text-center .form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
}

@media (max-width: 640px) {
    .fire-me-block-btn {
        width: 100%;
    }

    .fire-me-ack-viewall {
        width: 100%;
    }

    .fire-me-ack-for,
    .fire-me-ack-waiting {
        flex: 1 1 100%;
        min-width: 0;
        align-items: stretch !important;
    }

    .fire-me-ack-for__actions > .btn,
    .fire-me-ack-waiting > .btn {
        flex: 1 1 0;
    }

    .fire-me-ack-expand .pk-actions > .btn {
        flex: 1 1 0;
    }

    .fire-me-notif-when {
        white-space: normal !important;
        text-align: start !important;
    }

    /* Type | Email | SMS | Push stays a matrix: tight side columns, the label column wraps. */
    .fire-me-pref-wrap {
        overflow-x: visible;
    }

    .fire-me-pref-matrix {
        table-layout: fixed;
        width: 100%;
    }

    .fire-me-pref-matrix th:not(:first-child),
    .fire-me-pref-matrix td.text-center {
        width: 3.4rem;
        padding-left: 0.15rem;
        padding-right: 0.15rem;
        text-align: center;
    }

    .fire-me-pref-matrix td.text-center {
        height: var(--pk-tap, 2.75rem);
    }

    .fire-me-pref-matrix th,
    .fire-me-pref-matrix td:first-child {
        overflow-wrap: anywhere;
    }

    .fire-me-pref-save {
        width: 100%;
        min-height: 3rem;
    }

    /* Station board: wall-display type size is too big for a phone. */
    .fire-me-board {
        font-size: 1rem !important;
    }

    .fire-me-board h1.fs-2 {
        font-size: 1.4rem !important;
    }
}

@media (orientation: landscape) and (max-height: 540px) {
    .fire-me-board {
        font-size: 1rem !important;
    }
}

/* ══ Fire station wow layer (Pearl mockup) ══════════════════════════════════
   Firehouse scene behind Fire heroes, patch glow, white "Next shift" card,
   station tiles, soft status pills, red section ticks, segmented tabs.
   Fire scopes only. Every paper surface is re-toned for the dark theme at the
   end of this block; all motion stops under prefers-reduced-motion and
   .metro-reduced-motion. Component: Components/Fire/FireStationScene.razor. */

.dash-v2--fire .fire-station-hero,
.fire-page-header.dash-v2-hero,
.mobile-shell .fire-page-header--phone {
    isolation: isolate;
    overflow: hidden;
}

.dash-v2--fire .fire-station-hero > :not(.fire-station-scene):not(.fire-station-swoosh):not(.fire-station-photo),
.fire-page-header.dash-v2-hero > :not(.fire-station-scene):not(.fire-station-swoosh),
.mobile-shell .fire-page-header--phone > :not(.fire-station-scene):not(.fire-station-swoosh) {
    position: relative;
    z-index: 1;
}

.dash-v2--fire .fire-station-hero > .fire-station-swoosh,
.fire-page-header > .fire-station-swoosh {
    z-index: 2;
}

/* Scene: dusk firehouse silhouette anchored bottom-right of the hero */
.fire-station-scene {
    bottom: .7rem;
    height: min(10.5rem, 60%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40%);
    opacity: .9;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: min(540px, 70%);
    z-index: 0;
}

.fire-station-scene__svg {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.fire-station-scene__skyline { fill: rgba(255, 255, 255, .05); }
.fire-station-scene__house { fill: color-mix(in srgb, #000 45%, var(--fire-station-navy, #001f3f)); }
.fire-station-scene__sign { fill: color-mix(in srgb, var(--fire-station-red, #c00000) 80%, #000); }
.fire-station-scene__bays path { fill: url(#fss-bay); opacity: .6; }
.fire-station-scene__panes path { fill: none; stroke: color-mix(in srgb, #000 45%, var(--fire-station-navy, #001f3f)); stroke-width: 2; }
.fire-station-scene__tower-windows rect { fill: #ffd27a; opacity: .55; }
.fire-station-scene__engine { fill: var(--fire-station-red-deep, #9a0000); }
.fire-station-scene__stripe { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.fire-station-scene__windshield { fill: rgba(190, 220, 255, .38); }
.fire-station-scene__wheels circle { fill: #050b14; stroke: rgba(255, 255, 255, .28); stroke-width: 2; }
.fire-station-scene__light--a { fill: #ff3b30; }
.fire-station-scene__light--b { fill: #fff; }
.fire-station-scene__ground { fill: rgba(255, 255, 255, .12); }
.fire-station-scene__embers circle { fill: #ffb347; opacity: 0; transform-box: fill-box; }
.fire-station-scene__glow { transform-box: fill-box; transform-origin: center; }

.fire-station-scene__light--a { animation: fire-station-light-a 1.1s steps(1, end) infinite; }
.fire-station-scene__light--b { animation: fire-station-light-b 1.1s steps(1, end) infinite; }
.fire-station-scene__glow { animation: fire-station-glow 2.2s ease-in-out infinite; }
.fire-station-scene__embers circle { animation: fire-station-ember 6s linear infinite; }
.fire-station-scene__embers circle:nth-child(2) { animation-delay: 1.6s; }
.fire-station-scene__embers circle:nth-child(3) { animation-delay: 3.1s; }
.fire-station-scene__embers circle:nth-child(4) { animation-delay: 4.4s; }
.fire-station-scene__tower-windows rect:first-child { animation: fire-station-window 7s ease-in-out infinite; }

@keyframes fire-station-light-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }
@keyframes fire-station-light-b { 0%, 49% { opacity: .2; } 50%, 100% { opacity: 1; } }
@keyframes fire-station-glow { 0%, 100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes fire-station-ember {
    0% { opacity: 0; transform: translate(0, 0); }
    12% { opacity: .9; }
    80% { opacity: .35; }
    100% { opacity: 0; transform: translate(14px, -46px); }
}
@keyframes fire-station-window { 0%, 70%, 100% { opacity: .55; } 78%, 92% { opacity: .15; } }

/* Phone header bar: smaller, quieter scene tucked right */
.fire-station-scene.fire-station-scene--bar {
    bottom: .75rem;
    height: 3.4rem;
    opacity: .5;
    width: min(210px, 50%);
}

.fire-station-scene--bar .fire-station-scene__embers,
.fire-station-scene--bar .fire-station-scene__skyline { display: none; }

/* Desktop compact page header: keep the scene behind the right half only */
.fire-page-header.dash-v2-hero .fire-station-scene:not(.fire-station-scene--bar) {
    height: min(7rem, 80%);
    opacity: .7;
    width: min(380px, 45%);
}

/* Phone: the next-shift card covers the bottom, so the scene rides up behind
   the greeting on the right, fainter so white text stays readable. */
@media (max-width: 575.98px) {
    .dash-v2--fire .fire-station-hero > .fire-station-scene {
        bottom: auto;
        height: 7.5rem;
        opacity: .42;
        top: 6.25rem;
        width: 78%;
    }
}

/* Patch: gold halo + one-time entrance and shine */
.fire-station-emblem--photo {
    position: relative;
}

.dash-v2--fire .fire-station-hero .fire-station-emblem--photo,
.fire-page-header .fire-station-emblem--photo {
    filter:
        drop-shadow(0 0 1px rgba(255, 210, 122, .7))
        drop-shadow(0 0 14px rgba(255, 196, 92, .3))
        drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}

.dash-v2--fire .fire-station-hero .fire-station-emblem--lg {
    animation: fire-station-patch-in 700ms cubic-bezier(.2, .9, .3, 1.2) both;
    position: relative;
}

.dash-v2--fire .fire-station-hero .fire-station-emblem--photo.fire-station-emblem--lg::after {
    animation: fire-station-patch-shine 1.6s ease-out 600ms 1 both;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%);
    background-size: 260% 100%;
    border-radius: 45%;
    content: "";
    inset: 8% 12%;
    mix-blend-mode: overlay;
    pointer-events: none;
    position: absolute;
}

@keyframes fire-station-patch-in { from { opacity: 0; transform: scale(.82) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes fire-station-patch-shine { from { background-position: 120% 0; opacity: 1; } to { background-position: -40% 0; opacity: 0; } }

/* Shift mark: the live dot breathes */
.dash-v2--fire .fire-station-hero .dash-v2-shift-mark span {
    animation: fire-station-dot 2.4s ease-in-out infinite;
}

@keyframes fire-station-dot {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dash-hero-accent, #f97066) 24%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dash-hero-accent, #f97066) 6%, transparent); }
}

.dash-v2--fire .fire-station-hero h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Next shift: white card with a red calendar square, as in the mockup */
.dash-v2--fire .dash-v2-next.fire-next-shift {
    align-items: center;
    background: var(--fire-station-paper, #fff);
    border: 0;
    border-radius: .95rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    color: var(--fire-station-navy, #001f3f);
    gap: .05rem .85rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: 34rem;
    padding: .75rem .9rem;
}

.dash-v2--fire .dash-v2-next.fire-next-shift > * { grid-column: 2; }

.dash-v2--fire .dash-v2-next.fire-next-shift > .fire-next-shift__icon {
    align-items: center;
    background: linear-gradient(145deg, var(--fire-station-red, #c00000), var(--fire-station-red-deep, #9a0000));
    border-radius: .75rem;
    box-shadow: 0 4px 10px rgba(192, 0, 0, .3);
    color: #fff;
    display: inline-flex;
    font-size: 1.25rem;
    grid-column: 1;
    grid-row: 1 / span 4;
    height: 2.85rem;
    justify-content: center;
    width: 2.85rem;
}

.dash-v2--fire .dash-v2-next.fire-next-shift .fire-next-shift__icon i {
    color: inherit;
    grid-column: auto;
    grid-row: auto;
}

.dash-v2--fire .dash-v2-next.fire-next-shift > i.bi-chevron-right {
    color: var(--fire-station-red, #c00000);
    font-size: 1.05rem;
    grid-column: 3;
    grid-row: 1 / span 4;
    transition: transform 150ms ease;
}

.dash-v2--fire .dash-v2-next.fire-next-shift .dash-v2-next__label { color: var(--fire-station-red, #c00000); }
.dash-v2--fire .dash-v2-next.fire-next-shift strong { color: var(--fire-station-navy, #001f3f); font-size: .95rem; }
.dash-v2--fire .dash-v2-next.fire-next-shift > span:not(.dash-v2-next__label):not(.fire-next-shift__icon) { color: var(--metro-text-muted, #667085); }

@media (hover: hover) {
    .dash-v2--fire .dash-v2-next.fire-next-shift:hover { background: var(--fire-station-paper, #fff); box-shadow: 0 14px 32px rgba(0, 0, 0, .34); }
    .dash-v2--fire .dash-v2-next.fire-next-shift:hover > i.bi-chevron-right { transform: translateX(3px); }
}

/* Station tiles: icon in a navy disc, red underline on hover, staggered rise */
.dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)) {
    font-weight: 650;
    gap: .45rem;
    overflow: hidden;
    position: relative;
    transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)) > i {
    align-items: center;
    background: color-mix(in srgb, var(--fire-station-navy, #001f3f) 8%, transparent);
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.6rem;
    justify-content: center;
    transition: background-color 160ms ease, color 160ms ease;
    width: 2.6rem;
}

.dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove))::after {
    background: var(--fire-station-red, #c00000);
    border-radius: 3px 3px 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 28%;
    opacity: 0;
    position: absolute;
    right: 28%;
    transform: scaleX(.3);
    transition: opacity 160ms ease, transform 200ms ease;
}

.dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):active {
    transform: scale(.97);
}

.dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):is(:active, :focus-visible) > i {
    background: var(--fire-station-navy, #001f3f);
    color: #fff;
}

@media (hover: hover) {
    .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):hover {
        border-color: color-mix(in srgb, var(--fire-station-red, #c00000) 35%, transparent);
        box-shadow: 0 2px 4px rgba(0, 31, 63, .06), 0 12px 24px rgba(0, 31, 63, .1);
        transform: translateY(-2px);
    }

    .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):hover > i {
        background: var(--fire-station-navy, #001f3f);
        color: #fff;
    }

    .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):hover::after {
        opacity: 1;
        transform: none;
    }
}

.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile) {
    animation: fire-station-tile-in 420ms cubic-bezier(.2, .8, .3, 1) both;
}

.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(2) { animation-delay: 40ms; }
.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(3) { animation-delay: 80ms; }
.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(4) { animation-delay: 120ms; }
.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(5) { animation-delay: 160ms; }
.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(6) { animation-delay: 200ms; }
.dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile):nth-child(n+7) { animation-delay: 240ms; }

@keyframes fire-station-tile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Section headings: red tick like the mockup */
.dash-v2--fire .dash-v2-card__head h2,
:is(.fire-ops-page, .fire-to-page, .fire-me-page) .pk-section__title {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.dash-v2--fire .dash-v2-card__head h2::before,
:is(.fire-ops-page, .fire-to-page, .fire-me-page) .pk-section__title::before {
    background: var(--fire-station-navy, #001f3f);
    border-radius: 2px;
    content: "";
    flex: 0 0 auto;
    height: 1em;
    width: 4px;
}

.dash-v2--fire .fire-v2-attention .dash-v2-card__head h2::before { background: currentColor; }

/* Segmented tabs: navy active pill (same as greeting) */
:is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-my-schedule) .metro-segmented__item.is-active {
    background: var(--fire-station-navy, #001f3f);
    border-color: var(--fire-station-navy, #001f3f);
    box-shadow: 0 4px 10px rgba(0, 31, 63, .28);
    color: #fff;
}

/* Soft status pills (Approved green / Pending blue) inside Fire scopes */
:is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge.rounded-pill {
    border: 1px solid transparent;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .38em .75em;
}

:is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge.badge-soft-success { background: #e7f6ec; border-color: #b7e4c7; color: #146c2e; }
:is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge:is(.badge-soft-info, .badge-soft-warning) { background: #e8f1fc; border-color: #bcd5f5; color: #1d4f91; }
:is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge.badge-soft-danger { background: #fdecec; border-color: #f5c2c2; color: #a40f0f; }

/* Date badge: red month strip over a white day, mockup style */
.fire-station-date-badge {
    border: 1px solid color-mix(in srgb, var(--fire-station-red, #c00000) 75%, #000);
    box-shadow: 0 4px 10px rgba(192, 0, 0, .2);
}

.fire-station-date-badge__month {
    background: transparent;
}

.fire-station-date-badge__day {
    background: var(--fire-station-paper, #fff);
    color: var(--fire-station-navy, #001f3f);
    width: 100%;
}

.fire-ot2-item--station :is(.btn-primary, .btn-success) {
    background: var(--fire-station-navy, #001f3f);
    border-color: var(--fire-station-navy, #001f3f);
    color: #fff;
}

/* Training hero: same navy as the greeting; state stripe stays navy too */
.fire-training-hero.pk-hero {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .12), transparent 38%),
        linear-gradient(145deg, var(--fire-station-navy, #001f3f), var(--fire-station-navy-mid, #0a2f55));
    border: 0;
    border-left: 5px solid var(--fire-station-navy, #001f3f);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.fire-training-hero.pk-hero--wait,
.fire-training-hero.pk-hero--info,
.fire-training-hero.pk-hero--ok { border-left-color: var(--fire-station-navy, #001f3f); }

.fire-training-hero.pk-hero::after {
    color: rgba(255, 255, 255, .09);
    content: "\f6fd";
    font-family: bootstrap-icons;
    font-size: 6.5rem;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: -.3rem;
    top: -.5rem;
}

.fire-training-hero.pk-hero > * { position: relative; }
.fire-training-hero.pk-hero :is(.pk-hero__eyebrow, .pk-hero__headline, .pk-hero__headline > i) { color: #fff; }
.fire-training-hero.pk-hero .pk-hero__sub { color: rgba(255, 255, 255, .82); font-style: italic; }
.fire-training-hero.pk-hero .pk-pill { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: #fff; }

/* Announcements hero: megaphone watermark + glass icon tile */
.fire-notif-hero {
    box-shadow: 0 10px 24px rgba(154, 0, 0, .25);
    overflow: hidden;
    position: relative;
}

.fire-notif-hero::after {
    color: rgba(255, 255, 255, .12);
    content: "\f483";
    font-family: bootstrap-icons;
    font-size: 5.5rem;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: -.3rem;
    top: -.5rem;
    transform: rotate(-12deg);
}

.fire-notif-hero > * { position: relative; }

.fire-notif-hero > i {
    align-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: .8rem;
    display: inline-flex;
    flex: 0 0 auto;
    height: 2.9rem;
    justify-content: center;
    width: 2.9rem;
}

/* Time-off hero: umbrella watermark on navy */
.fire-to-hero--station {
    box-shadow: 0 10px 24px rgba(0, 31, 63, .28);
    overflow: hidden;
    position: relative;
}

.fire-to-hero--station::after {
    color: rgba(255, 255, 255, .1);
    content: "\f5fc";
    font-family: bootstrap-icons;
    font-size: 5.5rem;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: -.4rem;
    top: -.6rem;
}

.fire-to-hero--station > * { position: relative; }

/* Open shifts / OT / administration status heroes: same greeting navy */
:is(.fire-ops-page, .fire-to-page, .fire-me-page, .fire-ot2-panel, .fire-admin-hub) .pk-hero:not(.fire-training-hero):not(.fire-to-hero--station):not(.fire-notif-hero) {
    background:
        radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .1), transparent 38%),
        linear-gradient(145deg, var(--fire-station-navy, #001f3f), var(--fire-station-navy-mid, #0a2f55));
    border: 0;
    border-left: 5px solid var(--fire-station-navy, #001f3f);
    color: #fff;
}

:is(.fire-ops-page, .fire-to-page, .fire-me-page, .fire-ot2-panel, .fire-admin-hub) .pk-hero:not(.fire-training-hero):not(.fire-to-hero--station):not(.fire-notif-hero) :is(.pk-hero__eyebrow, .pk-hero__headline, .pk-hero__headline > i, .pk-hero__sub, strong, b) {
    color: #fff;
}

:is(.fire-ops-page, .fire-to-page, .fire-me-page, .fire-ot2-panel, .fire-admin-hub) .pk-hero:not(.fire-training-hero):not(.fire-to-hero--station):not(.fire-notif-hero) :is(.pk-hero__sub, .text-muted, .small) {
    color: rgba(255, 255, 255, .82) !important;
}

/* Schedule: working days get a warm wash, today a navy ring */
.fire-my-schedule .fire-my-day--working {
    background: linear-gradient(90deg, color-mix(in srgb, var(--fire-station-red, #c00000) 6%, var(--bs-body-bg)), var(--bs-body-bg) 60%);
}

.fire-my-schedule .fire-my-day--today {
    box-shadow: 0 0 0 2px var(--fire-station-navy, #001f3f), 0 8px 20px rgba(0, 31, 63, .12);
}

/* ── Dark theme: re-tone every paper surface ─────────────────────────────── */
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) :is(.dash-v2--fire, .fire-page-header, .fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .fire-vbid-page, .fire-my-schedule) {
    --fire-station-paper: var(--metro-surface-raised, #141418);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)) {
    border-color: var(--metro-border, #26262e);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    color: var(--metro-text, #e6edf6);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile) i {
    color: #9cc3ff;
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)) > i {
    background: rgba(156, 195, 255, .12);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire :is(.dash-v2-shortcut-tile > a, .dash-v2-shortcut-tile > button:not(.dash-v2-shortcut-remove), .fire-v2-shortcut-tile > a, .fire-v2-shortcut-tile > button:not(.fire-v2-shortcut-remove)):is(:hover, :active, :focus-visible) > i {
    background: #2b5797;
    color: #fff;
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-next.fire-next-shift {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .06);
    color: var(--metro-text, #e6edf6);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-next.fire-next-shift strong,
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .fire-station-date-badge__day {
    color: var(--metro-text, #e6edf6);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-next.fire-next-shift:hover {
    background: var(--metro-surface-muted, #1a1a1f);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-next.fire-next-shift .dash-v2-next__label,
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-next.fire-next-shift > i.bi-chevron-right {
    color: var(--fire-station-red-soft, #f97066);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) :is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge.badge-soft-success { background: rgba(50, 180, 100, .16); border-color: rgba(50, 180, 100, .35); color: #7ee2a2; }
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) :is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge:is(.badge-soft-info, .badge-soft-warning) { background: rgba(90, 150, 240, .16); border-color: rgba(90, 150, 240, .35); color: #a9c8ff; }
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) :is(.fire-to-page, .fire-ops-page, .fire-me-page, .fire-ot2-panel, .dash-v2--fire) .badge.badge-soft-danger { background: rgba(240, 80, 80, .16); border-color: rgba(240, 80, 80, .35); color: #ffaaaa; }

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .fire-to-hero--station::after { color: rgba(255, 255, 255, .08); }
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .fire-my-schedule .fire-my-day--today { box-shadow: 0 0 0 2px #9cc3ff, 0 8px 20px rgba(0, 0, 0, .35); }
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .fire-ot2-item--station :is(.btn-primary, .btn-success) { background: #2b5797; border-color: #2b5797; }
:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-card__head h2::before { background: #9cc3ff; }

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-shortcut-section.dash-v2-card {
    border-color: color-mix(in srgb, var(--fire-station-red, #c00000) 75%, #fff);
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-shortcut-section__head {
    background: color-mix(in srgb, var(--fire-station-navy, #001f3f) 78%, #0a1628);
    border-bottom-color: color-mix(in srgb, var(--fire-station-navy, #001f3f) 55%, #000);
    color: #e8f0ff;
}

:root:is([data-theme="dark"], [data-theme-level="1"], [data-theme-level="2"], [data-theme-level="3"]) .dash-v2--fire .dash-v2-shortcut-section__head h3 {
    color: #e8f0ff;
}

/* ── Motion off ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fire-station-scene *,
    .dash-v2--fire .fire-station-hero .fire-station-emblem--lg,
    .dash-v2--fire .fire-station-hero .fire-station-emblem--lg::after,
    .dash-v2--fire .fire-station-hero .dash-v2-shift-mark span,
    .dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile) {
        animation: none !important;
    }

    .fire-station-scene__embers { display: none; }
    .dash-v2--fire .fire-station-hero .fire-station-emblem--lg::after { display: none; }
}

.metro-reduced-motion .fire-station-scene *,
.metro-reduced-motion .dash-v2--fire .fire-station-hero .fire-station-emblem--lg,
.metro-reduced-motion .dash-v2--fire .fire-station-hero .fire-station-emblem--lg::after,
.metro-reduced-motion .dash-v2--fire .fire-station-hero .dash-v2-shift-mark span,
.metro-reduced-motion .dash-v2--fire :is(.dash-v2-shortcut-tile, .fire-v2-shortcut-tile) {
    animation: none !important;
}

.metro-reduced-motion .fire-station-scene__embers,
.metro-reduced-motion .dash-v2--fire .fire-station-hero .fire-station-emblem--lg::after { display: none; }

/* ══ Fire banner photo ═══════════════════════════════════════════════════════
   The department's photo behind the Fire dashboard hero (Fire settings > Home
   banner; Pearl's engine photo until one is uploaded). Component:
   Components/Fire/FireStationBanner.razor. object-fit: cover crops any shape
   to the hero around the admin's focal point (--fire-photo-pos); a navy wash
   keeps white text readable. Desktop: right ~62%, fading in from the left.
   Phone: full width across the top, fading down into the hero. */

.dash-v2--fire .fire-station-hero > .fire-station-photo,
.fire-station-photo {
    background: var(--fire-station-navy, #001f3f);
    bottom: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 18%, #000 46%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 18%, #000 46%);
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: min(62%, 980px);
    z-index: 0;
}

.fire-station-photo__img {
    animation: fire-station-photo-in 1.4s cubic-bezier(.2, .7, .2, 1) both;
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: var(--fire-photo-pos, 50% 50%);
    width: 100%;
}

/* Navy wash: darker at the bottom (stat boxes, next-shift card) and the left edge (headline). */
.fire-station-photo::after {
    background:
        linear-gradient(180deg, rgba(0, 18, 40, .18) 0%, rgba(0, 18, 40, .32) 55%, rgba(0, 18, 40, .7) 100%),
        linear-gradient(90deg, rgba(0, 18, 40, .55) 0%, rgba(0, 18, 40, 0) 45%);
    content: "";
    inset: 0;
    position: absolute;
}

@keyframes fire-station-photo-in {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: none; }
}

/* Stat boxes sit over the art: frosted glass so the numbers never fight the picture. */
.dash-v2--fire .fire-station-hero .dash-v2-hero__numbers > div {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    background: rgba(4, 16, 36, .55);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.dash-v2--fire .fire-station-hero .dash-v2-hero__numbers > div.is-alert {
    background: rgba(150, 18, 18, .62);
    border-color: rgba(255, 140, 140, .5);
}

.dash-v2--fire .fire-station-hero .dash-v2-hero__numbers span {
    color: rgba(255, 255, 255, .82);
}

.dash-v2--fire .fire-station-hero:has(> .fire-station-photo) :is(h1, .dash-v2-hero__intro p, .dash-v2-eyebrow) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 14px rgba(0, 0, 0, .35);
}

.dash-v2--fire .fire-station-hero:has(> .fire-station-photo) .dash-v2-refresh {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(4, 16, 36, .45);
}

/* Tablet: a little wider so the subject stays in frame. */
@media (max-width: 991.98px) {
    .dash-v2--fire .fire-station-hero > .fire-station-photo {
        width: 72%;
    }
}

/* Phone: photo across the top behind the greeting, fading down into the navy. */
@media (max-width: 575.98px) {
    .dash-v2--fire .fire-station-hero > .fire-station-photo {
        bottom: auto;
        height: min(17rem, 62%);
        -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
        width: 100%;
    }

    .dash-v2--fire .fire-station-hero > .fire-station-photo::after {
        background:
            linear-gradient(180deg, rgba(0, 18, 40, .35) 0%, rgba(0, 18, 40, .55) 60%, rgba(0, 18, 40, .8) 100%),
            linear-gradient(90deg, rgba(0, 18, 40, .45) 0%, rgba(0, 18, 40, 0) 70%);
    }
}

/* Fire settings preview frames (desktop + phone shapes). */
.fire-banner-preview {
    background: linear-gradient(135deg, var(--fire-station-navy, #001f3f), #0b2d57);
    border-radius: .9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    color: #fff;
    cursor: crosshair;
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.fire-banner-preview--desktop { aspect-ratio: 16 / 5; }
.fire-banner-preview--phone { aspect-ratio: 9 / 10; max-width: 15rem; }

.fire-banner-preview .fire-station-photo,
.fire-banner-preview .fire-station-scene { z-index: 0; }

.fire-banner-preview--phone .fire-station-photo {
    bottom: auto;
    height: 62%;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 100%);
    width: 100%;
}

.fire-banner-preview__copy {
    left: 0;
    padding: 1rem 1.1rem;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
}

.fire-banner-preview__copy small {
    color: rgba(255, 255, 255, .75);
    display: block;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fire-banner-preview__copy strong {
    display: block;
    font-size: 1.15rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.fire-banner-preview__dot {
    background: #fff;
    border: 3px solid var(--fire-station-red, #c00000);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .4);
    height: 1.1rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 1.1rem;
    z-index: 2;
}

.fire-banner-settings__previews {
    align-items: flex-start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 15rem;
}

@media (max-width: 767.98px) {
    .fire-banner-settings__previews { grid-template-columns: minmax(0, 1fr); }
    .fire-banner-preview--phone { max-width: 12rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fire-station-photo__img { animation: none !important; }
}

.metro-reduced-motion .fire-station-photo__img { animation: none !important; }