/**
 * ============================================================
 * MODALS.CSS – ŠTÝLY PRE MODÁLY
 * ============================================================
 * Štýly pre modálne okná a dialógy
 * 
 * @version 1.0.0
 * @author EasyWay Team
 * @license MIT
 * ============================================================
 */

/* ============================================================
 * MODAL OVERLAY
 * ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--z-index-modal);
    padding: var(--spacing-4);
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
 * MODAL
 * ============================================================ */

.modal {
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    display: flex;
    flex-direction: column;
    animation: modal-slide-in 0.2s ease;
    overflow: hidden;
}

@keyframes modal-slide-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal--sm {
    max-width: 400px;
}

.modal--lg {
    max-width: 720px;
}

.modal--xl {
    max-width: 960px;
}

.modal--full {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
}

/* ============================================================
 * MODAL HEADER
 * ============================================================ */

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.modal__title-icon {
    font-size: var(--font-size-xl);
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 24px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-radius: var(--radius-base);
}

.modal__close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.modal__close:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* ============================================================
 * MODAL BODY
 * ============================================================ */

.modal__body {
    padding: var(--spacing-6);
    overflow-y: auto;
    flex: 1;
}

.modal__body--scroll {
    max-height: calc(90vh - 120px);
}

.modal__body--no-padding {
    padding: 0;
}

/* ============================================================
 * MODAL FOOTER
 * ============================================================ */

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.modal__footer--between {
    justify-content: space-between;
}

.modal__footer--start {
    justify-content: flex-start;
}

/* ============================================================
 * MODAL VARIANTS
 * ============================================================ */

.modal--danger .modal__header {
    border-bottom-color: var(--color-error);
}

.modal--danger .modal__title {
    color: var(--color-error);
}

.modal--success .modal__header {
    border-bottom-color: var(--color-success);
}

.modal--success .modal__title {
    color: var(--color-success);
}

.modal--warning .modal__header {
    border-bottom-color: var(--color-warning);
}

.modal--warning .modal__title {
    color: var(--color-warning);
}

/* ============================================================
 * RESPONZÍVNY DIZAJN
 * ============================================================ */

@media (max-width: 768px) {
    .modal {
        max-height: 95vh;
        border-radius: var(--radius-lg);
    }

    .modal__header {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .modal__body {
        padding: var(--spacing-4);
    }

    .modal__footer {
        padding: var(--spacing-3) var(--spacing-4);
        flex-wrap: wrap;
    }

    .modal__footer .btn {
        flex: 1;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .modal {
        max-height: 100vh;
        border-radius: 0;
    }

    .modal__header {
        padding: var(--spacing-3);
    }

    .modal__title {
        font-size: var(--font-size-base);
    }

    .modal__body {
        padding: var(--spacing-3);
    }

    .modal__footer {
        padding: var(--spacing-3);
        flex-direction: column;
    }

    .modal__footer .btn {
        width: 100%;
    }
}

/* ============================================================
 * DARK MODE
 * ============================================================ */

@media (prefers-color-scheme: dark) {
    .modal {
        background: var(--color-bg-secondary);
    }

    .modal__header {
        border-bottom-color: var(--color-border-dark);
    }

    .modal__footer {
        border-top-color: var(--color-border-dark);
    }
}

/* ============================================================
 * PRÍSTUPNOSŤ
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .modal-overlay,
    .modal {
        animation: none !important;
    }
}