/* ------------------------------------------------------------------
   Gemeinsames modernes UI - abgeleitet von news.css
   Muss NACH import_elements.php (Bootstrap + main.css) geladen werden.
   Alles ist auf .ui-page begrenzt, damit Navbar, Footer und andere
   Seiten unveraendert bleiben.
   ------------------------------------------------------------------ */

.ui-page {
  --ui-green: #55832a;
  --ui-green-dark: #446a22;
  --ui-red: #a72425;
  --ui-dark: #212529;
  --ui-text: #495057;
  --ui-muted: #9ca3af;
  --ui-border: #e2e4ea;
  --ui-border-light: #f0f1f5;
  --ui-bg-light: #f8f9fa;
  --ui-radius: 14px;
  --ui-radius-sm: 8px;
  --ui-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  --ui-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.1);
  --ui-transition: 0.2s ease;
}

/* ---------- Seitenkopf ---------- */

.ui-head {
  padding: clamp(18px, 1.8vw, 30px) 0 clamp(10px, 1vw, 16px) 0;
}

.ui-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(17px, 1.5vw, 26px);
  font-weight: 600;
  color: var(--ui-dark);
  margin: 0;
  letter-spacing: -0.01em;
  font-family: "PT Serif", serif;
}

.ui-head-title i {
  color: var(--ui-green);
}

.ui-head-subtitle {
  font-size: clamp(11px, 0.85vw, 14px);
  color: var(--ui-muted);
  margin: 4px 0 0 0;
  font-weight: 300;
}

/* ---------- Panels (Bootstrap .card) ---------- */

.ui-page .card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  transition:
    box-shadow var(--ui-transition),
    transform var(--ui-transition);
}

.ui-page .card .card {
  box-shadow: none;
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border);
}

.ui-page .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ui-border-light);
  padding: clamp(12px, 1.15vw, 18px) clamp(16px, 1.5vw, 24px);
  color: var(--ui-dark);
  font-weight: 600;
}

.ui-page .card-header h5,
.ui-page .card-header h6 {
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 600;
  color: var(--ui-dark);
  margin: 0;
}

.ui-page .card-body {
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.5vw, 24px);
}

.ui-page .card-title {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
  letter-spacing: -0.01em;
}

.ui-page .card-subtitle {
  font-size: clamp(9px, 0.7rem, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-muted);
}

/* ---------- Buttons ---------- */

.ui-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: clamp(5px, 0.48vw, 8px) clamp(10px, 0.95vw, 15px);
  font-family: Kanit, sans-serif;
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2px;
  box-shadow: none;
  transition:
    background var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition);
}

.ui-page .btn:hover {
  transform: none;
  box-shadow: none;
}

.ui-page .btn i {
  font-size: 0.95em;
}

/* .white_icon faerbt Icons global weiss (navbar.css setzt color:#fff
   !important, news.css zusaetzlich einen Filter). Auf den hellen
   Outline-Buttons waeren sie damit unsichtbar - deshalb hier die
   Buttonfarbe erzwingen. Beim Hover faerbt sich der Button, der Text
   wird weiss, und das Icon zieht ueber currentColor mit. */
.ui-page .btn .white_icon {
  color: inherit !important;
  filter: none !important;
}

.ui-page .btn:disabled,
.ui-page .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-page .btn-primary,
.ui-page .btn-secondary,
.ui-page .btn-success,
.ui-page .btn-outline-primary,
.ui-page .btn-outline-success {
  background: #fff !important;
  border-color: var(--ui-green) !important;
  color: var(--ui-green) !important;
}

.ui-page .btn-primary:hover,
.ui-page .btn-secondary:hover,
.ui-page .btn-success:hover,
.ui-page .btn-outline-primary:hover,
.ui-page .btn-outline-success:hover {
  background: var(--ui-green) !important;
  border-color: var(--ui-green) !important;
  color: #fff !important;
}

.ui-page .btn-danger,
.ui-page .btn-outline-danger {
  background: #fff !important;
  border-color: var(--ui-red) !important;
  color: var(--ui-red) !important;
}

.ui-page .btn-danger:hover,
.ui-page .btn-outline-danger:hover {
  background: var(--ui-red) !important;
  border-color: var(--ui-red) !important;
  color: #fff !important;
}

.ui-page .btn-outline-secondary,
.ui-page .btn-outline-info,
.ui-page .btn-light {
  background: #fff !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.ui-page .btn-outline-secondary:hover,
.ui-page .btn-outline-info:hover,
.ui-page .btn-light:hover {
  background: var(--ui-bg-light) !important;
  border-color: var(--ui-muted) !important;
  color: var(--ui-dark) !important;
}

/* Buttongruppe im Kopfbereich von MA und BK: Kein white-space:nowrap auf
   .btn (siehe oben), damit lange Beschriftungen umbrechen koennen, und
   zusaetzlich Umbruch der Gruppe selbst - sonst laeuft sie aus ihrer
   Spalte heraus und ueberlappt das Suchfeld. */
.ui-page .card-body .d-flex.justify-content-md-end {
  flex-wrap: wrap;
  row-gap: clamp(6px, 0.6vw, 10px);
}

.ui-page .btn-sm {
  padding: clamp(3px, 0.35vw, 6px) clamp(7px, 0.7vw, 11px);
  font-size: clamp(8px, 0.66vw, 11px);
}

.ui-page .btn-close:focus {
  box-shadow: none;
}

/* ---------- Formularfelder ---------- */

.ui-page .form-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(9px, 0.7rem, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-muted);
  margin-bottom: 6px;
}

.ui-page .form-label i {
  font-size: 0.9em;
  color: var(--ui-muted);
}

.ui-page .form-control,
.ui-page .form-select {
  border: 1.5px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background-color: #fafafa;
  padding: clamp(7px, 0.68vw, 11px) clamp(9px, 0.85vw, 14px);
  font-family: Kanit, sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 300;
  color: #333;
  box-shadow: none;
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    background var(--ui-transition);
}

.ui-page .form-control:focus,
.ui-page .form-select:focus {
  border-color: var(--ui-green);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(85, 131, 42, 0.15);
  outline: none;
}

.ui-page .form-control::placeholder {
  color: #b9bec7;
}

.ui-page textarea.form-control {
  resize: vertical;
  line-height: 1.5;
}

.ui-page .form-check-input {
  border: 1.5px solid var(--ui-border);
  cursor: pointer;
}

.ui-page .form-check-input:checked {
  background-color: var(--ui-green);
  border-color: var(--ui-green);
}

.ui-page .form-check-input:focus {
  border-color: var(--ui-green);
  box-shadow: 0 0 0 3px rgba(85, 131, 42, 0.15);
}

.ui-page .form-check-label {
  font-size: clamp(10px, 0.78vw, 13px);
  color: var(--ui-text);
}

/* ---------- Tabellen ---------- */

.ui-page .table-wrapper {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow-x: auto;
}

.ui-page .table {
  margin: 0;
  font-size: clamp(10px, 0.82vw, 13px);
  color: var(--ui-text);
  --bs-table-bg: transparent;
}

.ui-page .table > thead > tr > th {
  background: var(--ui-bg-light);
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-muted);
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: clamp(9px, 0.85vw, 14px) clamp(10px, 0.95vw, 16px);
  white-space: nowrap;
  vertical-align: middle;
}

.ui-page .table > tbody > tr > td {
  border-bottom: 1px solid var(--ui-border-light);
  padding: clamp(8px, 0.75vw, 12px) clamp(10px, 0.95vw, 16px);
  vertical-align: middle;
}

.ui-page .table > tbody > tr:last-child > td {
  border-bottom: none;
}

/* Zebra und Hover laufen ueber Bootstraps eigene Variablen - Bootstrap malt
   diese Flaechen per inset box-shadow, eine background-color kaeme nicht an. */
.ui-page .table {
  --bs-table-striped-bg: #fbfcfd;
  --bs-table-striped-color: var(--ui-text);
  --bs-table-hover-bg: rgba(85, 131, 42, 0.05);
  --bs-table-hover-color: var(--ui-text);
}

/* Zeilen mit Statusfarbe (.table-success-light usw.) faerben sich selbst.
   Deshalb dort die Bootstrap-Flaeche abschalten, sonst deckt sie die
   Einfaerbung zu. */
.ui-page .table > tbody > tr[class*="-light"] > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-type: transparent;
  background-color: transparent;
}

/* Kompakte Eingabefelder direkt in Tabellenzellen */
.ui-page .table .form-control {
  padding: clamp(5px, 0.5vw, 8px) clamp(7px, 0.7vw, 11px);
  border-radius: 6px;
}

/* ---------- Modals ---------- */

.ui-page .modal-content {
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.ui-page .modal-header {
  border-bottom: 1px solid var(--ui-border-light);
  padding: clamp(14px, 1.25vw, 20px) clamp(16px, 1.5vw, 24px);
}

.ui-page .modal-title {
  font-family: "PT Serif", serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 700;
  color: var(--ui-dark);
}

.ui-page .modal-body {
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.5vw, 24px);
}

.ui-page .modal-footer {
  border-top: 1px solid var(--ui-border-light);
  padding: clamp(12px, 1.15vw, 18px) clamp(16px, 1.5vw, 24px);
}

/* ---------- Badges ---------- */

.ui-page .badge {
  display: inline-block;
  padding: clamp(2px, 0.22vw, 4px) clamp(6px, 0.55vw, 10px);
  border-radius: 999px;
  font-size: clamp(8px, 0.65vw, 11px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---------- Leerzustand ---------- */

.ui-page .alert {
  border-radius: var(--ui-radius);
  font-size: clamp(10px, 0.82vw, 13px);
}

.ui-page .alert-light-gray {
  background: #fff;
  border: 1px dashed var(--ui-border);
  color: var(--ui-muted);
  text-align: center;
  padding: clamp(30px, 3vw, 50px) clamp(16px, 1.5vw, 24px);
}

.ui-page .alert-light-gray i {
  color: var(--ui-border);
}

/* ---------- Generische Panels aus main.css ---------- */

.ui-page .custom-container,
.ui-page .button-container {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.ui-page .button-container {
  align-items: center;
  padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(14px, 1.3vw, 22px);
}

/* ---------- Einrichtungen: Karten mit Akzentbalken ---------- */

.ui-page .facility-card .card {
  position: relative;
  overflow: hidden;
}

.ui-page .facility-card .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(3px, 0.32vw, 5px);
  height: 100%;
  background: var(--ui-green);
}

.ui-page .facility-card .card:hover {
  box-shadow: var(--ui-shadow-hover);
  transform: translateY(-2px);
}

.ui-page .facility-card .card-header {
  background: transparent;
  padding: clamp(10px, 0.95vw, 15px) clamp(14px, 1.3vw, 20px)
    clamp(6px, 0.55vw, 9px) clamp(18px, 1.6vw, 26px);
  border-bottom: none;
}

.ui-page .facility-card .card-body {
  padding: 0 clamp(14px, 1.3vw, 20px) clamp(14px, 1.3vw, 20px)
    clamp(18px, 1.6vw, 26px);
}

.ui-page .facility-card .card-title {
  border-bottom: 1px solid var(--ui-border-light);
  padding-bottom: clamp(7px, 0.65vw, 11px);
  margin-bottom: clamp(9px, 0.85vw, 14px);
  font-size: clamp(13px, 1.05vw, 18px);
}

.ui-page .detail-item {
  font-size: clamp(10px, 0.8vw, 13px);
  color: var(--ui-text);
  font-weight: 300;
}

.ui-page .detail-item strong {
  color: var(--ui-dark);
  font-weight: 500;
}

.ui-page .detail-item i {
  color: var(--ui-muted) !important;
  width: 14px;
  text-align: center;
}

/* ---------- Personenkarten: MA, BK und Archiv (per AJAX nachgeladen) ----------
   Das Archiv nutzt .child-card, die BK-Seite .children-card. */

.ui-page .caregiver-card,
.ui-page .children-card,
.ui-page .child-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  height: 100%;
}

.ui-page .caregiver-card:hover,
.ui-page .children-card:hover,
.ui-page .child-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-hover);
}

.ui-page .caregiver-card::before,
.ui-page .children-card::before,
.ui-page .child-card::before {
  width: clamp(3px, 0.32vw, 5px);
  background: var(--ui-green);
  border-radius: 0;
}

/* Etwas mehr Luft unten, damit der Aktionsbutton nicht an der
   Kartenkante klebt. */
.ui-page .caregiver-card .card-body,
.ui-page .children-card .card-body,
.ui-page .child-card .card-body {
  padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.5vw, 24px)
    clamp(18px, 1.7vw, 28px) clamp(20px, 1.8vw, 30px);
}

/* Abstand zwischen den Kartenreihen auf MA und BK.
   Wichtig: Der Abstand haengt an der Spalte, nicht an der Karte. Die
   Karte hat height:100% und wird von der Flex-Zeile auf volle
   Spaltenhoehe gedehnt - ein margin-bottom an der Karte ragt dann aus
   der Spalte heraus und erzeugt keinen sichtbaren Abstand. Deshalb
   wird das mb-4 aus dem Markup neutralisiert und der Abstand als
   padding an der Spalte gesetzt. */
.ui-page .card-item {
  margin-bottom: 0 !important;
}

.ui-page .ui-card-col {
  padding-bottom: clamp(16px, 1.5vw, 26px);
}

/* Zusaetzliche Luft unter dem Karteninhalt, ebenfalls nur MA und BK. */
.ui-page .card-item .card-body {
  padding-bottom: clamp(20px, 1.9vw, 32px);
}

.ui-page .caregiver-card .card-title,
.ui-page .children-card .card-title,
.ui-page .child-card .card-title {
  border-bottom: 1px solid var(--ui-border-light);
  padding-bottom: clamp(7px, 0.65vw, 11px);
  margin-bottom: clamp(9px, 0.85vw, 14px);
}

.ui-page .caregiver-card .card-title a,
.ui-page .children-card .card-title a,
.ui-page .child-card .card-title a {
  font-family: "PT Serif", serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 700;
  color: var(--ui-dark);
}

.ui-page .caregiver-card .card-title a:hover,
.ui-page .children-card .card-title a:hover,
.ui-page .child-card .card-title a:hover {
  color: var(--ui-green);
}

/* Aufklapp-Button: braucht eine eigene Regel, sonst erbt er den
   transparenten Rahmen der Basis-Buttons und waere nicht mehr sichtbar. */
.ui-page .toggle-details-btn {
  justify-content: space-between;
  width: 140px;
  background: #fff !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.ui-page .toggle-details-btn:hover {
  background: var(--ui-bg-light) !important;
  border-color: var(--ui-muted) !important;
  color: var(--ui-dark) !important;
}

.ui-page .details-section {
  background: var(--ui-bg-light);
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-sm);
  padding: clamp(11px, 1vw, 16px);
  margin-top: 10px;
  font-size: clamp(10px, 0.8vw, 13px);
}

.ui-page .details-section p {
  margin-bottom: 6px;
}

.ui-page .details-section strong {
  color: var(--ui-dark);
  font-weight: 500;
}

.ui-page .gz-group {
  border-bottom: 1px dashed var(--ui-border);
}

/* Zaehler-Badges sollen lesbar bleiben, nicht in Versalien schreien. */
.ui-page .badge.bg-light,
.ui-page .custom-badge-dark {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: clamp(9px, 0.72vw, 12px);
}

.ui-page .badge.bg-light {
  background: var(--ui-bg-light) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* ---------- Signaturen: Kennzahlen ---------- */

.ui-page .stat-card {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
  background: var(--ui-bg-light);
}

.ui-page .stat-card:hover {
  transform: none;
  box-shadow: var(--ui-shadow);
}

.ui-page .stat-card .card-body {
  padding: clamp(12px, 1.15vw, 18px) clamp(10px, 0.95vw, 16px);
}

.ui-page .stat-card h3 {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark) !important;
}

.ui-page .stat-card .card-title,
.ui-page .stat-card p {
  font-family: Kanit, sans-serif;
  font-size: clamp(9px, 0.7rem, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-muted);
  margin-bottom: 4px;
}

.ui-page .stat-icon {
  color: var(--ui-green);
}

/* ---------- Stundenrechner (main.finance.php) ----------
   finance.css bleibt unangetastet. Die farbcodierten Tabellenzellen
   (.editable-cell, .calculated-cell, .database-cell, .readonly-cell)
   werden bewusst NICHT angefasst - dort tragen die Farben Bedeutung
   und werden in der Legende erklaert. */

.ui-page .employee-info-section {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(14px, 1.3vw, 22px);
}

.ui-page .info-item {
  background: var(--ui-bg-light);
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-sm);
  padding: clamp(6px, 0.55vw, 10px) clamp(9px, 0.85vw, 14px);
}

.ui-page .info-label {
  font-weight: 500;
  color: var(--ui-text);
  font-size: clamp(10px, 0.78vw, 13px);
}

.ui-page .info-value {
  font-weight: 600;
  color: var(--ui-dark);
  font-size: clamp(10px, 0.78vw, 13px);
  font-variant-numeric: tabular-nums;
}

.ui-page .info-value-highlight {
  color: var(--ui-green);
}

.ui-page .verrechnung-section,
.ui-page .legend-section {
  border-top: 1px solid var(--ui-border-light);
  padding-top: clamp(12px, 1.15vw, 18px);
}

.ui-page .verrechnung-section h4,
.ui-page .legend-section h4,
.ui-page .abbreviations-section h5 {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
  font-size: clamp(12px, 1vw, 16px);
  margin-bottom: clamp(8px, 0.75vw, 12px);
}

/* Die Inline-Styles dieser Kopfzeilen sind aus dem Markup entfernt,
   damit die Gestaltung hier greifen kann. */
.ui-page .collapsible-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ui-bg-light);
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-sm);
  padding: clamp(9px, 0.85vw, 14px) clamp(13px, 1.2vw, 19px);
  margin: clamp(10px, 0.95vw, 16px) 0;
  transition: background var(--ui-transition);
}

.ui-page .collapsible-header:hover {
  background: #eef1f4;
}

.ui-page .collapsible-header h5 {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
  font-size: clamp(12px, 1vw, 16px);
}

.ui-page .collapsible-header i {
  color: var(--ui-green);
}

/* Kopfzeile der Rechentabellen - die Zellen selbst bleiben kompakt */
.ui-page .table-custom th {
  background-color: var(--ui-bg-light);
  border-color: var(--ui-border);
  color: var(--ui-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ui-page .table-custom th:hover {
  background-color: #eef1f4;
}

.ui-page .table-custom td {
  border-color: var(--ui-border-light);
}

.ui-page .scrollable-table-container {
  border: 1px solid var(--ui-border-light);
  border-radius: var(--ui-radius-sm);
}

.ui-page .export-modal {
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  padding: clamp(16px, 1.5vw, 26px);
}

.ui-page .export-modal h5 {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
  font-size: clamp(13px, 1.05vw, 18px);
}

.ui-page .export-modal p {
  color: var(--ui-muted);
  font-size: clamp(10px, 0.82vw, 13px);
}

.ui-page .legend-item,
.ui-page .abbreviation-item {
  font-size: clamp(10px, 0.78vw, 13px);
  color: var(--ui-text);
}

/* ---------- Historie (main.activity_history.php) ----------
   audit-logs.css bleibt unangetastet, diese Regeln liegen darueber. */

.ui-page .audit-log-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  margin-bottom: clamp(12px, 1.15vw, 18px) !important;
}

.ui-page .audit-log-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-hover);
}

.ui-page .audit-log-card::before {
  width: clamp(3px, 0.32vw, 5px);
  background: var(--ui-green);
  border-radius: 0;
}

.ui-page .audit-log-card .card-body {
  padding: clamp(12px, 1.15vw, 18px) clamp(14px, 1.3vw, 20px)
    clamp(12px, 1.15vw, 18px) clamp(18px, 1.6vw, 26px);
}

.ui-page .audit-log-type-badge {
  border-radius: 999px;
  box-shadow: none;
  background: var(--ui-green);
  letter-spacing: 0.03em;
}

.ui-page .audit-log-message {
  color: var(--ui-text);
  font-size: clamp(10px, 0.82vw, 13px);
  line-height: 1.6;
}

.ui-page .audit-log-meta {
  border-top: 1px solid var(--ui-border-light);
  padding-top: clamp(7px, 0.65vw, 11px);
  color: var(--ui-muted);
}

/* Waren farbige Verlaufsbalken - jetzt helle Panels mit gruenem Akzent. */
.ui-page .search-result-info {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-left: clamp(3px, 0.32vw, 5px) solid var(--ui-green);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  padding: clamp(12px, 1.15vw, 18px) clamp(16px, 1.5vw, 24px);
}

.ui-page .search-result-info i {
  color: var(--ui-green);
}

.ui-page .search-result-info .badge {
  background: var(--ui-bg-light) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border);
  font-size: clamp(9px, 0.72vw, 12px);
  padding: clamp(3px, 0.3vw, 5px) clamp(8px, 0.75vw, 12px);
  text-transform: none;
  letter-spacing: 0;
}

.ui-page .date-separator {
  background: var(--ui-bg-light);
  border: 1px solid var(--ui-border-light);
  border-left: clamp(3px, 0.32vw, 5px) solid var(--ui-green);
  border-radius: var(--ui-radius-sm);
  padding: clamp(9px, 0.85vw, 14px) clamp(14px, 1.3vw, 20px);
}

.ui-page .date-separator h5 {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
}

.ui-page .date-separator h5 i {
  color: var(--ui-green);
}

.ui-page .date-separator .log-count {
  font-size: clamp(9px, 0.72vw, 12px);
  color: var(--ui-muted);
}

.ui-page .search-wrapper .search-suggestions {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow);
}

/* ---------- DMS / Dateiablage (dropbox.php) ----------
   dropbox.css bleibt unangetastet; diese Regeln liegen mit hoeherer
   Spezifitaet darueber und ziehen die webdav-Komponenten auf das
   gemeinsame Design (Radius 14, 1px Rahmen, weicher Schatten). */

.ui-page .webdav-filter-section,
.ui-page .webdav-entity-list,
.ui-page .webdav-upload-section,
.ui-page .webdav-file-list,
.ui-page .webdav-facility-children-info {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-left: 1px solid #e8eaf0;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  margin-bottom: clamp(14px, 1.3vw, 22px);
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.5vw, 24px);
}

/* Listen laufen bis an die Kante, deshalb ohne Innenabstand */
.ui-page .webdav-entity-list,
.ui-page .webdav-file-list {
  padding: 0;
  overflow: hidden;
}

/* Die Kopfleisten waren grüne Verlaufsbalken - jetzt hell mit dunklem
   Titel, wie die Kartenkoepfe der uebrigen Seiten. */
.ui-page .webdav-entity-list-header,
.ui-page .webdav-file-list-header {
  background: var(--ui-bg-light);
  color: var(--ui-dark);
  border-bottom: 1px solid var(--ui-border);
  padding: clamp(12px, 1.15vw, 18px) clamp(16px, 1.5vw, 24px);
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-size: clamp(12px, 1vw, 16px);
}

.ui-page .webdav-entity-list-header i,
.ui-page .webdav-file-list-header i,
.ui-page .webdav-breadcrumb i {
  color: var(--ui-green);
}

.ui-page .webdav-stats {
  font-size: clamp(9px, 0.72vw, 12px);
  color: var(--ui-muted);
  font-family: Kanit, sans-serif;
  font-weight: 400;
}

.ui-page .webdav-breadcrumb {
  font-family: "PT Serif", serif;
  font-size: clamp(12px, 1vw, 16px);
}

.ui-page .webdav-filter-section h3 {
  font-family: "PT Serif", serif;
  font-size: clamp(12px, 1vw, 16px);
  color: var(--ui-dark);
  margin: 0 0 clamp(10px, 0.95vw, 16px) 0;
}

/* Typ- und Ordner-Navigation: gleiche Optik wie die Outline-Buttons */
.ui-page .webdav-type-btn,
.ui-page .webdav-folder-btn {
  border: 1.5px solid var(--ui-border);
  border-radius: 6px;
  background: #fff;
  color: var(--ui-text);
  font-family: Kanit, sans-serif;
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 400;
  padding: clamp(5px, 0.48vw, 8px) clamp(10px, 0.95vw, 15px);
  transition:
    background var(--ui-transition),
    border-color var(--ui-transition),
    color var(--ui-transition);
}

.ui-page .webdav-type-btn:hover,
.ui-page .webdav-folder-btn:hover {
  background: var(--ui-bg-light);
  border-color: var(--ui-muted);
  color: var(--ui-dark);
}

.ui-page .webdav-type-btn.active,
.ui-page .webdav-folder-btn.active {
  background: var(--ui-green);
  border-color: var(--ui-green);
  color: #fff;
}

.ui-page .webdav-filter-form input,
.ui-page .webdav-schoolyear-select {
  border: 1.5px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #fafafa;
  padding: clamp(7px, 0.68vw, 11px) clamp(9px, 0.85vw, 14px);
  font-family: Kanit, sans-serif;
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 300;
  color: #333;
}

.ui-page .webdav-filter-form input:focus,
.ui-page .webdav-schoolyear-select:focus {
  border-color: var(--ui-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(85, 131, 42, 0.15);
  outline: none;
}

/* Eintraege der Entitaets- und Dokumentliste */
.ui-page .webdav-entity-item {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  margin-bottom: clamp(8px, 0.75vw, 12px);
  padding: clamp(11px, 1vw, 16px) clamp(13px, 1.2vw, 19px);
  transition:
    border-color var(--ui-transition),
    box-shadow var(--ui-transition);
}

.ui-page .webdav-entity-item:hover {
  border-color: var(--ui-green);
  box-shadow: var(--ui-shadow);
  transform: none;
}

.ui-page .webdav-entity-name,
.ui-page .webdav-file-name {
  font-family: "PT Serif", serif;
  font-weight: 700;
  color: var(--ui-dark);
  font-size: clamp(11px, 0.9vw, 14px);
}

.ui-page .webdav-entity-details,
.ui-page .webdav-file-meta,
.ui-page .webdav-detail-item,
.ui-page .webdav-sheet-meta {
  font-size: clamp(9px, 0.72vw, 12px);
  color: var(--ui-muted);
}

.ui-page .webdav-document-row {
  border-bottom: 1px solid var(--ui-border-light);
  padding: clamp(12px, 1.15vw, 18px) clamp(16px, 1.5vw, 24px);
}

/* Ablagezone und Leerzustand: gestrichelt, wie der Leerzustand
   der uebrigen Seiten */
.ui-page .webdav-upload-zone {
  border: 1.5px dashed var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: #fafafa;
  padding: clamp(26px, 2.6vw, 44px) clamp(16px, 1.5vw, 24px);
}

.ui-page .webdav-upload-zone:hover,
.ui-page .webdav-upload-zone.drag-over {
  border-color: var(--ui-green);
  background: rgba(85, 131, 42, 0.04);
}

.ui-page .webdav-upload-text {
  font-size: clamp(11px, 0.85vw, 14px);
  color: var(--ui-text);
}

.ui-page .webdav-upload-hint,
.ui-page .webdav-file-size {
  font-size: clamp(9px, 0.72vw, 12px);
  color: var(--ui-muted);
}

.ui-page .webdav-empty-state {
  padding: clamp(30px, 3vw, 50px) clamp(16px, 1.5vw, 24px);
}

.ui-page .webdav-empty-state h3 {
  font-family: "PT Serif", serif;
  font-size: clamp(13px, 1.05vw, 18px);
  color: var(--ui-dark);
}

.ui-page .webdav-empty-state p,
.ui-page .webdav-empty-state-icon {
  color: var(--ui-muted);
}

.ui-page .webdav-child-badge {
  border-radius: 999px;
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 500;
}

.ui-page .webdav-btn-back {
  color: var(--ui-green);
  font-weight: 500;
}

.ui-page .webdav-modal-content {
  border-radius: var(--ui-radius);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 768px) {
  .ui-head-title {
    font-size: clamp(16px, 3.4vw, 21px);
  }

  .ui-head-subtitle {
    font-size: clamp(11px, 2.3vw, 14px);
  }

  .ui-page .btn {
    font-size: clamp(11px, 2.3vw, 14px);
    padding: 7px 14px;
  }

  .ui-page .form-label {
    font-size: clamp(10px, 2.2vw, 13px);
  }

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

  .ui-page .table {
    font-size: clamp(11px, 2.4vw, 14px);
  }
}