/* UiUtilModal.css — Modal dialogs */
/* deps: { TokensFixed.css, TokensOklchDark.css } */

@layer components {

    .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--token-z-modal);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--token-padding-16);
        background: var(--token-bg-overlay);
        backdrop-filter: blur(var(--token-blur-4));
        animation: modal-overlay-in var(--token-duration-base) var(--token-ease-smooth);
    }
    
    @keyframes modal-overlay-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .modal {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--token-space-16);
        inline-size: min(var(--token-max-width-448), 100%);
        max-block-size: calc(100vh - var(--token-padding-32));
        padding: var(--token-padding-24);
        background: var(--token-bg-card);
        border: 1px solid var(--token-border-primary);
        border-radius: var(--token-radius-16);
        box-shadow: var(--token-shadow-modal);
        overflow-y: auto;
        animation: modal-in var(--token-duration-base) var(--token-ease-smooth-out);
    }
    
    @keyframes modal-in {
        from { opacity: 0; transform: scale(0.95) translateY(8px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    .modal-header {
        display: flex;
        align-items: center;
        gap: var(--token-space-12);
    }
    
    .modal-icon {
        flex-shrink: 0;
        font-size: var(--token-text-24);
        line-height: 1;
    }
    
    .modal-title {
        flex: 1;
        margin: 0;
        font-family: var(--token-font-heading);
        font-size: var(--token-text-18);
        font-weight: var(--token-weight-600);
        line-height: var(--token-leading-120);
        color: var(--token-text-primary);
    }
    
    .modal-body {
        flex: 1;
    }
    
    .modal-message {
        margin: 0;
        font-size: var(--token-text-14);
        line-height: var(--token-leading-160);
        color: var(--token-text-secondary);
    }
    
    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: var(--token-space-12);
        padding-block-start: var(--token-padding-8);
    }
    
    /* Buttons */
    .modal-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--token-space-8);
        block-size: var(--token-height-40);
        padding-inline: var(--token-padding-20);
        font-family: var(--token-font-primary);
        font-size: var(--token-text-14);
        font-weight: var(--token-weight-500);
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        border: 1px solid transparent;
        border-radius: var(--token-radius-8);
        cursor: pointer;
        transition: 
            background-color var(--token-duration-fast) var(--token-ease-smooth),
            border-color var(--token-duration-fast) var(--token-ease-smooth),
            transform var(--token-duration-fast) var(--token-ease-smooth);
        
        &:focus-visible {
            outline: var(--token-outline-width) solid var(--token-color-brand-orange);
            outline-offset: var(--token-outline-offset-sm);
        }
        
        &:active {
            transform: scale(0.98);
        }
    }
    
    .modal-btn--default {
        background: var(--token-bg-surface);
        color: var(--token-text-primary);
        border-color: var(--token-border-primary);
        
        &:hover {
            background: var(--token-bg-item-hover);
            border-color: var(--token-border-hover);
        }
    }
    
    .modal-btn--primary {
        background: var(--token-color-brand-orange);
        color: var(--token-text-on-brand);
        
        &:hover {
            background: var(--token-color-brand-orange-alt);
        }
    }
    
    .modal-btn--danger {
        background: var(--token-color-status-error);
        color: var(--token-text-on-brand);
        
        &:hover {
            filter: brightness(1.1);
        }
    }
    
    .modal-btn--warning {
        background: var(--token-color-status-warning);
        color: var(--token-text-on-warning);
        
        &:hover {
            filter: brightness(1.05);
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .modal-overlay,
        .modal {
            animation: none;
        }
    }

}