/* ============================================================
   WISSen — Shell layout: app bar, main, bottom nav, login, toast
   ============================================================ */

/* ============================================================
   App bar
   ============================================================ */
.m-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(var(--appbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: 8px;
  padding-right: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15,17,21,.82);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid var(--border-soft);
}
.m-appbar__logo {
  width: 32px; height: 32px;
  display: block;
  border-radius: 8px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(110,168,254,.25));
}
.m-appbar__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--text-mute);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.m-appbar__icon:active { background: var(--surface-2); color: var(--text); }
.m-appbar__title {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Main content area
   ============================================================ */
.m-main {
  padding: 16px 14px calc(var(--bottomnav-h) + var(--safe-bot) + 32px);
}

/* Tab-Transition (Aktuell <-> Noten <-> Plan <-> Settings)
 *
 * Emil-Framework Begründung:
 * - Tabs werden 10-30x/Tag (bei Power-Usern >100x) gewechselt → Animation
 *   muss "drastically reduced" sein. 160ms statt der frueheren 220ms.
 * - Zweck ist Spatial-Consistency: dem Auge zeigen dass der Content sich
 *   tatsaechlich gewechselt hat, ohne den Speed zu opfern.
 * - Nur opacity + transform animieren (compositor-friendly, kein Layout-
 *   Reflow). translateY 4px ist gerade noch wahrnehmbar, aber nicht
 *   theatralisch wie ein 12-20px Slide.
 * - Easing: ease-out fuer "entering elements" → das Element kommt rein,
 *   verlangsamt sich und sitzt am Ende. Passt zu var(--ease) =
 *   cubic-bezier(.2,.7,.2,1) (linear/raycast-style).
 *
 * Trigger: Klasse wird im Router (mobile.js → route()) nach dem
 * View-Render via remove → force-reflow → add gesetzt. So restartet die
 * Animation auch bei aufeinanderfolgenden Tab-Switches sauber. */
.m-main.m-main--enter {
  animation: mainEnter 160ms var(--ease);
}
@keyframes mainEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-Motion: keine Bewegung, nur ein winziger Opacity-Fade als
 * minimaler Hinweis dass sich was geaendert hat. 100ms linear bleibt
 * dezent fuer User die jegliche Bewegung als stoerend empfinden.
 * @keyframes bewusst ausserhalb der @media-Query — bessere Browser-
 * Kompatibilitaet (Safari < 14 hatte Bugs mit verschachtelten @keyframes
 * in @media-Bloecken; outside ist immer safe). */
@keyframes mainEnterReduce {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .m-main.m-main--enter {
    animation: mainEnterReduce 100ms linear;
  }
}

/* ============================================================
   Bottom navigation
   ============================================================ */
.m-bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: calc(var(--bottomnav-h) + var(--safe-bot));
  padding-bottom: var(--safe-bot);
  /* Auto-fit so adding/removing tabs doesn't break layout (currently 4:
     Aktuell / Noten / Plan / Settings). */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  /* DESIGN.md "Backdrop-Blur-Once Rule" — glass blur only on the topbar.
   * Bottom-nav uses a solid surface (also avoids per-frame repaint cost
   * while scrolling on every mobile frame). */
  background: var(--bg-elev);
  border-top: 1px solid var(--border-soft);
  /* Side safe-area insets matter on landscape iPhone (notch on side). */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.m-tab__icon {
  display: grid;
  place-items: center;
  width: 56px;
  max-width: 80%;
  height: 30px;
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease);
}
.m-tab__label {
  /* Tab labels should never wrap — rather truncate at very narrow widths. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.m-tab[aria-current="page"] {
  color: var(--accent);
}
.m-tab[aria-current="page"] .m-tab__icon {
  background: var(--accent-soft);
}
.m-tab:active .m-tab__icon { background: var(--surface-2); }

/* ============================================================
   Login overlay
   ============================================================ */
.m-login {
  position: fixed; inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(110,168,254,0.18), transparent 60%),
    var(--bg);
  z-index: 100;
}
.m-login__card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, var(--surface), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-md);
}
.m-login__brand { display: flex; align-items: center; gap: 12px; }
.m-mark {
  width: 40px; height: 40px;
  display: block;
  border-radius: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(110,168,254,.25));
}
.m-login__brand h1 { margin: 0; font-size: 18px; font-weight: 600; }
.m-login__lead { margin: -4px 0 4px; color: var(--text-mute); font-size: 13px; }
.m-login__status { font-size: 13px; min-height: 18px; color: var(--danger); }
.m-login__back { text-align: center; font-size: 13px; color: var(--text-dim); margin-top: 4px; }

/* ============================================================
   Toast
   ============================================================ */
.m-toast {
  position: fixed;
  bottom: calc(var(--bottomnav-h) + var(--safe-bot) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 50;
  animation: toastIn .25s var(--ease);
}
.m-toast--err { border-color: var(--danger-border-strong); color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Hide bottom-nav and appbar refresh button on settings to keep form scrollable */
@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  .m-field input, .m-field select, .m-field textarea, .m-search input { user-select: text; -webkit-user-select: text; }
}

/* ============================================================
   Scroll-to-Top FAB (Stundenplan-Mobile)
   Pendant zum Desktop ScrollTopFab.svelte. Erscheint wenn die Page mehr
   als 400px gescrollt wurde, smooth-scrollt zurück nach oben.
   Position: fixed bottom-right, oberhalb der Bottom-Nav (64px) + safe-area.
   ============================================================ */
.m-scroll-top-fab {
  position: fixed;
  right: 16px;
  /* Bottom-Nav (64px) + safe-area-bottom + 16px Luft */
  bottom: calc(var(--bottomnav-h) + var(--safe-bot) + 16px);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-mute);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  z-index: 40;
  /* Hidden state — Emil: nicht aus scale(0), sondern leichter scale +
   * translateY damit das Erscheinen wie ein "Aufsteigen" wirkt. */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.m-scroll-top-fab.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  .m-scroll-top-fab:hover {
    background: var(--surface-3);
    color: var(--text);
    border-color: var(--border);
  }
}
.m-scroll-top-fab:active {
  /* Tactile feedback — Emil: "buttons must feel responsive" */
  transform: translateY(0) scale(0.94);
}
.m-scroll-top-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .m-scroll-top-fab {
    transition: opacity 120ms linear;
    transform: none;
  }
  .m-scroll-top-fab.is-visible { transform: none; }
  .m-scroll-top-fab:active { transform: none; }
}