/* Mobile dashboard shell.
   Loaded after slf-current.css and scoped to mobile viewports only. */
@media (max-width: 959px) {
  :root {
    /* Original-Violett (V2b: Glaskarte + Logo-Sockel statt eingefaerbter Karte). */
    --slf-mobile-bg: #31258f;
    --slf-mobile-x: 0.72rem;
    --slf-mobile-top: max(0.36rem, env(safe-area-inset-top, 0px));
    --slf-mobile-bottom: 0px;
    --slf-mobile-gap: 0.28rem;
    --slf-mobile-nav-h: 2.72rem;
    /* Space above (card gap) and below (label padding) the nav content use
       the same formula, so icons + labels sit vertically centered between
       the card's bottom edge and the physical screen bottom on any device. */
    --slf-mobile-nav-space: max(0.3rem, calc(env(safe-area-inset-bottom, 0px) * 0.29));
  }

  html,
  body.page-public,
  body.page-login,
  body.page-locked,
  body.page-dashboard {
    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0;
    overflow: hidden !important;
    background: var(--slf-mobile-bg) !important;
  }

  body.page-public,
  body.page-login,
  body.page-locked {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
  }

  body.page-public {
    background: var(--slf-mobile-bg) !important;
  }

  body.page-login,
  body.page-locked {
    background: #f7f6ff !important;
  }

  body.page-public::before {
    content: "";
    position: fixed;
    inset:
      calc(-1 * env(safe-area-inset-top, 0px) - 48px)
      calc(-1 * env(safe-area-inset-right, 0px) - 48px)
      calc(-1 * env(safe-area-inset-bottom, 0px) - 48px)
      calc(-1 * env(safe-area-inset-left, 0px) - 48px);
    z-index: 0;
    background:
      linear-gradient(160deg, rgba(248, 48, 126, 0.42) 0%, rgba(248, 48, 126, 0) 46%),
      linear-gradient(68deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%),
      linear-gradient(180deg, #332fbe 0%, #4946c8 43%, #2a277f 100%);
  }

  body.page-login::before,
  body.page-locked::before {
    content: "";
    position: fixed;
    inset:
      calc(-1 * env(safe-area-inset-top, 0px) - 48px)
      calc(-1 * env(safe-area-inset-right, 0px) - 48px)
      calc(-1 * env(safe-area-inset-bottom, 0px) - 48px)
      calc(-1 * env(safe-area-inset-left, 0px) - 48px);
    z-index: 0;
    background:
      radial-gradient(circle at 14% 10%, rgba(128, 119, 220, 0.32), transparent 34rem),
      linear-gradient(145deg, #f7f6ff 0%, #ebeefe 45%, #f9fbff 100%);
  }

  .c-public-landing,
  .c-login-shell {
    position: relative;
    z-index: 1;
    min-height: 100% !important;
    background: transparent !important;
  }

  html::before,
  html::after,
  body.page-dashboard::before,
  body.page-dashboard::after {
    content: none !important;
  }

  body.page-dashboard {
    box-sizing: border-box;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--slf-mobile-gap);
    padding:
      var(--slf-mobile-top)
      var(--slf-mobile-x)
      var(--slf-mobile-bottom) !important;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  body.page-dashboard:not(.is-mobile-landscape) {
    --slf-bottom-nav-visible-h: var(--slf-mobile-nav-h);
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: var(--slf-mobile-nav-space) !important;
    padding:
      var(--slf-mobile-top)
      var(--slf-mobile-x)
      0 !important;
  }

  /* Unclip the portrait shell: with overflow hidden, the body box (which ends
     at the dvh edge, one safe-area inset above the physical screen bottom)
     clips the nav tail that reaches into the safe area — the labels vanish.
     Overflow visible lets the tail paint; nothing becomes scrollable because
     the layout still fits the box and overscroll-behavior stays none. */
  html.is-mobile-portrait,
  body.page-dashboard:not(.is-mobile-landscape) {
    overflow: visible !important;
  }

  .l-app {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: max-content minmax(0, 1fr) !important;
    /* Card-to-card gap matches the shell's horizontal screen margin. */
    gap: var(--slf-mobile-x) !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.page-dashboard:not(.is-mobile-landscape) .l-app {
    height: 100% !important;
  }

  .l-sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .l-sidebar-overlay,
  .c-sidebar__mobile-actions,
  .c-nav--bubble,
  .c-sidebar-footer--legal-only,
  .c-main-header {
    display: none !important;
  }

  .c-sidebar-stack {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    transform: none !important;
  }

  .c-user-card {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.18rem 1.08rem 1.08rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    justify-items: center;
    align-content: start;
    row-gap: 0.18rem;
    text-align: center;
    overflow: hidden !important;
  }

  .c-user-card__avatar-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 4.18rem !important;
    height: 4.18rem !important;
    margin: 0 auto !important;
  }

  .c-user-card__avatar {
    width: 4.18rem !important;
    height: 4.18rem !important;
  }

  .c-user-card__name,
  .c-user-card__name--compact,
  .c-user-card__name--compact2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
    margin: 0.02rem 0 0 !important;
    text-align: center;
    font-size: clamp(1.42rem, 5.6vw, 1.9rem) !important;
    font-weight: 760 !important;
    line-height: 1.06;
  }

  .c-user-card__quick-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.01rem 0 0.02rem !important;
  }

  .c-user-card__quick-actions .c-sidebar-footer__icon-link {
    width: 2.05rem;
    height: 2.05rem;
    color: rgba(225, 222, 255, 0.82) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .c-user-card__quick-actions .c-sidebar-footer__icon {
    width: 1.22rem;
    height: 1.22rem;
  }

  .c-report {
    grid-column: 1 !important;
    grid-row: 4 !important;
    width: 100%;
    align-self: stretch;
    display: grid;
    align-content: start;
    row-gap: 0.36rem;
    column-gap: 0.8rem;
    margin: 0.06rem 0 0 !important;
  }

  .c-report__row {
    min-height: 1.66rem;
  }

  .c-report__label,
  .c-report__value {
    font-size: 0.86rem;
    font-weight: 650;
  }

  .l-main,
  .c-content-card--bubble,
  .c-content-card__scroll {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .l-main {
    height: auto !important;
    padding: 0 !important;
  }

  .c-content-card {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0.82rem !important;
  }

  .c-content-card__scroll,
  .c-quicklog-lite,
  .c-voice-capture,
  .c-voice-capture__frame {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
  }

  .c-quicklog-lite {
    display: flex;
    flex-direction: column;
  }

  .c-quicklog-lite__head,
  .c-quicklog-lite__examples {
    display: none !important;
  }

  .c-voice-capture {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  .c-voice-capture__controls {
    bottom: 1.05rem;
  }

  /* Portrait nav: an auto-sized row that reaches past the dvh box into the
     bottom safe area (negative margin), then pads its content back up by a
     fraction of the real inset. Scales across devices: on home-indicator
     iPhones the labels sit just above the indicator, on home-button models
     they keep a small fixed gap to the screen edge. */
  .c-bottom-nav {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0.18rem;
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.page-dashboard:not(.is-mobile-landscape) .c-bottom-nav {
    position: relative !important;
    z-index: 3200 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: var(--slf-mobile-nav-space) !important;
    align-items: end !important;
    overflow: visible !important;
  }

  .c-bottom-nav__item {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    height: auto;
    align-self: end;
    border: 0 !important;
    border-radius: 0.45rem !important;
    padding: 0.02rem 0.12rem 0.06rem !important;
    display: grid !important;
    grid-template-rows: auto auto;
    align-content: end;
    justify-items: center;
    gap: 0.03rem;
    color: rgba(226, 231, 255, 0.9) !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-size: clamp(0.94rem, 3.75vw, 1.08rem) !important;
    font-weight: var(--slf-fw-semibold, 760) !important;
    line-height: 1.02;
    text-align: center;
    letter-spacing: 0;
    transform: none !important;
    overflow: visible !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.page-dashboard:not(.is-mobile-landscape) .c-bottom-nav__item {
    height: auto !important;
    min-height: 0 !important;
    position: relative;
    z-index: 1;
    align-self: end !important;
    align-content: end !important;
    place-content: end center !important;
    padding: 0.04rem 0.12rem 0 !important;
    overflow: visible !important;
  }

  .c-bottom-nav__icon {
    width: 1.42rem;
    height: 1.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(220, 229, 255, 0.9);
  }

  .c-bottom-nav__label {
    display: block;
    line-height: 1.02;
    overflow: visible;
  }

  .c-bottom-nav__icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.7;
  }

  .c-bottom-nav__item.is-active,
  .c-bottom-nav__item:focus-visible {
    color: #eaf4ff !important;
    background: transparent !important;
    outline: none;
  }

  .c-bottom-nav__item.is-active .c-bottom-nav__icon,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon,
  .c-bottom-nav__item.is-active .c-bottom-nav__icon svg,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon svg,
  .c-bottom-nav__item.is-active .c-bottom-nav__icon svg path,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon svg path,
  .c-bottom-nav__item.is-active .c-bottom-nav__icon svg line,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon svg line,
  .c-bottom-nav__item.is-active .c-bottom-nav__icon svg polyline,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon svg polyline,
  .c-bottom-nav__item.is-active .c-bottom-nav__icon svg circle,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon svg circle {
    color: #ffd84d !important;
    stroke: #ffd84d !important;
  }

  .c-bottom-nav__item.is-active .c-bottom-nav__icon--start svg,
  .c-bottom-nav__item:focus-visible .c-bottom-nav__icon--start svg {
    fill: #ffd84d !important;
  }

  /* Open bubbles are portaled to <body> on mobile so no ancestor stacking
     context can trap them; this lifts them above the bottom nav (3200).
     overflow must stay visible: the arrow hangs outside the panel box and a
     scroll container (overflow: auto) would clip it away. */
  body > .c-bubble-panel[data-mobile-bubble-target] {
    z-index: 3300 !important;
    overflow: visible !important;
  }

  /* The panel no longer scrolls itself, so the one genuinely long list
     (course units) scrolls internally instead. */
  body > .c-bubble-panel[data-mobile-bubble-target] .c-bubble-list--units {
    max-height: min(46dvh, 20rem);
    overflow: auto;
  }
}