/* ==========================================================================
   LO coiffure APP — feuille de style unique
   Écran : interface de saisie (pensée PC)
   Impression : reproduction des deux formulaires papier
   ========================================================================== */

:root {
  --bleu: #1f4e79;
  --bleu-clair: #eaf1f8;
  --gris-bord: #d3d8de;
  --gris-fond: #f5f6f8;
  --gris-texte: #6b7280;
  --rouge: #b42318;
  --vert: #157347;
  --rayon: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  color: #1f2933;
  background: var(--gris-fond);
}

/* ---------- Bandeaux ---------- */
.banner {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid transparent;
}
.banner--danger { background: #fdecea; color: var(--rouge); border-color: #f3c1bc; }
.banner--info { background: #fff8e1; color: #7a5b00; border-color: #f0dca0; }

/* ---------- En-tête et onglets ---------- */
.app-header {
  background: var(--bleu);
  color: #fff;
  padding: 12px 20px 0;
}
.app-header__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.app-header__title { font-size: 18px; font-weight: 600; }
.app-header__sub { font-size: 13px; opacity: .8; font-weight: 400; margin-left: 10px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  padding: 9px 18px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--rayon) var(--rayon) 0 0;
}
.tab:hover { background: rgba(255, 255, 255, .22); }
.tab.is-active { background: var(--gris-fond); color: var(--bleu); font-weight: 600; }

/* ---------- Structure des vues ---------- */
.view { padding: 22px 20px 60px; max-width: 1100px; margin: 0 auto; }

.card {
  background: #fff;
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card__title {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--bleu);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 0 0 auto; }
.grow { flex: 1 1 180px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field > label { font-size: 12px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .04em; }

input[type="text"], input[type="date"], input[type="month"], input[type="number"], select, textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 7px 9px;
  border: 1px solid var(--gris-bord);
  border-radius: 4px;
  background: #fff;
  color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu-clair); border-color: var(--bleu); }
input[readonly] { background: var(--gris-fond); color: var(--gris-texte); }

.btn {
  appearance: none;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--bleu);
  background: var(--bleu);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.12); }
.btn--ghost { background: #fff; color: var(--bleu); }
.btn--ghost:hover { background: var(--bleu-clair); filter: none; }
.btn--danger { background: #fff; color: var(--rouge); border-color: #e4b4ae; }
.btn--small { padding: 4px 9px; font-size: 13px; }
.btn--link { background: none; border: 0; color: var(--bleu); text-decoration: underline; cursor: pointer; padding: 2px 4px; font: inherit; }

/* ---------- Tableaux ---------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td {
  border-bottom: 1px solid var(--gris-bord);
  padding: 7px 9px;
  text-align: left;
  vertical-align: middle;
}
table.grid th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris-texte);
  background: var(--gris-fond);
  border-bottom: 2px solid var(--gris-bord);
}
table.grid tbody tr:hover { background: #fafbfc; }
table.grid tfoot td { font-weight: 600; border-top: 2px solid var(--gris-bord); border-bottom: 0; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.grid input[type="number"], .grid input[type="text"] { width: 100%; padding: 4px 6px; font-size: 14px; }
.grid .col-km input { width: 80px; text-align: right; }
.grid .col-nb input { width: 60px; text-align: right; }

.muted { color: var(--gris-texte); }
.small { font-size: 13px; }
.empty { padding: 24px; text-align: center; color: var(--gris-texte); }
.pill {
  display: inline-block;
  background: var(--bleu-clair);
  color: var(--bleu);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
}
.pill--off { background: #eee; color: var(--gris-texte); }
.pill--alerte { background: #fff8e1; color: #7a5b00; }

/* Encadré de total */
.total-box {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  background: var(--bleu-clair);
  border: 1px solid #c8d8e8;
  border-radius: var(--rayon);
  padding: 14px 18px;
}
.total-box__item { display: flex; flex-direction: column; }
.total-box__label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bleu); }
.total-box__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.total-box__calc { font-size: 13px; color: var(--gris-texte); align-self: flex-end; }

/* ==========================================================================
   État de la synchronisation
   ========================================================================== */

.sync-etat {
  display: inline-block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: #eef0f3;
  color: var(--gris-texte);
  white-space: nowrap;
}
.sync-etat--ok { background: #e8f5ee; color: var(--vert); border-color: #bfe0cd; }
.sync-etat--encours { background: var(--bleu-clair); color: var(--bleu); border-color: #c8d8e8; }
.sync-etat--horsligne { background: #fff8e1; color: #7a5b00; border-color: #f0dca0; }
.sync-etat--erreur,
.sync-etat--deconnecte { background: #fdecea; color: var(--rouge); border-color: #f3c1bc; }

/* Dans l'en-tête bleu, la pastille est un bouton : même code couleur, mais
   posé sur fond sombre, et cliquable pour relancer une synchronisation. */
#etat-sync {
  cursor: pointer;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
}
#etat-sync:hover { background: rgba(255, 255, 255, .26); }
#etat-sync.sync-etat--ok { background: rgba(255, 255, 255, .14); color: #cdebd9; }
#etat-sync.sync-etat--horsligne { background: rgba(255, 214, 102, .22); color: #ffe9b0; }
#etat-sync.sync-etat--erreur,
#etat-sync.sync-etat--deconnecte { background: rgba(255, 138, 128, .24); color: #ffd7d2; }

.app-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Téléphone et tablette

   L'interface a été dessinée pour un écran d'ordinateur. Sur un téléphone,
   trois choses comptent : que les doigts atteignent les commandes, que les
   champs ne déclenchent pas le zoom automatique d'iOS (il s'active en
   dessous de 16 px), et que les tableaux larges restent consultables — ils
   défilent horizontalement plutôt que d'être comprimés jusqu'à l'illisible.
   ========================================================================== */

@media (max-width: 760px) {
  .view { padding: 14px 12px 48px; }
  .card { padding: 14px 13px; margin-bottom: 14px; }

  .app-header { padding: 10px 13px 0; }
  .app-header__top { gap: 10px; }
  .app-header__title { font-size: 16px; }
  .app-header__sub { display: block; margin-left: 0; margin-top: 2px; }

  /* Les quatre onglets défilent d'un geste plutôt que de passer à la ligne. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 11px 14px; }

  /* 16 px minimum : en dessous, iOS zoome à chaque fois qu'un champ prend
     le focus, et l'utilisatrice doit dézoomer à la main entre deux saisies. */
  input[type="text"], input[type="date"], input[type="month"],
  input[type="number"], input[type="email"], input[type="password"],
  select, textarea { font-size: 16px; padding: 9px 10px; }

  .btn { padding: 10px 14px; }
  .btn--small { padding: 7px 10px; }
  input[type="checkbox"] { width: 20px; height: 20px; }

  .row { gap: 10px; }
  .grow { flex: 1 1 100%; }

  /* Les tableaux gardent leurs colonnes et défilent dans leur carte. */
  .card { overflow-x: auto; }
  table.grid { min-width: 620px; }
  table.grid th, table.grid td { padding: 8px 7px; }

  .total-box { gap: 18px; padding: 12px 14px; }
  .total-box__value { font-size: 19px; }
  .total-box__calc { align-self: flex-start; }
}

/* ==========================================================================
   Zone d'impression — masquée à l'écran
   ========================================================================== */
.print-area { display: none; }

@media print {
  body { background: #fff; font-family: "Times New Roman", Georgia, serif; }
  .app-header, .view, .banner { display: none !important; }
  .print-area { display: block !important; }

  .sheet { color: #000; }

  .sheet__head { width: 100%; margin-bottom: 14px; }
  .sheet__head td { padding: 3px 0; font-size: 13pt; vertical-align: top; }
  .sheet__head .lbl { font-weight: 400; }

  table.sheet__table { border-collapse: collapse; margin: 0 auto; }
  table.sheet__table th,
  table.sheet__table td {
    border: 1px solid #000;
    padding: 4px 8px;
    font-size: 12pt;
    height: 26px;
  }
  table.sheet__table th { font-weight: 700; text-align: center; }
  table.sheet__table td.num { text-align: right; }
  table.sheet__table tr.jour-sep td { border-top: 2px solid #000; }
  table.sheet__table tr.sous-total td { font-style: italic; }

  .sheet__total { margin-top: 10px; text-align: center; font-size: 13pt; font-weight: 700; }
  .sheet__remb { margin-top: 26px; font-size: 13pt; }
  .sheet__remb strong { display: block; margin-bottom: 8px; }

  /* Mention de régime fiscal, en pied du livre des recettes */
  .sheet__mention { margin-top: 22px; font-size: 11pt; font-style: italic; }

  /* Récap mensuel : tableau étroit centré, comme le formulaire papier */
  .sheet--recap table.sheet__table { width: 62%; }
  .sheet--recap table.sheet__table th:first-child,
  .sheet--recap table.sheet__table td:first-child { width: 55%; text-align: center; }

  /* Livre des recettes : pleine largeur en portrait */
  .sheet--recettes table.sheet__table { width: 100%; }
  .sheet--recettes .col-date { width: 11%; }
  .sheet--recettes .col-client { width: 34%; }
  .sheet--recettes .col-presta { width: 25%; }
  .sheet--recettes .col-montant { width: 14%; }
  .sheet--recettes .col-regl { width: 16%; }

  /* Détail journalier : pleine largeur en paysage */
  .sheet--detail table.sheet__table { width: 100%; }
  .sheet--detail .col-date { width: 12%; }
  .sheet--detail .col-depart { width: 33%; }
  .sheet--detail .col-arrivee { width: 39%; }
  .sheet--detail .col-km { width: 16%; }

  tr, td, th { page-break-inside: avoid; }
}