body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
}

h1, h2, h3 {
  color: #343a40;
}

.table th, .table td {
  vertical-align: middle;
}

.btn-warning {
  color: #fff;
}

.form-label {
  font-weight: 600;
}

.card {
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Navbar Customization */
.navbar-brand-custom {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
}

.navbar-brand-custom .icon {
  height: 2.5rem;
  margin: 0 0.5rem; /* Corresponds to mx-2 */
}

/* Override disabled checkbox style */
.form-check-input:disabled {
  opacity: 0.7;
  background-color: #e9ecef;
}

.form-check-label:disabled, .form-check-input:disabled ~ .form-check-label {
  opacity: 1;
  color: #212529;
}

/* Improve checkbox contrast */
.form-check-input:checked {
    background-color: #e9ecef; /* Same as disabled background */
    border-color: #adb5bd; /* A slightly darker border for clarity */
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:disabled:checked {
    background-color: #e9ecef; /* Ensure disabled checked is also grey */
}

/* Pagination Customization */
.pagination .page-link {
  width: 3rem; /* Feste Breite */
  text-align: center;
  justify-content: center;
}

/* Collapse Arrow */
.arrow-down {
  transition: transform 0.3s ease;
}

[aria-expanded="true"] .arrow-down {
  transform: rotate(-90deg);
}

/* Style for disabled input fields */
input:disabled, select:disabled {
    background-color: #e9ecef;
    opacity: 0.7;
}

/* Spezifische Stile für die Fächer-Tabelle */
.fach-table td {
    background-color: #e9ecef; /* Standard-Grauton für die Zellen */
}

.fach-table input:disabled,
.fach-table select:disabled {
    background-color: #fff !important; /* Weißer Hintergrund für die deaktivierten Felder */
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #212529;
    opacity: 1;
}

/* ==================== RESPONSIVE STYLES ==================== */

/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
  .container-fluid {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Desktop Breakpoint - ab 1115px h4 kleiner machen */
@media (max-width: 1114px) {
  h4 {
    font-size: 1.1rem !important;
  }
  
  /* Reduziere allgemeine Abstände */
  .card {
    margin-bottom: 15px;
  }
  
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Medium Desktop - ab 1030px Buttons kleiner machen */
@media (max-width: 1029px) {
  .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
  
  .btn-sm {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
  
  /* Navbar anpassen */
  .navbar-brand-custom {
    font-size: 2rem;
  }
  
  .navbar-brand-custom .icon {
    height: 2rem;
  }
}

/* Tablet Landscape (768px - 991px) */
@media (max-width: 991.98px) {
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
  
  h4 {
    font-size: 1rem !important;
  }
  
  .card {
    margin-bottom: 12px;
  }
  
  /* Kleinere Pagination */
  .pagination .page-link {
    width: 2.5rem;
    font-size: 0.9rem;
  }
  
  /* Tabellenanpassungen */
  .table th,
  .table td {
    padding: 0.5rem 0.3rem;
    font-size: 0.9rem;
  }
}

/* Tablet Portrait (576px - 767px) */
@media (max-width: 767.98px) {
  /* Listen ohne aktive Suche auf Mobilgeräten ausblenden */
  .initial-list {
    display: none;
  }
  
  h1 {
    font-size: 1.6rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
  
  h4 {
    font-size: 0.95rem !important;
  }
  
  /* Kompaktere Cards */
  .card {
    margin-bottom: 10px;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  /* Navbar für Tablet */
  .navbar-brand-custom {
    font-size: 1.8rem;
  }
  
  .navbar-brand-custom .icon {
    height: 1.8rem;
    margin: 0 0.3rem;
  }
  
  /* Buttons anpassen */
  .btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
  
  /* Pagination kompakter */
  .pagination .page-link {
    width: 2.2rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.2rem;
  }
  
  /* Form-Elemente kompakter */
  .form-control,
  .form-select {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
  }
  
  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
  }
}

/* Mobile Landscape und größere Phones (480px - 575px) */
@media (max-width: 575.98px) {
  body {
    font-size: 0.9rem;
  }
  
  h1 {
    font-size: 1.4rem;
  }
  
  h2 {
    font-size: 1.2rem;
  }
  
  h3 {
    font-size: 1rem;
  }
  
  h4 {
    font-size: 0.9rem !important;
  }
  
  /* Sehr kompakte Cards */
  .card {
    margin-bottom: 8px;
  }
  
  .card-body {
    padding: 0.8rem;
  }
  
  /* Navbar für Mobile */
  .navbar-brand-custom {
    font-size: 1.5rem;
  }
  
  .navbar-brand-custom .icon {
    height: 1.5rem;
    margin: 0 0.2rem;
  }
  
  /* Sehr kompakte Buttons */
  .btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
  
  .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
  }
  
  /* Tabellen responsive */
  .table-responsive {
    font-size: 0.8rem;
  }
  
  .table th,
  .table td {
    padding: 0.4rem 0.2rem;
    font-size: 0.8rem;
  }
  
  /* Fächer-Tabelle kompakter */
  .fach-table input,
  .fach-table select {
    font-size: 0.8rem;
    padding: 0.2rem 0.3rem;
  }
  
  /* Form-Elemente sehr kompakt */
  .form-control,
  .form-select {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
  
  .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }
  
  /* Pagination sehr kompakt */
  .pagination {
    margin-bottom: 0.5rem;
  }
  
  .pagination .page-link {
    width: 2rem;
    font-size: 0.75rem;
    padding: 0.2rem 0.1rem;
  }
  
  /* Container-Padding reduzieren */
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Sehr kleine Mobile Geräte (max 480px) */
@media (max-width: 479.98px) {
  body {
    font-size: 0.85rem;
  }
  
  h1 {
    font-size: 1.3rem;
  }
  
  h2 {
    font-size: 1.1rem;
  }
  
  h3 {
    font-size: 0.95rem;
  }
  
  h4 {
    font-size: 0.85rem !important;
  }
  
  /* Minimale Cards */
  .card-body {
    padding: 0.6rem;
  }
  
  /* Minimale Navbar */
  .navbar-brand-custom {
    font-size: 1.3rem;
  }
  
  .navbar-brand-custom .icon {
    height: 1.3rem;
  }
  
  /* Minimale Buttons */
  .btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  
  /* Minimale Form-Elemente */
  .form-control,
  .form-select {
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
  }
  
  .form-label {
    font-size: 0.75rem;
  }
  
  /* Container noch kompakter */
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  /* Tabellen sehr kompakt */
  .table th,
  .table td {
    padding: 0.3rem 0.1rem;
    font-size: 0.75rem;
  }
}

/* Spezielle Anpassungen für sehr breite Bildschirme */
@media (min-width: 1200px) {
  /* Verhindere zu große Abstände auf sehr breiten Bildschirmen */
  .container-xl {
    max-width: 1400px;
  }
}

/* ==================== FUNDORT SYSTEM STYLES ==================== */

/* Sicherstellen, dass Fundort-Browser Container scrollbar sind */
#fundort-picker-container,
#fundort-manager-container {
  max-height: 675px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Verbessere Scrollbar-Darstellung */
#fundort-picker-container::-webkit-scrollbar,
#fundort-manager-container::-webkit-scrollbar {
  width: 8px;
}

#fundort-picker-container::-webkit-scrollbar-track,
#fundort-manager-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

#fundort-picker-container::-webkit-scrollbar-thumb,
#fundort-manager-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

#fundort-picker-container::-webkit-scrollbar-thumb:hover,
#fundort-manager-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Optimierungen für Touch-Geräte */
@media (hover: none) and (pointer: coarse) {
  .btn {
    min-height: 44px; /* Mindestgröße für Touch-Targets */
  }
  
  .form-check-input {
    width: 1.2em;
    height: 1.2em;
  }
  
  .pagination .page-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}