/* AlignSmart MudBlazor Theme Override */
/* This file contains custom theme overrides for MudBlazor components */

/* Add your custom theme overrides here */

/* Fix warning (yellow) chip text and icon colors to be white */
.mud-chip.mud-chip-color-warning {
    color: white !important;
}

.mud-chip.mud-chip-color-warning .mud-chip-icon {
    color: white !important;
}

/* Add top padding to score labels to center them with score badges */
.score-label {
    padding-top: 7px;
}

.mud-dialog-content {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important;
    overscroll-behavior: contain !important; /* Prevent scroll bleed-through to page behind */
}

/* ==========================================================================
   Mobile Fullscreen Modals with Safe Area Support
   ========================================================================== */

/* Make modals fullscreen on mobile */
@media (max-width: 768px) {
    .mud-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mud-dialog-container {
        align-items: stretch !important;
    }

    /* Ensure dialog content scrolls properly */
    .mud-dialog-content {
        overflow-y: auto !important;
        flex: 1 1 auto !important;
        padding-bottom: 6rem !important;
        overscroll-behavior: contain !important; /* Prevent scroll bleed-through to page behind */
    }
}

/* iOS safe-area handling for dialogs - apply universally since env() returns 0 on non-iOS */
@media (max-width: 768px) {
    .mud-dialog {
        padding-top: env(safe-area-inset-top, 0) !important;
        box-sizing: border-box !important;
    }

    /* Fix for Close Button on iOS being hidden or clipped */
    .mud-dialog-title .mud-button-close,
    .mud-dialog-title .mud-icon-button {
        top: calc(env(safe-area-inset-top, 0) + 4px) !important;
    }
}

/* ==========================================================================
   Alert-Style Dialogs - Stay Compact on Mobile (iOS-like behavior)
   ========================================================================== */

/* Override fullscreen behavior for dialogs containing .alert-dialog-marker */
@media (max-width: 768px) {
    .mud-dialog:has(.alert-dialog-marker) {
        min-width: min(320px, 90vw) !important;
        max-width: 90% !important;
        max-height: 70vh !important;
        width: auto !important;
        height: auto !important;
        margin: auto !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }

    .mud-dialog-container:has(.alert-dialog-marker) {
        align-items: center !important;
        justify-content: center !important;
    }

    .mud-dialog:has(.alert-dialog-marker) .mud-dialog-content {
        max-height: 40vh;
        overflow-y: auto;
        padding-bottom: 1rem !important;
    }

    .mud-dialog:has(.alert-dialog-marker) .mud-dialog-actions {
        padding: 0.75rem 1rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0)) !important;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
    }
}