/* ============================================================
   app7R — tokens.css — v1
   Source de vérité des couleurs et styles. Aucune couleur en
   dur ailleurs : tout passe par ces variables.
   ============================================================ */

:root {
  /* Identité */
  --c-charbon: #2D2D2D;
  --c-valider: #4D4D4D;   /* boutons de validation (décision Hugo, 04/07/2026) */
  --c-brique:  #B62F2E;   /* couleur d'action du kit + moments identité */
  --c-selection: #25B9D7; /* sélection des heures & jours (décision Hugo, 04/07/2026) */

  /* Postes (servent aussi d'accents partout) */
  --poste-vente:   #ADDD8A;
  --poste-stock:   #99C8DF;
  --poste-manager: #ECCC75;
  --poste-event:   #ED7376;
  --poste-social:  #EEAF74;
  --poste-neutre:  #6A7A8B;   /* test jeux + inventaire */
  --poste-school:  #779AA4;
  --poste-database:#9B94C1;

  /* Statuts demandes */
  --statut-attente-bg: #FAEEDA; --statut-attente-tx: #854F0B;
  --statut-refuse-bg:  #FCEBEB; --statut-refuse-tx:  #A32D2D;

  /* Neutres */
  --fond: #F7F7F5;
  --gris-froid: #EEF1F3;   /* boutons non sélectionnés */
  --carte: #FFFFFF;
  --bordure: #E3E3E0;
  --texte: #000000;
  --texte-2: #6B6B68;

  /* Géométrie */
  --radius: 4px;   /* généralisé au 4px des shifts (décision Hugo, 04/07/2026) */
  --radius-carte: 12px;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: var(--fond);
  color: var(--texte);
  margin: 0;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 30; /* menu toujours visible au scroll ; sous les modales (z 40/50) */
  background: var(--c-charbon);
  color: #FFFFFF;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
}
.app-header .badge-user {
  margin-left: auto;
  background: var(--c-brique); color: #FFFFFF;
  border-radius: 20px; padding: 3px 12px; font-size: 13px;
}

/* ---------- Pastilles postes (blanc sur couleur, graisse 500) ---------- */
.pill { border-radius: var(--radius); padding: 10px 12px; color: #FFFFFF; font-weight: 500; }
.pill--vente   { --pill-c: var(--poste-vente);    background: var(--pill-c); }
.pill--stock   { --pill-c: var(--poste-stock);    background: var(--pill-c); }
.pill--manager { --pill-c: var(--poste-manager);  background: var(--pill-c); }
.pill--event   { --pill-c: var(--poste-event);    background: var(--pill-c); }
.pill--social  { --pill-c: var(--poste-social);   background: var(--pill-c); }
.pill--neutre  { --pill-c: var(--poste-neutre);   background: var(--pill-c); }
.pill--school  { --pill-c: var(--poste-school);   background: var(--pill-c); }
.pill--database{ --pill-c: var(--poste-database); background: var(--pill-c); }

/* Brouillon / publié — brouillon façon SocialSchedules :
   pointillé à la couleur du poste + fond teinté clair (texte noir sur fond clair) */
.pill.is-brouillon {
  border: 1.5px dashed var(--pill-c, var(--poste-neutre));
  background: color-mix(in srgb, var(--pill-c, var(--poste-neutre)) 18%, #FFFFFF);
  color: var(--texte);
}
.pill.is-publie    { border: 1.5px solid transparent; }

/* ---------- Gros boutons de saisie (jamais de dropdown) ----------
   Le rouge brique 7R est la couleur d'action du kit. */
.btn-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gris-froid); color: var(--texte);
  border: 1.5px solid transparent; border-radius: var(--radius);
  padding: 12px 16px; font-size: 14px; cursor: pointer; user-select: none;
}
.btn-choice.is-selected { background: var(--c-brique); color: #FFFFFF; font-weight: 500; }
/* Bouton de validation d'un formulaire (Valider, Ajouter le shift) : charbon */
.btn-choice.btn-sombre { background: var(--c-valider); color: #FFFFFF; font-weight: 500; }
/* Bouton d'enregistrement pas encore prêt : garde son identité, un poil plus foncé que le neutre */
.btn-choice.btn-enr { filter: brightness(0.93); }
.btn-choice.btn-enr.btn-sombre { filter: none; }

/* ---------- Formulaires (source unique : plus de styles locaux) ---------- */
label { display: block; font-size: 12px; font-weight: 500; color: var(--texte); margin: 12px 0 4px; }
input, textarea {
  width: 100%; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 12px; font-size: 16px; font-family: inherit; /* 16px = pas de zoom iOS au focus */
  background: #FFFFFF; color: var(--texte);
}
input:focus, textarea:focus { outline: none; border-color: var(--c-brique); }

/* ---------- Badges statuts ---------- */
.badge { border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 500; }
.badge--attente { background: var(--statut-attente-bg); color: var(--statut-attente-tx); }
.badge--refuse  { background: var(--statut-refuse-bg);  color: var(--statut-refuse-tx); }
/* validé = 👍 affiché sur la demande, pas de badge */

/* ---------- Cartes ---------- */
.carte {
  background: var(--carte);
  border: 0.5px solid var(--bordure);
  border-radius: var(--radius-carte);
  padding: 16px;
}