/* ============================================================
   TMZ Centre — tableau de bord Tutor LMS 4 ("Mon espace")
   ------------------------------------------------------------
   Charte du site vitrine : bleu marine, blanc, vert pour l'action.
   Principe : AUCUN gabarit du plugin n'est surcharge. Tout est
   scope sous .tutor-dashboard-layout (conteneur du tableau de
   bord Tutor) et passe par :
     - les variables CSS de Tutor (le graphique "Course Completion
       Rate" lit ses couleurs dans ces variables au moment du rendu,
       les donnees restent celles du plugin) ;
     - quelques regles de presentation plus specifiques que celles
       du plugin (pas de !important sauf pour battre un !important
       du plugin).
   Charge uniquement quand Tutor charge tutor-dashboard.css
   (voir functions.php).
   ============================================================ */

/* Pages "compte" (Profil, Reglages...) : hors .tutor-dashboard-layout, meme charte. */
.tutor-dashboard-layout,
.tutor-profile-header,
.tutor-account-container{
	/* Boutons primaires (Termine, Enregistrer...) : bleu institutionnel au lieu du bleu Tutor */
	--tutor-button-primary:var(--blue-ink,#1C3A74);
	--tutor-button-primary-hover:#0F172A;
	--tutor-button-primary-focused:var(--blue-ink,#1C3A74);
	--tutor-button-primary-disabled:#93C5FD;
	--tutor-button-primary-soft:#DBEAFE;
	--tutor-button-primary-soft-hover:#BFDBFE;
	--tutor-button-primary-soft-focused:#DBEAFE;
	--tutor-text-brand:var(--blue-ink,#1C3A74);
	--tutor-text-brand-hover:#0F172A;
	--tutor-icon-brand:var(--blue-ink,#1C3A74);
	--tutor-icon-brand-hover:#0F172A;
	--tutor-actions-brand-primary:var(--blue-ink,#1C3A74);
	--tutor-border-brand:var(--blue-ink,#1C3A74);
	--tutor-surface-brand-primary:var(--blue-ink,#1C3A74);
	--tutor-surface-brand-tertiary:#EFF4FF;
	--tutor-surface-brand-quaternary:#DBEAFE;
	--tutor-font-family-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
	--tutor-font-family-heading:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
}

.tutor-dashboard-layout{
	/* Charte TMZ (memes valeurs que tmzcentre.ma) */
	--tmz-navy:#0F172A;
	--tmz-blue:var(--blue-ink,#1C3A74);
	--tmz-blue-bright:var(--blue-ink,#1C3A74);
	--tmz-blue-soft:#60A5FA;
	--tmz-blue-light:#93C5FD;
	--tmz-green:#179272;
	--tmz-green-dark:#0F7A5E;
	--tmz-green-light:#4ECBA5;
	--tmz-ink:#1E293B;
	--tmz-muted:#64748B;
	--tmz-line:var(--line,rgba(15,23,42,.12));
	--tmz-bg:var(--mist,#F6F5F2);

	/* Typographie du site vitrine */
	--tutor-font-family-body:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
	--tutor-font-family-heading:'Plus Jakarta Sans','Inter',system-ui,sans-serif;

	/* Couleur de marque Tutor (bleu generique #3E64DE) -> bleu institutionnel TMZ */
	--tutor-text-brand:var(--blue-ink,#1C3A74);
	--tutor-text-brand-hover:#0F172A;
	--tutor-icon-brand:var(--blue-ink,#1C3A74);
	--tutor-icon-brand-hover:#0F172A;
	--tutor-actions-brand-primary:var(--blue-ink,#1C3A74);
	--tutor-border-brand:var(--blue-ink,#1C3A74);
	--tutor-surface-brand-primary:var(--blue-ink,#1C3A74);
	--tutor-surface-brand-tertiary:#EFF4FF;
	--tutor-surface-brand-quaternary:#DBEAFE;
	--tutor-brand-450:#93C5FD; /* anneau de focus clavier */
}

.tutor-dashboard-layout .tutor-dashboard-main{background:var(--tmz-bg);}

/* ------------------------------------------------------------
   1. Barre laterale
   ------------------------------------------------------------ */
.tutor-dashboard-layout .tutor-dashboard-sidebar{
	background:#FFFFFF;
	border-inline-end:1px solid var(--tmz-line);
}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul{gap:6px;}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a{
	position:relative;
	color:#334155;
	border-radius:12px;
	padding:10px 20px;
	transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a svg{
	color:var(--tmz-blue);
	flex-shrink:0;
	transition:color .18s ease;
}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:hover{
	background-color:#EFF4FF;
	color:var(--tmz-navy);
}
/* Element actif : bloc marine plein, texte blanc, icone et liseré verts */
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active,
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active:hover{
	background-color:var(--tmz-navy);
	color:#FFFFFF;
	font-weight:700;
	box-shadow:0 12px 24px -16px rgba(15,23,42,.85);
}
/* Couleurs posees sur le texte et l'icone eux-memes : vitrine-chrome.css colore
   tous les liens du site (body.wp-child-theme-astra-child-tmz a:not(...)) avec une
   specificite plus forte, qui rendait "Home" bleu fonce sur fond marine. */
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a span{color:#334155;}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:hover span{color:var(--tmz-navy);}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active span{color:#FFFFFF;}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active svg{color:var(--tmz-green-light);}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active::before{
	content:"";
	position:absolute;
	inset-block:10px;
	inset-inline-start:0;
	width:4px;
	border-radius:0 4px 4px 0;
	background:var(--tmz-green);
}
[dir=rtl] .tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a.active::before{border-radius:4px 0 0 4px;}
/* Le plugin retire tout contour en !important : on retablit un focus clavier visible */
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a:focus-visible{
	outline:2px solid var(--tmz-blue-light)!important;
	outline-offset:2px;
}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-see-all-courses{color:var(--tmz-blue);font-weight:600;border-radius:12px;}
.tutor-dashboard-layout .tutor-dashboard-sidebar .tutor-see-all-courses:hover{background-color:#EFF4FF;}

/* ------------------------------------------------------------
   2. En-tete : message d'accueil et avatar
   ------------------------------------------------------------ */
.tutor-dashboard-layout .tutor-dashboard-header{
	background:#FFFFFF;
	border-bottom:1px solid var(--tmz-line);
}
.tutor-dashboard-layout .tutor-dashboard-header-left .tutor-h5{
	font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
	font-weight:700;
	color:var(--tmz-navy);
	letter-spacing:-0.015em;
}
.tutor-dashboard-layout .tutor-dashboard-header-left .tutor-h5 .tutor-text-subdued{
	color:var(--tmz-muted);
	font-weight:500;
}
.tutor-dashboard-layout .tutor-dashboard-header-left .tutor-tiny{color:var(--tmz-muted);}
.tutor-dashboard-layout .tutor-dashboard-header-left .tutor-tiny .tutor-font-medium{
	color:var(--tmz-blue);
	font-weight:700;
}

/* Avatar (initiales ou photo) : pastille marine, anneau bleu clair, vert quand le menu est ouvert.
   Sous 577px, Tutor masque l'avatar et affiche une icone "utilisateur" dans un bouton :
   l'anneau ne s'applique donc qu'au-dessus, et l'icone mobile prend le bleu TMZ. */
@media (min-width:577px){
	.tutor-dashboard-layout .tutor-dashboard-header-user-avatar{
		border:2px solid #DBEAFE;
		transition:border-color .18s ease,box-shadow .18s ease;
	}
	.tutor-dashboard-layout .tutor-dashboard-header-user-avatar:hover{border-color:var(--tmz-blue-light);}
	.tutor-dashboard-layout .tutor-dashboard-header-user-avatar.active{
		border-color:var(--tmz-green);
		box-shadow:0 0 0 3px rgba(23,146,114,.18);
	}
}
@media (max-width:576px){
	/* Tutor fixe l'en-tete a 60px sur mobile : la police de titre, plus large, faisait
	   passer le message d'accueil sur 2 lignes et le texte etait rogne en haut. */
	.tutor-dashboard-layout .tutor-dashboard-header{height:auto;min-height:60px;}
	.tutor-dashboard-layout .tutor-dashboard-header-left{min-width:0;}
	.tutor-dashboard-layout .tutor-dashboard-header-left .tutor-h5{font-size:1rem;line-height:1.4rem;}
	.tutor-dashboard-layout .tutor-dashboard-header .tutor-dashboard-header-user-avatar{color:var(--tmz-blue);}
	.tutor-dashboard-layout .tutor-dashboard-header .tutor-dashboard-header-user-avatar.active{color:var(--tmz-green);}
}
.tutor-dashboard-layout .tutor-dashboard-header-user-avatar .tutor-avatar,
.tutor-dashboard-layout .tutor-dashboard-header-user-popover .tutor-avatar{
	background-color:var(--tmz-blue);
	color:#FFFFFF;
}
.tutor-dashboard-layout .tutor-dashboard-header-user-avatar .tutor-avatar .tutor-avatar-initials,
.tutor-dashboard-layout .tutor-dashboard-header-user-popover .tutor-avatar .tutor-avatar-initials{
	color:#FFFFFF;
	font-weight:700;
	letter-spacing:.04em;
}
.tutor-dashboard-layout .tutor-dashboard-header-user-popover-profile{background-color:#EFF4FF;}

/* ------------------------------------------------------------
   3. Filtre des sections
   ------------------------------------------------------------ */
.tutor-dashboard-layout .tutor-dashboard-home-sort .tutor-btn-outline{
	background:#FFFFFF;
	border-color:#CBD5E1;
	color:var(--tmz-blue);
	border-radius:10px;
}
.tutor-dashboard-layout .tutor-dashboard-home-sort .tutor-btn-outline:hover{border-color:var(--tmz-blue);}

/* ------------------------------------------------------------
   4. Cartes statistiques (accueil formateur)
   Une famille de couleurs de la charte, une teinte par carte :
   gains = vert, cours = bleu institutionnel, apprenants = bleu vif,
   note moyenne = marine. Chiffres en marine pour la lisibilite.
   ------------------------------------------------------------ */
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card{
	--tmz-card-accent:var(--tmz-blue);
	--tmz-card-soft:#DBEAFE;
	position:relative;
	overflow:hidden;
	background:#FFFFFF;
	border:1px solid var(--tmz-line);
	border-radius:16px;
	padding:18px 18px 16px;
	box-shadow:0 1px 2px rgba(15,23,42,.04);
	transition:box-shadow .2s ease,border-color .2s ease;
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:3px;
	background:var(--tmz-card-accent);
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card:hover{
	border-color:#CBD5E1;
	box-shadow:0 14px 30px -22px rgba(15,23,42,.45);
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card-title{
	color:#475569;
	font-weight:600;
	font-size:.8125rem;
	line-height:1.25rem;
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card .tutor-stat-card-icon{
	width:38px;
	height:38px;
	flex-shrink:0;
	border-radius:11px;
	align-items:center;
	justify-content:center;
	background:var(--tmz-card-soft);
	color:var(--tmz-card-accent);
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card .tutor-stat-card-value{
	font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
	color:var(--tmz-navy);
	letter-spacing:-0.02em;
}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card-brand{--tmz-card-accent:var(--tmz-green-dark);--tmz-card-soft:#E3F4EE;}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card-exception1{--tmz-card-accent:var(--tmz-blue);--tmz-card-soft:#DBEAFE;}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card-exception5{--tmz-card-accent:var(--tmz-blue);--tmz-card-soft:#E4EDFF;}
.tutor-dashboard-layout :is([data-section-id="current_stats"],.tutor-student-dashboard-stats) .tutor-stat-card-exception4{--tmz-card-accent:var(--tmz-navy);--tmz-card-soft:var(--line,rgba(15,23,42,.12));}
/* Accueil eleve (memes cartes) : cours suivis = bleu institutionnel, actifs = bleu vif,
   termines = vert, temps passe = marine. Remplace le violet/cyan/vert/orange de Tutor. */
.tutor-dashboard-layout .tutor-student-dashboard-stats .tutor-stat-card-enrolled{--tmz-card-accent:var(--tmz-blue);--tmz-card-soft:#DBEAFE;}
.tutor-dashboard-layout .tutor-student-dashboard-stats .tutor-stat-card-active{--tmz-card-accent:var(--tmz-blue);--tmz-card-soft:#E4EDFF;}
.tutor-dashboard-layout .tutor-student-dashboard-stats .tutor-stat-card-completed{--tmz-card-accent:var(--tmz-green-dark);--tmz-card-soft:#E3F4EE;}
.tutor-dashboard-layout .tutor-student-dashboard-stats .tutor-stat-card-time-spent{--tmz-card-accent:var(--tmz-navy);--tmz-card-soft:var(--line,rgba(15,23,42,.12));}

/* ------------------------------------------------------------
   5. Graphique "Course Completion Rate"
   Les 5 etats restent distincts par la teinte ET la clarte :
   Inscrit bleu institutionnel (fonce), Termine vert, En cours bleu
   clair, Inactif gris ardoise clair, Annule rouge sobre.
   Le script de Tutor lit ces variables sur le <canvas> au rendu.
   ------------------------------------------------------------ */
.tutor-dashboard-layout .tutor-dashboard-home-chart{
	background:#FFFFFF;
	border:1px solid var(--tmz-line);
	border-radius:16px;
	box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.tutor-dashboard-layout .tutor-dashboard-home-chart > .tutor-small{
	color:var(--tmz-navy);
	font-weight:700;
}
.tutor-dashboard-layout .tutor-dashboard-home-chart[data-stacked="true"]{
	--tutor-actions-exception5:var(--blue-ink,#1C3A74);       /* Inscrit  */
	--tutor-actions-success-primary:#179272;  /* Termine  */
	--tutor-actions-caution:#60A5FA;          /* En cours */
	--tutor-surface-l2-hover:#CBD5E1;         /* Inactif  */
	--tutor-actions-critical-primary:#B42318; /* Annule   */
}
.tutor-dashboard-layout .tutor-dashboard-home-chart[data-stacked="true"] .tutor-dashboard-home-chart-legend{color:#475569;}
.tutor-dashboard-layout .tutor-dashboard-home-chart[data-stacked="true"] .tutor-dashboard-home-chart-legend .tutor-text-primary{
	color:var(--tmz-navy);
	font-weight:700;
}
.tutor-dashboard-layout .tutor-dashboard-home-chart[data-stacked="true"] .tutor-dashboard-home-chart-legend::before{border-radius:3px;}

/* Autres cartes de l'accueil formateur (meilleurs cours, avis...) */
.tutor-dashboard-layout .tutor-dashboard-home-card{
	background:#FFFFFF;
	border-color:var(--tmz-line);
	border-radius:16px;
}

/* ------------------------------------------------------------
   6. Mobile : barre de navigation du bas
   ------------------------------------------------------------ */
.tutor-dashboard-layout .tutor-dashboard-nav-mobile{
	background:#FFFFFF;
	border-top:1px solid var(--tmz-line);
	box-shadow:0 -10px 24px -20px rgba(15,23,42,.45);
}
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>a,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>button{color:#475569;}
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>a .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>button .tutor-dashboard-nav-mobile-icon{
	color:var(--tmz-blue);
	padding:4px 14px;
	border-radius:999px;
	transition:background-color .18s ease,color .18s ease;
}
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>a.active,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>a.active span,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>button.active,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>button.active span{
	color:var(--tmz-navy);
	font-weight:700;
}
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>a.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-layout .tutor-dashboard-nav-mobile-list>li>button.active .tutor-dashboard-nav-mobile-icon{
	background:var(--tmz-navy);
	color:var(--tmz-green-light);
}

/* Le bouton WhatsApp flottant ne doit pas recouvrir la barre du bas */
@media (max-width:767px){
	body:has(.tutor-dashboard-nav-mobile) .tmz-fab{bottom:92px;}
}

@media (prefers-reduced-motion:reduce){
	.tutor-dashboard-layout *{transition:none!important;}
}