/* CFPC Pro-Tracker — Interface chef de chantier (Phase 30 §4)
 *
 * Écrans destinés à un usage sur téléphone, en extérieur, par un
 * utilisateur peu à l'aise avec l'écrit. Tout est surdimensionné : texte
 * 18 px minimum, boutons de 80 px de haut, compteurs à gros boutons ronds
 * plutôt que des champs numériques à taper.
 *
 * Fond blanc imposé, indépendant du thème sombre : ces écrans se
 * consultent en plein soleil, où un fond sombre devient illisible.
 */

.field-app {
  font-size: 18px;
  background: #ffffff;
  color: #0f172a;
  min-height: 100vh;
}

.field-app .field-muted {
  color: #64748b;
}

.field-btn {
  min-height: 80px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 2px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  padding: 12px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.field-btn:active {
  transform: scale(0.98);
}

.field-btn-primary {
  background: #f97316;
  color: #ffffff;
  border-color: #f97316;
}

.field-btn-danger {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

.field-btn-ghost {
  background: #ffffff;
  color: #64748b;
  min-height: 56px;
  font-size: 16px;
  font-weight: 600;
}

.field-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Compteur ⬅️ [ X ] ➡️ : la saisie se fait au pouce, pas au clavier. */
.field-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
}

.field-counter button {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  font-size: 26px;
  background: #f1f5f9;
  border: none;
  color: #0f172a;
  cursor: pointer;
}

.field-counter button:active {
  background: #e2e8f0;
}

.field-counter input {
  width: 110px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 4px;
  color: #0f172a;
  background: #ffffff;
}

.field-project-card {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  background: #ffffff;
}

.field-alert {
  background: #fef2f2;
  border: 2px solid #fecaca;
  border-radius: 12px;
  padding: 16px;
  color: #dc2626;
  font-size: 18px;
  font-weight: 700;
}

.field-warning {
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: 12px;
  padding: 16px;
  color: #d97706;
}

.field-ok {
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px;
  color: #15803d;
}

/* Barre de progression épaisse : lisible d'un coup d'œil. */
.field-progress {
  height: 14px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.field-progress > div {
  height: 100%;
  border-radius: 999px;
  background: #f97316;
}

.field-input {
  width: 100%;
  font-size: 18px;
  padding: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #0f172a;
  background: #ffffff;
}

.field-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  border-bottom: 2px solid #e2e8f0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-photo-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
}

/* Ligne de tache pointable. Toute la ligne est une cible tactile : viser
   une case a cocher de 20 px avec un doigt sale sur un chantier ne marche
   pas. Hauteur minimale 56 px, la recommandation d'accessibilite. */
.field-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  font-size: 17px;
  text-align: left;
  color: #0f172a;
  cursor: pointer;
}

.field-task-row:active {
  background: #f1f5f9;
}

.field-task-box {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.field-task-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.field-task-done .field-task-text {
  text-decoration: line-through;
}


/* ---- Phase 35 : taches du planning detaille -------------------------- */
/* Cartes plus hautes et texte plus gros que dans le reste de l'app : cet
   ecran se lit au soleil, a bout de bras, avec des gants. */
.field-task {
  border: 2px solid var(--field-border, #d8d8d8);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
  font-size: 17px;
  line-height: 1.35;
}

.field-task--current {
  border-color: #2563eb;
  background: #eff6ff;
}

.field-task--wait {
  border-color: #f59e0b;
  background: #fffbeb;
}

.field-btn--sm {
  min-height: 54px;
  font-size: 15px;
  padding: 10px 12px;
}

.field-btn--ok {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}