/* ==========================================================================
   AIRH — Adaptation mobile / tablette des écrans HUD
   Cible tous les hosts : la coquille générique (.hud-screen) et les écrans
   dédiés (congés, pointage, tâches, habilitations, rentabilité, fil).
   ========================================================================== */

/* ==========================================================================
   TABLETTE ET MOBILE (< 1024px) — la barre de navigation basse apparaît
   ========================================================================== */
@media (max-width: 1023px) {

  /* Écran HUD monté : il prend toute la hauteur.
     - pas de padding bas : .main-content réserve DÉJÀ une ligne pour la nav
       basse, en ajouter une seconde créait une bande grise vide ;
     - la nav basse est masquée : l'écran a ses propres actions en haut et le
       menu reste accessible par le bouton du topbar. */
  body:has(.hud-screen) .bottom-nav,
  body:has(#lv-hud) .bottom-nav, body:has(#tt-hud) .bottom-nav,
  body:has(#tk-hud) .bottom-nav, body:has(#hb-hud) .bottom-nav,
  body:has(#rt-hud) .bottom-nav, body:has(#fd-hud) .bottom-nav {
    display: none;
  }
  body:has(.hud-screen) .main-content,
  body:has(#lv-hud) .main-content, body:has(#tt-hud) .main-content,
  body:has(#tk-hud) .main-content, body:has(#hb-hud) .main-content,
  body:has(#rt-hud) .main-content, body:has(#fd-hud) .main-content {
    grid-template-rows: var(--topbar-height) 1fr;
  }

  /* ---------- HEADER : compact, deux rangées maxi ---------- */
  .hud-screen .hud-header,
  #lv-hud .lv-header,
  #tt-hud .tt-hud-header,
  #tk-hud .tk-header,
  #hb-hud .hb-header,
  #rt-hud .rt-header,
  #fd-hud .fd-header {
    padding: 9px 12px;
    gap: 8px;
    row-gap: 8px;
  }

  /* le badge de mode et l'horloge ne sont pas essentiels sur petit écran */
  .hud-screen .hud-mode,
  #lv-hud .lv-mode, #tt-hud .tt-mode, #tk-hud .tk-mode,
  #hb-hud .hb-mode, #rt-hud .rt-mode, #fd-hud .fd-mode,
  .hud-screen .hud-clock,
  #lv-hud .lv-clock, #tt-hud .tt-clock-mono, #tk-hud .tk-clock,
  #hb-hud .hb-clock, #rt-hud .rt-clock, #fd-hud .fd-clock {
    display: none;
  }

  .hud-screen .hud-name,
  #lv-hud .lv-name, #tt-hud .tt-name, #tk-hud .tk-name,
  #hb-hud .hb-name, #rt-hud .rt-name, #fd-hud .fd-name {
    font-size: 15px; letter-spacing: .1em;
  }

  /* la recherche passe sur sa propre ligne, pleine largeur */
  .hud-screen .hud-search,
  #tk-hud .tk-search, #hb-hud .hb-search, #fd-hud .fd-search {
    order: 20; flex: 1 1 100%; min-width: 0;
  }
  .hud-screen .hud-search input,
  #tk-hud .tk-search input, #hb-hud .hb-search input, #fd-hud .fd-search input {
    width: 100%; min-width: 0;
  }

  /* les groupes de filtres deviennent des rubans qui défilent */
  .hud-screen .hud-header .hud-strip,
  #tt-hud .tt-nav, #rt-hud .rt-nav, #lv-hud .lv-nav {
    max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap; scrollbar-width: none;
  }
  .hud-screen .hud-header .hud-strip::-webkit-scrollbar { display: none; }

  /* boutons et selects : compacts mais tapables (44px de zone) */
  .hud-screen .hud-chip,
  #lv-hud .lv-chip, #tt-hud .tt-chip, #tk-hud .tk-chip,
  #hb-hud .hb-chip, #rt-hud .rt-chip, #fd-hud .fd-chip {
    padding: 10px 11px; font-size: 10px; letter-spacing: .1em;
  }
  .hud-screen select.hud-chip,
  #tt-hud select.tt-chip, #rt-hud select.rt-chip, #hb-hud select.hb-chip,
  #lv-hud select.lv-chip {
    min-width: 0; max-width: 46vw;
  }

  /* ---------- CORPS ---------- */
  .hud-screen .hud-body,
  #lv-hud .lv-body, #tt-hud .tt-hud-body, #tk-hud .tk-body,
  #hb-hud .hb-body, #rt-hud .rt-body, #fd-hud .fd-body {
    padding: 12px 12px 18px;
    gap: 12px;
  }

  /* ---------- COLONNES LATÉRALES : rubans horizontaux ---------- */
  #tk-hud .tk-side, #hb-hud .hb-side, #tt-hud .tt-side, #lv-hud .lv-side {
    flex-direction: row; flex: none;
    overflow-x: auto; overflow-y: hidden;
    gap: 10px; padding-bottom: 4px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  #tk-hud .tk-side > *, #hb-hud .hb-side > *,
  #tt-hud .tt-side > *, #lv-hud .lv-side > * {
    flex: 0 0 auto; min-width: 74vw; max-width: 84vw; scroll-snap-align: start;
  }

  /* ---------- KPI ---------- */
  .hud-screen .hud-kpis, #hb-hud .hab-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .hud-screen .hud-kpi .v, #hb-hud .hab-kpi__value { font-size: 22px; }
  #rt-hud .rt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #rt-hud .rt-tile .v { font-size: 22px; }

  /* ---------- GRILLES DE CARTES : une colonne ---------- */
  .hud-screen .hud-grid,
  .hud-screen .sc2-grid,
  .hud-screen .sites__grid,
  .hud-screen .projects__grid {
    grid-template-columns: minmax(0, 1fr); gap: 12px;
  }

  /* ---------- TABLEAUX : défilement horizontal assumé ---------- */
  .hud-screen .hud-panel > .hud-table,
  #rt-hud .rt-table-scroll, #tt-hud .tt-grid-scroll, #lv-hud .lv-grid-wrap {
    -webkit-overflow-scrolling: touch;
  }
  #tt-hud table.tt-grid, #lv-hud table.lv-grid,
  #rt-hud table.rt-table, .hud-screen table.hud-table { font-size: 11px; }
  #tt-hud table.tt-grid thead th.tt-emp-h, #tt-hud table.tt-grid td.tt-emp,
  #lv-hud table.lv-grid thead th.lv-emp-h, #lv-hud table.lv-grid td.lv-emp {
    min-width: 118px; padding-left: 10px; padding-right: 6px; font-size: 11px;
  }
  #tt-hud table.tt-grid td.tt-emp .idx, #lv-hud table.lv-grid td.lv-emp .idx { display: none; }

  /* ---------- BANDEAU BAS : supprimé ----------
     Sur mobile il n'apporte rien et se retrouve coincé contre la navigation
     basse : on rend la place au contenu. */
  .hud-screen .hud-foot, #lv-hud .lv-foot, #tt-hud .tt-hud-foot,
  #tk-hud .tk-foot, #hb-hud .hb-foot, #rt-hud .rt-foot, #fd-hud .fd-foot {
    display: none;
  }
}

/* ==========================================================================
   MOBILE (< 640px) — mise en page une colonne, cibles tactiles
   ========================================================================== */
@media (max-width: 639px) {

  /* ---------- POINTAGE ---------- */
  #tt-hud .tt-hud-body { grid-template-columns: minmax(0, 1fr); }
  #tt-hud .tt-clock-time { font-size: 34px; }
  #tt-hud .tt-action-btn { width: 84px; height: 84px; }
  #tt-hud .tt-action-btn::after { width: 104px; height: 104px; }
  #tt-hud .tt-panel-head { padding: 11px 13px; gap: 10px; }
  #tt-hud .tt-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #tt-hud .tt-filters::-webkit-scrollbar { display: none; }
  #tt-hud .pt-grid-filter { flex: 0 0 auto; }

  /* ---------- CONGÉS ---------- */
  #lv-hud .lv-body { grid-template-columns: minmax(0, 1fr); }
  #lv-hud .lv-nav .lv-month { min-width: 104px; font-size: 11px; }
  #lv-hud .lv-panel { top: 8px; right: 8px; left: 8px; bottom: 8px; width: auto; }

  /* ---------- TÂCHES ---------- */
  #tk-hud .tk-body { grid-template-columns: minmax(0, 1fr); }
  #tk-hud .tk-task { flex-wrap: wrap; gap: 10px; padding: 12px 13px 12px 16px; }
  #tk-hud .tk-thumb { width: 38px; height: 38px; }
  #tk-hud .tk-task-main { flex: 1 1 60%; }
  #tk-hud .tk-task-right {
    flex: 1 1 100%; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 10px;
    padding-top: 10px; border-top: 1px solid var(--line-soft);
  }
  #tk-hud .tk-prog { flex: 1; min-width: 0; }
  #tk-hud .tk-acts { opacity: 1; }
  #tk-hud .tk-act { width: 34px; height: 34px; }

  /* ---------- HABILITATIONS ---------- */
  #hb-hud .hb-body { grid-template-columns: minmax(0, 1fr); }
  #hb-hud .hab-emp-card__grid { grid-template-columns: minmax(0, 1fr); }
  #hb-hud .hab-emp-card__header { padding: 11px 12px 11px 16px; }
  #hb-hud .hb-gauge .ring { width: 96px; height: 96px; }

  /* ---------- RENTABILITÉ ---------- */
  #rt-hud .rt-strip { grid-template-columns: minmax(0, 1fr); }
  /* le graphique garde une largeur mini lisible : on le fait défiler */
  #rt-hud .rt-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 2px; }
  #rt-hud .rt-chart { min-width: 560px; height: 240px; }
  #rt-hud .rt-legend { padding: 4px 12px 12px; }
  #rt-hud .rt-leg { max-width: 46vw; }
  #rt-hud .rt-tip { max-width: calc(100vw - 20px); }

  /* ---------- FIL D'ACTUALITÉS ---------- */
  #fd-hud .fd-col { max-width: 100%; }
  #fd-hud .feed__card-author-bar { gap: 9px; padding: 12px 13px 10px; }
  #fd-hud .feed__card-cat-pill { order: 5; }
  #fd-hud .feed__card-title { font-size: 16px; }
  #fd-hud .feed__media { margin: 0 13px 12px; }
  #fd-hud .fd-compose-acts { flex-wrap: wrap; }
  #fd-hud .fd-compose-act { flex: 1 1 30%; }

  /* ---------- CARTES GÉNÉRIQUES ---------- */
  .hud-screen .pj-name { font-size: 17px; }
  .hud-screen .pj-link { padding: 14px 14px 12px 17px; }
  .hud-screen .pj-acts, .hud-screen .hud-acts { opacity: 1; }
  .hud-screen .pj-act, .hud-screen .hud-act { width: 34px; height: 34px; }
  .hud-screen .hud-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---------- PANNEAU LATÉRAL : feuille pleine hauteur ---------- */
  .panel-overlay.panel--hud .panel {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }
  .panel-overlay.panel--hud .panel__body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   TRÈS PETIT ÉCRAN (< 400px)
   ========================================================================== */
@media (max-width: 399px) {
  .hud-screen .hud-name,
  #lv-hud .lv-name, #tt-hud .tt-name, #tk-hud .tk-name,
  #hb-hud .hb-name, #rt-hud .rt-name, #fd-hud .fd-name { font-size: 13px; }

  .hud-screen .hud-kpis, #hb-hud .hab-kpis, #rt-hud .rt-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  #tk-hud .tk-side > *, #hb-hud .hb-side > *,
  #tt-hud .tt-side > *, #lv-hud .lv-side > * { min-width: 86vw; }
}

/* ==========================================================================
   PASSE 2 — confort tactile, encoche, défilements
   ========================================================================== */
@media (max-width: 1023px) {

  /* ---------- Encoche / bords arrondis (iPhone en paysage notamment) ---------- */
  .hud-screen .hud-header, .hud-screen .hud-body, .hud-screen .hud-foot,
  #lv-hud .lv-header, #lv-hud .lv-body, #lv-hud .lv-foot,
  #tt-hud .tt-hud-header, #tt-hud .tt-hud-body, #tt-hud .tt-hud-foot,
  #tk-hud .tk-header, #tk-hud .tk-body, #tk-hud .tk-foot,
  #hb-hud .hb-header, #hb-hud .hb-body, #hb-hud .hb-foot,
  #rt-hud .rt-header, #rt-hud .rt-body, #rt-hud .rt-foot,
  #fd-hud .fd-header, #fd-hud .fd-body, #fd-hud .fd-foot {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* ---------- Cibles tactiles : 40px mini partout ---------- */
  .hud-screen .hud-icon-btn, .hud-screen .hud-seg button,
  #lv-hud .lv-icon-btn, #lv-hud .lv-nav button,
  #tt-hud .tt-icon-btn, #tt-hud .tt-nav button,
  #tk-hud .tk-icon-btn, #hb-hud .hb-icon-btn,
  #rt-hud .rt-icon-btn, #rt-hud .rt-nav button, #fd-hud .fd-icon-btn {
    width: 40px; height: 40px;
  }
  .hud-screen .hud-chip, .hud-screen .hud-pill,
  #lv-hud .lv-chip, #tt-hud .tt-chip, #tk-hud .tk-chip,
  #hb-hud .hb-chip, #rt-hud .rt-chip, #fd-hud .fd-chip,
  #fd-hud .fd-filter, #tk-hud .tk-filter, #hb-hud .filter-chip,
  #tt-hud .pt-grid-filter, #tk-hud .tk-sort {
    min-height: 40px;
  }
  /* pas de zoom involontaire iOS : 16px mini dans les champs */
  .hud-screen input, .hud-screen select, .hud-screen textarea,
  #lv-hud input, #lv-hud select, #tt-hud input, #tt-hud select,
  #tk-hud input, #hb-hud input, #rt-hud select, #fd-hud input,
  .panel-overlay.panel--hud input, .panel-overlay.panel--hud select,
  .panel-overlay.panel--hud textarea {
    font-size: 16px;
  }

  /* ---------- Défilements : inertie, pas de rebond parasite ---------- */
  .hud-screen .hud-body,
  #lv-hud .lv-body, #tt-hud .tt-hud-body, #tk-hud .tk-body,
  #hb-hud .hb-body, #rt-hud .rt-body, #fd-hud .fd-body,
  #tk-hud .tk-list, #hb-hud .hab-employees-list, #fd-hud .feed__articles,
  #tt-hud .tt-grid-scroll, #lv-hud .lv-grid-wrap, #rt-hud .rt-table-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* rien ne doit déborder horizontalement de l'écran */
  .hud-screen, #lv-hud, #tt-hud, #tk-hud, #hb-hud, #rt-hud, #fd-hud { max-width: 100vw; }
  .hud-screen .hud-header > *, #tk-hud .tk-header > *, #fd-hud .fd-header > * { min-width: 0; max-width: 100%; }

  /* ---------- Titres longs : on coupe proprement ---------- */
  .hud-screen .hud-tile-title, .hud-screen .pj-name,
  #tk-hud .tk-title, #hb-hud .hab-emp-card__name, #fd-hud .feed__card-title {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 639px) {
  /* Le pointage n'affiche plus de tableau sous 640px : voir .tt-mobile
     (ruban de jours + lignes salarié) dans time-tracking-hud.css. */

  /* ---------- Calendrier congés : colonnes resserrées ---------- */
  #tt-hud table.tt-grid th.tt-day, #lv-hud table.lv-grid th.lv-day { min-width: 27px; padding: 6px 2px; }
  #tt-hud table.tt-grid th.tt-day .d, #lv-hud table.lv-grid th.lv-day .d { font-size: 11px; }
  #tt-hud table.tt-grid th.tt-day .w, #lv-hud table.lv-grid th.lv-day .w { font-size: 7.5px; }
  #tt-hud table.tt-grid tbody td, #lv-hud table.lv-grid tbody td { height: 30px; }
  #lv-hud table.lv-grid td.lv-cell .tag { margin: 2px; padding: 4px 0; font-size: 9px; }
  /* les soldes CP passent à la trappe : l'info reste dans la fiche */
  #lv-hud table.lv-grid th.lv-solde, #lv-hud table.lv-grid td.lv-solde { display: none; }

  /* ---------- Graphique : le doigt fait défiler, la bulle suit ---------- */
  #rt-hud .rt-chart-wrap { touch-action: pan-x pan-y; }
  #rt-hud .rt-tip { font-size: 12px; }

  /* ---------- Habilitations : en-tête de carte lisible ---------- */
  #hb-hud .hab-emp-card__badges { width: 100%; }

  /* ---------- Pointage : le poste passe avant la grille ---------- */
  #tt-hud .tt-side { order: -1; }
  #tt-hud .tt-clockbox { min-width: 84vw; }
}

/* ==========================================================================
   MOBILE — un seul défilement : celui de la page
   Les listes ne gardent pas le scroll pour elles ; elles se déroulent en
   entier et c'est le corps de l'écran qui défile sous le doigt.
   ========================================================================== */
@media (max-width: 639px) {

  /* ---------- TÂCHES ---------- */
  #tk-hud .tk-body { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #tk-hud .tk-main { display: block; }
  #tk-hud .tk-panel { flex: none; height: auto; min-height: 0; overflow: visible; }
  #tk-hud .tk-list { flex: none; height: auto; max-height: none; overflow: visible; padding-bottom: 16px; }
  #tk-hud .tk-panel .tk-corners { display: none; }
  #tk-hud .tk-panel-head {
    position: sticky; top: 0; z-index: 7;
    background: var(--glass-strong); backdrop-filter: blur(18px);
    border-radius: 14px 14px 0 0;
  }
  #tk-hud .tk-side { margin-bottom: 12px; }

  /* ---------- HABILITATIONS ---------- */
  #hb-hud .hb-body { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #hb-hud .hb-main { display: block; }
  #hb-hud .hb-panel { flex: none; height: auto; min-height: 0; overflow: visible; }
  #hb-hud .hab-employees-list { flex: none; height: auto; max-height: none; overflow: visible; padding-bottom: 16px; }
  #hb-hud .hb-panel .hb-corners { display: none; }
  #hb-hud .hb-panel-head {
    position: sticky; top: 0; z-index: 7;
    background: var(--glass-strong); backdrop-filter: blur(18px);
    border-radius: 14px 14px 0 0;
  }
  #hb-hud .hb-side { margin-bottom: 12px; }

  /* ---------- RENTABILITÉ : le tableau garde son défilement horizontal,
       mais plus de hauteur figée qui piège le doigt ---------- */
  #rt-hud .rt-table-panel { flex: none; min-height: 0; height: auto; }
  #rt-hud .rt-table-scroll { flex: none; height: auto; max-height: none; overflow-y: visible; overflow-x: auto; }
  #rt-hud .rt-table-panel .rt-corners { display: none; }
}