/* ── iOS PWA standalone: safe-area pour notch / Dynamic Island ─ */
/* black-translucent permet au contenu de remonter sous la barre  */
/* de statut; env(safe-area-inset-top) compense la hauteur réelle */
@media (display-mode: standalone) {
  nav.navbar.sticky-top {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Surbrillance au survol: tâches et agenda (accueil) ─────── */
.js-task-row,
.js-agenda-row {
  border-radius: 0.375rem;
  transition: background-color 0.12s ease;
}

.js-task-row:hover,
.js-agenda-row:hover {
  background-color: rgba(13, 110, 253, 0.07);
}

/* ── Nav pills: bordure discrète ────────────────────────────── */
.nav-pills .nav-link {
  border: 1px solid var(--bs-border-color);
}

/* ── Formulaires dans cellules: sans marge ──────────────────── */
.table td form {
  margin: 0;
}

/* ── Scroll tactile sur tables ──────────────────────────────── */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ── Nav-pills sticky sous la navbar (desktop uniquement) ────── */
/* Sur mobile overflow-x:auto casse la sticky — on l'applique   */
/* seulement >= 992px où les onglets tiennent sur une ligne.    */
@media (min-width: 992px) {
  main .nav.nav-pills {
    position: sticky;
    top: 3.5rem; /* hauteur standard navbar Bootstrap (~56 px) */
    z-index: 100;
    background-color: var(--bs-light, #f8f9fa);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem !important;
  }
}

/* ── Mobile / tablette (< 992 px) ───────────────────────────── */
@media (max-width: 991.98px) {
  main.container {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  h1.h3 {
    font-size: 1.25rem;
  }

  .card .card-body {
    padding: 0.85rem;
  }

  /* ── Cibles tactiles minimum (44 px recommandé) ─────────── */
  .btn,
  .form-control,
  .form-select {
    min-height: 42px;
  }

  .btn-sm {
    min-height: 38px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  /* Boutons compacts (py-0 px-2) utilisés dans les tableaux:  */
  /* on force une hauteur tactile sans altérer la mise en page */
  .btn.py-0 {
    min-height: 38px !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  /* ── Tables: densité mobile ─────────────────────────────── */
  .table {
    font-size: 0.9rem;
  }

  .table td,
  .table th {
    vertical-align: middle;
  }

  /* ── Nav-scroll: wrapper div qui gère le scroll horizontal ─ */
  /* Le div block n'est pas un flex → overflow-x:auto fiable   */
  .nav-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    margin-bottom: 1rem;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
  }

  .nav-scroll::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
  }

  .nav-scroll .nav-link {
    white-space: nowrap;
  }

  /* ── Navbar mobile: contrôles pleine largeur ────────────── */
  #mainNavbar .ms-lg-auto {
    width: 100%;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  #mainNavbar .ms-lg-auto .form-select,
  #mainNavbar .ms-lg-auto .btn,
  #mainNavbar .ms-lg-auto .badge {
    width: 100%;
  }

  #mainNavbar .ms-lg-auto .badge {
    text-align: center;
    padding: 0.5rem 0.75rem;
  }

  #mainNavbar .ms-lg-auto .d-flex {
    width: 100%;
  }
}