/* Modern theme for the KNX 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) {
    --color-bg: #0B0C0F;
    --color-bg-card: #151821;
    --color-border: #20232A;
    --color-text: #E7EAF0;
    --color-subtext: #AEB7C5;
  }
}

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);
}

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;
}