/* ============================================================
   ui-cards.css

   Listen- und Kartenelemente: Ausleih-Eintraege, Typ-Kennzeichen,
   offene Inhaltsaenderungen, Status-Banner, gesperrte Nutzer.
   ============================================================ */

/* ── Ausleih-Eintrag (Admin-Auswahl im Scanner) ───────────── */

.loan-entry {
  background: var(--surface, #162436);
  border: 1px solid rgba(0, 160, 221, .15);
  border-radius: 10px;
  padding: .85rem 1rem;
  margin-bottom: .5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.loan-entry__name { font-weight: 600; color: var(--text-1, #f0f8ff); }
.loan-entry__meta { font-size: .8rem; color: var(--text-3, #4a7a9b); }

/* ── Typ-Kennzeichen (Kiste / Gegenstand) ─────────────────── */

.type-pill {
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 99px;
  display: inline-block;
}
.type-pill--box  { background: rgba(0, 160, 221, .12); color: #00a0dd; }
.type-pill--item { background: rgba(245, 158, 11, .12); color: #f59e0b; }
.type-pill--sm   { font-size: .72rem; padding: .15rem .5rem; }

/* Aufklappbarer Karteninhalt auf der Startseite */
.card-body { display: none; }
.card-body.is-open { display: block; }

.card-header__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
}

/* Sekundaerer Link neben einem Filter */
.filter-reset {
  padding: .8rem 1rem;
  background: var(--surface-2, #1d2f45);
  border: 1px solid var(--border-2, rgba(0,160,221,.2));
  border-radius: var(--r-sm, 10px);
  color: var(--text-2, #8fb8d4);
  text-decoration: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: .9rem;
}

.table-empty {
  text-align: center;
  color: var(--text-3, #4a7a9b);
  padding: 2rem;
}

/* Der Bestaetigungs-Dialog der Bearbeitungsseiten nutzt weiterhin
   .delete-confirm-overlay aus user.css; hier nur das Umschalten
   ueber das hidden-Attribut statt style="display:none". */
.delete-confirm-overlay[hidden] { display: none !important; }
.delete-confirm-overlay:not([hidden]) { display: flex; }

/* Flacher Sekundaer-Button (Abbrechen, Zurueck) */
[data-cancel], .btn-flat {
  background: var(--surface-3, #24384f) !important;
  color: var(--text-2, #8fb8d4) !important;
  box-shadow: none !important;
}

/* ── Offene Inhaltsänderungen ─────────────────────────────── */

.change-card {
  background: var(--surface-2, #1d2f45);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: var(--r, 16px);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.change-card__name { font-weight: 700; color: var(--text-1, #f0f8ff); }
.change-card__sub  { font-size: .78rem; color: var(--text-3, #4a7a9b); }

.change-card__badge {
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 99px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  color: #f59e0b;
}

.change-card__ack { flex: 2; min-width: 140px; }

.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}

.diff-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .4rem;
}
.diff-label--before { color: var(--text-3, #4a7a9b); }
.diff-label--after  { color: #22d3a5; }

.diff-box {
  border-radius: 8px;
  padding: .85rem 1rem;
  font-size: .88rem;
  line-height: 1.8;
  min-height: 60px;
}
.diff-box--before {
  background: rgba(244, 63, 94, .06);
  border: 1px solid rgba(244, 63, 94, .2);
  color: var(--text-2, #8fb8d4);
}
.diff-box--after {
  background: rgba(34, 211, 165, .06);
  border: 1px solid rgba(34, 211, 165, .2);
  color: var(--text-1, #f0f8ff);
}

.diff-empty { color: var(--text-3, #4a7a9b); font-style: italic; }

.stack-rows {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .5rem;
}

.btn--edit {
  flex: 1;
  min-width: 100px;
  background: rgba(0, 160, 221, .1);
  border-color: rgba(0, 160, 221, .25);
  color: #00a0dd;
}
.btn--grow1 { flex: 1; }
.btn--grow2 { flex: 2; }

.modal-box--wide { width: min(95vw, 560px); max-height: 90dvh; }

/* ── Status-Banner (Wartungsseite) ────────────────────────── */

.status-banner {
  border-radius: var(--r, 16px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid transparent;
}
.status-banner--warn { background: rgba(245, 158, 11, .08);  border-color: rgba(245, 158, 11, .3); }
.status-banner--ok   { background: rgba(34, 211, 165, .08); border-color: rgba(34, 211, 165, .3); }

.status-banner__icon  { font-size: 2rem; }
.status-banner__title { font-weight: 700; font-size: 1rem; }
.status-banner--warn .status-banner__title { color: #f59e0b; }
.status-banner--ok   .status-banner__title { color: #22d3a5; }
.status-banner__text  { color: var(--text-2, #8fb8d4); font-size: .85rem; margin-top: .2rem; }

.bullet-list { padding-left: 1.5rem; line-height: 2; }

.user-edit-form-button--ok {
  background: linear-gradient(135deg, #22d3a5, #0ea57a) !important;
}

/* ── Gesperrte Nutzer (Benutzerverwaltung) ────────────────── */

.locked-panel {
  background: rgba(244, 63, 94, .08);
  border: 1px solid rgba(244, 63, 94, .25);
  border-radius: var(--r, 16px);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.locked-panel__title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f43f5e;
  margin-bottom: .75rem;
}

.locked-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(244, 63, 94, .1);
}
.locked-user__name  { color: var(--text-1, #f0f8ff); font-weight: 600; }
.locked-user__mail  { color: var(--text-3, #4a7a9b); font-size: .82rem; margin-left: .5rem; }
.locked-user__count { color: #f43f5e; font-size: .78rem; margin-left: .5rem; }

/* ── Lagerübersicht: Karten-Zusätze ───────────────────────── */

.loan-badge--blocked { background: rgba(139, 92, 246, .15); border-color: rgba(139, 92, 246, .4); color: #8b5cf6; }
.loan-badge--planned { background: rgba(245, 158, 11, .1);  border-color: rgba(245, 158, 11, .3); color: #f59e0b; }
.loan-badge--partial { background: rgba(245, 158, 11, .15); border-color: rgba(245, 158, 11, .4); color: #f59e0b; }

button.block-info-btn {
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
  border-radius: 99px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
}

.card-block-note {
  font-size: .72rem;
  margin: .25rem 0 .1rem;
  text-align: center;
}
.card-block-note--blocked { color: #8b5cf6; }
.card-block-note--planned { color: #f59e0b; }

.card-qty { font-weight: 600; font-size: .85rem; }
.card-qty.is-empty { color: #f43f5e; }
.card-qty.is-low   { color: #f59e0b; }
.card-qty.is-full  { color: var(--brand, #00a0dd); }

.modal-box--violet { width: min(92vw, 420px); border-color: rgba(139, 92, 246, .3); }

.block-popup-body {
  background: rgba(139, 92, 246, .08);
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 10px;
  padding: 1rem;
  color: #c4b5fd;
  font-size: .9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.menu-btn--accent { color: var(--accent, #f59e0b); }

.btn-flat--centered {
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Zustaende ────────────────────────────────────────────── */

.is-hidden { display: none !important; }
#flash-msg.is-fading { opacity: 0; }

/* ── Prüftabelle (QR-Selbsttest) ──────────────────────────── */

.qr-check {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.qr-check th,
.qr-check td {
  text-align: left;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--border, rgba(0,160,221,.12));
}
.qr-check th {
  color: var(--text-3, #4a7a9b);
  font-weight: 600;
  width: 45%;
}
.qr-check td {
  color: var(--text-1, #f0f8ff);
  word-break: break-all;
}