/* ============================================================
   CheckTonTaf — schedule-calendar.css
   À ajouter dans index.html après style.css.
   Réutilise les variables de couleur déjà définies (--blue,
   --purple, --info, --success, --danger, etc.) pour rester
   cohérent avec le reste de l'app, en clair comme en sombre.
   ============================================================ */

#view-schedule-calendar {
  padding: 4px 0 24px;
}

/* ---------- en-tête / navigation ---------- */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cal-header__label {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-transform: capitalize;
}
.cal-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--grad-brand);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.cal-nav:active { transform: scale(0.94); }

/* ---------- switch semaine / quinzaine / mois ---------- */
.cal-mode-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.cal-mode-switch button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 6px;
  border-radius: calc(var(--radius-sm) - 4px);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.cal-mode-switch button.active {
  background: var(--bg-elevated);
  color: var(--blue);
  box-shadow: var(--shadow);
}

/* ---------- grille ---------- */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

/* ---------- cellule jour ---------- */
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 58px;
  padding: 6px 3px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
}
.cal-grid--fortnight .cal-day,
.cal-grid--week .cal-day { min-height: 74px; }

.cal-day--muted { opacity: .38; }

.cal-day__num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.cal-day__badge {
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.1;
  padding: 1px 6px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,.14);
}
.cal-day__badge--service { background: rgba(255,255,255,.1); color: var(--text-muted); }
.cal-day__alert {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: .7rem;
  line-height: 1;
}
.cal-day__photobadge {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: .62rem;
  line-height: 1;
  background: rgba(245,172,92,.22);
  border: 1px solid rgba(245,172,92,.6);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- couleurs sémantiques par type de jour ---------- */
.cal-day--work {
  background: var(--info-bg);
  border-color: rgba(22, 86, 232, .18);
}
.cal-day--work .cal-day__num { color: var(--blue); }

/* R = bleu foncé */
.cal-day--r { background: rgba(30, 60, 100, .28); border-color: rgba(30, 60, 100, .5); }
.cal-day--r .cal-day__num { color: #6fa8dc; }

/* CP = bleu clair */
.cal-day--cp { background: rgba(80, 190, 245, .16); border-color: rgba(80, 190, 245, .35); }
.cal-day--cp .cal-day__num { color: #7ecdf5; }

.cal-day--cet { background: rgba(63, 116, 209, .18); border-color: rgba(63, 116, 209, .4); }
.cal-day--cet .cal-day__num { color: #6f95e0; }

/* AT / AM / RH = jaune */
.cal-day--yellow { background: rgba(232, 210, 77, .16); border-color: rgba(232, 210, 77, .35); }
.cal-day--yellow .cal-day__num { color: #e8d24d; }

/* DISPO / JTI = orange clair */
.cal-day--dispo { background: rgba(245, 172, 92, .16); border-color: rgba(245, 172, 92, .35); }
.cal-day--dispo .cal-day__num { color: #f5ac5c; }

/* RFL = orange foncé */
.cal-day--rfl { background: rgba(200, 90, 30, .22); border-color: rgba(200, 90, 30, .4); }
.cal-day--rfl .cal-day__num { color: #e07a35; }

/* repos générique (fallback, ne devrait plus arriver en pratique) */
.cal-day--repos { background: var(--bg-soft); }
.cal-day--repos .cal-day__num { color: var(--text-muted); }

.cal-day--warning {
  background: rgba(255, 122, 48, .12);
  border-color: rgba(255, 122, 48, .3);
}
.cal-day--warning .cal-day__num { color: var(--orange); }

.cal-day--danger {
  background: var(--danger-bg);
  border-color: rgba(214, 40, 90, .3);
}
.cal-day--danger .cal-day__num { color: var(--danger); }

/* ---------- sélection / aujourd'hui ---------- */
.cal-day--selected {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.cal-day--selected .cal-day__num,
.cal-day--selected .cal-day__badge {
  color: #fff !important;
}

.cal-day--today:not(.cal-day--selected) {
  border: 2px solid var(--blue);
}

/* ---------- panneau de détail ---------- */
.cal-detail {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.cal-detail__title {
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: 10px;
}
.cal-detail__empty,
.cal-detail__daytype {
  color: var(--text-muted);
  font-size: .88rem;
}
.cal-detail__segments {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-detail__seg-time {
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue);
}
.cal-detail__svc {
  margin-top: 8px;
  font-size: .84rem;
  color: var(--text-muted);
}
.cal-detail__alerts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-detail__alert {
  font-size: .8rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.cal-detail__alert--violation {
  background: var(--danger-bg);
  color: var(--danger);
}
.cal-detail__alert--warning {
  background: rgba(255, 122, 48, .12);
  color: var(--orange);
}
.cal-detail__actions {
  margin-top: 12px;
}
/* ---------- flash de confirmation "Copié !" (onboarding Apliday) ---------- */
.btn-success-flash {
  background: var(--success) !important;
  color: #fff !important;
}