/* Mise en page : une colonne lisible, des cartes pour les graphiques, des onglets en haut. */
[hidden] { display: none !important; }
:root {
  --bg: #f4f6f7; --panel: #ffffff; --fg: #1d2a30; --muted: #5d6b72; --line: #dde3e6;
  --grid: #e8edef; --axis: #b7c2c7; --ref: #7e8b91;
  --accent: #2f6f8f; --s1: #9aa7ad; --s2: #2f7fb0; --bad: #d93025; --warn: #c76a00; --ok: #2e7d32;
  --c-cap: #1d2a30; --c-repas: #2e7d32; --c-oral: #8e44ad; --c-resu: #d93025; --c-vomi: #c76a00; --c-trait: #2f6f8f; --c-autre: #7e8b91;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #11181c; --panel: #182227; --fg: #e6edf0; --muted: #9aaab1; --line: #2a373d; --grid: #222e33; --axis: #3c4b52; --ref: #8d9ba1;
    --accent: #6fb3d6; --s1: #6b7a81; --s2: #4ea3d8; --bad: #ff6b5e; --warn: #f0a040; --ok: #6cc070; --c-cap: #e6edf0; --c-repas: #6cc070; --c-oral: #c58ae0; --c-resu: #ff6b5e; --c-vomi: #f0a040; --c-trait: #6fb3d6; --c-autre: #8d9ba1; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font); }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.25rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); font-size: .9rem; }
.center { text-align: center; }
.err { color: var(--bad); }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.6rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
main, .top-in { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-block: 1.2rem 3rem; }

.top { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding-block: .6rem; }
.tabs { display: flex; gap: .25rem; flex: 1; min-width: 0; overflow-x: auto; }
.tabs a { padding: .35rem .7rem; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a[aria-current="page"] { background: var(--accent); color: #fff; }
.role { font-size: .8rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem; }

input, select, button { font: inherit; color: var(--fg); }
input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; min-width: 0; max-width: 100%; }
select option { background: var(--panel); color: var(--fg); }
button { border-radius: 8px; padding: .5rem .9rem; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: transparent; }
button.small { padding: .2rem .55rem; font-size: .85rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.login { max-width: 26rem; margin: 10vh auto 0; padding: 0 16px; display: flex; flex-direction: column; gap: 1rem; }

.lede { font-size: 1.1rem; max-width: 70ch; }
.lede b { font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .8rem; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.tile .big { font-size: 1.8rem; font-variant-numeric: tabular-nums; }

.chart { position: relative; min-height: 220px; }
.chart svg { display: block; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: .3rem .55rem; font-size: .85rem; white-space: nowrap; z-index: 3; }
.tip-h { color: var(--muted); } .tip-l { display: flex; align-items: center; gap: 6px; }

.scroll { max-height: 24rem; overflow: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: .85rem; padding: .3rem .5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.num { text-align: right; }
.events { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .35rem; }
.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.plain li { display: flex; gap: .6rem; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: .25rem 0; }
.stats { margin: 0; padding-left: 1.2rem; }

.type-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.type-picker button { border-radius: 999px; padding: .35rem .8rem; }
.type-picker button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .7rem; }
.fields-dyn { display: contents; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field.check { flex-direction: row; align-items: center; gap: .5rem; padding-top: 1.4rem; }
.field.wide { grid-column: 1 / -1; }
.journal { display: flex; flex-direction: column; gap: 1rem; }
.jday h3 { font-size: .9rem; color: var(--muted); margin-bottom: .3rem; }
.jitem { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; align-items: start; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.jitem .t { font-variant-numeric: tabular-nums; color: var(--muted); }
.jitem .what b { font-weight: 600; }
.jitem .acts { display: flex; gap: .3rem; }
.badge { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 640px) {
  .top-in h1 { font-size: 1.05rem; flex: 1; }
  .tabs { order: 3; flex-basis: 100%; }
}

/* Saisie rapide */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.q { padding: .9rem .6rem; font-weight: 600; border-radius: 12px; border-width: 2px; }
.q-repas { border-color: var(--c-repas); } .q-resu { border-color: var(--c-resu); } .q-vomi { border-color: var(--c-vomi); }
.q-oral { border-color: var(--c-oral); } .q-cap { border-color: var(--c-cap); }
/* Mot de passe avec œil */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 2.6rem; }
.pw-eye { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: .3rem; color: var(--muted); display: flex; }
/* Carte défilante sur téléphone */
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mobile-only { display: none; }
@media (max-width: 700px) { .mobile-only { display: block; } }

/* Pas de défilement horizontal dans le journal */
main { overflow-x: clip; }
.field input, .field select { width: 100%; }
input[type="datetime-local"], input[type="date"] { min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }
.jitem { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
.jitem .what { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .jitem { grid-template-columns: 3rem minmax(0, 1fr); }
  .jitem .acts { grid-column: 2; justify-content: flex-start; }
}
/* Fenêtre de confirmation */
.dlg { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); padding: 1.2rem; max-width: min(24rem, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(0, 0, 0, .45); }
.dlg p { margin-bottom: 1rem; font-size: 1.05rem; }
.row.end { justify-content: flex-end; }
.check-line { display: flex; align-items: center; gap: .5rem; }
.check-line input { width: 1.1rem; height: 1.1rem; }
/* Aucun mouvement horizontal de la page (effet ressort sur iPhone et Android) */
html, body { overflow-x: hidden; overscroll-behavior-x: none; max-width: 100%; }
body { position: relative; }
#app, #v-app, main, .top { max-width: 100vw; overflow-x: clip; }
.tabs { overflow-x: visible; flex-wrap: wrap; }
input, select, textarea { max-width: 100%; }
/* Seule la carte des glycémies défile horizontalement, sans entraîner la page */
.hscroll { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
/* iPhone : un champ de saisie en dessous de 16 px fait zoomer la page quand on le touche,
   et la page zoomée peut ensuite glisser sur les côtés. On garde donc 16 px dans les champs. */
input, select, textarea { font-size: 16px; }
/* Aucun bloc ne peut être plus large que l'écran, quel que soit son contenu. */
.view > *, .stack > *, .stack-lg > *, .row > * { min-width: 0; max-width: 100%; }
.card { overflow-x: clip; overflow-wrap: anywhere; }
input[type="file"] { width: 100%; font-size: 14px; }
input[type="date"], input[type="datetime-local"] { display: block; }
.row input[type="text"] { flex: 1 1 12rem; }
.row input[type="date"] { flex: 1 1 9rem; width: auto; }
/* La page ne se déplace que verticalement : les gestes horizontaux sont ignorés partout,
   sauf dans la carte des glycémies qui a son propre défilement. */
html, body { touch-action: pan-y; }
.hscroll { touch-action: pan-x pan-y; }
/* Zoom de la semaine de capteur : le pincement et le glissement horizontal vont au graphique,
   le glissement vertical fait toujours défiler la page. */
.zoomable { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.zoom-reset { margin-top: .4rem; }
.sw-line { width: 16px; height: 0; border-top: 2px solid; display: inline-block; flex: none; }
.sw-line.dash { border-top-style: dashed; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
/* Bilan par capteur : tableau sur ordinateur, fiches empilées sur téléphone (aucun défilement interne). */
@media (max-width: 700px) {
  #tb-sensors thead { display: none; }
  #tb-sensors, #tb-sensors tbody, #tb-sensors tr, #tb-sensors td { display: block; width: 100%; }
  #tb-sensors tr { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  #tb-sensors td { border: 0; padding: .1rem 0; text-align: left; }
  #tb-sensors td.cap-name { font-weight: 600; }
  #tb-sensors td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
  #tb-sensors td[data-label]::before { content: attr(data-label); color: var(--muted); }
  #tb-sensors td.verdict { padding-top: .3rem; }
}