/* Eigenheiten der Equipment-Verwaltung. Alles Weitere kommt von Bootstrap 5.3. */

:root {
  --eq-dunkel: #172029;
  --eq-dunkel-hell: #223142;
  --eq-akzent: #e0993c;
  --eq-akzent-dunkel: #c27f27;
}

body { background-color: #f6f7f9; }

/* Kopfzeile ------------------------------------------------------------- */
.eq-navbar {
  background-color: var(--eq-dunkel);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.eq-navbar .navbar-brand,
.eq-navbar .nav-link { color: rgba(255, 255, 255, .82); }
.eq-navbar .nav-link:hover,
.eq-navbar .nav-link.active { color: #fff; }
.eq-navbar .nav-link.active { border-bottom: 2px solid var(--eq-akzent); }
.eq-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.eq-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.eq-suche { min-width: 12rem; }

.eq-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: .5rem;
  background: var(--eq-akzent); color: #1b1b1b;
  font-weight: 700; font-size: .85rem; letter-spacing: .02em;
}
.eq-logo--gross { width: 3rem; height: 3rem; font-size: 1.1rem; }

.eq-btn-akzent {
  background-color: var(--eq-akzent); border-color: var(--eq-akzent); color: #1b1b1b;
}
.eq-btn-akzent:hover, .eq-btn-akzent:focus {
  background-color: var(--eq-akzent-dunkel); border-color: var(--eq-akzent-dunkel); color: #1b1b1b;
}

/* Karten und Kennzahlen -------------------------------------------------- */
.eq-karte { border: 1px solid rgba(23, 32, 41, .1); box-shadow: 0 1px 2px rgba(23, 32, 41, .05); }
.eq-karte .card-header { background-color: #fff; font-weight: 600; border-bottom-color: rgba(23, 32, 41, .08); }

.eq-kennzahl {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid rgba(23, 32, 41, .1); border-radius: .5rem;
  padding: 1rem; height: 100%;
}
.eq-kennzahl:hover { border-color: var(--eq-akzent); }
.eq-kennzahl__wert { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.eq-kennzahl__text { display: block; font-size: .85rem; color: #6c757d; }

.eq-dl dt { font-weight: 500; color: #6c757d; }
.eq-tabelle > :not(caption) > * > * { padding-top: .6rem; padding-bottom: .6rem; }

/* Anmeldung -------------------------------------------------------------- */
.eq-leer { min-height: 100vh; display: flex; align-items: center; justify-content: center;
           background: linear-gradient(160deg, var(--eq-dunkel), var(--eq-dunkel-hell)); }
.eq-login { width: 100%; display: flex; justify-content: center; padding: 2rem 1rem; }
.eq-login__karte { background: #fff; border-radius: .75rem; padding: 2rem; width: 100%; max-width: 26rem;
                   box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: center; }
.eq-trenner { display: flex; align-items: center; gap: .75rem; color: #9aa4ae; margin: 1rem 0; font-size: .85rem; }
.eq-trenner::before, .eq-trenner::after { content: ""; flex: 1; border-top: 1px solid #e3e6e9; }

/* Bilder ----------------------------------------------------------------- */
.eq-vorschau { display: block; width: 3.5rem; height: 3.5rem; object-fit: cover;
               border-radius: .4rem; background: #e9ecef; }
.eq-vorschau--klein { width: 2.5rem; height: 2.5rem; }
.eq-vorschau--leer { background: repeating-linear-gradient(45deg, #edf0f2, #edf0f2 6px, #e4e8eb 6px, #e4e8eb 12px); }

.eq-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }
.eq-galerie__eintrag { position: relative; margin: 0; }
.eq-galerie__eintrag img { width: 100%; height: 7rem; object-fit: cover; border-radius: .4rem; }
.eq-galerie__weg { position: absolute; top: .25rem; right: .25rem; border: 0; border-radius: 50%;
                   width: 1.5rem; height: 1.5rem; line-height: 1; background: rgba(0, 0, 0, .55); color: #fff; }

.eq-qr { width: 11rem; max-width: 100%; }

/* Auswahllisten ---------------------------------------------------------- */
.eq-auswahlliste { max-height: 18rem; overflow-y: auto; }
.eq-auswahlliste--hoch { max-height: 30rem; }

.eq-wahl { padding: .5rem .25rem; border-bottom: 1px solid rgba(23, 32, 41, .07); }
.eq-wahl:last-child { border-bottom: 0; }
.eq-wahl--aus { opacity: .55; }
.eq-menge { width: 5rem; flex: none; }
.eq-haftend { position: sticky; top: 5rem; }

/* Wochenplan ------------------------------------------------------------- */
.eq-plan__kopf, .eq-plan__koerper { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.eq-plan__kopf { margin-bottom: .5rem; }
.eq-plan__tag { text-align: center; font-size: .8rem; padding: .25rem; border-radius: .3rem; background: #eef1f4; }
.eq-plan__tag.is-heute { background: var(--eq-akzent); color: #1b1b1b; font-weight: 600; }
.eq-plan__wochentag { display: block; font-weight: 600; }
.eq-plan__datum { display: block; color: #6c757d; }
.eq-plan__tag.is-heute .eq-plan__datum { color: #4a3a1c; }
.eq-plan__koerper { grid-auto-rows: minmax(2.4rem, auto); }
.eq-plan__balken { display: block; text-decoration: none; padding: .3rem .5rem; border-radius: .35rem;
                   font-size: .8rem; line-height: 1.2; overflow: hidden; color: #10202c;
                   background: #cfe2f3; border: 1px solid #a9c9e6; }
.eq-plan__balken--upcoming { background: #e2eefb; border-color: #bcd7f2; }
.eq-plan__balken--returned { background: #dcefdc; border-color: #b6dcb6; }
.eq-plan__person { display: block; color: #4a5964; font-size: .72rem; }

.eq-scanner { width: 100%; border-radius: .5rem; background: #000; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 575.98px) {
  .eq-plan__kopf, .eq-plan__koerper { font-size: .7rem; }
  .eq-haftend { position: static; }
}