/* ===================================================================
   BirdPI Global Stylesheet
   ===================================================================
   1. Core & Variablen      - :root, Themes (Dark/Light)
   2. Resets & Basis-Stile - Globale Stile (html, body, a, etc.)
   3. Layout-System        - Seitenstruktur (.wrap, .grid)
   4. Seiten-Struktur      - Header, Footer
   5. Globale Komponenten  - Wiederverwendbare Elemente (.card, .badge)
   6. Icons & Status       - Icons, Status-Indikatoren (.rec, .mic-status)
   7. Utility-Klassen      - Hilfsklassen (Abstände, Flexbox)
   8. Animationen          - Keyframe-Animationen
   =================================================================== */

/* ===================================================================
   1. Core & Variablen
   =================================================================== */
:root {
  color-scheme: dark;
  --bg: #1a2a27; /* Dunkles Waldgrün */
  --fg: #f0f5f2; /* Sanftes Weiss */
  --muted: #8a9e99; /* Gedämpftes Grün-Grau */
  --card: #243c38; /* Etwas helleres Waldgrün */
  --accent: #ff8c42; /* Kräftiges Orange (Sonnenuntergang) */
  --grid: #101e1c; /* Sehr dunkles Grün */

  /* Layout */
  --pad: 3px;
  --radius: 10px;

  /* Typografie */
  --fs: 14px/1.45;
  --font-title: 20px;
  --font-h: 16px;

  /* Tabellen */
  --tbl-h: 28px;
  --tbl-b: #0e1016;
  --row-alt: rgba(22, 19, 19, 0.39); /* Taberllen Hintergrundfarbe jeder geraden Reihe */

  /* Badges */
  --badge-h: 28px;
  --badge-bg: #0f131a;
  --badge-bd: #1b2230;

  /* Progressbar */
  --prog-bg: #0f1218;
  --prog-fg: #5bd3a7;

  /* Statusfarben */
  --ok: #00ff6a;
  --mid: #ffd166;
  --high: #ff0000;
  --no-mic: #ff0000;
  --recording: #00ff6a;

  /* Schatten */
  --sh: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 0 0 1px rgba(0, 0, 0, .4) inset, 0 1px 6px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #6A89A7;      /* Hintergrundfarbe */
  --fg: #060706;      /* - */
  --muted: #090a09;   /* - */
  --card: #88BDF2;    /* Kartenhintergrund BDDDFC*/
  --accent: #1d0f6b;  /* Schmaler erster Rand */
  --grid: #0d0f0e;    /* Breiter zweiter Rand */
  --tbl-b: #edf3ef;   /* - */
  --badge-bg: #f0f5f2;/* weiches Laublicht */
  --badge-bd: #020703;/* blassgrüner Rahmen */
  --prog-bg: #e3ebe5; /* zarter Hintergrundton */
  --prog-fg: #4b8b68; /* Akzentgrün für Fortschritt */
  --row-alt: #edf3d86b; /* Taberllen Hintergrundfarbe jeder geraden Reihe */
}

/* ===================================================================
   2. Resets & Basis-Stile
   =================================================================== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overscroll-behavior: contain; /* Kiosk-Optimierung */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs) system-ui, Segoe UI, Roboto, Arial;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; opacity: .95; }
a:hover { opacity: 1; }
img { max-width: 100%; height: auto; display: block; }
h1 { font-size: var(--font-title); margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 6px 8px;
}

/* ===================================================================
   3. Layout-System
   =================================================================== */
.wrap {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 6px;
  gap: 6px;
  max-width: 1200px;
  margin: 0 auto;
}

.grid { display: grid; gap: 6px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.viewport {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.viewport .pane {
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  padding: 8px;
}

/* ===================================================================
   4. Seiten-Struktur
   =================================================================== */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

header .bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
}
header .bar .title { font-weight: 600; font-size: 1.2em; }
header .bar .spacer { flex: 1; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
footer .badge { background: var(--badge-bg); }

/* ===================================================================
   5. Globale Komponenten
   =================================================================== */

/* --- Karten --- */
.card {
  background: var(--card);
  padding: var(--pad);
  border-radius: var(--radius);
  border: 0.3rem solid var(--grid);
  position: relative;
  transition: background-color .2s ease, border-color 1.2s ease;
  box-shadow: var(--sh);
}
.card.kpi {
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  gap: 6px;
  min-height: 88px; /* --kpi-h */
}
.card .s { color: var(--muted); }
.card .v { font-size: 24px; line-height: 1; }
.card .tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--badge-h);
  padding: 0 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1.5px solid var(--badge-bd);
  text-decoration: none;
  white-space: nowrap;
}

.badge .txt { font-size: 12px; letter-spacing: .2px; }
.txt-big { font-size: 14px; font-weight: 600; }

/* Badge-Zustände */
.ok { color: var(--ok); }
.mid { color: var(--mid); }
.high { color: var(--high); }

/* --- Tabellen --- */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh);
}
.tbl th, .tbl td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
}
.tbl th {
  height: var(--tbl-h);
  color: var(--muted);
  background: var(--tbl-b);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; }
.tbl .dim { color: var(--muted); }

/* --- Progressbar --- */
.progress {
  height: 8px;
  background: var(--prog-bg);
  border-radius: 999px;
  overflow: hidden;
}
.progress > div {
  height: 100%;
  width: 0%;
  background: var(--prog-fg);
}

/* --- Modale / Overlays --- */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: saturate(120%) blur(4px);
  z-index: 9999;
}
.modal.open { display: grid; }
.modal .dialog {
  width: min(640px, 92vw);
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: 12px;
  box-shadow: var(--sh);
  padding: 16px;
}

/* --- Formulare --- */
.form { display: grid; gap: 8px; }
.form .row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  align-items: center;
}
.form .row .label { color: var(--muted); font-size: 12px; }

/* --- Tabs --- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--grid); }
.tabs a {
  padding: 8px 10px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
}
.tabs a.active {
  border-color: var(--grid);
  border-bottom-color: transparent;
  background: var(--card);
}

/* --- Toolbars --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar .right { margin-left: auto; }

/* ===================================================================
   6. Icons & Status
   =================================================================== */
.ico {
  width: 16px;
  height: 16px;
  display: inline-flex;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
}



.ico-refresh { mask-image: url('/static/icons/undo-arrow-icon.svg'); }
.ico-gear { mask-image: url('/static/icons/sliders-icon.svg'); }
.ico-mic { mask-image: url('/static/icons/microphone-line-icon.svg'); }
.ico-alert { mask-image: url('/static/icons/abort-icon.svg'); }
.ico-wifi { mask-image: url('/static/icons/wifi-line-icon.svg'); }
.ico-wifi-off { mask-image: url('/static/icons/no-wifi-icon.svg'); }
.ico-export { mask-image: url('/static/icons/export.svg'); }
.ico-maps-pin-black { mask-image: url('/static/icons/maps-pin-black-icon.svg'); }
.ico-maps-pin-line { mask-image: url('/static/icons/maps-pin-line-icon.svg'); }
.ico-mic-off { mask-image: url('/static/icons/mic-off-icon.svg'); }
.ico-settings { mask-image: url('/static/icons/settings.svg'); }
.ico-sing { mask-image: url('/static/icons/sing-icon.svg'); }
.ico-table { mask-image: url('/static/icons/table-icon.svg'); }
.ico-welcome { mask-image: url('/static/icons/welcome-icon.svg'); }
.ico-wikipedia { mask-image: url('/static/icons/wikipedia-icon.svg'); }
.ico-clock-color { mask-image: url('/static/icons/clock-color-icon.svg'); }
.ico-temp-low { mask-image: url('/static/icons/low-temperature-icon.svg'); }
.ico-temp-medium { mask-image: url('/static/icons/medium-temperature-icon.svg'); }
.ico-temp-high { mask-image: url('/static/icons/high-temperature-icon.svg'); }
.ico-menu { mask-image: url('/static/icons/menu-icon.svg'); }
.ico-dashboard { mask-image: url('/static/icons/dashboard-icon.svg'); }
.ico-wikipedia { mask-image: url('/static/icons/wikipedia-icon.svg'); }
.ico-birddex { mask-image: url('/static/icons/owl-color-icon.svg'); }
.ico-sounddex { mask-image: url('/static/icons/sounddex-icon.svg'); }
.ico-listen { mask-image: url('/static/icons/listen-icon.svg'); }

.badge .ico.ico-wifi-off {
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/no-wifi-icon.svg') no-repeat center/contain;
}

.badge .ico.ico-clock-color {
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/clock-color-icon.svg') no-repeat center/contain;
}

.badge .ico.ico-temp-low {
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/low-temperature-icon.svg') no-repeat center/contain;
}

.badge .ico.ico-temp-medium {
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/medium-temperature-icon.svg') no-repeat center/contain;
}

.badge .ico.ico-temp-high {
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/high-temperature-icon.svg') no-repeat center/contain;
}

.badge .ico.ico-menu{
  vertical-align: middle;
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/menu-icon.svg') no-repeat center/contain;
}

a .ico.ico-birddex{
  vertical-align: middle;
  mask: none;
  -webkit-mask: none;
  background: url('/static/icons/owl-color-icon.svg') no-repeat center/contain;
}

/* Temperatur-Badge mit Icon */
#tempBadge .ico {
  margin-right: 6px;
}

.menu-dropdown span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  padding-left: 5px; /* ersetzt margin-right */
}

.bottom-row span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0px; /* ersetzt margin-right */
}

.bottom-row .ico {
  margin-top: 6px;
}

/* --- Aufnahme-Status --- */
.rec { position: relative; }


.rec .aura { position: absolute; inset: 0; pointer-events: none; }
.rec .aura > span {
  position: absolute;
  inset: auto;
  left: 10%;
  top: 50%;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 2px solid rgb(255, 0, 0);
  opacity: 1;
  animation: recPulse 2.8s ease-out infinite;
  overflow: visible;
}
.rec .aura > span:nth-child(2) { animation-delay: .35s; }
.rec .aura > span:nth-child(3) { animation-delay: .7s; }
.rec-on { color: var(--recording); }
.rec-off { color: var(--muted); }

/* --- Mic-Status --- */
#mic-status.badge {
  gap: 6px;
  padding-left: 28px;
  position: relative;
}
#mic-status .ico { position: absolute; left: 8px; }
#mic-status.mic-off { color: var(--no-mic); }
#mic-status.ok { color: var(--ok); }

/* --- Diverse Statusklassen --- */
.loading { opacity: .7; pointer-events: none; }
/* .active { outline: 2px dashed var(--accent); outline-offset: 2px; } */

.bold{
  font-family: "Ihr Ausgefallene Schriftart", "Helvetica", sans-serif;
  font-weight: bold;
}
/* ===================================================================
   7. Utility-Klassen
   =================================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: 4px !important; }
.mt-8 { margin-top: 8px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-8 { margin-bottom: 8px !important; }
.p-0 { padding: 0 !important; }
.p-4 { padding: 4px !important; }
.p-8 { padding: 8px !important; }
.d-flex { display: flex !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.g-4 { gap: 4px !important; }
.g-8 { gap: 8px !important; }
.scroll { overflow: auto; }

/* ===================================================================
   8. Animationen
   =================================================================== */
@keyframes recPulse {
  0% { width: 8px; height: 8px; opacity: .35; }
  100% { width: 40px; height: 40px; opacity: 0; }
}

/* --- Platzhalter/Skeleton --- */
.placeholder {
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
  background-size: 200% 100%;
  animation: sh 1.2s linear infinite;
}
@keyframes sh {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* --- Tabellen --- */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

tr:nth-child(even) { background: var(--row-alt); }