/* ============================================================
   SDÍLENÝ MODAL VZOR
   Vzor: overlay (position:fixed, tmavé pozadí) + box (bílá karta,
   scroll uvnitř, na mobilu sheet přisedlý ke spodku). Používá custom
   properties ze styles.css (--color-*, --spacing-*, --radius-*,
   --font-size-*, --transition-*) - načti tento soubor AŽ PO styles.css.

   Použití ze stránky:
     <link rel="stylesheet" href="styles/styles.css">
     <link rel="stylesheet" href="shared/modal.css">

   Markup: <div class="modal-overlay" style="display:none;" role="dialog"
   aria-modal="true"><div class="modal-box">...</div></div>
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.modal-box {
    background: var(--color-bg-white);
    border-radius: 8px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-box h2 {
    font-size: var(--font-size-xlarge);
    color: var(--color-bg-dark);
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-box {
        border-radius: 8px 8px 0 0;
        max-width: 100%;
        max-height: 95vh;
    }
}

/* ============================================================
   POTVRZOVACI DIALOG (ArchaModal.confirmAction, shared/modal.js)
   Mensi varianta .modal-box + vlastni z-index: confirmAction se casto
   vola nad uz otevrenym modalem (napr. freeze-check v app.js), proto
   musi byt nad beznym .modal-overlay (1000), ale pod kontejnerem toastu
   (shared/components.css, 1100) - aby pripadny toast po zavreni dialogu
   nezustal schovany pod nim.
   ============================================================ */

.modal-overlay.modal-sm {
    z-index: 1050;
}

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

.modal-overlay.modal-sm .modal-box p {
    white-space: pre-line;
}