/* ── Syncfusion Scheduler — override pour coller au design PhysioSaaS ── */

/* Toolbar & Header */
.e-schedule .e-schedule-toolbar,
.e-schedule .e-toolbar {
    background: var(--physio-surface) !important;
    border-bottom: 1px solid var(--physio-ink-100) !important;
    box-shadow: none !important;
}

.e-schedule .e-toolbar .e-tbar-btn,
.e-schedule .e-toolbar .e-tbar-btn-text {
    color: var(--physio-ink-700) !important;
    font-family: 'Inter', sans-serif !important;
}

.e-schedule .e-toolbar .e-active-view .e-tbar-btn-text,
.e-schedule .e-toolbar .e-active-view .e-tbar-btn {
    color: var(--physio-sage-600) !important;
    font-weight: 600 !important;
}

/* Dates header */
.e-schedule .e-date-header-wrap .e-header-day {
    color: var(--physio-ink-500);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.e-schedule .e-date-header-wrap .e-header-date {
    color: var(--physio-ink-900);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* Jour courant */
.e-schedule .e-current-day .e-header-date,
.e-schedule .e-current-date .e-header-date {
    background: var(--physio-sage-600) !important;
    color: var(--physio-surface) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Grille horaire */
.e-schedule .e-time-cells-wrap .e-time-cells {
    color: var(--physio-ink-500);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
}

.e-schedule .e-work-hours {
    background: var(--physio-surface) !important;
}

.e-schedule .e-non-work-hours {
    background: var(--physio-ink-50) !important;
}

/* Ligne de l'heure courante */
.e-schedule .e-current-time-indicator {
    border-color: var(--physio-sage-600) !important;
}

.e-schedule .e-current-time-indicator::before {
    background: var(--physio-sage-600) !important;
    border-color: var(--physio-sage-600) !important;
}

/* Resource header (nom des thérapeutes) */
.e-schedule .e-resource-text {
    color: var(--physio-ink-900) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

.e-schedule .e-resource-cells {
    background: var(--physio-ink-50) !important;
    border-bottom: 1px solid var(--physio-ink-100) !important;
}

/* Événements / RDV */
.e-schedule .e-appointment {
    border-radius: 6px !important;
    border: none !important;
    box-shadow: var(--physio-shadow-card) !important;
    font-family: 'Inter', sans-serif !important;
}

.e-schedule .e-appointment .e-appointment-details {
    padding: 4px 8px !important;
}

.e-schedule .e-appointment .e-subject {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e-schedule .e-appointment .e-time {
    font-size: 0.75rem !important;
    opacity: 0.85 !important;
}

/* Cellule de sélection (clic/drag pour créer) */
.e-schedule .e-selected-cell {
    background: var(--physio-sage-50) !important; 
}

/* Bordures de grille */
.e-schedule .e-vertical-view .e-work-cells {
    border-color: var(--physio-ink-100) !important;
}

.e-schedule .e-vertical-view .e-date-header-wrap table td {
    border-color: var(--physio-ink-100) !important;
}

/* Supprimer l'ombre Syncfusion par défaut */
.e-schedule {
    border: none !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
}

/* Quick info popup (désactivé dans notre impl, au cas où) */
.e-quick-popup-wrapper {
    border-radius: 12px !important;
    box-shadow: var(--physio-shadow-raised) !important;
}

/* Bouton Today */
.e-schedule .e-today-btn .e-tbar-btn-text {
    color: var(--physio-sage-600) !important;
}

/* ── Rang de la séance dans l'ordonnance (« 8/9 ») ─────────────────────────── */
.physio-session-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    background: rgba(43, 42, 39, 0.08);
}

/* Dernières séances : renouvellement à demander — visible quelle que soit la couleur du thérapeute. */
.physio-session-badge--renew {
    color: var(--physio-sand-900);
    background: var(--physio-sand-200);
}

/* ── Hauteur des cellules : quart d'heure compact ──────────────────────────────
   Cellules de 15 min à 20 px = 80 px par heure : une séance de 30 min garde ses deux lignes, et une demi-journée
   tient à l'écran. */
.physio-schedule.e-schedule .e-vertical-view .e-time-cells-wrap table td,
.physio-schedule.e-schedule .e-vertical-view .e-work-cells {
    height: 20px;
}

/* Heures pleines marquées, quarts d'heure discrets : l'œil trouve 10 h sans compter les lignes. */
.physio-schedule.e-schedule .e-vertical-view .e-work-cells:not(.e-alternate-cells) {
    border-top-color: var(--physio-ink-200) !important;
}

/* ── Colonnes par thérapeute ─────────────────────────────────────────────────── */
.physio-schedule.e-schedule .e-vertical-view .e-resource-cells {
    background: var(--physio-surface) !important;
}

.physio-schedule.e-schedule .e-vertical-view .e-resource-text {
    font-size: 0.8125rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Séparation nette entre deux jours quand chaque jour est découpé par thérapeute. */
.physio-schedule.e-schedule .e-vertical-view.e-by-date .e-date-header-wrap .e-header-cells,
.physio-schedule.e-schedule .e-vertical-view.e-by-date .e-work-cells.e-resource-group-cells,
.physio-schedule.e-schedule .e-vertical-view .e-work-cells[data-group-index="0"] {
    border-left: 2px solid var(--physio-ink-300) !important;
}

/* ── Contenu d'une séance ───────────────────────────────────────────────────── */
.physio-event {
    padding: 3px 6px;
    height: 100%;
    overflow: hidden;
    color: inherit;
    line-height: 1.3;
}

.physio-event__name {
    font-weight: 600;
    font-size: 0.8125rem;
}

.physio-event__meta {
    font-size: 0.7rem;
}

.physio-event__mark {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.75rem;
}

.physio-event__series {
    flex-shrink: 0;
    font-size: 0.55rem;
    opacity: 0.8;
}

/* Note SOAP à rédiger : visible sur toutes les couleurs de thérapeute. */
.physio-note-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    font-size: 0.65rem;
    color: var(--physio-apricot-900);
    background: var(--physio-apricot-200);
}

/* ── Teinte du thérapeute ───────────────────────────────────────────────────────
   Fond pastel, bordure et texte foncés de la même famille (Theme/tokens.js, therapists) : le blanc sur une couleur vive
   fatiguait l'œil sur une journée entière. Syncfusion pose la couleur de la ressource en style en ligne, d'où !important. */
.physio-schedule .e-appointment.physio-appt--t0 {
    background: var(--physio-therapist-0-fill) !important;
    border-left: 3px solid var(--physio-therapist-0-border) !important;
    color: var(--physio-therapist-0-text) !important;
}
.physio-schedule .e-appointment.physio-appt--t1 {
    background: var(--physio-therapist-1-fill) !important;
    border-left: 3px solid var(--physio-therapist-1-border) !important;
    color: var(--physio-therapist-1-text) !important;
}
.physio-schedule .e-appointment.physio-appt--t2 {
    background: var(--physio-therapist-2-fill) !important;
    border-left: 3px solid var(--physio-therapist-2-border) !important;
    color: var(--physio-therapist-2-text) !important;
}
.physio-schedule .e-appointment.physio-appt--t3 {
    background: var(--physio-therapist-3-fill) !important;
    border-left: 3px solid var(--physio-therapist-3-border) !important;
    color: var(--physio-therapist-3-text) !important;
}
.physio-schedule .e-appointment.physio-appt--t4 {
    background: var(--physio-therapist-4-fill) !important;
    border-left: 3px solid var(--physio-therapist-4-border) !important;
    color: var(--physio-therapist-4-text) !important;
}
.physio-schedule .e-appointment.physio-appt--t5 {
    background: var(--physio-therapist-5-fill) !important;
    border-left: 3px solid var(--physio-therapist-5-border) !important;
    color: var(--physio-therapist-5-text) !important;
}
.physio-schedule .e-appointment.physio-appt--ghost {
    background: var(--physio-ink-100) !important;
    border-left: 3px solid var(--physio-ink-400) !important;
    color: var(--physio-ink-700) !important;
}

/* ── État d'une séance ──────────────────────────────────────────────────────── */

/* Terminée : elle a eu lieu, l'œil passe à la suivante. Seul le fond pâlit (un voile clair par-dessus la couleur) :
   une opacité sur toute la séance faisait tomber son texte sous 4,5:1 de contraste (audit axe-core, e2e 35). */
.physio-schedule .e-appointment.physio-appt--completed {
    background-image: linear-gradient(rgb(255 253 251 / 0.5), rgb(255 253 251 / 0.5)) !important;
}

/* Absent : le créneau reste pris (il a été bloqué pour le patient), mais rien n'a eu lieu. */
.physio-schedule .e-appointment.physio-appt--absent {
    background: repeating-linear-gradient(135deg, var(--physio-ink-200) 0 6px, var(--physio-ink-100) 6px 12px) !important;
    border-left: 3px solid var(--physio-ink-400) !important;
    color: var(--physio-ink-700) !important;
}

.physio-schedule .e-appointment.physio-appt--absent .physio-event__name {
    text-decoration: line-through;
}

/* Annulée (affichée sur demande) : le créneau est libre, la séance n'est plus qu'une trace. */
.physio-schedule .e-appointment.physio-appt--cancelled {
    background: var(--physio-surface) !important;
    border: 1.5px dashed var(--physio-ink-400) !important;
    box-shadow: none !important;
}

.physio-schedule .e-appointment.physio-appt--cancelled .physio-event {
    color: var(--physio-ink-500);
}

.physio-schedule .e-appointment.physio-appt--cancelled .physio-event__name {
    text-decoration: line-through;
}

/* Absence, pause, fermeture : pas une séance. Hachures ambrées (une absence de patient est grise), texte foncé, et
   rien qui ressemble à un patient — on ne la confond pas avec un rendez-vous à déplacer. */
.physio-schedule .e-appointment.physio-appt--block {
    background: repeating-linear-gradient(45deg, var(--physio-sand-50) 0 6px, var(--physio-sand-200) 6px 12px) !important;
    border: none !important;
    border-left: 3px solid var(--physio-sand-600) !important;
    box-shadow: none !important;
    color: var(--physio-sand-900);
}

.physio-schedule .e-appointment.physio-appt--block .physio-event {
    color: var(--physio-sand-900);
}

/* ── Filtres et légende au-dessus de l'agenda ───────────────────────────────── */
.physio-therapist-chip,
.physio-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--physio-ink-200);
    background: var(--physio-surface);
    color: var(--physio-ink-500);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--physio-motion-fast) var(--physio-motion-easing), color var(--physio-motion-fast) var(--physio-motion-easing), border-color var(--physio-motion-fast) var(--physio-motion-easing);
}

.physio-therapist-chip:hover,
.physio-filter-btn:hover {
    border-color: var(--physio-ink-300);
    color: var(--physio-ink-700);
}

.physio-therapist-chip__dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: 2px solid var(--chip-color);
    background: transparent;
}

.physio-therapist-chip--on {
    color: var(--physio-ink-900);
    border-color: var(--chip-color);
    background: color-mix(in srgb, var(--chip-color) 12%, var(--physio-surface));
}

.physio-therapist-chip--on .physio-therapist-chip__dot {
    background: var(--chip-color);
}

.physio-filter-btn--on {
    color: var(--physio-sage-700);
    border-color: var(--physio-sage-200);
    background: var(--physio-sage-50);
}

.physio-legend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    font-size: 0.6rem;
    color: var(--physio-ink-700);
}

.physio-legend--confirmed { background: var(--physio-therapist-0-fill); border-left: 2px solid var(--physio-therapist-0-border); color: var(--physio-therapist-0-text); }
.physio-legend--completed { background: linear-gradient(rgb(255 253 251 / 0.5), rgb(255 253 251 / 0.5)), var(--physio-therapist-0-fill); border-left: 2px solid var(--physio-therapist-0-border); color: var(--physio-therapist-0-text); }
.physio-legend--absent { background: repeating-linear-gradient(135deg, var(--physio-ink-300) 0 3px, var(--physio-ink-100) 3px 6px); border-left: 2px solid var(--physio-ink-400); }
.physio-legend--cancelled { background: var(--physio-surface); border: 1.5px dashed var(--physio-ink-400); }
.physio-legend--block { background: repeating-linear-gradient(45deg, var(--physio-sand-50) 0 3px, var(--physio-sand-200) 3px 6px); border-left: 2px solid var(--physio-sand-600); }

/* ── Largeur minimale d'une colonne ─────────────────────────────────────────────
   Au-delà, l'agenda défile horizontalement (Syncfusion synchronise l'en-tête avec le contenu) : un nom de patient
   reste lisible même en semaine avec tout le cabinet. --physio-columns est posé par Planning.razor. */
.physio-schedule.e-schedule .e-vertical-view .e-date-header-wrap table,
.physio-schedule.e-schedule .e-vertical-view .e-content-wrap table {
    min-width: calc(var(--physio-columns, 1) * 118px);
}

/* Deux séances qui se suivent restent distinctes. */
.physio-schedule.e-schedule .e-vertical-view .e-appointment {
    border: 1px solid var(--physio-surface) !important;
}

/* Téléphone (docs/ux.md § 2, étape 7) : un geste horizontal change de jour (physioAgendaPhone, physio.js). Les zones
   défilantes de Syncfusion sont leurs propres conteneurs de défilement : la règle du conteneur de l'agenda ne les
   atteint pas, et le geste remontait jusqu'au navigateur, qui le prenait pour « Retour ». */
[data-phone="true"] .e-schedule,
[data-phone="true"] .e-schedule * {
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: none;
}