/* Grundlayout */
.card { border-radius: 1rem; }
.btn { border-radius: .8rem; }
.table { vertical-align: middle; }
.badge { border-radius: 999px; }

/* ===== Musterfirma Theme (Website-Farben) ===== */
:root{
  --dp-bg: #f7faff;
  --dp-card: #ffffff;
  --dp-text: #102a43;
  --dp-muted: #52606d;
  --dp-line: #dbe7ff;

  /* UI: Eingabefelder sollen sich (dezent) vom Hintergrund abheben.
     Wichtig: nur Optik (keine Logik). */
  --dp-input-bg: rgba(255, 255, 255, .92);

  --dp-blue: #2b7cff;
  --dp-blue-rgb: 43,124,255;
  --dp-orange: #ff9a2b;
  --dp-orange-rgb: 255,154,43;

  --dp-shadow: 0 16px 40px rgba(16,42,67,.08);
  --dp-shadow2: 0 10px 24px rgba(16,42,67,.08);

  --dp-focus-ring: 0 0 0 .25rem rgba(var(--dp-blue-rgb), .18);
  /* Menu-Tiles: bewusst einheitlich (kein Verlauf pro Kachel), damit der Hintergrund nicht wie ein Pattern wirkt */
  --dp-tile-bg: rgba(255, 255, 255, .92);
  --dp-tile-bg-hover: rgba(255, 255, 255, .97);
}

:root, [data-bs-theme="light"]{
  --bs-primary: var(--dp-blue);
  --bs-primary-rgb: var(--dp-blue-rgb);
  --bs-body-bg: var(--dp-bg);
  --bs-body-color: var(--dp-text);
  --bs-link-color: var(--dp-blue);
  --bs-link-hover-color: rgba(var(--dp-blue-rgb), .85);
  --bs-border-color: var(--dp-line);
  --bs-secondary-color: var(--dp-muted);
}

html, body { min-height: 100%; }

/* Hintergrund wie Website, aber dezent */
body{
  min-height: 100vh;
  background: radial-gradient(1200px 800px at 15% -10%, rgba(var(--dp-blue-rgb), .10), transparent 60%),
              radial-gradient(900px 700px at 92% 0%, rgba(var(--dp-orange-rgb), .10), transparent 55%),
              linear-gradient(180deg, #ffffff 0%, var(--dp-bg) 42%, var(--dp-bg) 100%);
  background-color: var(--dp-bg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Cards: Website-Line-Farbe */
.card{
  border-color: rgba(219,231,255,.95);
}

/* A03: Eingabefelder – modernes Hover/Focus Verhalten */
.form-control,
.form-select,
.form-check-input,
.input-group-text{
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.form-control:hover,
.form-select:hover{
  border-color: rgba(var(--dp-blue-rgb), .30);
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(var(--dp-blue-rgb), .55);
  box-shadow: var(--dp-focus-ring);
}
.form-check-input:focus{
  border-color: rgba(var(--dp-blue-rgb), .55);
  box-shadow: var(--dp-focus-ring);
}

/* Systemweit: Eingabefelder minimal heller als die Fläche ringsherum (dezent, konsistent).
   Hinweis: Border bleibt unverändert; Disabled/Readonly behalten Bootstrap-Standard. */
.form-control:not(:disabled):not([readonly]),
.form-select:not(:disabled){
  background-color: var(--dp-input-bg) !important;
}


/* Buttons: Primärfarbe wie Website */
.btn-primary{
  --bs-btn-bg: var(--dp-blue);
  --bs-btn-border-color: rgba(var(--dp-blue-rgb), .35);
  --bs-btn-hover-bg: rgba(var(--dp-blue-rgb), .92);
  --bs-btn-hover-border-color: rgba(var(--dp-blue-rgb), .45);
  --bs-btn-active-bg: rgba(var(--dp-blue-rgb), .88);
  --bs-btn-active-border-color: rgba(var(--dp-blue-rgb), .55);
  --bs-btn-focus-shadow-rgb: var(--dp-blue-rgb);
}
.btn-outline-primary{
  --bs-btn-color: var(--dp-blue);
  --bs-btn-border-color: rgba(var(--dp-blue-rgb), .35);
  --bs-btn-hover-bg: rgba(var(--dp-blue-rgb), .10);
  --bs-btn-hover-border-color: rgba(var(--dp-blue-rgb), .45);
  /* Aktiver/Checked Zustand: deutlich kräftigeres Blau für besseren Kontrast zur weißen Schrift
     (z.B. im Modal "Abwesenheit eintragen" -> Art: Urlaub). */
  --bs-btn-active-bg: rgba(var(--dp-blue-rgb), .92);
  --bs-btn-active-border-color: rgba(var(--dp-blue-rgb), .92);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--dp-blue-rgb);
}


/* 5-Stunden-Regel (Badge "5h") */
.badge-5h {
  /* bewusst nicht transparent: soll sich auch auf grauen Flächen klar abheben */
  background: var(--dp-blue) !important;
  color: #fff !important;
  border: 1px solid rgba(var(--dp-blue-rgb), .55) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Admin: Zeiten-Ansicht – 5h-Regel Switch bewusst dezent und klein halten */
.min5-switch {
  opacity: .82;
}
.min5-switch .form-check-input {
  /* Bootstrap-Switch ist sonst relativ groß und prominent */
  width: 2.15em;
  height: 1.05em;
  margin-top: .25em;
}
.min5-switch .form-check-label {
  font-size: .78em;
}

/* Einheitliche Badges für Statusanzeigen (z.B. "steht an" / "läuft" / "erledigt") */
.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.3rem; /* identische Breite für alle Status-Badges */
  box-sizing: border-box;
  white-space: nowrap;
}

/* Status: läuft (dezentes Orange) */
.badge-running {
  background: var(--dp-orange);
  color: #fff;
}

/* Badge: Zeiten senden (Warnhinweis) */
.badge-submit {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fdba74;
}

/* Admin: Status-Ergänzung "zeiten fehlen" (dezentes Rot) */
.badge-times-missing {
  background: rgba(220, 53, 69, .12);
  color: rgba(220, 53, 69, 1);
  border: 1px solid rgba(220, 53, 69, .28);
}

/* Badge: Serie (Dienste aus einer Serie) – dezentes Blau */
.badge-series {
  background: rgba(108, 117, 125, .10);
  color: rgba(73, 80, 87, .95);
  border: 1px solid rgba(108, 117, 125, .18);
  font-weight: 500;
}




/* Admin: Kennzeichnung, wenn EXAKTE Zeiten vom Admin/Planer eingetragen wurden */
.badge-admin-time{
  background: rgba(108, 117, 125, .08);
  color: rgba(73, 80, 87, .92);
  border: 1px solid rgba(108, 117, 125, .20);
  font-weight: 500;
}
/* Admin: Übermittelte Dienstzeiten – Zeilen dezent einfärben */
.list-group-item.evaluation-row-ok {
  background: rgba(25, 135, 84, .06);
}
.list-group-item.evaluation-row-missing {
  background: rgba(220, 53, 69, .06);
}
.list-group-item-action.evaluation-row-ok:hover,
.list-group-item-action.evaluation-row-ok:focus {
  background: rgba(25, 135, 84, .09);
}
.list-group-item-action.evaluation-row-missing:hover,
.list-group-item-action.evaluation-row-missing:focus {
  background: rgba(220, 53, 69, .09);
}

/* Admin: Zeiten-Ansicht (Dienst) – Mitarbeiterzeilen dezent einfärben */
tr.times-row-ok { background: rgba(25, 135, 84, .06) !important; }
tr.times-row-missing { background: rgba(220, 53, 69, .06) !important; }
tr.times-row-ok:hover { background: rgba(25, 135, 84, .09) !important; }
tr.times-row-missing:hover { background: rgba(220, 53, 69, .09) !important; }

/* Bootstrap table-striped setzt Hintergründe auf die Zellen, nicht auf <tr>.
   Damit rot/grün auch am PC zuverlässig sichtbar ist, müssen wir die <td>/<th> mitfärben. */
.table.table-striped tbody tr.times-row-ok > * { background: rgba(25, 135, 84, .06) !important; }
.table.table-striped tbody tr.times-row-missing > * { background: rgba(220, 53, 69, .06) !important; }
.table.table-striped tbody tr.times-row-ok:hover > * { background: rgba(25, 135, 84, .09) !important; }
.table.table-striped tbody tr.times-row-missing:hover > * { background: rgba(220, 53, 69, .09) !important; }

.card.times-row-ok { background: rgba(25, 135, 84, .06) !important; }
.card.times-row-missing { background: rgba(220, 53, 69, .06) !important; }

/* Zeitumstellung (Sommer/Winter) */
.badge-dst {
  background: rgba(14, 165, 233, .12);
  color: rgba(3, 105, 161, 1);
  border: 1px solid rgba(3, 105, 161, .28);
}



/* Mitarbeiter-Typen (Subunternehmen / Dummy) – dezente Markierung in Listen */
.emp-flag{
  display: inline-flex;
  align-items: center;
  border-radius: .55rem;
  padding: .02rem .35rem;
}
.emp-flag-sub{
  background: rgba(245, 239, 229, .95);
  border: 1px solid rgba(209, 184, 150, .45);
}
.emp-flag-dummy{
  background: rgba(241, 238, 251, .95);
  border: 1px solid rgba(192, 181, 232, .45);
}

/* Admin: "Online"-Anzeige in der Navbar – dezent grün */
.admin-online-users{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  max-width: 48vw;
}
.admin-online-user{
  color: rgba(25, 135, 84, .85);
  background: rgba(25, 135, 84, .08);
  border: 1px solid rgba(25, 135, 84, .14);
  border-radius: 999px;
  padding: .05rem .45rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Admin: Online-Badges für Admin-Zugänge – dezent orange (Mitarbeiter bleiben grün) */
.admin-online-user.admin-online-user-admin{
  color: rgba(217, 119, 6, .90);
  background: rgba(217, 119, 6, .10);
  border-color: rgba(217, 119, 6, .18);
}

/* Admin: Hinweis "manuell bearbeitet" (Mitarbeiter hat Zeiten selbst angepasst) */
.badge-manual {
  background: rgba(var(--dp-blue-rgb), .12);
  color: rgba(var(--dp-blue-rgb), 1);
  border: 1px solid rgba(var(--dp-blue-rgb), .28);
}

/* Admin: dezente Hervorhebung, welche Zeit (Start/Ende gerundet) manuell abweicht */
td.time-manual-changed {
  background: rgba(255, 193, 7, .12) !important;
}
span.time-manual-changed {
  display: inline-block;
  background: rgba(255, 193, 7, .14);
  border: 1px solid rgba(255, 193, 7, .28);
  border-radius: .6rem;
  padding: .05rem .35rem;
}

/* Dezente Darstellung für vergangene Dienste in der Wochenübersicht */
tr.row-past > td { color: rgba(108, 117, 125, 1); } /* Bootstrap text-muted */
tr.row-past { background: rgba(248, 249, 250, 1); }  /* Bootstrap light */




/* Reusable soft-blue highlight (same palette as 'Aktuelle Woche' / 'Heute') */
.dp-btn-current {
  background: rgba(var(--dp-blue-rgb), .10) !important;
  border-color: rgba(var(--dp-blue-rgb), .22) !important;
  color: rgba(var(--dp-blue-rgb), 1) !important;
}
.dp-btn-current:hover,
.dp-btn-current:focus {
  background: rgba(var(--dp-blue-rgb), .14) !important;
  border-color: rgba(var(--dp-blue-rgb), .30) !important;
  color: rgba(var(--dp-blue-rgb), 1) !important;
}

/* Subtle attention frame for required admin inputs (keeps default focus ring) */
.dp-field-attention {
  border-color: rgba(var(--dp-blue-rgb), .55) !important;
}

/* Availability calendar (Admin): highlight the currently running week (Mo–So) with a subtle blue frame */
.availability-day-currentweek {
  /* Rahmen als Overlay innerhalb der Kachel zeichnen, damit er
     - in der horizontal scrollbar Monatsansicht nicht abgeschnitten wird
     - auch in der Kopfzeile sichtbar bleibt (Head überdeckt sonst inset-shadow) */
  position: relative;
}
.availability-day-currentweek::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(var(--dp-blue-rgb), .55);
  border-radius: inherit;
  pointer-events: none;
  /* muss über Head/Body liegen, damit der Rahmen auch in der Kopfzeile sichtbar ist */
  z-index: 3;
}
.availability-day-currentweek:hover::after {
  border-color: rgba(var(--dp-blue-rgb), .70);
}

/* Zusätzlich: Beim heutigen Tag die Kopfzeile dezent matt-blau hinterlegen */
.availability-day-today .availability-day-head {
  /* Kopfzeile vom heutigen Tag: klarer Blau-Ton (weniger "grünlich" als zuvor) */
  background: rgba(var(--dp-blue-rgb), .14);
  border-bottom-color: rgba(var(--dp-blue-rgb), .18);
}
/* Heute-Markierung (Dienste verwalten) */
tr.row-today > td {
  border-top: 2px solid rgba(var(--dp-blue-rgb), .55);
  border-bottom: 2px solid rgba(var(--dp-blue-rgb), .55);
  background-color: rgba(var(--dp-blue-rgb), .06) !important;
}
tr.row-today > td:first-child {
  border-left: 2px solid rgba(var(--dp-blue-rgb), .55);
  border-top-left-radius: .6rem;
  border-bottom-left-radius: .6rem;
}
tr.row-today > td:last-child {
  border-right: 2px solid rgba(var(--dp-blue-rgb), .55);
  border-top-right-radius: .6rem;
  border-bottom-right-radius: .6rem;
}


/* Dienste verwalten: Tag-Gruppierung (abwechselnde Hintergrundfarbe pro Datum) */
/* Dienste verwalten: Wochentags-Streifen (Mo=weiß, Di=sehr hellgrau, Mi=weiß, …) */
tr.day-group-a > td { background-color: #fff; }
/* Kontrast leicht erhöht, damit die Tagesblöcke besser unterscheidbar sind */
tr.day-group-b > td { background-color: rgba(0,0,0,.06); }
/* Erledigte/verg. Dienste bleiben textlich „muted“, folgen aber der Wochentags-Färbung */
tr.row-past.day-group-a > td { background-color: #fff !important; }
tr.row-past.day-group-b > td { background-color: rgba(0,0,0,.06) !important; }

/* Mobile-Cards */
.card.row-today {
  border: 2px solid rgba(var(--dp-blue-rgb), .55) !important;
  background: rgba(var(--dp-blue-rgb), .04) !important;
}

/* Dezente Darstellung (auch für Mobile-Cards) */
.card.row-past { background: rgba(248, 249, 250, 1); }
.card.row-past, .card.row-past .text-muted { color: rgba(108, 117, 125, 1); }

/* Dienste verwalten (Mobile-Cards): Wochentags-Streifen (Mo=weiß, Di=sehr hellgrau, …) */
.card.day-group-a { background: #fff; }
.card.day-group-b { background: rgba(0,0,0,.06); }
.card.row-past.day-group-a { background: #fff !important; }
.card.row-past.day-group-b { background: rgba(0,0,0,.06) !important; }

/* Admin-Dashboard: Überschrift klarer abgesetzt */
.admin-heading-card { border-left: .35rem solid rgba(var(--dp-blue-rgb), .65); }

/* Admin-/Mitarbeiter-Menü-Kacheln: farbiger Hintergrund + Hover/Glow */
.admin-menu-tile,
.employee-menu-tile,
.dp-menu-tile {
  display: block;
  border: 1px solid rgba(219,231,255,.95);
  background: var(--dp-tile-bg);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease, background .14s ease;
}
.admin-menu-tile:hover,
.admin-menu-tile:focus,
.employee-menu-tile:hover,
.employee-menu-tile:focus,
.dp-menu-tile:hover,
.dp-menu-tile:focus {
  border-color: rgba(var(--dp-blue-rgb), .32);
  background: var(--dp-tile-bg-hover);
  box-shadow: var(--dp-shadow);
  transform: translateY(-2px);
}
.admin-menu-tile:active,
.employee-menu-tile:active,
.dp-menu-tile:active {
  transform: translateY(0);
  box-shadow: var(--dp-shadow2);
}
.admin-menu-tile:focus-visible,
.employee-menu-tile:focus-visible,
.dp-menu-tile:focus-visible {
  box-shadow: var(--dp-shadow), var(--dp-focus-ring);
}

/* Update 2026-02-19: "Mitarbeiter" – "Mitarbeiter verwalten" Kachel deutlicher als Button erkennbar
   - Rahmen im Standard etwas markanter
   - beim Hover ein leichter blauer Glow
*/
.admin-menu-tile{
  border-color: rgba(var(--dp-blue-rgb), .28);
}
.admin-menu-tile:hover{
  border-color: rgba(var(--dp-blue-rgb), .42);
  box-shadow: var(--dp-shadow), 0 0 0 .22rem rgba(var(--dp-blue-rgb), .14);
}
/* Fokus-Ring für Tastatur-Navigation bleibt maßgeblich (überschreibt Hover-Glow) */
.admin-menu-tile:focus-visible{
  box-shadow: var(--dp-shadow), var(--dp-focus-ring);
}

/* Einsatzleiter (EL) - dezente Hervorhebung */
.row-el { border-left: .35rem solid rgba(255, 193, 7, .9); background: rgba(255, 193, 7, .08); }
.badge-el { background: rgba(255, 193, 7, .95); color: #212529; }

/* Update 277: Swap-Icon/Button in "Mitarbeiter im Dienst" */
.btn-swap-emp{
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .55rem;
}
.btn-swap-emp svg{
  width: 16px;
  height: 16px;
  opacity: .78;
  transition: transform .12s ease, opacity .12s ease;
}
.btn-swap-emp:hover svg,
.btn-swap-emp:focus svg{
  opacity: 1;
  transform: translateY(-1px);
}

/* Update 281: Swap-Symbol deutlich näher an den Namen (Desktop-Tabelle) */
#assignedDesktop table.table{
  table-layout: fixed;
  width: 100%;
}
#assignedDesktop th.assigned-name-cell,
#assignedDesktop td.assigned-name-cell{
  /* Name-Spalte etwas schmaler, damit das Swap-Icon optisch näher am Namen sitzt */
  width: clamp(220px, 30%, 340px);
  padding-right: 0 !important;
}
#assignedDesktop th.swap-col,
#assignedDesktop td.swap-col{
  /* Swap-Spalte etwas breiter, Icon ganz links in der Spalte */
  width: 44px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left;
}
#assignedDesktop td.swap-col .btn-swap-emp{
  margin-left: 0 !important;
}

/* Status-Hervorhebung in Dienst-Erstellen/Bearbeiten */

.status-select.status-in_planung {
  /* Wichtig: background-color statt background verwenden, damit das Select-Arrow-Icon
     (Bootstrap background-image) erhalten bleibt. Außerdem !important, da Inputs/Selects
     systemweit eine leicht helle Hintergrundfarbe bekommen. */
  background-color: rgba(255, 193, 7, .14) !important;
  border-color: rgba(255, 193, 7, .35);
}
.status-select.status-geplant {
  background-color: rgba(25, 135, 84, .12) !important;
  border-color: rgba(25, 135, 84, .30);
}

/* Login: Checkbox + Text sauber zentriert (iOS/Safari) */
.form-check.remember-center {
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .45rem;
}
.form-check.remember-center .form-check-input {
  margin: 0;
  float: none;
}
.form-check.remember-center .form-check-label {
  margin: 0;
}

/* Login: dezente Fußzeile, immer am unteren Rand sichtbar */
.login-footer {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: .875rem;
  color: rgba(108, 117, 125, .75);
  bottom: calc(6px + env(safe-area-inset-bottom));
  padding: 0 12px;
  pointer-events: none;
}

/* Mitarbeiter-Footer: auf allen Nicht-Admin-Seiten dauerhaft sichtbar */
.employee-fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: .875rem;
  line-height: 1.2;
  color: rgba(108, 117, 125, .80);
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Platz schaffen, damit Inhalte nicht vom fixen Footer verdeckt werden */
.main-has-employee-footer {
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Login: Startseite – Card + Eingabefeld besser absetzen (matt-blau) */
.login-card {
  background: rgba(234, 244, 255, .55);
  border: 1px solid rgba(159, 202, 255, .55);
  box-shadow: 0 .9rem 1.6rem rgba(var(--dp-blue-rgb), .10);
}

.login-input {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(159, 202, 255, .70);
}

.login-input:focus {
border-color: rgba(var(--dp-blue-rgb), .60);
    box-shadow: var(--dp-focus-ring);
}

/* ===== Update 58: Verfügbarkeiten + Hinweis pro Mitarbeiter ===== */

.availability-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
  .availability-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .availability-grid { grid-template-columns: repeat(7, 1fr); }
}

.availability-day {
  display: block;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.availability-day:hover {
  box-shadow: 0 0.125rem 0.35rem rgba(0,0,0,0.08);
}

.btn-check:checked + .availability-day {
  background: #d1fae5; /* matte grün */
  border-color: #6ee7b7;
}

/* Programmatic selection (z. B. Admin-Ansicht je Mitarbeiter) */
.availability-day-selected {
  background: #d1fae5; /* matte grün */
  border-color: #6ee7b7;
}

.availability-day-disabled,
.btn-check:disabled + .availability-day {
  background: #f1f3f5;
  border-color: #e9ecef;
  color: #868e96;
  cursor: not-allowed;
  box-shadow: none;
}

.availability-day .availability-dow {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.availability-day .availability-date {
  color: #6c757d;
  font-size: 0.95rem;
}

.availability-day .availability-names {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.2;
  max-height: 7.2em;
  overflow: hidden;
}

/* Admin-Kalender: kompakte Kopfzeile wie „Mo, 12. Dez.“ */
.availability-day-title {
  font-weight: 400;
  color: #495057;
  text-align: center;
  font-size: 0.85rem;
}

/* Admin-Kalender: Kachel in Kopf + Body teilen */
.availability-day-admin {
  padding: 0;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
}

.availability-day-admin:hover,
.availability-day-admin:focus {
  text-decoration: none !important;
}

.availability-day-admin * {
  text-decoration: none !important;
}

.availability-day-head {
  background: #f1f3f5;
  border-bottom: 1px solid #e9ecef;
  padding: 8px 10px;
}

.availability-day-body {
  padding: 10px 10px 12px;
  min-height: 86px;
}

/* Monatsansicht (Admin): auf mobilen Geräten horizontal scrollbar */
.availability-month-wrapper {
  overflow-x: auto;
  padding: 2px; /* Platz, damit Rahmen/Schatten am Rand nicht abgeschnitten werden */
}

.availability-grid-month {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
  .availability-grid-month { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .availability-grid-month { grid-template-columns: repeat(7, 1fr); }
}

.availability-day-placeholder {
  display: block;
  border: 1px dashed #dee2e6;
  border-radius: 12px;
  background: #f8f9fa;
  padding: 14px 12px;
  min-height: 110px;
}

/* Tage außerhalb des aktuellen Monats (Monatsansicht Admin) */
.availability-day-outside {
  background: #f8f9fa;
  border-color: #e9ecef;
  color: #6c757d;
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.availability-day-outside:hover {
  box-shadow: none;
}

.availability-day-outside.availability-day-selected {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: inherit;
}

/* Admin: Hinweis „Auto beendet (Ende fehlt)“ besser lesbar */
.text-auto-ended {
  color: #7a4b00;
}

.badge-availability-name {
  background: #f1f3f5;
  border: 1px solid #e9ecef;
  color: #212529;
  font-weight: 500;
  text-decoration: none !important;
  white-space: normal;
  word-break: break-word;
}

/* Admin-Verfügbarkeiten: Mitarbeiter ist am Tag bereits "geplant" */
.badge-availability-name.badge-availability-name-planned {
  background: rgba(253, 126, 20, 0.18);
  border-color: rgba(253, 126, 20, 0.38);
  color: #6a2f00;
}

.availability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Employee-Navbar: Verfügbarkeit-Button dezent blau */
.btn-availability {
  background: rgba(var(--dp-blue-rgb), .10);
  border-color: rgba(var(--dp-blue-rgb), .22);
  color: #0b3b63;
}

.btn-availability:hover {
  background: rgba(var(--dp-blue-rgb), .14);
  border-color: rgba(var(--dp-blue-rgb), .30);
  color: #0b3b63;
}

.availability-day-admin:hover {
  border-color: #adb5bd;
}

/* Hinweis: Mitarbeiter ist laut Verfügbarkeit "grün" */
.row-available {
  background: rgba(25,135,84,0.14) !important;
}

/* Update 277: Mitarbeiter ist bereits in einem anderen Dienst verplant (Swap-Auswahl) */
.row-busy {
  background: rgba(255,193,7,0.14) !important;
  box-shadow: inset 4px 0 0 rgba(255,193,7,0.28);
}

/* Update 06: Mitarbeiter ist abwesend (Urlaub/Krank/etc.) */
.row-absent {
  background: rgba(220,53,69,0.12) !important;
  box-shadow: inset 4px 0 0 rgba(220,53,69,0.25);
}

/* Bootstrap Tables setzen die Hintergrundfarbe über Zellen; daher td + CSS-Var. */
tr.row-busy {
  --bs-table-bg: rgba(255,193,7,0.14);
}

tr.row-absent {
  --bs-table-bg: rgba(220,53,69,0.12);
}

tr.row-busy > td {
  background-color: rgba(255,193,7,0.14) !important;
}

tr.row-absent > td {
  background-color: rgba(220,53,69,0.12) !important;
}

/* Bootstrap Tables setzen die Hintergrundfarbe über Zellen; daher td + CSS-Var. */
tr.row-available {
  --bs-table-bg: rgba(25,135,84,0.14);
}

tr.row-available > td {
  background-color: rgba(25,135,84,0.14) !important;
}

/* Mobile Cards: Card-Body überschreibt sonst die Hintergrundfarbe */
.row-available .card-body {
  background: rgba(25,135,84,0.14) !important;
}

.row-absent .card-body {
  background: rgba(220,53,69,0.12) !important;
}

.row-busy .card-body {
  background: rgba(255,193,7,0.14) !important;
}

.badge-employee-note {
  background: #e0e7ff;
  color: #1e3a8a;
}

/* Dezent stärkere Abgrenzung (besser sichtbar auch im grünen Bereich) */
.row-available {
  box-shadow: inset 4px 0 0 rgba(25,135,84,0.25);
}
tr.row-available > td:first-child {
  box-shadow: inset 4px 0 0 rgba(25,135,84,0.25);
}

tr.row-absent > td:first-child {
  box-shadow: inset 4px 0 0 rgba(220,53,69,0.25);
}


.alert-employee-note {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
}

/* Update 75: Anhänge-Badge (Team-/MA-Hinweise) */
.badge-attachment {
  background: #f1f5ff;
  border: 1px solid #d6e4ff;
  color: #1e3a8a;
  font-weight: 500;
  text-decoration: none !important;
}

.badge-attachment:hover {
  background: #e8f0ff;
  border-color: #c7dbff;
  color: #1e3a8a;
}

/* Update 77: Anhang löschen + Viewer-Seite */
.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-attachment-delete {
  border: 0;
  background: transparent;
  padding: 0 2px;
  margin: 0;
  line-height: 1;
  font-size: 14px;
  color: #64748b; /* slate */
  cursor: pointer;
}

.btn-attachment-delete:hover {
  color: #b91c1c; /* red */
}

.attachment-viewer {
  margin-top: 10px;
}

.attachment-frame {
  width: 100%;
  min-height: 70vh;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 768px) {
  .attachment-frame { min-height: 60vh; }
}


/* Mitarbeiter: Auto-beendeter Dienst – Planer-Hinweis hervorheben */
.planner-contact-emph{
  font-weight: 600;
  color: #7c2d12;
}
/* === Update 86: Admin Shift-Edit – Bereiche dezent abgrenzen === */
.shift-card-event{
  background: rgba(var(--dp-blue-rgb), 0.04);
  border: 1px solid rgba(var(--dp-blue-rgb), 0.10);
}

.shift-section-assigned{
  background: rgba(25,135,84,0.06);
  border: 1px solid rgba(25,135,84,0.12);
}

.shift-section-assigned .table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.30);
}

.shift-section-assigned .table > :not(caption) > * > *{
  background-color: transparent;
}
/* === Update 91: Admin Shift-Edit – Freie Mitarbeiter optisch sauber abgrenzen + Verfügbarkeit besser sichtbar im grünen Bereich === */
.shift-section-free{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Verfügbare Mitarbeiter in der grünen "Zugewiesen"-Sektion etwas dunkler, damit sie sich vom Hintergrund abheben */
.shift-section-assigned .row-available,
.shift-section-assigned tr.row-available{
  --bs-table-bg: rgba(25,135,84,0.20);
  background: rgba(25,135,84,0.20) !important;
}

.shift-section-assigned tr.row-available > td{
  background-color: rgba(25,135,84,0.20) !important;
}

.shift-section-assigned .row-available .card-body{
  background: rgba(25,135,84,0.20) !important;
}

.shift-section-assigned .row-available{
  box-shadow: inset 4px 0 0 rgba(25,135,84,0.35);
}

/* Update 06: Abwesenheit auch im grünen Assigned-Bereich klar (rot) sichtbar */
.shift-section-assigned .row-absent,
.shift-section-assigned tr.row-absent{
  --bs-table-bg: rgba(220,53,69,0.18);
  background: rgba(220,53,69,0.18) !important;
}

.shift-section-assigned tr.row-absent > td{
  background-color: rgba(220,53,69,0.18) !important;
}

.shift-section-assigned .row-absent .card-body{
  background: rgba(220,53,69,0.18) !important;
}

.shift-section-assigned .row-absent{
  box-shadow: inset 4px 0 0 rgba(220,53,69,0.35);
}

/* === Update 145: Admin „Zeiten“ – Mitarbeiter tauschen (Dropdown/Button dezenter, sauber ausgerichtet) === */
.swap-employee-form .swap-select{
  width: 100%;
}
.swap-employee-form .swap-btn{
  white-space: nowrap;
}
@media (min-width: 768px){
  .swap-employee-form .swap-select{
    width: auto;
    min-width: 260px;
    max-width: 360px;
  }
}


/* Admin: Dienst bearbeiten/anlegen – Mitarbeiterlisten: hovered row subtle highlight */
#assignedDesktop tbody tr:hover > *,
#availDesktop tbody tr:hover > * {
  background: rgba(0, 0, 0, .03) !important;
}

#assignedMobile .card:hover .card-body,
#availMobile .card:hover .card-body {
  background: rgba(0, 0, 0, .02);
}

/* Hinweis MA: für Subunternehmer/Dummy deaktiviert */
.btn-note-disabled:disabled,
.btn-note-disabled[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Flash success banner: auto-hide after a few seconds (smooth fade + collapse) */
.flash-autohide {
  transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}
.flash-autohide.is-hiding {
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


@media (max-width: 575px) {
  .availability-day { padding: 10px 8px; }
  .availability-day-title { font-size: 0.85rem; }
  .badge-availability-name { font-size: 0.75rem; }
}


/* === Update 197: Admin – Nachrichtenliste (Nachrichtentext abgesetzt + Status-Färbung) === */
.admin-msg-card{
  border-left: 6px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.015);
}
.admin-msg-card.admin-msg-active{
  background: rgba(25,135,84,0.06);
  border-left-color: rgba(25,135,84,0.32);
}
.admin-msg-card.admin-msg-expired{
  background: rgba(255,193,7,0.07);
  border-left-color: rgba(255,193,7,0.40);
}
.admin-msg-card.admin-msg-retracted{
  background: rgba(108,117,125,0.06);
  border-left-color: rgba(108,117,125,0.34);
}

.admin-msg-textbox{
  border: 1px solid rgba(var(--dp-blue-rgb), 0.16);
  background: rgba(var(--dp-blue-rgb), 0.04);
  border-radius: 10px;
  padding: 10px 12px;
}

/* === Update 202: Admin – Nachrichten (Details): Badges noch näher an Namen === */
.msg-recipient-row{
  display: grid;
  /* Name-Spalte bewusst begrenzen, damit das Status-Badge näher am Namen sitzt,
     aber weiterhin in einer sauber ausgerichteten Spalte bleibt. */
  grid-template-columns: minmax(0, 165px) 110px;
  align-items: center;
  justify-content: start;
  column-gap: 6px;
}
.msg-recipient-name{ min-width: 0; }
.msg-recipient-badge{ justify-self: start; }

.badge-offen{
  background: rgba(255, 140, 60, 0.24);
  color: rgba(120, 45, 10, 0.95);
  border: 1px solid rgba(255, 140, 60, 0.45);
}



/* Update 224: klickbare Badge-Buttons */
.badge-action{cursor:pointer; user-select:none;}

/* Update 004: Live-Suche – versteckte Einträge wirklich ausblenden */
.search-hidden{ display:none !important; }