html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.letter-spacing {
  letter-spacing: 0.08em;
}

.card {
  border-radius: 0.5rem;
}

.card-header {
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.table th {
  white-space: nowrap;
}

/* === Empty States === */
.empty-state {
  background: #fafbfc;
  border: 1px dashed #d8dde2;
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.empty-state .display-3,
.empty-state .display-4 {
  opacity: 0.5;
}

/* === Kategorie-Badges für KundeDocument === */
.badge.kategorie-vertrag {
  background-color: #0d6efd;
  color: #fff;
}

.badge.kategorie-rechnung {
  background-color: #198754;
  color: #fff;
}

.badge.kategorie-sonstiges {
  background-color: #6c757d;
  color: #fff;
}

/* === Action-Buttons in Tabellen: konsistenter Hover === */
.table .btn-sm.btn-outline-primary:hover,
.table .btn-sm.btn-outline-success:hover,
.table .btn-sm.btn-outline-dark:hover,
.table .btn-sm.btn-outline-secondary:hover,
.table .btn-sm.btn-outline-danger:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* === Inline-Form in Geräte-Tabelle (Löschen-Button) === */
.table form.d-inline,
.table td form {
  display: inline-block;
  margin: 0;
}

/* === Card-Hover für klickbare Karten === */
a > .card.shadow-sm {
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}

a > .card.shadow-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* === Kalender-Legende === */
.legend-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* === FullCalendar Feinjustierung === */
.fc .fc-toolbar-title {
  font-size: 1.25rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px dashed transparent;
}

.fc .fc-toolbar-title:hover {
  border-bottom-color: #6c757d;
}

.fc-event {
  cursor: pointer;
  font-size: 0.85rem;
}

.fc-event:hover {
  filter: brightness(1.1);
}

/* === Servicefall-Card Aufklapp-Indikator === */
.sc-toggle .sc-chevron {
  transition: transform 0.2s ease;
}

.sc-toggle[aria-expanded="true"] .sc-chevron {
  transform: rotate(180deg);
}

.sc-toggle:hover {
  background-color: rgba(0, 0, 0, 0.015);
}

/* ── Alert-Close-Button vertikal zentrieren ──────────────────────────────
   Bootstrap setzt .btn-close in .alert-dismissible absolut auf top-right mit
   eigenem Padding — bei reduzierten Alerts (py-2 etc.) wirkt das oben-rechts
   geklebt und verschoben. Hier vertikal mittig halten, damit das X sauber
   auf einer Linie mit dem Alert-Text sitzt. */
.alert-dismissible .btn-close {
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 1rem;
}

/* ── Scrollbars ausblenden ────────────────────────────────────────────────
   Browser-übergreifend alle vertikalen und horizontalen Scrollleisten
   visuell entfernen. Scrollen bleibt funktional (Mausrad, Touch, Tastatur).
   Wirkt auf Window-Scroll + alle Container mit overflow:auto/scroll. */
* {
  scrollbar-width: none;        /* Firefox 64+ */
  -ms-overflow-style: none;     /* IE 11 / Edge Legacy */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                /* Chromium, WebKit (Chrome/Edge/Safari) */
}

/* =====================================================================
   Wiederverwendbare Detail-Karten (kd-*) — ursprünglich inline auf der
   Kunden-Detailseite, hier global, damit auch die Lieferanten-Seite das
   gleiche kompakte Karten-Layout nutzt (Stammdaten, Ansprechpartner …).
   ===================================================================== */
.form-section-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding: 0.15rem 0 0.15rem 0.65rem;
  border-left: 3px solid var(--bs-primary);
  line-height: 1.3;
}
.form-section-label i { color: var(--bs-primary); margin-right: 0.4rem !important; }
.form-section-label:not(:first-child) { margin-top: 1.6rem; }

.kd-card .card-header {
  background: var(--bs-light, #f8f9fa);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1rem;
}
.kd-card .card-header h5 { margin: 0; font-size: 1.05rem; color: var(--bs-body-color); }
.kd-card .card-header .badge.bg-light { background: rgba(0,0,0,0.08) !important; color: var(--bs-secondary-color); }
.kd-icon-primary { color: var(--bs-primary); }
.kd-icon-info { color: var(--bs-info); }
.kd-icon-success { color: var(--bs-success); }
.kd-icon-warning { color: var(--bs-warning); }
.kd-icon-secondary { color: var(--bs-secondary-color, #6c757d); }

.kd-row { padding: .75rem; border-radius: 10px; transition: background .12s ease; }
.kd-row:hover { background: #f8f9fa; }
.kd-row + .kd-row { border-top: 1px solid #eef0f4; }

.kd-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.95rem; color: #fff;
  background: #6c757d;
}
.kd-avatar.square { border-radius: 10px; }
.kd-meta { font-size: 0.82rem; color: #495057; }
.kd-meta a { color: #495057; text-decoration: none; }
.kd-meta a:hover { color: #0d6efd; text-decoration: underline; }
.kd-meta .ikoblock { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.85rem; }
.kd-meta .ikoblock i { color: #6c757d; }

/* Ziehbare Spaltenbreiten (table-resize.js): Greifer am rechten Rand jeder Kopfzelle. */
table[data-resizable] th.col-resizable { position: relative; }
table[data-resizable] th .col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
table[data-resizable] th .col-resizer:hover { background: rgba(13, 110, 253, .35); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* Kategorie-Combobox (komm-list): das Eingabefeld ist absichtlich schmal (col-3),
   aber das Autocomplete-Dropdown soll lesbar breit sein — sonst bricht der Text
   („Ar bei t"). min-width lässt es nach rechts über das schmale Feld hinausragen. */
.komm-list .ac-dropdown { min-width: 18rem; }
.komm-list .ac-item .ac-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }