/* ===================================================================
   Family !Plan — Theme-Huelle
   CoreX / TiNi #Software
   -------------------------------------------------------------------
   Created:     2026-09-10
   Last Change: 2026-09-10

   WAS HIER STEHT UND WAS NICHT

   Hier: der Hintergrund, die Navigation, die Typografie — alles, was
   die SEITE betrifft und nicht die Familienseiten.

   Nicht hier: .task-card, .reward-card, .points-badge, die
   Akzentfarben. Die stehen in
   addon/modules/family_admin/assets/family-design.css und kommen mit
   dem Modul. Grund: resolveThemePath() deckt Addon-Vorlagen nicht ab,
   und ein Board, das nur unter EINEM Theme richtig aussieht, ist
   kaputt und nicht schlicht.

   Die Custom Properties (--fp-*) definiert das Design-System. Diese
   Datei benutzt sie und setzt sie NICHT neu — sonst gaebe es zwei
   Wahrheiten ueber die Hausfarbe. page_overall.html laedt deshalb das
   Design-System VOR dieser Datei.
   =================================================================== */


/* ==================================================================
   GRUNDFLAECHE
   ================================================================== */

html {
  background: var(--fp-bg, #f4f6fb);
  color-scheme: light;
  /* Auf iOS beim Ueberscrollen soll nicht Weiss durchblitzen. */
  -webkit-text-size-adjust: 100%;
}

body.fp-body {
  /* Bootstrap-Variablen umlegen, damit auch nicht umgestellte
     Kernseiten in derselben Welt stehen. */
  --bs-body-bg:          var(--fp-bg);
  --bs-body-color:       var(--fp-text);
  --bs-body-color-rgb:   30, 41, 59;
  --bs-emphasis-color:   var(--fp-text-strong);
  --bs-secondary-color:  var(--fp-text-soft);
  --bs-border-color:     var(--fp-border-soft);
  --bs-link-color:       var(--fp-accent);
  --bs-link-hover-color: var(--fp-accent);
  --bs-font-sans-serif:  var(--fp-font);

  font-family: var(--fp-font);
  color: var(--fp-text);
  background:
    radial-gradient(1200px 800px at 88% -8%,  var(--fp-bg-tint-a) 0%, transparent 62%),
    radial-gradient(1000px 700px at 4% 104%,  var(--fp-bg-tint-b) 0%, transparent 62%),
    radial-gradient(900px  620px at 52% 42%,  var(--fp-bg-tint-c) 0%, transparent 68%),
    var(--fp-bg);
  background-attachment: fixed;
  min-height: 100vh;
  /* Die Bottom-Navigation liegt fest ueber dem Inhalt — der braucht
     unten Platz, sonst ist die letzte Karte nicht erreichbar.
     safe-area fuer das Telefon ohne Rahmen. */
  padding-bottom: 0;
}
body.fp-has-bottomnav {
  padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

/* Der Inhaltsbereich. Auf grossen Bildschirmen begrenzt, damit das
   Board erfassbar bleibt. */
body.fp-body > .container-fluid {
  max-width: 1500px;
  padding-inline: clamp(0.85rem, 2.5vw, 2rem);
  padding-top: 1.25rem;
}

/* Ueberschriften: kraeftig, aber nicht riesig. */
body.fp-body h1, body.fp-body h2, body.fp-body h3,
body.fp-body h4, body.fp-body h5, body.fp-body h6 {
  letter-spacing: -.02em;
  font-weight: 680;
  color: var(--fp-text-strong);
}

/* Der Fokusring gilt fuer die ganze Seite. Auf einem Tablet, das
   Kinder bedienen, ist Tastaturbedienung selten — aber sie darf nicht
   unsichtbar sein. */
body.fp-body :focus-visible {
  outline: 3px solid rgba(var(--fp-accent-rgb), .45);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ==================================================================
   NAVIGATION — obere Leiste (ab Tablet)
   ================================================================== */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  margin: 0 0 1.5rem;
  padding: .55rem clamp(0.85rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--fp-border);
  box-shadow: 0 6px 26px rgba(30, 40, 70, .06);
}
.app-nav__inner {
  max-width: 1500px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--fp-text-strong);
  font-weight: 720;
  letter-spacing: -.02em;
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.app-nav__brand img { height: 30px; width: auto; display: block; }
.app-nav__mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(140deg, var(--fp-accent), rgba(var(--fp-accent-rgb), .68));
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 4px 14px rgba(var(--fp-accent-rgb), .30);
}

.app-nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.app-nav__list--right { margin-left: auto; }

/* Der Menuepunkt. Die aktive Flaeche ist Glas mit Akzent — nicht ein
   farbiger Balken, der mit dem Hintergrund konkurriert. */
.app-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--fp-touch, 44px);
  padding: .45rem .9rem;
  border-radius: var(--fp-radius-pill, 999px);
  text-decoration: none;
  color: var(--fp-text-soft);
  font-weight: 600;
  font-size: .93rem;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.app-nav__link:hover,
.app-nav__link:focus {
  background: rgba(var(--fp-accent-rgb), .09);
  color: var(--fp-accent);
}
.app-nav__item.active > .app-nav__link,
.app-nav__link.active {
  background: rgba(255, 255, 255, .85);
  color: var(--fp-accent);
  box-shadow: 0 2px 10px rgba(30, 40, 70, .08),
              inset 0 0 0 1px rgba(var(--fp-accent-rgb), .18);
}
.app-nav__link .glyphicons,
.app-nav__link .fa,
.app-nav__link .fas { font-size: .95em; }

/* Aufklappende Untermenues bleiben Bootstrap-Dropdowns — nur die
   Flaeche wird ersetzt. */
.app-nav .dropdown-menu {
  border-radius: var(--fp-radius, 24px);
  border: 1px solid var(--fp-border);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 52px rgba(30, 40, 70, .14);
  padding: .5rem;
  margin-top: .5rem;
}
.app-nav .dropdown-item {
  border-radius: var(--fp-radius-sm, 16px);
  padding: .55rem .8rem;
  font-weight: 550;
  color: var(--fp-text);
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-nav .dropdown-item:hover,
.app-nav .dropdown-item:focus {
  background: rgba(var(--fp-accent-rgb), .10);
  color: var(--fp-accent);
}

/* Der Umschalter fuer schmale Bildschirme, falls die obere Leiste
   dort doch gebraucht wird (Verwaltungsseiten mit vielen Punkten). */
.app-nav__toggle {
  margin-left: auto;
  width: var(--fp-touch, 44px);
  height: var(--fp-touch, 44px);
  border: 1px solid var(--fp-border);
  background: rgba(255, 255, 255, .7);
  border-radius: 14px;
  display: none;
  place-items: center;
  color: var(--fp-text);
}
.app-nav__collapse { display: contents; }


/* ==================================================================
   NAVIGATION — Bottom-Navigation (Telefon)
   ================================================================== */

.app-nav--bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  display: none;
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--fp-border);
  box-shadow: 0 -6px 28px rgba(30, 40, 70, .10);
}
.app-nav--bottom ul {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34rem;
  margin-inline: auto;
}
.app-nav--bottom li { flex: 1 1 0; min-width: 0; }
.app-nav--bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  /* Das Fingerziel: 56 statt 44, weil hier Kinder im Vorbeigehen
     tippen und der Rand des Bildschirms schwer zu treffen ist. */
  min-height: 56px;
  padding: .3rem .2rem;
  border-radius: 16px;
  text-decoration: none;
  color: var(--fp-text-dim);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: background-color .18s ease, color .18s ease;
}
.app-nav--bottom a > span:first-child {
  font-size: 1.28rem;
  line-height: 1;
}
.app-nav--bottom a:active { background: rgba(var(--fp-accent-rgb), .12); }
.app-nav--bottom li.active a,
.app-nav--bottom a.active {
  color: var(--fp-accent);
  background: rgba(var(--fp-accent-rgb), .12);
}
.app-nav--bottom .app-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}


/* ==================================================================
   UMSCHALTPUNKTE
   ------------------------------------------------------------------
   Eine Navigation je Bildschirmgroesse, nie beide. Der Umschaltpunkt
   liegt bei 768px: darunter Bottom-Navigation, darueber die obere
   Leiste. Das Tablet gehoert ausdruecklich zur oberen Leiste — dort
   ist der Daumen nicht am unteren Rand, sondern das Geraet steht.
   ================================================================== */

@media (max-width: 767.98px) {
  .app-nav        { display: none; }
  .app-nav--bottom { display: block; }

  body.fp-body > .container-fluid { padding-top: 1rem; }

  /* Ohne obere Leiste fehlt die Marke — sie steht dann in der Seite
     selbst (siehe .fp-greeting im Design-System). */
}

@media (min-width: 768px) {
  .app-nav--bottom { display: none; }
}

/* Sehr schmal UND obere Leiste sichtbar (Verwaltung im Querformat auf
   einem kleinen Tablet): dann klappt sie ein. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .app-nav__list--right .app-nav__label { display: none; }
  .app-nav__list--right .app-nav__link  { padding-inline: .7rem; }
}


/* ==================================================================
   DRUCK
   ------------------------------------------------------------------
   Glas und Farbverlaeufe auf Papier sind grauer Schleier. Der
   Wochenplan am Kuehlschrank ist ein echter Anwendungsfall.
   ================================================================== */

@media print {
  body.fp-body {
    background: #fff !important;
    padding-bottom: 0 !important;
  }
  .app-nav, .app-nav--bottom, .fp-toast, .fp-confetti { display: none !important; }
  .glass-card, .task-card, .reward-card, .progress-card, .glass-panel {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .fp-stage::before, .fp-stage::after { display: none !important; }
}


/* ==================================================================
   RUECKFALL: kein backdrop-filter
   ------------------------------------------------------------------
   Firefox unter alten Fassungen und jeder Browser mit abgeschalteter
   Beschleunigung. Ohne diese Regel liegt halbdurchsichtiges Weiss auf
   dem Farbverlauf — und der Text darauf ist schlecht lesbar. Dann
   lieber deckend.
   ================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-nav, .app-nav--bottom { background: rgba(255, 255, 255, .96); }
  .glass-card, .task-card, .reward-card, .progress-card,
  .points-wallet, .fp-toast, .app-nav .dropdown-menu {
    background: rgba(255, 255, 255, .94) !important;
  }
  .glass-panel { background: rgba(255, 255, 255, .78) !important; }
}