/* Sevenridge – App-spezifische Komponenten über Bootstrap 5.
   Farben, Schriften und Bootstrap-Variablen kommen ausschließlich aus sevenridge-tokens.css
   (abgeleitet aus ci/ci/brand/tokens.json). Hier keine Hex-Werte außer Palette. */

/* Buttons */
.btn-outline-primary {
  --bs-btn-color: var(--sr-leaf);
  --bs-btn-border-color: var(--sr-leaf);
  --bs-btn-hover-color: var(--sr-white);
  --bs-btn-hover-bg: var(--sr-leaf);
  --bs-btn-hover-border-color: var(--sr-leaf);
  --bs-btn-active-color: var(--sr-white);
  --bs-btn-active-bg: var(--sr-deep-ridge);
  --bs-btn-active-border-color: var(--sr-deep-ridge);
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--sr-sprout);
  --bs-btn-border-color: var(--sr-sprout);
  --bs-btn-hover-color: var(--sr-deep-ridge);
  --bs-btn-hover-bg: var(--sr-sprout);
  --bs-btn-hover-border-color: var(--sr-sprout);
  --bs-btn-active-color: var(--sr-deep-ridge);
  --bs-btn-active-bg: var(--sr-mesa-sand);
}
.text-success, .text-primary { color: var(--sr-leaf) !important; }
[data-bs-theme="dark"] .text-success,
[data-bs-theme="dark"] .text-primary { color: var(--sr-sprout) !important; }
.bg-success { background-color: var(--sr-leaf) !important; }

/* Neutrale Badges (text-bg-light) in Palettenfarben, im Dunkelmodus nicht grell */
.text-bg-light { color: var(--sr-deep-ridge) !important; background-color: var(--sr-mesa-sand) !important; }
[data-bs-theme="dark"] .text-bg-light { color: var(--sr-mesa-sand) !important; background-color: var(--bs-tertiary-bg) !important; }

/* Marken-Navbar (immer Deep Ridge, Logo negativ) */
.gc-navbar { background-color: var(--sr-deep-ridge); }
[data-bs-theme="dark"] .gc-navbar { border-bottom: 1px solid var(--bs-border-color); }
.gc-navbar .navbar-brand,
.gc-navbar .nav-link,
.gc-navbar .navbar-text { color: var(--sr-mesa-sand); }
.gc-navbar .nav-link.active { color: var(--sr-sprout); font-weight: 600; }
.gc-navbar :where(a, button, select):focus-visible { outline-color: var(--sr-sprout); }
.sr-logo { display: block; height: 22px; width: auto; }
.sr-logo-icon { display: block; height: 32px; width: 32px; }

/* Logo-Variante je Modus (Login-Karte, Ladeanzeige) */
.sr-logo-dark { display: none; }
[data-bs-theme="dark"] .sr-logo-light { display: none; }
[data-bs-theme="dark"] .sr-logo-dark { display: block; }

/* Sidebar (Desktop) */
.gc-sidebar { min-width: 200px; }
.gc-sidebar .nav-link {
  color: var(--bs-secondary-color);
  border-radius: var(--sr-radius-card);
  margin-bottom: 2px;
}
.gc-sidebar .nav-link.active {
  background-color: var(--sr-mesa-sand);
  color: var(--sr-deep-ridge);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sr-leaf);
}
[data-bs-theme="dark"] .gc-sidebar .nav-link.active {
  background-color: var(--bs-tertiary-bg);
  color: var(--sr-sprout);
  box-shadow: inset 3px 0 0 var(--sr-sprout);
}
.gc-sidebar .nav-link i { width: 1.25rem; }

/* Mobile Bottom-Nav */
.gc-bottomnav {
  position: sticky;
  bottom: 0;
  z-index: 1030;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
}
.gc-bottomnav a {
  flex: 1;
  text-align: center;
  padding: .4rem 0;
  font-size: .7rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.gc-bottomnav a.active { color: var(--sr-leaf); font-weight: 600; }
[data-bs-theme="dark"] .gc-bottomnav a.active { color: var(--sr-sprout); }
.gc-bottomnav a i { display: block; font-size: 1.1rem; }

/* Sensor-/Aktor-Kacheln – Messwerte in JetBrains Mono, tabellarische Ziffern */
.gc-metric { background: var(--bs-tertiary-bg); border-radius: var(--sr-radius-card); padding: .75rem 1rem; }
.gc-metric .label { font-size: .75rem; color: var(--bs-secondary-color); }
.gc-metric .value {
  font-family: var(--sr-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--sr-leaf);
}
[data-bs-theme="dark"] .gc-metric .value { color: var(--sr-sprout); }

/* Status-Punkte (Geräte-/Sensor-Status, Contract §9/§5.1).
   Farben laut Addendum B4 (OK Leaf/Sprout, Warnung Dusk Amber, Alarm Rot vorläufig, neutral Stone);
   der Status steht immer zusätzlich als Text daneben. */
.gc-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; }
.gc-dot.online, .gc-dot.ok { background: var(--bs-success); }
.gc-dot.offline, .gc-dot.absent { background: var(--bs-warning); }
.gc-dot.error { background: var(--bs-danger); }
.gc-dot.disabled, .gc-dot.provisioning { background: var(--bs-secondary); }
[data-bs-theme="dark"] .gc-dot.online, [data-bs-theme="dark"] .gc-dot.ok { background: var(--sr-sprout); }

/* Bereichsfarben (VPD-Ampel, Bodenfeuchte) – Addendum B4/B5. Fläche + passende Textfarbe je Modus;
   der Bereich steht immer zusätzlich als Text daneben (Badge, title, visually-hidden). */
.gc-zone-info  { background: var(--sr-stone); color: var(--sr-white); }
.gc-zone-ok    { background: var(--sr-leaf); color: var(--sr-white); }
.gc-zone-ok2   { background: var(--sr-deep-ridge); color: var(--sr-white); }
.gc-zone-warn  { background: var(--sr-dusk-amber); color: var(--sr-deep-ridge); }
.gc-zone-alarm { background: var(--bs-danger); color: var(--sr-white); }
.gc-zone-none  { background: var(--bs-border-color); color: var(--bs-body-color); }
[data-bs-theme="dark"] .gc-zone-info { background: var(--sr-dark-text-muted); color: var(--sr-deep-ridge); }
[data-bs-theme="dark"] .gc-zone-ok   { background: var(--sr-sprout); color: var(--sr-deep-ridge); }
[data-bs-theme="dark"] .gc-zone-ok2  { background: var(--sr-mist); color: var(--sr-deep-ridge); }

/* Demo-Modus-Markierung */
.gc-demo-banner { background: var(--sr-mesa-sand); color: var(--sr-deep-ridge); }
[data-bs-theme="dark"] .gc-demo-banner { background: var(--bs-tertiary-bg); color: var(--sr-mesa-sand); }

/* Tag/Nacht-Achse im Profil-Editor (Nacht Deep Ridge, Tag Dusk Amber – rein dekorativ) */
.gc-daynight { position: relative; height: 30px; border-radius: var(--sr-radius-card); overflow: hidden; background: var(--sr-deep-ridge); }
[data-bs-theme="dark"] .gc-daynight { box-shadow: inset 0 0 0 1px var(--bs-border-color); }
.gc-daynight .day { position: absolute; top: 0; bottom: 0; background: var(--sr-dusk-amber); }
.gc-axis { position: relative; height: 16px; font-size: .65rem; color: var(--bs-secondary-color); }
.gc-axis span { position: absolute; }