/* ==========================================================================
   lokbuch – Anpassungen für Bootstrap 5
   Wird nach bootstrap5-lumen.min.css geladen. Hält das Aussehen nah am
   bisherigen Bootstrap-3-Stand, wo Bootstrap 5 anders aussieht.
   ========================================================================== */

/* Schriftgröße wie bei Bootstrap 3 (14px statt 16px).
   Wenn dir die größere Bootstrap-5-Schrift lieber ist: diesen Block löschen. */
:root {
  --bs-body-font-size: 0.875rem;
}

/* Links: wie bisher ohne Unterstreichung, nur beim Drüberfahren */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.btn:hover, .btn:focus, .nav-link:hover, .nav-link:focus, .dropdown-item:hover,
.dropdown-item:focus, .navbar-brand:hover, .list-group-item:hover { text-decoration: none; }

/* Labels fett wie bei Bootstrap 3 */
label { font-weight: 700; }

/* Checkboxen und Radios im bisherigen Markup (div.checkbox / div.radio / label.radio-inline) */
.checkbox, .radio { display: block; margin: .5rem 0; }
.checkbox label, .radio label, .radio-inline, .checkbox-inline { font-weight: 400; cursor: pointer; }
.checkbox input, .radio input, .radio-inline input, .checkbox-inline input { margin-right: .35rem; }
.radio-inline, .checkbox-inline { display: inline-block; margin-right: 1rem; }

/* form-inline gibt es in Bootstrap 5 nicht mehr: Felder ab Tablet-Breite nebeneinander */
@media (min-width: 768px) {
  .form-inline .form-control,
  .form-inline .form-select { display: inline-block; width: auto; vertical-align: middle; }
  .form-inline .mb-3 { display: inline-block; margin-bottom: 0 !important; vertical-align: middle; }
}
/* Zu-/Absage-Kästen (psv_meldung) */
.lb-inline-group { margin-bottom: 0; }

/* Fehlermarkierung aus Bootstrap 3 (has-error) */
.has-error .form-control, .has-error .form-select { border-color: var(--bs-form-invalid-border-color); }
.has-error label, .has-error .col-form-label, .has-error .form-text { color: var(--bs-form-invalid-color); }

/* Navigation im lokbuch-Stil (grüner Menü-Button) */
.navbar-lokbuch {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  border-left: 0; border-right: 0; /* Lumen-Theme setzt seitliche 1px-Ränder (im Dunkelmodus als heller Strich sichtbar) */
  margin-bottom: 5px;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2348811a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-lokbuch .navbar-brand { color: #48811a; }
.navbar-lokbuch .navbar-nav .nav-link:hover,
.navbar-lokbuch .navbar-nav .nav-link:focus { color: #333333; background-color: transparent; }

/* Karten (früher panel/well) brechen lange Wörter um */
.card { word-wrap: break-word; }

/* Floating Labels und Schalter nicht fett */
.form-floating > label, .form-switch .form-check-label { font-weight: 400; }

/* ==========================================================================
   Neue Elemente
   ========================================================================== */

/* Status-Labels aus include/settings.php ($meldung_label, z. B. "label-success") */
.label {
  display: inline-block; padding: .25em .6em; font-size: .75em; font-weight: 700; line-height: 1;
  color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--bs-border-radius);
  background-color: var(--bs-secondary);
}
.label-success { background-color: var(--bs-success); }
.label-danger  { background-color: var(--bs-danger); }
.label-warning { background-color: var(--bs-warning); }
.label-info    { background-color: var(--bs-info); }
.label-primary { background-color: var(--bs-primary); }

/* Zu-/Absage als Umschalt-Buttons */
.lb-meldung { max-width: 32rem; }
.lb-meldung .btn { font-weight: 500; padding-top: .7rem; padding-bottom: .7rem; box-shadow: none; }
/* nicht gewählt: helle Töne wie Rückmelde-Zahlen/Status, gewählt: kräftig gefüllt */
.lb-meldung .btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-bg: var(--bs-success-bg-subtle); --bs-btn-border-color: var(--bs-success-border-subtle);
  --bs-btn-hover-color: var(--bs-success-text-emphasis); --bs-btn-hover-bg: var(--bs-success-bg-subtle); --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success);
}
.lb-meldung .btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-bg: var(--bs-warning-bg-subtle); --bs-btn-border-color: var(--bs-warning-border-subtle);
  --bs-btn-hover-color: var(--bs-warning-text-emphasis); --bs-btn-hover-bg: var(--bs-warning-bg-subtle); --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-warning); --bs-btn-active-border-color: var(--bs-warning);
}
.lb-meldung .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-bg: var(--bs-danger-bg-subtle); --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: var(--bs-danger-text-emphasis); --bs-btn-hover-bg: var(--bs-danger-bg-subtle); --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger);
}

/* Zu-/Absage-Status: ein Balken (Feldspieler und Torhüter zusammen) mit Zahlen und Farbkästchen darunter (js/lokbuch.js) */
.lb-status { max-width: 36rem; }
.lb-status:empty { display: none; }
.lb-status-was { font-weight: 400; opacity: .85; white-space: nowrap; }
.lb-status-legende { font-size: .8rem; color: var(--bs-body-color); margin-top: .2rem; }
.lb-legende-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .25em; vertical-align: -.05em; background-size: .7em .7em; }
.lb-balken, .lb-balken-leer { height: 1.1rem; font-size: .75rem; box-shadow: inset 0 0 0 1px var(--bs-border-color); background-color: var(--bs-body-bg); }
/* offen/vielleicht: kräftiges Grau mit Schraffur statt fast unsichtbarem Hellgrau */
.lb-offen { background-color: #a3a9b0; color: #222; }
[data-bs-theme=dark] .lb-offen { background-color: #6c757d; color: #fff; }
/* Karten in den Übersichten (Spiele/Training/Termine): Datum als Kopfzeile */
.lb-karte > .card-header { padding: .3rem .6rem; font-size: .875rem; color: var(--bs-secondary-color); background-color: var(--bs-tertiary-bg); }
.lb-karte > .card-body { padding: .5rem .6rem; position: relative; }
.lb-ort { font-size: .875rem; color: var(--bs-secondary-color); }
/* Ein-Klick-Buttons (oben rechts im Kartenkörper): Platzhalter, damit Titel und Ort nicht darunter laufen */
.lb-karte > .card-body:has(.lb-einklick)::before { content: ""; float: right; width: 5.6rem; height: 2.7rem; }
.lb-einklick { position: absolute; right: 5px; top: 5px; }

/* Aufklappbare Bereiche auf den Seiten Spiel/Training/Termin (Accordion-Optik, mehrere gleichzeitig offen) */
.lb-akk { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); overflow: hidden; }
.lb-akk-kopf { position: relative; padding: .75rem 2.75rem .75rem 1rem; background-color: var(--bs-tertiary-bg); }
.lb-akk-kopf:has(.lb-akk-toggle) { cursor: pointer; }
.lb-akk.offen .lb-akk-kopf { border-bottom: 1px solid var(--bs-border-color); }
.lb-akk-kopf a.menu { font-size: 1.1rem; }
.lb-akk-pfeil { position: absolute; right: 1rem; top: 50%; margin-top: -.6rem; line-height: 1; color: var(--bs-secondary-color) !important; transition: transform .2s ease; }
.lb-akk.offen .lb-akk-pfeil { transform: rotate(180deg); }
.lb-akk-body { padding: .75rem 1rem; }
.lb-akk-body.collapsing { padding-top: 0; padding-bottom: 0; }

/* Badges im Menü */
.lb-nav-badge { font-size: .65rem; vertical-align: middle; }
.navbar-toggler { position: relative; }
.lb-toggler-punkt { top: 6px; left: calc(100% - 6px); }
.offcanvas .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
@media (max-width: 767.98px) { .offcanvas .nav-link { font-size: 1.1rem; } }

/* Details beim einzelnen Termin: Tabelle ohne Rahmen, Bezeichnung schmal */
.lb-termin-details td:first-child { width: 1%; white-space: nowrap; padding-right: 1rem; }
.lb-termin-details { --bs-table-bg: transparent; }

/* Fixierter Tabellenkopf (DataTables-Tabellen und Tabellen mit .lb-sticky) */
table.dataTable thead th, table.lb-sticky thead th {
  position: sticky; top: 0; z-index: 2; background-color: var(--bs-body-bg);
}
body.lb-nav-fixed table.dataTable thead th, body.lb-nav-fixed table.lb-sticky thead th { top: 56px; }
/* in .table-responsive (eigener Scrollbereich) würde der Kopf sonst um die Menühöhe nach unten rutschen und die erste Zeile verdecken */
.table-responsive table.dataTable thead th, .table-responsive table.lb-sticky thead th,
body.lb-nav-fixed .table-responsive table.dataTable thead th, body.lb-nav-fixed .table-responsive table.lb-sticky thead th { position: static; }

/* PSV-Logo im Hintergrund: transparente Maske, eingefärbt per CSS.
   Hell: dunkle Farbe mit wenig Deckkraft (wie das bisherige graue JPG),
   Dunkel: helles Vereinsgrün (wie die Überschriften), dezent – kein graues Rechteck mehr. */
#bg { aspect-ratio: 600 / 585; pointer-events: none;
      --lb-bg-farbe: #000; --lb-bg-deckkraft: .17; }
#bg::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--lb-bg-farbe); opacity: var(--lb-bg-deckkraft);
  -webkit-mask: url(../images/logo/psv_logo_bg_maske.webp) center / contain no-repeat;
          mask: url(../images/logo/psv_logo_bg_maske.webp) center / contain no-repeat;
}
[data-bs-theme=dark] #bg { --lb-bg-farbe: #7cc245; --lb-bg-deckkraft: .12; }

/* Schließen-Knopf auf hellen Kästen: Lumen färbt ihn weiß (für farbige Alerts) –
   auf hellem Grund war er unsichtbar. Hier dunkel; im Dark Mode invertiert Bootstrap ihn wieder hell. */
.lb-schliessbar > .btn-close, .alert-secondary .btn-close, .alert-light .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: .55;
}
.lb-schliessbar > .btn-close:hover, .lb-schliessbar > .btn-close:focus { opacity: 1; }

/* ==========================================================================
   Dark Mode (data-bs-theme="dark")
   ========================================================================== */
[data-bs-theme=dark] .navbar-lokbuch { background-color: #2b2b2b; border-bottom-color: #444; }
[data-bs-theme=dark] .navbar-lokbuch .navbar-nav .nav-link:hover,
[data-bs-theme=dark] .navbar-lokbuch .navbar-nav .nav-link:focus { color: #fff; }
[data-bs-theme=dark] a:link, [data-bs-theme=dark] a:visited,
[data-bs-theme=dark] a.menu, [data-bs-theme=dark] .psv-green,
[data-bs-theme=dark] .navbar-lokbuch .navbar-brand { color: #7cc245; }
[data-bs-theme=dark] a.btn:link, [data-bs-theme=dark] a.btn:visited { color: var(--bs-btn-color); }
[data-bs-theme=dark] a.btn:link:hover, [data-bs-theme=dark] a.btn:visited:hover { color: var(--bs-btn-hover-color); }
[data-bs-theme=dark] a.btn.active:link, [data-bs-theme=dark] a.btn.active:visited { color: var(--bs-btn-active-color); }
[data-bs-theme=dark] a.dropdown-item.active:link, [data-bs-theme=dark] a.dropdown-item.active:visited, [data-bs-theme=dark] a.dropdown-item:active { color: var(--bs-dropdown-link-active-color, #fff); }
[data-bs-theme=dark] .modal-content, [data-bs-theme=dark] .dropdown-menu { color: var(--bs-body-color); }
/* DataTables 1.10 bringt helle Farben mit */
[data-bs-theme=dark] table.dataTable tbody tr,
[data-bs-theme=dark] table.dataTable.stripe tbody tr.odd,
[data-bs-theme=dark] table.dataTable.display tbody tr.odd { background-color: transparent; }
[data-bs-theme=dark] .dataTables_wrapper .dataTables_length,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_filter,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_info,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate,
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--bs-body-color) !important; }
[data-bs-theme=dark] .dataTables_wrapper input, [data-bs-theme=dark] .dataTables_wrapper select {
  background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color);
}

/* ==========================================================================
   Foto-Upload mit Zuschnitt (js/lokbuch_foto.js)
   ========================================================================== */
.lb-foto-js { display: none; }
.lb-foto-aktiv .lb-foto-js { display: block; }
.lb-foto-aktiv .lb-foto-nojs { display: none; }
.lb-drop { border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.75rem 1rem;
           text-align: center; background: var(--bs-tertiary-bg); max-width: 36rem; transition: border-color .15s, background-color .15s; }
.lb-drop.aktiv { border-color: #48811a; background: rgba(72,129,26,.08); }
.lb-drop .fa-cloud-upload-alt { font-size: 2.25rem; color: #48811a; }
.lb-foto-flaeche { height: min(60vh, 520px); background: #222; border-radius: var(--bs-border-radius); overflow: hidden; }
.lb-foto-flaeche img { display: block; max-width: 100%; }
.lb-foto-vorschau { overflow: hidden; background: var(--bs-secondary-bg); border-radius: var(--bs-border-radius); margin: 0 auto; }
.lb-rund .lb-foto-vorschau, .lb-rund .cropper-view-box, .lb-rund .cropper-face { border-radius: 50%; }
.lb-rund .cropper-view-box { outline: 0; box-shadow: 0 0 0 1px #39f; }
.lb-foto-werkzeuge .btn { min-width: 2.6rem; }

/* Links in farbigen Hinweisen (Lumen: weiße Schrift auf Farbe) – sonst grün und schlecht lesbar */
.alert-primary a:not(.btn), .alert-success a:not(.btn), .alert-info a:not(.btn),
.alert-danger a:not(.btn), .alert-warning a:not(.btn), .alert-dark a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.alert-primary a:not(.btn):hover, .alert-success a:not(.btn):hover, .alert-info a:not(.btn):hover,
.alert-danger a:not(.btn):hover, .alert-warning a:not(.btn):hover, .alert-dark a:not(.btn):hover {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* Familienkonten: Balken während eines Wechsels, Symbol in der Menüleiste, Popup */
.lb-familie-balken { background-color: #b26a00; color: #fff; }
.lb-familie-balken strong { color: #fff; }
.lb-familie-knopf .lb-familie-punkt { top: .45rem; left: 1.55rem; }
.lb-familie-knopf.lb-familie-aktiv { color: #b26a00 !important; }
[data-bs-theme=dark] .lb-familie-knopf.lb-familie-aktiv { color: #f0a640 !important; }
.lb-familie-person { padding: .6rem 0; }
.lb-familie-person + .lb-familie-person { border-top: 2px solid var(--bs-border-color); }
.lb-familie-person-aktiv { background-color: var(--bs-tertiary-bg); margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; }

/* Rückmelde-Zahlen (Zusagen/Absagen/offen) bei Spielen, Training, Terminen: größer, nicht fett, dunkle Schrift auf hellem Grund */
.badge.lb-zahl { font-size: .9rem; font-weight: 500; min-width: 2em; padding: .28em .5em; border-radius: .45rem; border: 1px solid transparent; font-variant-numeric: tabular-nums; vertical-align: .05em; }
.badge.lb-zahl-zu    { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.badge.lb-zahl-ab    { color: var(--bs-danger-text-emphasis);  background-color: var(--bs-danger-bg-subtle);  border-color: var(--bs-danger-border-subtle); }
.badge.lb-zahl-offen { color: var(--bs-body-color); background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }

/* eigener Status (Dein Status) im selben Stil wie die Rückmelde-Zahlen */
.lb-mein-status { display: inline-flex; align-items: center; gap: .35em; font-size: .9rem; font-weight: 500; padding: .18em .55em; border-radius: .45rem; border: 1px solid transparent; line-height: 1.3; vertical-align: .05em; white-space: nowrap; }
.lb-mein-status .fas { font-size: .85em; }
.lb-mein-status-zu    { color: var(--bs-success-text-emphasis); background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); }
.lb-mein-status-ab    { color: var(--bs-danger-text-emphasis);  background-color: var(--bs-danger-bg-subtle);  border-color: var(--bs-danger-border-subtle); }
.lb-mein-status-vl    { color: var(--bs-warning-text-emphasis); background-color: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); }
.lb-mein-status-offen { color: var(--bs-body-color); background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }

/* Ein-Klick-Zu-/Absage: helle Töne wie Rückmelde-Zahlen und Status, kräftig erst beim Drüberfahren/Antippen */
button.btn-success[id^="zusage_"], button.btn-danger[id^="absage_"] { box-shadow: none; border-width: 1px; }
button.btn-success[id^="zusage_"] {
  --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-bg: var(--bs-success-bg-subtle); --bs-btn-border-color: var(--bs-success-border-subtle);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-success); --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-success); --bs-btn-active-border-color: var(--bs-success);
}
button.btn-danger[id^="absage_"] {
  --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-bg: var(--bs-danger-bg-subtle); --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bs-danger); --bs-btn-active-border-color: var(--bs-danger);
}

/* Ligen (handball.net-Import): eigene Spiele/Mannschaften dezent hervorheben, Auf-/Abstiegsplätze als Randmarkierung */
.table tr.lb-eigen > * { --bs-table-bg-type: var(--bs-primary-bg-subtle); }
.table tr.lb-auf > td:first-child { box-shadow: inset 4px 0 0 var(--bs-success); }
.table tr.lb-ab > td:first-child { box-shadow: inset 4px 0 0 var(--bs-danger); }

/* Vereinslogos (handball.net): einheitliche Größe; im dunklen Modus auf hellem Plättchen, damit dunkle Logos sichtbar bleiben */
.h360-logo { object-fit: contain; vertical-align: middle; }
[data-bs-theme=dark] .h360-logo { background-color: #f8f9fa; border-radius: 22%; padding: 2px; box-sizing: border-box; }