/**
 * Habillage du dashboard frontend Tutor LMS (étudiant/formateur, mode "modern" v4.0).
 *
 * Comme la zone d'apprentissage, ce gabarit est entièrement rendu par le plugin
 * (Alpine.js : popover utilisateur, modales, navigation) — reskinné en CSS ciblée sur ses
 * classes réelles (vérifiées dans templates/dashboard/**, Tutor LMS v4.0.4), pas réécrit en PHP.
 * Chargée sur tutor_utils()->is_tutor_frontend_dashboard() (cf. inc/tutor/hooks.php).
 */

body {
	background: var(--dsa-bg) !important;
}

.tutor-dashboard-layout {
	background: var(--dsa-bg) !important;
}

/*
 * Filet de sécurité pour la carte de profil du popover utilisateur et la page Réglages/Compte
 * (templates/account.php) : au cas où ces écrans plus récents du plugin ne suivent pas encore
 * complètement les variables --tutor-surface-* remappées dans tutor-theme-vars.css.
 */
.tutor-dashboard-header-user-popover-profile,
.tutor-profile-header-top,
.tutor-account-page-wrapper,
.tutor-account-header {
	background: var(--dsa-surface) !important;
}

/* ---------- Barre latérale ---------- */

.tutor-dashboard-sidebar {
	background: var(--dsa-bg-texture) !important;
	border-right: 1px solid var(--dsa-border) !important;
}

/*
 * Le plugin fixe .tutor-dashboard-sidebar-logo à height:80px + padding:16px 40px +
 * overflow:hidden, et l'image à max-height:100% du conteneur (donc ~48px quoi qu'on fasse sur
 * l'image seule) — il faut agrandir le conteneur, pas seulement l'image, pour que ça ait un effet.
 */
.tutor-dashboard-sidebar-logo {
	height: calc(var(--dsa-logo-h-sidebar) + 32px) !important;
	padding: 16px 24px !important;
}

.tutor-dashboard-sidebar-logo img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto;
}

.tutor-dashboard-sidebar-nav a {
	color: var(--dsa-text-muted) !important;
	border-radius: var(--dsa-radius-sm);
}

.tutor-dashboard-sidebar-nav a:hover {
	background: var(--dsa-surface) !important;
	color: var(--dsa-text) !important;
}

.tutor-dashboard-sidebar-nav a.active {
	background: var(--dsa-lime-a14) !important;
	color: var(--dsa-lime) !important;
}

.tutor-see-all-courses {
	color: var(--dsa-lime) !important;
	border-top: 1px solid var(--dsa-border) !important;
}

/* ---------- En-tête ---------- */

.tutor-dashboard-header {
	background: var(--dsa-surface) !important;
	border-bottom: 1px solid var(--dsa-border) !important;
}

.tutor-dashboard-header-left .tutor-text-subdued {
	color: var(--dsa-text-muted) !important;
}

.tutor-dashboard-header-user-avatar.active {
	outline: 2px solid var(--dsa-lime);
	outline-offset: 2px;
	border-radius: 999px;
}

.tutor-dashboard-header-user-popover {
	background: var(--dsa-surface) !important;
	border: 1px solid var(--dsa-border) !important;
}

.tutor-dashboard-header-user-popover-menu a:hover,
.tutor-dashboard-header-user-popover-menu a.active {
	color: var(--dsa-lime) !important;
}

/* ---------- Cartes de statistiques (accueil du dashboard) ---------- */

.tutor-stat-card {
	border-radius: var(--dsa-radius-lg) !important;
	border: 1px solid transparent !important;
	transition: transform var(--dsa-dur-instant) var(--dsa-ease-out);
}

.tutor-stat-card:hover {
	transform: translateY(-2px);
}

.tutor-stat-card-title {
	font-family: var(--dsa-font-mono);
	font-size: var(--dsa-step--2) !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tutor-stat-card-value {
	font-family: var(--dsa-font-display);
	font-weight: 700 !important;
	font-size: var(--dsa-step-2) !important;
}

/*
 * Le plugin colore l'icône et la valeur de chaque carte via des règles directes
 * .tutor-stat-card-{variante} .tutor-stat-card-icon / .tutor-stat-card-value (couleurs fixes
 * par variante, ex. var(--tutor-text-brand)) — une règle directe sur l'élément l'emporte
 * toujours sur une couleur héritée de l'ancêtre, même avec !important sur ce dernier. On cible
 * donc explicitement l'icône et la valeur, pas seulement la carte.
 */

.tutor-stat-card-enrolled {
	background: var(--dsa-lime) !important;
	color: var(--dsa-lime-ink) !important;
}

.tutor-stat-card-enrolled .tutor-stat-card-icon,
.tutor-stat-card-enrolled .tutor-stat-card-value {
	color: var(--dsa-lime-ink) !important;
}

.tutor-stat-card-active {
	background: var(--dsa-peach) !important;
	color: var(--dsa-peach-ink) !important;
}

.tutor-stat-card-active .tutor-stat-card-icon,
.tutor-stat-card-active .tutor-stat-card-value {
	color: var(--dsa-peach-ink) !important;
}

.tutor-stat-card-completed {
	background: var(--dsa-sky) !important;
	color: var(--dsa-sky-ink) !important;
}

.tutor-stat-card-completed .tutor-stat-card-icon,
.tutor-stat-card-completed .tutor-stat-card-value {
	color: var(--dsa-sky-ink) !important;
}

.tutor-stat-card-time-spent {
	background: var(--dsa-surface) !important;
	color: var(--dsa-text) !important;
	border-color: var(--dsa-border) !important;
}

.tutor-stat-card-time-spent .tutor-stat-card-icon,
.tutor-stat-card-time-spent .tutor-stat-card-value {
	color: var(--dsa-text) !important;
}

.tutor-stat-card-time-spent .tutor-stat-card-title {
	color: var(--dsa-text-muted) !important;
}

/* ---------- "Continue Learning" : cartes de cours en cours ---------- */

.tutor-student-dashboard-courses > .tutor-flex > div:first-child {
	color: var(--dsa-text) !important;
	font-family: var(--dsa-font-display);
	font-weight: 600;
	text-transform: none !important;
}

.tutor-progress-card {
	background: var(--dsa-surface) !important;
	border: 1px solid var(--dsa-border) !important;
	border-radius: var(--dsa-radius-lg) !important;
	cursor: pointer;
	transition: border-color var(--dsa-dur-instant) var(--dsa-ease-out);
}

.tutor-progress-card:hover {
	border-color: var(--dsa-lime) !important;
}

.tutor-progress-card-category {
	font-family: var(--dsa-font-mono);
	font-size: var(--dsa-step--2);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--dsa-lime) !important;
}

.tutor-progress-card-title {
	color: var(--dsa-text) !important;
}

.tutor-progress-card-details {
	color: var(--dsa-text-muted) !important;
}

.tutor-progress-card-separator {
	color: var(--dsa-text-faint) !important;
}

/* ---------- État vide (nouvel étudiant sans cours) ---------- */

.tutor-dashboard-welcome-card {
	background: linear-gradient(120deg, var(--dsa-lime-a14), color-mix(in oklab, var(--dsa-sky) 8%, transparent)) !important;
	border: 1px solid var(--dsa-lime-a25) !important;
	border-radius: var(--dsa-radius-xl) !important;
}

.tutor-dashboard-welcome-badge {
	background: var(--dsa-surface) !important;
	color: var(--dsa-lime) !important;
}

.tutor-dashboard-quick-tips-card {
	background: var(--dsa-surface) !important;
	border: 1px solid var(--dsa-border) !important;
	border-radius: var(--dsa-radius-lg) !important;
}

/* ---------- Complétion de profil ---------- */

.tutor-profile-completion {
	background: var(--dsa-surface) !important;
	border: 1px solid var(--dsa-border) !important;
	border-radius: var(--dsa-radius-lg) !important;
}

.tutor-profile-completion-body {
	border-top: 1px solid var(--dsa-border) !important;
}

/* ---------- Cartes génériques du dashboard (annonces, formulaires...) ---------- */

.tutor-card,
.tutor-surface-l1 {
	background: var(--dsa-surface) !important;
	border-color: var(--dsa-border) !important;
	color: var(--dsa-text);
}

.tutor-dashboard-body a:not(.tutor-btn) {
	color: var(--dsa-lime);
}