/* ──────────────────────────────────────────────────────────────
   DataDent — Univerzální modal framework
   3 velikosti: .modal--sm (480px) · .modal--md (720px) · .modal--lg (1024px)
   Použití:
     <div class="modal-overlay" id="X" style="display:none">
       <div class="modal modal--md">
         <header class="modal__head">
           <h2 class="modal__title">Title</h2>
           <button class="modal__close" data-modal-close>×</button>
         </header>
         <div class="modal__body">…obsah…</div>
         <footer class="modal__foot">
           <button class="btn btn--ghost" data-modal-close>Zavřít</button>
           <button class="btn btn--primary">Akce</button>
         </footer>
       </div>
     </div>
   ────────────────────────────────────────────────────────────── */

/*
 * Modals — pouze modaly s `.modal--sm`, `.modal--md` nebo `.modal--lg` modifierem.
 * Stávající modaly bez modifieru používají legacy main.css definice (zpětná kompatibilita).
 */

/* 3 standardní velikosti — applies jen pokud má modal modifier */
.modal.modal--sm,
.modal.modal--md,
.modal.modal--lg {
  position: relative;
  width: 100%;
  max-height: 92vh;
  background: #fff;
  border-radius: 14px;
  padding: 0;
  text-align: left;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 24px 72px rgba(15, 23, 42, .28),
    0 8px 24px rgba(15, 23, 42, .12);
  animation: ddModalPop .22s cubic-bezier(.2, .9, .3, 1.2);
}
.modal.modal--sm { max-width: 480px; }
.modal.modal--md { max-width: 720px; }
.modal.modal--lg { max-width: 1024px; }

@keyframes ddModalPop  {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Header ─── */
.modal__head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.35rem 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.modal__head-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.modal__title {
  font-size: 1.15rem; font-weight: 700; color: #0f172a;
  margin: 0; line-height: 1.3; word-break: break-word;
}
.modal__subtitle {
  font-size: .82rem; color: #64748b; font-weight: 500;
  line-height: 1.4;
}

/* Pozn.: hlavní styl `.modal__close` je v main.css; zde modifikátory pro `.modal.modal--{sm,md,lg}` */
.modal.modal--sm .modal__close,
.modal.modal--md .modal__close,
.modal.modal--lg .modal__close {
  top: .75rem; right: .75rem;
}
.modal__close svg { width: 18px; height: 18px; }
/* Fallback × jen pokud je tlačítko prázdné (nemá text ani svg) */
.modal__close:empty::before {
  content: '×'; font-size: 1.5rem; line-height: 1; font-weight: 400;
}

/* ─── Body ─── */
.modal__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.modal__body--flush { padding: 0; }
.modal__body::-webkit-scrollbar       { width: 8px; }
.modal__body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ─── Footer ─── */
.modal__foot {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding: .85rem 1.35rem 1.1rem;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.modal__foot--start  { justify-content: flex-start; }
.modal__foot--center { justify-content: center; }
.modal__foot--between{ justify-content: space-between; }

/* Mobile */
@media (max-width: 640px) {
  .modal-overlay { padding: .5rem; }
  .modal { max-height: 96vh; border-radius: 12px; }
  .modal__head { padding: .9rem 1rem .85rem; }
  .modal__body { padding: 1rem; }
  .modal__foot { padding: .75rem 1rem; flex-wrap: wrap; }
  .modal__foot .btn { flex: 1 1 auto; }
}