/*
 * ═══════════════════════════════════════════════════════════════════
 *  TERMINPLANER – Design System
 *  Für Designer: Alle anpassbaren Werte sind in den CSS-Variablen
 *  unter :root definiert.
 * ═══════════════════════════════════════════════════════════════════
 */


/* ───────────────────────────────────────────────
   1. CSS-VARIABLEN (Design Tokens)
   ─────────────────────────────────────────────── */
:root {
  /* Hauptfarben */
  --farbe-primaer:        #2563eb;
  --farbe-primaer-dunkel: #1d4ed8;
  --farbe-primaer-hell:   #eff6ff;

  --farbe-erfolg:         #16a34a;
  --farbe-warnung:        #d97706;
  --farbe-fehler:         #dc2626;
  --farbe-info:           #0891b2;

  /* Neutrale Farben */
  --farbe-weiss:          #ffffff;
  --farbe-hintergrund:    #f8fafc;
  --farbe-karte:          #ffffff;
  --farbe-rand:           #e2e8f0;
  --farbe-text:           #1e293b;
  --farbe-text-gedimmt:   #64748b;
  --farbe-text-hell:      #94a3b8;

  /* Startseiten-Buttons */
  --btn-menu-bg:          rgb(180, 180, 180);
  --btn-menu-hover-bg:    #2563eb;
  --btn-menu-text:        #1e293b;
  --btn-menu-hover-text:  #ffffff;
  --btn-menu-schrift:     'Courier New', Courier, monospace;
  --btn-menu-groesse:     1.05rem;
  --btn-menu-gewicht:     600;

  /* Typografie */
  --schrift-haupt:        'Segoe UI', system-ui, sans-serif;
  --schrift-mono:         'Courier New', Courier, monospace;

  /* Abstände */
  --abstand-xs:   0.25rem;
  --abstand-sm:   0.5rem;
  --abstand-md:   1rem;
  --abstand-lg:   1.5rem;
  --abstand-xl:   2rem;

  /* Rahmen & Schatten */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-rund:  9999px;

  --schatten-sm:  0 1px 3px rgba(0,0,0,.08);
  --schatten-md:  0 4px 12px rgba(0,0,0,.10);
  --schatten-lg:  0 8px 24px rgba(0,0,0,.12);

  --uebergang:    all 0.2s ease;
}


/* ───────────────────────────────────────────────
   2. GRUNDLAYOUT
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:      var(--schrift-haupt);
  font-size:        1rem;
  line-height:      1.6;
  color:            var(--farbe-text);
  background-color: var(--farbe-hintergrund);
  margin: 0;
}

a {
  color: var(--farbe-primaer);
  text-decoration: none;
  transition: var(--uebergang);
}
a:hover {
  color: var(--farbe-primaer-dunkel);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--farbe-text);
  margin-bottom: var(--abstand-md);
}


/* ───────────────────────────────────────────────
   3. STARTSEITEN-MENÜ BUTTONS
   Alle Buttons (btn-primary, btn-outline-*) auf
   der Startseite einheitlich stylen
   ─────────────────────────────────────────────── */

/* Alle großen Menü-Buttons vereinheitlichen */
.d-grid .btn,
.d-grid .btn-primary,
.d-grid .btn-outline-primary,
.d-grid .btn-outline-secondary,
.d-grid .btn-outline-dark,
.d-grid .btn-outline-danger {
  font-family:      var(--btn-menu-schrift) !important;
  font-size:        var(--btn-menu-groesse) !important;
  font-weight:      var(--btn-menu-gewicht) !important;
  color:            var(--btn-menu-text) !important;
  background-color: var(--btn-menu-bg) !important;
  border:           2px solid #aaa !important;
  border-radius:    var(--radius-lg) !important;
  padding:          0.85rem 1.5rem !important;
  transition:       var(--uebergang) !important;
  text-decoration:  none !important;
  width:            100%;
}

.d-grid .btn:hover,
.d-grid .btn-primary:hover,
.d-grid .btn-outline-primary:hover,
.d-grid .btn-outline-secondary:hover,
.d-grid .btn-outline-dark:hover,
.d-grid .btn-outline-danger:hover {
  background-color: var(--btn-menu-hover-bg) !important;
  color:            var(--btn-menu-hover-text) !important;
  border-color:     var(--farbe-primaer-dunkel) !important;
  transform:        translateY(-1px);
  box-shadow:       var(--schatten-md) !important;
}

/* Abmelden-Button: Hover rot statt blau */
.d-grid form .btn:hover {
  background-color: var(--farbe-fehler) !important;
  border-color:     #b91c1c !important;
}


/* ───────────────────────────────────────────────
   4. ALLGEMEINE BUTTONS (außerhalb Menü)
   ─────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 0.5rem 1.25rem;
  transition: var(--uebergang);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}
.btn-primary:hover {
  background-color: var(--farbe-primaer-dunkel);
  border-color: var(--farbe-primaer-dunkel);
  color: var(--farbe-weiss);
}

.btn-outline-primary {
  border: 2px solid var(--farbe-primaer);
  color: var(--farbe-primaer);
  background: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}

.btn-outline-secondary {
  border: 2px solid #64748b;
  color: #64748b;
  background: transparent;
}
.btn-outline-secondary:hover {
  background-color: #64748b;
  color: var(--farbe-weiss);
}

.btn-danger {
  background-color: var(--farbe-fehler);
  border-color: var(--farbe-fehler);
  color: var(--farbe-weiss);
}
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: var(--farbe-weiss);
}

.btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  border-radius: var(--radius-lg);
}
.btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}


/* ───────────────────────────────────────────────
   5. KARTEN
   ─────────────────────────────────────────────── */
.card {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  box-shadow: var(--schatten-sm);
  transition: var(--uebergang);
}
.card:hover { box-shadow: var(--schatten-md); }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--farbe-rand);
  padding: var(--abstand-md) var(--abstand-lg);
  font-weight: 700;
}
.card-body  { padding: var(--abstand-lg); }
.card-footer {
  background: transparent;
  border-top: 1px solid var(--farbe-rand);
  padding: var(--abstand-md) var(--abstand-lg);
}


/* ───────────────────────────────────────────────
   6. FORMULARE
   ─────────────────────────────────────────────── */
.form-label {
  font-weight: 500;
  color: var(--farbe-text);
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.form-control,
.form-select,
select.form-control,
input.form-control,
textarea.form-control {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 1rem !important;
  color: var(--farbe-text) !important;
  background-color: var(--farbe-weiss) !important;
  height: 42px !important;
  transition: var(--uebergang);
  box-shadow: none !important;
  appearance: auto;
}
textarea.form-control {
  height: auto !important;
}
.form-control:focus,
.form-select:focus,
select.form-control:focus,
input.form-control:focus {
  border-color: var(--farbe-primaer) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--farbe-text-hell); }
.form-text { color: var(--farbe-text-gedimmt); font-size: 0.75rem; }


/* ───────────────────────────────────────────────
   7. TABELLEN
   ─────────────────────────────────────────────── */
.table { color: var(--farbe-text); border-color: var(--farbe-rand); }

.table thead th {
  background-color: var(--farbe-hintergrund);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--farbe-text-gedimmt);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--farbe-rand);
  padding: 0.5rem 1rem;
}
.table tbody td {
  padding: 0.5rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--farbe-rand);
}
.table tbody tr:hover { background-color: var(--farbe-primaer-hell); }


/* ───────────────────────────────────────────────
   8. STATUS-BADGES
   ─────────────────────────────────────────────── */
.badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-rund);
  letter-spacing: 0.03em;
}
.badge-ausstehend { background-color: #fef3c7 !important; color: #92400e !important; }
.badge-bestaetigt { background-color: #dcfce7 !important; color: #166534 !important; }
.badge-storniert  { background-color: #fee2e2 !important; color: #991b1b !important; }
.badge-abgeschlossen { background-color: #f1f5f9 !important; color: #475569 !important; }
.badge-besucht       { background: #059669; }  /* grün */
.badge-abgelaufen    { background: #6b7280; }  /* grau */
.badge-nicht_anwesend { background: #dc2626; } /* rot  */

/* ───────────────────────────────────────────────
   9. ALERTS
   ─────────────────────────────────────────────── */
.alert {
  border-radius: var(--radius-md);
  border: none;
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
}
.alert-success { background-color: #dcfce7; color: #166534; border-left: 4px solid var(--farbe-erfolg); }
.alert-danger  { background-color: #fee2e2; color: #991b1b; border-left: 4px solid var(--farbe-fehler); }
.alert-warning { background-color: #fef3c7; color: #92400e; border-left: 4px solid var(--farbe-warnung); }
.alert-info    { background-color: #e0f2fe; color: #075985; border-left: 4px solid var(--farbe-info); }


/* ───────────────────────────────────────────────
   10. TERMINPLANER-SPEZIFISCH
   ─────────────────────────────────────────────── */
.slot-btn {
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--farbe-rand);
  background: var(--farbe-weiss);
  color: var(--farbe-text);
  cursor: pointer;
  transition: var(--uebergang);
  font-weight: 500;
}
.slot-btn:hover:not(:disabled) {
  border-color: var(--farbe-primaer);
  background: var(--farbe-primaer-hell);
  color: var(--farbe-primaer);
}
.slot-btn.aktiv, .slot-btn.selected {
  background: var(--farbe-primaer);
  border-color: var(--farbe-primaer);
  color: var(--farbe-weiss);
}
.slot-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

.ladeanimation {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--farbe-rand);
  border-top-color: var(--farbe-primaer);
  border-radius: 50%;
  animation: drehen 0.7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }


/* ───────────────────────────────────────────────
   11. FOOTER
   ─────────────────────────────────────────────── */
footer { background: #1e293b; color: #94a3b8 !important; }
footer * { color: #94a3b8 !important; }
footer a { color: #94a3b8 !important; text-decoration: none !important; border: none !important; outline: none !important; }
footer a:hover { color: #ffffff !important; text-decoration: none !important; }


/* ───────────────────────────────────────────────
   12. RESPONSIVE
   ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card-body   { padding: 1rem; }
  .card-header { padding: 0.5rem 1rem; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}


/* ───────────────────────────────────────────────
   OVERRIDES: Einheitliche Buttons & Formfelder
   ─────────────────────────────────────────────── */

/* Alle Formfelder einheitlich */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 42px !important;
  font-size: 1rem !important;
  padding: 0.5rem 0.875rem !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}
textarea.form-control { height: auto !important; }
.form-control:focus,
.form-select:focus,
input:focus,
select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
  outline: none !important;
}

/* Alle Standard-Buttons: Blau/Weiß */
.btn,
.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-danger,
.btn-success,
.btn-info {
  background-color: #2563eb !important;
  border: 2px solid #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1.25rem !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Hover: Lime */
.btn:hover,
.btn-primary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-danger:hover,
.btn-success:hover,
.btn-info:hover {
  background-color: #84cc16 !important;
  border-color: #65a30d !important;
  color: #1a2e05 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

/* Danger bleibt rot */
.btn-danger {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}
.btn-danger:hover {
  background-color: #84cc16 !important;
  border-color: #65a30d !important;
  color: #1a2e05 !important;
}

.btn-sm {
  height: auto !important;
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
}
.btn-lg {
  height: auto !important;
  padding: 0.75rem 2rem !important;
  font-size: 1.1rem !important;
}

/* ───────────────────────────────────────────────
   STARTSEITE: Menü-Buttons (d-grid) überschreiben
   ─────────────────────────────────────────────── */
.d-grid .btn,
.d-grid .btn-primary,
.d-grid .btn-outline-primary,
.d-grid .btn-outline-secondary,
.d-grid .btn-outline-dark,
.d-grid .btn-outline-danger,
.d-grid form .btn {
  font-family: var(--schrift-haupt) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  background-color: #2563eb !important;
  border: 2px solid #2563eb !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  height: 48px !important;
}

.d-grid .btn:hover,
.d-grid .btn-primary:hover,
.d-grid .btn-outline-primary:hover,
.d-grid .btn-outline-secondary:hover,
.d-grid .btn-outline-dark:hover,
.d-grid .btn-outline-danger:hover,
.d-grid form .btn:hover {
  background-color: #84cc16 !important;
  border-color: #65a30d !important;
  color: #1a2e05 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

/* ── Sticky Footer ── */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
body > main,
body .container.py-4 {
  flex: 1 !important;
}