/* ══════════════════════════════════════════════════════════════════════════
   SOCLE D'INTERFACE ALMAWARID — composants, pas décoration.

   Boss 11/09 : « these pages are very basic, not good at all, can we fix this
   forever ». La cause n'était pas une page ratée : AUCUNE page n'était obligée
   de ressembler aux autres. Chaque écran réinventait sa mise en page en style
   en ligne, donc la qualité dépendait de qui l'écrivait.

   Règle : un écran COMPOSE ces classes, il n'invente pas de style de mise en
   page. Une garde (tests/e2e_test.py, SocleInterfaceTests) refuse au deploy
   tout formulaire qui repart en style en ligne.

   Palette verrouillée (skill almawarid-ui) : #024dec indigo · #15803d vert ·
   #d97706 ambre · #dc2626 rouge · #0299d0 cyan cabinet · #64748b gris ·
   #e2e8f0 bordures · #f8fafc fond.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ui-gap:16px; --ui-radius:14px; --ui-radius-sm:10px;
  --ui-ink:#0f172a; --ui-ink-2:#475569; --ui-muted:#64748b;
  --ui-line:#e2e8f0; --ui-line-fort:#cbd5e1; --ui-fond:#f8fafc; --ui-carte:#fff;
  --ui-primaire:#024dec; --ui-primaire-doux:#e8effe;
  --ui-ok:#15803d; --ui-ambre:#d97706; --ui-rouge:#dc2626;
  --ui-touche:44px;                 /* cible tactile minimale */
}

/* ── Page : largeur, respiration, bas de page dégagé ────────────────────── */
.ui-page{max-width:900px;margin:0 auto;padding:20px 14px calc(28px + var(--app-bottom-clearance,0px));}
.ui-page.large{max-width:1180px;}
.ui-page.etroite{max-width:640px;}

/* ── En-tête : retour, titre, actions — toujours au même endroit ────────── */
.ui-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.ui-head .ui-retour{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;
  border:1px solid var(--ui-line);background:var(--ui-carte);color:var(--ui-ink-2);text-decoration:none;
  font-size:1.05rem;flex:0 0 auto;}
.ui-head .ui-retour:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ui-head .ui-titres{flex:1;min-width:200px;}
.ui-head h1{font-size:1.35rem;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--ui-ink);
  display:flex;align-items:center;gap:9px;text-wrap:balance;}
.ui-head h1 .bi{font-size:1.15rem;}
.ui-head .ui-sous{font-size:.88rem;color:var(--ui-muted);margin:4px 0 0;max-width:70ch;}
.ui-head .ui-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ── Carte : le conteneur de tout contenu ───────────────────────────────── */
.ui-carte{background:var(--ui-carte);border:1px solid var(--ui-line);border-radius:var(--ui-radius);
  padding:18px;margin-bottom:14px;}
.ui-carte + .ui-carte{margin-top:0;}
.ui-carte .ui-carte-titre{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ui-muted);margin:0 0 13px;display:flex;align-items:center;gap:8px;}
.ui-carte .ui-carte-titre::after{content:"";flex:1;height:1px;background:var(--ui-line);}

/* ── Grille de champs : une seule colonne sur téléphone ─────────────────── */
.ui-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--ui-gap);}
.ui-c12{grid-column:span 12;} .ui-c8{grid-column:span 8;} .ui-c6{grid-column:span 6;}
.ui-c4{grid-column:span 4;} .ui-c3{grid-column:span 3;}
@media(max-width:760px){ .ui-c8,.ui-c6,.ui-c4,.ui-c3{grid-column:span 12;} }

/* ── Champ : label, contrôle, aide, erreur ──────────────────────────────── */
.ui-champ{display:flex;flex-direction:column;gap:6px;}
.ui-champ > label{font-size:.78rem;font-weight:700;color:var(--ui-ink-2);letter-spacing:.01em;}
.ui-champ > label .ui-requis{color:var(--ui-rouge);margin-inline-start:2px;}
.ui-champ .ui-aide{font-size:.78rem;color:var(--ui-muted);line-height:1.45;}
.ui-champ .ui-erreur{font-size:.78rem;color:var(--ui-rouge);font-weight:600;}
.ui-champ input:not([type=checkbox]):not([type=radio]),
.ui-champ select, .ui-champ textarea{
  width:100%;box-sizing:border-box;min-height:var(--ui-touche);
  border:1.5px solid var(--ui-line-fort);border-radius:var(--ui-radius-sm);
  padding:10px 12px;font-size:.95rem;font-family:inherit;color:var(--ui-ink);
  background:var(--ui-carte);outline:none;transition:border-color .12s,box-shadow .12s;}
.ui-champ textarea{min-height:96px;resize:vertical;}
.ui-champ input:focus, .ui-champ select:focus, .ui-champ textarea:focus{
  border-color:var(--ui-primaire);box-shadow:0 0 0 3px var(--ui-primaire-doux);}
.ui-champ input[aria-invalid="true"], .ui-champ.en-erreur input,
.ui-champ.en-erreur select, .ui-champ.en-erreur textarea{border-color:var(--ui-rouge);}
.ui-champ input[dir="ltr"], .ui-champ .ui-nombre{font-variant-numeric:tabular-nums;}

/* ── Barre d'actions : collante sur téléphone, jamais cachée ────────────── */
.ui-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.ui-actions .ui-espace{flex:1;}
@media(max-width:760px){
  .ui-actions{position:sticky;bottom:var(--app-bottom-clearance,0px);z-index:5;
    background:linear-gradient(180deg,rgba(248,250,252,0),var(--ui-fond) 26%);
    padding:12px 0 calc(10px + env(safe-area-inset-bottom,0px));margin-top:10px;}
  .ui-actions .ui-btn{flex:1 1 auto;justify-content:center;}
}
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-touche);
  padding:11px 18px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:.95rem;
  font-family:inherit;cursor:pointer;text-decoration:none;transition:filter .12s,border-color .12s;}
.ui-btn.principal{background:var(--ui-primaire);color:#fff;}
.ui-btn.principal:hover{filter:brightness(1.07);color:#fff;}
.ui-btn.secondaire{background:var(--ui-carte);color:var(--ui-ink-2);border-color:var(--ui-line-fort);}
.ui-btn.secondaire:hover{border-color:var(--ui-primaire);color:var(--ui-primaire);}
.ui-btn.danger{background:var(--ui-rouge);color:#fff;}
.ui-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ── État vide : jamais une page blanche ────────────────────────────────── */
.ui-vide{text-align:center;padding:34px 18px;color:var(--ui-muted);}
.ui-vide .bi{font-size:2rem;opacity:.45;display:block;margin-bottom:10px;}
.ui-vide h3{font-size:1rem;font-weight:800;color:var(--ui-ink);margin:0 0 6px;}
.ui-vide p{margin:0 auto 14px;max-width:46ch;font-size:.9rem;}

/* ── Tableau : défile dans SON conteneur, jamais la page ────────────────── */
.ui-table-enveloppe{overflow-x:auto;border:1px solid var(--ui-line);border-radius:var(--ui-radius);
  background:var(--ui-carte);}
.ui-table{border-collapse:collapse;width:100%;font-size:.9rem;}
.ui-table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#5b6376;font-weight:800;
  text-align:start;padding:10px 12px;background:var(--ui-fond);white-space:nowrap;}
.ui-table td{padding:11px 12px;border-top:1px solid var(--ui-line);vertical-align:middle;}
.ui-table tr:hover td{background:var(--ui-fond);}
.ui-table .ui-nombre{text-align:end;font-variant-numeric:tabular-nums;}

/* ── Mention : information, avertissement, danger ───────────────────────── */
.ui-mention{border-radius:var(--ui-radius-sm);padding:11px 14px;font-size:.87rem;line-height:1.5;
  border:1px solid var(--ui-line);background:var(--ui-fond);color:var(--ui-ink-2);}
.ui-mention.info{background:var(--ui-primaire-doux);border-color:#cfe0fd;color:#0b3ea8;}
.ui-mention.attention{background:#fdf3e3;border-color:#f5d9a8;color:#8a5008;}
.ui-mention.danger{background:#fdecec;border-color:#f6c2c2;color:#a41c1c;}

/* Arabe : les logiques ci-dessus se retournent seules ; les nombres non. */
html[dir="rtl"] .ui-table .ui-nombre{text-align:start;}

/* ══════════════════════════════════════════════════════════════════════════
   MISE À NIVEAU DU PARC EXISTANT (boss 11/09 : « fix all nouveau pages now,
   all modules »). Cinquante-deux formulaires écrits avant ce socle utilisent
   le balisage Bootstrap brut. Plutôt que d'attendre leur réécriture, les
   règles ci-dessous les relèvent TOUS d'un coup : cibles tactiles de 44 px,
   libellés lisibles, anneau de focus visible, boutons qui ne se confondent
   plus avec le fond. Portée limitée aux pages CONNECTÉES (body.design-scope) :
   le site public garde son style.
   ══════════════════════════════════════════════════════════════════════════ */

body.design-scope .form-label{
  font-size:.78rem !important; font-weight:700 !important; color:var(--ui-ink-2) !important;
  margin-bottom:5px; letter-spacing:.01em;}

body.design-scope .form-control,
body.design-scope .form-select{
  min-height:var(--ui-touche); border:1.5px solid var(--ui-line-fort); border-radius:var(--ui-radius-sm);
  padding:10px 12px; font-size:.95rem; color:var(--ui-ink); background:var(--ui-carte);
  transition:border-color .12s, box-shadow .12s;}
body.design-scope .form-control-sm,
body.design-scope .form-select-sm{min-height:38px; padding:7px 10px; font-size:.88rem;}
body.design-scope .form-control:focus,
body.design-scope .form-select:focus{
  border-color:var(--ui-primaire); box-shadow:0 0 0 3px var(--ui-primaire-doux); outline:none;}
body.design-scope .form-control::placeholder{color:#94a3b8;}
body.design-scope textarea.form-control{min-height:96px;}

/* Cases et boutons radio : 16 px mesurés à l'audit, impossibles au doigt. */
body.design-scope .form-check-input{width:20px; height:20px; margin-top:.15rem;}
/* …mais un INTERRUPTEUR (form-switch) reste une glissière : forcé à 20×20 il
   devenait un rond vide qu'on prenait pour un bouton radio (boss 19/09,
   page E-commerce). */
body.design-scope .form-switch .form-check-input{width:2.5em; height:1.35em; border-radius:2em; margin-top:.2rem;}
body.design-scope .form-check-label{padding-inline-start:4px; min-height:24px;}

/* Un bouton doit se voir et se toucher. */
body.design-scope .btn{min-height:var(--ui-touche); border-radius:12px; font-weight:700;
  padding-inline:16px; display:inline-flex; align-items:center; justify-content:center; gap:7px;}
body.design-scope .btn-sm{min-height:36px; border-radius:10px; padding-inline:12px;}
body.design-scope .btn-outline-secondary{border-color:var(--ui-line-fort); color:var(--ui-ink-2);}
body.design-scope .btn-outline-secondary:hover{border-color:var(--ui-primaire); color:var(--ui-primaire);}

/* Les cartes des anciens écrans prennent le rayon et la bordure du socle. */
body.design-scope .card{border-radius:var(--ui-radius); border-color:var(--ui-line);}

/* Texte secondaire : #8b93a7 sur #f3f5f9 mesurait 2,8:1 — illisible dehors. */
body.design-scope .text-muted{color:#5b6376 !important;}
body.design-scope table th{color:#5b6376;}

/* Un formulaire long doit garder ses boutons sous la main sur téléphone. */
@media(max-width:760px){
  body.design-scope form .d-flex.gap-2:last-child,
  body.design-scope form .ui-actions{
    position:sticky; bottom:var(--app-bottom-clearance,0px); z-index:5;
    background:linear-gradient(180deg,rgba(248,250,252,0),var(--ui-fond) 26%);
    padding:12px 0 calc(10px + env(safe-area-inset-bottom,0px));}
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTE DÉROULANTE CHERCHABLE (static/js/ui-select.js)
   Boss 11/09 : « these kind of dropdown are no help, display on full screen,
   not helpful to add on the flight and no search ». Le menu natif est gardé
   comme source de vérité, mais caché : c'est le champ ci-dessous qu'on voit.
   ══════════════════════════════════════════════════════════════════════════ */
.ui-select{position:relative;}
.ui-select .ui-select-natif{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.ui-select-champ{width:100%;box-sizing:border-box;min-height:var(--ui-touche);
  border:1.5px solid var(--ui-line-fort);border-radius:var(--ui-radius-sm);padding:10px 34px 10px 12px;
  font-size:.95rem;font-family:inherit;color:var(--ui-ink);background:var(--ui-carte);
  background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;outline:none;transition:border-color .12s,box-shadow .12s;}
html[dir="rtl"] .ui-select-champ{padding:10px 12px 10px 34px;
  background-position:17px 50%,12px 50%;}
.ui-select-champ.petit{min-height:38px;padding-block:7px;font-size:.88rem;}
.ui-select-champ:focus{border-color:var(--ui-primaire);box-shadow:0 0 0 3px var(--ui-primaire-doux);}
.ui-select-liste{display:none;position:absolute;z-index:1200;inset-inline:0;top:calc(100% + 4px);
  max-height:290px;overflow-y:auto;background:var(--ui-carte);border:1px solid var(--ui-line-fort);
  border-radius:var(--ui-radius-sm);box-shadow:0 14px 34px rgba(15,23,42,.16);}
.ui-select-liste.ouverte{display:block;}
.ui-select-ligne{padding:11px 13px;font-size:.93rem;cursor:pointer;min-height:var(--ui-touche);
  display:flex;align-items:center;border-bottom:1px solid var(--ui-fond);}
.ui-select-ligne:last-child{border-bottom:0;}
.ui-select-ligne:hover,.ui-select-ligne.vise{background:var(--ui-primaire-doux);}
.ui-select-ligne.choisie{font-weight:700;color:var(--ui-primaire);}
.ui-select-ligne.effacer{color:var(--ui-muted);font-style:italic;}
.ui-select-vide{padding:13px;font-size:.88rem;color:var(--ui-muted);text-align:center;}
.ui-select-nouveau{display:flex;align-items:center;gap:7px;padding:11px 13px;min-height:var(--ui-touche);
  font-size:.9rem;font-weight:700;color:var(--ui-primaire);text-decoration:none;
  border-top:1px solid var(--ui-line);background:var(--ui-fond);position:sticky;bottom:0;}
.ui-select-nouveau:hover{background:var(--ui-primaire-doux);color:var(--ui-primaire);}
@media(max-width:760px){ .ui-select-liste{max-height:min(60vh,340px);} }

/* ══════════════════════════════════════════════════════════════════════════
   ALIGNEMENT (boss 11/09, capture « Prix de vente / 19% / 0,00 ») : sur une
   même rangée, trois contrôles de hauteurs et de rayons différents donnent
   une ligne bancale. Ces règles imposent la même hauteur, le même rayon et
   la même ligne de base à tout ce qui vit côte à côte dans un formulaire.
   ══════════════════════════════════════════════════════════════════════════ */
body.design-scope .row > [class*="col"]{display:flex;flex-direction:column;}
body.design-scope .row > [class*="col"] > .form-label{min-height:1.15em;}
body.design-scope .input-group > .form-control,
body.design-scope .input-group > .form-select,
body.design-scope .input-group > .input-group-text,
body.design-scope .input-group > .btn{min-height:var(--ui-touche);border-radius:0;}
body.design-scope .input-group > :first-child{border-start-start-radius:var(--ui-radius-sm);border-end-start-radius:var(--ui-radius-sm);}
body.design-scope .input-group > :last-child{border-start-end-radius:var(--ui-radius-sm);border-end-end-radius:var(--ui-radius-sm);}
body.design-scope .input-group-text{background:var(--ui-fond);border-color:var(--ui-line-fort);
  color:var(--ui-ink-2);font-size:.88rem;font-weight:600;display:flex;align-items:center;}
/* Une rangée de champs : tous les contrôles descendent au même fond de case. */
body.design-scope .row.g-2 > [class*="col"] > .form-control,
body.design-scope .row.g-3 > [class*="col"] > .form-control,
body.design-scope .row.g-2 > [class*="col"] > .form-select,
body.design-scope .row.g-3 > [class*="col"] > .form-select{margin-top:auto;}

/* ══════════════════════════════════════════════════════════════════════════
   TAILLE « PETITE » UNIFIÉE (boss 11/09, capture de la barre de filtres)
   Les barres de filtres mélangent .form-control-sm (41 px), .form-select-sm
   (41 px), .btn-sm (40 px) et .btn-group-sm > .btn (44 px) : quatre hauteurs
   sur une même ligne, d'où les bas de champs en escalier. Une seule variable
   décide désormais, et elle monte au doigt sous 860 px.
   ══════════════════════════════════════════════════════════════════════════ */
:root{--ui-petit:40px;}
@media (max-width:860px){:root{--ui-petit:44px;}}

body.design-scope .form-control-sm,
body.design-scope .form-select-sm,
body.design-scope .ui-select-champ.petit,
body.design-scope .btn-sm,
body.design-scope .btn-group-sm > .btn,
body.design-scope .input-group-sm > .form-control,
body.design-scope .input-group-sm > .form-select,
body.design-scope .input-group-sm > .input-group-text{
  min-height:var(--ui-petit) !important; height:var(--ui-petit) !important;
  padding-block:0 !important; line-height:1.2;}
body.design-scope textarea.form-control-sm{height:auto !important; padding-block:7px !important;}
body.design-scope .btn-group-sm > .btn{border-radius:10px;}
body.design-scope .btn-group-sm > .btn:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;}
body.design-scope .btn-group-sm > .btn:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;}

/* == RH / Pointage (repris de la session Codex codex/full-ux-audit, 17/09) ==
   Les ecrans RH (equipe, conges, presences, heures sup) ecrivaient leurs
   couleurs en dur (#fff, #e2e8f0, #64748b) : invisibles sous un theme societe
   et sans variante mobile -- le tableau des presences partait hors ecran au
   doigt. Ces regles sont portees par la classe rh-scope posee sur <body>
   par base.html selon le chemin. ECARTE du lot Codex : la regle qui masquait
   #yacine-root sur ces pages (decision produit) et les regles payroll-* (leurs
   gabarits ne sont pas repris dans ce lot). Le jeton --ok employe par Codex
   n'existe pas dans theme.css -- remplace par --success, sinon la couleur des
   pastilles tombait silencieusement. */
body.design-scope.rh-scope .rh-page{max-width:1220px;padding-bottom:calc(34px + var(--app-bottom-clearance,0px));}
body.design-scope.rh-scope .rh-page-head{border-bottom:1px solid var(--line);padding-bottom:18px;}
body.design-scope.rh-scope .rh-page-head h2{color:var(--ink-900);font-size:clamp(1.55rem,2.3vw,2.05rem);font-weight:800!important;letter-spacing:-.035em;}
body.design-scope.rh-scope .team-toolbar{background:var(--paper-1);border:1px solid var(--line);border-radius:16px;padding:15px 16px;}
body.design-scope.rh-scope .team-member-card{background:var(--paper-1)!important;border:1px solid var(--line)!important;border-radius:15px!important;box-shadow:0 5px 18px rgba(15,23,42,.045);}
body.design-scope.rh-scope .leave-mobile-list{display:grid;gap:10px;}
body.design-scope.rh-scope .leave-mobile-card{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 4px 16px rgba(15,23,42,.04);}
body.design-scope.rh-scope .leave-mobile-card.urgent{border-color:color-mix(in srgb,var(--warning,#d97706) 35%,var(--line));}
body.design-scope.rh-scope .leave-mobile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
body.design-scope.rh-scope .leave-mobile-name{color:var(--ink-900);font-size:.95rem;font-weight:800;overflow-wrap:anywhere;}
body.design-scope.rh-scope .leave-mobile-meta{color:var(--ink-500);font-size:.78rem;line-height:1.5;margin-top:3px;}
body.design-scope.rh-scope .leave-mobile-balance{color:var(--success);font-size:1.15rem;font-weight:900;white-space:nowrap;}
body.design-scope.rh-scope .leave-mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:12px;}
body.design-scope.rh-scope .leave-mobile-grid small{color:var(--ink-500);display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
body.design-scope.rh-scope .leave-mobile-grid strong{color:var(--ink-900);display:block;font-size:.84rem;margin-top:2px;}
body.design-scope.rh-scope .leave-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px;}
body.design-scope.rh-scope .leave-mobile-actions .btn{width:100%;}
body.design-scope.rh-scope .attendance-mobile-list{display:grid;gap:9px;}
body.design-scope.rh-scope .attendance-mobile-card{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:0 4px 14px rgba(15,23,42,.035);}
body.design-scope.rh-scope .attendance-mobile-card.is-muted{opacity:.62;}
body.design-scope.rh-scope .attendance-mobile-top{align-items:center;display:flex;justify-content:space-between;gap:12px;color:var(--ink-900);}
body.design-scope.rh-scope .attendance-status{border-radius:999px;display:inline-flex;font-size:.72rem;font-weight:800;padding:3px 9px;white-space:nowrap;}
body.design-scope.rh-scope .attendance-status.is-worked{background:color-mix(in srgb,var(--success) 12%,var(--paper-1));color:var(--success);}
body.design-scope.rh-scope .attendance-status.is-leave{background:color-mix(in srgb,var(--info,var(--primary)) 12%,var(--paper-1));color:var(--info,var(--primary));}
body.design-scope.rh-scope .attendance-status.is-holiday{background:color-mix(in srgb,var(--primary) 12%,var(--paper-1));color:var(--primary);}
body.design-scope.rh-scope .attendance-status.is-absent{background:color-mix(in srgb,var(--danger) 10%,var(--paper-1));color:var(--danger);}
body.design-scope.rh-scope .attendance-status.is-neutral{background:var(--paper-2);color:var(--ink-500);}
body.design-scope.rh-scope .attendance-mobile-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
body.design-scope.rh-scope .attendance-mobile-times>div{background:var(--paper-2);border-radius:10px;padding:8px 9px;}
body.design-scope.rh-scope .attendance-mobile-times small{color:var(--ink-500);display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;}
body.design-scope.rh-scope .attendance-mobile-times strong{color:var(--ink-900);display:block;margin-top:2px;}
body.design-scope.rh-scope .attendance-mobile-alerts{border-top:1px solid var(--line);color:var(--ink-500);display:grid;font-size:.76rem;gap:7px;margin-top:11px;padding-top:10px;}
body.design-scope.rh-scope .attendance-mobile-alerts .is-danger{color:var(--danger);font-weight:700;}
body.design-scope.rh-scope .attendance-mobile-action{align-items:center;display:flex;justify-content:space-between;gap:10px;}
body.design-scope.rh-scope .attendance-mobile-action form{flex:0 0 auto;}

/* ── Pointage : lecture d'équipe desktop et cartes timeline mobiles ────── */
body.design-scope.rh-scope .presence-team-page{max-width:1540px;}
body.design-scope.rh-scope .presence-team-title{color:var(--ink-900);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:800;letter-spacing:-.03em;}
body.design-scope.rh-scope .presence-team-title i{color:var(--primary);}
body.design-scope.rh-scope .presence-team-date-nav .btn{align-items:center;display:inline-flex;justify-content:center;min-height:40px;min-width:40px;}
body.design-scope.rh-scope .presence-team-date{color:var(--ink-900);font-weight:800;min-width:140px;text-align:center;}
body.design-scope.rh-scope .presence-team-switch{background:var(--paper-1);border:1px solid var(--line);color:var(--ink-500);font-weight:700;min-height:40px;}
body.design-scope.rh-scope .presence-team-switch:hover{border-color:var(--primary);color:var(--primary);}
body.design-scope.rh-scope .presence-team-summary{align-items:center;color:var(--ink-500);display:flex;flex-wrap:wrap;font-size:.82rem;gap:7px 12px;margin-bottom:12px;}
body.design-scope.rh-scope .presence-team-summary strong{color:var(--ink-900);}
body.design-scope.rh-scope .presence-team-legend{align-items:center;display:inline-flex;gap:5px;}
body.design-scope.rh-scope .presence-team-dot{background:var(--success,#15803d);border-radius:3px;display:inline-block;height:10px;width:10px;}
body.design-scope.rh-scope .presence-team-dot.is-auto{background:var(--warning,#f59e0b);}
body.design-scope.rh-scope .presence-team-card{background:var(--paper-1);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px rgba(15,23,42,.05);overflow:hidden;}
body.design-scope.rh-scope .presence-team-table-wrap{background:none;}
body.design-scope.rh-scope .presence-team-table-wrap::after{content:none;}
body.design-scope.rh-scope .presence-team-table{color:var(--ink-900);font-size:.84rem;min-width:860px;}
body.design-scope.rh-scope .presence-team-table thead{background:var(--paper-2);}
body.design-scope.rh-scope .presence-team-table thead tr{color:var(--ink-500);font-size:.69rem;letter-spacing:.04em;text-transform:uppercase;}
body.design-scope.rh-scope .presence-team-table th{border-color:var(--line);}
body.design-scope.rh-scope .presence-team-table th:first-child{width:210px;}
body.design-scope.rh-scope .presence-team-table th:nth-child(2){width:90px;}
body.design-scope.rh-scope .presence-team-table td{border-color:var(--line);padding-block:9px;}
body.design-scope.rh-scope .presence-team-hours{height:14px;position:relative;}
body.design-scope.rh-scope .presence-team-hours span{color:var(--ink-400,var(--ink-500));font-size:.62rem;position:absolute;transform:translateX(-50%);}
body.design-scope.rh-scope .presence-team-person{white-space:nowrap;}
body.design-scope.rh-scope .presence-team-person > a{color:var(--ink-900);font-weight:700;text-decoration:none;}
body.design-scope.rh-scope .presence-team-person > a:hover{color:var(--primary);}
body.design-scope.rh-scope .presence-team-status{font-size:.68rem;font-weight:700;}
body.design-scope.rh-scope .presence-team-status.is-leave{color:var(--info,#0284c7);}
body.design-scope.rh-scope .presence-team-status.is-holiday{color:var(--primary);}
body.design-scope.rh-scope .presence-team-status.is-weekend{color:var(--ink-400,var(--ink-500));font-weight:500;}
body.design-scope.rh-scope .presence-team-status.is-absent{color:var(--danger);}
body.design-scope.rh-scope .presence-team-status.is-late{color:var(--warning,#d97706);font-weight:600;}
body.design-scope.rh-scope .presence-team-total{color:var(--ink-900);font-weight:800;}
body.design-scope.rh-scope .presence-team-timeline{background:repeating-linear-gradient(90deg,var(--paper-2) 0,var(--paper-2) calc(100%/12 - 1px),var(--line) calc(100%/12 - 1px),var(--line) calc(100%/12));border-radius:6px;height:24px;position:relative;}
body.design-scope.rh-scope .presence-team-segment{background:var(--success,#15803d);border-radius:4px;bottom:4px;position:absolute;top:4px;}
body.design-scope.rh-scope .presence-team-segment.is-auto{background:var(--warning,#f59e0b);}
body.design-scope.rh-scope .presence-team-mobile-scale{display:none;}
@media(max-width:767.98px){
  body.design-scope.rh-scope .presence-team-page{padding-block:20px!important;}
  body.design-scope.rh-scope .presence-team-header{align-items:stretch!important;display:grid!important;grid-template-columns:1fr;gap:12px!important;}
  body.design-scope.rh-scope .presence-team-title{font-size:1.45rem;}
  body.design-scope.rh-scope .presence-team-date-nav{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px;margin-left:0!important;width:100%;}
  body.design-scope.rh-scope .presence-team-date-nav .btn{min-height:44px;}
  body.design-scope.rh-scope .presence-team-date-nav .btn-tonal:last-child{grid-column:1/-1;margin-top:6px;}
  body.design-scope.rh-scope .presence-team-date{align-items:center;background:var(--paper-1);border-block:1px solid var(--line);display:flex;justify-content:center;min-width:0;}
  body.design-scope.rh-scope .presence-team-switch{align-items:center;display:flex;justify-content:center;min-height:44px;width:100%;}
  body.design-scope.rh-scope .presence-team-summary{background:var(--paper-1);border:1px solid var(--line);border-radius:12px;display:grid;gap:7px;margin-bottom:14px;padding:12px 14px;}
  body.design-scope.rh-scope .presence-team-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
  body.design-scope.rh-scope .presence-team-table-wrap{overflow:visible;}
  body.design-scope.rh-scope .presence-team-table{display:block;min-width:0;}
  body.design-scope.rh-scope .presence-team-table thead{display:none;}
  body.design-scope.rh-scope .presence-team-table tbody{display:grid;gap:10px;}
  body.design-scope.rh-scope .presence-team-table tbody tr{background:var(--paper-1);border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 16px rgba(15,23,42,.045);display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px;}
  body.design-scope.rh-scope .presence-team-table tbody td{border:0;display:block;padding:0;}
  body.design-scope.rh-scope .presence-team-person{min-width:0;white-space:normal;}
  body.design-scope.rh-scope .presence-team-person > a{font-size:.95rem;}
  body.design-scope.rh-scope .presence-team-total{font-size:1rem;padding-inline-start:12px!important;text-align:end;}
  body.design-scope.rh-scope .presence-team-timeline-cell{grid-column:1/-1;margin-top:12px;}
  body.design-scope.rh-scope .presence-team-mobile-scale{color:var(--ink-400,var(--ink-500));display:flex;font-size:.6rem;justify-content:space-between;margin-bottom:4px;}
  body.design-scope.rh-scope .presence-team-timeline{height:30px;}
  body.design-scope.rh-scope .presence-team-segment{bottom:5px;top:5px;}
}
body.design-scope.rh-scope #btnImportPunches{min-height:40px;white-space:normal;}
.attendance-shift-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;align-items:end;}
.attendance-shift-form>div:first-of-type{grid-column:1/-1;}
.attendance-shift-form button{min-height:44px;}
.overtime-queue-page .btn{min-width:44px;min-height:44px;}
.overtime-queue-page .overtime-decision-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.overtime-queue-page .overtime-decision-form input[name=reason]{grid-column:1/-1;max-width:none!important;}
@media(max-width:575.98px){
  .overtime-queue-page .detail-data-table td:last-child{display:block!important;}
  .overtime-queue-page .detail-data-table td:last-child::before{display:block;margin-bottom:8px;}
}