/* hover-wrapped */
/* ============================================================
   Dr Logbook v4 - Global component classes

   These are atomic classes that pages and primitives can use
   directly without a Razor wrapper. All reference the CSS
   tokens from tokens.css - never hardcoded hex.
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary,
.btn-ghost,
.btn-danger {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 12px;
    transition: all .2s ease;
    box-sizing: border-box;
    line-height: 1.2;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(180deg, var(--teal-2), var(--teal));
    color: #fff;
    border: none;
    box-shadow: var(--shadow-teal),
                inset 0 1px 0 rgba(255, 255, 255, .18),
                inset 0 -1px 0 rgba(0, 0, 0, .08);
}
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 118, 110, .32),
                0 14px 32px rgba(15, 118, 110, .2),
                inset 0 1px 0 rgba(255, 255, 255, .18),
                inset 0 -1px 0 rgba(0, 0, 0, .08);
}
}


.btn-primary:active { transform: scale(.97); }

.btn-ghost {
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--line);
    padding: 11px 16px;
    box-shadow: var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
    .btn-ghost:hover {
    border-color: var(--teal);
    color: var(--teal);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
}


.btn-ghost:active { transform: scale(.97); }

.btn-danger {
    background: linear-gradient(180deg, #ef4444, var(--red));
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px rgba(220, 38, 38, .25),
                inset 0 1px 0 rgba(255, 255, 255, .18),
                inset 0 -1px 0 rgba(0, 0, 0, .08);
}
@media (hover: hover) and (pointer: fine) {
    .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(220, 38, 38, .32),
                0 14px 32px rgba(220, 38, 38, .2),
                inset 0 1px 0 rgba(255, 255, 255, .18),
                inset 0 -1px 0 rgba(0, 0, 0, .08);
}
}


.btn-danger:active { transform: scale(.97); }

.btn-primary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-sm);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   ICON BUTTON (used in topbar, mobile header)
   Note: NotificationsBell.razor.css already defines this in
   scoped form. The global version is provided for ad-hoc use
   inside pages.
   ============================================================ */

.icon-btn-global {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-2);
    transition: all .18s;
    box-shadow: var(--shadow-sm);
    padding: 0;
}
@media (hover: hover) and (pointer: fine) {
    .icon-btn-global:hover {
    border-color: var(--teal);
    color: var(--teal);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}
}


.icon-btn-global:active { transform: scale(.96); }

/* ============================================================
   EYEBROW (uppercase tracked label)
   ============================================================ */

.eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eyebrow.with-line::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--teal);
    flex-shrink: 0;
}

/* ============================================================
   FIELD / INPUT (form pattern: label above box, icon inside)
   ============================================================ */

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.field > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 700;
}

.field .input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}

.field .input > svg {
    flex-shrink: 0;
    color: var(--muted);
}

.field .input > input,
.field .input > textarea,
.field .input > select {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
    padding: 0;
}

.field .input > input::placeholder,
.field .input > textarea::placeholder {
    color: var(--muted);
}

.field .input:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .1);
}

[data-theme="dark"] .field .input:focus-within,
:root:not([data-theme="light"]) .field .input:focus-within {
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .2);
}

/* ============================================================
   DASHED DIVIDER (editorial separator)
   ============================================================ */

.dashed-divider {
    height: 1px;
    background-image: linear-gradient(to right,
        var(--line-soft) 0,
        var(--line-soft) 6px,
        transparent 6px,
        transparent 10px);
    background-size: 10px 1px;
    background-repeat: repeat-x;
    border: none;
    margin: 0;
}

/* ============================================================
   CARD (plain unlabelled - use InfoCard for labelled sections)
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

/* ============================================================
   MODAL (backdrop + body)
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .5);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: drModalFadeIn .2s ease;
}

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

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: drModalSlideUp .25s ease;
}

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

.modal-head {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
}

.modal-foot {
    /* padding-bottom absorbs env(safe-area-inset-bottom) so the surface-2
       background paints down to the screen edge while buttons stay above
       the Android nav bar / iOS home indicator. */
    padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-foot.stacked {
    flex-direction: column;
    gap: 8px;
}

.modal-foot.stacked button {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   GLOBAL DIALOG STYLING - v4 look for all centered MudDialogs
   Bottom-sheet dialogs (mud-dialog-position-bottomcenter) are
   left untouched so they keep their slide-up sheet behavior.
   ============================================================ */

.mud-overlay-dialog {
    background: rgba(17, 24, 39, .5) !important;
    backdrop-filter: blur(8px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(150%) !important;
}

.mud-dialog-container.mud-dialog-position-center > .mud-dialog,
.mud-dialog-container.mud-dialog-position-centerright > .mud-dialog,
.mud-dialog-container.mud-dialog-position-centerleft > .mud-dialog {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 20px 60px rgba(17, 24, 39, .25),
                0 8px 24px rgba(17, 24, 39, .12) !important;
    overflow: hidden !important;
}

@media (max-width: 600px) {
    .mud-dialog-container.mud-dialog-position-center > .mud-dialog,
    .mud-dialog-container.mud-dialog-position-centerright > .mud-dialog,
    .mud-dialog-container.mud-dialog-position-centerleft > .mud-dialog {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Safe-area reservation for fallback (non-CenterDialog) MudDialogs.
       CenterDialog-hosted dialogs handle this on .v4-center-body instead,
       so the dialog surface paints to bottom: 0 without double padding. */
    .mud-dialog-container.mud-dialog-position-center > .mud-dialog:not(.v4-center) > .mud-dialog-content,
    .mud-dialog-container.mud-dialog-position-centerright > .mud-dialog:not(.v4-center) > .mud-dialog-content,
    .mud-dialog-container.mud-dialog-position-centerleft > .mud-dialog:not(.v4-center) > .mud-dialog-content {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────── */
/* Snackbars (MudBlazor)                                                */
/* Frosted glass surface, severity-coloured left accent rail, status    */
/* icon in its own badge, safe-area + manual pixel bump for notches.    */
/* ─────────────────────────────────────────────────────────────────── */

/* MudBlazor positions each snackbar absolutely via top/bottom/left/right
   on the snackbar element itself (not the container). So safe-area must
   be added per position-class, not via container padding. */
#mud-snackbar-container {
    pointer-events: none;
}

/* MudBlazor applies .mud-snackbar-location-* directly to #mud-snackbar-container
   (the fixed-position anchor). Small additive offset (+12px) on top of env()
   parks the pill just below the Dynamic Island / notch with comfortable
   breathing room. max() floor catches WebViews that report env()==0. */
.mud-snackbar-location-top-right {
    top:   max(calc(env(safe-area-inset-top,   0px) + 4px), 44px) !important;
    right: max(calc(env(safe-area-inset-right, 0px) + 16px), 24px) !important;
}
.mud-snackbar-location-top-left {
    top:  max(calc(env(safe-area-inset-top,  0px) + 4px), 44px) !important;
    left: max(calc(env(safe-area-inset-left, 0px) + 16px), 24px) !important;
}
.mud-snackbar-location-top-center {
    top: max(calc(env(safe-area-inset-top, 0px) + 4px), 44px) !important;
}

.mud-snackbar-location-bottom-right {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 16px), 32px) !important;
    right:  max(calc(env(safe-area-inset-right,  0px) + 16px), 24px) !important;
}
.mud-snackbar-location-bottom-left {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 16px), 32px) !important;
    left:   max(calc(env(safe-area-inset-left,   0px) + 16px), 24px) !important;
}
.mud-snackbar-location-bottom-center {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 16px), 32px) !important;
}

/* ── Base pill ─────────────────────────────────────────────────── */
#mud-snackbar-container > .mud-snackbar {
    pointer-events: auto;
    position: relative;
    min-width: 300px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 14px 44px 14px 20px !important; /* extra right = room for close btn */
    border-radius: 16px !important;
    font-family: var(--sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--ink) !important;
    background: #ffffff !important; /* solid, not translucent - stays crisp on white pages */
    opacity: 1; /* no !important - inline styles from MudBlazor's leave animation must be able to drop this to 0 for auto-dismiss */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Ring + heavy drop shadow so the pill reads clearly against any page.
       Ring is hard-set here; severity variants override its colour below. */
    border: 1px solid rgba(17, 24, 39, 0.08) !important;
    box-shadow:
        0 0 0 3px rgba(17, 24, 39, 0.03),
        0 24px 56px -14px rgba(17, 24, 39, .35),
        0 10px 24px -8px rgba(17, 24, 39, .18),
        0 2px 6px -2px rgba(17, 24, 39, .08) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, opacity .22s ease !important;
}
@media (hover: hover) and (pointer: fine) {
    #mud-snackbar-container > .mud-snackbar:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 3px rgba(17, 24, 39, 0.04),
        0 28px 62px -14px rgba(17, 24, 39, .4),
        0 12px 28px -8px rgba(17, 24, 39, .22),
        0 2px 6px -2px rgba(17, 24, 39, .1) !important;
}
}


/* Severity rail on the left edge - 5px coloured stripe that reads at a glance */
#mud-snackbar-container > .mud-snackbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 16px 0 0 16px;
    background: var(--mud-palette-primary, var(--teal));
}

/* Countdown bar at the bottom showing remaining visibility time */
#mud-snackbar-container > .mud-snackbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.22;
    transform-origin: left;
    animation: snackbar-countdown 2.25s linear forwards;
}

/* Icon - MudBlazor's snackbar wraps its icon in .mud-snackbar-icon.
   Lift it into a tinted squircle badge for more presence.            */
#mud-snackbar-container > .mud-snackbar .mud-snackbar-icon {
    padding: 8px !important;
    margin-right: 12px !important;
    border-radius: 10px;
    background: rgba(17, 24, 39, 0.06);
    flex-shrink: 0;
    opacity: 1 !important;
    font-size: 18px !important;
}
#mud-snackbar-container > .mud-snackbar .mud-snackbar-icon .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
}

/* Close button - compact circular hit target, top-right */
#mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button {
    position: absolute !important;
    top: 10px;
    right: 10px;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    color: var(--muted) !important;
    opacity: 0.75;
    transition: all .15s ease;
}
@media (hover: hover) and (pointer: fine) {
    #mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button:hover {
    opacity: 1;
    background: rgba(17, 24, 39, 0.08) !important;
    color: var(--ink) !important;
}
}

#mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button .mud-icon-root {
    width: 16px !important;
    height: 16px !important;
    padding: 0;
    margin: 0;
    background: none !important;
}

/* Action link (rare) */
#mud-snackbar-container > .mud-snackbar .mud-snackbar-action-button {
    color: var(--teal-deep) !important;
    font-weight: 800 !important;
    letter-spacing: -0.005em;
    text-transform: none !important;
    margin-left: 8px;
}

/* ── Severity variants - set the left rail color + icon tint ─────── */
/* Normal / default severity - neutral teal-tinted ink */
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal {
    background: linear-gradient(135deg, #ffffff 0%, #f6f7f8 100%) !important;
    border-color: rgba(17, 24, 39, 0.1) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal::before,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal::before {
    background: linear-gradient(180deg, #6b7280 0%, #374151 100%);
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-icon,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-icon {
    background: rgba(17, 24, 39, 0.06) !important;
    color: var(--ink-2) !important;
}

#mud-snackbar-container > .mud-snackbar.mud-alert-filled-success,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success {
    background: linear-gradient(135deg, #e6f7f4 0%, #d4f1ea 100%) !important;
    border-color: rgba(15, 118, 110, 0.22) !important;
    box-shadow:
        0 0 0 4px rgba(15, 118, 110, 0.08),
        0 24px 56px -14px rgba(15, 118, 110, .28),
        0 10px 24px -8px rgba(17, 24, 39, .18),
        0 2px 6px -2px rgba(17, 24, 39, .08) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-success::before,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success::before {
    background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
    box-shadow: inset -1px 0 0 rgba(15, 118, 110, 0.25);
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-icon {
    background: var(--teal-tint) !important;
    color: var(--teal-deep) !important;
}

#mud-snackbar-container > .mud-snackbar.mud-alert-filled-info,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: rgba(29, 78, 216, 0.22) !important;
    box-shadow:
        0 0 0 4px rgba(29, 78, 216, 0.08),
        0 24px 56px -14px rgba(29, 78, 216, .26),
        0 10px 24px -8px rgba(17, 24, 39, .18),
        0 2px 6px -2px rgba(17, 24, 39, .08) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-info::before,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info::before {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-icon {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #1d4ed8 !important;
}

#mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border-color: rgba(180, 83, 9, 0.26) !important;
    box-shadow:
        0 0 0 4px rgba(180, 83, 9, 0.09),
        0 24px 56px -14px rgba(180, 83, 9, .26),
        0 10px 24px -8px rgba(17, 24, 39, .18),
        0 2px 6px -2px rgba(17, 24, 39, .08) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning::before,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-icon {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #b45309 !important;
}

#mud-snackbar-container > .mud-snackbar.mud-alert-filled-error,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: rgba(153, 27, 27, 0.25) !important;
    box-shadow:
        0 0 0 4px rgba(153, 27, 27, 0.09),
        0 24px 56px -14px rgba(153, 27, 27, .3),
        0 10px 24px -8px rgba(17, 24, 39, .2),
        0 2px 6px -2px rgba(17, 24, 39, .08) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-error::before,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error::before {
    background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-icon {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #991b1b !important;
}

/* ── Entry/exit - direction-aware drop-in with bounce ────────────── */
#mud-snackbar-container > .mud-snackbar.mud-snackbar-animation-enter {
    animation: snackbar-enter .34s cubic-bezier(.18, .89, .32, 1.28);
}
#mud-snackbar-container > .mud-snackbar.mud-snackbar-animation-leave {
    animation: snackbar-leave .22s ease forwards;
}
@keyframes snackbar-enter {
    from { opacity: 0; transform: translateY(-18px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes snackbar-leave {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px) scale(.98); }
}
@keyframes snackbar-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Force all inner text (message element, action button labels, etc.) to
   inherit the pill colour - MudBlazor's filled alert defaults force white
   on inner spans which becomes illegible on our light pastel variants. */
#mud-snackbar-container > .mud-snackbar,
#mud-snackbar-container > .mud-snackbar .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar .mud-alert-message {
    color: var(--ink) !important;
}
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message,
#mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-content-message {
    color: var(--ink) !important;
}

/* ── Dark theme: solid dark surface (no transparency) ───────────── */
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar {
    background: #161b2b !important;
    color: #f5f7fa !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 24px 52px -12px rgba(0, 0, 0, .72),
        0 8px 20px -6px rgba(0, 0, 0, .46) !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar .mud-snackbar-icon {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* Severity tints are solid dark-teal/blue/amber/red tones - no rgba so the
   pill stays fully opaque against the sidebar/body behind it. */
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal {
    background: linear-gradient(135deg, #1b2130 0%, #151a28 100%) !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-content-message,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-content-message {
    color: #e5e7eb !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-icon,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success {
    background: linear-gradient(135deg, #13342f 0%, #0f2b27 100%) !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info {
    background: linear-gradient(135deg, #16253f 0%, #102039 100%) !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning {
    background: linear-gradient(135deg, #3a2a0f 0%, #2e1f08 100%) !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error {
    background: linear-gradient(135deg, #3a1414 0%, #2b0f0f 100%) !important;
}

/* Dark-mode text colour per severity - tinted light so it reads clearly
   against the dark gradient backgrounds above. Targets both the pill root
   and the inner message element (MudBlazor sometimes forces white/ink on
   inner spans, so we override per-element). */
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-content-message {
    color: #b8f0e2 !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-content-message {
    color: #cfe0ff !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-content-message {
    color: #fde3a7 !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-content-message {
    color: #ffc9c9 !important;
}

/* Dark-mode severity icons - brighten so they pop against dark pill */
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-icon {
    background: rgba(94, 234, 212, 0.14) !important;
    color: #5eead4 !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-icon {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #93c5fd !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-icon {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #fbbf24 !important;
}
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-icon {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
}

/* ── OS-level dark fallback ────────────────────────────────────────
   When the user hasn't picked an explicit theme (localStorage absent
   → no data-theme attribute), the tokens flip dark via prefers-color-
   scheme but our [data-theme="dark"] snackbar rules above don't fire.
   This happens on iOS/MAUI where "system" is the default and the OS
   is dark: pills kept the light pastel bg while tokens flipped ink to
   white = illegible. Mirror every dark rule here under the same
   :root:not([data-theme="light"]) pattern used in tokens.css.      */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar {
        background: #161b2b !important;
        color: #f5f7fa !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        box-shadow:
            0 24px 52px -12px rgba(0, 0, 0, .72),
            0 8px 20px -6px rgba(0, 0, 0, .46) !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar .mud-snackbar-icon {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal {
        background: linear-gradient(135deg, #1b2130 0%, #151a28 100%) !important;
        color: #e5e7eb !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-content-message,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-content-message {
        color: #e5e7eb !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-normal .mud-snackbar-icon,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-normal .mud-snackbar-icon {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #cbd5e1 !important;
    }

    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success {
        background: linear-gradient(135deg, #13342f 0%, #0f2b27 100%) !important;
        color: #b8f0e2 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-content-message,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-content-message {
        color: #b8f0e2 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-success .mud-snackbar-icon,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-success .mud-snackbar-icon {
        background: rgba(94, 234, 212, 0.14) !important;
        color: #5eead4 !important;
    }

    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info {
        background: linear-gradient(135deg, #16253f 0%, #102039 100%) !important;
        color: #cfe0ff !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-content-message,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-content-message {
        color: #cfe0ff !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-info .mud-snackbar-icon,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-info .mud-snackbar-icon {
        background: rgba(96, 165, 250, 0.16) !important;
        color: #93c5fd !important;
    }

    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning {
        background: linear-gradient(135deg, #3a2a0f 0%, #2e1f08 100%) !important;
        color: #fde3a7 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-content-message,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-content-message {
        color: #fde3a7 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-warning .mud-snackbar-icon,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-warning .mud-snackbar-icon {
        background: rgba(251, 191, 36, 0.18) !important;
        color: #fbbf24 !important;
    }

    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error {
        background: linear-gradient(135deg, #3a1414 0%, #2b0f0f 100%) !important;
        color: #ffc9c9 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-content-message,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-content-message {
        color: #ffc9c9 !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-alert-filled-error .mud-snackbar-icon,
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar.mud-snackbar-filled-error .mud-snackbar-icon {
        background: rgba(248, 113, 113, 0.18) !important;
        color: #fca5a5 !important;
    }

    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button {
        color: rgba(245, 247, 250, 0.72) !important;
    }
    :root:not([data-theme="light"]) #mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f5f7fa !important;
    }
}

/* Dark-mode close button - lighten hover target so it's visible */
[data-theme="dark"] #mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button {
    color: rgba(245, 247, 250, 0.72) !important;
}
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] #mud-snackbar-container > .mud-snackbar .mud-snackbar-close-button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f5f7fa !important;
}
}


/* ==============================================================
   CALENDAR (Syncfusion SfSchedule) - global overrides for the
   bits that are rendered outside the scoped .razor.css tree:
   quick-info popups, editor dialogs, and any spillover from
   Syncfusion's default material3 theme. Scoped styling of the
   main grid lives in Features/09_Calendar/CalendarPage.razor.css.
   ============================================================== */

/* Popups/dialogs are portaled to <body> - scoped CSS can't reach them. */
.e-quick-popup-wrapper,
.e-schedule-dialog {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--sans) !important;
    overflow: hidden !important;
}

.e-quick-popup-wrapper .e-popup-header,
.e-schedule-dialog .e-dlg-header-content {
    background: var(--teal-deep) !important;
    color: #fff !important;
    padding: 12px 18px !important;
    border-bottom: none !important;
    font-family: var(--sans) !important;
}

.e-quick-popup-wrapper .e-popup-header .e-subject,
.e-quick-popup-wrapper .e-popup-header .e-header-icon-wrapper {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.e-quick-popup-wrapper .e-popup-content,
.e-schedule-dialog .e-dlg-content {
    padding: 16px 18px !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    font-size: 13px !important;
}

.e-quick-popup-wrapper .e-popup-content .e-time-details,
.e-quick-popup-wrapper .e-popup-content .e-location-details,
.e-quick-popup-wrapper .e-popup-content .e-description-details {
    color: var(--ink-2) !important;
    font-size: 12.5px !important;
    padding: 4px 0 !important;
}

/* Icons on the popup header (close, edit, delete) */
.e-quick-popup-wrapper .e-popup-header .e-btn,
.e-quick-popup-wrapper .e-popup-header .e-tbar-btn,
.e-schedule-dialog .e-dlg-header-content .e-btn,
.e-schedule-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
    color: #fff !important;
    background: transparent !important;
    border-radius: 8px !important;
}
@media (hover: hover) and (pointer: fine) {
    .e-quick-popup-wrapper .e-popup-header .e-btn:hover,
.e-schedule-dialog .e-dlg-header-content .e-btn:hover,
.e-schedule-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover {
    background: rgba(255, 255, 255, .14) !important;
}
}


/* Footer action buttons */
.e-quick-popup-wrapper .e-event-popup .e-popup-footer,
.e-schedule-dialog .e-footer-content {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line) !important;
    padding: 10px 14px !important;
}

.e-quick-popup-wrapper .e-event-create,
.e-quick-popup-wrapper .e-event-edit,
.e-schedule-dialog .e-footer-content .e-btn.e-primary {
    background: var(--teal) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    font-family: var(--sans) !important;
    box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .e-quick-popup-wrapper .e-event-create:hover,
.e-quick-popup-wrapper .e-event-edit:hover,
.e-schedule-dialog .e-footer-content .e-btn.e-primary:hover {
    background: var(--teal-deep) !important;
}
}


.e-quick-popup-wrapper .e-event-delete,
.e-schedule-dialog .e-footer-content .e-btn.e-flat {
    background: transparent !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-family: var(--sans) !important;
}
@media (hover: hover) and (pointer: fine) {
    .e-quick-popup-wrapper .e-event-delete:hover,
.e-schedule-dialog .e-footer-content .e-btn.e-flat:hover {
    background: var(--bg) !important;
    color: var(--ink) !important;
}
}


/* Editor form inputs inside the full dialog */
.e-schedule-dialog .e-dlg-content .e-input,
.e-schedule-dialog .e-dlg-content .e-input-group,
.e-schedule-dialog .e-dlg-content .e-dropdownlist,
.e-schedule-dialog .e-dlg-content textarea {
    font-family: var(--sans) !important;
    color: var(--ink) !important;
    background: var(--surface) !important;
    border-color: var(--line) !important;
    border-radius: 10px !important;
}

.e-schedule-dialog .e-dlg-content .e-input-group:focus-within,
.e-schedule-dialog .e-dlg-content .e-input:focus {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px var(--teal-mist) !important;
}

.e-schedule-dialog .e-dlg-content .e-float-text,
.e-schedule-dialog .e-dlg-content label {
    color: var(--muted) !important;
    font-family: var(--sans) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Dialog overlay darker in dark mode */
.e-dlg-overlay {
    background: rgba(10, 13, 20, .55) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* ---- Dark-mode specific tweaks ----
   Tokens already flip automatically (var(--surface) etc.), but Syncfusion's
   own colour rules can leak through - these catch the most common ones. */
[data-theme="dark"] .e-quick-popup-wrapper,
[data-theme="dark"] .e-schedule-dialog {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .e-quick-popup-wrapper .e-popup-header,
[data-theme="dark"] .e-schedule-dialog .e-dlg-header-content {
    background: color-mix(in srgb, var(--teal) 55%, #000 45%) !important;
}
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .e-schedule-dialog .e-footer-content .e-btn.e-flat:hover,
[data-theme="dark"] .e-quick-popup-wrapper .e-event-delete:hover {
    background: rgba(255, 255, 255, .06) !important;
}
}


/* Datepicker popup used inside the schedule editor - matches our calendar
   palette instead of the Syncfusion material3 default. */
.e-popup.e-datepicker,
.e-popup.e-datetimepicker,
.e-popup.e-timepicker {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    font-family: var(--sans) !important;
}

.e-popup.e-datepicker .e-calendar .e-today,
.e-popup.e-datepicker .e-calendar .e-selected {
    background: var(--teal) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
@media (hover: hover) and (pointer: fine) {
    .e-popup.e-datepicker .e-calendar .e-cell:hover,
.e-popup.e-timepicker .e-list-item:hover {
    background: var(--teal-mist) !important;
    color: var(--teal-deep) !important;
}
}


/* ------------------------------------------------------------------
   Global dialog variants
   ------------------------------------------------------------------
   These classes are attached to MudBlazor's dialog wrapper via
   `MudDialogService.ShowComponent<T>(cssclass: "dialog-form")`. They
   must live in a globally-loaded stylesheet - when they were scoped
   inside CenterDialog.razor's <style> block they only reached the DOM
   if CenterDialog rendered, which pickers called directly via
   ShowComponent bypass → desktop dialogs came up un-centered. */

/* Dialogs ride MudBlazor's `.mud-dialog` element. `cssclass` on ShowComponent
   gets applied there too, but MudBlazor's own `.mud-dialog-width-sm` / `-fullwidth`
   classes carry equal specificity - so plain `.dialog-form { ... !important }`
   sometimes loses to the fact that MudBlazor's class appears later in the
   cascade. Joining the selectors (`.mud-dialog.dialog-form`) gives us +10
   specificity which consistently wins.

   Centering on desktop: MudBlazor wraps the dialog in `.mud-dialog-container`
   with flex-centering, so `margin: auto` on the dialog itself is what keeps
   it off the top-left corner. Previous iteration forced `margin: 0 !important`
   which broke centering. Now we leave margin alone and only override it for
   the mobile bottom-sheet collapse. */

.mud-dialog.dialog-form,
.dialog-form {
    width: min(640px, 92vw) !important;
    max-width: 640px !important;
    height: 86vh !important;
    max-height: 86vh !important;
    overflow: hidden !important;
}

/* Make MudBlazor's internal content wrapper fill the dialog and clip so the
   inner `.pick-modal-body` / `.rota-form-body` can actually scroll. Using
   `height: 100%` (not flex on the outer `.mud-dialog`) keeps MudBlazor's own
   animation state machine intact - forcing `display: flex` on `.mud-dialog`
   caused a double-render flicker because it conflicted with MudExtensions'
   entrance animation starting state. */
.mud-dialog.dialog-form > .mud-dialog-content,
.dialog-form > .mud-dialog-content {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.mud-dialog.dialog-form > .mud-dialog-content > *,
.dialog-form > .mud-dialog-content > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* Compact variant for short utility dialogs (avatar crop, confirm prompts).
   Narrow width, content-driven height - `dialog-form` would force 86vh which
   leaves big empty surface below the content. */
.mud-dialog.dialog-avatar-crop,
.dialog-avatar-crop {
    width: min(420px, 92vw) !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: 86vh !important;
    overflow: hidden !important;
}

.mud-dialog.dialog-avatar-crop > .mud-dialog-content,
.dialog-avatar-crop > .mud-dialog-content {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.mud-dialog.dialog-avatar-crop > .mud-dialog-content > *,
.dialog-avatar-crop > .mud-dialog-content > * {
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .mud-dialog.dialog-avatar-crop,
    .dialog-avatar-crop {
        border-radius: 24px 24px 0 0 !important;
        width: 100vw !important;
        max-width: unset !important;
        margin: auto 0 0 0 !important;
        align-self: flex-end !important;
    }
}

.mud-dialog.dialog-popup,
.dialog-popup {
    height: 80vh !important;
    width: 80vw !important;
    max-width: 880px !important;
}

.mud-dialog.dialog-central,
.dialog-central {
    height: 100vh !important;
    width: 100vw !important;
    max-width: unset !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Height = full viewport minus the status bar / notch (env(safe-area-inset-top)).
   With align-self: flex-end pinning the dialog to the container's bottom edge
   (which equals the screen edge thanks to viewport-fit=cover), this lands the
   dialog's top edge exactly at env(safe-area-inset-top) - no peek of dim
   backdrop between dialog and status bar, no clipping behind the notch.
   100dvh (dynamic viewport height) instead of 100vh so the size doesn't jump
   when mobile browser chrome collapses/expands.
   Bottom safe-area (Android nav bar / iOS home indicator) is handled inside
   the hosted footer classes (.modal-foot / .act-form-foot / .upl-form-foot)
   and in scrollable bodies for footer-less dialogs (.pick-modal-body's
   picker-body). That way the footer's coloured background paints to the
   screen edge while interactive content stays tappable. */
.mud-dialog.dialog-bottom-card,
.dialog-bottom-card {
    border-radius: 24px 24px 0 0 !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
    width: 100vw !important;
    max-width: unset !important;
    margin: auto 0 0 0 !important;
    align-self: flex-end !important;
}

/* On narrow viewports, popup / form variants collapse to a bottom sheet
   so they stay finger-reachable. The align-self trick pins them to the
   bottom of the flex-centered container without needing absolute positioning.
   Same safe-area treatment as .dialog-bottom-card above. */
@media (max-width: 600px) {
    .mud-dialog.dialog-popup,
    .mud-dialog.dialog-form,
    .dialog-popup,
    .dialog-form {
        border-radius: 24px 24px 0 0 !important;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px) !important;
        width: 100vw !important;
        max-width: unset !important;
        margin: auto 0 0 0 !important;
        align-self: flex-end !important;
    }
}