/* ==========================================================================
   1. Globale Stile & Layout
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1em;
  flex-grow: 1;
}

/* ==========================================================================
   2. Formulare & Eingabefelder
   ========================================================================== */
.input-row {
  display: flex;
  gap: 0.8em;
  margin-bottom: 0.5em;
  width: 100%;
  align-items: stretch;
  /* Rahmen und Hintergrund für die Flexbox */
  border: 2px solid #388e3c;
  border-radius: 4px;
  /* Verringertes Padding */
  padding: 0.2em;
  background-color: rgba(102, 187, 106, 0.1);
}

/* NEU: Regel zum Entfernen des grünen Rahmens für die Ortsverwaltungsseite */
.verwaltung-seite .input-row {
    border: none;
    background-color: transparent;
    padding: 0;
}

.artname-wrapper {
  flex-grow: 1;
  position: relative;
}

/* EIGENSCHAFTEN FÜR TEXTFELDER */
input[type="text"],
input[type="search"] {
  width: 100%;
  padding: 0.6em;
  font-size: 1em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #777;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.8em;
}

/* EIGENSCHAFTEN FÜR TEXTAREA */
textarea {
  width: 100%;
  padding: 0.8em;
  font-size: 1em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #777;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  resize: vertical;
  min-height: calc(1.5em + 1.6em + 2px);
  height: auto;
}

/* EIGENSCHAFTEN FÜR SELECT-ELEMENTE */
select {
  width: 100%;
  padding: 0.8em;
  font-size: 1em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #777;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 2.8em;
}

.select-custom {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M192%20256L64%20128v256l128-128z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 0.8em top 50%;
  background-size: 0.6em auto;
  padding-right: 2.5em !important;
  height: 2.8em;
}

/* Autocomplete Liste */
#autocomplete-list {
  font-size: 1em;
  border-radius: 6px;
  margin-top: 0.5em;
  background-color: #222;
  color: #eee;
  border: 1px solid #555;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  list-style: none;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
}
#autocomplete-list li {
  padding: 0.6em;
  border-bottom: 1px solid #444;
  cursor: pointer;
}
#autocomplete-list li:hover {
  background-color: #333;
}

/* === CSS für die Suchleiste (KORREKTUR) === */
.search-container {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-bottom 0.3s ease-out;
  margin-bottom: 0;
}

.search-container.visible {
  max-height: 100px; /* Ausreichend Höhe für das Suchfeld */
  opacity: 1;
  margin-bottom: 1em;
}

/* ==========================================================================
   3. Buttons & Interaktive Elemente
   ========================================================================== */
/* EIGENSCHAFTEN FÜR BUTTONS UND LINKS MIT ICON-BUTTON KLASSE */
button, a.icon-button {
  padding: 0.4em 0.6em;
  font-size: 1em;
  background-color: #2a2a2a;
  color: white;
  border: 1px solid #777;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.125s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 2.8em;
}

button:hover, a.icon-button:hover {
  background-color: #3e3e3e;
}

/* Stil für den aktiven Such-Button */
#toggle-search-btn.active {
  background-color: #3e3e3e;
  border-color: #666;
}

/* EIGENSCHAFTEN FÜR DEN SUBMIT-BUTTON */
form button[type="submit"] {
  background-color: #388e3c;
  border-color: #388e3c;
  color: #fff;
  flex-grow: 1;
}

form button[type="submit"]:hover {
  background-color: #4caf50;
  border-color: #4caf50;
}

/* EIGENSCHAFTEN FÜR DAS DREI-PUNKTE-SYMBOL */
#toggle-obs-details-icon-button {
  flex-shrink: 0;
  padding: 0.4em 0.8em;
  font-size: 1em;
}

/* EIGENSCHAFTEN FÜR DAS ZAHNRAD-SYMBOL */
#toggle-orteverwaltung-btn {
  font-size: 1.0em;
}

.action-button-group {
  display: flex;
  gap: 0.8em;
  margin-top: 1em;
}
.action-button-group button {
  flex: 1;
}

#get-gps-button {
  padding: 0em 0.6em; /* Etwas kleineres Padding als Standard-Buttons */
  font-size: 1.0em;   /* Größeres Symbol */
}

/* ==========================================================================
   4. Header & Seitenstruktur
   ========================================================================== */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5em;
}
.header-top-row h3 {
  font-size: 1.3em;
  margin: 0;
}
.header-nav-group {
  display: flex;
  gap: 0.5em;
}

.additional-info-toggle {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 0.8em;
}
.additional-info-toggle .arrow {
  transition: transform 0.3s ease-out;
}
.additional-info-toggle.visible .arrow {
  transform: rotate(90deg);
}

.additional-info-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-bottom 0.3s ease-out;
  margin-bottom: 0;
}
.additional-info-content.visible {
  max-height: 500px; /* Ausreichend hoch für den Inhalt */
  opacity: 1;
  margin-bottom: 1em;
}

/* NEU: Anordnung und Styling des GPS-Links */
.gps-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5em; 
}

.mtb-group {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Styling für das Span-Element, damit es wie ein Input-Feld aussieht und die Klickfunktion behält */
#location-display-link {
    flex-grow: 1;
    padding: 0.8em;
    font-size: 1em;
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #555;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    display: block; /* Stellt sicher, dass das Element die gesamte Breite einnimmt */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#location-display-link:hover {
    color: #4caf50;
    text-decoration: none;
}


/* ==========================================================================
   5. Beobachtungsliste & Tabelle
   ========================================================================== */
#liste {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  table-layout: fixed;
}
#liste th, #liste td {
  border: 1px solid #444;
  padding: 0.2em 0.6em;
  text-align: left;
  word-wrap: break-word;
  vertical-align: middle;
}
#liste th {
  background: #333;
}
#liste th.sortable {
  cursor: pointer;
  user-select: none;
}
#liste th.sortable:hover {
  background-color: #444;
}

/* ================================================================
   DYNAMISCHE SORTIER-SYMBOLE
   ================================================================ */

/* 1. Container (die Tabellenüberschrift) vorbereiten */
#liste th.sortable {
  position: relative; /* Wichtig, damit die Pfeile darin positioniert werden können */
  padding-right: 1.5em; /* Platz für die Symbole schaffen */
}

/* 2. Basis-Stile für BEIDE Dreiecke (übereinandergelegt) */
#liste th.sortable::before,
#liste th.sortable::after {
  content: '';
  position: absolute;
  right: 0.5em; /* Abstand vom rechten Rand */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.4; /* Standardmäßig sind beide leicht ausgeblendet */
  transition: opacity 0.2s, border-color 0.2s;
}

/* 3. Positionierung und Form der einzelnen Dreiecke */
/* Oberes Dreieck (aufwärts) */
#liste th.sortable::before {
  border-bottom: 6px solid #999;
  top: calc(50% - 8px); /* Vertikal zentrieren (oberer Teil) */
}

/* Unteres Dreieck (abwärts) */
#liste th.sortable::after {
  border-top: 6px solid #999;
  top: calc(50% + 2px); /* Vertikal zentrieren (unterer Teil) */
}

/* 4. Logik zum Ein- und Ausblenden je nach Zustand */
/* Zustand: Aufsteigend sortiert */
#liste th.sortable.sort-asc::before {
  opacity: 1; /* Oberes Dreieck voll einblenden */
  border-bottom-color: #4caf50; /* Aktive Farbe setzen */
}
#liste th.sortable.sort-asc::after {
  opacity: 0.2; /* Unteres Dreieck stark ausblenden */
}

/* Zustand: Absteigend sortiert */
#liste th.sortable.sort-desc::after {
  opacity: 1; /* Unteres Dreieck voll einblenden */
  border-top-color: #4caf50; /* Aktive Farbe setzen */
}
#liste th.sortable.sort-desc::before {
  opacity: 0.2; /* Oberes Dreieck stark ausblenden */
}

.col-artname { width: 65%; }
.col-anzahl { width: 20%; }
.col-delete { width: 15%; }

.cell-artname {
  cursor: pointer;
}

/* Zentriert Kopf- und Datenzellen für die entsprechenden Spalten (mit erhöhter Spezifität) */
#liste .col-anzahl,
#liste .col-delete,
#liste .cell-anzahl, 
#liste .cell-delete {
  text-align: center;
}

.table-anzahl-select {
  width: 70px; /* Wir geben der Box eine feste Breite */
  background: transparent;
  color: inherit;
  border: none;
  outline: none;
  text-align: center;
  font-size: 1em;
  padding: 0.2em 0em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@-moz-document url-prefix() { .table-anzahl-select { text-align-last: center; } }

.delete-obs-btn {
  background: transparent !important;
  border: none !important;
  padding: 0em 0.4em !important;
  font-size: 0.8em;
  color: #ff6b6b;
}

/* ==========================================================================
   6. Dialoge & Modals
   ========================================================================== */
dialog {
  border: 1px solid #555;
  border-radius: 8px;
  padding: 1.5em;
  background-color: #2a2a2a;
  color: #e0e0e0;
  max-width: 90%;
  width: 350px;
  text-align: center;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}
dialog p {
  margin-top: 0;
  margin-bottom: 1.5em;
}
dialog .dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 1em;
}
#static-map-dialog {
    width: auto;
    max-width: 800px;
    border: none;
    padding: 1em;
}

/* NEU: Stile für Karten-Container zum Stapeln von Lade-Text und Karte */
#static-map-content, .map-container-wrapper {
  position: relative; /* Schafft einen Positionierungs-Kontext */
  background-color: #2a2a2a; /* Hintergrund, während die Karte lädt */
  border-radius: 8px;
  overflow: hidden; /* Stellt sicher, dass alles innerhalb des Rahmens bleibt */
}

.map-loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* Unterste Ebene */
  color: #ccc;
}

#map, #static-map-image {
  position: relative; /* Notwendig für z-index */
  z-index: 2; /* Über dem Lade-Text */
  background-color: transparent; /* Wichtig, damit der Lade-Text anfangs sichtbar ist */
}

/* ==========================================================================
   7. Spezifische Seiten (config, orteverwaltung)
   ========================================================================== */
.config-section {
  margin-bottom: 1.5em;
  padding: 1em;
  border: 1px solid #333;
  border-radius: 8px;
  background-color: #1e1e1e;
}
.config-section h3 {
  font-size: 1.1em;
  margin-top: 0;
  margin-bottom: 0.8em;
  border-bottom: 1px solid #444;
  padding-bottom: 0.4em;
}
.config-section p.description {
  color: #aaa;
  font-size: 0.9em;
  margin-top: 0.4em;
}
.checkbox-group > div {
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* orteverwaltung.html */
.my-custom-marker {
    background-color: rgba(211, 47, 47, 0.7);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* ==========================================================================
   8. Light Mode
   ========================================================================== */
body.light-mode { background-color: #ffffff; color: #333333; }
/* EIGENSCHAFTEN FÜR FORMULARE IM LIGHT MODE */
body.light-mode input,
body.light-mode select {
  background-color: #f0f0f0;
  color: #333333;
  border-color: #888;
}

body.light-mode .table-anzahl-select {
  background-color: transparent;
}

body.light-mode textarea,
body.light-mode button,
body.light-mode a.icon-button {
  background-color: #f0f0f0;
  color: #333333;
  border-color: #888;
}

body.light-mode #liste th {
    background: #f0f0f0;
    border-color: #ccc;
}
body.light-mode #liste th.sortable:hover {
    background-color: #e0e0e0;
}

/* Farben für die dynamischen Sortier-Symbole im Light Mode */
body.light-mode #liste th.sortable::before {
  border-bottom-color: #888;
}
body.light-mode #liste th.sortable::after {
  border-top-color: #888;
}

/* Aktive Farbe im Light Mode */
body.light-mode #liste th.sortable.sort-asc::before {
  border-bottom-color: #388e3c;
}
body.light-mode #liste th.sortable.sort-desc::after {
  border-top-color: #388e3c;
}

body.light-mode #autocomplete-list { background-color: #ffffff; color: #333333; border-color: #ccc; }
body.light-mode #autocomplete-list li { border-bottom-color: #eee; }
body.light-mode #autocomplete-list li:hover { background-color: #f0f0f0; }
body.light-mode .select-custom {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M192%20256L64%20128v256l128-128z%22%2F%3E%3C%2Fsvg%3E');
}
body.light-mode form button[type="submit"] { background-color: #66bb6a; border-color: #66bb6a; color: #ffffff; }
body.light-mode form button[type="submit"]:hover { background-color: #57a95b; border-color: #57a95b; }
body.light-mode dialog { background-color: #f0f0f0; color: #333333; border-color: #ccc; }
body.light-mode .delete-obs-btn { color: #d32f2f; }
body.light-mode .config-section { border-color: #ddd; background-color: #f9f9f9; }
body.light-mode .config-section h3 { border-bottom-color: #ccc; }
body.light-mode .config-section p.description { color: #555; }
body.light-mode #toggle-search-btn.active {
    background-color: #e0e0e0;
    border-color: #bbb;
}
body.light-mode #location-display-link {
    background-color: #f0f0f0;
    color: #333333;
    border-color: #ccc;
}
body.light-mode #location-display-link:hover {
    color: #57a95b;
}

/* Footer-Stile - wurden aus HTML entfernt und hier eingefügt */
.app-footer {
  background-color: #1c1c1c;
  color: #ccc; /* Einheitliche Farbe für den Dunkel-Modus */
  padding: 1.5em 1em;
  margin-top: 2em;
  text-align: center;
  border-top: 1px solid #333;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.app-footer .footer-links {
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
    gap: 1.5em;
}
.app-footer .footer-links a {
    color: #ccc; /* Einheitliche Farbe für die Links im Dunkel-Modus */
    text-decoration: none;
    transition: color 0.3s;
}
.app-footer .footer-links a:hover {
    /* Grüne Schriftfarbe beim Hover */
    color: #4caf50;
}
.app-footer .footer-info {
    font-size: 0.9em;
    color: #ccc; /* Einheitliche Farbe für die Info im Dunkel-Modus */
}

/* Light Mode Footer Stile */
body.light-mode .app-footer {
  background-color: #f0f0f0;
  color: black; /* Schwarze Schrift für den Hell-Modus */
  border-top-color: #ccc;
}
body.light-mode .app-footer .footer-links a {
    color: black; /* Schwarze Schrift für die Links im Hell-Modus */
}
body.light-mode .app-footer .footer-links a:hover {
    /* Grüne Schriftfarbe beim Hover */
    color: #4caf50;
}
/* Angepasste Farbe für den Footer-Info-Bereich */
body.light-mode .app-footer .footer-info {
  color: black; /* Schwarze Schrift für die Info im Hell-Modus */
}