/* DoggyChrono — styles personnalisés (en complément de Tailwind) */

:root {
  --dgc-primary: #1e40af;        /* bleu FFSLC */
  --dgc-accent:  #f59e0b;        /* orange chrono */
  --dgc-success: #16a34a;
  --dgc-danger:  #dc2626;
  --dgc-bg:      #f8fafc;
  --dgc-text:    #0f172a;
}

html, body { height: 100%; }
/* Police uniquement : la couleur de fond et le texte sont gérés par les layouts (Tailwind),
   pour ne pas forcer un fond clair par-dessus le thème sombre superviseur. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Boutons utilitaires hors Tailwind */
.btn { @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 font-medium transition focus:outline-none focus:ring-2 focus:ring-offset-1; }
.btn-primary { @apply bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-500; }
.btn-secondary { @apply bg-slate-200 text-slate-800 hover:bg-slate-300; }
.btn-danger { @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; }
.btn-success { @apply bg-emerald-600 text-white hover:bg-emerald-700; }
.input, .select, .textarea {
  @apply w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200;
}

/* Carte */
.card { @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-200; }

/* Badges statuts */
.badge { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium; }
.badge-draft     { @apply bg-slate-200 text-slate-700; }
.badge-open      { @apply bg-blue-100 text-blue-800; }
.badge-live      { @apply bg-orange-100 text-orange-800 animate-pulse; }
.badge-closed    { @apply bg-emerald-100 text-emerald-800; }

/* Operator — paysage forcé */
@media (orientation: portrait) and (max-width: 900px) {
  body.operator-mode .landscape-only { display: flex; }
  body.operator-mode .focus2 { display: none; }
}
@media (orientation: landscape), (min-width: 900px) {
  body.operator-mode .landscape-only { display: none; }
}

/* Grille tactile dossards */
.bib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.5rem; }
.bib-cell {
  @apply flex items-center justify-center rounded-lg bg-white text-lg font-bold text-slate-800 ring-1 ring-slate-300 hover:bg-blue-100 hover:ring-blue-400 active:scale-95 transition cursor-pointer select-none;
  aspect-ratio: 1 / 1; min-height: 56px; touch-action: manipulation;
}
.bib-cell.finished { @apply bg-slate-100 text-slate-400 line-through; pointer-events: none; }
.bib-cell.suggested { @apply bg-amber-100 ring-amber-400; }

/* Master — bouton TOP */
.btn-top {
  @apply w-full rounded-2xl bg-orange-500 text-white text-5xl font-black shadow-2xl active:scale-95 transition select-none;
  min-height: 280px;
}

/* Banner offline */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #b91c1c; color: white; text-align: center; padding: 4px 0;
  font-size: 0.875rem; font-weight: 600; transform: translateY(-100%); transition: transform .2s;
}
body.is-offline .offline-banner { transform: translateY(0); }