/* Imports */
@import url('./components/notifications.css');
@import url('./components/filter-panel.css');
@import url('./components/modal.css');
@import url('./components/cron-jobs.css');
@import url('./components/import-handler.css');
@import url('./components/import-info.css');
@import url('./components/hinweise.css');
@import url('./components/projektleiter-uebersicht.css');
@import url('./components/projects.css');
/* @import url('./components/meine-projekte.css'); - Datei entfernt */
@import url('./components/meine-hinweise.css');
@import url('./components/email-dialog.css');
@import url('./components/bab-matrix.css');
@import url('./project-history.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  color: #333;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header-Stile */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.5rem;
  background-color: #0079C7;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-info i {
  font-size: 1.5rem;
}

/* Burger-Menü */
.burger-menu {
  display: flex;
  align-items: center;
}

.burger-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}

.burger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: white;
  transition: all 0.3s ease;
}

/* Content-Container */
.content-container {
  display: flex;
  flex: 1;
  margin-top: 60px; /* Höhe des Headers */
}

/* Sidebar */
.sidebar {
  width: 60px; /* Standardmäßig eingeklappt */
  background-color: #F0F3F4;
  color: #555;
  transition: all 0.3s ease;
  overflow-y: auto;
  position: fixed;
  top: 60px; /* Höhe des Headers */
  bottom: 0;
  left: 0;
  height: calc(100vh - 60px);
  z-index: 100;
  padding-bottom: 50px; /* Platz für die Versionsinfo */
}

.sidebar.open {
  width: 250px; /* Ausgeklappt */
}

/* Anpassen der Textanzeige im Menü */
.sidebar:not(.open) .menu-item span,
.sidebar:not(.open) .submenu,
.sidebar:not(.open) .submenu-toggle {
  display: none;
}

/* Icons im Menü zentrieren, wenn eingeklappt */
.sidebar:not(.open) .menu-item a {
  justify-content: center;
  padding: 0.5rem;
}

.sidebar:not(.open) .menu-item i {
  margin-right: 0;
}

/* Hauptinhalt anpassen, wenn Sidebar ein- oder ausgeklappt ist */
.main-content {
  margin-left: 60px; /* Standard: Sidebar eingeklappt */
  padding: 1.5rem;
  flex: 1;
  transition: margin-left 0.3s ease;
}

.sidebar.open + .main-content {
  margin-left: 250px;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -250px;
    width: 250px; /* Mobile Sidebar ist immer vollständig */
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 100;
  }

  .sidebar.open {
    left: 0;
  }

  .main-content {
    margin-left: 0;
  }
  
  /* Zeige Text und Untermenüs auf mobilen Geräten immer an */
  .sidebar:not(.open) .menu-item span,
  .sidebar:not(.open) .submenu,
  .sidebar:not(.open) .submenu-toggle {
    display: block; /* Auf mobilen Geräten anzeigen */
  }
  
  /* Icons auf mobilen Geräten nicht zentrieren */
  .sidebar:not(.open) .menu-item a {
    justify-content: flex-start;
    padding: 0.5rem 1.5rem;
  }
  
  /* Filter-Container auf mobilen Geräten */
  .filter-container {
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .filter-group {
    width: 100%;
  }
  
  /* Projekt-Header auf mobilen Geräten */
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  
  /* Tabellen auf mobilen Geräten */
  .data-table {
    font-size: 0.8rem;
  }
  
  .data-table th, 
  .data-table td {
    padding: 0.6rem;
  }
}

.menu {
  list-style: none;
  padding: 1rem 0;
}

.menu-item {
  transition: background-color 0.2s;
  position: relative;
}

/* Aktualisierte Selektoren für die Menü-Links */
.menu-item .menu-item-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.menu-item a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #555;
  text-decoration: none;
  padding: 0.5rem 1.5rem;
  flex-grow: 1;
}

.menu-item:hover > .menu-item-container > a {
  background-color: #0079C7;
}

/* Aktive Hauptmenüpunkte */
.menu-item.active > .menu-item-container {
  background-color: #0079C7;
  width: 100%;
}

.menu-item.active > .menu-item-container > a {
  background-color: transparent;
  color: white;
  font-weight: bold;
}

.menu-item.active > .menu-item-container > a::before {
  content: none;
}

/* Elternmenüpunkt eines aktiven Untermenüpunkts */
.menu-item.active-parent > .menu-item-container > a {
  font-weight: bold;
  background-color: transparent; /* NICHT blau hervorgehoben */
}

.menu-item i {
  font-size: 1.2rem;
  width: 20px;
  text-align: center;
}

/* Schöne Icon-Farben für Hauptmenü */
.menu-item a .fa-home {
  color: #ff6b35; /* Warmes Orange für Dashboard */
}

.menu-item a .fa-chart-bar {
  color: #2ecc71; /* Grün für Analysen */
}

.menu-item a .fa-check-circle {
  color: #27ae60; /* Dunkelgrün für Fertigmeldungen */
}

.menu-item a .fa-euro-sign {
  color: #f39c12; /* Gold für Finanzen */
}

.menu-item a .fa-project-diagram {
  color: #9b59b6; /* Lila für Projekte */
}

.menu-item a .fa-cog {
  color: #7f8c8d; /* Grau für Einstellungen */
}

/* Schöne Icon-Farben für Untermenüs */
.submenu-item a .fa-clipboard-list {
  color: #3498db; /* Blau für Clipboard */
}

.submenu-item a .fa-database {
  color: #2c3e50; /* Dunkelblau für Database */
}

.submenu-item a .fa-file-csv {
  color: #16a085; /* Türkis für CSV */
}

.submenu-item a .fa-chart-line {
  color: #1abc9c; /* Hellgrün für Chart-Line */
}

.submenu-item a .fa-building {
  color: #d35400; /* Orange-Braun für Building */
}

.submenu-item a .fa-chart-area {
  color: #e67e22; /* Orange für Chart-Area */
}

.submenu-item a .fa-tasks {
  color: #e74c3c; /* Rot für Tasks */
}

.submenu-item a .fa-info-circle {
  color: #5dade2; /* Hellblau für Info */
}

.submenu-item a .fa-history {
  color: #95a5a6; /* Grau für History */
}

.submenu-item a .fa-exclamation-circle {
  color: #f39c12; /* Orange für Exclamation */
}

.submenu-item a .fa-users-cog {
  color: #8e44ad; /* Violett für Users-Cog */
}

.submenu-item a .fa-clock {
  color: #3498db; /* Blau für Clock */
}

.submenu-item a .fa-users {
  color: #2ecc71; /* Grün für Users */
}

.submenu-item a .fa-tools {
  color: #e67e22; /* Orange für Tools */
}

/* Bei Hover und aktiven Zuständen bleiben Icons weiß für bessere Sichtbarkeit */
.menu-item:hover > .menu-item-container > a i,
.menu-item.active > .menu-item-container > a i,
.submenu-item:hover a i,
.submenu-item.active a i {
  color: white !important;
}

/* Toggle-Button für Untermenüs */
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 35px;
  background-color: transparent;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  transition: transform 0.3s;
}

.menu-item.expanded .submenu-toggle {
  transform: rotate(90deg);
}

/* Untermenü-Stile */
.submenu {
  list-style: none;
  margin-left: 2rem;
  display: none; /* Standard: ausgeblendet */
  background-color: transparent;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.menu-item.expanded .submenu {
  display: block;
  max-height: 500px; /* Ausreichend für alle Untermenüs */
  transition: max-height 0.3s ease-in;
}

/* Alte Pfeil-Stile entfernen, da wir jetzt einen Button haben */
.menu-item-with-submenu > a::after {
  content: none;
}

.menu-item.expanded > a::after {
  transform: none;
}

.menu-item.active-parent > a::after {
  transform: none;
}

.submenu-item {
  padding: 0;
  background-color: transparent;
}

.submenu-item a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

.submenu-item a:hover {
  color: white;
  background-color: #0079C7;
}

/* Aktive Untermenüpunkte */
.submenu-item.active a {
  background-color: #0079C7;
  color: white;
  font-weight: bold;
}

/* Versionsanzeige */
.version-info {
  position: fixed;
  bottom: 10px;
  left: 15px;
  font-size: 0.8rem;
  color: rgba(85, 85, 85, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  z-index: 1000; /* Höherer z-index, damit es immer sichtbar ist */
  background-color: #F0F3F4; /* Gleiche Farbe wie die Sidebar */
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  opacity: 1; /* Immer sichtbar */
  width: calc(60px - 30px); /* Minimale Breite, wenn Sidebar eingeklappt */
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.open ~ .version-info,
.sidebar.open + .main-content .version-info {
  width: calc(250px - 30px); /* Volle Breite, wenn Sidebar ausgeklappt */
}

.sidebar:not(.open) ~ .version-info .made-by,
.sidebar:not(.open) + .main-content .version-info .made-by {
  display: none; /* "Made by..." ausblenden, wenn Sidebar eingeklappt */
}

.version-info i {
  font-size: 0.9rem;
}

.version-info .made-by {
  font-style: italic;
  margin-left: 5px;
  position: relative;
  transition: all 0.3s ease;
}

.version-info:hover .made-by {
  color: #333;
  transform: translateY(-2px);
}

.version-info .made-by i {
  color: #e74c3c;
  font-size: 0.7rem;
  animation: heartbeat 1.5s infinite;
  margin-left: 2px;
  vertical-align: middle;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .version-info {
    opacity: 1; /* Immer sichtbar, auch auf mobilen Geräten */
    left: 5px;
    bottom: 5px;
    background-color: rgba(240, 243, 244, 0.9); /* Leicht transparent auf mobilen Geräten */
    display: none; /* Ausblenden auf mobilen Geräten, wenn Sidebar geschlossen ist */
  }
  
  .sidebar.open .version-info {
    display: flex; /* Anzeigen, wenn die Sidebar geöffnet ist */
  }
}

h1 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

h2 {
  margin-bottom: 0.8rem;
  color: #2c3e50;
  font-size: 1.5rem;
}

/* Dashboard-Widgets */
.dashboard-widgets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 1.5rem;
}

.widget-row {
  display: flex;
  gap: 20px;
  width: 100%;
}

.widget {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.triple-width {
  flex: 3;
}

.double-width {
  flex: 2;
}

.single-width {
  flex: 1;
}

.widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Widget, das dreimal so breit ist */
.widget.triple-width {
  grid-column: span 3;
}

/* Responsive Anpassungen für die Widgets */
@media (max-width: 1200px) {
  .widget.triple-width {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .widget.triple-width {
    grid-column: span 1;
  }
}

.widget-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

.widget-header i {
  font-size: 1.2rem;
  color: #0079C7;
  margin-right: 0.5rem;
}

.widget-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: #495057;
}

.widget-content {
  padding: 0.5rem 0;
}

.widget-content p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

/* Platzhalter-Widget */
.placeholder-widget {
  background-color: #f5f7fa;
  border: 2px dashed #ccd6e6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.placeholder-widget .widget-header {
  width: 100%;
  text-align: center;
  color: #6c757d;
}

.placeholder-widget .widget-body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  color: #6c757d;
  text-align: center;
}

/* Einstellungen-Widget */
.settings-widget {
  border-top: 3px solid #0079C7;
  margin-bottom: 1.5rem;
}

/* Projekte-Container */
.projects-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-height, 60px) - var(--header-height, 50px) - 40px); /* Annahme: Navbar und Header-Höhe, plus etwas Padding */
  overflow: hidden; /* Verhindert unnötige Scrollbalken am Hauptcontainer */
}

.projects-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.projects-actions {
  display: flex;
  gap: 0.5rem;
}

/* Filter-Container */
.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #eee;
}

.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.filter-group label {
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: #666;
  font-weight: 500;
}

.filter-select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 0.9rem;
}

/* Tabellen-Stile */
.table-container {
  overflow-x: auto;
  margin-top: 1rem;
}

#projects-table-container {
  flex-grow: 1; /* Lässt die Tabelle den verfügbaren Platz einnehmen */
  overflow-y: auto; /* Fügt einen Scrollbalken hinzu, wenn der Inhalt zu groß wird */
  position: relative; /* Wichtig für Ladeindikatoren etc. */
  border: 1px solid #dee2e6;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.data-table th, 
.data-table td {
  padding: 8px 15px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  z-index: 10;
  border-top: 1px solid #dee2e6;
}

.data-table tbody {
  /* Die Overflow-Eigenschaften sind nicht mehr notwendig, da sie im Container definiert sind */
}

.data-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tbody tr:hover {
  background-color: #f1f3f5;
}

/* Suchzeile in der Tabelle */
.data-table .search-row td {
  padding: 4px 15px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 37px; /* Angepasste Höhe der Header-Zeile plus Padding */
  z-index: 10;
}

.data-table .search-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.data-table .search-input:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.data-table .search-input::placeholder {
  color: #adb5bd;
  font-style: italic;
}

/* Hervorhebung der gefilterten Spalten */
.data-table th[data-filtered="true"] {
  background-color: #e6f7ff;
  border-bottom: 2px solid #1890ff;
}

.data-table .sortable {
  cursor: pointer;
  user-select: none;
}

.data-table .sortable:hover {
  background-color: #e9ecef;
}

.data-table .sorted {
  background-color: #e9ecef;
}

.sort-icon {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.8rem;
}

.table-loading, 
.no-data, 
.table-error {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.table-error {
  color: #721c24;
  background-color: #f8d7da;
}

/* Aktions-Buttons in der Tabelle */
.actions {
  white-space: nowrap;
  text-align: center;
}

.btn-icon {
  background: none;
  border: none;
  color: #2c3e50;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem;
  margin: 0 0.2rem;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.btn-icon:hover {
  background-color: #e9ecef;
}

/* Status und Priorität Anzeige */
.status, .prio {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Status-Styles */
.status.in-bearbeitung, .status.aktiv, .status.geplant {
  background-color: #e2f3fd;
  color: #0c5460;
}

.status.abgeschlossen, .status.archiviert {
  background-color: #d4edda;
  color: #155724;
}

.status.unbekannt {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Prio-Styles */
.prio.a-projekt {
  background-color: #d4edda;  /* Grün */
  color: #155724;
}

.prio.b-projekt {
  background-color: #c3e6cb;  /* Etwas weniger Grün */
  color: #155724;
}

.prio.c-projekt {
  background-color: #b1dfc0;  /* Noch weniger Grün */
  color: #155724;
}

.prio.d-projekt {
  background-color: #9fd8b3;  /* Am wenigsten Grün */
  color: #155724;
}

/* Alte Prio-Styles für Kompatibilität */
.prio.hoch {
  background-color: #d4edda;  /* Wie A-Projekt */
  color: #155724;
}

.prio.mittel {
  background-color: #c3e6cb;  /* Wie B-Projekt */
  color: #155724;
}

.prio.niedrig {
  background-color: #b1dfc0;  /* Wie C-Projekt */
  color: #155724;
}

.prio.unbekannt, .prio.keine-vergabe {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Formular-Stile */
.form-group {
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* Datei-Upload-Button */
.file-upload-btn {
  /* Dieser Stil ist jetzt in import-handler.css */
}

.selected-file {
  /* Dieser Stil ist jetzt in import-handler.css */
}

.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-primary {
  background-color: #0079C7;
  color: white;
}

.btn-primary:hover {
  background-color: #2980b9;
}

/* Import-Ergebnis-Stile */
.mt-3 {
  margin-top: 1rem;
}

.import-result {
  padding: 1rem;
  border-radius: 8px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.import-result.success {
  color: #155724;
}

.import-result.error {
  color: #721c24;
}

.import-result.loading {
  color: #0c5460;
}

.import-success-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.import-success-header i {
  font-size: 1.5rem;
  margin-right: 0.75rem;
  color: #28a745;
}

.import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.stat-item {
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 0.75rem;
  text-align: center;
  flex: 1;
  min-width: 80px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  color: #2c3e50;
}

.stat-label {
  font-size: 0.85rem;
  color: #6c757d;
}

.import-errors {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.import-errors i {
  color: #dc3545;
  margin-right: 0.5rem;
}

.error-list {
  margin-top: 0.5rem;
  margin-left: 1.5rem;
  color: #721c24;
}

/* Anpassungen für das Import-Modal */
#import-result-modal .modal-body {
  padding: 1.5rem;
}

#import-result-modal .modal-footer {
  justify-content: center;
}

#import-result-modal .btn-primary {
  min-width: 120px;
}

/* Aufgaben-Listen */
.task-item {
  padding: 0.8rem;
  margin-bottom: 0.8rem;
  border-radius: 4px;
  background-color: #f8f9fa;
  border-left: 3px solid #0079C7;
}

/* Lade-Spinner */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #2c3e50;
}

.loading-spinner i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Name-Spalte in der Projektetabelle */
.data-table th[data-field="name"],
.data-table td[data-field="name"] {
  min-width: 180px;
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}

.data-table td[data-field="name"] {
  position: relative;
}

.data-table td[data-field="name"]:hover::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  background-color: #333;
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: normal;
  max-width: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Standardbreite für andere Spalten, außer Hinweise-Spalte */
.data-table th:not([data-field="name"]):not([data-field="hinweise"]),
.data-table td:not([data-field="name"]):not([data-field="hinweise"]) {
  min-width: 120px;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spezielle Regel für die Hinweise-Spalte */
.data-table th[data-field="hinweise"],
.data-table td[data-field="hinweise"] {
  min-width: calc(var(--hinweis-icon-width, 30px) * var(--max-hinweise-count, 1) + 20px) !important;
  width: auto !important;
  white-space: nowrap;
  overflow: visible;
}

/* Tabellen-Aktionen */
.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.reset-search-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 0;
  float: right;
}

.reset-search-button i {
  font-size: 0.8rem;
}

/* Cron-Jobs Container */
.cron-jobs-container {
  /* Dieser Stil ist jetzt in cron-jobs.css */
}

/* Cron-Job Item */
.cron-job-item {
  /* Dieser Stil ist jetzt in cron-jobs.css */
}

/* ... weitere Cron-Job-Styles ... */

/* Responsive Anpassungen für Cron-Jobs */
@media (max-width: 1200px) {
  .cron-job-details {
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf mittleren Bildschirmen */
  }
}

@media (max-width: 768px) {
  .cron-job-details {
    grid-template-columns: 1fr; /* 1 Spalte auf kleinen Bildschirmen */
  }
}

.no-jobs {
  text-align: center;
  color: #7f8c8d;
  padding: 2rem 0;
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.error-message i {
  margin-right: 0.75rem;
  font-size: 1.25rem;
}

/* ... weitere Notification-Styles ... */

/* Anpassungen für die Hinweis-Modalfenster */
#hinweis-modal,
#hinweis-status-modal {
  max-width: 700px;
}

#hinweis-modal .modal-body,
#hinweis-status-modal .modal-body {
  max-height: calc(90vh - 150px);
  overflow-y: auto;
}

/* Stile für die Hinweis-Informationen */
.hinweis-info,
.hinweis-details,
.hinweis-assignment {
  /* margin-bottom wird über JavaScript gesteuert */
}

.hinweis-info h4,
.hinweis-details h4,
.hinweis-assignment h4 {
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
}

.hinweis-details-content {
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #eee;
}

/* Stile für die Zuweisung */
#hinweis-assignment-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#kommentar-container {
  margin-top: 15px;
}

#hinweis-kommentar {
  width: 100%;
  padding: 8px;
  min-height: 80px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

/* Stile für das Status-Modal */
#hinweis-status-begruendung {
  width: 100%;
  padding: 8px;
  min-height: 80px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  resize: vertical;
}

#hinweis-wiedervorlage-datum {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Zusammenfassungs-Widget */
.summary-widget {
  background-color: #f8f9fa;
}

.summary-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.summary-item i {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-right: 1rem;
  width: 30px;
  text-align: center;
}

.summary-details {
  flex: 1;
}

.summary-label {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.summary-value {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
}

/* Forecast-Widget */
.forecast-widget {
  background-color: #f8f9fa;
}

.forecast-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.forecast-filter .filter-group {
  flex: 1;
  min-width: 200px;
}

.forecast-filter .filter-group label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: #666;
  font-weight: 500;
}

.forecast-filter .filter-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.forecast-filter .filter-select:hover {
  border-color: #aaa;
}

.forecast-filter .filter-select:focus {
  border-color: #0079C7;
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

@media (max-width: 768px) {
  .forecast-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .forecast-filter .filter-group {
    width: 100%;
  }
}

.forecast-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.forecast-item {
  flex: 1;
  min-width: 150px;
  padding: 0.75rem;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Responsive Anpassungen für das Forecast-Widget */
@media (max-width: 1200px) {
  .forecast-summary {
    justify-content: space-between;
  }
  
  .forecast-item {
    flex: 0 0 calc(33.333% - 1rem);
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .forecast-item {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

@media (max-width: 480px) {
  .forecast-item {
    flex: 0 0 100%;
  }
}

.forecast-label {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.25rem;
}

.forecast-value {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
}

#forecast-chart-container {
  background-color: white;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.error-message {
  color: #e74c3c;
  padding: 1rem;
  background-color: #fdf3f2;
  border-radius: 6px;
  margin-top: 1rem;
  font-weight: bold;
}

/* Projekthistorie-Seite */
.project-history-container {
  background-color: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.project-history-container p {
  font-size: 1.2rem;
  color: #333;
}

/* Archivierte Projekte in der Tabelle */
.data-table tr.archived {
  background-color: #ffebee; /* Leichtes Rot für den Hintergrund */
}

.data-table tr.archived:hover {
  background-color: #ffcdd2; /* Etwas dunkleres Rot beim Hover */
}

/* Projekt-Detail-Modal */
.project-detail-container {
  max-width: 100%;
  margin: 0 auto;
  height: calc(80vh - 130px); /* Feste Höhe, abzüglich Header und Footer */
  display: flex;
  flex-direction: column;
}

.project-detail-tabs {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 15px;
  overflow-x: auto;
  padding-bottom: 1px;
  flex-shrink: 0; /* Verhindert, dass Tabs schrumpfen */
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-button:hover {
  color: #2c3e50;
}

.tab-button.active {
  color: #2c3e50;
  border-bottom-color: #0079C7;
}

.project-detail-content {
  padding: 0 15px 15px;
  overflow-y: auto; /* Scrollen nur hier */
  flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
}

.tab-content {
  display: none;
  /* height: 100%; Entfernt, Inhalt soll sich ausdehnen */
}

.tab-content.active {
  display: block;
  /* height: 100%; Entfernt */
  /* overflow-y: auto; Entfernt, Eltern-Element scrollt */
}

/* Projektdetails */
.project-details-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  /* height: 100%; Entfernt */
  /* overflow-y: auto; Entfernt */
}

.project-details-section {
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex: 1 1 calc(50% - 15px); /* Zwei Spalten Standard, mit Abstand */
  min-width: 300px; /* Minimale Breite für lesbare Inhalte */
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.project-details-section h3 {
  margin: 0;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
}

.project-hinweise-section h3,
.project-historie-section h3 {
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 1.2rem;
}

.project-details-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  /* overflow-y: auto; Entfernt */
  flex-grow: 1; /* Nimmt den verfügbaren Platz im Segment ein */
}

.detail-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-label {
  font-weight: 500;
  color: #495057;
  font-size: 0.9rem;
  width: 180px;
  flex-shrink: 0;
}

.detail-value {
  font-size: 0.95rem;
  color: #333;
  flex-grow: 1;
}

/* Hinweise */
.hinweise-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Flex-Container für Hinweise in der Projekt-Detail-Ansicht */
.hinweise-flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.hinweise-flex-container .hinweis-item {
  flex: 1 1 300px;
  min-width: 300px;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .hinweise-flex-container .hinweis-item {
    max-width: calc(33.333% - 14px);
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hinweise-flex-container .hinweis-item {
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hinweise-flex-container .hinweis-item {
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  .hinweise-flex-container .hinweis-item {
    max-width: 100%;
  }
}

/* Grid-Ansicht für Hinweise */
.hinweise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.hinweis-item {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hinweis-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hinweis-item.inactive {
  opacity: 0.7;
  background-color: #f8f9fa;
}

.hinweis-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.hinweis-icon {
  font-size: 1.2rem;
  position: relative;
  display: inline-flex;
  cursor: pointer !important;
  z-index: 5;
  padding: 5px;
  min-width: 24px;
  min-height: 24px;
  text-align: center;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.hinweis-icon:hover {
  transform: scale(1.2);
  background-color: rgba(240, 240, 240, 0.5);
}

.hinweis-icon i {
  pointer-events: none; /* Stellt sicher, dass Klicks auf das Icon zum Container-Element gehen */
}

/* Aufgaben-Icons: IDENTISCHE Styles wie Hinweis-Icons - MIT !important */
.aufgabe-icon {
  font-size: 1.2rem !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 2px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  z-index: 999 !important;
  pointer-events: auto !important;
}

.aufgabe-icon:hover {
  transform: scale(1.2) !important;
  background-color: rgba(240, 240, 240, 0.5) !important;
}

.aufgabe-icon i {
  pointer-events: none !important; /* Stellt sicher, dass Klicks auf das Icon zum Container-Element gehen */
}

.hinweis-title {
  flex-grow: 1;
}

.hinweis-title h4 {
  margin: 0;
  font-size: 1rem;
}

.hinweis-status {
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 3px;
  background-color: #e9ecef;
  color: #6c757d;
}

.hinweis-item.active .hinweis-status {
  background-color: #d4edda;
  color: #155724;
}

.hinweis-item.inactive .hinweis-status {
  background-color: #f8d7da;
  color: #721c24;
}

.hinweis-details {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.hinweis-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.hinweis-detail-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

.hinweis-detail-label {
  font-weight: 500;
  color: #6c757d;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.hinweis-detail-value {
  font-size: 0.9rem;
  word-break: break-word;
}

/* Kommentar und Begründung über die volle Breite */
.hinweis-detail-item:nth-child(1),
.hinweis-detail-item:nth-child(2) {
  grid-column: 1 / -1;
}

/* Historie */
.historie-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* padding-right: 10px; Nicht mehr nötig, da kein eigener Scrollbalken */
  /* height: 100%; Entfernt */
}

.historie-item {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
  min-height: fit-content;
}

.historie-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  flex-wrap: wrap;
  gap: 10px;
}

.historie-date {
  font-weight: 500;
  color: #2c3e50;
  font-size: 0.9rem;
}

.historie-user {
  color: #6c757d;
  font-size: 0.9rem;
}

.historie-action {
  color: #2c3e50;
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: auto;
}

.historie-hinweisart {
  color: #2c3e50;
  font-weight: 500;
  font-size: 0.9rem;
  background-color: #e3f2fd;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
}

.historie-description {
  padding: 15px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Spezifische Regeln für den Historie-Tab im Projekt-Detail-Modal */
#historie-tab .historie-list {
  /* max-height: 400px; Entfernt */
  /* overflow-y: auto; Entfernt */
}

#historie-tab .historie-item {
  min-height: fit-content;
  margin-bottom: 10px;
}

.no-data-message {
  padding: 20px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

/* Segment-Farben - vereinfacht und weniger bunt */
.project-details-section:nth-of-type(1) h3,
.project-details-section:nth-of-type(2) h3,
.project-details-section:nth-of-type(3) h3,
.project-details-section:nth-of-type(4) h3,
.project-details-section:nth-of-type(5) h3,
.project-details-section:nth-of-type(6) h3 {
  background-color: #f8f9fa;
  border-bottom-color: #e9ecef;
  border-left: 3px solid #0079C7;
}

/* Responsive Anpassungen */
@media (max-width: 992px) {
  .project-details-section {
    flex: 1 1 100%; /* Auf mittleren Bildschirmen volle Breite */
  }
}

@media (max-width: 768px) {
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0;
  }
  
  .detail-label {
    width: 100%;
    margin-bottom: 2px;
  }
  
  .detail-value {
    width: 100%;
  }
}

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

@media (min-width: 768px) and (max-width: 991px) {
  .project-details-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .project-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mail-icon {
  margin-left: 10px;
  cursor: pointer;
  color: #2c3e50;
}

.mail-icon:hover {
  color: #2980b9;
}

.copy-icon {
  margin-left: 10px;
  cursor: pointer;
  color: #27ae60;
}

.copy-icon:hover {
  color: #219653;
}

.projekt-count {
  margin-left: 15px;
}

/* Hinweis-spezifische Informationen */
.hinweis-specific-info {
  margin-top: 15px;
  padding: 12px;
  background-color: #f8f9fa;
  border-left: 4px solid #6c757d;
  border-radius: 4px;
}

.hinweis-specific-info h5 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
  color: #495057;
  display: flex;
  align-items: center;
}

.hinweis-specific-info h5 i {
  margin-right: 8px;
  color: #17a2b8;
}

.hinweis-specific-info p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #495057;
}

/* Inaktive Hinweise (mehr als 10 Tage ohne Aktivität) */
.inaktiv-hinweis {
  background-color: rgba(220, 53, 69, 0.1);
}

.inaktiv-hinweis:hover {
  background-color: rgba(220, 53, 69, 0.2);
}

.letzte-aktivitaet {
  font-size: 0.9rem;
  text-align: center;
}

/* Hervorhebung für lange Inaktivität */
tr.inaktiv-hinweis .letzte-aktivitaet {
  color: #dc3545;
  font-weight: bold;
}

.hinweise-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.hinweise-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 12px;
  font-weight: bold;
  margin-right: 5px;
}

/* Hinweis Arten Dokumentation Modal */
.hinweis-arten-doku-container {
  padding: 15px;
  max-height: 80vh;
  overflow-y: auto;
}

.hinweis-arten-doku-intro {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #0079C7;
}

.hinweis-arten-doku-overview h3,
.hinweis-arten-doku-matrix h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
  color: #2c3e50;
}

.hinweis-arten-doku-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.hinweis-art-card {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hinweis-art-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hinweis-art-card-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.hinweis-art-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(52, 152, 219, 0.1);
  margin-right: 15px;
}

.hinweis-art-icon i {
  font-size: 20px;
}

.hinweis-art-title h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.hinweis-art-card-body {
  padding: 15px;
}

.hinweis-art-card-body p {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.color-sample {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.anwendbarkeits-matrix {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 14px;
}

.anwendbarkeits-matrix th,
.anwendbarkeits-matrix td {
  padding: 10px;
  text-align: center;
  border: 1px solid #dee2e6;
}

.anwendbarkeits-matrix th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.anwendbarkeits-matrix tr:hover {
  background-color: #f8f9fa;
}

.hinweis-art-cell {
  display: flex;
  align-items: center;
  text-align: left;
}

.hinweis-art-cell .hinweis-art-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.hinweis-art-cell span {
  font-weight: 500;
}

/* Info-Icon neben der Hinweisspalte */
.hinweis-info-icon {
  margin-left: 5px;
  color: #2c3e50;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hinweis-info-icon:hover {
  color: #2980b9;
}

@media (max-width: 768px) {
  .hinweis-arten-doku-cards {
    grid-template-columns: 1fr;
  }
  
  .anwendbarkeits-matrix {
    font-size: 12px;
  }
  
  .anwendbarkeits-matrix th,
  .anwendbarkeits-matrix td {
    padding: 8px 5px;
  }
}

/* BU-Auswertung Styles */
.bu-auswertung-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.bu-auswertung-table-container {
  overflow-x: auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-top: 1rem;
}

.pivot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border: 1px solid #e0e0e0;
}

.pivot-table th, 
.pivot-table td {
  padding: 10px;
  border: 1px solid #e0e0e0;
  text-align: left;
}

.pivot-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pivot-table thead tr:first-child th {
  background-color: #b4c8e4;
  border-bottom: 2px solid #ddd;
}

.pivot-table tbody tr:hover {
  background-color: #f9f9f9;
}

.pivot-table .number-cell {
  text-align: right;
  font-family: 'Courier New', monospace;
}

.pivot-table .bu-cell {
  font-weight: 600;
  background-color: #f9f9f9;
}

.pivot-table .bu-row {
  border-top: 2px solid #ddd;
}

.pivot-table .bu-total-row {
  background-color: #f0f0f0;
  font-weight: 600;
}

.pivot-table .total-label {
  font-weight: 600;
  text-align: right;
}

.pivot-table .total-value {
  font-weight: 600;
}

.pivot-table .grand-total-row {
  background-color: #e6e6e6;
  border-top: 2px solid #bbb;
  font-weight: 700;
}

.pivot-table .grand-total-value {
  font-weight: 700;
}

/* Spaltenkonfiguration Styles */
.column-segment {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  background-color: #f9f9f9;
}

.column-segment-header {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  font-size: 1.1rem;
}

.column-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.column-option {
  padding: 8px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.checkbox-container {
  display: flex;
  align-items: center;
}

.column-checkbox {
  margin-right: 8px;
}

.column-label {
  font-weight: 500;
  color: #444;
}

/* Toggle Switch Styles */
.toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 200px;
  width: 100%;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #2196F3;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

.toggle-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  flex: 1;
  word-wrap: break-word;
  white-space: normal;
}

/* Spezielle Styling für Toggle-Filter in der Filter-Gruppe */
.filter-group:has(.toggle-switch-container) {
  min-width: 220px;
  width: auto;
  flex: 1;
}

/* Alternative für Browser ohne :has() Support */
.filter-group.toggle-filter-group {
  min-width: 220px;
  width: auto;
  flex: 1;
}

/* Ende BU-Auswertung Styles */

/* Finanzen-Container */
.finanzen-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Rechnungsforecast-Container */
.rechnungsforecast-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* BAB-Matrix Stile */
.bab-matrix-container {
  margin-top: 20px;
  overflow: hidden;
}

.bab-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bab-matrix-table th, 
.bab-matrix-table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

.matrix-header {
  background-color: #f8f9fa;
  font-weight: bold;
}

.matrix-bu {
  background-color: #f8f9fa;
  font-weight: bold;
  min-width: 120px;
}

.matrix-period {
  background-color: #f8f9fa;
  font-weight: bold;
  text-align: left;
  position: sticky;
  left: 0;
  min-width: 100px;
}

.matrix-cell {
  vertical-align: middle;
  height: 80px;
}

.matrix-cell.empty {
  background-color: #f5f5f5;
}

.status-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  height: 100%;
}

.status-final {
  background-color: rgba(40, 167, 69, 0.15);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-draft {
  background-color: rgba(255, 193, 7, 0.15);
  color: #d39e00;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.update-date {
  font-size: 0.8rem;
  font-weight: normal;
  margin-top: 5px;
  color: #666;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
}

.loading-indicator i {
  margin-right: 10px;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .bab-matrix-table {
    font-size: 0.8rem;
  }
  
  .matrix-bu {
    min-width: 100px;
  }
  
  .status-badge {
    padding: 5px;
  }
  
  .update-date {
    font-size: 0.7rem;
  }
}

/* Nyan Cat Modal Styles */
.nyan-cat-container {
  position: relative;
  width: 100%;
  height: 180px;
  background-color: #003366;
  background: linear-gradient(to bottom, #000033 0%, #0066cc 100%);
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nyan-cat-container:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
  background-size: 550px 550px, 350px 350px, 250px 250px;
  background-position: 0 0, 40px 60px, 130px 270px;
  z-index: 1;
}

.nyan-unit {
  position: absolute;
  left: -300px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 100px;
  animation: nyan-unit-fly 8s linear infinite;
  z-index: 3;
}

.nyan-cat {
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 75px;
  background-image: url('../img/neko-cat.gif');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}

.rainbow {
  position: absolute;
  top: 50%;
  left: 0;
  height: 30px;
  width: 180px;
  transform: translateY(-40%);
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.rainbow-stripe {
  height: 16.666%;
  width: 100%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  animation: rainbow-pulse 0.3s steps(2) infinite;
  position: relative;
}

.rainbow-stripe:nth-child(1) { 
  background-color: #ff0000; 
  animation-delay: 0s;
}
.rainbow-stripe:nth-child(2) { 
  background-color: #ff9900; 
  animation-delay: 0.05s;
}
.rainbow-stripe:nth-child(3) { 
  background-color: #ffff00; 
  animation-delay: 0.1s;
}
.rainbow-stripe:nth-child(4) { 
  background-color: #33cc33; 
  animation-delay: 0.15s;
}
.rainbow-stripe:nth-child(5) { 
  background-color: #3399ff; 
  animation-delay: 0.2s;
}
.rainbow-stripe:nth-child(6) { 
  background-color: #6633cc; 
  animation-delay: 0.25s;
}

@keyframes nyan-unit-fly {
  0% {
    left: -300px;
  }
  100% {
    left: calc(100% + 50px);
  }
}

@keyframes rainbow-pulse {
  0% {
    opacity: 0.7;
    transform: scaleX(0.98);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0.7;
    transform: scaleX(0.98);
  }
}

.developer-info {
  padding: 25px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.developer-info h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 1.3rem;
  border-bottom: 2px solid #e8f4fd;
  padding-bottom: 10px;
}

.developer-info p {
  margin-bottom: 15px;
  line-height: 1.5;
}

.developer-info a {
  color: #2c3e50;
  text-decoration: none;
  font-weight: bold;
}

.developer-info a:hover {
  text-decoration: underline;
  color: #2980b9;
}

.message-box {
  background-color: #e8f4fd;
  border-left: 4px solid #0079C7;
  padding: 15px 20px;
  margin-top: 20px;
  border-radius: 0 8px 8px 0;
  position: relative;
}

.message-box:before {
  content: '\f10d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(52, 152, 219, 0.2);
  font-size: 24px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.message-box p {
  margin: 10px 0;
  position: relative;
  z-index: 1;
}

/* Anpassungen für verschiedene Bildschirmgrößen */
@media (max-width: 768px) {
  .nyan-cat-container {
    height: 150px;
  }
  
  .developer-info {
    padding: 15px;
  }
  
  .pmo-modules-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .pmo-info-widget {
    max-height: none;
  }
}

/* PMO Info Widget */
.pmo-info-widget {
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
  max-height: 200px;
}

.pmo-info-content {
  padding: 10px 20px;
}

.pmo-modules-container {
  display: flex;
  gap: 30px;
}

.pmo-modules-column {
  flex: 1;
}

.pmo-info-content p {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.pmo-module-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.pmo-module-list li {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #333;
  background-color: #e8f4fd;
  padding: 5px 10px;
  border-radius: 4px;
  border-left: 3px solid #0079C7;
}

.pmo-module-list li i {
  color: #2ecc71;
  margin-right: 5px;
}

.pmo-module-list li i.fa-spinner {
  color: #f39c12;
}

.bab-overview-widget {
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.bab-overview-widget h3 {
  padding: 15px 20px;
  margin: 0;
  color: #34495e;
  font-size: 1.2rem;
  border-bottom: 1px solid #eee;
  background-color: #f8f9fa;
}

#bab-chart-container {
  padding: 15px;
  position: relative;
}

#bab-chart-container .error-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #e74c3c;
  text-align: center;
}

#bab-chart-container .error-message i {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* Benachrichtigungsstile */
#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.notification {
  background-color: #fff;
  border-left: 4px solid #0079C7;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  transform: translateX(120%);
  transition: transform 0.3s ease-in-out;
  opacity: 0;
}

.notification-visible {
  transform: translateX(0);
  opacity: 1;
}

.notification-hiding {
  transform: translateX(120%);
  opacity: 0;
}

.notification-icon {
  font-size: 20px;
  margin-right: 12px;
  color: #2c3e50;
}

.notification-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

.notification-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  font-size: 16px;
  margin-left: 10px;
  padding: 0;
}

.notification-close:hover {
  color: #333;
}

/* Benachrichtigungstypen */
.notification-success {
  border-left-color: #2ecc71;
}

.notification-success .notification-icon {
  color: #2ecc71;
}

.notification-error {
  border-left-color: #e74c3c;
}

.notification-error .notification-icon {
  color: #e74c3c;
}

.notification-warning {
  border-left-color: #f39c12;
}

.notification-warning .notification-icon {
  color: #f39c12;
}

/* BA-Import-Seite */
.ba-import-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.import-instructions {
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 20px;
  border-left: 4px solid #0079C7;
}

.import-success-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.import-success-header i {
  color: #27ae60;
  font-size: 24px;
  margin-right: 10px;
}

.import-success-header p {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.import-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 5px;
  flex: 1;
  margin: 0 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
  display: block;
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
}

.last-import-details {
  margin-top: 10px;
}

.import-date {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.import-date i {
  color: #2c3e50;
  margin-right: 10px;
  font-size: 18px;
}

.import-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
}

.stat-card {
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.no-import-data, .error-message {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 5px;
  margin-top: 10px;
}

.no-import-data i, .error-message i {
  font-size: 24px;
  margin-right: 15px;
}

.no-import-data i {
  color: #2c3e50;
}

.error-message i {
  color: #e74c3c;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-indicator i {
  margin-right: 10px;
  color: #2c3e50;
}

/* Analysen-Seite */
.analysen-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.mode-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selector-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chart-container {
  width: 100%;
  height: 500px;
  margin-bottom: 1.5rem;
  position: relative;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .chart-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .selector-container {
    width: 100%;
  }
  
  .chart-container {
    height: 400px;
  }
}

/* Stile für die laufende Nummer */
.data-table td[data-field="lfd_nr"] {
  text-align: center;
  font-weight: 600;
  color: #777;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  padding-left: 2px;
  padding-right: 2px;
}

.data-table th[data-field="lfd_nr"] {
  text-align: center;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  padding-left: 2px;
  padding-right: 2px;
}

/* PMO-Team-Widget Styles */
.pmo-team-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pmo-team-table-container,
.pmo-team-add-section {
  background-color: #f8f9fa;
  border-radius: 5px;
  padding: 15px;
}

.pmo-team-list {
  margin-top: 10px;
  overflow-x: auto;
}

.pmo-team-add-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.pmo-team-add-form select {
  flex-grow: 1;
}

.permissions-matrix-loading {
  text-align: center;
  padding: 20px;
  color: #6c757d;
}

.no-data {
  text-align: center;
  padding: 10px;
  color: #6c757d;
  font-style: italic;
}

.error-message {
  color: #dc3545;
  padding: 10px;
  border-left: 3px solid #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.error-message i {
  margin-right: 10px;
  font-size: 1.2em;
}

/* Permissions Matrix Tabelle für PMO-Team */
.permissions-matrix-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  border: 1px solid #dee2e6;
}

.permissions-matrix-table th,
.permissions-matrix-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.permissions-matrix-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  box-shadow: 0 1px 0 #dee2e6;
}

.permissions-matrix-table tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

.permissions-matrix-widget .btn-highlight {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .pmo-team-add-form {
    flex-direction: column;
  }
  
  .permissions-matrix-table {
    min-width: 100%;
  }
}

/* Import-Info-Komponente */
.import-info-container {
  margin-bottom: 20px;
}

.import-info-widget {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.import-info-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: #495057;
}

.import-info-header i {
  margin-right: 8px;
  color: #2c3e50;
}

.import-info-content {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.import-info-item {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.import-label {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 4px;
  font-weight: 500;
}

.import-value {
  font-size: 0.95rem;
  color: #343a40;
  font-weight: 500;
}

/* Responsive Anpassungen für Import-Info */
@media (max-width: 768px) {
  .import-info-content {
    flex-direction: column;
    gap: 10px;
  }
  
  .import-info-item {
    min-width: auto;
  }
}