/* ==========================================================================
   PubManager — "The Curated Hearth" Global Styles
   ========================================================================== */

/* ---------- Base ---------- */

html, body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--hearth-primary-container);
    text-decoration: none;
    transition: color var(--hearth-transition);
}

a:hover, .btn-link:hover {
    color: var(--hearth-primary);
}

/* ---------- No-Line Rule — Strip MudBlazor default borders ---------- */

.mud-appbar {
    border-bottom: none !important;
    box-shadow: var(--hearth-shadow-ambient) !important;
}

.mud-drawer {
    border-right: none !important;
}


/* ---------- Tonal Surface Utilities ---------- */

.surface-lowest {
    background: var(--hearth-surface-container-lowest);
}

.surface-low {
    background: var(--hearth-surface-container-low);
}

.surface-base {
    background: var(--hearth-surface-container);
}

.surface-high {
    background: var(--hearth-surface-container-high);
}

.surface-highest {
    background: var(--hearth-surface-container-highest);
}

/* ---------- Gradient CTA Button ---------- */

/* grid.html: solid bg-primary, shadow-sm, hover:bg-opacity-90 */
.btn-gradient-primary {
    background: var(--hearth-primary) !important;
    color: var(--hearth-on-primary) !important;
    border-radius: var(--hearth-radius-lg) !important;
    border: none !important;
    box-shadow: var(--hearth-shadow-sm);
    transition: all var(--hearth-transition);
}

.btn-gradient-primary:hover {
    box-shadow: var(--hearth-shadow-ambient);
    opacity: 0.9;
}

/* ---------- Shift Cell Fill — card fills entire cell (matching prototype) ----------
   A worked shift is a white card with a coloured border and coloured text; absence and
   read-only states carry their own outline treatment below, so "someone is on" still reads
   via the border hue rather than a solid fill. */

/*.shift-cell-fill {*/
/*    border-radius: var(--hearth-radius-lg);*/
/*    padding: var(--hearth-space-2xs) var(--hearth-space-2xs);*/
/*    transition: all var(--hearth-transition);*/
/*    display: grid;*/
/*    grid: auto-flow dense / 2fr 1fr;*/
/*    flex-direction: column;*/
/*    justify-content: start;*/
/*    align-content: center;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    min-height: 0;*/
/*    overflow: hidden;*/
/*    cursor: pointer;*/
/*}*/
.shift-cell-fill {
    border-radius: var(--hearth-radius-lg);
    padding: var(--hearth-space-2xs);
    padding-left: var(--hearth-space-sm);
    transition: all var(--hearth-transition);
    gap: var(--hearth-space-3xs) var(--hearth-space-2xs);
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
}
.shift-cell-fill.shift-hours {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    background-color: var(--hearth-surface-bright) !important;
}
.shift-cell-fill.shift-card-covered,
.shift-cell-fill.shift-card-away {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.shift-cell-fill.no-shift {
    display: flex;
    justify-content: start;
    align-items: center;
}

.shift-cell-fill:hover {
    filter: brightness(1.08);
    box-shadow: var(--hearth-shadow-ambient);
}

/* Shift cards — white fill, coloured border and text carry the hue instead of a solid block */
.shift-cell-fill.shift-card-morning {
    color: var(--hearth-shift-morning);
    border: var(--hearth-border-thin) solid var(--hearth-shift-morning);
}

.shift-cell-fill.shift-card-afternoon {
    color: var(--hearth-shift-afternoon);
    border: var(--hearth-border-thin) solid var(--hearth-shift-afternoon);
}

.shift-cell-fill.shift-card-evening {
    color: var(--hearth-shift-evening);
    border: var(--hearth-border-thin) solid var(--hearth-shift-evening);
}

/* Absence tier — deliberately one salience notch below worked shifts: soft tint or faint
   outline, never the bright fill + strong border a shift card gets, so at a glance the board
   reads shifts first, absences second, empties not at all. */

/* Off state — muted outline and text, no fill */
.shift-cell-fill.shift-card-off {
    background: transparent;
    color: var(--hearth-shift-off-text);
    border: var(--hearth-border-thin) solid rgba(var(--hearth-outline-rgb), 0.55);
}

/* Sick/holiday keep their tint plus a border in their own hue, diluted — the pastel fills are
   near-zero contrast against the grid background, so the border is what makes the card a card;
   the dilution is what keeps it a notch below a worked shift's full-strength edge. */
.shift-cell-fill.shift-card-sick {
    background: var(--hearth-shift-sick-bg);
    color: var(--hearth-shift-sick-fg);
    border: var(--hearth-border-thin) solid color-mix(in srgb, var(--hearth-shift-sick-fg) 45%, transparent);
}

.shift-cell-fill.shift-card-holiday {
    background: var(--hearth-shift-leave-bg);
    color: var(--hearth-shift-leave-fg);
    border: var(--hearth-border-thin) solid color-mix(in srgb, var(--hearth-shift-leave-fg) 45%, transparent);
}

/* Booked at another pub — dashed and hatched to read as "not this pub's to edit" */
.shift-cell-fill.shift-card-away {
    background: transparent;
    color: var(--hearth-tertiary-container);
    border: var(--hearth-border-thin) dashed var(--hearth-outline-variant);
    cursor: default;
}

.shift-cell-fill.shift-card-away.diagonal-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(var(--mud-palette-tertiary-rgb), 0.08) 10px,
        rgba(var(--mud-palette-tertiary-rgb), 0.08) 20px
    );
}

.shift-cell-fill.shift-card-away:hover {
    filter: none;
    box-shadow: none;
}

/* Somebody else is working this shift. Same muted, hatched family as an away shift — neither counts
   as this person's hours — but struck through, because this one was theirs and no longer is. */
.shift-cell-fill.shift-card-covered {
    background: transparent;
    color: var(--hearth-on-surface-variant);
    border: var(--hearth-border-thin) dashed var(--hearth-outline-variant);
    cursor: default;
}

.shift-cell-fill.shift-card-covered.diagonal-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(var(--mud-palette-tertiary-rgb), 0.08) 10px,
        rgba(var(--mud-palette-tertiary-rgb), 0.08) 20px
    );
}

.shift-cell-fill.shift-card-covered .shift-time {
    text-decoration: line-through;
}

.shift-cell-fill.shift-card-covered:hover {
    filter: none;
    box-shadow: none;
}

.shift-cell-fill .shift-label {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: var(--hearth-space-2xs);
    opacity: 0.80;
}

/* A single card has room to show its details as a compact stack. Multi-card cells override this
   below so every card can fit its share of the fixed cell height on one line. */
.shift-cell-fill .shift-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
}

.shift-cell-fill .shift-time {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Cover · The Bear" — shared by the grid cell and the mobile card, so it sets layout only and
   inherits its type from whichever label it is worn as. A day column is narrow and pub names are
   not, so the name is the part that gives: "Cover" alone still says what the shift is, a truncated
   pub name on its own says nothing. */
.shift-label--cover {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.shift-label--cover .shift-label__lead {
    flex: none;
}

.shift-label--cover .shift-label__lead::after {
    content: "·";
    margin: 0 var(--hearth-space-3xs);
}

.shift-label--cover .shift-label__site {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Duration pill replacing the old Morning/Afternoon/Evening text label — a quiet tint of
   the card's own hue (currentColor), so each shift category tints its own pill without
   per-category rules. */
.shift-cell-fill .shift-duration {
    align-self: flex-start;
    margin-top: var(--hearth-space-3xs);
    padding: 0 calc(var(--hearth-space-2xs) + var(--hearth-space-3xs));
    border-radius: var(--hearth-radius-2xl);
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: min-content;
}

/* More than one card in the day: each gets half the cell, so the cards give up their vertical
   padding and the type tightens enough for a two-line away or covered card to still fit. The
   left inset stays — the badge overlaps that edge. */
.shifts-container--multi .shift-cell-fill {
    padding-top: var(--hearth-space-2xs);
    padding-bottom: var(--hearth-space-2xs);
    flex-direction: row;
    align-items: center;
    gap: var(--hearth-space-3xs);
}

.shifts-container--multi .shift-cell-fill .shift-details {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hearth-space-3xs);
}

.shifts-container--multi .shift-cell-fill .shift-label {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.625rem;
    line-height: 1.1;
    margin-bottom: 0;
}

.shifts-container--multi .shift-cell-fill .shift-time {
    font-size: 0.75rem;
    line-height: 1.15;
}

/* Compacted cards keep the pill but shed its air, so two cards still fit the row height. */
.shifts-container--multi .shift-cell-fill .shift-duration {
    margin-top: 0;
    font-size: 0.625rem;
    line-height: 1.3;
}

.shift-cell-fill .shift-time {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* grid.html: text-xs font-bold uppercase tracking-widest text-shift-off-text */
.shift-off-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
    margin-top: var(--hearth-space-3xs);
}

/* Legacy .shift-card kept for backwards compat */
.shift-card {
    border-radius: var(--hearth-radius-lg);
    padding: var(--hearth-space-sm) var(--hearth-space-md);
    color: white;
    transition: all var(--hearth-transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px;
    cursor: pointer;
}

.shift-card-off {
    background: transparent;
    color: var(--hearth-on-surface-variant);
}

/* ---------- Diagonal Hatch (Time-Off / PTO) ---------- */

/* Sage stripes — absence/off cards */
.diagonal-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(var(--hearth-outline-rgb), 0.16) 10px,
        rgba(var(--hearth-outline-rgb), 0.16) 20px
    );
}

/* ---------- MudBlazor Component Overrides ---------- */

/* Cards */
.mud-card {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

.mud-popover {
    background-color: var(--hearth-surface-container-high) !important;
    border-radius: var(--hearth-radius-md) !important;
}
.mud-tooltip.mud-tooltip-default {
    background-color: var(--hearth-tertiary-container) !important;
}

/* Chips */
.mud-chip {
    border-radius: var(--hearth-radius-md) !important;
}

/* Dialogs */
.mud-dialog .mud-dialog-content {
    background: var(--hearth-surface-container-lowest);
}

.mud-dialog {
    box-shadow: var(--hearth-shadow-elevated) !important;
}

/* Menus & Popovers — floating overlays use hearth-tinted shadow */
.mud-popover.mud-popover-open {
    box-shadow: var(--hearth-shadow-elevated) !important;
    border: var(--hearth-border-thin) solid var(--hearth-outline-variant) !important;
}

/* Snackbars — toast notifications */
.mud-snackbar {
    box-shadow: var(--hearth-shadow-elevated) !important;
}

/* Tooltips — lightweight float */
.mud-tooltip {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Nav links */
.mud-nav-link {
    transition: all var(--hearth-transition) !important;
}

/* Buttons — filled primary gets custom shadow + transition */
.mud-button-filled.mud-button-filled-primary {
    box-shadow: var(--hearth-shadow-sm) !important;
    transition: all var(--hearth-transition) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: var(--hearth-shadow-elevated) !important;
    filter: brightness(1.1);
}

/* Secondary/outline buttons — subtle lift on hover */
.mud-button-outlined:hover {
    box-shadow: var(--hearth-shadow-ambient);
    transition: all var(--hearth-transition);
}

/* Icon buttons — ambient on hover */
.mud-icon-button:hover {
    box-shadow: var(--hearth-shadow-ambient);
    transition: all var(--hearth-transition);
}

/* Input fields */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--hearth-outline-variant) !important;
    border-radius: var(--hearth-radius-md) !important;
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--hearth-outline) !important;
}

.mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--hearth-surface-tint) !important;
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.15) !important;
}

/* Select / dropdown */
.mud-select .mud-input-outlined-border {
    border-color: var(--hearth-outline-variant) !important;
}

/* Menu items — smaller leading icon than MudBlazor's 24px default, with the
   text indent of icon-less items kept in step so both align. */
.mud-menu-item .mud-menu-item-icon .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mud-menu-item:not(:has(.mud-menu-item-icon)) .mud-menu-item-text {
    /* !important: MudBlazor.min.css loads after app.css and its 36px rule has
       identical specificity. */
    margin-inline-start: 32px !important;
}

/* ---------- Validation & Error Styles ---------- */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.2);
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: var(--hearth-border-thick) solid var(--hearth-primary-container);
    outline-offset: 2px;
}

.invalid {
    outline: var(--hearth-border-thick) solid var(--hearth-error);
    outline-offset: 2px;
}

.validation-message {
    color: var(--hearth-error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--hearth-error-container);
    border: var(--hearth-border-thin) solid rgba(var(--mud-palette-error-rgb), 0.3);
    padding: var(--hearth-space-lg) var(--hearth-space-lg) var(--hearth-space-lg) 3.7rem;
    color: var(--hearth-on-error-container);
    border-radius: var(--hearth-radius-lg);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

h1:focus {
    outline: none;
}

.content {
    padding-top: 2rem;
}

/* ---------- Error UI ---------- */

#blazor-error-ui {
    background: var(--hearth-error-container);
    border: var(--hearth-border-thin) solid rgba(var(--mud-palette-error-rgb), 0.3);
    border-left: var(--hearth-border-accent) solid var(--hearth-error);
    color: var(--hearth-on-error-container);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(var(--mud-palette-error-rgb), 0.1);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--hearth-space-lg) 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-radius: var(--hearth-radius-lg) var(--hearth-radius-lg) 0 0;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all var(--hearth-transition);
    color: var(--hearth-on-error-container);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hearth-radius-md);
    background: rgba(var(--mud-palette-error-rgb), 0.1);
}

#blazor-error-ui .dismiss:hover {
    opacity: 1;
    background: rgba(var(--mud-palette-error-rgb), 0.2);
}

/* ---------- Subtle page entrance ---------- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-content > * {
    animation: fadeIn 0.3s ease-out;
    animation-fill-mode: both;
}

.page-content > *:nth-child(1) { animation-delay: 0.05s; }
.page-content > *:nth-child(2) { animation-delay: 0.1s; }
.page-content > *:nth-child(3) { animation-delay: 0.15s; }

/* ---------- Form helpers ---------- */

.darker-border-checkbox.form-check-input {
    border-color: var(--hearth-outline-variant);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--hearth-outline);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ==========================================================================
   Mobile Rota — Card View (matching ui/grid.mobile.html prototype)
   ========================================================================== */

/* ---------- Day Selector ---------- */

.rota-day-selector {
    padding: var(--hearth-space-xl) var(--hearth-space-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.day-pills-scroll {
    display: flex;
    gap: var(--hearth-space-md);
    min-width: max-content;
}

.day-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 80px;
    border-radius: var(--hearth-radius-lg);
    background: var(--hearth-surface-container-low);
    color: var(--hearth-on-surface-variant);
    border: none;
    cursor: pointer;
    transition: background var(--hearth-transition), color var(--hearth-transition);
}

.day-pill:hover:not(.day-pill--selected) {
    background: var(--hearth-surface-container-high);
}

.day-pill--selected {
    background: var(--hearth-primary-container);
    color: var(--hearth-surface-bright);
    box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.25);
}

.day-pill__name {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: var(--hearth-space-2xs);
}

.day-pill__number {
    font-size: 18px;
    font-weight: 700;
}

.day-pill__dot {
    width: 4px;
    height: 4px;
    background: var(--hearth-surface-bright);
    border-radius: 50%;
    margin-top: var(--hearth-space-2xs);
}

/* ---------- Mobile Summary Header ---------- */

.rota-mobile__summary {
    padding: 0 var(--hearth-space-xl);
    margin-bottom: var(--hearth-space-lg);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--hearth-space-md);
}

.rota-mobile__date {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--hearth-on-surface);
    margin: 0;
    line-height: 1.2;
}

.rota-mobile__date sup {
    font-size: 0.5em;
}

.rota-mobile__stats {
    font-size: 14px;
    color: var(--hearth-on-surface-variant);
    margin: 0;
    margin-top: var(--hearth-space-3xs);
    white-space: nowrap;
}

/* The icon-only cover/share buttons moved to RotaWeekHeader; their 44px touch target moved with
   them, into RotaWeekHeader.razor.css. */

/* ---------- Mobile Rota Container ---------- */

.rota-mobile {
    margin: 0 -24px;
}

/* ---------- Staff Cards Container ---------- */

.rota-mobile__cards {
    padding: 0 var(--hearth-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--hearth-space-lg);
    padding-bottom: 128px;
}

/* ---------- Staff Card ---------- */

.staff-card {
    background: var(--hearth-surface-container-lowest);
    border-radius: var(--hearth-radius-lg);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(var(--hearth-shadow-ink-rgb), 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--hearth-space-lg);
    cursor: pointer;
}

.staff-card:active {
    transform: scale(0.99);
}

.staff-card:focus-visible {
    outline: var(--hearth-border-thick) solid var(--hearth-primary);
    outline-offset: 2px;
}

.staff-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-card__identity {
    display: flex;
    align-items: center;
    gap: var(--hearth-space-md);
}

.staff-card__identity--off {
    opacity: 0.50;
}

/* Override avatar size in mobile cards — prototype uses 48px */
.staff-card .employee-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.staff-card--off .staff-card .employee-avatar {
    filter: grayscale(1);
}

.staff-card__name {
    font-weight: 700;
    color: var(--hearth-on-surface);
    margin: 0;
    font-size: 16px;
}

.staff-card__toggle-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Add-shift affordance (decorative — tapping anywhere on the card opens the editor) */
.staff-card__add-shift-icon {
    pointer-events: none;
    background: var(--hearth-surface-container-high);
    color: var(--hearth-on-surface-variant);
}

.staff-card__duty-label {
    font-size: 9px;
    font-weight: 700;
    margin-top: var(--hearth-space-2xs);
    color: rgba(var(--mud-palette-text-secondary-rgb), 0.60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Shift Bar — solid hue / white text, matching the desktop cards ---------- */

.staff-card__shift-bar {
    border-radius: var(--hearth-radius-md);
    padding: var(--hearth-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-card__shift-bar--morning {
    background: var(--hearth-shift-morning-bg);
    color: var(--hearth-shift-morning-fg);
}

.staff-card__shift-bar--afternoon {
    background: var(--hearth-shift-afternoon-bg);
    color: var(--hearth-shift-afternoon-fg);
}

.staff-card__shift-bar--evening {
    background: var(--hearth-shift-evening-bg);
    color: var(--hearth-shift-evening-fg);
}

.staff-card__shift-info {
    display: flex;
    align-items: center;
    gap: var(--hearth-space-md);
}

/* The icon sits inside the solid bar, so it takes the bar's text colour, not its hue. */
.shift-icon--morning {
    color: var(--hearth-shift-morning-fg);
}

.shift-icon--afternoon {
    color: var(--hearth-shift-afternoon-fg);
}

.shift-icon--evening {
    color: var(--hearth-shift-evening-fg);
}

.staff-card__shift-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.staff-card__shift-time {
    font-size: 10px;
    opacity: 0.80;
    margin: 0;
    margin-top: var(--hearth-space-3xs);
}

.staff-card__shift-hours {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

/* ---------- Time Off State ---------- */

/* Covering at another pub — dashed and hatched, not this pub's shift to edit */
.staff-card__shift-bar--away {
    background: transparent;
    color: var(--hearth-tertiary-container);
    border: var(--hearth-border-thin) dashed var(--hearth-outline-variant);
}

.staff-card__shift-bar--covered {
    background: transparent;
    color: var(--hearth-on-surface-variant);
    border: var(--hearth-border-thin) dashed var(--hearth-outline-variant);
}

.staff-card__shift-bar--covered .staff-card__shift-time {
    text-decoration: line-through;
}

.staff-card__home-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--hearth-tertiary-container);
    background: var(--hearth-tertiary-fixed);
    border-radius: var(--hearth-radius-sm);
    padding: 1px var(--hearth-space-xs);
}

.staff-card__time-off {
    border: 1.5px dashed var(--hearth-shift-off-border);
    border-radius: var(--hearth-radius-md);
    padding: var(--hearth-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hearth-space-sm);
    color: var(--hearth-shift-off-text);
}

.staff-card__time-off-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
}


/* ==========================================================================
   Rota Grid Overrides (global, no scoped CSS rebuild needed)
   ========================================================================== */

/* MudTable paper chrome — MudTable renders as a MudPaper (mud-paper +
   mud-elevation-1). Flatten it so the grid background shows through instead of
   a second card surface. MudBlazor.min.css is a NuGet static asset and loads
   after app.css, so these overrides need !important. */
.rota-table {
    background-color: var(--hearth-surface-container-low) !important;
    color: inherit !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Day column headers — rounded pill style matching prototype */
.rota-table .mud-table-root th.day-header {
    border-radius: var(--hearth-radius-lg) !important;
    padding: var(--hearth-space-lg) var(--hearth-space-md) !important;
    border: var(--hearth-border-thin) solid var(--hearth-border-light);
}

.rota-table .mud-table-root th.day-header.today-header {
    color: var(--hearth-primary) !important;
    border: var(--hearth-border-thin) solid var(--hearth-outline) !important;
}

/* Nobody working this day — warm terracotta wash on the header pill. Kept up here so one flag
   per problem replaces a column of per-cell calls to action. */
.rota-table .mud-table-root th.day-header.day-header--unstaffed {
    background: rgba(var(--mud-palette-secondary-rgb), 0.07) !important;
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.45);
}

.day-header-staffing {
    display: block;
    margin-top: var(--hearth-space-3xs);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--hearth-secondary);
}

/* Employee column — Level 2 card on Level 1 grid */
.rota-table .mud-table-root .employee-header {
    opacity: 0 !important;
}

.rota-table .mud-table-root td.employee-cell {
    background: var(--hearth-surface-container-high) !important;
}

/* Grid container — flattened to the page: card surface, hairline border, no elevation */
.rota-grid {
    background: var(--hearth-surface-container-low) !important;
    border: var(--hearth-border-thin) solid var(--hearth-border-light) !important;
    border-radius: var(--hearth-radius-xl) !important;
    box-shadow: none !important;
}

/* Week-statistics footer, part of the grid's own bordered container rather than a floating
   element below it. Mirrors RotaGrid.razor.css — CSS isolation's scope attribute isn't applied
   to classes set via a MudBlazor component's Class/BadgeClass prop, so the scoped copy never
   matches; see the .rota-grid mirror above for the same reason. */
.rota-grid-footer {
    border-top: var(--hearth-border-thin) solid var(--hearth-border-light) !important;
    background: var(--hearth-surface-container-low) !important;
    font-size: 0.875rem;
    color: var(--hearth-on-surface-variant);
}

.rota-stat b {
    color: var(--hearth-on-surface);
    font-weight: 600;
}

.rota-stat-divider {
    width: 1px;
    height: 16px;
    border-color: var(--hearth-border-accent);
}

.stat-dot {
    display: inline-block;
}

.stat-dot-morning { background: var(--hearth-shift-morning) !important; }
.stat-dot-afternoon { background: var(--hearth-shift-afternoon) !important; }
.stat-dot-evening { background: var(--hearth-shift-evening) !important; }

/* Empty cell actions — invisible at rest so empties read as background, revealed on pointer
   hover or while the cell holds focus (the same reveal family as the cell kebab).
   pointer-events gates the hidden state: the seesaw container stopPropagation()s clicks, so a
   hit-testable invisible overlay would swallow the tap that should open the editor on touch. */
.empty-cell-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hearth-transition);
}

.empty-cell-actions .empty-cell-divider {
    border-color: rgba(var(--hearth-outline-variant-rgb), 0.45) !important;
    border-style: dashed;
}

.day-cell.empty-cell:hover .empty-cell-actions,
.day-cell.empty-cell:focus-within .empty-cell-actions {
    opacity: 0.9;
    pointer-events: auto;
}

/* Empty cell — a recessed well with a faint plus: gaps sink one tonal step below the grid so
   cards read as raised objects and empties as sockets (figure/ground separates them without
   reading), and a quiet centred "add" says the gap is tappable — which matters most on touch,
   where there is no hover to discover the seesaw. Both bow out when hover/focus brings the real
   actions in. The transparent border keeps the box the same size as its bordered neighbours. */
.day-cell.empty-cell {
    position: relative;
    border: var(--hearth-border-thin) solid transparent !important;
    background: var(--hearth-surface-container) !important;
}

.day-cell.empty-cell::after {
    content: 'add';
    font-family: 'Material Symbols Outlined';
    font-size: 1.125rem;
    color: rgba(var(--hearth-outline-rgb), 0.65);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity var(--hearth-transition);
}

.day-cell.empty-cell:hover,
.day-cell.empty-cell:focus-within {
    border-color: var(--hearth-primary-container) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

.day-cell.empty-cell:hover::after,
.day-cell.empty-cell:focus-within::after {
    opacity: 0;
}

/* Table row borders — ghost style */
.rota-table .mud-table-root td {
    border-bottom: none !important;
}

/* ==========================================================================
   Grid Cells — Tonal Layering (per DESIGN.md Section 4)
   Level 0 = --hearth-surface — page bg
   Level 1 = --hearth-surface-container-low — grid bg / sections
   Level 2 = --hearth-surface-container-lowest — active cards that pop
   ========================================================================== */

/* Spacing between cells — generous gaps for tiled layout */
.rota-table .mud-table-root {
    border-spacing: 18px 14px !important;
    border-collapse: separate !important;
}

/* Each td — transparent, no border */
.rota-table .mud-table-root td:not(.employee-cell) {
    border-radius: var(--hearth-radius-lg) !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The day-cell — Level 2 card (surface-container-lowest) popping on Level 1 grid */
.day-cell {
    border-radius: var(--hearth-radius-lg) !important;
    min-height: 60px !important;
    padding: 0 !important;
    transition: all var(--hearth-transition) !important;
}

.day-cell:hover {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Make drop zone fill the cell */
.day-cell .mud-drop-zone {
    min-height: 60px !important;
}

/* Shift card fills entire cell — no wrapper padding */
.day-cell .mud-drop-item {
    width: 100% !important;
    height: 100% !important;
}

/* (Empty-cell rest/hover styling lives in the "Empty cell — silent at rest" block above — no
   duplicate rule here, it would win the !important source-order tie and repaint the border.) */

/* Employee cell — Level 2 card with ambient shadow, wider */
.rota-table .mud-table-root td.employee-cell {
    border-radius: var(--hearth-radius-xl) !important;
    border: none !important;
    padding: 0 !important;
}

/* Table header cells — borders come from th.day-header above */
/* Grid container — flattened: sits on the page with a hairline border, no tonal step */
.rota-grid {
    padding: var(--hearth-space-sm) !important;
    border-radius: var(--hearth-radius-2xl) !important;
}

/* Today column — no cell tinting, only header is highlighted */

/* Shift editor: comfortable touch targets; bottom-sheet on phones */
.shift-editor-dialog .editor-action {
    min-height: 44px;
}

@media (max-width: 600px) {
    .mud-dialog.shift-editor-dialog {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw !important;
        margin: 0;
        max-height: 92vh;
        border-radius: var(--hearth-radius-xl) var(--hearth-radius-xl) 0 0;
    }
}