/* =====================================================================
   Pointage : même interface que l'HACCP (styles.css), schéma orange (source #9C4A00).
   Mêmes rôles, autre source : on sait en un regard dans quelle application on est.
   Seules les variables changent, les composants sont communs ; le vert HACCP devient la couleur tertiaire.
   ===================================================================== */
body[data-app="pointage"] {
  --primary: #9C4A00;
  --primary-hover: #7A3600;
  --on-primary: #ffffff;
  --primary-container: #FFDBC8;
  --on-primary-container: #331200;
  --secondary: #765848;
  --secondary-container: #FFDCC6;
  --on-secondary-container: #2F1500;
  --tertiary: #006A60;
  --tertiary-container: #9EF2E4;
  --on-tertiary-container: #00201C;
  --surface: #FFF8F5;
  --surface-lowest: #ffffff;
  --surface-low: #FDF1EA;
  --surface-container: #FCEAE3;
  --surface-high: #F6E4DD;
  --surface-highest: #ECE0D8;
  --on-surface: #221A15;
  --on-surface-variant: #52443C;
  --outline: #85736B;
  --outline-variant: #D7C2B9;
  --inverse-surface: #382E29;
  --inverse-on-surface: #FFEDE5;
  --inverse-primary: #FFB77C;
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%2352443C'%3E%3Cpath transform='rotate(90 480 -480)' d='M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body[data-app="pointage"] {
  --primary: #FFB77C;
  --primary-hover: #FFDBC8;
  --on-primary: #532200;
  --primary-container: #763300;
  --on-primary-container: #FFDBC8;
  --secondary: #E6BEAB;
  --secondary-container: #5C4033;
  --on-secondary-container: #FFDCC6;
  --tertiary: #82D5C8;
  --tertiary-container: #005048;
  --on-tertiary-container: #9EF2E4;
  --surface: #1A120D;
  --surface-lowest: #140C08;
  --surface-low: #221A15;
  --surface-container: #271E19;
  --surface-high: #322823;
  --surface-highest: #3D322D;
  --on-surface: #F0DED8;
  --on-surface-variant: #D7C2B9;
  --outline: #A08D84;
  --outline-variant: #52443C;
  --inverse-surface: #F0DED8;
  --inverse-on-surface: #382E29;
  --inverse-primary: #9C4A00;
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23D7C2B9'%3E%3Cpath transform='rotate(90 480 -480)' d='M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z'/%3E%3C/svg%3E");
}
html:has(body[data-app="pointage"]) { background: #FFF8F5; }
:root[data-theme="dark"]:has(body[data-app="pointage"]) { background: #1A120D; }

/* ---------- Choix de l'application (après la connexion, et sur la tablette) : deux tuiles en couleur pleine ---------- */
.apps { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 24px; padding: 24px 16px 40px; }
.apps-head { text-align: center; display: grid; gap: 4px; justify-items: center; animation: rise .55s var(--spring-soft) backwards; }
.apps-head img { border-radius: 16px; }
.apps-head h1 { margin: 8px 0 0; font-size: 2rem; line-height: 2.375rem; }
.apps-head p { margin: 0; color: var(--on-surface-variant); }
.apps-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); width: min(760px, 100%); }
.app-tile {
  position: relative; display: grid; gap: 10px; justify-items: start; text-align: left; padding: 24px; min-height: 208px; border-radius: var(--r-xl);
  text-decoration: none; color: #fff; overflow: hidden;
  transition: transform .4s var(--spring), border-radius .4s var(--spring); animation: rise .55s var(--spring-soft) .08s backwards;
}
.app-tile::after { content: ''; position: absolute; right: -96px; bottom: -112px; width: 240px; height: 240px; pointer-events: none; animation: spin-slow 40s linear infinite; }
.app-tile > * { position: relative; }
.app-tile:active { transform: scale(.98); border-radius: var(--r-lg); }
.app-tile .ico { width: 36px; height: 36px; padding: 0; background: none; }
.app-tile strong { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.app-tile span { opacity: .92; font-size: .9375rem; line-height: 1.375rem; font-weight: 500; }
.app-tile.haccp { background: #006A60; }
.app-tile.haccp::after { background: #9EF2E4; opacity: .3; mask: var(--shape-cookie) center / contain no-repeat; -webkit-mask: var(--shape-cookie) center / contain no-repeat; }
.app-tile.pointage { background: #9C4A00; animation-delay: .14s; }
.app-tile.pointage::after { background: #FFB77C; opacity: .32; mask: var(--shape-sunny) center / contain no-repeat; -webkit-mask: var(--shape-sunny) center / contain no-repeat; animation-direction: reverse; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.apps-foot { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: rise .55s var(--spring-soft) .2s backwards; }
.apps-foot .link { color: var(--on-surface-variant); }

/* ---------- Statuts de présence ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-sm); font-size: .8125rem; line-height: 1.25rem; font-weight: 700; white-space: nowrap; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st.present { background: var(--ok-container); color: var(--on-ok-container); }
.st.field { background: var(--info-container); color: var(--on-info-container); }
.st.break { background: var(--surface-highest); color: var(--on-surface-variant); }
.st.late { background: var(--warn-container); color: var(--on-warn-container); }
.st.absent { background: var(--bad-container); color: var(--on-bad-container); }
.st.leave { background: var(--leave-container); color: var(--on-leave-container); }
.st.left, .st.off, .st.expected { background: var(--surface-highest); color: var(--on-surface-variant); }

.people { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 24px; }
.person {
  background: var(--surface-low); border-radius: var(--r-lg); padding: 14px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; white-space: normal; justify-content: stretch; align-content: start; min-height: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
  transition: background .2s, border-radius .4s var(--spring), transform .4s var(--spring);
}
.person:hover { background: var(--surface-container); }
.person:active { border-radius: var(--r-xl); transform: scale(.98); }
.person-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-top > div { min-width: 0; }
.person-top strong { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-top small { color: var(--on-surface-variant); font-size: .8125rem; }
.person .bar { height: 4px; border-radius: 2px; background: var(--surface-highest); overflow: hidden; }
.person .bar i { display: block; height: 100%; background: var(--primary); border-radius: 2px; transform-origin: left; animation: grow .9s var(--spring-soft) .3s backwards; }
@keyframes grow { from { transform: scaleX(0); } }
.person .bar i.over { background: var(--bad); }
.person > small { color: var(--on-surface-variant); font-size: .8125rem; }
.dot-avatar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800; background: var(--secondary-container); color: var(--on-secondary-container); mask: var(--shape-cookie) center / 100% 100% no-repeat; -webkit-mask: var(--shape-cookie) center / 100% 100% no-repeat; }

/* ---------- Feuilles de temps ---------- */
.week-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.week-nav strong { min-width: 15ch; text-align: center; }
.week-nav select { width: auto; }
.sheet { margin-bottom: 20px; }
.sheet h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 1.25rem; margin: 0 0 8px; }
.sheet h2 small { color: var(--on-surface-variant); font-weight: 500; font-size: .875rem; }
.sheet tbody tr { cursor: pointer; }
.sheet tbody tr:hover td { background: var(--surface-container); }
.sheet tfoot td { font-weight: 700; background: var(--surface-container); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Tableau de chiffres aux intitulés longs (Compteurs) : l'intitulé passe sur deux lignes, la colonne reste à la largeur du chiffre. */
table.head-wrap th { white-space: normal; vertical-align: bottom; }
table.head-wrap td:first-child { min-width: 150px; }
.neg { color: var(--bad); }
.pos { color: var(--ok); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.punch-list { display: grid; gap: 8px; margin: 8px 0 16px; }
.punch-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border-radius: var(--r-lg); padding: 10px 12px; }
.punch-row time { font-size: 1.25rem; font-weight: 800; font-stretch: 105%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.punch-row small { display: block; color: var(--on-surface-variant); }
.punch-row.deleted { opacity: .55; }
.punch-row.deleted time { text-decoration: line-through; }
.sig-thumb { height: 36px; max-width: 110px; background: #fff; border: 1px solid var(--outline-variant); border-radius: 6px; }
.audit-item { border-radius: var(--r-lg); padding: 10px 14px; margin-bottom: 8px; font-size: .9375rem; }
.audit-item header { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.audit-item time { color: var(--on-surface-variant); font-size: .8125rem; }
.audit-item p { margin: 4px 0 0; color: var(--on-surface-variant); }

/* ---------- Planning ---------- */
.plan-wrap { overflow-x: auto; background: var(--surface-low); border-radius: var(--r-lg); }
.plan { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: .8125rem; }
.plan th, .plan td { border-bottom: 1px solid var(--outline-variant); border-right: 1px solid var(--outline-variant); padding: 6px; vertical-align: top; }
.plan th { background: var(--surface-container); text-align: center; font-weight: 700; }
.plan th.today { background: var(--primary-container); color: var(--on-primary-container); }
.plan th small { display: block; font-weight: 500; color: var(--on-surface-variant); }
.plan td.name { position: sticky; left: 0; background: var(--surface-lowest); font-weight: 700; min-width: 130px; z-index: 1; }
.plan td.cell { cursor: pointer; min-width: 96px; height: 52px; }
.plan td.cell:hover { background: var(--surface-container); }
.plan td.holiday, .plan th.holiday { background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-highest) 6px, var(--surface-highest) 12px); }
.shift { display: block; background: var(--secondary-container); color: var(--on-secondary-container); border-radius: var(--r-sm); padding: 2px 6px; margin-bottom: 3px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shift.off { background: var(--surface-highest); color: var(--on-surface-variant); font-weight: 500; }
.shift.leave { background: var(--leave-container); color: var(--on-leave-container); }
.shift.leave.pending { background: transparent; box-shadow: inset 0 0 0 1px var(--leave); color: var(--on-leave-container); }
.plan tfoot td { background: var(--surface-container); font-weight: 700; text-align: center; }
.plan tfoot td.under { background: var(--bad-container); color: var(--on-bad-container); }
/* Tablette en portrait (700 à 900 px) : la semaine entière tient à l'écran, sans défilement. Téléphone : défilement avec la colonne des noms fixe. */
@media (min-width: 700px) and (max-width: 900px) {
  .plan { min-width: 0; table-layout: fixed; }
  .plan thead th:first-child { width: 120px; }
  .plan th, .plan td { padding: 4px; }
  .plan td.name { min-width: 0; }
  .plan td.cell { min-width: 0; }
  .shift { padding: 2px 4px; font-size: .75rem; white-space: normal; }
}
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.month .dow { text-align: center; font-weight: 700; font-size: .8125rem; color: var(--on-surface-variant); padding: 4px; }
.month .mday {
  background: var(--surface-low); border-radius: var(--r-md); padding: 6px; min-height: 84px;
  display: grid; grid-template-columns: minmax(0, 1fr); white-space: normal; justify-content: stretch; align-content: start; gap: 2px; font-size: .75rem; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.month .mday:hover { background: var(--surface-container); }
.month .mday b { font-size: .9375rem; }
.month .mday.other { opacity: .45; }
.month .mday.today { box-shadow: inset 0 0 0 2px var(--primary); }
.month .mday.under { background: var(--bad-container); color: var(--on-bad-container); }
.timeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tl-row { display: grid; grid-template-columns: var(--tl-name, 140px) minmax(0, 1fr); gap: 8px; align-items: center; font-size: .8125rem; }
.tl-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-track { position: relative; height: 30px; background: var(--surface-container); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; }
.tl-track .p { position: absolute; top: 3px; height: 11px; background: var(--primary-container); border-radius: 4px; }
.tl-track .w { position: absolute; bottom: 3px; height: 11px; background: var(--primary); border-radius: 4px; }
.tl-track .l { position: absolute; inset: 3px 0; background: var(--leave-container); border-radius: 4px; }
.tl-scale { display: grid; grid-template-columns: var(--tl-name, 140px) minmax(0, 1fr); gap: 8px; font-size: .6875rem; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.tl-ticks { display: grid; grid-template-columns: repeat(var(--ticks, 12), minmax(0, 1fr)); }
.tl-ticks > span { white-space: nowrap; }
/* Téléphone : colonne des noms plus étroite et une heure sur deux, pour que les heures ne se chevauchent pas. */
@media (max-width: 640px) {
  .timeline { --tl-name: 108px; }
  .tl-ticks > span:nth-child(even) { visibility: hidden; }
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--on-surface-variant); margin: 8px 0 16px; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* ---------- Tablette : choix du salarié, action (boutons L, 96), signature ---------- */
.kiosk-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 720px; margin: 0 auto 24px; }
.kiosk-actions button { min-height: 96px; font-size: 1.5rem; font-weight: 800; font-stretch: 105%; border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; gap: 12px; }
.kiosk-actions button:active { border-radius: var(--r-lg); }
.kiosk-actions button .ico { width: 32px; height: 32px; }
/* Feuille blanche cernée, en clair comme en sombre : la signature est enregistrée sur fond blanc. */
.sign-pad { display: block; width: min(640px, 100%); height: 240px; margin: 0 auto; background: #fff; outline: 1px solid var(--outline); outline-offset: -1px; border-radius: var(--r-lg); touch-action: none; cursor: crosshair; }
.sign-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.sign-actions button { min-width: 160px; min-height: 56px; }
.kiosk-done { text-align: center; display: grid; justify-items: center; gap: 8px; margin-top: 12vh; animation: rise .55s var(--spring-soft) backwards; }
.kiosk-done .ico { width: 96px; height: 96px; color: var(--ok); animation: pop .7s var(--spring) backwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.kiosk-done strong { font-size: 2.25rem; line-height: 2.75rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.kiosk-users .st { font-size: .75rem; }
.kiosk-search { display: block; max-width: 420px; margin: 0 auto 16px; }
.post-chips { justify-content: center; }
.field-toggle { display: flex; justify-content: center; margin-bottom: 16px; }

/* ---------- Compléments ---------- */
.pt-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 16px; }
.pt-filters label { min-width: 150px; }
.pt-filters label.check { min-width: 0; }
.pt-filters select, .week-nav select { width: auto; min-width: 160px; }
.slot-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) 44px; gap: 8px; align-items: end; background: var(--surface-container); border-radius: var(--r-lg); padding: 8px 10px; margin-bottom: 8px; }
.slot-row input, .slot-row select { min-height: 44px; padding: 0 10px; }
.slot-row select { padding-right: 30px; background-position: right 4px center; background-size: 20px; }
.slot-row .icon-btn { width: 44px; height: 44px; }
.sheet tr.is-today td:first-child { box-shadow: inset 3px 0 var(--primary); font-weight: 700; }
.plan td.name small, .shift small { display: block; font-weight: 500; }
.plan tfoot td small { display: block; font-weight: 500; }
table.clickable tbody tr { cursor: pointer; }
table.clickable tbody tr:hover td { background: var(--surface-container); }
tr.deleted td { opacity: .55; text-decoration: line-through; }
.tl-row > span small { display: block; color: var(--on-surface-variant); }
.tl-track i { display: block; }
.tl-track .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); }
.tl-track:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.month .mday span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month .mday.holiday { background: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-highest) 6px, var(--surface-highest) 12px); }
.sig-full { display: block; max-width: 100%; background: #fff; border: 1px solid var(--outline-variant); border-radius: var(--r-md); }
.leave-card p, .req p { margin: 6px 0 0; }
.leave-card .row, .req .row { margin-top: 8px; }
.leave-card .row:first-child, .req .row:first-child { margin-top: 0; }
.punch-row strong { display: block; }
.plan td.cell:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media print { .plan-wrap { overflow: visible; } .plan { min-width: 0; } }
.nowrap { white-space: nowrap; }
/* Un bouton masqué (attribut hidden) le reste malgré son affichage en flex. */
button[hidden], .btn[hidden] { display: none !important; }