/* === DEBUGGING === */
/* CSS-Datei wurde geladen */
body::after {
  content: "";
  display: none;
}

/* Grundlegende Theme-Variablen */
:root {
  /* Light theme (default) */
  --bg-color: #ffffff;
  --text-color: #333333;
  --navbar-bg: #343a40; /* Dark navbar */
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --btn-default-bg: #f8f9fa;
  --btn-default-text: #212529;
  --link-color: #007bff;

  /* Success-Toast Variablen für Light Mode */
  --toast-success-bg: #d4edda;
  --toast-success-text: #155724;
  --toast-success-header-bg: #c3e6cb;
  --toast-success-header-text: #155724;
  --toast-success-border: #c3e6cb;

  /* Info-Toast Variablen für Light Mode */
  --toast-info-bg: #fff3cd;
  --toast-info-text: #856404;
  --toast-info-header-bg: #ffeeba;
  --toast-info-header-text: #856404;
  --toast-info-border: #ffeeba;

  /* Error/Danger-Toast Variablen für Light Mode */
  --toast-danger-bg: #f8d7da;
  --toast-danger-text: #721c24;
  --toast-danger-header-bg: #f5c6cb;
  --toast-danger-header-text: #721c24;
  --toast-danger-border: #f5c6cb;
}

[data-theme="dark"] {
  /* Dark theme */
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --navbar-bg: #1f1f1f; /* Darker navbar in darkmode */
  --card-bg: #242424;
  --card-border: #383838;
  --input-bg: #2a2a2a;
  --input-border: #444444;
  --btn-default-bg: #333333;
  --btn-default-text: #f0f0f0;
  --link-color: #79b8ff;

  /* Success-Toast Variablen für Dark Mode */
  --toast-success-bg: #1e3a29;      /* Dunklerer grüner Hintergrund */
  --toast-success-text: #d4edda;     /* Hellerer Text für besseren Kontrast */
  --toast-success-header-bg: #2c523a; /* Noch dunklerer Header-Hintergrund */
  --toast-success-header-text: #ffffff; /* Weißer Text für Header */
  --toast-success-border: #28a745;     /* Grüner Rand für klare Abgrenzung */

  /* Info-Toast Variablen für Dark Mode */
  --toast-info-bg: #38341c;         /* Dunklerer gelb/orange Hintergrund */
  --toast-info-text: #ffe69c;       /* Hellerer Text für besseren Kontrast */
  --toast-info-header-bg: #4a4525;  /* Noch dunklerer Header-Hintergrund */
  --toast-info-header-text: #ffffff; /* Weißer Text für Header */
  --toast-info-border: #ffc107;     /* Gelber Rand für klare Abgrenzung */

  /* Error/Danger-Toast Variablen für Dark Mode */
  --toast-danger-bg: #3b1c20;       /* Dunklerer roter Hintergrund */
  --toast-danger-text: #f8d7da;     /* Hellerer Text für besseren Kontrast */
  --toast-danger-header-bg: #4c2428; /* Noch dunklerer Header-Hintergrund */
  --toast-danger-header-text: #ffffff; /* Weißer Text für Header */
  --toast-danger-border: #dc3545;   /* Roter Rand für klare Abgrenzung */
}

/* Grundlegende Stile */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Grundlegende Stile für Darkmode */
[data-theme="dark"] body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* Navbar-Styles bleiben dunkel, damit die Kontraste stimmen */
.navbar-dark {
  background-color: var(--navbar-bg) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: #ffffff;
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
}

.card-title, .card-text {
  color: var(--text-color);
}

/* Input-Felder */
.form-control {
  background-color: var(--input-bg);
  color: var(--text-color);
  border-color: var(--input-border);
}

.input-group-text {
  background-color: var(--btn-default-bg);
  color: var(--text-color);
  border-color: var(--input-border);
}

/* Buttons */
.btn-outline-secondary {
  border-color: var(--input-border);
  color: var(--text-color);
}

.btn-outline-secondary:hover {
  background-color: var(--btn-default-bg);
  color: var(--text-color);
}

/* Links */
a {
  color: var(--link-color);
}

/* Alerts */
.alert-info {
  background-color: var(--alert-info-bg);
  color: var(--alert-info-text);
}

.alert-success {
  background-color: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.alert-danger {
  background-color: var(--alert-danger-bg);
  color: var(--alert-danger-text);
}

/* Darkmode Toggle-Button - jetzt als inline Button */
#darkmode-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="dark"] #darkmode-toggle {
  background-color: #333333;
  border: 1px solid #555555;
  color: #ffffff;
}

#darkmode-toggle:hover {
  transform: scale(1.1);
}

#darkmode-toggle:active {
  transform: scale(0.95);
}

/* Icon im Button */
#darkmode-icon {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 1.2rem !important;
  color: var(--text-color);
}

/* Spezifische Styles für den Darkmode */
[data-theme="dark"] .card {
  background-color: var(--card-bg);
}

[data-theme="dark"] .form-control {
  background-color: var(--input-bg);
  color: var(--text-color);
  border-color: var(--input-border);
}

[data-theme="dark"] .table {
  color: var(--text-color);
}

/* Toast-Styles */
[data-theme="dark"] .toast {
  background-color: var(--card-bg);
  color: var(--text-color);
}

/* Toast-Styles für Dark Mode */
[data-theme="dark"] .toast-success {
  background-color: var(--toast-success-bg) !important;
  color: var(--toast-success-text) !important;
  border-color: var(--toast-success-border) !important;
}

[data-theme="dark"] .toast-success .toast-header {
  background-color: var(--toast-success-header-bg) !important;
  color: var(--toast-success-header-text) !important;
}

[data-theme="dark"] .toast-success .toast-body {
  color: var(--toast-success-text) !important;
  font-weight: 500; /* Etwas fetter für bessere Lesbarkeit */
}

/* Info-Toast Styles für Dark Mode */
[data-theme="dark"] .toast-info {
  background-color: var(--toast-info-bg) !important;
  color: var(--toast-info-text) !important;
  border-color: var(--toast-info-border) !important;
}

[data-theme="dark"] .toast-info .toast-header {
  background-color: var(--toast-info-header-bg) !important;
  color: var(--toast-info-header-text) !important;
}

[data-theme="dark"] .toast-info .toast-body {
  color: var(--toast-info-text) !important;
  font-weight: 500; /* Etwas fetter für bessere Lesbarkeit */
}

/* Error-Toast Styles für Dark Mode */
[data-theme="dark"] .toast-danger {
  background-color: var(--toast-danger-bg) !important;
  color: var(--toast-danger-text) !important;
  border-color: var(--toast-danger-border) !important;
}

[data-theme="dark"] .toast-danger .toast-header {
  background-color: var(--toast-danger-header-bg) !important;
  color: var(--toast-danger-header-text) !important;
}

[data-theme="dark"] .toast-danger .toast-body {
  color: var(--toast-danger-text) !important;
  font-weight: 500; /* Etwas fetter für bessere Lesbarkeit */
}

/* Erhöhter Kontrast für den Fortschrittsbalken im Dark Mode */
[data-theme="dark"] .toast-success .toast-progress {
  background-color: #30c553; /* Helleres Grün für den Fortschrittsbalken */
}

[data-theme="dark"] .toast-info .toast-progress {
  background-color: #ffde6a; /* Helleres Gelb für den Fortschrittsbalken */
}

[data-theme="dark"] .toast-danger .toast-progress {
  background-color: #ff5a6a; /* Helleres Rot für den Fortschrittsbalken */
}

/* Modals im Darkmode */
.modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
}

.modal-header, .modal-footer {
  border-color: var(--card-border);
}

/* Tables im Darkmode */
.table {
  color: var(--text-color);
}

.table th, .table td {
  border-color: var(--card-border);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Selected Item Container im Light/Dark Mode */
.selected-item-container {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--card-border) !important;
}

[data-theme="dark"] .selected-item-container {
  background-color: var(--card-bg);
  box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .selected-item-container h3,
[data-theme="dark"] .selected-item-container h4 {
  color: var(--text-color);
}

/* Total-Zusammenfassungs-Container für Light/Dark Mode */
.total-summary-container {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--card-border);
}

[data-theme="dark"] .total-summary-container {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] #grandTotalContainer .h5 {
  color: var(--text-color);
}