/* KIES-Produktlogo als navbar-brand auf den klassischen Identity-Seiten (Login/Register/2FA/etc.,
   siehe Views/Shared/_Layout.cshtml). Nachtrag 2026-09-23 (Hardys neues Logo + Markenanmeldung
   "KIES KI-Evidenz-System") - Pendant zu .appbar-logo unten (Blazor-AppBar, MainLayout.razor),
   eigene Klasse nur wegen der leicht abweichenden Höhe/Navbar-Kontext. */
.navbar-kies-logo {
  height: 32px;
  width: auto;
}

/* BKData-Logo in der Bootstrap-Navbar der ASP.NET-Core-Identity-Seiten (Login/Register/2FA/etc.,
   siehe Views/Shared/_Layout.cshtml) - eigenständig von .bkdata-logo (Blazor-Seiten, MainLayout.razor),
   da hier keine fixierte AppBar existiert und die Navbar selbst schon "position: relative" ist. */
.navbar-bkdata-logo {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  height: 28px;
  width: auto;
  z-index: 1;
}

/* Reserviert rechts Platz für das absolut positionierte Logo, damit "Registrieren"/"Anmelden"
   (bzw. "Hallo .../Abmelden" im angemeldeten Zustand, siehe _LoginPartial.cshtml) nicht mehr
   darunter verschwinden (Korrektur 2026-09-19, Hardys Rückmeldung "Logo überlagert das Menü"). */
.navbar-with-logo {
  padding-right: 130px;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Sticky-Navigation auf den Detailseiten (Bots/Customers/UseCases), siehe
   Components/Shared/StickyDetailHeader.razor.
   Korrektur (2026-09-18): "top: 0" war falsch und sorgte dafür, dass die Leiste beim Scrollen
   kurz sichtbar wurde und dann wieder verschwand. Ursache: MudBlazors AppBar ist selbst
   "position: fixed; top: 0" (siehe .mud-appbar-fixed-top in MudBlazor.min.css) und damit aus dem
   normalen Fluss heraus - das padding-top von MudMainContent bestimmt zwar die anfängliche
   Position im Fluss, aber NICHT die Sticky-Auslöseschwelle. Die wird immer relativ zum
   Scroll-Container (hier: dem Browser-Fenster, also y=0) berechnet. Sobald man scrollt, "klebt"
   das Element also exakt bei y=0 fest - direkt hinter der AppBar, die einen deutlich höheren
   z-index hat (--mud-zindex-appbar) und es dadurch komplett verdeckt. Fix: top auf die tatsächliche
   AppBar-Höhe setzen (--mud-appbar-height, von MudBlazor global gesetzt), damit die Leiste beim
   Kleben direkt UNTER der AppBar stehen bleibt statt dahinter zu verschwinden. */
.sticky-detail-header {
  position: sticky;
  top: var(--mud-appbar-height, 64px);
  z-index: 5;
  background-color: var(--mud-palette-background);
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Ampel-Indikator vor jeder Nachweis-Überschrift, siehe Components/Shared/EvidenceAmpel.razor. */
.ampel-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* BKData-Logo oben rechts im Inhaltsbereich (auf jeder Seite gleich, siehe MainLayout.razor).
   Korrektur (2026-09-19): "top: 16px" war zu wenig und sorgte dafür, dass das Logo unsichtbar
   war - derselbe Effekt wie beim Sticky-Leisten-Bug (siehe .sticky-detail-header oben): Für ein
   absolut positioniertes Element wird "top" ab der Padding-Kante des positionierten Elternteils
   gemessen, NICHT ab dessen sichtbarem Innenbereich nach Abzug von padding-top. Fix: top um die
   tatsächliche AppBar-Höhe ergänzt, exakt wie schon beim sticky-detail-header-Fix.
   Korrektur (2026-09-19, Hardys Wunsch "sticky"): von position: absolute (scrollt mit der Seite
   mit, verschwindet also nach dem ersten Scrollen) auf position: fixed umgestellt - damit ist
   die Position IMMER relativ zum sichtbaren Browserfenster (Viewport), unabhängig vom
   Elternelement, und das Logo bleibt beim Scrollen dauerhaft sichtbar oben rechts stehen, wie
   die (ebenfalls fixierte) MudAppBar selbst. */
.bkdata-logo {
  position: fixed;
  top: calc(var(--mud-appbar-height, 64px) + 16px);
  right: 24px;
  height: 32px;
  width: auto;
  z-index: 1;
}

/* KIES-Produktlogo in der Blazor-AppBar (MainLayout.razor), ersetzt den reinen Text-Brand-Link.
   Nachtrag 2026-09-23 (Hardys neues Logo + Markenanmeldung "KIES KI-Evidenz-System") - Pendant
   zu .navbar-kies-logo oben (klassische Identity-Seiten). */
.appbar-logo {
  height: 40px;
  width: auto;
}

/* Große Ampel-Kachel im linken Seitenrand, siehe Components/Shared/AreaProgressTile.razor.
   Spiegelbildlich zu .bkdata-logo positioniert (gleiche top-Berechnung, gleiches
   position:fixed-Prinzip - links statt rechts, mit demselben AppBar-Höhen-Offset und
   demselben "bleibt beim Scrollen stehen"-Verhalten wie das Logo (Hardys Wunsch "sticky",
   2026-09-19).
   Einklappbar (Korrektur 2026-09-19, Hardys Wunsch): auf schmaleren Fenstern reicht der Rand
   links neben der Stammdaten-Karte oft nicht aus - statt die Kachel dort komplett auszublenden
   (frühere Lösung), kann sie jetzt per Klick auf das Minus/Plus-Symbol
   (.area-progress-tile-toggle) in eine kompakte Farb-Badge mit nur der Prozentzahl eingeklappt
   werden (.area-progress-tile-collapsed), die deutlich schmaler ist und kaum noch Platz braucht. */
.area-progress-tile {
  position: fixed;
  top: calc(var(--mud-appbar-height, 64px) + 16px);
  left: 24px;
  width: 168px;
  padding: 12px;
  padding-top: 32px;
  background-color: var(--mud-palette-background);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 8px;
  text-align: center;
  z-index: 1;
  transition: width 0.15s ease;
}

.area-progress-tile-collapsed {
  width: 44px;
  padding: 6px;
}

.area-progress-tile-toggle {
  position: absolute !important;
  top: 2px;
  right: 2px;
}

.area-progress-tile-title {
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--mud-palette-text-secondary);
}

.area-progress-ring {
  width: 120px;
  height: 120px;
}

.area-progress-ring-text {
  font-size: 22px;
  font-weight: 600;
  fill: var(--mud-palette-text-primary);
}

.area-progress-tile-caption {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 4px;
}

/* Mehrsegment-Ring-Kacheln auf dem Dashboard, siehe Components/Shared/ComplianceDonutTile.razor
   und Components/Pages/Dashboard.razor (Hardys Vorgabe 2026-09-19: "Dashboard sollte alle Ampel
   Kacheln wie im dsm-online enthalten"). Gleiche Ring-Maße wie .area-progress-ring, da optisch
   dieselbe Bauart (SVG-Donut mit zentrierter Prozentzahl) - eigener Klassenname, weil hier
   mehrere farbige Segmente statt eines einzelnen Fortschrittsbogens gezeichnet werden. */
.compliance-donut-ring {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0 auto;
}

.compliance-donut-ring-text {
  font-size: 22px;
  font-weight: 600;
  fill: var(--mud-palette-text-primary);
}

/* Kompakte Badge im eingeklappten Zustand: nur Prozentzahl, farbig nach Ampel-Status. Selbst
   klickbar (statt eines separaten Plus-Buttons), damit sie in der 44px schmalen eingeklappten
   Kachel nicht mit einem zusätzlichen Toggle-Icon um den Platz konkurriert. */
.area-progress-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

/* ===== Mobile-Anpassungen (2026-09-24, Hardys Rückmeldung nach erstem Test auf dem Handy) =====
   Breite statt Gerät-spezifisch (kein iOS-Sniffing) - Hardys Nachfrage "es gibt ja noch die
   nicht iPhone Handys" bestätigt: diese Regeln gelten für jeden schmalen Viewport, egal ob
   iPhone, Android oder ein schmal gezogenes Desktop-Fenster. Breakpoint 960px = MudBlazors
   eigener sm/md-Breakpoint (siehe Breakpoint.Sm), damit sich das konsistent zu MudBlazors
   eigenem responsivem Verhalten anfühlt.

   Drei Punkte aus Hardys Test:
   1. Die fixierte Ampel-Kachel oben links (.area-progress-tile) verdeckte auf dem schmalen
      Viewport gut die Hälfte des Bildschirms - "Der sticky Fortschritt oben links darf so
      nicht mehr dargestellt werden [...] Besser: auf dem Handy nur als farbigen Punkt
      darstellen, nicht sticky". Siehe .area-progress-tile-mobile-dot in
      Components/Shared/AreaProgressTile.razor.
   2. Das Hauptmenü (zehn MudButtons in einer Zeile) muss als aufklappbares "iPhone-Menü" oben
      rechts erscheinen, siehe Components/Layout/NavMenu.razor
      (.navmenu-desktop/.navmenu-mobile-toggle/.navmenu-mobile-logout).
   3. Das fixierte BKData-Logo (.bkdata-logo) muss auf dem Handy ganz verschwinden. */
@media (max-width: 959.98px) {
  /* Punkt 1: Kachel -> normaler Textfluss statt fixiert, nur noch der kleine Punkt sichtbar. */
  .area-progress-tile {
    position: static;
    width: auto;
    padding: 4px 0;
    margin-bottom: 8px;
    background: none;
    border: none;
    text-align: left;
  }

  .area-progress-tile-title,
  .area-progress-ring,
  .area-progress-tile-caption {
    display: none;
  }

  .area-progress-tile-mobile-dot {
    display: inline-block !important;
  }

  /* Punkt 2: Button-Leiste aus, Hamburger-Menü-Button an. */
  .navmenu-desktop {
    display: none;
  }

  .navmenu-mobile-toggle {
    display: inline-flex !important;
  }

  /* Punkt 3: BKData-Logo komplett ausblenden. */
  .bkdata-logo {
    display: none;
  }
}

/* Grundzustand (Desktop, >= 960px): Punkt farbig, aber unsichtbar (erst die Media Query oben
   blendet ihn ein) - siehe AreaProgressTile.razor für die Farblogik. */
.area-progress-tile-mobile-dot {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* Grundzustand (Desktop): Hamburger-Button unsichtbar - erst die Media Query oben blendet ihn
   anstelle der Button-Leiste ein. */
.navmenu-mobile-toggle {
  display: none;
}

/* Menüeintrag-Optik für den Logout-Button im mobilen MudMenu (siehe NavMenu.razor-Kommentar
   dort) - nachgebildet an MudBlazors eigene .mud-list-item-Innenabstände, damit er sich
   optisch nicht von den umgebenden MudMenuItems unterscheidet. */
.navmenu-mobile-logout {
  display: block;
  width: 100%;
  padding: 6px 16px;
  border: none;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.navmenu-mobile-logout:hover {
  background-color: var(--mud-palette-action-default-hover);
}

/* Nachtrag 2026-09-25, Hardys Vorgabe: auf der öffentlichen Eingangsseite (Landing.razor,
   Hero-Bereich) ersetzt das große Logo den reinen Markentext "KIES KI-Evidenz-System" (Text
   ist bereits im Logo enthalten). max-width statt fester width, damit es auf schmalen
   Bildschirmen (siehe Task 56 Mobile-Fixes) nicht über den Viewport hinausragt. */
.landing-hero-logo {
  height: 120px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 599.98px) {
  .landing-hero-logo {
    height: 72px;
  }
}

/* Nachtrag 2026-09-25, Hardys Vorgabe ("Die neue Login Seite muss noch auch für iPhone Maße
   angepasst werden"): auf schmalen Bildschirmen (Handys, nicht auf ein bestimmtes Modell
   beschränkt) blendet das BKData-Logo in der klassischen Bootstrap-Navbar der Identity-Seiten
   (Login/LoginWith2fa/LoginWithRecoveryCode/Register/etc., siehe _Layout.cshtml) aus - analog
   zum bereits auf den Blazor-Seiten (.bkdata-logo, siehe oben) umgesetzten Wunsch, das Logo
   nicht mit dem eigentlichen Seiteninhalt (hier: KIES-Logo + Hamburger-Toggler) konkurrieren
   zu lassen. .navbar-with-logo reserviert dafür sonst pauschal 130px rechts - ohne Logo wird
   dieser Platz wieder freigegeben, statt auf schmalen Screens ungenutzt zu verpuffen. Bewusst
   dieselbe 959.98px-Schwelle wie bei den übrigen Mobile-Anpassungen dieser App (siehe Task 56
   oben) - kein iPhone-spezifischer Wert, gilt für jedes schmale Gerät. */
@media (max-width: 959.98px) {
  .navbar-bkdata-logo {
    display: none;
  }
  .navbar-with-logo {
    padding-right: 0;
  }
}