/* ─────────────────────────────────────────────────────────────
   TensioSuivi — design tokens
   Palette pensée pour un suivi de santé quotidien : calme, lisible,
   avec un fil rouge "affichage digital de tensiomètre" pour la
   mesure du jour (hero), et des chiffres toujours en police mono
   pour un scan rapide et un alignement propre en tableau.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper: #EDEEE3;
  --surface: #FBFAF5;
  --ink: #16211F;
  --muted: #5B6660;
  --line: #D8D6C8;
  --accent-sys: #B5483D;
  --accent-dia: #2F6F62;
  --accent-pulse: #8B6B3D;
  --alert: #C1432B;
  --device-bg: #1B2420;
  --device-digit: #E8F0EA;
  --radius: 14px;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

input, select, textarea {
  font-family: var(--font-sans);
}

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }

/* ── Boutons ── */

.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: transform 0.08s ease;
}
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-outline { background: transparent; }
.btn-danger { color: var(--alert); border-color: var(--alert); background: transparent; }

/* ── Écrans plein écran (verrouillage / profils) ── */

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lock-box, .profiles-wrap {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.lock-mark {
  width: 72px; height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--device-bg);
  display: flex; align-items: center; justify-content: center;
}

#lock-input {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin: 16px 0 8px;
  background: var(--surface);
}

.error { color: var(--alert); }

.profiles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 20px 0;
}

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
}
.avatar.big { width: 64px; height: 64px; font-size: 1.5rem; }

.add-profile-form { margin-top: 20px; text-align: left; }

/* ── Coquille principale ── */

#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 10px;
  background: var(--paper);
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
}
.chevron { color: var(--muted); font-size: 0.7rem; }

.topbar h2 { font-size: 1.05rem; margin: 0; font-weight: 600; }

#main-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 100px;
}

.screen-panel { max-width: 640px; margin: 0 auto; }

.section-title { font-size: 1.15rem; font-weight: 600; margin: 12px 0 16px; }

/* ── Dashboard : affichage "tensiomètre" ── */

.device-display {
  background: var(--device-bg);
  border-radius: var(--radius);
  padding: 22px 18px 16px;
  margin-top: 14px;
  color: var(--device-digit);
}

.device-row {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.device-value span {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}
.device-value label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: #9FB3A6;
  margin-top: 6px;
}

.device-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #2B3733;
  font-size: 0.8rem;
  color: #C7D6CC;
}

.badge {
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.kpi-card span {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
}
.kpi-card label { font-size: 0.72rem; color: var(--muted); }

.period-tabs {
  display: flex;
  gap: 6px;
  margin: 16px 0 10px;
}
.period-tabs button {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px;
  font-size: 0.85rem;
}
.period-tabs button.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.stat span { display: block; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; }
.stat label { font-size: 0.7rem; color: var(--muted); }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.chart-card h3 { margin: 0 0 10px; font-size: 0.95rem; }
.chart-box { height: 220px; position: relative; }
.chart-box.small { height: 200px; }

.correlations-list { display: flex; flex-direction: column; gap: 10px; }
.correlation-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--accent-dia);
  padding-left: 10px;
}
.correlation-group span { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

.ai-result {
  margin-top: 12px;
  padding: 12px;
  background: var(--paper);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Formulaires ── */

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent-dia);
  outline-offset: 1px;
}

.field-row { display: grid; gap: 10px; margin-bottom: 0; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }
.field-row .field { margin-bottom: 14px; }

.more-details {
  margin: 6px 0 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.more-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Historique ── */

.history-list { display: flex; flex-direction: column; gap: 10px; }
.history-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.history-main { flex: 1; min-width: 140px; }
.history-values { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; }
.history-values small { color: var(--muted); font-weight: 400; }
.history-date { display: block; font-size: 0.78rem; color: var(--muted); }
.history-actions { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }
.btn-icon {
  border: none;
  background: transparent;
  color: var(--accent-dia);
  font-size: 0.82rem;
  padding: 4px 8px;
}
.btn-icon.danger { color: var(--alert); }

/* ── Réglages ── */

.settings-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.settings-block h3 { margin: 0 0 10px; font-size: 0.95rem; }
.settings-block .btn { margin: 4px 6px 4px 0; }

/* ── Rapport ── */

.report-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.rapport h1 { font-size: 1.1rem; margin-bottom: 2px; }
.rapport-periode { color: var(--muted); margin-top: 0; font-size: 0.85rem; }
.rapport-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.rapport-stats div { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 110px; }
.rapport-stats strong { display: block; font-family: var(--font-mono); font-size: 1.3rem; }
.rapport-stats span { color: var(--muted); font-size: 0.72rem; }
.rapport-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 10px; }
.rapport-table th, .rapport-table td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; }
.rapport-note { color: var(--muted); font-size: 0.75rem; margin-top: 14px; }
.report-actions { display: flex; flex-direction: column; gap: 8px; }

/* ── Barre de navigation basse ── */

.bottom-nav {
  display: flex;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
}
.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  padding: 4px 6px;
  flex: 1;
}
.nav-btn span { font-size: 1.1rem; }
.nav-btn.active { color: var(--accent-dia); font-weight: 600; }

/* ── Toast ── */

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  z-index: 999;
  max-width: 88%;
  text-align: center;
}

/* ── Impression (rapport médecin) ── */

#print-area { display: none; }

@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { display: block; position: absolute; top: 0; left: 0; width: 100%; }
}

/* ── Responsive tablette / desktop ── */

@media (min-width: 720px) {
  #main-content { padding: 0 24px 40px; }
  .bottom-nav { max-width: 640px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
}