/*
 * Variables de style personnalisables. Peuvent être surchargées depuis Parrainage > Réglages
 * (couleurs, arrondi) sans toucher à ce fichier — ou directement ici pour un contrôle plus fin.
 */
:root {
	--pp-primary-color: #2271b1;
	--pp-primary-hover: #135e96;
	--pp-text-color: #1d2327;
	--pp-border-color: #ccc;
	--pp-border-radius: 4px;
	--pp-success-bg: #d4f7dc;
	--pp-success-text: #14532d;
	--pp-success-border: #86e0a0;
	--pp-error-bg: #fde2e2;
	--pp-error-text: #7f1d1d;
	--pp-error-border: #f5a3a3;
	--pp-font-family: inherit;
	--pp-form-align: left;
}

.pp-dashboard, .pp-form, .pp-table, .pp-message { font-family: var(--pp-font-family); color: var(--pp-text-color); }

.pp-form { text-align: var(--pp-form-align); }
.pp-form label { display: block; margin-bottom: 4px; font-weight: 600; }
.pp-form input[type="text"], .pp-form input[type="email"], .pp-form input[type="password"], .pp-form select, .pp-form textarea {
	width: 100%; max-width: 420px; padding: 8px; margin-top: 4px; box-sizing: border-box;
	border: 1px solid var(--pp-border-color); border-radius: var(--pp-border-radius);
}
.pp-form textarea { font-family: inherit; resize: vertical; }
.pp-form button { padding: 10px 20px; background: var(--pp-primary-color); color: #fff; border: none; border-radius: var(--pp-border-radius); cursor: pointer; }
.pp-form button:hover { background: var(--pp-primary-hover); }

/* Formulaire « verrouillable » (voir PP_Helpers::script_formulaires_verrouillables()) : champs
   en lecture seule tant que « Modifier les informations » n'a pas été cliqué. Le bouton reste
   toujours type="button" (voir le commentaire du script) : son état s'affiche donc via
   [data-pp-deverrouille], pas via [type] — gris tant que verrouillé (action secondaire
   « Modifier »), retrouve la couleur primaire une fois déverrouillé (action « Valider »). */
.pp-form-verrouillable input[readonly] { background: #f0f0f0; color: #555; cursor: default; }
.pp-form-verrouillable .pp-edit-toggle { background: #6c757d; }
.pp-form-verrouillable .pp-edit-toggle:hover { background: #565e64; }
.pp-form-verrouillable .pp-edit-toggle[data-pp-deverrouille="true"] { background: var(--pp-primary-color); }
.pp-form-verrouillable .pp-edit-toggle[data-pp-deverrouille="true"]:hover { background: var(--pp-primary-hover); }

/* Bouton stylé comme un simple lien de texte, inline dans un <label> (ex. « conditions de
   participation ») : sans ça il hérite du style plein bouton de .pp-form button ci-dessus. */
.pp-form .pp-link-btn {
	display: inline;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	color: var(--pp-primary-color);
	text-decoration: underline;
	font: inherit;
	cursor: pointer;
}
.pp-form .pp-link-btn:hover { color: var(--pp-primary-hover); }

.pp-message { padding: 12px 16px; border-radius: var(--pp-border-radius); margin-bottom: 16px; }
.pp-success { background: var(--pp-success-bg); color: var(--pp-success-text); border: 1px solid var(--pp-success-border); }
.pp-error { background: var(--pp-error-bg); color: var(--pp-error-text); border: 1px solid var(--pp-error-border); }
.pp-error ul { margin: 0; padding-left: 18px; }

/* Pagination des tableaux (responsable/directeur commercial, comptabilité) : même barre en haut
   et en bas de chaque tableau, voir PP_Helpers::pagination_controls_html(). */
.pp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 10px 0;
	font-size: 13px;
}
.pp-pagination-par-page select { margin-left: 4px; }
.pp-pagination-pages a { margin: 0 4px; }
.pp-pagination-total { opacity: .75; }

.pp-table { width: 100%; border-collapse: collapse; margin: 12px 0 24px; }
.pp-table th, .pp-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; }
.pp-table th { background: #f5f5f5; }

/* Onglets (ex. Parrains / Filleuls, voir PP_Helpers::script_onglets()). */
.pp-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #ddd;
	margin: 16px 0 0;
}
.pp-tab-btn {
	padding: 10px 20px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-size: 14px;
	font-weight: 600;
	color: var( --pp-text-color );
	opacity: .6;
	cursor: pointer;
}
.pp-tab-btn:hover { opacity: .85; }
.pp-tab-btn.is-active {
	opacity: 1;
	color: var( --pp-primary-color );
	border-bottom-color: var( --pp-primary-color );
}

/* En-tête de colonne triable (voir PP_Helpers::lien_tri()) : le lien hérite du style du <th>,
   seule la flèche de sens de tri (▲/▼) se distingue légèrement. */
.pp-table th a { color: inherit; text-decoration: none; }
.pp-table th a:hover { text-decoration: underline; }

/* Grands tableaux (responsable/directeur commercial) : colonnes à largeur fixe, indépendante du
   contenu de CHAQUE ligne. Sans ça (largeur "auto", le défaut HTML), déplier un <details>
   "Historique"/"Modifier" sur une seule ligne peut élargir sa colonne — un tableau HTML calcule
   la largeur des colonnes sur TOUTES les lignes à la fois, jamais ligne par ligne — ce qui
   redistribue l'espace des autres colonnes et fait ainsi bouger la mise en page de TOUTES les
   lignes, pas seulement celle dépliée. La dernière colonne (Modifier / Historique+Modifier,
   toujours la plus volumineuse) garde une largeur généreuse, les autres se partagent le reste.
   `overflow-wrap` évite qu'un contenu plus large que sa colonne fixe déborde au lieu de retourner
   à la ligne. */
.pp-table-large { table-layout: fixed; }
.pp-table-large th:last-child, .pp-table-large td:last-child { width: 26%; }
.pp-table-large td { overflow-wrap: break-word; word-break: break-word; }
/* Un <select> (ex. "Commercial assigné") a une largeur intrinsèque basée sur sa plus longue
   option, qui peut dépasser une colonne à largeur fixe désormais étroite — sans ça, il déborde
   visuellement sur la colonne voisine au lieu de se limiter à sa cellule. */
.pp-table-large select, .pp-table-large input, .pp-table-large form { max-width: 100%; box-sizing: border-box; }

.pp-cagnotte-box .pp-solde { font-size: 28px; font-weight: 700; color: var(--pp-primary-color); }
.pp-cagnotte-date-limite { font-size: 13px; color: #7f1d1d; margin: 4px 0 12px; }
.pp-inline-form { display: inline-block; margin: 0; }
.pp-dashboard h3 { margin-top: 32px; border-bottom: 2px solid #eee; padding-bottom: 6px; }

.pp-account-bar {
	background: #1d2327;
	color: #f0f0f1;
	padding: 8px 20px;
	text-align: right;
	font-size: 13px;
	line-height: 1.4;
}
.pp-account-bar-name { margin-right: 16px; font-weight: 600; }
.pp-account-bar a { color: #f0f0f1; margin-left: 16px; text-decoration: underline; }
.pp-account-bar a:hover { color: #8ecdf7; }

/* Info-bulle "coordonnées du parrain" au survol (tableau de bord comptabilité). */
.pp-parrain-hover {
	position: relative;
	display: inline-block;
	cursor: help;
	border-bottom: 1px dotted #888;
}
.pp-parrain-tooltip {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 20;
	width: max-content;
	max-width: 320px;
	background: #1d2327;
	color: #f0f0f1;
	font-size: 13px;
	line-height: 1.6;
	padding: 10px 14px;
	border-radius: var(--pp-border-radius);
	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
	white-space: normal;
	text-align: left;
}
.pp-parrain-hover:hover .pp-parrain-tooltip,
.pp-parrain-hover:focus-within .pp-parrain-tooltip {
	display: block;
}

/* Popup de confirmation (ex : récupération de cagnotte) */
.pp-dialog {
	border: none;
	border-radius: var(--pp-border-radius);
	padding: 24px;
	max-width: 480px;
	width: 90%;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.pp-dialog::backdrop { background: rgba(0,0,0,0.5); }
.pp-dialog h3 { margin-top: 0; }
.pp-dialog .pp-form button[type="button"] { background: #ddd; color: #333; margin-left: 8px; }
.pp-dialog .pp-form button[type="button"]:hover { background: #ccc; }

/* Fenêtre « Conditions de participation » (texte long, hors formulaire) : plus large que le
   .pp-dialog de confirmation ci-dessus, avec une zone de texte scrollable dédiée. */
.pp-dialog-conditions { max-width: 760px; }
.pp-conditions-texte {
	max-height: 60vh;
	overflow-y: auto;
	line-height: 1.6;
	padding: 12px 16px;
	margin-bottom: 12px;
	border: 1px solid var(--pp-border-color);
	border-radius: var(--pp-border-radius);
}
.pp-conditions-texte > *:first-child { margin-top: 0; }
.pp-conditions-texte > *:last-child { margin-bottom: 0; }
.pp-dialog-conditions .pp-dialog-close { padding: 10px 20px; background: #ddd; color: #333; border: none; border-radius: var(--pp-border-radius); cursor: pointer; }
.pp-dialog-conditions .pp-dialog-close:hover { background: #ccc; }