/* Seniorenfreundliche Grundgröße (docs/concept/usability-and-accessibility.md, "Große, gut lesbare Schrift") */
html {
  font-size: 18px;
}

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

body {
  line-height: 1.6;
}

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Große Bedienelemente für eingeschränkte Feinmotorik (docs/concept/usability-and-accessibility.md, "Große Bedienelemente") */
.btn {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.25rem;
}

.form-control, .form-select {
  min-height: 3rem;
}

/* Icon+Text action buttons (docs/concept/usability-and-accessibility.md, "Bebilderte Buttons mit eindeutiger Symbolik") */
/* Base size constraint applies everywhere .icon-inline is used, not just inside buttons, to prevent unconstrained SVGs from breaking the layout. */
.icon-inline {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  fill: currentColor;
  flex-shrink: 0;
}

.btn .icon-inline {
  margin-right: 0.4rem;
}
.footer-notifications {
  position: fixed;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-notification {
  background-color: #212529;
  color: #fff;
  padding: 0.4rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  opacity: 0.95;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

.footer-notifications-history-link {
  background-color: #495057;
  color: #fff;
  padding: 0.3rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  text-decoration: none;
  align-self: flex-start;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

.footer-notifications-history-link:hover {
  background-color: #343a40;
  color: #fff;
}

/* ===========================================================================
   Pastellfarb-Palette (docs/concept/usability-and-accessibility.md, "Große, gut
   lesbare Schrift": Kontrast gegen WCAG AA geprüft). Ersetzt das reine
   Weiß-auf-Weiß des Bootstrap-Standards durch dezente, warme Flächenfarben,
   ohne die Textkontraste zu verschlechtern - der Fließtext bleibt auf nahezu
   weißem Grund, Farbe wird nur für Flächen, Ränder und Akzente eingesetzt.
   Jedes Modul (Mitglieder/Kassenbuch/Fahrten/Berichte) bekommt eine eigene,
   wiedererkennbare Akzentfarbe (docs/concept/usability-and-accessibility.md,
   "Konsistente Bedienmuster").
   =========================================================================== */
:root {
  --kc-bg: #f7f6fc;
  --kc-surface: #ffffff;
  --kc-border: #e3dff0;
  --kc-text: #262433;
  --kc-muted: #6b6580;

  --kc-primary: #3d6eb4;
  --kc-primary-dark: #2c5590;
  --kc-primary-tint: #e8f0fb;

  --kc-mitglieder: #2f7a57;
  --kc-mitglieder-tint: #e7f6ef;
  --kc-mitglieder-border: #a9d9c2;

  --kc-kassenbuch: #8a5a15;
  --kc-kassenbuch-tint: #fdf3e1;
  --kc-kassenbuch-border: #e6c383;

  --kc-fahrten: #2c5490;
  --kc-fahrten-tint: #e9f1fc;
  --kc-fahrten-border: #a9c6ea;

  --kc-berichte: #6b3f87;
  --kc-berichte-tint: #f3eafa;
  --kc-berichte-border: #cfaee0;

  --bs-primary: var(--kc-primary);
  --bs-primary-rgb: 61, 110, 180;
  --bs-link-color: var(--kc-primary-dark);
  --bs-link-color-rgb: 44, 85, 144;
  --bs-link-hover-color: #21426f;
  --bs-body-bg: var(--kc-bg);
  --bs-body-color: var(--kc-text);
  --bs-border-color: var(--kc-border);
}

body {
  background-color: var(--kc-bg);
}

.btn-primary {
  --bs-btn-bg: var(--kc-primary);
  --bs-btn-border-color: var(--kc-primary);
  --bs-btn-hover-bg: var(--kc-primary-dark);
  --bs-btn-hover-border-color: var(--kc-primary-dark);
  --bs-btn-active-bg: var(--kc-primary-dark);
  --bs-btn-active-border-color: var(--kc-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--kc-primary-dark);
  --bs-btn-border-color: var(--kc-primary);
  --bs-btn-hover-bg: var(--kc-primary);
  --bs-btn-hover-border-color: var(--kc-primary);
}

.btn-outline-secondary:hover {
  background-color: var(--kc-bg);
}

/* Kacheln/Karten bekommen abgerundete Ecken und einen weichen Schatten statt
   scharfer, weißer Kanten - macht die Fläche greifbarer, ohne den Kontrast
   des Inhalts zu verändern. */
.card {
  border-color: var(--kc-border);
  border-radius: 0.85rem;
  box-shadow: 0 2px 10px rgba(70, 60, 110, 0.06);
}

.card-title {
  color: var(--kc-text);
}

/* Dashboard-Widgets (docs/concept/ui-and-realtime.md, "Widget-Typen") erhalten
   je nach zugehörigem Modul einen farbigen oberen Rand zur schnelleren
   Orientierung, welches Thema eine Kachel betrifft. */
.widget-card {
  border-top: 4px solid var(--kc-border);
}

.widget-card[data-widget-category="Mitglieder"] { border-top-color: var(--kc-mitglieder-border); }
.widget-card[data-widget-category="Kassenbuch"] { border-top-color: var(--kc-kassenbuch-border); }
.widget-card[data-widget-category="Fahrten"] { border-top-color: var(--kc-fahrten-border); }
.widget-card[data-widget-category="Berichte"] { border-top-color: var(--kc-berichte-border); }

/* Listenmenüs der Modul-Startseiten (z. B. Kassenbuch-Übersicht, Berichte-Übersicht):
   statt schmucklosen, aneinandergereihten Zeilen wirken die Einträge als
   eigenständige, klickbare Kacheln mit Symbol, Abstand und Hover-Rückmeldung. */
.module-list {
  gap: 0.6rem;
  display: flex;
  flex-direction: column;
}

.module-list .list-group-item {
  border: 1px solid var(--kc-border);
  border-radius: 0.65rem !important;
  background-color: var(--kc-surface);
  padding: 1rem 1.25rem;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}

.module-list .list-group-item:hover,
.module-list .list-group-item:focus {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(70, 60, 110, 0.1);
}

.module-list-kassenbuch .list-group-item { border-left: 5px solid var(--kc-kassenbuch-border); }
.module-list-kassenbuch .list-group-item:hover { background-color: var(--kc-kassenbuch-tint); }
.module-list-kassenbuch .list-group-item .icon-inline { color: var(--kc-kassenbuch); }

.module-list-berichte .list-group-item { border-left: 5px solid var(--kc-berichte-border); }
.module-list-berichte .list-group-item:hover { background-color: var(--kc-berichte-tint); }
.module-list-berichte .list-group-item .icon-inline { color: var(--kc-berichte); }

/* Kopfzeile: dezenter, pastellfarbener Verlauf statt reinem Weiß, damit sich
   die Navigation optisch von der Seitenfläche abhebt. */
.navbar.bg-white {
  background: linear-gradient(120deg, #eef3fd 0%, #f6f0fb 100%) !important;
  border-bottom-color: var(--kc-border) !important;
}

.navbar .navbar-brand {
  color: var(--kc-text);
  font-weight: 600;
}

/* Aktives Modul in der Navigation hervorheben (docs/concept/usability-and-accessibility.md,
   "Klare, reduzierte Navigation") - ungeübte Nutzer sehen so jederzeit, wo sie sich befinden. */
.navbar-nav .nav-link.active {
  background-color: var(--kc-primary-tint);
  color: var(--kc-primary-dark) !important;
  border-radius: 999px;
  font-weight: 600;
}

.navbar-nav .nav-link {
  border-radius: 999px;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

/* Tabellen: dezente Pastell-Streifen statt Grau, angenehmere Kopfzeile. */
.table {
  --bs-table-striped-bg: #f3f1fa;
}

.table > thead {
  background-color: var(--kc-bg);
}

/* Entwicklungs-Vorschau-Banner (Application/Security/DevTenantPreviewContext.cs):
   deutlich sichtbar, damit nie unklar ist, dass der Hauptadministrator gerade
   probeweise als Mandant unterwegs ist. Nur in der Entwicklungsumgebung sichtbar. */
.dev-preview-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background-color: var(--kc-kassenbuch-tint);
  color: #5a3c0e;
  border-bottom: 1px solid var(--kc-kassenbuch-border);
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
}

.dev-preview-banner .icon-inline {
  color: var(--kc-kassenbuch);
}

/* Kontrastreiche Darstellung, per Benutzer umschaltbar (docs/concept/usability-and-accessibility.md,
   "Große, gut lesbare Schrift": "gegen anerkannte Kontrast-Richtwerte (WCAG AA) geprüft"). Applied
   as a class on <html> so it can be toggled at runtime (see wwwroot/js/site.js) and remembered
   across visits (localStorage), in addition to reacting to the OS-level prefers-contrast setting
   the first time a user visits. */
@media (prefers-contrast: more) {
  html:not(.high-contrast-off):not(.high-contrast) {
    --bs-body-color: #000;
    --bs-body-bg: #fff;
    --bs-link-color: #0000cc;
    --bs-link-hover-color: #000099;
  }
}

html.high-contrast {
  --bs-body-color: #000;
  --bs-body-bg: #fff;
  --bs-link-color: #0000cc;
  --bs-link-hover-color: #000099;
}

html.high-contrast body {
  background-color: #fff;
  color: #000;
}

html.high-contrast .btn-primary {
  background-color: #003366;
  border-color: #003366;
  color: #fff;
}

html.high-contrast .btn-outline-secondary,
html.high-contrast .btn-outline-primary {
  border-width: 2px;
  color: #000;
  border-color: #000;
}

html.high-contrast .form-control,
html.high-contrast .form-select {
  border: 2px solid #000;
}

html.high-contrast .card,
html.high-contrast .table {
  border: 1px solid #000;
}

html.high-contrast a {
  text-decoration: underline;
}

/* Pastell-Akzente entfallen im Kontrastmodus zugunsten reinem Schwarz/Weiß. */
html.high-contrast .navbar.bg-white {
  background: #fff !important;
  border-bottom: 1px solid #000 !important;
}

html.high-contrast .widget-card,
html.high-contrast .module-list .list-group-item {
  border-color: #000 !important;
  border-left-width: 1px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

html.high-contrast .navbar-nav .nav-link.active {
  background-color: transparent;
  color: #000 !important;
  text-decoration: underline;
  font-weight: 700;
}

html.high-contrast .dev-preview-banner {
  background-color: #fff;
  color: #000;
  border-bottom: 2px solid #000;
}

html.high-contrast .table {
  --bs-table-striped-bg: #f0f0f0;
}