/*
  Punch — feuille de style unique.

  Deux règles ont guidé tout le reste :

  1. L'écran de punch est vu 20 fois par jour, souvent d'une main, dehors,
     parfois avec des gants. Les cibles tactiles font 56 px minimum et les
     boutons d'action vivent dans le tiers inférieur de l'écran, à portée
     du pouce.
  2. Aucune dépendance. Pas de Tailwind, pas de framework CSS : à cette
     taille, des variables CSS et 400 lignes lisibles valent mieux qu'un
     build à maintenir pendant dix ans.
*/

:root {
  --bg:        #f1f5f9;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --border:    #e2e8f0;
  --text:      #0f172a;
  --muted:     #64748b;
  --primary:   #1d4ed8;
  --primary-d: #1e40af;
  --success:   #15803d;
  --success-d: #166534;
  --danger:    #b91c1c;
  --danger-d:  #991b1b;
  --warning:   #b45309;
  --radius:    14px;
  --shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --nav-h:     64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0b1220;
    --surface:   #111a2b;
    --surface-2: #162034;
    --border:    #1f2b45;
    --text:      #e8eefc;
    --muted:     #94a3b8;
    --primary:   #3b82f6;
    --primary-d: #2563eb;
    --success:   #22c55e;
    --success-d: #16a34a;
    --danger:    #ef4444;
    --danger-d:  #dc2626;
    --warning:   #f59e0b;
    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/*
  L'attribut `hidden` ne vaut que `display: none` dans la feuille du
  navigateur : dès qu'une règle à nous fixe un `display` (flex, grid…),
  elle gagne et l'élément reste visible. Sans ce !important, la barre de
  navigation s'affichait par-dessus l'écran de connexion.
*/
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { padding-bottom: calc(var(--nav-h) + var(--safe-b)); }
body.no-nav { padding-bottom: 0; }

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--primary); }

/* ------------------------------------------------------------------ */
/* Structure                                                           */
/* ------------------------------------------------------------------ */

.view { padding: 1rem 1rem 1.5rem; max-width: 720px; margin: 0 auto; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-title  { font-weight: 650; font-size: 1.05rem; }
.topbar-action {
  border: 0; background: none; color: var(--primary);
  font: inherit; font-weight: 600; padding: .5rem; cursor: pointer;
}

.boot { text-align: center; padding: 4rem 1rem; color: var(--muted); }

.spinner {
  width: 28px; height: 28px; margin: 0 auto 1rem;
  border: 3px solid var(--border); border-top-color: var(--primary);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ */
/* Navigation du bas — 4 onglets, cibles de 56 px                      */
/* ------------------------------------------------------------------ */

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-b);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px;
  color: var(--muted); text-decoration: none;
  font-size: .72rem; font-weight: 600;
}
.nav-item[aria-current="page"] { color: var(--primary); }
.nav-icon { font-size: 1.25rem; line-height: 1; }

/* ------------------------------------------------------------------ */
/* Cartes et listes                                                     */
/* ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: .75rem;
}
.card-tight { padding: .75rem; }

.row { display: flex; align-items: center; gap: .75rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: .75rem; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny  { font-size: .75rem; }
.strong { font-weight: 650; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }

.section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  margin: 1.25rem 0 .5rem;
}

/* ------------------------------------------------------------------ */
/* Boutons                                                              */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.1rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 64px; font-size: 1.15rem; border-radius: 16px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-ghost   { background: transparent; }
.btn-row { display: flex; gap: .5rem; }
.btn-row > .btn { flex: 1; }

/* ------------------------------------------------------------------ */
/* Champs                                                               */
/* ------------------------------------------------------------------ */

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }

input, select, textarea {
  width: 100%; min-height: 48px;
  padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  font: inherit;
  /* 16 px minimum : en dessous, iOS zoome au focus et casse la mise en page. */
  font-size: 16px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.field + .field { margin-top: .75rem; }
.field-error { color: var(--danger); font-size: .85rem; margin-top: .35rem; }

.checkline { display: flex; align-items: center; gap: .6rem; }
.checkline input { width: 22px; height: 22px; min-height: 0; }
.checkline label { margin: 0; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Écran de punch                                                       */
/* ------------------------------------------------------------------ */

.hello { font-size: 1.35rem; font-weight: 650; margin: .25rem 0 1rem; }

.punch-active {
  background: var(--surface);
  border: 2px solid var(--success);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.live {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--success); font-weight: 700; font-size: .8rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--success); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; } }

.timer {
  font-size: 3rem; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  margin: .75rem 0 .25rem;
}

.totals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.total-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: .7rem .5rem; text-align: center;
}
.total-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.total-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.project-item {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; min-height: 64px; padding: .75rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: .5rem;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.project-item .go {
  flex: 0 0 auto; min-height: 44px; padding: .55rem 1rem;
  border-radius: 10px; background: var(--success); color: #fff;
  font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center;
}

/* ------------------------------------------------------------------ */
/* Budget                                                               */
/* ------------------------------------------------------------------ */

/* `display: block` explicite : la barre sert aussi dans un <span> (fiche
   projet), et un span inline ignorerait purement et simplement height. */
.bar { display: block; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--success); }
.bar.warning  > span { background: var(--warning); }
.bar.critical > span { background: #ea580c; }
.bar.over     > span { background: var(--danger); }

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.badge-warning  { color: var(--warning); border-color: var(--warning); }
.badge-critical { color: #ea580c; border-color: #ea580c; }
.badge-over     { color: var(--danger); border-color: var(--danger); }
.badge-success  { color: var(--success); border-color: var(--success); }

/*
 * Marque « payé » sur une ligne d'historique. Volontairement colorée et
 * non pas en texte gris parmi les autres mentions : après avoir marqué
 * une paye, il faut VOIR sur chaque punch qu'il est payé, sinon rien ne
 * confirme que l'opération a porté.
 */
.tag-paid {
  display: inline-block; padding: 0 .35rem; border-radius: 4px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--success); border: 1px solid var(--success);
}

/* ------------------------------------------------------------------ */
/* Historique                                                           */
/* ------------------------------------------------------------------ */

.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.25rem 0 .5rem; font-weight: 650;
}
.entry {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .75rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: .5rem;
  width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
}
.entry-time { flex: 0 0 88px; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); }
.entry-dur  {
  flex: 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums;
  text-align: right; line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Tableaux (rapports)                                                  */
/* ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 2px solid var(--border); }

/* ------------------------------------------------------------------ */
/* Feuille glissante                                                    */
/* ------------------------------------------------------------------ */

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: .5rem 1rem calc(1.25rem + var(--safe-b));
  box-shadow: 0 -8px 30px rgba(15, 23, 42, .25);
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(14px); opacity: .7; } }
.sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--border); margin: .35rem auto 1rem;
}

/* ------------------------------------------------------------------ */
/* Bandeaux et notifications                                            */
/* ------------------------------------------------------------------ */

.banner {
  position: sticky; top: 0; z-index: 40;
  padding: .6rem 1rem; font-size: .88rem; font-weight: 600;
  color: #fff; background: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.banner.offline { background: #475569; }
.banner.update  { background: var(--primary); }
.banner.warn    { background: var(--warning); }
.banner button {
  border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff;
  border-radius: 8px; padding: .3rem .7rem; font: inherit; font-weight: 700; cursor: pointer;
}

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  z-index: 70; max-width: 90vw;
  background: var(--text); color: var(--bg);
  padding: .7rem 1rem; border-radius: 12px;
  font-size: .9rem; font-weight: 600; box-shadow: var(--shadow);
}
.toast.error { background: var(--danger); color: #fff; }

.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.empty-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* ------------------------------------------------------------------ */
/* Pavé NIP                                                             */
/* ------------------------------------------------------------------ */

.pin-dots { display: flex; gap: .6rem; justify-content: center; margin: 1.25rem 0 1.5rem; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--muted); background: transparent;
}
.pin-dot.on { background: var(--primary); border-color: var(--primary); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 320px; margin: 0 auto; }
.key {
  min-height: 64px; font-size: 1.4rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.key:active { background: var(--surface-2); }
.key-blank { border: 0; background: none; cursor: default; }

/* ------------------------------------------------------------------ */
/* Fiche projet — qui a travaillé dessus                                */
/* ------------------------------------------------------------------ */

/* Zone cliquable qui ouvre la fiche : elle occupe le nom et le client,
   pas toute la carte, sinon elle avalerait le bouton PUNCH et l'étoile. */
.project-open {
  display: flex; align-items: center; gap: .5rem;
  flex: 1; min-width: 0; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: var(--text);
  text-align: left; cursor: pointer;
}
.project-open .chev { flex: 0 0 auto; color: var(--muted); font-size: 1.1rem; }

/* Pastille d'initiales. La teinte vient de l'identifiant de l'employé :
   la même personne garde la même couleur d'un écran à l'autre, sans
   qu'aucune couleur n'ait à être stockée en base. */
.who {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.who-lg { width: 38px; height: 38px; font-size: .85rem; }

.who-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
.who-row + .who-row { border-top: 1px solid var(--border); }

/* Sélecteur de période. */
.seg { display: flex; gap: .35rem; }
.seg button {
  flex: 1; min-height: 38px; padding: .35rem .5rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* Sur écran large, on centre au lieu d'étirer sur toute la largeur. */
@media (min-width: 800px) {
  .view { padding-top: 1.5rem; }
}

/* Fiche d'un projet : « Heures par période ». */
.span-nav { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.span-arrow { min-height: 40px; min-width: 44px; padding: .35rem .6rem; }
.span-label { flex: 1; min-width: 0; text-align: center; font-weight: 650; }
.span-total {
  text-align: center; font-size: 2.25rem; font-weight: 700;
  font-variant-numeric: tabular-nums; margin: .5rem 0 0; line-height: 1.2;
}
.span-sub { text-align: center; }
.span-row {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .45rem 0; border: 0; background: none; text-align: left;
  font: inherit; color: var(--text); cursor: pointer;
}
.span-row + .span-row { border-top: 1px solid var(--border); }
.span-row > .bar { flex: 1; }
.span-row-label { flex: 0 0 6.5rem; font-size: .85rem; }
.span-row-value {
  flex: 0 0 4.25rem; text-align: right; font-size: .9rem;
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.span-row.is-today .span-row-label { color: var(--primary); font-weight: 700; }
.span-row.is-future { opacity: .45; cursor: default; }