/* Shared Modal Styles — Material Design 3 Dialog */

/* === Scrim overlay === */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.32); /* MD3 scrim */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    transition: opacity var(--md-duration-m, 300ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1));
}

.modal-overlay.hidden {
    display: none !important;
}

.modal-overlay.opacity-0 {
    pointer-events: none;
}

@media (min-width: 768px) {
    .modal-overlay {
        align-items: center;
        padding: 1rem;
    }
}

/* === Dialog container === */
.modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 36rem;
    /* Mobile: bottom sheet — round top corners only */
    border-top-left-radius: var(--md-shape-xl, 28px);
    border-top-right-radius: var(--md-shape-xl, 28px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* MD3 elevation 3 */
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15),
                0 1px 3px rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    padding-top: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* MD3 emphasized enter — spring-like */
    transition: transform var(--md-duration-m, 300ms) var(--md-easing-enter, cubic-bezier(0.05,0.7,0.1,1.0)),
                opacity var(--md-duration-s, 150ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1));
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    /* Enter animation */
    animation: modal-enter-mobile var(--md-duration-m, 300ms) var(--md-easing-enter, cubic-bezier(0.05,0.7,0.1,1.0)) both;
}

@keyframes modal-enter-mobile {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.dark .modal-content {
    background-color: var(--md-surface-container, #211F26);
    border-color: var(--md-outline-variant, #49454F);
    box-shadow: 0 6px 16px 4px rgba(0, 0, 0, 0.45),
                0 2px 6px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .modal-content {
        border-radius: var(--md-shape-xl, 28px);
        padding-top: 1.5rem;
        /* MD3 Dialog — scale + fade enter */
        animation: modal-enter-desktop var(--md-duration-m, 300ms) var(--md-easing-enter, cubic-bezier(0.05,0.7,0.1,1.0)) both;
    }

    @keyframes modal-enter-desktop {
        from { transform: scale(0.9); opacity: 0; }
        to   { transform: scale(1);   opacity: 1; }
    }
}

/* === Drag handle (mobile bottom sheet) === */
.modal-handle {
    display: flex;
    flex: none;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
    cursor: grab;
    touch-action: none;
}

@media (min-width: 768px) {
    .modal-handle {
        display: none;
    }
}

.modal-handle-bar {
    width: 2rem;
    height: 4px;
    background-color: var(--md-outline-variant, #CAC4D0);
    border-radius: var(--md-shape-full, 9999px);
}

.dark .modal-handle-bar {
    background-color: var(--md-outline, #938F99);
}

/* === Modal typography helpers (MD3 roles) === */
.modal-title {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: 1.25rem;   /* MD3 Headline Small */
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--md-on-surface, #1C1B1F);
    margin-bottom: 0.5rem;
}

.dark .modal-title {
    color: var(--md-on-surface, #E6E1E5);
}

.modal-body {
    font-size: 0.875rem;  /* MD3 Body Medium */
    line-height: 1.5;
    color: var(--md-on-surface-variant, #49454F);
}

.dark .modal-body {
    color: var(--md-on-surface-variant, #CAC4D0);
}

/* === Modal action buttons === */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: var(--md-shape-full, 9999px);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.006em;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--md-duration-s, 150ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1)),
                transform  var(--md-duration-s, 150ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1));
}

/* State layer */
.modal-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    pointer-events: none;
    border-radius: inherit;
    transition: opacity var(--md-duration-s, 150ms) var(--md-easing-standard, cubic-bezier(0.2,0,0,1));
}
.modal-btn:hover::before  { opacity: 0.08; }
.modal-btn:active::before { opacity: 0.12; }
.modal-btn:active { transform: scale(0.97); }

/* Filled (primary action) */
.modal-btn-filled {
    background: var(--md-primary-container, #3D3F90);
    color: var(--md-on-primary-container, #E0E0FF);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.modal-btn-filled:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Text (secondary action) */
.modal-btn-text {
    background: transparent;
    color: var(--md-primary, #BEC2FF);
}

/* Tonal */
.modal-btn-tonal {
    background: var(--md-secondary-container, #44435A);
    color: var(--md-on-secondary-container, #E1E0F9);
}

/* Destructive */
.modal-btn-destructive {
    background: transparent;
    color: #FFB4AB; /* MD3 error */
}