/* ============ Design system « Claude » — overrides globaux app ============ */

body {
  background-color: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
}

/* ---- Boutons ---- */
.btn { border-radius: 12px; }
.btn-primary {
  background-color: rgb(var(--accent));
  border-color: rgb(var(--accent));
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: rgb(var(--blue-secondary)) !important;
  border-color: rgb(var(--blue-secondary)) !important;
  color: #fff;
}
.btn-outline-secondary {
  border-color: rgba(var(--text-tertiary), 0.5);
  color: rgb(var(--text-secondary));
}
.btn-outline-secondary:hover {
  background-color: rgb(var(--background-tertiary));
  border-color: rgba(var(--text-tertiary), 0.5);
  color: rgb(var(--text-primary));
}

/* ---- Cartes & alertes ---- */
.card {
  border: 1px solid rgba(var(--text-tertiary), 0.18);
  border-radius: 16px;
  background-color: rgb(var(--background-secondary));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.alert { border-radius: 14px; border: none; }

/* ---- Formulaires ---- */
.form-control, .form-select {
  border-radius: 12px;
  border: 1px solid rgba(var(--text-tertiary), 0.3);
  background-color: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
}
.form-control:focus, .form-select:focus {
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 0.2rem rgba(var(--accent), 0.18);
  background-color: rgb(var(--background-primary));
  color: rgb(var(--text-primary));
}

/* ---- Tables ---- */
.table { color: rgb(var(--text-primary)); }
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--accent), 0.07);
  color: rgb(var(--text-primary));
}

/* ---- Top bar (desktop) ---- */
#navbar {
  background-color: rgba(var(--background-primary), 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ---- Bottom bar (mobile) : item actif terracotta ---- */
.bottomMenu .MenuElement .icon_selected svg { color: rgb(var(--accent)); fill: rgb(var(--accent)); }
.bottomMenu .MenuElement .label { color: rgb(var(--text-secondary)); }
.bottomMenu { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); }

/* ---- Badges statut (tableau de bord & détail tâche) ---- */
.thor-badge {
  display: inline-block;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.thor-badge-queued  { background: rgba(var(--yellow-primary), 0.18); color: rgb(var(--yellow-secondary)); }
.thor-badge-running { background: rgba(var(--accent), 0.16);          color: rgb(var(--accent)); }
.thor-badge-done    { background: rgba(var(--green-primary), 0.16);   color: rgb(var(--green-secondary)); }
.thor-badge-failed  { background: rgba(var(--red-primary), 0.14);     color: rgb(var(--red-primary)); }
.thor-badge-stopped, .thor-badge-cancelled, .thor-badge-unknown { background: rgba(var(--text-tertiary), 0.18); color: rgb(var(--text-secondary)); }
.thor-badge-in_progress { background: rgba(var(--accent), 0.16); color: rgb(var(--accent)); }
.thor-badge-review  { background: rgba(var(--yellow-primary), 0.18); color: rgb(var(--yellow-secondary)); }
.thor-badge-backlog { background: rgba(var(--text-tertiary), 0.14); color: rgb(var(--text-secondary)); }
.thor-chip {
  display: inline-block; padding: 0.25em 0.9em; border-radius: 999px;
  font-size: 0.8rem; border: 1px solid rgba(var(--text-tertiary), 0.3);
  color: rgb(var(--text-secondary)); text-decoration: none;
}
.thor-chip.active { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: #fff; }

/* ---- Header de page commun ---- */
.thor-page-header { padding: 0.75rem 0 0.25rem; }
.thor-page-header h2 { font-size: 1.35rem; margin-bottom: 0; }
.subtitle { color: rgb(var(--text-secondary)); font-size: 0.85rem; }