/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  /* Évite le rebond iOS et le scroll parasite */
  overscroll-behavior: none;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; }
input, select, textarea { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1.5rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 100;
  /* hauteur cible : ~48px desktop, ~36px compact */
  min-height: 48px;
}
.navbar__brand { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.navbar__links {
  display: flex;
  list-style: none;
  gap: 1rem;
  flex: 1;
}
.navbar__links a {
  padding: .25rem .5rem;
  border-radius: .25rem;
  opacity: .7;
  transition: opacity .15s;
  white-space: nowrap;
}
.navbar__links a:hover,
.navbar__links a.active { opacity: 1; }
.navbar__auth {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.navbar__user { font-size: .875rem; opacity: .7; }

/* ============================================================
   Layout live — desktop (défaut 2 colonnes)
   ============================================================ */
.main-content {
  /* Utilise la hauteur restante après la navbar */
  display: flex;
  flex-direction: column;
}

.live-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: .75rem;
  padding: .75rem;
  /* dvh : s'adapte à la barre d'adresse mobile */
  height: calc(100dvh - 48px);
  height: calc(100vh  - 48px); /* fallback navigateurs anciens */
  overflow: hidden;
}

.kpi-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.chart-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 0; /* permet au flex-child de rétrécir */
}

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  padding: .6rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  cursor: pointer;
  transition: border-color .15s;
  min-width: 0;
}
.kpi-card:hover         { border-color: var(--color-accent); }
.kpi-card--active       { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); }
.kpi-card--active .kpi-card__label { color: var(--color-accent); opacity: 1; }

.kpi-card__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-card__value {
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
}
.kpi-card__value small { font-size: .85rem; font-weight: 400; opacity: .65; }
.kpi-card__sub { font-size: .7rem; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Chart
   ============================================================ */
.chart-wrapper {
  flex: 1;
  position: relative;
  min-height: 0; /* critique : permet à flex de comprimer */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  padding: .4rem;
}

/* ============================================================
   Contrôles & statut
   ============================================================ */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  flex-shrink: 0;
}

.btn {
  padding: .45rem .9rem;
  border-radius: .375rem;
  font-weight: 500;
  font-size: .875rem;
  transition: opacity .15s, background .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--primary  { background: var(--color-accent); color: #fff; }
.btn--danger   { background: #ef4444;             color: #fff; }
.btn--success  { background: #10b981;             color: #fff; }
.btn--outline  { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.btn--sm       { padding: .2rem .6rem; font-size: .78rem; }
.btn:not(:disabled):hover { opacity: .85; }

#connection-indicator {
  padding: .35rem .65rem;
  border-radius: .375rem;
  font-size: .75rem;
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
#connection-indicator[data-connected="true"] {
  border-color: #10b981;
  color: #10b981;
}

.controls-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  min-height: 1.4em;
}

.status-info  { font-size: .75rem; opacity: .65; }
.status-error { font-size: .75rem; color: #ef4444; }

.rec-indicator {
  font-size: .72rem;
  font-weight: 700;
  color: #ef4444;
  letter-spacing: .04em;
  animation: rec-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* ============================================================
   Formulaires
   ============================================================ */
.form-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1rem;
}
.form-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  padding: 2rem;
}
.form-card h1 { font-size: 1.25rem; margin-bottom: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.field label { font-size: .875rem; opacity: .8; }
.field input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: .375rem;
  color: var(--color-text);
  padding: .5rem .75rem;
  width: 100%;
}
.field input:focus { outline: 2px solid var(--color-accent); border-color: transparent; }
.form-error { color: #ef4444; font-size: .85rem; margin-bottom: 1rem; }
.form-link  { margin-top: 1rem; font-size: .85rem; opacity: .7; }
.form-link a { color: var(--color-accent); }

/* ============================================================
   Tables historique / admin
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: .5rem;
}
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: .55rem .9rem;
  text-align: left;
  font-size: .875rem;
  border-bottom: 1px solid var(--color-border);
}
th { opacity: .6; font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-border); }

.page-section { padding: 1.25rem; }
.page-section h1 { font-size: 1.2rem; margin-bottom: .875rem; }

.footer {
  text-align: center;
  padding: .75rem;
  font-size: .72rem;
  opacity: .35;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ============================================================
   MOBILE PAYSAGE
   Cible : téléphones en orientation landscape (hauteur ≤ 500px)
   Samsung Galaxy, iPhone SE, Pixel, etc.
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {

  /* — Navbar ultra-compacte — */
  .navbar {
    padding: .2rem .75rem;
    gap: .5rem;
    min-height: 36px;
  }
  .navbar__brand { font-size: .8rem; }
  .navbar__links { gap: .5rem; }
  .navbar__links a { font-size: .72rem; padding: .1rem .3rem; }
  .navbar__user  { display: none; }
  .btn--sm       { padding: .1rem .45rem; font-size: .68rem; }

  /* — Layout : 2 colonnes côte à côte — */
  .live-layout {
    grid-template-columns: 195px 1fr;
    gap: .35rem;
    padding: .35rem;
    height: calc(100dvh - 36px);
    height: calc(100vh  - 36px);
  }

  /* — Colonne KPI — */
  .kpi-col { gap: .25rem; }

  #connection-indicator {
    padding: .15rem .4rem;
    font-size: .62rem;
  }

  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: .2rem;
  }

  .kpi-card {
    padding: .25rem .35rem;
    gap: 0;
    border-radius: .3rem;
  }

  .kpi-card__label {
    font-size: .52rem;
    letter-spacing: 0;
  }

  .kpi-card__value {
    font-size: 1.1rem;
    line-height: 1.05;
  }

  .kpi-card__value small { font-size: .7rem; }

  .kpi-card__sub { font-size: .55rem; }

  /* — Colonne chart — */
  .chart-col { gap: .25rem; }

  .chart-wrapper {
    padding: .2rem;
    border-radius: .3rem;
  }

  /* — Contrôles compacts sur une ligne — */
  .controls {
    flex-wrap: nowrap;
    gap: .25rem;
    overflow-x: auto;
    flex-shrink: 0;
  }

  .controls .btn {
    padding: .2rem .45rem;
    font-size: .68rem;
    flex-shrink: 0;
  }

  /* — Masquer les éléments non essentiels — */
  #status-msg   { display: none; }
  .rec-indicator { font-size: .62rem; }
  .footer        { display: none; }
}

/* ============================================================
   TABLETTE / PORTRAIT (≤ 768px)
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
  .live-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }

  .chart-wrapper { min-height: 220px; }

  .navbar__user { display: none; }
}