/* ===================================================================
   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: #182624;           /* Tiefes Waldgrün, etwas wärmer */
  --fg: #e4ece6;           /* Weiches Naturweiß */
  --muted: #839b94;        /* Gedämpftes Salbeigrün */
  --card: #1f3530;         /* Karten: satter als bg, harmonisch */
  --accent: #e8874a;       /* Warmes Amber-Orange (Sonnenuntergang) */
  --grid: #2a4a43;         /* Subtiler Rand: sichtbar, aber nicht hart */

  /* Layout */
  --pad: 8px;
  --radius: 12px;

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

  /* Tabellen */
  --tbl-h: 32px;
  --tbl-b: #1a2e2a;       /* Waldgrün, passend zum Theme */
  --row-alt: rgba(255, 255, 255, 0.03);

  /* Badges */
  --badge-h: 32px;
  --badge-bg: #1a2e2a;    /* Wie Tabellen-Kopf */
  --badge-bd: #2a4a43;    /* Wie --grid */

  /* Progressbar */
  --prog-bg: #1a2e2a;
  --prog-fg: #4ade80;     /* Frisches Grün */

  /* Statusfarben — weicher, aber klar lesbar */
  --ok: #4ade80;
  --mid: #fbbf24;
  --high: #f87171;
  --no-mic: #f87171;
  --recording: #4ade80;

  /* Schatten — subtil und modern */
  --sh: 0 1px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .15);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8f0ea;           /* Sanftes Blattgrün-Weiß */
  --fg: #1a2a24;           /* Dunkles Waldgrün als Text */
  --muted: #5a7a6e;        /* Gedämpftes Grün */
  --card: #f4f8f5;         /* Fast-Weiß mit Grünstich */
  --accent: #d97834;       /* Warmes Orange, guter Kontrast */
  --grid: #c8d8ce;         /* Weicher Rand */
  --tbl-b: #dce8df;        /* Tabellenkopf */
  --badge-bg: #dce8df;
  --badge-bd: #c8d8ce;
  --prog-bg: #d0ddd3;
  --prog-fg: #2e9e5a;     /* Kräftiges Grün */
  --row-alt: rgba(0, 0, 0, 0.03);
  --sh: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
}

/* ===================================================================
   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: 8px;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.wrap.fullheight {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Scrollbarer Inhaltsbereich */
.content.scroll,
.content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.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: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  box-shadow: var(--sh);
}
header .bar .title { font-weight: 600; font-size: 1.2em; }
header .bar .spacer { flex: 1; }

footer,
.bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}
footer .badge,
.bottom-row .badge { background: var(--badge-bg); }

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

/* --- Karten --- */
.card {
  background: var(--card);
  padding: var(--pad);
  border-radius: var(--radius);
  border: 1px solid var(--grid);
  position: relative;
  transition: background-color .2s ease, border-color .3s ease;
  box-shadow: var(--sh);
}
.card.kpi {
  display: grid;
  grid-auto-flow: row;
  align-content: center;
  gap: 6px;
  padding: 10px;
  min-height: 88px;
}
.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 12px;
  border-radius: 999px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-bd);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.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: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
}
.tbl th {
  height: var(--tbl-h);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  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: 4px; border-bottom: 1px solid var(--grid); }
.tabs a {
  padding: 8px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.tabs a:hover { background: rgba(255,255,255,.05); }
.tabs a.active {
  border-color: var(--grid);
  border-bottom-color: transparent;
  background: var(--card);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--grid);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  min-height: 36px;
}
.btn:hover { border-color: var(--accent); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger {
  border-color: var(--high);
  color: var(--high);
}
.btn.danger:hover { background: var(--high); color: #fff; }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn.ghost:hover { color: var(--fg); border-color: var(--grid); }

/* --- 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'); }
.ico-humidity { mask-image: url('/static/icons/humidity-icon.svg'); }
.ico-wind { mask-image: url('/static/icons/wind-icon.svg'); }
.ico-cloud { mask-image: url('/static/icons/cloud-icon.svg'); }
.ico-bird { mask-image: url('/static/icons/bird-icon.svg'); }
.ico-question { mask-image: url('/static/icons/question-icon.svg'); }
.ico-speaker { mask-image: url('/static/icons/speaker-icon.svg'); }
.ico-sun { mask-image: url('/static/icons/sun-icon.svg'); }
.ico-rain { mask-image: url('/static/icons/rain-icon.svg'); }
.ico-snow { mask-image: url('/static/icons/snow-icon.svg'); }
.ico-fog { mask-image: url('/static/icons/fog-icon.svg'); }
.ico-thunder { mask-image: url('/static/icons/thunder-icon.svg'); }
.ico-theme { mask-image: url('/static/icons/theme-icon.svg'); }
.ico-disk { mask-image: url('/static/icons/disk-icon.svg'); }
.ico-swap { mask-image: url('/static/icons/swap-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;
}

/* --- Update-Notification am Menu-Button --- */
.menu-button { position: relative; }
.update-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: var(--danger, #e53935);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* --- Rec-Toggle in Bottom-Nav --- */
#rec-toggle {
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#rec-toggle.rec-on {
  background: var(--ok, #4caf50);
  color: #fff;
}
#rec-toggle.rec-off {
  background: var(--card, #1f3530);
  opacity: 0.6;
}
#rec-toggle.rec-off:hover { opacity: 0.9; }
#rec-toggle.rec-wait {
  background: var(--accent, #e8874a);
  color: #fff;
  opacity: 0.8;
  cursor: wait;
}

/* --- 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 var(--high);
  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 --- */
body { transition: opacity .3s ease; }
.loading { opacity: .55; 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); }

/* --- Category Icon Toggles (Dashboard + Viewport) --- */
.cat-icons { white-space: nowrap; text-align: left; }
.cat-icon {
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 4px;
  transition: opacity .15s, filter .15s;
  user-select: none;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
}
.cat-icon[data-cat="avian"]     { mask-image: url('/static/icons/bird-icon.svg'); }
.cat-icon[data-cat="non_local"] { mask-image: url('/static/icons/question-icon.svg'); }
.cat-icon[data-cat="non_avian"] { mask-image: url('/static/icons/speaker-icon.svg'); }
.cat-icon.on { opacity: 1; }
.cat-icon:not(.on) { opacity: .25; filter: grayscale(1); }
.cat-icon:hover { background: var(--grid); }
td.cat-cell { text-align: left; font-size: 1em; }

/* Desktop: Label + Icons inline */
.cat-toggles { white-space: nowrap; }

/* Mobile: Icons unter "Einordnung" in zweite Zeile */
@media (max-width: 600px) {
  th.cat-icons,
  th.cat {
    white-space: normal;
  }
  .cat-label,
  .cat-toggles {
    display: block;
  }
  .cat-toggles {
    margin-top: 2px;
  }
}

/* --- Detection Context Menu --- */
.det-ctx {
  position: fixed;
  z-index: 9999;
  background: var(--card-bg, #1e1e1e);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  min-width: 200px;
  padding: 4px 0;
  display: none;
}
.det-ctx.open { display: block; }
.det-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--fg, #eee);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.det-ctx-item:hover {
  background: rgba(255,255,255,0.08);
}
.det-ctx-item.danger { color: var(--danger, #e53935); }
.det-ctx-item.danger:hover { background: rgba(229,57,53,0.12); }
.det-dots {
  cursor: pointer;
  opacity: 0.4;
  padding: 2px 6px;
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}
.det-dots:hover { opacity: 0.8; }
.ctx-cell { width: 28px; padding: 0 2px !important; text-align: center; }