/* --- Variables de thème --- */
:root {
    --win-blue: #000080;
    --win-yellow: #FFFF00;
    --win-light-blue: #BDD5FB;
	--win-green: #008000;
    --win-white: #FFFFFF;
	--win-light-grey: #E0E0E0;
    --max-menu-width: 500px;
}

/* --- Styles Généraux de Page --- */
.ui-page.custom-bg {
    background-color: var(--win-light-grey) !important;
}

.my-header, .my-footer {
    background-color: var(--win-green) !important;
    color: var(--white) !important;
    text-shadow: none !important;
    border: none !important;
}

/* --- Mise en page et Conteneurs --- */
.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le menu sur PC */
    padding: 20px !important;
}

.logo-container {
    width: 100%;
    max-width: var(--max-menu-width);
    text-align: left;
    margin-bottom: 10px;
}

.menu-container {
    width: 100%;
    max-width: var(--max-menu-width);
}

/* --- Optimisation des Listes (L'aspect "Bouton") --- */
.ui-listview-inset {
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Aligne l'icône et le texte horizontalement */
.ui-listview > li > a.ui-btn {
    display: flex !important;
    align-items: center !important; 
    padding: 8px 15px !important;
}

.ui-listview .ui-li-heading {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: bold;
}


/* Force la couleur vert foncé sur les textes des menus */
.ui-listview li a {
    color: var(--win-green) !important;
    text-shadow: none !important; /* Enlève l'ombre JQM pour plus de netteté */
}

/* Si tu veux que le titre soit encore plus affirmé */
.ui-listview li a .ui-li-heading {
    font-weight: bold !important;
}

/* Optionnel : change la couleur de l'icône de flèche à droite pour l'accorder */
.ui-listview li a::after {
    background-color: var(--win-green) !important;
}

/* Cible les séparateurs de listview (ex: Logiciel, Support, Gestion) */
.ui-listview li.ui-li-divider {
    color: var(--win-green) !important;
    background-color: #e8e8e8 !important; /* Un gris très léger pour le fond du bandeau */
    text-shadow: none !important;
    border-bottom: 1px solid var(--win-green) !important;
    font-weight: bold !important;
    text-transform: uppercase; /* Optionnel : pour un look plus "titre de section" */
    font-size: 16px !important;
}

/* --- Gestion des Icônes --- */
.my-custom-icon {
    width: 32px !important;  
    height: 32px !important; 
    margin-right: 12px !important;
    position: static !important;
    display: block !important;
    padding: 0 !important; /* On enlève le padding pour garder la taille précise de 32px */
}

/* --- HEADER --- */
[data-role="header"].my-header {
    background-color: var(--win-green) !important;
    background-image: none !important;
    border: none !important;
    height: 60px !important; 
    min-height: 60px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.my-header h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important; /* On augmente un peu la police pour équilibrer */
    color: var(--win-white) !important;
    text-shadow: none !important;
}

.my-header .ui-btn-left {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* --- AJUSTEMENT DU CONTENU --- */
/* Pour éviter que le contenu ne glisse sous le header ou ne soit trop collé */
.center-wrapper {
    margin-top: 5px !important; 
}
/* --- FOOTER --- */
[data-role="footer"].footer-class {
    background-color: var(--win-green) !important;
    background-image: none !important;
    border: none !important;
    border-top: 1px solid #3366cc !important;
    height: 40px !important; /* On met 40px comme le header pour la symétrie */
    min-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-class p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    color: var(--win-white) !important;
    text-shadow: none !important;
}

/* Style du bouton Retour (fond blanc, texte vert) */
.my-header .ui-btn-left {
    background-color: white !important;
    color: var(--win-green) !important;
    border: 1px solid white !important;
    text-shadow: none !important;
    font-weight: bold !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; /* Petit relief */
}

/* Force la couleur de l'icône de flèche en vert aussi */
.my-header .ui-btn-left:after {
    background-color: var(--win-green) !important;
}

/* Effet au clic (inversion ou assombrissement léger) */
.my-header .ui-btn-left:active {
    background-color: #f0f0f0 !important;
}

/* Le titre principal de la ligne (ex: Workouts Manager) */
.about-title {
    color: var(--win-green) !important;
    font-weight: bold !important;
    display: block;
}

/* Le texte secondaire (ex: version 1.0.0.0) */
.about-subtitle {
    color: var(--win-green) !important; /* Un gris un peu plus soutenu pour la lisibilité */
    font-size: 0.85em !important;
    display: block;
}

/* 1. Force la couleur bleu foncé sur toutes les cellules de la grille Tabulator */
.tabulator .tabulator-header .tabulator-col {
	background-color: var(--win-green) !important;
	color: var(--win-white) !important;    
    font-weight: 500; /* Rend le texte un poil plus lisible */	
}
.tabulator .tabulator-tableholder .tabulator-cell {
	background-color: white !important;
    color: var(--win-green) !important;
	font-weight: 500; /* Rend le texte un poil plus lisible */
}

/* 2. Style de la ligne lorsque l'utilisateur clique dessus (Sélection) */
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected .tabulator-cell {
    background-color: var(--win-light-grey) !important;
    color: var(--win-green) !important;
	font-weight: bold; 
}

/* 3. Style au survol de la souris (Hover) pour maintenir le gris et le vert */
.tabulator .tabulator-row.tabulator-selected:hover,
.tabulator .tabulator-row.tabulator-selected:hover .tabulator-cell {
    background-color: var(--win-light-grey) !important;
    color: var(--win-green) !important;
	font-weight: bold; 
}

/* --- Styles des Formulaires Contextuels --- */

.form-block-custom {
    background-color: var(--win-light-grey) !important;
	color: var(--win-green) !important;
    border: 1px solid var(--win-green) !important;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    margin-top: 15px;
    max-width: var(--max-menu-width); /* Pour qu'il garde la même largeur que ton menu */
    width: 100%;
    box-sizing: border-box;
}

/* Le titre maintenant centré */
.form-title-custom {
    background-color: var(--win-green) !important;
	color: var(--win-white) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-weight: bold !important;
    border-bottom: 1px solid var(--win-green);
    padding-bottom: 5px;
    text-align: center; /* <-- C'est ça qui centre ton titre ! */
}

/* Style pour le bouton Valider (Vert avec icône Check) */
.btn-validate-custom {
    background-color: #4CAF50 !important; /* Vert */
    border: none !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Style pour le bouton Annuler (Rouge avec icône Croix) */
.btn-cancel-custom {
    background-color: #d9534f !important; /* Rouge */
    border: none !important;
    width: 45px !important;
    height: 45px !important;
    margin: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}