/**
 * Stay Smart — Styles PWA native (mobile uniquement).
 * Toutes les règles sont gated @media (max-width: 767px) pour isolation desktop.
 *
 * Safe-area : le header sticky absorbe l’inset top (pas le body) pour éviter
 * le chevauchement barre système + double comptage avec sticky top:0.
 */
:root {
  --ss-safe-top: env(safe-area-inset-top, 0px);
  --ss-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ss-safe-left: env(safe-area-inset-left, 0px);
  --ss-safe-right: env(safe-area-inset-right, 0px);
  --ss-app-header-bar: 3.5rem;
  --ss-app-header-height: calc(var(--ss-app-header-bar) + var(--ss-safe-top));
}

@media (max-width: 767px) {
  html.ss-pwa-native,
  html.ss-pwa-native body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  html.ss-pwa-native body {
    /* Top : header sticky. Bottom : dock ou padding si pas de dock. */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--ss-safe-left);
    padding-right: var(--ss-safe-right);
  }

  /* Auth / pages sans header app : garder l’inset top sur le body. */
  html.ss-pwa-native body:not(:has(.ss-app-header)):not(:has(.ss-mobile-station-header)) {
    padding-top: var(--ss-safe-top);
  }

  html.ss-pwa-native body:not(:has(.ss-pwa-dock)) {
    padding-bottom: var(--ss-safe-bottom);
  }

  /* Header sticky : padding-top = safe-area (cause racine du chevauchement). */
  html.ss-pwa-native .ss-app-header,
  html.ss-pwa-native .ss-mobile-station-header,
  html.ss-pwa-native .ss-station-shell .ss-app-header,
  html.ss-pwa-native .surface-shell .ss-app-header {
    padding-top: var(--ss-safe-top);
    min-height: var(--ss-app-header-height);
    height: auto;
    max-height: none;
    box-sizing: border-box;
  }

  html.ss-pwa-native button,
  html.ss-pwa-native a,
  html.ss-pwa-native .btn-primary,
  html.ss-pwa-native .btn-secondary,
  html.ss-pwa-native .ss-station-ticket,
  html.ss-pwa-native .ss-sidebar a,
  html.ss-pwa-native .ss-pwa-dock a,
  html.ss-pwa-native .ss-pwa-dock button,
  html.ss-pwa-native .ss-notif-bell,
  html.ss-pwa-native .ss-app-header__icon-btn,
  html.ss-pwa-native .ss-app-header__profile,
  html.ss-pwa-native [data-sidebar-toggle],
  html.ss-pwa-native .ss-pwa-sheet__card button,
  html.ss-pwa-native .ss-pwa-sheet__card a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.ss-pwa-native button,
  html.ss-pwa-native .btn-primary,
  html.ss-pwa-native .btn-secondary,
  html.ss-pwa-native .ss-station-ticket,
  html.ss-pwa-native .ss-sidebar a,
  html.ss-pwa-native .ss-pwa-dock a,
  html.ss-pwa-native .ss-notif-bell,
  html.ss-pwa-native [data-sidebar-toggle] {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Dock bas — pouces ; masqué ≥768px. */
  .ss-pwa-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.15rem;
    min-height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--ss-surface) / 0.97);
    border-top: 1px solid rgb(var(--ss-line));
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgb(0 0 0 / 0.06);
  }

  .ss-pwa-dock a,
  .ss-pwa-dock button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    min-height: 2.75rem; /* 44px */
    padding: 0.25rem 0.2rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: rgb(var(--ss-muted));
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    text-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .ss-pwa-dock a.is-active,
  .ss-pwa-dock button.is-active {
    color: rgb(var(--ss-brand));
    background: rgb(var(--ss-brand-soft) / 0.65);
  }

  .ss-station-main.ss-pwa-dock-loading,
  .ss-ops-main.ss-pwa-dock-loading,
  [data-ss-soft-nav-root].ss-pwa-dock-loading {
    opacity: 0.72;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
  }

  .ss-pwa-dock__icon {
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
  }

  .ss-pwa-dock__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .ss-pwa-dock__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Espace bas sous le dock fixe — dernière carte (Accept / Refuser) cliquable.
   * Sans dépendance à :has() (fiabilité iOS / WebViews).
   * Le dock n’est visible qu’en <768px (md:hidden) → OK de padder tout le shell.
   */
  :root {
    --ss-pwa-dock-clearance: calc(8.5rem + env(safe-area-inset-bottom, 0px));
  }

  .ss-station-shell .ss-station-main,
  .ss-station-shell .ss-ops-main > main,
  body.ss-station-shell .ss-station-main,
  body:has(.ss-pwa-dock) .ss-station-main,
  body:has(.ss-pwa-dock) .ss-ops-main > main {
    padding-bottom: var(--ss-pwa-dock-clearance) !important;
  }

  .ss-station-shell .ss-station-col-body,
  body:has(.ss-pwa-dock) .ss-station-col-body {
    scroll-padding-bottom: var(--ss-pwa-dock-clearance);
  }

  /* Board mobile : annuler max-height qui fait déborder les cartes hors scroll. */
  .ss-station-shell [data-ss-mt-board] .ss-station-col-body,
  .ss-station-shell [data-ss-hk-board] .ss-station-col-body,
  .ss-station-shell .ss-station-col.is-mobile-active .ss-station-col-body {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
  .ss-station-shell [data-ss-mt-board] .ss-station-col,
  .ss-station-shell [data-ss-hk-board] .ss-station-col,
  .ss-station-shell .ss-station-col.is-mobile-active {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Spacer explicite (templates board) — hauteur garantie dans le flux. */
  .ss-pwa-dock-spacer {
    display: block !important;
    width: 100%;
    height: var(--ss-pwa-dock-clearance) !important;
    min-height: var(--ss-pwa-dock-clearance) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 auto !important;
    pointer-events: none;
    background: transparent;
  }
  @media (min-width: 768px) {
    .ss-pwa-dock-spacer {
      display: none !important;
      height: 0 !important;
      min-height: 0 !important;
    }
  }

  /* Pull-to-refresh indicateur custom */
  .ss-pwa-ptr {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 30;
    transform: translate(-50%, -120%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgb(var(--ss-surface));
    border: 1px solid rgb(var(--ss-line));
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.08);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--ss-muted));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .ss-pwa-ptr.is-visible {
    opacity: 1;
    transform: translate(-50%, 0.75rem);
  }

  .ss-pwa-ptr.is-armed {
    color: rgb(var(--ss-brand));
  }

  /* Swipe hint sur tickets opt-in */
  [data-ss-swipe-complete] {
    touch-action: pan-y;
    position: relative;
  }

  /* Bottom sheet générique (actions rapides) */
  .ss-pwa-sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .ss-pwa-sheet[hidden] {
    display: none !important;
  }

  .ss-pwa-sheet__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: rgb(26 43 44 / 0.45);
    backdrop-filter: blur(2px);
  }

  .ss-pwa-sheet__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: min(85dvh, 36rem);
    overflow: auto;
    border-radius: 1rem 1rem 0 0;
    background: rgb(var(--ss-surface));
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgb(0 0 0 / 0.12);
    transform: translateY(0);
    animation: ss-pwa-sheet-up 0.22s ease-out;
  }

  .ss-pwa-sheet__handle {
    width: 2.5rem;
    height: 0.28rem;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: rgb(var(--ss-line));
  }

  .ss-pwa-sheet__title:not(.sr-only) {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgb(var(--ss-ink));
  }

  .ss-pwa-sheet__body .btn-primary,
  .ss-pwa-sheet__body .btn-secondary,
  .ss-pwa-sheet__body button,
  .ss-pwa-sheet__body a.btn-primary,
  .ss-pwa-sheet__body a.btn-secondary {
    min-height: 2.75rem;
    touch-action: manipulation;
  }

  @keyframes ss-pwa-sheet-up {
    from {
      transform: translateY(100%);
      opacity: 0.6;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Desktop : dock / sheet / PTR jamais visibles même si HTML présent */
@media (min-width: 768px) {
  .ss-pwa-dock {
    display: none !important;
  }

  .ss-pwa-ptr {
    display: none !important;
  }

  .ss-pwa-sheet {
    display: none !important;
  }
}

/*
 * Mode PWA installée (standalone / iOS navigator.standalone).
 * Distinct de html.ss-pwa-native (= viewport mobile / touch).
 */
@media (display-mode: standalone) {
  html {
    /* Évite le bounce / chrome navigateur résiduel en standalone. */
    overscroll-behavior: none;
  }

  body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* Indices « site web » inutiles une fois installé. */
  .ss-a2hs-login,
  [data-ss-a2hs-login] {
    display: none !important;
  }
}

/* iOS Safari legacy : navigator.standalone sans media query display-mode. */
@supports (-webkit-touch-callout: none) {
  html.ss-pwa-standalone body,
  html[data-ss-display-mode="standalone"] body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  html.ss-pwa-standalone .ss-a2hs-login,
  html[data-ss-display-mode="standalone"] .ss-a2hs-login {
    display: none !important;
  }

  html.ss-pwa-standalone .ss-pwa-coach__card--install,
  html[data-ss-display-mode="standalone"] .ss-pwa-coach__card--install {
    display: none !important;
  }
}

/* Coach PWA (install iOS + push CTA) — pattern TerraiSn1, mobile only. */
.ss-pwa-coach {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 26rem;
  margin-inline: auto;
  pointer-events: none;
}

.ss-pwa-coach__card {
  pointer-events: auto;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 0.875rem;
  background: #0f172a;
  color: #f8fafc;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35);
  animation: ss-pwa-coach-in 0.28s ease-out;
}

.ss-pwa-coach__card--push {
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

.ss-pwa-coach__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
}

.ss-pwa-coach__card--push .ss-pwa-coach__icon {
  background: color-mix(in srgb, #0e8b92 16%, transparent);
  color: #0e8b92;
}

.ss-pwa-coach__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ss-pwa-coach__body {
  flex: 1;
  min-width: 0;
}

.ss-pwa-coach__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.ss-pwa-coach__text {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  opacity: 0.85;
}

.ss-pwa-coach__card--push .ss-pwa-coach__text {
  opacity: 1;
  color: #64748b;
}

.ss-pwa-coach__steps {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.55;
  opacity: 0.9;
}

.ss-pwa-coach__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ss-pwa-coach__primary {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #0f172a;
}

.ss-pwa-coach__card--push .ss-pwa-coach__primary {
  background: #0e8b92;
  color: #fff;
  flex: 1;
}

.ss-pwa-coach__ghost {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
  background: transparent;
  color: rgba(248, 250, 252, 0.75);
}

.ss-pwa-coach__card--push .ss-pwa-coach__ghost {
  background: #f1f5f9;
  color: #64748b;
}

@keyframes ss-pwa-coach-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .ss-pwa-coach__card--install {
    display: none !important;
  }

  .ss-pwa-coach {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 24rem;
  }
}

@media (display-mode: standalone) {
  .ss-pwa-coach__card--install {
    display: none !important;
  }
}