@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

html, body {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}
body {
    background: linear-gradient(135deg, #e3e9ff 0%, #f8f9fa 100%);
    min-height: 100vh;
}
body.leitstelle-bg {
    background: linear-gradient(135deg, #181a20 0%, #23272a 100%) !important;
    background-color: #181a20 !important;
}
body.leitstelle-bg .container,
body.leitstelle-bg .container-fluid {
    background: transparent !important;
}
.employee-panel {
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(88, 101, 242, 0.13);
    background: rgba(255,255,255,0.96);
    transition: box-shadow 0.2s, transform 0.2s;
    margin-bottom: 2.2rem;
    padding: 2.2rem 1.2rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}
.employee-panel:hover {
    box-shadow: 0 16px 48px 0 rgba(88, 101, 242, 0.18);
    transform: translateY(-6px) scale(1.035);
}
.employee-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #5865f2;
    background: #f0f0f0;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 8px rgba(88,101,242,0.07);
}
.employee-job {
    font-size: 1.15rem;
    font-weight: 700;
    color: #4752c4;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-align: center;
}
.employee-name {
    color: #5865f2;
    font-weight: 500;
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
    text-align: center;
}
.dienstnummer {
    font-size: 1.05rem;
    font-weight: 400;
    color: #23272a;
    letter-spacing: 1px;
    margin-bottom: 0.2rem;
    margin-top: auto;
    opacity: 0.85;
    text-align: center;
}
/* Navbar Custom */
.navbar-custom {
    background: linear-gradient(90deg, #5865f2 0%, #4752c4 100%);
    box-shadow: 0 2px 12px 0 rgba(88,101,242,0.08);
    border-radius: 0 0 1.5rem 1.5rem;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}
.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .navbar-text {
    color: #fff !important;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}
.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover {
    background: rgba(255,255,255,0.13);
    border-radius: 0.5rem;
    color: #fff !important;
}
.navbar-custom .btn-primary {
    background: #fff;
    color: #5865f2;
    border: none;
    font-weight: 600;
    border-radius: 2rem;
    transition: background 0.2s, color 0.2s;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}
.navbar-custom .btn-primary:hover {
    background: #e3e9ff;
    color: #4752c4;
}
.navbar-custom .btn-outline-secondary {
    border-color: #fff;
    color: #fff;
    border-radius: 2rem;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}
.navbar-custom .btn-outline-secondary:hover {
    background: #fff;
    color: #5865f2;
}

.employee-card {
    height: auto !important;
    display: flex;
    flex-direction: column;
}

.employee-panel {
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px rgba(88, 101, 242, 0.10);
    background: #fff;
    transition: transform .2s, box-shadow .2s;
    margin-bottom: 2rem;
    padding: 1rem;
    flex: 1 1 auto;
    text-align: center;
}

.employee-panel:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 32px rgba(88, 101, 242, 0.18);
}

.employee-img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #5865f2;
    margin: 0 auto 1rem;
    display: block;
}

.employee-job {
    font-size: 1.1rem;
    font-weight: 700;
    color: #23272a;
}

.employee-name {
    color: #5865f2;
    font-size: 1rem;
    font-weight: 500;
    margin: 0.2rem 0;
}

.dienstnummer {
    color: #23272a;
    margin-bottom: 0.5rem;
}

.popup-nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    color: #6c757d;
    text-decoration: none;
    padding: 0.5rem 1rem;
    margin-right: 0.125rem;
}
.popup-nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}
.popup-nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}
.popup-tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1rem;
    background-color: #fff;
}
.popup-tab-pane {
    display: none;
}
.popup-tab-pane.active {
    display: block;
}

/* Workaround: Bootstrap-Backdrop immer ausblenden, damit Modal immer bedienbar ist */
.modal-backdrop, .modal-backdrop.show {
  display: none !important;
}

/* Datepicker immer ganz oben anzeigen */
.flatpickr-calendar {
  z-index: 2147483647 !important;
}

/* Ehemalige Mitarbeiter - ausgegraut darstellen */
.former-employee {
  opacity: 0.6;
  filter: grayscale(30%);
}

.former-employee .employee-img {
  border-color: #adb5bd;
}

.former-employee .employee-job {
  color: #6c757d !important;
}

.former-employee .employee-name {
  color: #6c757d !important;
}

.former-employee .btn {
  opacity: 0.8;
}

.former-employee:hover {
  opacity: 0.8;
  filter: grayscale(20%);
}

/* Panel mit fehlenden Daten rot umrahmen */
.missing-data {
  border: 2px solid #dc3545 !important;
  box-shadow: 0 0 8px #dc354533;
}

/* got_equipment im Popup rot unterlegen, wenn nicht gesetzt */
.got-equipment-missing {
  background: #dc3545;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
}

/* === DARK MODE === */
.dark-mode {
  background: linear-gradient(135deg, #181a20 0%, #23272a 100%) !important;
}
.dark-mode body {
  background: linear-gradient(135deg, #181a20 0%, #23272a 100%) !important;
}
.dark-mode .navbar-custom {
  background: linear-gradient(90deg, #23272a 0%, #181a20 100%) !important;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
}
.dark-mode .navbar-custom .navbar-brand,
.dark-mode .navbar-custom .nav-link,
.dark-mode .navbar-custom .navbar-text {
  color: #e3e9ff !important;
}
.dark-mode .navbar-custom .nav-link.active,
.dark-mode .navbar-custom .nav-link:hover {
  background: rgba(227,233,255,0.10);
  color: #fff !important;
}
.dark-mode .navbar-custom .btn-primary {
  background: #23272a;
  color: #e3e9ff;
}
.dark-mode .navbar-custom .btn-primary:hover {
  background: #5865f2;
  color: #fff;
}
.dark-mode .navbar-custom .btn-outline-secondary {
  border-color: #e3e9ff;
  color: #e3e9ff;
}
.dark-mode .navbar-custom .btn-outline-secondary:hover {
  background: #e3e9ff;
  color: #23272a;
}
.dark-mode .employee-panel,
.dark-mode .employee-card,
.dark-mode .popup-tab-content {
  background: #23272a !important;
  color: #e3e9ff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.dark-mode .employee-img {
  border-color: #5865f2;
  background: #181a20;
}
.dark-mode .employee-job {
  color: #b3b8ff;
}
.dark-mode .employee-name {
  color: #e3e9ff;
}
.dark-mode .dienstnummer {
  color: #b3b8ff;
}
.dark-mode .form-control,
.dark-mode .form-select {
  background: #181a20 !important;
  color: #e3e9ff !important;
  border-color: #444857 !important;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background: #23272a !important;
  color: #fff !important;
  border-color: #5865f2 !important;
}
.dark-mode .modal-content {
  background: #23272a !important;
  color: #e3e9ff !important;
}
.dark-mode .btn,
.dark-mode .btn-light {
  background: #181a20 !important;
  color: #e3e9ff !important;
  border-color: #444857 !important;
}
.dark-mode .btn:hover,
.dark-mode .btn-light:hover {
  background: #5865f2 !important;
  color: #fff !important;
}
.dark-mode .btn-outline-light {
  color: #e3e9ff !important;
  border-color: #e3e9ff !important;
}
.dark-mode .btn-outline-light:hover {
  background: #e3e9ff !important;
  color: #23272a !important;
}
.dark-mode .popup-nav-tabs .nav-link {
  color: #b3b8ff;
  background: #181a20;
}
.dark-mode .popup-nav-tabs .nav-link.active {
  color: #fff;
  background: #23272a;
  border-color: #5865f2 #5865f2 #23272a;
}
.dark-mode .popup-tab-content {
  background: #23272a;
  color: #e3e9ff;
}
.dark-mode .popup-tab-pane {
  background: #23272a;
  color: #e3e9ff;
}
.dark-mode .form-label {
  color: #b3b8ff;
}
.dark-mode .border-bottom {
  border-bottom: 1px solid #444857 !important;
}
.dark-mode .text-muted {
  color: #b3b8ff !important;
}
.dark-mode .got-equipment-missing {
  color: #ffb3b3 !important;
}
.dark-mode .modal-backdrop, .dark-mode .modal-backdrop.show {
  background: #181a20 !important;
}

/* Suchleiste (Light & Dark Mode) */
.searchbar-group {
  background: #fff;
  border: 0;
}
.searchbar-input {
  border: 0;
  background: #fff;
  color: #23272a;
}
.searchbar-input:focus {
  background: #f8f9fa;
  color: #23272a;
  box-shadow: none;
}
.searchbar-icon {
  background: #fff;
  border: 0;
  font-size: 1.4rem;
  color: #5865f2;
}
.searchbar-btn {
  background: #23272a;
  color: #fff;
  border: 0;
}
.searchbar-btn:hover {
  background: #5865f2;
  color: #fff;
}

.dark-mode .searchbar-group {
  background: #23272a !important;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.18);
}
.dark-mode .searchbar-input {
  background: #23272a !important;
  color: #e3e9ff !important;
}
.dark-mode .searchbar-input:focus {
  background: #181a20 !important;
  color: #fff !important;
}
.dark-mode .searchbar-icon {
  background: #23272a !important;
  color: #7a88ff !important;
}
.dark-mode .searchbar-btn {
  background: #181a20 !important;
  color: #e3e9ff !important;
  border: 1px solid #444857 !important;
}
.dark-mode .searchbar-btn:hover {
  background: #5865f2 !important;
  color: #fff !important;
}

.dark-mode .searchbar-input::placeholder {
  color: #e3e9ff !important;
  opacity: 1;
}
.dark-mode .searchbar-input::-webkit-input-placeholder {
  color: #e3e9ff !important;
  opacity: 1;
}
.dark-mode .searchbar-input::-moz-placeholder {
  color: #e3e9ff !important;
  opacity: 1;
}
.dark-mode .searchbar-input:-ms-input-placeholder {
  color: #e3e9ff !important;
  opacity: 1;
}
.dark-mode .searchbar-input::-ms-input-placeholder {
  color: #e3e9ff !important;
  opacity: 1;
}

/* === LEITSTELLENSTYLES (hell & dark) === */
html, body {
    min-height: 100vh;
    height: 100%;
    margin: 0;
    padding: 0;
}
.leitstellen-box { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 18px; }
.leitstellen-header { font-weight: bold; font-size: 1.1rem; padding: 8px 0; }
.leitstellen-table th, .leitstellen-table td { font-size: 0.98rem; vertical-align: middle; }
.leitstellen-table th { background: #f8f9fa; }
.leitstellen-table td.status-cell { font-weight: bold; text-align: center; }
.leitstellen-box.streifen { background: #f3f3f3; }
.leitstellen-box.luftrettung { background: #eaffee; }
.leitstellen-box.leitstelle { background: #e9ecef; }
.leitstellen-box.einsatzleitung { background: #e9ecef; }
.leitstellen-box.sonder { background: #f3f3f3; }
.leitstellen-box.bereitschaft { background: #f3f3f3; }
.leitstellen-box.psychologie { background: #f3eaff; }
.leitstellen-box.personal { background: #fffbe0; }
.leitstellen-box.in-ausbildung { background: #e9d6ff; }
.leitstellen-box.cursorpark { background: #e0aaff; }
.leitstellen-box.lsmd { background: #ffddb0; }
.leitstellen-box .table>:not(:first-child) { border-top: 2px solid #dee2e6; }
.leitstellen-box .table { margin-bottom: 0; }
.leitstellen-box .leitstellen-header { border-bottom: 1px solid #dee2e6; }
.status-green { background: #1abc9c; color: #fff; border-radius: 6px; padding: 2px 10px; }
.status-yellow { background: #f7c948; color: #222; border-radius: 6px; padding: 2px 10px; }
.status-red { background: #e74c3c; color: #fff; border-radius: 6px; padding: 2px 10px; }
.status-gray { background: #adb5bd; color: #fff; border-radius: 6px; padding: 2px 10px; }
.info-box { background: #e74c3c; color: #fff; border-radius: 6px; padding: 6px 12px; font-weight: bold; text-align: center; margin-bottom: 10px; }
.info-box.cayo { background: #d35400; }
@media (max-width: 991px) {
    .leitstellen-grid { flex-direction: column; }
    .leitstellen-col { width: 100% !important; }
}
.leitstelle-status-dropdown {
    background: #fff;
    border: 1.5px solid #bbb;
    transition: border 0.2s;
}
.leitstelle-status-dropdown:focus {
    border: 1.5px solid #1abc9c;
    outline: none;
}
.leitstelle-status-dropdown-label label {
    color: #444;
    margin-bottom: 2px;
}

/* === DARK MODE LEITSTELLE === */
body.dark-mode .leitstellen-box,
body.dark-mode .leitstellen-box.streifen,
body.dark-mode .leitstellen-box.leitstelle,
body.dark-mode .leitstellen-box.luftrettung {
    background: #23272a !important;
    color: #e3e9ff !important;
    border-color: #444857 !important;
}
body.dark-mode .leitstellen-box.streifen,
body.dark-mode .leitstellen-box.luftrettung {
    background: #2a3c2f !important;
}
body.dark-mode .leitstellen-box li[style*="background"] {
    background: #23272a !important;
    color: #e3e9ff !important;
}
.dark-mode .leitstellen-header {
  /* color: #e3e9ff !important;
  border-bottom: 1px solid #444857 !important; */
}
.dark-mode .leitstellen-table th {
  /* background: #181a20 !important;
  color: #b3b8ff !important; */
}
.dark-mode .leitstellen-table td {
  /* background: #23272a !important;
  color: #e3e9ff !important; */
}
.dark-mode .leitstellen-box.einsatzleitung,
.dark-mode .leitstellen-box.sonder,
.dark-mode .leitstellen-box.bereitschaft,
.dark-mode .leitstellen-box.psychologie,
.dark-mode .leitstellen-box.personal,
.dark-mode .leitstellen-box.in-ausbildung,
.dark-mode .leitstellen-box.cursorpark,
.dark-mode .leitstellen-box.lsmd {
  /* background: #23272a !important; */
}
.dark-mode .status-green {
  /* background: #1abc9c !important;
  color: #fff !important; */
}
.dark-mode .status-yellow {
  /* background: #f7c948 !important;
  color: #23272a !important; */
}
.dark-mode .status-red {
  /* background: #e74c3c !important;
  color: #fff !important; */
}
.dark-mode .status-gray {
  /* background: #444857 !important;
  color: #e3e9ff !important; */
}
.dark-mode .info-box {
  /* background: #e74c3c !important;
  color: #fff !important; */
}
.dark-mode .info-box.cayo {
  /* background: #d35400 !important; */
}
.dark-mode .btn,
.dark-mode .btn-primary,
.dark-mode .btn-secondary {
  /* background: #181a20 !important;
  color: #e3e9ff !important;
  border: 1px solid #444857 !important; */
}
.dark-mode .btn:hover,
.dark-mode .btn-primary:hover,
.dark-mode .btn-secondary:hover {
  /* background: #5865f2 !important;
  color: #fff !important; */
}

/* Status-Farben für Leitstellen-Boxen im Dark-Mode */
body.dark-mode .leitstellen-box.status-2 { background: #2a3c2f !important; }
body.dark-mode .leitstellen-box.status-3 { background: #4a2323 !important; }
body.dark-mode .leitstellen-box.status-4 { background: #2a2a3c !important; }
body.dark-mode .leitstellen-box.status-5 { background: #3c392a !important; }
body.dark-mode .leitstellen-box.status-6 { background: #23323c !important; }

/* Hintergrund für Leitstelle-Seite */
body.leitstelle-bg {
    background: linear-gradient(135deg, #23272a 0%, #181a20 100%) !important;
}
.dark-mode body.leitstelle-bg {
    background: linear-gradient(135deg, #181a20 0%, #23272a 100%) !important;
}

/* Sticky Footer Layout */
html, body {
  height: 100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container-fluid, .container {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
}

/* Dunkler Hintergrund für Dark-Mode und Leitstelle */
body.dark-mode,
body.leitstelle-bg {
  background: linear-gradient(135deg, #181a20 0%, #23272a 100%) !important;
}

/* Optional: Standard-Body-Hintergrund für Light-Mode */
body {
  background: #f8f9fa;
}

/* Statusfarben für einzelne Mitarbeiter-Einträge (Light-Mode) */
.user-status-2 { background: #e6f9ed !important; color: #222 !important; }
.user-status-3 { background: #ffeaea !important; color: #222 !important; }
.user-status-4 { background: #f3e6ff !important; color: #222 !important; }
.user-status-5 { background: #fff4e0 !important; color: #222 !important; }
.user-status-6 { background: #e6f0ff !important; color: #222 !important; }

/* Statusfarben für einzelne Mitarbeiter-Einträge (Dark-Mode) */
body.dark-mode .user-status-2 { background: #2a3c2f !important; color: #e3e9ff !important; }
body.dark-mode .user-status-3 { background: #4a2323 !important; color: #e3e9ff !important; }
body.dark-mode .user-status-4 { background: #2a2a3c !important; color: #e3e9ff !important; }
body.dark-mode .user-status-5 { background: #3c392a !important; color: #e3e9ff !important; }
body.dark-mode .user-status-6 { background: #23323c !important; color: #e3e9ff !important; }