/**
 * CampusDelia — Polissage du dashboard frontend Tutor LMS 4.0
 *
 * Approche : on re-règle les design tokens natifs de Tutor et on peaufine
 * quelques composants réels du dashboard. Rien n'est cassé si Tutor met à jour
 * sa structure : les tokens restent des tokens, et les sélecteurs ciblent des
 * classes stables. Les surcharges de couleur sont limitées au thème clair pour
 * ne pas dégrader le thème sombre (que l'utilisateur peut toujours choisir).
 */

/* =========================================================================
   1. Thème clair — tokens affinés (rendu premium, moins dur)
   Portée : thème clair ou système, uniquement sur le dashboard/zone d'apprentissage.
   ========================================================================= */
html[data-tutor-theme="light"] body.tutor-lms,
html[data-tutor-theme="system"] body.tutor-lms {
	/* Fond général plus doux et surfaces nettes */
	--tutor-surface-base: #f6f7f9;
	--tutor-surface-l1: #ffffff;
	--tutor-surface-l1-hover: #f4f5f7;
	--tutor-surface-l2: #eef0f3;
	--tutor-surface-l3: #f4f5f7;

	/* Bordures douces (le contraste "high" natif les rendait presque noires) */
	--tutor-border-idle: #e5e7eb;
	--tutor-border-hover: #d1d5db;
	--tutor-border-tertiary: #eceef1;

	/* Rayon d'angle homogène et généreux */
	--tutor-radius-6: 8px;
	--tutor-radius-8: 10px;
	--tutor-radius-10: 12px;
	--tutor-radius-12: 14px;
	--tutor-radius-16: 16px;
}

/* Neutralise le contraste "high" hérité s'il reste actif : on garde un texte
   franc mais des bordures douces, pour un rendu propre plutôt que dur. */
html[data-tutor-theme="light"][data-tutor-contrast="high"] body.tutor-lms,
html[data-tutor-theme="system"][data-tutor-contrast="high"] body.tutor-lms {
	--tutor-border-idle: #e5e7eb;
	--tutor-border-hover: #d1d5db;
	--tutor-border-tertiary: #eceef1;
}

/* =========================================================================
   2. Cartes — rayon, bordure et ombre cohérents
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-card,
body.tutor-screen-frontend-dashboard .tutor-stat-card {
	border-radius: 16px;
	border: 1px solid var(--tutor-border-idle, #e5e7eb);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
	transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

/* =========================================================================
   3. Cartes de statistiques — hiérarchie plus lisible
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-stat-card {
	padding: 20px 22px;
}

body.tutor-screen-frontend-dashboard .tutor-stat-card:hover {
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
	transform: translateY(-2px);
	border-color: var(--tutor-border-hover, #d1d5db);
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-title {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--tutor-text-secondary);
}

body.tutor-screen-frontend-dashboard .tutor-stat-card-value {
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	/* Chiffres alignés (pas de saut de largeur) pour les montants et compteurs */
	font-variant-numeric: tabular-nums;
}

/* Pastille d'icône de la carte : fond teinté marque, plus premium */
body.tutor-screen-frontend-dashboard .tutor-stat-card-icon {
	border-radius: 12px;
}

/* =========================================================================
   4. Barre latérale — état actif clair et lisible
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav a {
	border-radius: 10px;
	transition: background-color 160ms ease, color 160ms ease;
}

body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav a:hover {
	background-color: var(--tutor-surface-l1-hover, #f4f5f7);
}

/* =========================================================================
   5. En-tête du dashboard — respiration
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-dashboard-header-inner {
	padding-block: 18px;
}

/* =========================================================================
   6. Cartes de graphiques — hauteur minimale et état vide plus digne
   (Les graphiques "Revenus dans le temps" / "Taux d'achèvement" sont vides
    tant qu'il n'y a pas de données : on évite le cadre d'axe nu et écrasé.)
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-card canvas,
body.tutor-screen-frontend-dashboard .tutor-card .tutor-chart-wrapper {
	min-height: 240px;
}

/* =========================================================================
   7. Lecture vidéo — taille confortable, centrée, ratio 16:9 préservé
   S'applique aussi dans la zone d'apprentissage (leçons).
   ========================================================================= */
.tutor-video-player-wrapper,
.tutor-video-player {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
}

.tutor-video-player-wrapper {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(16, 24, 40, 0.10);
	background: #000;
}

/* Garantit un cadre 16:9 propre même si le ratio natif est perturbé */
.tutor-video-player-wrapper .tutor-ratio-16x9 {
	aspect-ratio: 16 / 9;
}

/* =========================================================================
   8. Boutons primaires — couleur de marque cohérente et état pressé net
   ========================================================================= */
body.tutor-screen-frontend-dashboard .tutor-btn-primary {
	border-radius: 10px;
	transition: transform 120ms ease, filter 160ms ease;
}

body.tutor-screen-frontend-dashboard .tutor-btn-primary:active {
	transform: scale(0.98);
}

/* =========================================================================
   9. Accessibilité — respect de la préférence "mouvement réduit"
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	body.tutor-screen-frontend-dashboard .tutor-card,
	body.tutor-screen-frontend-dashboard .tutor-stat-card,
	body.tutor-screen-frontend-dashboard .tutor-btn-primary,
	body.tutor-screen-frontend-dashboard .tutor-dashboard-sidebar-nav a {
		transition: none;
	}

	body.tutor-screen-frontend-dashboard .tutor-stat-card:hover {
		transform: none;
	}
}