/* ============================================================
   calendar.css — FullCalendar theme overrides
   ============================================================ */

#calendar-wrap {
  flex: 1;
  overflow: hidden;
  padding: 0 16px 8px;
}

.fc {
  height: 100%;
  font-family: var(--font) !important;
}

/* ── Grid & borders ───────────────────────────────────────── */
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
  border-color: var(--fc-border) !important;
}

/* ── Column headers ───────────────────────────────────────── */
.fc-col-header { background: var(--bg2); }
.fc-col-header-cell {
  padding: 8px 4px !important;
  border-color: var(--fc-border) !important;
}
.fc-col-header-cell-cushion {
  color: var(--text2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── Time slots ───────────────────────────────────────────── */
.fc-timegrid-slot { height: auto !important; }
.fc-timegrid-slot-label-cushion {
  font-size: 11px !important;
  color: var(--text3) !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
}
.fc-timegrid-slot-lane { border-color: var(--border) !important; }
.fc-timegrid-slot-lane:hover { background: rgba(45, 212, 191, .04); }

/* Now indicator line */
.fc-timegrid-now-indicator-line {
  border-color: var(--teal) !important;
  border-width: 2px !important;
}
.fc-timegrid-now-indicator-arrow {
  border-top-color: var(--teal) !important;
  border-bottom-color: var(--teal) !important;
}

.fc-scrollgrid { border-color: var(--fc-border) !important; }
.fc-daygrid-day, .fc-timegrid-col { background: var(--fc-bg) !important; }

/* Today highlight */
.fc-day-today { background: var(--fc-today) !important; }
.fc-day-today .fc-col-header-cell-cushion { color: var(--teal) !important; }

/* ── Toolbar ──────────────────────────────────────────────── */
.fc-toolbar {
  margin-bottom: 10px !important;
  padding: 0 !important;
}
.fc-toolbar-title {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: var(--text) !important;
}
.fc-button {
  background: var(--surface) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text2) !important;
  border-radius: var(--r) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
  transition: all .12s !important;
}
.fc-button:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}
.fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active {
  background: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
  font-weight: 600 !important;
}
.fc-button-primary:not(:disabled):active,
.fc-button-primary:focus {
  box-shadow: none !important;
}

/* ── Events ───────────────────────────────────────────────── */
.fc-event {
  border-radius: 6px !important;
  border-left-width: 3px !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 0 !important;
  padding: 2px 5px !important;
  cursor: grab !important;
  font-size: 12px !important;
}
.fc-event:active { cursor: grabbing !important; }
.fc-event-title {
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fc-event-time {
  font-size: 10px !important;
  opacity: 1 !important;
}
.fc-event-main { overflow: hidden; }
.fc-timegrid-event-harness-inset .fc-timegrid-event { box-shadow: none !important; }

/* List view */
.fc-list-event-title { color: var(--text) !important; }
.fc-list-day-cushion,
.fc-list-event td {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Week number column */
.fc-timegrid-axis { background: var(--bg2) !important; }

/* ── Business hours (off-work shading) ───────────────────── */
.fc-non-business {
  background: rgba(0, 0, 0, .15) !important;
}
[data-theme="light"] .fc-non-business {
  background: rgba(0, 0, 0, .04) !important;
}

/* ── Custom appt rendering (inside event) ────────────────── */
.fc-event .appt-inner {
  height: 100%;
  overflow: hidden;
  padding: 1px 2px;
  line-height: 1.2;
}
.fc-event .appt-name-line {
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-event .appt-sub-line {
  font-size: 10px;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.fc-event .appt-icons {
  float: right;
  font-size: 10px;
  margin-left: 4px;
}

/* Compact variant for events < 20 min. Tighten everything so both lines
   fit without pushing the content out of the box. */
.fc-event .appt-inner.appt-compact {
  padding: 0 2px;
  line-height: 1.1;
}
.fc-event .appt-inner.appt-compact .appt-name-line {
  font-size: 10.5px;
  font-weight: 600;
}
.fc-event .appt-inner.appt-compact .appt-sub-line {
  font-size: 9px;
  margin-top: 0;
  opacity: .9;
}

/* Space out the view-switcher buttons (Jour/Semaine/Mois/Liste) so they
   don't look crammed together. FullCalendar groups them in a
   .fc-button-group by default — we break that grouping visually. */
.fc-header-toolbar .fc-button-group .fc-button {
  margin: 0 4px 0 0 !important;
  border-radius: 20px !important;
  min-width: 64px;
  text-align: center;
}
.fc-header-toolbar .fc-button-group .fc-button:last-child {
  margin-right: 0 !important;
}
.fc-header-toolbar .fc-button-group {
  gap: 4px;
}

/* Tous les view-switchers : même apparence, margin reset */
.fc-header-toolbar .fc-dayBtn-button,
.fc-header-toolbar .fc-timelineBtn-button,
.fc-header-toolbar .fc-timeGridDay-button,
.fc-header-toolbar .fc-timeGrid3Day-button,
.fc-header-toolbar .fc-timeGridWeek-button,
.fc-header-toolbar .fc-dayGridMonth-button,
.fc-header-toolbar .fc-listWeek-button {
  border-radius: 20px !important;
  min-width: 64px !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Tous les boutons FC header : hauteur 29px, padding uniforme,
 * margin reset (FC met des -1px et 9px qui décalent tout). */
.fc-header-toolbar .fc-button {
  height: 29px !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 20px !important;
  /* FC met opacity:0.65 sur fc-today-button quand désactivé → gris clair.
   * On force 1 partout pour une couleur uniforme. */
  opacity: 1 !important;
}
.fc-header-toolbar .fc-prev-button .fc-icon,
.fc-header-toolbar .fc-next-button .fc-icon {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Chunk gauche (‹ › Aujourd'hui) et droit (view-switchers) :
 * gap uniforme entre les boutons. */
.fc .fc-toolbar-chunk {
  display: flex;
  align-items: center;
  gap: 4px !important;
}

/* Footer toolbar (mobile only) : view-switchers TOUS à la même largeur,
 * répartis pour remplir la largeur disponible. flex:1 1 0 force toutes
 * les colonnes flex à mesurer 0 puis croître à parts égales. */
/* Footer toolbar (mobile only) : tous les boutons à la même taille,
 * répartis équitablement. On cible .fc-button directement pour attraper
 * TOUS les boutons (natifs + customButtons) sans exception. */
.fc-footer-toolbar {
  display: flex;
  padding: 8px !important;
  border-top: 1px solid var(--fc-border);
  background: var(--card, #fff);
  margin-top: 0 !important;
  gap: 4px;
}
.fc-footer-toolbar .fc-toolbar-chunk {
  display: flex;
  flex: 1;
  gap: 4px;
}
.fc-footer-toolbar .fc-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 20px !important;
  text-align: center !important;
  padding: 6px 4px !important;
  font-size: 12px !important;
  height: auto !important;
}
.fc .fc-footer-toolbar {
  padding: 8px !important;
  border-top: 1px solid var(--fc-border);
  background: var(--card, #fff);
  margin-top: 0 !important;
}

/* Center the entire FullCalendar toolbar vertically against its
   background row (was looking offset-high on desktop). */
.fc .fc-header-toolbar {
  align-items: center !important;
  min-height: 48px;
  padding: 4px 12px !important;
}

/* Mobile : footer toolbar harmonisé avec le DayView custom (.dv-toolbar-mobile-bottom).
   Pattern : sticky en bas, boutons à largeur ÉGALE (flex:1 1 0 + min-width:0)
   pour éviter qu'un bouton long comme "Timeline" pousse les autres hors viewport. */
@media (max-width: 600px) {
  .fc .fc-footer-toolbar {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: var(--card, #fff) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    padding: 8px !important;
    margin: 0 !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  /* Le chunk central porte tous les boutons. */
  .fc-footer-toolbar .fc-toolbar-chunk {
    display: flex !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }
  /* Boutons en flex:1 pour largeur égale.
     Padding très serré (4px 2px) pour laisser tout le texte visible
     même sur viewport 344px sans tronquer.
     Font 11px (au lieu de 12) pour caser "Semaine" et "Timeline" entiers. */
  .fc-footer-toolbar .fc-button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 2px !important;
    font-size: 11px !important;
    text-align: center !important;
    border-radius: 20px !important;
    line-height: 1.3 !important;
    height: auto !important;
    margin: 0 !important;
    /* IMPORTANT : display:flex + justify-content:center sur le bouton lui-même.
       Sans ça, les .fc-button ont leur display natif (inline-block) qui ne
       centre pas le contenu textuel quand le bouton est étiré par flex:1 1 0.
       Résultat sans ça : "Semaine" reste collé à gauche dans le bouton, qui
       fait toute la largeur (gros vide à droite). */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* PAS de white-space:nowrap + overflow:hidden + text-overflow:ellipsis !
       Ces 3 règles ensemble produisent "Se..." "Tim..." "Lis..." quand le
       texte ne tient pas — exactement ce qu'on veut éviter. */
    white-space: normal !important;
    overflow: visible !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   v1.3.69 — RDV annulés (Jacob 23/05/2026)
   
   Quand un patient annule via le lien magique du mail de confirmation,
   le RDV passe à status='cancelled'. Sans ce visuel, il continuait à
   s'afficher comme un RDV normal → le staff ne voyait pas que le
   créneau était libéré.
   
   Maintenant : motif hachuré gris (repeating-linear-gradient) + opacité
   réduite + texte barré. Le RDV reste visible (traçabilité) mais
   impossible à confondre avec un RDV actif. C'est la convention UX
   universelle (Outlook fait pareil).
   
   Si l'admin préfère masquer complètement, il peut activer le toggle
   "Masquer les RDV annulés" dans Settings (cf settings.js v1.3.69).
   ───────────────────────────────────────────────────────────────── */
.fc .fc-event.appt-cancelled {
  opacity: 0.55;
  /* Motif hachuré : bandes diagonales gris-clair par-dessus la couleur
     existante de l'event. On utilise repeating-linear-gradient avec
     un alpha bas (0.35) pour que la couleur de fond du RDV (provider
     ou type) reste légèrement perceptible — c'est utile au staff
     pour retrouver visuellement quel type de RDV c'était. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(127, 127, 127, 0.35) 0,
    rgba(127, 127, 127, 0.35) 6px,
    transparent 6px,
    transparent 12px
  ) !important;
  /* Bordure pointillée gris pour renforcer le côté "désactivé" */
  border-style: dashed !important;
  border-color: #94a3b8 !important;
  border-width: 1.5px !important;
}

/* Texte barré pour ne laisser aucun doute. On cible le contenu textuel
   à l'intérieur de l'event (FullCalendar wrap dans .fc-event-title et
   .fc-event-time). Tout le texte de l'event est barré. */
.fc .fc-event.appt-cancelled .fc-event-title,
.fc .fc-event.appt-cancelled .fc-event-time,
.fc .fc-event.appt-cancelled .fc-event-main {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(60, 60, 60, 0.75);
}

/* Au hover : on remonte un peu l'opacité (70%) pour que le staff puisse
   lire les détails plus facilement quand il survole. Pas 100% pour
   maintenir la distinction visuelle même au hover. */
.fc .fc-event.appt-cancelled:hover {
  opacity: 0.75;
}