/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   PLANNING PAGE — one screen, only the grid scrolls
   The page never scrolls: header, toolbars, grid and pagination
   always fit the viewport, so the sticky date row (inside the grid)
   and the pagination stay visible. 100dvh follows the phone's
   browser bars (100vh fallback for old browsers).
   ============================================================ */
body.planning-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.planning-page > main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Takes its content height when short (few members), shrinks and scrolls otherwise */
body.planning-page #gridContainer {
  flex: 0 1 auto;
  min-height: 0;
}

body.planning-page #paginationBar {
  flex-shrink: 0;
}

/* ============================================================
   PLANNING GRID
   ============================================================ */
.grid-container {
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

/* Sticky header row — stays visible on vertical scroll */
table.planning thead th {
  position: sticky;
  top: 0;
  z-index: 15;
}

/* Sticky first column — stays visible on horizontal scroll */
table.planning th:first-child,
table.planning td:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  background: white;
  min-width: 100px;
  max-width: 140px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

/* Corner cell: sticky both top AND left — highest z-index */
table.planning thead th:first-child {
  z-index: 25;
  background: #f9fafb;
  top: 0;
  left: 0;
}

/* Column header highlight when search result */
.col-highlight th {
  outline: 3px solid #f59e0b !important;
  outline-offset: -2px;
  animation: col-flash 1.5s ease-out;
}

@keyframes col-flash {
  0%   { background-color: #fef3c7; }
  100% { background-color: inherit; }
}

/* ============================================================
   CELL STATES
   ============================================================ */
.cell-checked {
  background-color: #4ade80 !important;
}

.cell-unchecked {
  background-color: #e5e7eb !important;
}

/* Own row */
.own-row td:first-child {
  background-color: #fefce8 !important;
}

.own-row {
  background-color: #fefce8;
}

/* ============================================================
   COLUMN HEADERS (session dates)
   Background colour = the session type's colour in the client config,
   set inline by applySessionHeaderStyle() (planning.html)
   ============================================================ */
.header-session {
  color: white;
}

/* ============================================================
   TOTALS ROW
   ============================================================ */
.totals-row {
  position: sticky;
  bottom: 0;
  background: white;
  font-weight: bold;
  z-index: 15;
}

/* On the cells, not the row: with border-collapse: separate, row borders aren't drawn */
.totals-row td {
  border-top: 2px solid #374151;
}

.totals-row td:first-child {
  background: white !important;
  z-index: 20;
}

/* ============================================================
   TABLE BASE
   ============================================================ */
/* Separate (not collapsed) borders: each cell paints its own borders, so the sticky
   name column, date header and total row cover what scrolls beneath them. With
   collapsed borders, the row lines of sticky cells let the scrolled cells show through. */
table.planning {
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
}

table.planning th {
  padding: 0.5rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid #e5e7eb;
}

table.planning td {
  padding: 0.2rem 0.35rem;
  border-bottom: 1px solid #f3f4f6;
}

/* Thin dark line between the date headers only (not down the grid).
   Inset box-shadow rather than a border: no layout change (a border would widen
   every column by 1px). */
table.planning thead th:not(:first-child) {
  box-shadow: inset 1px 0 0 #111827;
}

/* Cells: min 44px for touch targets */
.presence-cell {
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-width: 44px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}

.presence-cell:hover .cell-unchecked,
.presence-cell:hover .cell-checked {
  opacity: 0.8;
}

.cell-readonly {
  cursor: default;
}

/* ============================================================
   SESSION NOTE in header
   ============================================================ */
.session-note {
  font-style: italic;
  font-size: 0.6rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.9;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-top: 1px;
}

.note-icon {
  cursor: help;
  font-style: normal;
  font-size: 0.75rem;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.page-btn {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  background: white;
  color: #374151;
  transition: background-color 0.15s;
  min-width: 32px;
  text-align: center;
}

.page-btn:hover:not(:disabled) {
  background: #f3f4f6;
}

.page-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
  font-weight: 600;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ============================================================
   PIN INPUT
   ============================================================ */
.pin-input {
  font-size: 2rem;
  letter-spacing: 0.5rem;
  text-align: center;
  width: 8rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.pin-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   SAVE INDICATOR
   ============================================================ */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  transition: opacity 0.3s;
}

/* ============================================================
   MONTH NAV
   ============================================================ */
.month-nav-btn {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #374151;
  transition: background-color 0.15s;
}

.month-nav-btn:hover {
  background-color: #f3f4f6;
}

/* ============================================================
   SEARCH BAR (planning)
   ============================================================ */
.search-bar {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}

.search-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 140px;
  max-width: 280px;
}

.search-input {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
}

.search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Date search calendar (flatpickr): dot under the days that have a session */
.flatpickr-day.has-session {
  position: relative;
  font-weight: 600;
}

.flatpickr-day.has-session::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #3b82f6;
}

.flatpickr-day.has-session.selected::after {
  background: #fff;
}

/* ============================================================
   MOBILE SEARCH TOGGLE (🔍)
   Hidden by default, shown by the ≤640px media query below
   ============================================================ */
.search-toggle-btn {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background: none;
  cursor: pointer;
}

.search-toggle-btn.active {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

/* Orange dot: a search is filtering the grid while the fields are hidden */
.search-toggle-btn.has-search::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid white;
}

/* ============================================================
   RESPONSIVE — 375px (iPhone SE) → 768px (tablet)
   ============================================================ */
@media (max-width: 640px) {
  .search-bar {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
  }

  .search-field-group {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .search-input {
    font-size: 1rem; /* évite le zoom auto iOS à 16px */
  }

  table.planning th:first-child,
  table.planning td:first-child {
    min-width: 72px;
    max-width: 90px;
    font-size: 0.7rem;
  }

  table.planning th {
    padding: 0.35rem 0.3rem;
    font-size: 0.6rem;
  }

  table.planning td {
    padding: 0.15rem 0.25rem;
  }

  .presence-cell {
    min-width: 44px; /* keep 44px touch target */
    height: 36px;
  }

  .pin-input {
    font-size: 1.5rem;
    width: 7rem;
  }

  .session-note {
    display: none; /* hide text note on very small screens, show icon only */
  }

  .note-icon {
    display: inline !important;
  }

  /* Search fields collapsed behind the 🔍 button to leave room for the grid */
  .search-bar.search-collapsed {
    display: none;
  }

  .search-toggle-btn {
    display: inline-flex;
  }

  /* Month navigation must fit on one line down to 360px ("Septembre 2026" + « ← Début ») */
  #planningNavBar > div:first-child {
    gap: 0.25rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #planningNavBar .month-nav-btn {
    padding: 0.25rem 0.5rem;
  }

  /* Narrower screens: the month name shrinks with an ellipsis rather than overflowing */
  #currentMonthLabel {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #currentMonthLabel,
  #btnFromStart,
  #btnToggleView {
    white-space: nowrap;
  }
}

@media (min-width: 641px) {
  .note-icon-only {
    display: none;
  }
}

/* ============================================================
   MANAGER DU SOIR ROW
   ============================================================ */
.manager-row {
  background-color: #6B3FA0 !important;
  color: white;
}

/* No light row line under the purple row */
.manager-row td {
  border-bottom: none;
}

.manager-row td:first-child {
  background-color: #6B3FA0 !important;
  color: white;
  font-weight: 700;
  z-index: 12;
}

.manager-cell {
  cursor: pointer;
  min-width: 44px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.15s;
}

.manager-cell:hover {
  background-color: rgba(255,255,255,0.15) !important;
}

.manager-cell-locked {
  cursor: not-allowed;
}

/* Dim the content, not the cell: an opacity on the <td> itself drew a light purple
   line at the bottom of the cell (separate table borders) */
.manager-cell-locked > * {
  opacity: 0.75;
}

.manager-cell-readonly {
  cursor: default;
}

/* ============================================================
   COLUMN HEADER — clickable
   ============================================================ */
table.planning thead th[data-session-id] {
  cursor: pointer;
  transition: opacity 0.15s;
}

table.planning thead th[data-session-id]:hover {
  opacity: 0.85;
}

/* ============================================================
   SESSION POPUP
   ============================================================ */
.session-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.session-popup-box {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 90%;
  max-width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 9999;
}

/* ============================================================
   LEGEND (button in the grid's sticky corner cell + popup)
   ============================================================ */
table.planning th .legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;   /* the header row is uppercase */
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

table.planning th .legend-btn:hover {
  background: #dbeafe;
}

.legend-popup-box {
  max-width: 360px;
}

/* The legend reads as one comfortable list in the popup */
.legend-popup-box .legend-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.legend-popup-box .legend-items > div > div {
  width: 1.1rem;
  height: 1.1rem;
}

.legend-popup-box .legend-items span {
  font-size: 0.95rem;
  color: #374151;
}

/* ============================================================
   ADMIN TABLE IMPROVEMENTS
   ============================================================ */
/* iOS Safari: on touch devices flatpickr swaps in a native date field (.flatpickr-mobile), which
   keeps its own minimum width — it ignores width: 100% and spills over the field next to it
   (admin calendar: add-session date over « Type », date filter over the event search). Without the
   native look it obeys the width; the min-height keeps an empty field from collapsing. Touch
   devices only: computers never get this field. */
input.flatpickr-mobile {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
input.flatpickr-mobile::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.25rem;
}

/* Admin « Calendrier » tab on phones: each session row is laid out as a card. Same table on
   every screen (not a second list like the Membres tab) so the note-edit ids stay unique.
   td order: date, type, note, actif, actions. */
@media (max-width: 639.98px) {
  .seances-table thead { display: none; }
  .seances-table, .seances-table tbody { display: block; }
  .seances-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "date date actions" "type actif actions" "note note note";
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.75rem 1rem;
  }
  .seances-table td { padding: 0; text-align: left; }
  .seances-table td:nth-child(1) { grid-area: date; }
  .seances-table td:nth-child(2) { grid-area: type; }
  .seances-table td:nth-child(3) { grid-area: note; max-width: none; }
  .seances-table td:nth-child(4) { grid-area: actif; }
  .seances-table td:nth-child(5) { grid-area: actions; }
  .seances-table td[colspan] { grid-column: 1 / -1; grid-row: auto; padding: 2rem 0; text-align: center; }
  /* Bigger touch targets */
  .seances-table td:nth-child(3) button { padding: 0.25rem 0.5rem; }
  .seances-table td:nth-child(5) button { padding: 0.5rem 0.75rem; }
}

/* Admin « Statistiques », historique (Export) and « Archives » on phones: rows as cards, like
   .seances-table. Shared part in .table-cartes, layout per table by td order. */
@media (max-width: 639.98px) {
  .table-cartes thead { display: none; }
  .table-cartes, .table-cartes tbody { display: block; }
  .table-cartes td { padding: 0; text-align: left; }
  .table-cartes td[colspan] { grid-column: 1 / -1; flex-basis: 100%; padding: 2rem 0; text-align: center; }

  /* Statistiques — td: rang, nom, prénom, présences, barre */
  .stats-table tr {
    display: grid;
    grid-template-columns: 1.75rem auto 1fr auto;
    grid-template-areas: "rang nom prenom total" ". barre barre barre";
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.625rem 1rem;
  }
  .stats-table td:nth-child(1) { grid-area: rang; }
  .stats-table td:nth-child(2) { grid-area: nom; }
  .stats-table td:nth-child(3) { grid-area: prenom; }
  .stats-table td:nth-child(4) { grid-area: total; }
  .stats-table td:nth-child(5) { grid-area: barre; width: auto; }

  /* Historique — td: membre, date, type, présent, modifié le, par */
  .historique-table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "membre membre present" "date type type" "modif par par";
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.625rem 1rem;
  }
  .historique-table td:nth-child(1) { grid-area: membre; }
  .historique-table td:nth-child(2) { grid-area: date; }
  .historique-table td:nth-child(3) { grid-area: type; }
  .historique-table td:nth-child(4) { grid-area: present; }
  .historique-table td:nth-child(5) { grid-area: modif; }
  .historique-table td:nth-child(6) { grid-area: par; }
  .historique-table td:nth-child(5):not(:empty)::before { content: "Modifié le "; }
  .historique-table td:nth-child(6)::before { content: "par "; }

  /* Archives — td: rang, nom, prénom, one per session type (variable), total. First line
     rang / nom / prénom / total, the per-type counts wrap below (tr::after forces the break). */
  .archive-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    padding: 0.625rem 1rem;
  }
  .archive-table td { order: 4; }
  .archive-table td:nth-child(-n+3) { order: 1; }
  .archive-table td:nth-child(1) { width: 1.75rem; }
  .archive-table td:nth-child(3) { flex: 1; }
  .archive-table td:last-child { order: 2; }
  .archive-table tr::after { content: ""; order: 3; flex-basis: 100%; }
  .archive-table td:nth-child(4) { margin-left: 2.25rem; }
  .archive-table td[data-label]::before { content: attr(data-label) " "; color: #6b7280; font-weight: 400; }
}

.admin-search {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  max-width: 320px;
}

.admin-search:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ============================================================
   GUIDED TOUR (TUTORIEL)
   ============================================================ */
#tourOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  /* Let touch/scroll pass through to the page so the user can scroll during
     the tour. The tooltip re-enables pointer-events on itself; stray taps on
     the dimmed page are cancelled by a capturing click handler (see startTour). */
  pointer-events: none;
}

#tourOverlay.hidden { display: none; }

/* The dim + spotlight hole is drawn by a giant box-shadow around a
   transparent box positioned over the highlighted element. */
.tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(17, 24, 39, 0.65);
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 10001;
}

.tour-tooltip {
  position: fixed;
  z-index: 10002;
  width: min(330px, calc(100vw - 2rem));
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  padding: 1rem 1.1rem 0.9rem;
  pointer-events: auto;
}

.tour-tooltip h3 {
  font-weight: 700;
  color: #1f2937;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tour-tooltip p {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.45;
}

.tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.tour-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.2s;
}
.tour-dot.active { background: #3b82f6; }

.tour-btn {
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 0.55rem;
  transition: background 0.15s, color 0.15s;
}
.tour-btn-primary { background: #3b82f6; color: #fff; }
.tour-btn-primary:hover { background: #2563eb; }
.tour-btn-ghost { background: transparent; color: #6b7280; padding: 0.45rem 0.5rem; }
.tour-btn-ghost:hover { color: #374151; }

.tour-skip {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 0.75rem;
  text-decoration: underline;
}
.tour-skip:hover { color: #6b7280; }

/* Floating help button */
#helpBtn {
  position: fixed;
  bottom: 1.1rem;
  right: 1.1rem;
  z-index: 9000;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #3b82f6;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
  transition: background 0.15s, transform 0.15s;
}
#helpBtn:hover { background: #2563eb; transform: scale(1.06); }
#helpBtn.hidden { display: none; }