/* ============================================================================
   Feuerwehr Oberursel – Buchungssystem
   Custom theme (loaded via config `css.extension.file`, upgrade-safe)
   Modernes, dezent schillerndes Design in Feuerwehr-Rot / Anthrazit.
   ========================================================================== */

/* ---- Farbpalette -------------------------------------------------------- */
:root,
[data-bs-theme='oberursel'] {
  /* Feuerwehr-Signalrot */
  --fw-red: #e11b22;
  --fw-red-strong: #b3141a;
  --fw-red-dark: #8f0f14;
  --fw-ember: #ff5a3c;
  --fw-anthracite: #1c2126;
  --fw-anthracite-2: #2b323b;
  --fw-ink: #14181c;
  --fw-fog: #f4f5f7;

  /* Von LibreBooking verwendete Primärvariablen überschreiben */
  --primary: var(--fw-red);
  --primary-hover: var(--fw-red-strong);
  --primary-disabled: #d9a7a9;
  --text-color-btn: #ffffff;

  /* Bootstrap-Grundwerte modernisieren */
  --bs-primary: var(--fw-red);
  --bs-primary-rgb: 225, 27, 34;
  --bs-link-color: var(--fw-red-strong);
  --bs-link-hover-color: var(--fw-red-dark);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.45rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-body-color: #232a31;

  /* Terminplan-/Kalenderfarben harmonisieren */
  --hiliteReservation: var(--fw-red);
  --reservedMine: #c0474b;
  --color-lines: #d7dbe0;
}

/* ---- Grundlayout & Typografie ------------------------------------------ */
body {
  background:
    radial-gradient(1200px 480px at 88% -8%, rgba(225, 27, 34, 0.08), transparent 60%),
    radial-gradient(900px 420px at -6% 4%, rgba(28, 33, 38, 0.06), transparent 55%),
    #f6f7f9;
  color: var(--bs-body-color);
  letter-spacing: 0.1px;
}

/* Feine Farb-Fortschrittsleiste ganz oben */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 2000;
  background: linear-gradient(90deg, var(--fw-anthracite), var(--fw-red), var(--fw-ember), var(--fw-red), var(--fw-anthracite));
  background-size: 300% 100%;
  animation: fwSheen 9s linear infinite;
}

@keyframes fwSheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---- Marken-/Kopfbereich ------------------------------------------------ */
img.logo {
  max-height: 58px;
  filter: drop-shadow(0 2px 5px rgba(20, 24, 28, 0.22));
  transition: transform 0.25s ease;
}
img.logo:hover {
  transform: scale(1.04) rotate(-1deg);
}

/* App-Titel dezent „schillernd" */
.navbar-brand + div h5 a,
.d-flex .flex-column h5 a.link-primary[href] {
  background: linear-gradient(92deg, var(--fw-anthracite) 0%, var(--fw-red-strong) 45%, var(--fw-ember) 60%, var(--fw-red-strong) 75%, var(--fw-anthracite) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  animation: fwTitle 8s ease-in-out infinite;
}
@keyframes fwTitle {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Navigationsleiste -------------------------------------------------- */
.navbar.bg-light {
  background: linear-gradient(120deg, var(--fw-anthracite) 0%, var(--fw-anthracite-2) 55%, var(--fw-ink) 100%) !important;
  border-bottom: 3px solid var(--fw-red);
  box-shadow: 0 6px 22px rgba(20, 24, 28, 0.28) !important;
}

.navbar.bg-light .nav-link,
.navbar.bg-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 500;
  border-radius: 0.5rem;
  padding-inline: 0.7rem;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.navbar.bg-light .nav-link:hover,
.navbar.bg-light .nav-link:focus {
  color: #ffffff !important;
  background-color: rgba(225, 27, 34, 0.85);
}
.navbar.bg-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
}
.navbar.bg-light .navbar-toggler-icon {
  filter: invert(1) brightness(1.6);
}

/* ---- Dropdown-Menüs (über allem, nicht abgeschnitten) ------------------- */
.dropdown-menu {
  z-index: 1050;
  border: 1px solid rgba(20, 24, 28, 0.10);
  box-shadow: 0 12px 30px rgba(20, 24, 28, 0.18);
  margin-top: 0.4rem;
  padding: 0.35rem;
}
.dropdown-menu .dropdown-item {
  border-radius: 0.45rem;
  padding: 0.45rem 0.8rem;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  border-radius: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn-primary {
  --bs-btn-bg: var(--fw-red);
  --bs-btn-border-color: var(--fw-red-strong);
  --bs-btn-hover-bg: var(--fw-red-strong);
  --bs-btn-hover-border-color: var(--fw-red-dark);
  --bs-btn-active-bg: var(--fw-red-dark);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  box-shadow: 0 4px 14px rgba(225, 27, 34, 0.32);
}
.btn-primary:hover {
  box-shadow: 0 7px 20px rgba(225, 27, 34, 0.42);
}
.btn-outline-primary {
  --bs-btn-color: var(--fw-red-strong);
  --bs-btn-border-color: var(--fw-red);
  --bs-btn-hover-bg: var(--fw-red);
  --bs-btn-hover-border-color: var(--fw-red);
}

/* ---- Karten / Panels / Tabellen ---------------------------------------- */
.card,
.list-group,
.dropdown-menu,
.modal-content {
  border: 1px solid rgba(20, 24, 28, 0.08);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 10px 30px rgba(20, 24, 28, 0.08);
}
.card-header {
  border-top-left-radius: var(--bs-border-radius-lg);
  border-top-right-radius: var(--bs-border-radius-lg);
  font-weight: 600;
}

/* farbige Akzentkante an Karten */
.card {
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(180deg, var(--fw-red), var(--fw-ember));
  opacity: 0.9;
}

.table thead th {
  border-bottom: 2px solid var(--fw-red);
}

/* ---- Formularfelder & Fokus -------------------------------------------- */
.form-control,
.form-select {
  border-radius: 0.55rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--fw-red);
  box-shadow: 0 0 0 0.2rem rgba(225, 27, 34, 0.18);
}

/* ---- Badges / Alerts ---------------------------------------------------- */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--fw-red) !important;
}
.alert-primary {
  --bs-alert-color: var(--fw-red-dark);
  --bs-alert-border-color: rgba(225, 27, 34, 0.35);
  --bs-alert-bg: rgba(225, 27, 34, 0.08);
}

/* ---- Login-Karte etwas anheben ----------------------------------------- */
.login-box,
.card.login {
  box-shadow: 0 18px 50px rgba(20, 24, 28, 0.18);
}

/* ---- Footer ------------------------------------------------------------- */
footer {
  color: #6b7480;
}
footer a {
  color: var(--fw-red-strong);
}

/* Sanfte, aber respektvolle Reduktion für Nutzer mit reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .navbar.bg-light::after,
  .navbar-brand + div h5 a {
    animation: none !important;
  }
}

/* ========================================================================== */
/* Ruhiges, aufgeräumtes Seitenlayout – zentriert, klare Abstände            */
/* (Kalender/Terminplan behalten volle Breite)                               */
/* ========================================================================== */
#main.container-fluid {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
/* Volle Breite für die großen Rasteransichten */
#main:has(#page-schedule),
#main:has(#calendar),
#main:has(#page-checkout) {
  max-width: none;
}

/* Überschriften ruhiger */
#main h1 {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--fw-anthracite);
  margin-bottom: 1.2rem;
}

/* Abschnittstrenner dezenter, mehr Luft zwischen den Blöcken */
#main hr {
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid rgba(20, 24, 28, 0.09);
  opacity: 1;
}

/* Formular-Labels klar und gut lesbar (wichtig für einfache Bedienung) */
#main label,
#main .control-label {
  font-weight: 600;
  color: #2a3138;
}

/* Eingabefelder etwas größer/griffiger */
#main .form-control,
#main .form-select {
  min-height: 42px;
  font-size: 15px;
}

/* Formularzeilen bekommen mehr vertikale Luft */
#page-reservation .row,
#page-reservation .form-group {
  margin-bottom: 0.4rem;
}

/* Primäre Aktionen (Anlegen/Speichern) klar hervorheben, Sekundäres ruhig */
#main .btn-primary {
  padding-inline: 1.3rem;
}

/* Admin-Listen (z. B. Terminpläne) luftiger und lesbarer */
#main .panel,
#main .list-group-item {
  line-height: 1.6;
}