html {
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════
   CWMC Global Styles
   Warm, friendly, approachable — not enterprise SaaS
   ═══════════════════════════════════════════════════ */

/* Hide the oversized toolbar header on date pickers (keep month/year nav visible) */
.mud-picker-toolbar {
    display: none !important;
}

/* ── Layout ── */
.mud-main-content {
    height: 100%;
    min-height: 100vh;
    display: flex;
    background: #f8f9fb;
}

/* Tighter content padding — less wasted gray space */
.mud-main-content > .mud-container {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

@media (min-width: 1280px) {
    .mud-main-content > .mud-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ── Grid / Table font sizes — match legacy site ── */
.mud-table .mud-table-cell,
.mud-table .mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-cell {
    font-size: 0.9375rem !important;
}

/* ── Warning alerts — darken text for readability ── */
.mud-alert-text-warning {
    color: #7a5700 !important;
}

/* ── MudBlazor Component Overrides ── */
.mud-chip.mud-chip-size-medium {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-chip.mud-chip-size-small {
    font-size: var(--mud-typography-body2-size) !important;
}

.mud-chip {
    font-size: var(--mud-typography-default-size);
}

.mud-tabs {
    background-color: var(--mud-palette-surface);
}

.mud-input-control-margin-dense .mud-input > input.mud-input-root,
.mud-input-control-margin-dense div.mud-input-slot.mud-input-root {
    font-size: 0.90em;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-simple-table table * tr > td, .mud-simple-table table * tr th {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-expand-panel .mud-expand-panel-header {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-button-year {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-cell {
    font-size: var(--mud-typography-default-size) !important;
}

.mud-table-dense .mud-table-cell {
    font-size: var(--mud-typography-body2-size) !important;
}

.mud-button-outlined-size-small {
    font-size: var(--mud-typography-body2-size);
}

.mud-grid.readonly-grid > .mud-grid-item {
    border-bottom: 1px solid var(--mud-palette-table-lines);
    padding-bottom: 2px;
}

.mud-nav-link {
    white-space: normal !important;
}

.mud-table.mud-data-grid .mud-toolbar,
.mud-table.mud-data-grid .mud-toolbar-gutters,
.mud-table.mud-data-grid .mud-table-toolbar {
    height: auto !important;
    padding: 1rem;
}

.mud-table.mud-data-grid .mud-table-pagination-toolbar {
    height: auto !important;
    padding: 0rem !important;
}

/* ── Section Panels (person detail, etc.) ── */
.cwmc-section-body {
    border: 1px solid var(--mud-palette-lines-default);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--mud-palette-surface);
}

/* ── Save Bar (top of tab content) ── */
.cwmc-save-bar {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* ── Save Bar (top of tab content) ── */
.cwmc-save-bar {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* ── Page Container (admin pages) ── */
.page-container {
    animation: fadeIn 0.2s ease;
}

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

/* ── Sidebar chip sizing ── */
.cwmc-sidebar .mud-chip.mud-chip-size-small {
    font-size: 0.625rem;
    height: 1.125rem;
}

/* ── Error boundary ── */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ── Groups responsive helpers ── */
.hide-on-mobile { display: none; }
@media (min-width: 600px) { .hide-on-mobile { display: table-cell !important; } }

/* Block-level responsive swap: render one of two sibling layouts per breakpoint
   (e.g. a data table on desktop, a card list on phones). */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 600px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block; }
}
/* Hide on phones without redefining the element's desktop display — use this
   for buttons/inline elements where .desktop-only's display:block would break
   their layout. */
@media (max-width: 599.98px) {
    .hide-on-phone { display: none !important; }
}

/* ── Mobile tabs ──
   MudBlazor gives every tab a 160px minimum, so three tabs (480px) overflow a
   phone and the tab bar pages one tab at a time behind scroll arrows — admins
   couldn't see the other tabs existed. Let tabs shrink to their natural width
   on phones; pages with many tabs still scroll, but 2–4 tab pages fit fully. */
@media (max-width: 599.98px) {
    .mud-tabs .mud-tab {
        /* !important because MudTabs writes min-width:160px as an inline style
           (its MinimumTabWidth default) — a stylesheet rule can't override it. */
        min-width: 0 !important;
        flex: 1 0 auto;
        padding: 6px 10px;
    }

    /* Drop tab icons on phones: the labels are the information, and MudTabs'
       scroll-button logic is sticky (once the arrows render they shrink the
       content area and never dismiss), so tabs must be compact enough to fit
       the reduced width or admins get a one-tab-at-a-time pager. */
    .mud-tabs .mud-tab .mud-icon-root {
        display: none;
    }

    /* ── Stacked tables (MudTable phone mode) ──
       MudBlazor turns each cell into a space-between flex row expecting a
       data-label on the left; cells WITHOUT a label render next to an empty
       16px-padded pseudo-element, which shoves all content to the right edge.
       Left-align unlabeled cells and drop the phantom label. Labeled cells
       (DataLabel="...") keep MudBlazor's label/value layout. */
    .mud-xs-table .mud-table-cell:not([data-label]) {
        justify-content: flex-start;
    }
    .mud-xs-table .mud-table-cell:not([data-label])::before {
        display: none;
    }
    /* MudBlazor's flex display outguns .hide-on-mobile inside stacked tables;
       re-assert the hide. */
    .mud-xs-table .mud-table-cell.hide-on-mobile {
        display: none !important;
    }

    /* ── Compact person pickers (recipient / add-member tables) ──
       One tappable line per person: checkbox + name, with contact info
       indented beneath, instead of MudBlazor's one-cell-per-line stack. */
    .mobile-select-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 2px 0;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }
    .mobile-select-table .mud-table-row .mud-table-cell {
        border-bottom: none;
        padding: 2px 6px;
    }
    .mobile-select-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: none;
    }
    .mobile-select-table .mud-table-row .mud-table-cell:nth-child(2) {
        flex: 1 1 auto;
    }
    .mobile-select-table .mud-table-cell.mobile-secondary {
        flex-basis: 100%;
        padding: 0 12px 2px 54px;
        overflow-wrap: anywhere;
    }

    /* ── iOS zoom prevention ──
       Mobile Safari zooms the whole page when a focused input's font-size is
       under 16px. MudBlazor inputs inherit the 14px root, so every search box
       and form field triggered a jarring zoom-jump on iPhones. */
    .mud-input > input.mud-input-root,
    .mud-input > textarea.mud-input-root,
    .mud-select .mud-input-root {
        font-size: 16px !important;
    }

    /* Small icon buttons are ~30px — below the 44px touch guideline. Grow the
       tap area on phones without changing the icon size. MudSwitch's thumb
       also carries .mud-icon-button internally — exclude it or the extra
       padding deforms the toggle. */
    .mobile-only .mud-icon-button:not(.mud-switch-base),
    .mobile-select-table .mud-icon-button:not(.mud-switch-base) {
        padding: 10px;
    }

    /* Tighten card padding on phones. Pages nest pa-4 papers (page container +
       inner cards), which cost 60+px of a ~400px screen in pure padding. */
    .pa-4 {
        padding: 12px !important;
    }
}


/* ── Croppie crop dialogs (group image, profile photo, push notification) ──
   The cropper is positioned by dragging the image. Without touch-action:none
   the browser claims that drag for page scrolling, so on a phone the image
   can't be moved at all. Keep the slider out of it: a range input needs its
   own touch handling. */
.croppie-container .cr-boundary,
.croppie-container .cr-viewport {
    touch-action: none;
}

/* The cropper is sized in JS from the container width, but keep it from
   forcing horizontal page scroll if a dialog is narrower than expected. */
.croppie-container {
    max-width: 100%;
}

.croppie-container .cr-slider-wrap {
    max-width: 100%;
}

/* ── Group image picker ──
   The drop zone is a fixed 2:1 box so the empty state teaches the shape the crop
   dialog will enforce, instead of relying on the admin to read "landscape" and
   picture it. Same box holds the preview once an image is chosen. */
.group-image-dropzone {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 2 / 1;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s ease, background-color .15s ease;
}

.group-image-dropzone.has-image {
    border-style: solid;
}

.group-image-dropzone.is-dragging {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.group-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The empty state is a <label for> so clicking anywhere on the box opens the
   picker within the user's own gesture. See group-image-crop.js. */
.group-image-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    cursor: pointer;
}

/* Crop dialog: keep the actions comfortably tappable on a phone.
   Exclude .mud-switch-base: MudSwitch builds its thumb out of a .mud-button-root, so
   a blanket min-height stretches the thumb's hit box past the track and the ball no
   longer sits inside it. The switch already has its own comfortable target. */
.group-image-crop-dialog .mud-dialog-actions .mud-button-root:not(.mud-switch-base),
.group-image-crop-dialog .mud-dialog-content .mud-button-root:not(.mud-switch-base) {
    min-height: 44px;
}

/* ── Group image crop stage ──
   Croppie shades the area between its boundary and the crop frame to show what will
   be cut off. This cropper deliberately sets boundary == frame (anything larger lets
   the image slide sideways and leaves a bare strip), so that shading never renders.
   The stage puts a neutral field behind the frame instead, and rings the frame, so
   its edges are visible and the white padding of "show the whole image" reads as
   part of the saved picture rather than as dialog background. */
.group-image-crop-stage {
    background: var(--mud-palette-background-grey, #f1f3f5);
    border-radius: 8px;
    padding: 16px 12px;
}

.group-image-crop-stage .cr-boundary {
    box-shadow: 0 0 0 2px var(--mud-palette-text-secondary, rgba(0, 0, 0, .45)),
                0 2px 10px rgba(0, 0, 0, .12);
}

/* The frame's own white hairline is redundant next to the ring above, and it
   disappears against white padding anyway. */
.group-image-crop-stage .cr-viewport {
    border-color: transparent;
}