/* ==========================================================================
   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;
}

body {
    background: var(--hearth-canvas-gradient);
    background-attachment: fixed;
}

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

/* ---------- 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-md) !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;
}

/* ---------- Sign-in surfaces — /login and the /auth/local/* pages ----------
   One shell for both sign-in routes so they cannot drift apart: the brand lockup over a lowest
   surface card on the hearth canvas, under the same 3px pine strip the signed-in shell wears.
   /auth/local/* renders statically with no MudLayout, so these are global rather than scoped. */

.signin {
    min-height: 100svh;
    box-sizing: border-box;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--hearth-space-xl);
    padding: var(--hearth-space-xl);
    color: var(--hearth-on-surface);
    font-family: var(--hearth-font-family);
}

.signin::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: var(--hearth-primary);
}

/* Storybook drop cap: the ornate V from the app icon stands in for the initial, and "enizen"
   follows in the ordinary face, sitting on the V's baseline. The link carries the full name. */
.signin__brand {
    display: inline-flex;
    align-items: flex-end;
    color: var(--hearth-primary);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    min-height: 44px;
}

.signin__brand-v {
    width: auto;
    height: 48px;
    margin-right: -0.08em;
}

.signin__brand-word {
    padding-bottom: 0.14em;
}

.signin__card {
    width: min(100%, 440px);
    box-sizing: border-box;
    display: grid;
    gap: var(--hearth-space-lg);
    padding: calc(var(--hearth-space-xl) + var(--hearth-space-sm));
    background: var(--hearth-surface-container-lowest);
    border: var(--hearth-border-thin) solid var(--hearth-border-light);
    border-radius: var(--hearth-radius-xl);
    box-shadow: var(--hearth-shadow-card);
}

.signin__heading {
    display: grid;
    gap: var(--hearth-space-xs);
}

.signin__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hearth-on-surface-variant);
}

.signin__card h1 {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.signin__lead,
.signin__note {
    margin: 0;
    line-height: 1.5;
    color: var(--hearth-on-surface-variant);
}

.signin__note {
    font-size: 0.875rem;
    text-align: center;
}

.signin__actions {
    display: grid;
    gap: var(--hearth-space-sm);
}

.signin .mud-alert {
    border-radius: var(--hearth-radius-md);
}

.signin .mud-button-root {
    min-height: 48px;
    border-radius: var(--hearth-radius-md);
}

@media (max-width: 480px) {
    .signin {
        padding: var(--hearth-space-lg);
    }

    .signin__card {
        padding: var(--hearth-space-xl);
    }
}

/* ---------- 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 {
    display: block;
    min-width: 0;
    max-width: 100%;
    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;
}

/* Narrow day columns are still wide enough for a complete time range when the card's left
   inset and type scale give the fixed-format value room to breathe. Keep the range on one line:
   wrapping would make compact multi-shift rows taller than their fixed track. */
@media (max-width: 600px) {
    .shift-cell-fill {
        padding-left: var(--hearth-space-3xs);
        padding-right: var(--hearth-space-3xs);
    }

    .shift-cell-fill .shift-time,
    .shifts-container--multi .shift-cell-fill .shift-time {
        font-size: 0.8em;
        letter-spacing: -0.01em;
        line-height: 1.15;
    }
}

/* Keep a visible inset on very narrow day columns without taking the final pixels needed by a
   fixed-format time range. */
@media (max-width: 375px) {
    .shift-cell-fill {
        padding-left: 1px;
        padding-right: 1px;
    }
}

/* 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);
}

body .mud-dialog.mud-message-box {
    width: min(600px, calc(100% - 64px));
    margin: calc(2 * var(--hearth-space-lg));
    background: var(--hearth-surface-container-lowest);
}

/* The install help is two short lines of instruction, not a form: it reads on the dialog's own
   surface instead of the lighter content panel every other dialog sits on. */
body .mud-dialog-content:has(.install-help) {
    background: transparent;
}

/* On a phone MudBlazor runs this dialog edge to edge; leave the same 32px gutter either side that
   the What's new dialog gets from MudBlazor. The 600px is MudBlazor's own cap for this dialog size,
   kept for tablets and desktops. */
body .mud-dialog:has(.install-help) {
    width: min(600px, calc(100% - 4 * var(--hearth-space-lg)));
}

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

body .mud-dialog.privacy-dialog {
    width: min(720px, calc(100% - 24px));
    margin: var(--hearth-space-md);
    border-radius: var(--hearth-radius-lg);
    background: var(--hearth-surface-container-lowest);
    box-shadow: 0 12px 40px rgba(var(--hearth-shadow-ink-rgb), 0.06) !important;
}

body .privacy-dialog .privacy-dialog-content {
    padding: 0;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 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 {
    background: var(--hearth-surface-bright) !important;
    color: var(--hearth-on-surface) !important;
    border: 1px solid var(--hearth-border-light) !important;
    box-shadow: var(--hearth-shadow-ambient) !important;
}

.mud-snackbar .mud-snackbar-icon {
    color: inherit;
    opacity: 1;
}

.mud-snackbar:is(.mud-alert-filled-info, .mud-alert-text-info, .mud-alert-outlined-info) .mud-snackbar-icon {
    color: var(--mud-palette-info-darken);
}

.mud-snackbar:is(.mud-alert-filled-success, .mud-alert-text-success, .mud-alert-outlined-success) .mud-snackbar-icon {
    color: var(--mud-palette-success-darken);
}

.mud-snackbar:is(.mud-alert-filled-warning, .mud-alert-text-warning, .mud-alert-outlined-warning) .mud-snackbar-icon {
    color: var(--mud-palette-warning-darken);
}

.mud-snackbar:is(.mud-alert-filled-error, .mud-alert-text-error, .mud-alert-outlined-error) .mud-snackbar-icon {
    color: var(--mud-palette-error-darken);
}

.mud-snackbar .mud-snackbar-action-button {
    background-color: transparent !important;
    color: var(--hearth-primary) !important;
    border: 1px solid var(--hearth-outline);
}

.mud-snackbar .mud-snackbar-action-button:focus-visible {
    outline: 2px solid var(--hearth-primary);
    outline-offset: 3px;
}

@media (hover: hover) {
    .mud-snackbar .mud-snackbar-action-button:hover {
        background-color: var(--hearth-surface-container) !important;
    }
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .mud-snackbar {
        background: color-mix(in srgb, var(--hearth-surface-bright) 72%, transparent) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .mud-snackbar {
        background: var(--hearth-surface-bright) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

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

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

body button,
body .mud-button-root,
body .mud-button-root.mud-icon-button,
body .mud-radio,
body .mud-nav-link {
    min-height: 44px;
    min-width: 44px;
}

body .mud-button:not(.mud-icon-button):not(.mud-fab) {
    min-height: 44px;
    border-radius: var(--hearth-radius-md);
    padding: var(--hearth-space-xs) var(--hearth-space-lg);
    font-size: 0.875rem;
}

body button.mud-icon-button:not(.mud-picker-calendar-day),
body a.mud-icon-button {
    width: 44px;
    height: 44px;
    padding: var(--hearth-space-sm);
    border-radius: var(--hearth-radius-md);
}

body .mud-dialog-container:has(> .nav-more-sheet) {
    padding-bottom: 0;
}

body .mud-dialog.nav-more-sheet {
    margin: 0;
    width: 100%;
    max-height: 85dvh;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 10px);
    border-radius: var(--hearth-radius-lg) var(--hearth-radius-lg) 0 0;
}

@keyframes nav-more-sheet-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

body .mud-dialog.nav-more-sheet {
    animation: nav-more-sheet-slide-up 100ms cubic-bezier(0.2, 0, 0, 1) both;
}

body .mud-dialog.nav-more-sheet {
    height: auto;
    padding-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--mud-palette-surface);
}

body .mud-dialog.nav-more-sheet .mud-dialog-content {
    padding: 0;
    overflow-y: auto;
    background: var(--mud-palette-surface);
}

body .nav-more-sheet__inner {
    padding: 0 20px calc(14px + env(safe-area-inset-bottom, 0px));
}

body .nav-more-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hearth-space-sm);
    padding: 14px 0 var(--hearth-space-md);
    margin-right: -10px;
}

body .nav-more-sheet__close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--mud-palette-text-primary);
}

body .nav-more-sheet .nav-more-site {
    flex: 1;
    min-width: 0;
}

body .nav-more-sheet .nav-more-site .mud-menu,
body .nav-more-sheet .nav-more-site .mud-menu-activator {
    display: flex;
    min-width: 0;
    max-width: 100%;
}

body .nav-more-sheet .nav-more-site .site-trigger,
body .nav-more-sheet .nav-more-site .site-switcher {
    min-height: 44px;
    max-width: 100%;
    padding: 0;
    border: 0;
    font-size: 19px;
    font-weight: 700;
    background: transparent;
    color: var(--mud-palette-text-primary);
}

body .nav-more-sheet .nav-more-site .mud-icon-root {
    color: var(--mud-palette-primary);
}

@media (hover: hover) {
    body .nav-more-sheet .nav-more-site .site-trigger:hover {
        background: var(--mud-palette-background-gray);
    }
}

body .nav-more-sheet__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hearth-space-md);
}

body .nav-more-sheet .nav-more-sheet__tile {
    min-width: 0;
    height: 84px;
    padding: 0;
    border-radius: var(--hearth-radius-lg);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-background-gray));
    text-transform: none;
    letter-spacing: normal;
}

body .nav-more-sheet__tile .mud-button-label {
    width: 100%;
    height: 100%;
}

body .nav-more-sheet__tile-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hearth-space-sm);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

body .nav-more-sheet .nav-more-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hearth-space-sm);
    margin-top: var(--hearth-space-lg);
    padding-top: var(--hearth-space-xs);
    border-top: 1px solid var(--mud-palette-divider);
}

body .nav-more-sheet .nav-more-sheet__action {
    min-height: 44px;
    padding-inline: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: none;
}

body .nav-more-sheet__action .mud-button-icon-start > .mud-icon-root {
    font-size: 18px;
}

body .nav-more-sheet .nav-more-sheet__action:only-child {
    margin-left: auto;
}

body .nav-more-sheet [aria-current="page"] {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

body .nav-more-sheet a:focus-visible,
body .nav-more-sheet button:focus-visible,
body .nav-more-sheet [role="button"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (min-width: 600px) {
    body .mud-dialog.nav-more-sheet {
        max-width: 480px;
    }
}

body .mud-picker-calendar .mud-day,
body .mud-picker-calendar-header-day .mud-day-label {
    width: 44px;
    margin-inline: 0;
}

body .mud-picker-calendar-transition {
    min-height: 264px;
}

/* 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 — crisp card fill with soft outline and lift on hover */
.mud-button-outlined,
button.mud-icon-button.mud-button-outlined,
a.mud-icon-button.mud-button-outlined {
    background-color: var(--hearth-surface-container-lowest);
    border-color: var(--hearth-outline-variant) !important;
    box-shadow: var(--hearth-shadow-sm);
    transition: all var(--hearth-transition);
}

.mud-button-outlined.mud-button-outlined-secondary,
button.mud-icon-button.mud-button-outlined.mud-button-outlined-secondary {
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.45) !important;
}

.mud-button-outlined:hover,
button.mud-icon-button.mud-button-outlined:hover,
a.mud-icon-button.mud-button-outlined:hover {
    background-color: var(--hearth-surface-bright);
    border-color: var(--hearth-outline) !important;
    box-shadow: var(--hearth-shadow-ambient);
}

/* 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 {
    background-color: var(--hearth-surface-container-lowest);
    border-radius: var(--hearth-radius-md);
}

.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 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--hearth-space-2xs);
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-block: 4px;
}

.day-pills-viewport {
    min-width: 0;
    overflow-x: auto;
    padding: var(--hearth-space-3xs);
    -webkit-overflow-scrolling: touch;
}

.rota-day-selector .rota-day-selector__arrow-tooltip {
    flex: 0 0 44px;
}

.rota-day-selector .rota-day-selector__arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.rota-day-selector .rota-day-selector__arrow:focus-visible {
    outline: 2px solid var(--hearth-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .rota-day-selector .rota-day-selector__arrow:hover {
        opacity: 0.7;
    }
}

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

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

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

.day-pill:focus-visible {
    outline: 2px solid var(--hearth-primary);
    outline-offset: -2px;
}

.day-pill--selected {
    background: var(--hearth-surface-container-highest);
    color: var(--hearth-primary);
}

.day-pill--selected:focus-visible {
    outline-offset: -4px;
}

.day-pill__name {
    font-size: 11px;
    font-weight: 400;
}

.day-pill__number {
    font-size: 13px;
    font-weight: 600;
}

/* ---------- 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;
}

/* ==========================================================================
   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);
}

/* On narrow tables, the staffing sentence costs more height than the header can spare. Let the
   existing label colour carry the warning through the compact day/date heading instead. */
@media (max-width: 600px) {
    .rota-table .mud-table-root th.day-header.day-header--unstaffed .day-header-staffing {
        display: none;
    }

    .rota-table .mud-table-root th.day-header.day-header--unstaffed .day-header-label,
    .rota-table .mud-table-root th.day-header.day-header--unstaffed .day-header-date {
        color: var(--hearth-secondary) !important;
    }
}

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

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

/* Grid container — card surface with hairline border and soft ambient lift */
.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: var(--hearth-shadow-card) !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; }

/* 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 and cover picker: comfortable touch targets; bottom-sheet on phones */
.shift-editor-dialog .editor-action,
.cover-picker-dialog .editor-action {
    min-height: 44px;
}

body .mud-dialog.shift-editor-dialog {
    position: relative;
    width: 440px;
    max-width: calc(100vw - 48px);
    overflow: hidden;
    background: var(--hearth-surface);
}

body .shift-editor-dialog .mud-dialog-title {
    padding: var(--hearth-space-xl) var(--hearth-space-xl) var(--hearth-space-lg);
}

body .shift-editor-dialog .mud-dialog-content {
    min-height: 0;
    padding: var(--hearth-space-sm) var(--hearth-space-xl);
    background: transparent;
    overscroll-behavior: contain;
}

body .shift-editor-dialog .mud-dialog-actions {
    padding: var(--hearth-space-lg) var(--hearth-space-xl) var(--hearth-space-xl);
}

.mud-dialog.shift-editor-dialog button.shift-editor-save {
    min-height: 52px;
    border-radius: var(--hearth-radius-lg);
    font-size: 1rem;
}

.shift-editor-dialog button:focus-visible {
    outline: var(--hearth-border-thick) solid var(--hearth-primary);
    outline-offset: 2px;
}

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

    body .shift-editor-dialog .mud-dialog-actions {
        padding-bottom: max(var(--hearth-space-xl), env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    body .mud-dialog.nav-more-sheet {
        animation: none;
    }
}

.mud-dialog.staff-login-dialog {
    width: min(520px, calc(100% - 48px));
}

.staff-login-dialog .mud-dialog-content {
    min-height: 0;
    overflow-y: auto;
}

.mud-dialog.staff-login-dialog .mud-dialog-title,
.mud-dialog.staff-login-dialog .mud-dialog-actions {
    flex-shrink: 0;
}

.staff-login-dialog .mud-button-root {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 600px) {
    .mud-dialog.staff-login-dialog {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }

    .mud-dialog.staff-login-dialog .mud-dialog-content {
        flex: 1;
        border-radius: 0;
    }

    .mud-dialog.staff-login-dialog .mud-dialog-title {
        padding-top: max(20px, env(safe-area-inset-top));
    }

    .mud-dialog.staff-login-dialog .mud-dialog-actions {
        padding: var(--hearth-space-lg) var(--hearth-space-xl) max(var(--hearth-space-lg), env(safe-area-inset-bottom));
        border-radius: 0;
    }
}