:root{
  --header-h: 56px;
  --drawer-w: 280px;
}

/* Stabilise le viewport, pas de scroll global */
html, body { height: 100%; overflow: hidden; }

/* Header au-dessus de Leaflet */
.topbar{
  position: sticky; top: 0; z-index: 1200;
  height: var(--header-h);
  display:flex; align-items:center; gap:.75rem;
  padding: .5rem 1rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--muted-border-color);
}
.topbar .icon{ width:40px; height:40px; display:inline-grid; place-items:center; }
.brand{ margin:0; font-size:1.1rem; display:flex; align-items:center; }

/* Vues plein écran */
main{ position:relative; }
.view{
  block-size: calc(100dvh - var(--header-h));
  overflow: clip;
  display:none;
}
.view.active{ display:block; }
.container.full{ height:100%; display:flex; flex-direction:column; padding-inline:.75rem; }
.container.narrow{ max-width:820px; }
.stack{ display:grid; gap:.75rem; }          /* ← règle la superposition autour du bouton */

/* Drawer */
.drawer{
  position:fixed; inset: var(--header-h) auto 0 0;
  width:var(--drawer-w); background:var(--surface-2);
  border-right:1px solid var(--muted-border-color);
  transform: translateX(-100%); transition: transform .25s ease;
  z-index: 1300; padding:.75rem .5rem;
}
.drawer.open{ transform: translateX(0); }
.drawer-nav{ display:flex; flex-direction:column; gap:.25rem; }
.drawer .item{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem .75rem; border-radius:.5rem; text-decoration:none;
}
.drawer .item:hover{ background:var(--surface-3); }
/* Actif lisible */
.drawer .item.active{
  background: var(--pico-primary);
  color: var(--pico-primary-inverse, #fff);
}
.drawer .item.active svg{ color: var(--pico-primary-inverse, #fff); }
.drawer .icon{ display:inline-grid; place-items:center; width:24px; }

/* Backdrop */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1250; backdrop-filter: blur(1px); }
.backdrop[hidden]{ display:none; }
.no-scroll{ overflow:hidden; }

/* Toolbar & filtres */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem 0; flex-wrap:wrap; }
.filters{ display:flex; gap:.75rem; overflow:auto; padding:.25rem .25rem .25rem 0; white-space:nowrap; flex:1 1 auto; min-inline-size:240px; }
.filters label{ display:inline-flex; align-items:center; gap:.4rem; }
.toolbar-actions{ margin-left:auto; }
.btn-compact{ padding:.4rem .7rem; line-height:1; white-space:nowrap; }

/* Carte */
.map{ flex:1 1 auto; border-radius:.75rem; overflow:hidden; outline:1px solid var(--muted-border-color); }
.leaflet-container{ height:100%; width:100%; z-index:0; }

/* Échelle centimétrique */
.leaflet-control-centiscale{
  background: var(--surface-2);
  padding:.25rem .5rem; border-radius:.5rem;
  outline:1px solid var(--muted-border-color);
  display:flex; align-items:center; gap:.5rem;
}
.leaflet-control-centiscale .bar{
  width:100px; height:4px; border-radius:2px;
  background: currentColor; opacity:.45;
}
.leaflet-control-centiscale .label{ font-size:.8rem; }

/* Anneaux */
.ring-label{
  background: var(--surface-2);
  padding:.1rem .25rem; border-radius:.25rem;
  border: 1px solid var(--muted-border-color);
  font-size:.75rem;
  white-space: nowrap;           /* ← horizontal garanti */
  display: inline-block;
}

/* Graphiques (compact + légende) */
.charts{ height:100%; display:grid; grid-template-rows: minmax(260px, 320px); padding:.5rem 0; align-content:start; }
.card{ height:100%; display:flex; flex-direction:column; border-radius:.75rem; outline:1px solid var(--muted-border-color); padding:0; }
.card > header{ padding:.75rem 1rem; border-bottom:1px solid var(--muted-border-color); }
.chart-wrap{ flex:1 1 auto; padding:.5rem; }
.chart-wrap canvas{ width:100% !important; height:100% !important; }

/* Accessibilité */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Spinner */
.spinner{ display:flex; align-items:center; gap:.5rem; }

/* === PATCH NMEA ANALYZER – MAP & DRAWER OVERRIDES === */

/* === PATCH #2 — Map: attribution 100% visible === */

/* Hauteur exacte de la vue carte + pas de débordement vertical */
.view[data-view="/map"]{
  block-size: calc(100dvh - var(--header-h));
  overflow: hidden;
}

/* Le container plein écran a un très léger espace bas
   pour éviter tout rognage de l'attribution */
.container.full{
  padding-block-end: .25rem;
}

/* La carte peut rétrécir correctement dans son flex parent */
.map{
  min-height: 0;
}

/* Remonte les contrôles Leaflet (attribution/échelle) pour
   qu'ils ne collent jamais au bord du viewport */
.leaflet-bottom{
  margin-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Un peu d'air dans l'attribution elle-même */
.leaflet-control-attribution{
  padding-bottom: 2px;
}


/* Drawer : fond nettement plus sombre + texte/icônes en blanc pour la lisibilité */
.drawer{
  background: rgba(8,12,20,.96) !important; /* sombre, quasi-opaque */
  color: #fff !important;
}
.drawer .drawer-nav .item{
  color: #fff !important;
}
.drawer .drawer-nav .item svg{
  color: #fff !important;
}
.drawer .drawer-nav .item:hover{
  background: rgba(255,255,255,.08);
}
.drawer .drawer-nav .item.active{
  background: rgba(255,255,255,.16);
}

/* Backdrop un peu plus marqué pour détacher visuellement le menu */
.backdrop{
  background: rgba(0,0,0,.72) !important;
}