@import url("https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Kanit:wght@300;400;500&family=Caveat:wght@400;700&display=swap");

* {
  box-sizing: border-box;
  font-family:
    "Kanit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(243, 248, 239, 0.5);
  font-size: clamp(11px, 0.85vw, 14px);
  color: #333333;
  line-height: 1.6;
}

body {
  display: flex;
  overflow-x: hidden;
}

main {
  flex: 1;
  width: calc(100% - 18%);
  max-width: 100%;
  margin-left: 18%;
  padding: clamp(70px, 7vw, 110px) clamp(9px, 0.88vw, 18px) 0;
  transition:
    margin-left 0.3s ease,
    width 0.3s ease,
    padding-top 0.3s ease;
}

body.sidebar-collapsed main {
  margin-left: 50px;
  width: calc(100% - 50px);
}

h5 {
  font-size: clamp(11px, 0.88vw, 15px);
  color: #333333;
  font-weight: 500;
  margin-bottom: clamp(11px, 1vw, 16px);
  font-family: "PT Serif", serif;
  letter-spacing: 0.2px;
}

h3 {
  font-size: clamp(13px, 1.1vw, 19px) !important;
  color: #333333;
  font-weight: 500;
  margin-bottom: clamp(12px, 1.15vw, 18px);
  font-family: "PT Serif", serif;
  letter-spacing: 0.3px;
}

a {
  color: #55832a;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 400;
}

a:hover {
  color: #a72425;
  transform: scale(1.05);
}

.title_current_site {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.55vw, 10px);
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 500;
  color: #55832a;
  background: #f0c0bd;
  padding: clamp(6px, 0.55vw, 10px) clamp(11px, 1vw, 16px);
  border-radius: 4px;
  border: 1px solid #55832a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
  margin-bottom: clamp(13px, 1.25vw, 20px);
  font-family: "PT Serif", serif;
  letter-spacing: 0.3px;
}

.title_current_site:hover {
  background: #f3f8ef;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.title_current_site i {
  color: #55832a;
  font-size: clamp(11px, 0.88vw, 15px);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.title_current_site i:hover {
  color: #55832a;
  transform: scale(1.3);
}

#info-icon {
  cursor: pointer;
  font-size: clamp(11px, 0.88vw, 14px);
  color: #55832a;
  transition: color 0.2s ease;
}

#info-icon:hover {
  color: #ffffff;
}

#info-icon:hover::after {
  position: absolute;
  background-color: #333333;
  color: #fff;
  padding: clamp(4px, 0.4vw, 6px) clamp(7px, 0.7vw, 11px);
  border-radius: 2px;
  top: clamp(23px, 2.2vw, 32px);
  left: clamp(11px, 1vw, 16px);
  white-space: nowrap;
  z-index: 10;
  font-size: clamp(10px, 0.75vw, 12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.rotate-chevron {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
  background: #55832a;
  color: #ffffff !important;
  border-color: #55832a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid #55832a;
  border-radius: 3px;
  font-weight: 500;
  padding: clamp(7px, 0.65vw, 11px) clamp(12px, 1.15vw, 19px);
  transition: all 0.2s ease;
  font-size: clamp(10px, 0.82vw, 13px);
  letter-spacing: 0.2px;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover {
  background: #61942f;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid #55832a;
  transform: translateY(-1px);
}

.btn-danger {
  background: #a72425;
  border-color: #a72425;
  color: #ffffff !important;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.btn-danger:hover {
  background: #871e1f;
  border-color: #a72425;
  color: #ffffff !important;
}

.btn:focus,
.btn:focus-visible,
.btn:active,
.btn:active:focus,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active,
.btn-warning:focus,
.btn-warning:focus-visible,
.btn-warning:active,
.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-info:focus,
.btn-info:focus-visible,
.btn-info:active,
.btn-light:focus,
.btn-light:focus-visible,
.btn-light:active,
.btn-dark:focus,
.btn-dark:focus-visible,
.btn-dark:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-warning:active,
.btn-info:active,
.btn-light:active,
.btn-dark:active {
  background: #4a7025 !important;
  border-color: #4a7025 !important;
  color: #ffffff !important;
}

.btn-danger:active {
  background: #8f1e1f !important;
  border-color: #8f1e1f !important;
  color: #ffffff !important;
}

/* Gesperrte Buttons einheitlich neutral hellgrau - dieselben Farben wie im
   Dienstplan (planning.css, .control-panel). Ohne diese Regel legte
   Bootstrap fuer :disabled seine eigene Variantenfarbe (grau, schwarz, blau,
   tuerkis) unter den gruenen Rahmen von oben, mit opacity 0.65 ein trueber
   Mischton. Gilt auch fuer die Outline-Buttons der .ui-page-Seiten
   (ui-modern.css), damit gesperrt alles gleich aussieht. Rote und echte
   btn-outline-* Buttons bleiben, wie sie sind. */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
.btn.btn-success:disabled,
.btn.btn-success.disabled,
.btn.btn-warning:disabled,
.btn.btn-warning.disabled,
.btn.btn-info:disabled,
.btn.btn-info.disabled,
.btn.btn-light:disabled,
.btn.btn-light.disabled,
.btn.btn-dark:disabled,
.btn.btn-dark.disabled {
  background: #f1f2f4 !important;
  border-color: #dfe2e6 !important;
  color: #9aa0a6 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  cursor: not-allowed;
}

/* .white_icon ist global weiss (navbar.css) - im gesperrten Button grau. */
.btn.btn-primary:disabled i,
.btn.btn-primary.disabled i,
.btn.btn-secondary:disabled i,
.btn.btn-secondary.disabled i,
.btn.btn-success:disabled i,
.btn.btn-success.disabled i,
.btn.btn-warning:disabled i,
.btn.btn-warning.disabled i,
.btn.btn-info:disabled i,
.btn.btn-info.disabled i,
.btn.btn-light:disabled i,
.btn.btn-light.disabled i,
.btn.btn-dark:disabled i,
.btn.btn-dark.disabled i {
  color: inherit !important;
  filter: none !important;
}

.centered-arrow {
  text-align: center;
  vertical-align: middle;
}

.centered-arrow i {
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 500;
  color: #55832a;
}

.description {
  position: relative;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.6;
  background-color: #ffffff;
  padding: clamp(12px, 1.15vw, 19px);
  border-radius: 3px;
  margin-top: clamp(9px, 0.88vw, 13px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.description_card {
  position: relative;
  font-size: clamp(11px, 0.85vw, 14px);
  line-height: 1.6;
  background-color: #ffffff;
  padding: clamp(12px, 1.15vw, 19px);
  border-radius: 3px;
  margin-top: clamp(9px, 0.88vw, 13px);
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info_link {
  font-size: clamp(11px, 0.85vw, 14px);
  text-decoration: none;
}

.info_link:hover {
  color: #a72425;
  text-decoration: underline;
  transition: color 0.2s ease;
  font-weight: 500;
}

.custom-container {
  border-radius: 3px;
  padding: clamp(14px, 1.35vw, 22px);
  background-color: #ffffff;
  margin-top: clamp(11px, 1vw, 16px);
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.5;
  color: #333333;
  width: 100%;
  max-width: calc(100% - clamp(7px, 0.7vw, 11px));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(16px, 1.5vw, 23px);
}

th,
td {
  text-align: center;
  font-size: clamp(10px, 0.82vw, 13px);
  color: #333333;
  padding: clamp(7px, 0.7vw, 11px);
  vertical-align: middle;
}

.table-custom {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dee2e6;
  margin-bottom: clamp(11px, 1vw, 16px);
}

.table thead th {
  background-color: #f5f5f5;
  color: #333333;
  position: sticky;
  top: 0;
  z-index: 10;
  font-weight: 600;
  padding: clamp(9px, 0.88vw, 13px) clamp(7px, 0.7vw, 11px);
  border-bottom: 2px solid #dee2e6;
  font-size: clamp(10px, 0.82vw, 13px);
}

.scrollable-table-container {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  margin-bottom: clamp(16px, 1.5vw, 23px);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.bi-info-circle {
  cursor: pointer !important;
  font-size: clamp(11px, 0.85vw, 14px);
  transition:
    color 0.2s ease,
    transform 0.2s ease !important;
}

.bi-info-circle:hover {
  color: #55832a !important;
  transform: scale(1.3) !important;
}

.fas {
  font-size: clamp(11px, 0.88vw, 14px);
  color: #333333;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.fas-pencil {
  font-size: clamp(10px, 0.82vw, 13px);
  color: #55832a;
}

/* Icons in Buttons reagieren nicht selbst (gruen + eigener Zoom) - der
   Button reagiert als Ganzes. :where() haelt die Spezifitaet wie bisher. */
.fas:not(:where(button *, .btn *)):hover {
  color: #55832a;
  transform: scale(1.2);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.white_icon {
  color: white;
}

/* ── "Nach oben"-Button (php_elements/scrollToTop.php, index.php) ───────────
   Leichte Optik: weisser Grund mit gruenem Rand, beim Hover nur groesser.
   Die Sichtbarkeit steuert das JS ueber style.display - deshalb hier kein
   display setzen und die Zentrierung ueber line-height loesen. */
#scrollToTopButton {
  width: 42px;
  padding: 9px 0 !important;
  line-height: 1;
  text-align: center;
  border: 1.5px solid #55832a !important;
  border-radius: 10px;
  background: #fff !important;
  color: #55832a !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

#scrollToTopButton:hover,
#scrollToTopButton:focus-visible {
  transform: scale(1.1);
}

#scrollToTopButton i {
  font-size: 1.05rem;
  line-height: 1;
  vertical-align: middle;
}

#scrollToTopButton .white_icon {
  color: inherit !important;
  filter: none !important;
}

#plannedDateInput,
#datePicker {
  font-size: clamp(10px, 0.82vw, 13px);
  color: #333333;
  min-width: clamp(110px, 10.5vw, 170px);
  max-width: 100%;
  padding: clamp(6px, 0.55vw, 9px) clamp(7px, 0.7vw, 11px);
  border: 1px solid #ced4da;
  border-radius: 3px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(9px, 0.88vw, 14px);
  justify-content: flex-start;
  padding: clamp(12px, 1.15vw, 19px);
  background-color: #ffffff;
  align-items: flex-start;
  margin-bottom: clamp(16px, 1.5vw, 23px);
  border-radius: 3px;
}

.button-container .btn {
  flex: 1 1 calc(50% - clamp(9px, 0.88vw, 14px));
  max-width: clamp(160px, 15vw, 250px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(10px, 0.82vw, 13px);
}

.button-container .input-group {
  flex: 1 1 calc(50% - clamp(9px, 0.88vw, 14px));
  max-width: clamp(220px, 21vw, 350px);
}

.button-container .input-group input {
  width: fit-content;
  display: inline-block;
  min-width: 8ch;
  max-width: 100%;
  font-size: clamp(10px, 0.82vw, 13px);
}

.button-container .badge {
  flex: 0 0 auto;
  margin-top: clamp(6px, 0.55vw, 9px);
  text-align: left;
  background-color: #333333;
  color: #fff;
  padding: clamp(4px, 0.4vw, 6px) clamp(7px, 0.7vw, 11px);
  border-radius: 2px;
  font-size: clamp(10px, 0.75vw, 12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-group {
  width: 100%;
}

.form-control,
.form-control-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"] {
  width: fit-content;
  display: inline-block;
  min-width: 8ch;
  max-width: 100%;
  border-radius: 3px;
  font-size: clamp(10px, 0.82vw, 13px);
  padding: clamp(6px, 0.55vw, 9px) clamp(9px, 0.88vw, 13px);
  border: 1px solid #ced4da;
}

.modal-dialog {
  max-width: min(90vw, 1200px);
}

.modal-content {
  padding: clamp(12px, 1.15vw, 19px);
  border-radius: 3px;
  border: none;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
}

.form-label {
  font-weight: 500;
  margin-bottom: clamp(4px, 0.4vw, 6px);
  display: block;
  font-size: clamp(10px, 0.82vw, 13px);
  color: #333333;
}

.mb-3 {
  margin-bottom: clamp(12px, 1.15vw, 19px);
}

.feature-tile {
  height: clamp(160px, 16vw, 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  border-radius: 3px;
  transition: all 0.3s ease;
  padding: clamp(18px, 1.75vw, 28px);
  margin-bottom: clamp(18px, 1.75vw, 28px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.feature-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.feature-tile i {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  margin-bottom: clamp(12px, 1.15vw, 20px);
  color: #55832a;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.feature-tile:hover i {
  color: #a72425;
  transform: scale(1.2);
}

.feature-tile h5 {
  margin-bottom: clamp(9px, 0.88vw, 14px);
  font-weight: 500;
  font-size: clamp(11px, 0.88vw, 15px);
  color: #333333;
  font-family: "PT Serif", serif;
}

.feature-tile p {
  font-size: clamp(10px, 0.82vw, 13px);
  color: #555555;
  line-height: 1.4;
}

.feature-tile a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: color 0.2s ease;
}

.feature-tile a:hover {
  color: #a72425;
}

.tile-icon {
  width: clamp(36px, 3.5vw, 54px);
  height: clamp(36px, 3.5vw, 54px);
  margin-bottom: clamp(11px, 1vw, 16px);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-icon {
  width: clamp(14px, 1.32vw, 20px);
  height: clamp(14px, 1.32vw, 20px);
  margin-right: clamp(6px, 0.55vw, 10px);
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 768px) {
  body {
    flex-direction: column;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  main {
    margin-left: 0;
    margin-top: 0;
    padding-top: 55px;
    width: 100%;
  }

  body.sidebar-collapsed main {
    margin-left: 0;
    width: 100%;
  }

  .custom-container {
    max-width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .button-container .btn,
  .button-container .input-group {
    flex: 1 1 100%;
    max-width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .button-container .badge {
    font-size: clamp(11px, 2.4vw, 15px);
  }

  h3 {
    font-size: clamp(15px, 3.3vw, 22px) !important;
  }

  h5 {
    font-size: clamp(13px, 2.8vw, 19px);
  }

  .form-control,
  .form-control-select {
    width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .scrollable-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table td,
  .table th {
    white-space: normal;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .description {
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .title_current_site {
    font-size: clamp(13px, 2.8vw, 19px);
  }

  .title_current_site i {
    font-size: clamp(13px, 2.8vw, 19px);
  }

  a {
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .info_link {
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .feature-tile h5 {
    font-size: clamp(13px, 2.8vw, 19px);
  }

  .feature-tile p {
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .feature-tile i {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  .feature-tile {
    height: 145px;
    padding: 14px;
  }

  .button-container {
    gap: 8px;
  }
}

.custom-badge-dark {
  background: #333333;
  color: #ffffff !important;
  border-radius: 4px;
  padding: clamp(5px, 0.48vw, 8px) clamp(9px, 0.88vw, 13px);
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 500;
  letter-spacing: 0.3px;
  display: inline-block;
  margin-bottom: clamp(11px, 1vw, 16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.badge-container {
  margin: clamp(11px, 1vw, 16px) 0;
  display: flex;
}

.badge-container .fas {
  margin-right: clamp(5px, 0.48vw, 8px);
}

.modal-body .form-control,
.modal-body .form-control-select,
.modal-body input[type="text"],
.modal-body input[type="date"],
.modal-body input[type="password"],
.modal-body input[type="email"],
.modal-body input[type="search"],
.modal-body input[type="tel"],
.modal-body input[type="url"],
.modal-body input[type="number"] {
  width: 50%;
  min-width: 50%;
  display: block;
  font-size: clamp(10px, 0.82vw, 13px);
  padding: clamp(7px, 0.65vw, 10px) clamp(9px, 0.88vw, 13px);
  border-radius: 3px;
  border: 1px solid #ced4da;
  margin-bottom: clamp(6px, 0.55vw, 9px);
}

.modal-body select {
  max-width: clamp(130px, 12.5vw, 170px);
  display: block;
  font-size: clamp(10px, 0.82vw, 13px);
  padding: clamp(7px, 0.65vw, 10px) clamp(9px, 0.88vw, 13px);
  border-radius: 3px;
  border: 1px solid #ced4da;
  margin-bottom: clamp(6px, 0.55vw, 9px);
}

.modal-body .mb-3 {
  margin-bottom: clamp(16px, 1.5vw, 23px);
}

.modal-body label {
  display: block;
  width: 100%;
  margin-bottom: clamp(5px, 0.48vw, 8px);
  font-weight: 500;
  font-size: clamp(10px, 0.82vw, 13px);
}

.modal-body .d-flex {
  display: flex;
  gap: clamp(7px, 0.65vw, 10px);
  align-items: center;
}

.modal-body .d-flex select {
  flex: 1;
}

.modal-body .d-flex button {
  flex-shrink: 0;
}

select {
  min-width: clamp(100px, 9.5vw, 145px);
}

@media (max-width: 768px) {
  .modal-body .form-control,
  .modal-body .form-control-select,
  .modal-body input[type="text"],
  .modal-body input[type="date"],
  .modal-body input[type="password"],
  .modal-body input[type="email"],
  .modal-body input[type="search"],
  .modal-body input[type="tel"],
  .modal-body input[type="url"],
  .modal-body input[type="number"] {
    width: 100%;
    min-width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .modal-body select {
    max-width: 100%;
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .modal-body label {
    font-size: clamp(12px, 2.6vw, 16px);
  }

  .custom-badge-dark {
    font-size: clamp(12px, 2.6vw, 16px);
  }
}

/* ---------------------------------------------------------------------------
 * Badge "Vertretung benötigt"
 *
 * Wird gesetzt, wenn beim Melden der Abwesenheit angehakt wurde, dass eine
 * Vertretung organisiert werden muss. Steht in main.css, weil es sowohl auf
 * den Abwesenheitskarten (MA und BK) als auch in den Kalendern gebraucht wird.
 * ------------------------------------------------------------------------- */

.substitute-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    color: #000000;
    background-color: #ffffff;
    /* Kontur, weil der Badge sowohl auf roten als auch auf hellen
       Kartenkoepfen sitzt - ohne sie waere er dort unsichtbar. */
    border: 1px solid #ced4da;
    border-radius: 999px;
    white-space: nowrap;
}

.substitute-badge i {
    color: #000000;
}

/* Kalender-Variante: sitzt unter dem Event-Text in der Tageszelle. */
.event_substitute {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.25rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Checkbox "Vertretung benötigt" - in den Anlegen-Formularen und auf den
   Abwesenheitskarten (MA und BK). */
.substitute-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.substitute-toggle-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.substitute-toggle-row label {
    cursor: pointer;
}

/* Schuljahr-Anzeige neben der Datumsnavigation (Dienstplan, Tagesabschluss).
   Welches Schuljahr gilt, haengt am gewaehlten Datum und an den Grenzen aus
   der Tabelle school_years - der Wechsel liegt mitten im September. */
.cp-school-year {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-family: "Kanit", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #55832a;
    background: #edf4e4;
    border: 1px solid #cfe0b8;
    border-radius: 8px;
    white-space: nowrap;
}

.cp-school-year i {
    color: #55832a;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
 * Schuljahr-Filter (php_elements/school_year_filter.php)
 *
 * Steht auf MA-, BK- und Einrichtungsseite ueber den Informationen und ist
 * dort die einzige Schuljahr-Auswahl. Bewusst neutral gehalten - es ist eine
 * Filterleiste, kein Hinweis: heller Grund, feine Kontur, keine Signalfarbe.
 * Gross genug bleibt es ueber Feldgroesse und Abstaende.
 * ------------------------------------------------------------------------- */

.sy-filter {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem 0;
    padding: 0.9rem 1.1rem;
    background: #fbfbfc;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
}

.sy-filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.9rem;
    color: #6c757d;
    background: #eef0f2;
    border-radius: 6px;
}

.sy-filter-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 14rem;
    min-width: 0;
    gap: 0.1rem;
}

.sy-filter-label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: #343a40;
}

.sy-filter-hint {
    font-size: 0.78rem;
    color: #868e96;
}

.sy-filter-select {
    flex: 0 0 auto;
    min-width: 12rem;
    height: auto;
    padding: 0.6rem 2.4rem 0.6rem 0.9rem;
    font-family: "Kanit", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #343a40;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23868e96' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.9rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.sy-filter-select:hover {
    border-color: #adb5bd;
}

.sy-filter-select:focus {
    outline: none;
    border-color: #adb5bd;
    box-shadow: 0 0 0 3px rgba(134, 142, 150, 0.18);
}

@media (max-width: 576px) {
    .sy-filter {
        gap: 0.65rem;
        padding: 0.8rem 0.9rem;
    }

    .sy-filter-select {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
}
}