.login-wrapper {
  min-height: 100vh;
}

.login-header {
  background: #4d4d4d; /* Firmenrot */
  color: #fff;
}

.navbar {
  background: #4d4d4d; /* Firmenrot */
  color: #fff;
}

.login-logo {
  max-width: 140px;
  height: auto;
}

.login-title {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
}

.login-card {
  max-width: 420px;
  border-radius: 1rem;
}

@media (min-width: 768px) {
  .login-title {
    font-size: 1.5rem;
  }
}

.install-footer {
  position: sticky;
  bottom: 0;
  background: #f8f9fa;
  padding: 0.75rem;
  border-top: 1px solid #ddd;
}

#message {
  position: fixed;
  top: 50px;
  left: 50%;
  transition: all 0.8s ease-in-out;
  transform: translateX(-50%);
  z-index: 1060; /* Höher als Bootstrap Modal (1050) */
}

#message_long {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  opacity: 1;
  transition: all 0.8s ease-in-out;
}

.infobox {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  font-size: 0.9rem;
  text-align: center;
}

.rh-xs {
  font-size: 11px;
  font-weight: normal;
  /* Standardgröße */
}

span.badge.rh-xs {
  padding: 2px 5px;
  border-radius: 4px;
}

.rh-sm {
  font-size: 14px;
  /* Standardgröße */
}

.navbar-title {
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 1rem;
  line-height: 1;
}

/* Links mit Rahmen und Hover-Effekt */
.navbar .custom-link {
  font-size: 0.8rem;
  color: #ff0000;
  background-color: #ffffff;

  text-decoration: none;
  margin: 0 4px;
  padding: 2px 10px;
  border: 1px solid #ff0000;
  /* border-radius: 8px;  */
  transition: all 0.3s ease; /* Sanfter Übergang für Hover */
}

.navbar .custom-link.active {
  background-color: #ff0000;
  color: #ffffff;

  font-weight: bold;
}

.navbar .custom-link:hover {
  background-color: #ff0000;
  color: white;
  border-color: #ff0000;
}

/* Abstände und Feinanpassungen */
.navbar {
  height: 80px;
}

.navbar .nav-link {
  text-align: center;
}

/* Dropdown bei Hover statt Klick */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0; /* Vermeidet Abstände */
  border-color: #007bff;
  background-color: #007bff;
}
.dropdown-item {
  color: #fff;
}
.dropdown-item:hover {
  background-color: #cee6ff;
  color: #007bff;
  font-weight: bold;
}
.dropdown-menu {
  right: 0 !important; /* Stellt sicher, dass das Dropdown am rechten Rand abschließt */
  left: auto !important; /* Verhindert automatische linke Ausrichtung */
}

#installIcon {
  display: none;
  width: 61px; /* Größe des Icons anpassen */
  height: 36px;
  cursor: pointer;
}

.week-cell {
  cursor: pointer;
}
.week-cell:hover {
  background: rgba(0, 0, 0, 0.03);
}
.week-cell:active {
  background: rgba(0, 0, 0, 0.06);
}

/* Sticky Mitarbeiter-Pool (nur Desktop sinnvoll) */
@media (min-width: 992px) {
  /* Bootstrap lg */
  .sticky-employee {
    position: sticky;
    top: 80px; /* Abstand zur Navbar – ggf. anpassen */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
.emp-pool {
  padding-right: 4px;
  overscroll-behavior: contain; /* verhindert Body-Scroll beim Drag */
}

.card-body {
  padding: 0.75rem;
} /* statt Bootstrap default */

/* ***************************************** */
/* day css */
/* ***************************************** */
.dienstort-card {
  border-radius: 14px;
}

.kbz-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  white-space: nowrap;
}

.name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.emp-item,
.assigned-item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2px 8px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* .slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 2px 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  width: 100%;
  justify-content: space-between;
} */

.slot-empty {
  background: #eeeeee;
  color: #b1b1b1;
  /* border-style: dashed; */
}

.emp-kbz {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
}

.slot-list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 30px;
}

.slot-list .assigned-item {
  cursor: grab;
}

.emp-pool .emp-item {
  cursor: grab;
  margin-bottom: 3px;
}

.ghost {
  opacity: 0.4;
}

.dienstort-row {
  background-color: var(--dienstort-color);
}

/* KOMPAKTE SLOT-DARSTELLUNG */
.assigned-item.compact {
  padding: 2px 6px;
  min-height: 26px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  cursor: grab;
}

.slot-kbz {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 8px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
}

/* Slot-Container kleiner */

.slot-box {
  /* border: 1px solid #ced4da; */
  border: 0;
  border-radius: 8px;
  padding: 0px;
  background: #e7e7e7ff;
  min-height: 30px;
}

/* Slot-Titel kleiner */
.slot-title {
  font-size: 11px;
}

#geringPool .emp-item {
  border-color: #f1eaae;
  background: #fffdf5;
}

#krankPool .emp-item {
  border-color: #f1aeb5;
  background: #fff5f5;
}

#freiPool .emp-item {
  border-color: #cfe2ff;
  background: #f4f8ff;
}
.emp-urlaub {
  border-left: 4px solid #0d6efd; /* Bootstrap primary */
  padding-left: 8px;
}