/* Modern theme for the ETS Gruppenadressgenerator.  */
/* Root variables define base colors, spacing, radii and fonts. */
:root {
  --color-bg: #F5F7FA;
  --color-bg-card: #FFFFFF;
  --color-border: #E6E9F0;
  --color-primary: #2E7D32;
  --color-primary-hover: #256628;
  --color-primary-active: #1A4D20;
  --color-danger: #C62828;
  --color-danger-hover: #A92323;
  /* Hellere Hintergrundfarbe für Gefahren‑Buttons (z. B. Löschen) */
  --color-danger-bg: #FFEDEE;
  --color-text: #1F2937;
  --color-subtext: #4B5563;
  --radius: 12px;
  --spacing: 16px;
  --font-family: 'Inter', sans-serif;
}

/* Dark mode support using prefers-color-scheme. This can be overridden with the `theme-dark`
   class on the html element or disabled with `theme-light`. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    /* Angepasste Farben für den Dunkelmodus.  Die Hintergründe sind bewusst
       etwas heller als reines Schwarz, um einen besseren Kontrast mit den
       primären und sekundären Farben zu gewährleisten. */
    --color-bg: #1a1d23;        /* dunkelgrauer Hintergrund statt nahezu schwarz */
    --color-bg-card: #232a34;   /* leicht helleres Panel für Karten und Overlays */
    --color-border: #303742;    /* klare Abgrenzung bei dunklen Farben */
    --color-text: #E6EBF3;      /* nahezu weißer Text für maximale Lesbarkeit */
    --color-subtext: #B5BED1;   /* gedämpfter Text für sekundäre Inhalte */
  }
}

html, body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* Layout wrapper to constrain content width on large screens and provide generous padding. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing);
}

/* Card-like sections used throughout the application. */
.section {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--spacing) * 1.25);
  margin-bottom: var(--spacing);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.section h2 {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: var(--spacing);
  color: var(--color-text);
}

/* Typography */
h1 {
  font-size: 1.75rem;
  margin-bottom: var(--spacing);
  color: var(--color-primary);
  font-weight: 600;
}

label {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--color-subtext);
}

/* Form controls */
input, select, textarea, button {
  font-family: inherit;
  font-size: 1rem;
}

input, select, textarea {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Ensure text is readable in dark mode by inheriting the body text color */
  color: var(--color-text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  background-color: var(--color-bg-card);
  color: var(--color-primary);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
}

button:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: #ffffff;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Danger variant buttons can be created by adding the .danger class via code or markup. */
button.danger {
  /* Heller Hintergrund mit rotem Rand und Text für Gefahr‑Buttons */
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
button.danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: #ffffff;
}

/* Aktiver Zustand für Gefahrenbuttons */
button.danger:active {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: #ffffff;
}

/* Responsive grid utilities for optional grouping of inputs. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
  margin-bottom: var(--spacing);
}
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }

/* Table styling with sticky header, zebra rows and hover state. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: calc(var(--spacing) * 0.625);
}

/* Spinner für Lade-Overlays. Besteht aus einem kreisförmigen Rahmen, bei dem
   der obere Rand eine abweichende Farbe hat. Die Animation dreht den Kreis
   kontinuierlich. */
.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

table thead th {
  position: sticky;
  top: 0;
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem;
  text-align: left;
  z-index: 1;
}

table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

table tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

table td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem;
}

/* Wizard row layout improvements (flex container for dynamic inputs). */
.wizard-row {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.wizard-row input[type="text"] {
  flex: 1 1 auto;
  width: auto;
}
.wizard-row input[type="number"] {
  width: 60px;
}
.wizard-row button {
  flex: 0 0 auto;
}

/* Generic flex utility used in the app. */
.flex {
  display: flex;
  gap: 10px;
}
.flex > div {
  flex: 1;
}

/* Preview tree area styling */
#previewArea {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9rem;
}
#previewArea ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}
#previewArea li {
  margin: 2px 0;
}
#previewArea .preview-floor {
  margin-bottom: 0.5rem;
}

/* Details element styling for optional collapsible sections. */
details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--spacing);
  background-color: var(--color-bg-card);
  margin-bottom: var(--spacing);
}

/*
 * Hierarchische GA‑Vorschau
 *
 * Die folgenden Styles definieren das Erscheinungsbild der Baumstruktur
 * für generierte Gruppenadressen. Jedes Eintragslevel nutzt ein
 * unterschiedliches Farbschema und einen Versatz, um die Hierarchie
 * deutlich zu machen. Die Symbole bestehen aus einem 2×2‑Raster
 * eingefärbter Quadrate. Die Farben lassen sich über CSS‑Variablen
 * anpassen und werden für den Dark‑Mode nicht geändert, um
 * ausreichenden Kontrast zu gewährleisten.
 */

#gaTree {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.ga-tree-main,
.ga-tree-mid,
.ga-tree-sub {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  line-height: 1.4;
}
.ga-tree-main {
  font-weight: 600;
  margin-left: 0;
}
.ga-tree-mid {
  font-weight: 500;
  margin-left: 20px;
}
.ga-tree-sub {
  font-weight: 400;
  margin-left: 40px;
}
.ga-icon {
  display: inline-grid;
  grid-template-columns: repeat(2, 6px);
  grid-template-rows: repeat(2, 6px);
  gap: 2px;
  margin-right: 6px;
}
.ga-icon .ga-square {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}
/* Farbdefinitionen für die Icons. Du kannst diese Variablen
   überschreiben, falls gewünscht. */
:root {
  --ga-main-color: #4F8EF7;
  --ga-mid-color: #71C33A;
  --ga-sub-color: #DD5758;
}
.ga-main-icon .ga-square { background-color: var(--ga-main-color); }
.ga-mid-icon .ga-square  { background-color: var(--ga-mid-color); }
.ga-sub-icon .ga-square  { background-color: var(--ga-sub-color); }
.ga-address {
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
  white-space: nowrap;
}
.ga-name {
  flex: 1;
  overflow-wrap: anywhere;
}
details summary {
  cursor: pointer;
  font-weight: 600;
}
details[open] summary {
  margin-bottom: var(--spacing);
}

/* Badge element for labelling sections or new features. */
.badge {
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  margin-left: 8px;
}

/* Quick overlay fixes: ensure wizard overlay covers the full viewport even when wrapped in a container. */
#wizardOverlay {
  width: 100vw;
  height: 100vh;
}

/* Inherit the global text colour for all textual elements inside sections except form controls and buttons.
   This improves readability when custom backgrounds or tinted panels are used (e.g. floors and rooms). */
.section *:not(button):not(input):not(select):not(textarea) {
  color: var(--color-text);
}

/* Ensure wizard headings use the same text color as the rest of the UI */
#wizardContainer h2 {
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--spacing);
  font-size: 1.25rem;
  font-weight: 600;
}


/* --- Fix: Sichtbarkeit der Eingabefelder nach Wizard‑Import --- */
.section input[type="text"],
.section select,
.section textarea {
  color: var(--color-text);
  background: var(--color-bg-card);
}
.section input::placeholder {
  color: var(--color-subtext);
  opacity: 0.85;
}