/* ============================================================
   modal.css — Modal, Overlay
   ============================================================ */

/*
 * .modal-overlay steht bewusst NUR in ui-dialogs.css.
 *
 * Hier stand frueher eine zweite Definition mit display:flex. Sobald die
 * Datei mit dem display:none nicht geladen wurde (etwa weil ein Browser
 * eine alte app.css im Cache hatte), lag ein unsichtbares Vollbild-Overlay
 * mit blur(6px) ueber der ganzen Seite. Zwei Definitionen derselben Klasse
 * in verschiedenen Dateien sind genau dafuer die Einladung.
 */

.modal {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 1.5rem;
  width: 100%; max-width: 520px; max-height: 92dvh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
  animation: modalSlideUp .28s cubic-bezier(.4,0,.2,1) forwards;
}
.modal::before {
  content: ''; display: block;
  width: 36px; height: 4px; border-radius: 99px;
  background: var(--border-2); margin: 0 auto 1.25rem;
}
@media (min-width: 540px) {
  .modal { border-radius: var(--r-lg); animation: modalFadeIn .24s cubic-bezier(.4,0,.2,1) forwards; }
  .modal::before { display: none; }
}
@keyframes modalSlideUp { from{transform:translateY(28px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes modalFadeIn  { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }

.modal h2,.modal h3 { font-size: 1.05rem; margin-bottom: 1.25rem; }
.modal-content { display: flex; flex-direction: column; gap: .85rem; }

.modal-content label {
  display: block; font-size: .76rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: .35rem;
}

.modal-content select,
.modal-content textarea,
.modal-content input {
  display: block; width: 100%;
  padding: .8rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: var(--font-body); font-size: 16px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
  min-height: 48px;
}
.modal-content select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%234a7a9b' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 20px;
  padding-right: 2.5rem; cursor: pointer;
}
.modal-content textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.modal-content select:focus, .modal-content textarea:focus, .modal-content input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,160,221,.2);
}

.close-button {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 1.1rem; cursor: pointer;
  transition: background .2s, color .2s; line-height: 1;
}
.close-button:hover { background: var(--surface-3); color: var(--text-1); }

#infoContent {
  padding: .75rem 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text-2);
  font-size: .9rem; line-height: 1.6; min-height: 44px;
}

/* Buttons im Modal */
#ausleihenButton, .modal button[type="submit"] {
  display: block; width: 100%;
  padding: .9rem 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  border: none; border-radius: var(--r-sm); cursor: pointer; min-height: 50px;
  margin-top: .5rem;
  box-shadow: 0 4px 16px rgba(0,160,221,.25);
  transition: box-shadow .2s, transform .1s;
}
#ausleihenButton:hover, .modal button[type="submit"]:hover {
  box-shadow: 0 6px 24px rgba(0,160,221,.4);
}
#ausleihenButton:active, .modal button[type="submit"]:active { transform: scale(.98); }

#cancelScanButton, .modal button[type="button"] {
  display: block; width: 100%;
  padding: .88rem 1rem;
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  cursor: pointer; min-height: 48px; margin-top: .5rem;
  transition: background .2s, color .2s;
}
#cancelScanButton:hover, .modal button[type="button"]:hover {
  background: var(--surface-3); color: var(--text-1);
}

/* ══ MODAL MOBILE ══ */
@media (max-width: 768px) {
  .modal {
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding: 1.5rem 1.1rem 2rem !important;
    max-height: 92dvh !important;
    animation: modalSlideUp .28s cubic-bezier(.4,0,.2,1) forwards !important;
  }
  /* Drag-Handle oben */
  .modal::after {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: var(--border-2);
    border-radius: 99px;
    margin: -1rem auto 1.25rem;
  }
}

/* ── Scanner Modal Info-Block ── */
.modal-info-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
}

.modal-info-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .3rem;
}

.modal-info-value {
  font-size: .95rem;
  color: var(--text-1);
  line-height: 1.5;
}

/* Modal Titel */
#qrResultContainer .modal-content {
  gap: 1rem !important;
}

/* Trennlinie zwischen Info und Dropdowns */
#qrResultContainer .modal-content .modal-info-block + select,
#qrResultContainer .modal-content .modal-info-block + label {
  margin-top: .5rem;
}

/* ── Scanner Modal Labels ── */
.modal-label {
  display: block !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: .4rem !important;
}

.form-field {
  margin-bottom: .85rem;
}

.form-field select,
.form-field textarea {
  display: block !important;
  width: 100% !important;
}