/*
  components.css — Composants réutilisables
  --------------------------------------------
*/

/* --- Barre de statut & de commande (specifications.md §3.8) --- */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
}

.statusbar__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.version-tag {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  vertical-align: middle;
}

.statusbar__indicators,
.statusbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.indicator__dot[data-state="ok"] { background: var(--accent); }
.indicator__dot[data-state="warn"] { background: var(--warn); }
.indicator__dot[data-state="error"] { background: var(--alert); }

.control-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.control-toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* --- Navigation (sidebar desktop / tabbar mobile) --- */

.nav-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-1);
}

.tabbar .nav-list {
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
  padding: 0;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-decoration: none;
  flex: 1;
}

.sidebar .nav-link {
  flex-direction: row;
  justify-content: flex-start;
  font-size: var(--text-sm);
}

.nav-link[aria-current="page"] {
  color: var(--accent-dark);
  background: var(--accent-soft);
}

/* --- Cartes --- */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

/* Les nombres qui comptent (charge, reps, temps) — seule utilisation
   de la police mono, jamais pour des étiquettes ou du texte courant */
.card__figure {
  font-family: var(--font-data);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

.card__unit {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-left: var(--space-1);
}

/* --- Boutons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--text-base);
}

.btn--primary {
  background: var(--accent);
  color: var(--paper-raised);
}

.btn--primary:hover {
  background: var(--accent-dark);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* --- Messages (voir specifications.md §11, règle de décision erreurs) --- */

.toast {
  position: fixed;
  bottom: calc(var(--tabbar-height) + var(--space-4));
  left: var(--space-4);
  right: var(--space-4);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  z-index: 30;
}

@media (min-width: 900px) {
  .toast {
    left: auto;
    right: var(--space-8);
    bottom: var(--space-8);
    max-width: 360px;
  }
}

.banner--error {
  background: var(--alert-soft);
  color: var(--alert);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.texte-discret {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* --- Vue "Routines" (specifications.md §3.1) ---------------------------- */

/* Une seule colonne empilée sur mobile — la liste, puis le détail juste en
   dessous ; deux colonnes côte à côte à partir de 900px, comme le reste de
   la mise en page (voir layout.css). */
.vue-routines {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .vue-routines {
    flex-direction: row;
    align-items: flex-start;
  }

  .panneau-liste {
    width: 280px;
    flex-shrink: 0;
  }

  .panneau-detail {
    flex: 1;
    min-width: 0;
  }
}

.panneau-liste__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.panneau-liste__titre,
.panneau-detail__titre {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
}

.liste-cartes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.carte-selectionnable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.carte-selectionnable--active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.carte-selectionnable__titre {
  font-weight: 500;
  font-size: var(--text-sm);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-soft);
}

.badge--ok { background: var(--accent-soft); color: var(--accent-dark); }
.badge--warn { background: #f1ead8; color: var(--warn); }
.badge--neutre { background: var(--line-soft); color: var(--ink-soft); }

.carte {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin-bottom: var(--space-2);
}

.carte__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

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

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.champ > span {
  color: var(--ink-soft);
}

.champ input,
.champ select,
.champ textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--text-sm);
  width: 100%;
}

.grille-jours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.case-jour {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.actions-formulaire {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.separateur {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0 var(--space-4);
}

.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}