/* ==========================================================================
   Adaptations : tablette (768-1024) et mobile (< 768)
   ========================================================================== */

/* Éléments réservés aux petits écrans, masqués par défaut. */
.only-compact { display: none !important; }
.only-compact-inline { display: none !important; }
.daystrip { display: none; }
.scrim { display: none; }
.fab { display: none; }

/* Sans survol, la poignée de réordonnancement d'une sous-tâche serait
   inatteignable : elle reste visible en permanence. */
@media (hover: none) {
  .subtask__grip { opacity: 1; }
}

/* ---------- Tablette : sidebar réduite en icônes ---------- */

@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-w-slim); padding: var(--space-4) var(--space-2); align-items: stretch; }
  .sidebar__brand-text,
  .sidebar__section-title,
  .nav-item__label,
  .nav-item__count,
  .nav-item__actions,
  .btn--block .btn__text { display: none; }

  .nav-item, .btn--block { justify-content: center; padding-left: 0; padding-right: 0; }
  .sidebar__section-head { justify-content: center; }
  .sidebar__brand { justify-content: center; padding: 0; }
  /* Réduite en icônes : le logo porte seul l'identité, on lui donne de l'air. */
  .sidebar__mark { width: 28px; height: 28px; }

  .board { padding: var(--space-3) var(--space-4) var(--space-4); gap: var(--space-3); }
  .column--inbox { width: 240px; }
  .week { scroll-snap-type: x mandatory; }
}

/* ---------- Mobile : vue jour ---------- */

@media (max-width: 767px) {
  .only-compact { display: inline-flex !important; }
  .only-compact-inline { display: inline !important; }
  .only-wide { display: none !important; }

  /* Sidebar en tiroir */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-modal);
    width: var(--sidebar-w);
    padding: var(--space-5) var(--space-4);
    background: var(--bg);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
    box-shadow: var(--shadow-overlay);
  }
  .sidebar__brand-text,
  .sidebar__section-title,
  .nav-item__label,
  .nav-item__count,
  .nav-item__actions,
  .btn--block .btn__text { display: revert; }
  .nav-item, .btn--block { justify-content: flex-start; padding-left: var(--space-2); padding-right: var(--space-2); }
  .sidebar__section-head { justify-content: space-between; }
  .sidebar__brand { justify-content: flex-start; padding: 0 var(--space-2); }
  .sidebar__mark { width: 22px; height: 22px; }
  .nav-item { min-height: var(--tap-target); }

  body.is-drawer-open .sidebar { transform: none; }
  body.is-drawer-open .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) - 1);
    background: rgba(15, 15, 15, 0.28);
  }

  .topbar { padding: var(--space-3) var(--space-4); gap: var(--space-2); row-gap: var(--space-3); }
  /* Une seule ligne : menu, navigation de semaine, bouton Aujourd'hui. */
  .topbar__nav { flex: 1 1 auto; min-width: 0; }
  .topbar__title { min-width: 0; flex: 1 1 auto; font-size: var(--text-md); }
  .topbar__spacer { display: none; }
  #btn-today, #btn-today-stats { flex: 0 0 auto; height: var(--tap-target); }
  .filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .chip { height: var(--tap-target); border-radius: var(--radius-md); }

  /* Bande de sélection des jours */
  .daystrip {
    display: flex;
    gap: var(--space-1);
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .daystrip::-webkit-scrollbar { display: none; }

  .daystrip__item {
    flex: 1 0 auto;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: capitalize;
  }
  .daystrip__num { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text); }
  .daystrip__item[aria-pressed="true"] {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
  }
  .daystrip__item[aria-pressed="true"] .daystrip__num,
  .daystrip__item[aria-pressed="true"] .daystrip__badge { color: var(--bg); }
  .daystrip__item.is-today { border-color: var(--accent); }
  .daystrip__badge { font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

  /* Une seule colonne à la fois */
  .board { flex-direction: column; padding: var(--space-3) var(--space-4) 96px; }
  .week { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
  .column--inbox { width: auto; }
  .column--day, .column--inbox { display: none; }

  body[data-day-index="inbox"] .column--inbox { display: flex; }
  body[data-day-index="0"] .column--day[data-index="0"] { display: flex; }
  body[data-day-index="1"] .column--day[data-index="1"] { display: flex; }
  body[data-day-index="2"] .column--day[data-index="2"] { display: flex; }
  body[data-day-index="3"] .column--day[data-index="3"] { display: flex; }
  body[data-day-index="4"] .column--day[data-index="4"] { display: flex; }
  body[data-day-index="5"] .column--day[data-index="5"] { display: flex; }
  body[data-day-index="6"] .column--day[data-index="6"] { display: flex; }

  .column__list { padding-bottom: var(--space-5); }
  .task { padding: var(--space-3); min-height: var(--tap-target); }
  .task__menu, .task__check { opacity: 1; }
  .task__menu { width: var(--tap-target); height: var(--tap-target); top: 0; right: 0; }
  .task__check { position: relative; width: 22px; height: 22px; }
  /* Cible tactile étendue autour de la case, sans agrandir le visuel. */
  .task__check::after { content: ""; position: absolute; inset: -11px; }
  .task__body { padding-right: var(--tap-target); }
  .btn--icon { width: var(--tap-target); height: var(--tap-target); }

  /* Sous-tâches : la ligne s'aère pour offrir de vraies cibles tactiles. */
  .subtask { min-height: var(--tap-target); padding-left: 34px; gap: var(--space-2); }
  .subtask__grip { width: 34px; height: 100%; opacity: 1; }
  .subtask__check { position: relative; width: 18px; height: 18px; }
  .subtask__check::after { content: ""; position: absolute; inset: -13px -6px; }
  .subtask__label { width: 34px; height: var(--tap-target); }
  .subtask__title { font-size: var(--text-md); }
  .subtasks__add, .task__subs { min-height: 36px; }

  /* Bouton d'ajout flottant, atteignable au pouce */
  .fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-drag);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--surface);
    box-shadow: var(--shadow-drag);
  }

  .modal { max-width: none; margin-top: 0; }
  .overlay { padding: var(--space-3); place-items: end center; }
  .modal__foot .btn, .modal__body .btn { min-height: var(--tap-target); }
  .toasts { bottom: 88px; }
}