@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---- Jetons de couleur : malt sombre, cuivre, crème ---- */
:root {
  --bg:        #14110d;   /* malt torréfié */
  --panel:     #1f1a14;   /* fût */
  --panel-2:   #2a2219;
  --line:      #3a2f23;
  --cream:     #f3ead9;   /* mousse */
  --muted:     #b3a48c;
  --copper:    #c8743c;   /* cuivre des cuves */
  --copper-2:  #e0953f;
  --amber:     #e0a23c;

  --ok:    #6fae5a;
  --cold:  #5aa6d9;
  --hot:   #d9594f;
  --unknown: #8a7d68;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --input-bg: #18130d;
  --glow: rgba(200,116,60,.10);
}

/* ---- Mode jour ---- */
:root[data-theme="light"] {
  --bg:        #f4efe5;   /* papier kraft clair */
  --panel:     #fffdf8;
  --panel-2:   #efe7d8;
  --line:      #e2d8c6;
  --cream:     #2c2218;   /* texte principal (sombre) */
  --muted:     #6d6253;
  --copper:    #b5632f;
  --copper-2:  #a8551f;
  --amber:     #b07d1f;
  --ok:    #4f8f3c;
  --cold:  #2f7fb8;
  --hot:   #c0392b;
  --unknown: #8a7d68;
  --shadow: 0 8px 24px rgba(70,45,20,.10);
  --input-bg: #fffdf8;
  --glow: rgba(200,116,60,.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 500px at 80% -10%, var(--glow), transparent 60%),
    var(--bg);
  color: var(--cream);
  line-height: 1.5;
  min-height: 100vh;
  transition: background-color .25s, color .25s;
}

a { color: var(--copper-2); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.wrap.wide { max-width: none; padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); }

/* ---- Barre supérieure ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px;
  border-bottom: 1px solid var(--line);
}
.topbar .brand {
  display: flex; align-items: baseline; gap: 12px;
}
.brand .mark {
  font-family: 'Fraunces', serif; font-size: 1.7rem; font-weight: 600;
  letter-spacing: .5px; color: var(--cream);
}
.brand .mark b { color: var(--copper-2); font-weight: 600; }
.brand .sub {
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted);
}
.nav { display: flex; gap: 10px; align-items: center; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 .9rem/1 'Inter', sans-serif;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--cream); text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
.btn:hover { border-color: var(--copper); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--copper); border-color: var(--copper); color: #1a120b; font-weight: 600; }
.btn-primary:hover { background: var(--copper-2); border-color: var(--copper-2); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: #5a2b27; color: #f0b5b0; }
.btn-danger:hover { border-color: var(--hot); }

/* ---- Bandeau « dernier relevé » ---- */
.lastreading {
  margin: 28px 0 22px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(90deg, var(--panel), transparent);
  border: 1px solid var(--line); border-left: 3px solid var(--copper);
  border-radius: var(--radius);
}
.lastreading .eyebrow {
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.lastreading .dt {
  font-family: 'JetBrains Mono', monospace; font-size: 1.25rem; color: var(--cream);
}
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(111,174,90,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(111,174,90,0);} 100%{ box-shadow:0 0 0 0 rgba(111,174,90,0);} }

/* ---- Grille de sondes ---- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.sensor { display: flex; flex-direction: column; gap: 9px; }

/* Disposition centrée.
   - 168px = largeur MINIMALE => 7 cartes par ligne dès 1366px de large.
   - flex-grow: 1 => au-delà, les cartes s'élargissent pour remplir la ligne
     (sur un écran plus grand, des cartes plus larges plutôt que du vide).
   - max-width => plafond pour éviter des cartes démesurées sur très grand écran. */
/* Grille : 7 colonnes dès 1366px (min 150px) et cartes qui s'ÉLARGISSENT
   pour remplir la largeur sur les écrans plus grands (max 1fr). */
.grid.grid-sensors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  align-items: stretch;   /* lignes de même hauteur */
  gap: 12px;
}
.grid.grid-sensors .sensor {
  min-width: 0;           /* autorise la troncation du texte */
}

/* Cartes de sondes compactes (sans impacter les cartes d'administration) */
.sensor .card.reading { padding: 14px 14px; }
.sensor .sensor-name  { font-size: 1rem; line-height: 1.2; }
.sensor .readout      { margin: 9px 0 5px; }
.sensor .readout .val { font-size: 2.1rem; }
.sensor .readout .unit{ font-size: .9rem; }
.sensor .card.target  { padding: 10px 12px; }
.sensor .target-row .v{ font-size: 1.05rem; }

/* Hauteurs homogènes : la carte "relevé" remplit la hauteur de la sonde,
   son pied se cale en bas, et les cartes cible/delta s'alignent en bas. */
.grid.grid-sensors .sensor .card.reading {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.grid.grid-sensors .sensor .reading-foot { margin-top: auto; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}

/* carte principale : nom + readout */
.card.reading { position: relative; overflow: hidden; }
.card.reading::before {
  content:''; position:absolute; inset:0 auto 0 0; width:4px; background: var(--unknown);
}
.card.reading.ok::before    { background: var(--ok); }
.card.reading.cold::before  { background: var(--cold); }
.card.reading.hot::before   { display: none; }   /* la barre est remplacée par le fond rouge */

/* ---- État "trop chaud" : carte rouge pleine pour une alerte immédiate ---- */
.card.reading.hot {
  background: linear-gradient(180deg, #d0392c, #b12d22);
  border-color: #d0392c;
  color: #fff;
  box-shadow: 0 10px 30px rgba(192,57,43,.32);
  animation: hotpulse 2.2s ease-in-out infinite;
}
.card.reading.hot .sensor-name        { color: #fff; }
.card.reading.hot .sensor-id          { color: rgba(255,255,255,.82); }
.card.reading.hot .sensor-lot         { color: rgba(255,255,255,.82); }
.card.reading.hot .readout .val.hot   { color: #fff; }
.card.reading.hot .readout .unit      { color: rgba(255,255,255,.82); }
.card.reading.hot .reading-foot       { color: rgba(255,255,255,.85); }
.card.reading.hot .reading-foot .ts   { color: #fff; }
.card.reading.hot .statustag.hot {
  color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14);
}
@keyframes hotpulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(192,57,43,.30); }
  50%      { box-shadow: 0 12px 40px rgba(192,57,43,.58); }
}
@media (prefers-reduced-motion: reduce) {
  .card.reading.hot { animation: none; }
}

.sensor-name {
  font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600;
  margin: 0 0 2px;
}
.sensor-id { display: block; font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted); min-height: 1em; }
.sensor-lot { display: block; font-size: .7rem; color: var(--muted); margin-top: 2px; min-height: 1em; }

/* Une seule ligne par champ -> toutes les cartes du haut ont la même hauteur.
   Le texte trop long est tronqué (… ), le texte complet reste en infobulle. */
.sensor .sensor-name,
.sensor .sensor-id,
.sensor .sensor-lot {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readout {
  display: flex; align-items: baseline; gap: 6px; margin: 14px 0 6px;
  font-family: 'JetBrains Mono', monospace;
}
.readout .val { font-size: 3rem; font-weight: 700; line-height: 1; }
.readout .val.ok   { color: var(--ok); }
.readout .val.cold { color: var(--cold); }
.readout .val.hot  { color: var(--hot); }
.readout .val.unknown { color: var(--cream); }
.readout .unit { font-size: 1.1rem; color: var(--muted); }

.statustag {
  display: inline-block; font-size: .72rem; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted);
}
.statustag.ok   { color: var(--ok);   border-color: rgba(111,174,90,.5); }
.statustag.cold { color: var(--cold); border-color: rgba(90,166,217,.5); }
.statustag.hot  { color: var(--hot);  border-color: rgba(217,89,79,.5); }

.reading-foot { margin-top: 12px; font-size: .8rem; color: var(--muted); }
.reading-foot .ts { font-family: 'JetBrains Mono', monospace; color: var(--cream); }

/* carte cible/delta */
.card.target { padding: 14px 18px; background: var(--panel-2); }
.target-row { display: flex; justify-content: space-between; gap: 12px; }
.target-row .item { text-align: center; flex: 1; }
.target-row .item + .item { border-left: 1px solid var(--line); }
.target-row .k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.target-row .v { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; color: var(--cream); white-space: nowrap; }

/* ---- Bloc alertes ---- */
.alerts-panel {
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  padding: 18px 22px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.alerts-panel .k { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.alerts-panel .v { font-family: 'JetBrains Mono', monospace; }
.badge { padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge.on  { background: rgba(111,174,90,.15); color: var(--ok); }
.badge.off { background: rgba(138,125,104,.18); color: var(--muted); }
.badge.fire{ background: rgba(217,89,79,.18); color: var(--hot); }

/* ---- Formulaires & admin ---- */
h1, h2 { font-family: 'Fraunces', serif; font-weight: 600; }
h1 { font-size: 1.7rem; margin: 28px 0 6px; }
h2 { font-size: 1.2rem; margin: 0 0 16px; }
.lead { color: var(--muted); margin-top: 0; }

.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 28px; }
.admin-nav a {
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line); color: var(--cream); font-size: .88rem;
}
.admin-nav a.active { background: var(--copper); color: #1a120b; border-color: var(--copper); font-weight: 600; }

label { display: block; font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=email], input[type=number], select {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--cream);
  font: 400 .95rem 'Inter', sans-serif;
}
input:focus, select:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-actions { margin-top: 22px; display: flex; gap: 10px; }

.notice { padding: 12px 16px; border-radius: 10px; margin: 16px 0; font-size: .9rem; }
.notice.ok  { background: rgba(111,174,90,.12); border: 1px solid rgba(111,174,90,.4); }
.notice.err { background: rgba(217,89,79,.12); border: 1px solid rgba(217,89,79,.4); }

table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .88rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
td.mono, .mono { font-family: 'JetBrains Mono', monospace; }
tr:hover td { background: rgba(255,255,255,.02); }

.toggle { display: inline-flex; align-items: center; gap: 10px; }
.switch { position: relative; width: 52px; height: 28px; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: var(--panel-2); border:1px solid var(--line); border-radius: 999px; transition: .2s; }
.switch .track::after { content:''; position:absolute; left:3px; top:2px; width:22px; height:22px; border-radius:50%; background: var(--muted); transition:.2s; }
.switch input:checked + .track { background: rgba(111,174,90,.25); border-color: var(--ok); }
.switch input:checked + .track::after { transform: translateX(24px); background: var(--ok); }

/* ---- Connexion ---- */
.login-card {
  max-width: 380px; margin: 9vh auto 0; padding: 32px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.login-card .brand { display:block; text-align:center; margin-bottom: 8px; }

.empty { color: var(--muted); padding: 30px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

footer.foot { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* ---- Bascule jour / nuit ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--cream); cursor: pointer; font-size: 1.05rem; line-height: 1;
  transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--copper); }
.theme-toggle:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* ---- Bloc de code (ex. ligne cron) ---- */
.codeblock {
  background: var(--input-bg); border: 1px solid var(--line);
  padding: 14px; border-radius: 10px; overflow: auto; font-size: .82rem;
}

/* ---- Indicateur de rafraîchissement auto ---- */
.refresh-note {
  font-size: .72rem; letter-spacing: .04em; color: var(--muted);
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
}