/* =============================================================================
   Interface d'administration — surveillance IoT residences seniors

   SOCLE COMMUN : structure, composants et palette par defaut.

   Un fichier de theme (`themes/*.css`, servi sur /theme.css) est charge apres
   celui-ci et se contente de redefinir les variables — et, quand la direction
   graphique l'exige, quelques regles de mise en page. Le socle reste donc la
   seule source de verite de la structure : une evolution fonctionnelle profite
   a tous les themes sans etre recopiee.
   ========================================================================== */

:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --bordure: #dde3ea;
  --texte: #1b2430;
  --texte-doux: #5c6b7f;
  --accent: #1f6feb;
  --accent-doux: #e8f0fe;
  --ok: #1a7f4b;
  --ok-doux: #e6f5ec;
  --alerte: #c0392b;
  --alerte-doux: #fdecea;
  --attention: #b7791f;
  --attention-doux: #fdf3e0;
  --ombre: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .06);
  --rayon: 10px;

  /* Points d'accroche des themes. */
  --police: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --police-titre: var(--police);
  --largeur-menu: 220px;
  --rayon-carte: var(--rayon);
  --rayon-controle: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12161c;
    --surface: #1a1f27;
    --surface-2: #20262f;
    --bordure: #2c3440;
    --texte: #e6ebf2;
    --texte-doux: #97a3b4;
    --accent: #5b9bff;
    --accent-doux: #1c2a42;
    --ok: #5bcc8c;
    --ok-doux: #16301f;
    --alerte: #ff7a6b;
    --alerte-doux: #351a17;
    --attention: #e0b055;
    --attention-doux: #33280f;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 var(--police);
}

h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; font-family: var(--police-titre); }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- Connexion */

.connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.carte-connexion {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 2rem;
}

.carte-connexion h1 { margin-bottom: .25rem; }
.carte-connexion .sous-titre { color: var(--texte-doux); margin: 0 0 1.5rem; font-size: .9rem; }

/* -------------------------------------------------------------- Mise en page */

.appli { display: none; min-height: 100vh; grid-template-rows: auto 1fr; }
.appli.visible { display: grid; }

header.barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}

header.barre .marque { font-weight: 650; letter-spacing: -.01em; }
header.barre .espaceur { flex: 1; }
header.barre .identite { color: var(--texte-doux); font-size: .88rem; }
header.barre .profil {
  background: var(--accent-doux);
  color: var(--accent);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .78rem;
  font-weight: 600;
}

.corps { display: grid; grid-template-columns: var(--largeur-menu) 1fr; min-height: 0; }

nav.menu {
  background: var(--surface);
  border-right: 1px solid var(--bordure);
  padding: 1rem .6rem;
}

nav.menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: .55rem .7rem;
  margin-bottom: 2px;
  color: var(--texte-doux);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}

nav.menu button:hover { background: var(--surface-2); color: var(--texte); }
nav.menu button.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
nav.menu .groupe {
  margin: 1rem 0 .35rem;
  padding-left: .7rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texte-doux);
  opacity: .8;
}

main { padding: 1.4rem; overflow-x: auto; }

.entete-vue {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.entete-vue .espaceur { flex: 1; }
.entete-vue p { margin: .15rem 0 0; color: var(--texte-doux); font-size: .88rem; }

/* ----------------------------------------------------------------- Elements */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: .8rem;
  margin-bottom: 1.2rem;
}

.tuile {
  background: var(--surface);
  border: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  padding: .9rem 1rem;
}

/* Rayon commun aux surfaces : un theme le pilote par --rayon-carte. */
.carte, .tuile { border-radius: var(--rayon-carte); }
.tuile .valeur { font-size: 1.7rem; font-weight: 650; letter-spacing: -.02em; }
.tuile .libelle { color: var(--texte-doux); font-size: .82rem; margin-top: .1rem; }
.tuile.alerte .valeur { color: var(--alerte); }
.tuile.attention .valeur { color: var(--attention); }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 2px solid var(--bordure);
  color: var(--texte-doux);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
tbody td { padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
td.actions { text-align: right; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }

.vide { padding: 2rem; text-align: center; color: var(--texte-doux); }

/* -------------------------------------------------------------- Formulaires */

label { display: block; margin-bottom: .8rem; font-size: .86rem; color: var(--texte-doux); }
label > span.titre { display: block; margin-bottom: .25rem; font-weight: 600; color: var(--texte); }
label .aide { display: block; margin-top: .25rem; font-size: .78rem; }

input[type=text], input[type=password], input[type=number], input[type=time],
input[type=date], input[type=email], select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.ligne-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.cases { display: flex; flex-wrap: wrap; gap: .4rem; }
.cases label {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: .3rem .55rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  cursor: pointer;
  color: var(--texte);
}
.cases input { margin: 0; }

button.bouton {
  border: 1px solid var(--bordure);
  background: var(--surface);
  color: var(--texte);
  border-radius: 8px;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
button.bouton:hover { background: var(--surface-2); }
button.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.bouton.principal:hover { filter: brightness(1.08); }
button.bouton.danger { color: var(--alerte); border-color: var(--alerte); }
button.bouton.danger:hover { background: var(--alerte-doux); }
button.bouton.petit { padding: .25rem .55rem; font-size: .82rem; }
button.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.large { width: 100%; }

/* ------------------------------------------------------------------ Modales */

.voile {
  position: fixed;
  inset: 0;
  background: rgba(9, 14, 22, .55);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 50;
}

.modale {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.4rem;
}
.modale h2 { margin-bottom: 1rem; }
.modale .pied { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* ------------------------------------------------------------------ Divers  */

.etiquette {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}
.etiquette.ok { background: var(--ok-doux); color: var(--ok); }
.etiquette.alerte { background: var(--alerte-doux); color: var(--alerte); }
.etiquette.attention { background: var(--attention-doux); color: var(--attention); }
.etiquette.neutre { background: var(--surface-2); color: var(--texte-doux); }

.message { padding: .6rem .8rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; }
.message.erreur { background: var(--alerte-doux); color: var(--alerte); }
.message.succes { background: var(--ok-doux); color: var(--ok); }
.message.info { background: var(--accent-doux); color: var(--accent); }

.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtres label { margin: 0; min-width: 150px; }

/* Filtres presentes comme des liens : la selection courante se lit d un coup
   d oeil, et chaque filtre reste une adresse partageable. */
.filtres-liens { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtres-liens a {
  padding: .35rem .8rem;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  color: var(--texte-doux);
  background: var(--fond-carte, transparent);
  white-space: nowrap;
}
.filtres-liens a:hover { border-color: var(--accent); color: var(--accent); }
.filtres-liens a.courant {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.bandeau-simulation {
  background: var(--attention-doux);
  color: var(--attention);
  padding: .45rem 1.2rem;
  font-size: .84rem;
  border-bottom: 1px solid var(--bordure);
}

@media (max-width: 820px) {
  .corps { grid-template-columns: 1fr; }
  nav.menu { border-right: 0; border-bottom: 1px solid var(--bordure); display: flex; flex-wrap: wrap; gap: .2rem; }
  nav.menu button { width: auto; }
  nav.menu .groupe { display: none; }
  .ligne-champs { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Détail d'un appartement */

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}

.ligne-info {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--bordure);
  font-size: .88rem;
}
.ligne-info:last-child { border-bottom: 0; }
.ligne-info span { color: var(--texte-doux); }
.ligne-info strong { font-weight: 600; text-align: right; }

/* Chronologie : une ligne par jour, une case par heure. */
.chrono { overflow-x: auto; }
.chrono table { width: auto; border-collapse: separate; border-spacing: 2px; }
.chrono th.heure {
  padding: 0;
  width: 22px;
  font-size: .68rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-align: center;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.chrono th.jour {
  padding: 0 .5rem 0 0;
  font-size: .75rem;
  font-weight: 500;
  color: var(--texte-doux);
  text-align: right;
  white-space: nowrap;
  border: 0;
  text-transform: none;
  letter-spacing: 0;
}
.chrono td.case {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) calc(var(--intensite) * 100%), var(--surface-2));
}
.chrono tbody tr:hover { background: none; }
.chrono .legende { margin: .7rem 0 0; font-size: .8rem; color: var(--texte-doux); }

/* Libellé porteur d'une infobulle explicative. */
.ligne-info .avec-aide { cursor: help; }
.ligne-info .indice {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: .35rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .62rem;
  font-weight: 700;
  vertical-align: 1px;
  opacity: .5;
}
.ligne-info .avec-aide:hover .indice { opacity: 1; }

/* Séparateur de section dans un formulaire long. */
.modale .section-formulaire {
  margin: 1.4rem 0 .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordure);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-doux);
}
.modale .aide-section { margin: 0 0 .8rem; font-size: .8rem; color: var(--texte-doux); }

/* Intertitre de section dans un formulaire modal. */
.modale .section-formulaire {
  margin: 1.4rem 0 .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordure);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-doux);
}
.modale .aide-section {
  margin: 0 0 .9rem;
  font-size: .8rem;
  color: var(--texte-doux);
}