/**
 * Styles pour les pages Mon Compte PRO.
 *
 * @link       https://com-maker.fr/
 * @since      1.0.0
 *
 * @package    Sabine_Be_Pro
 * @subpackage Sabine_Be_Pro/public/css
 *
 * Variables héritées de sabine-be-pro-public.css :
 * --noir, --blanc, --rouge, --texte, --gris, --gris-moyen,
 * --gris-clair, --gris-readonly, --border, --notice-bg
 */

/* ==========================================================================
   Container Mon Compte
   ========================================================================== */

.sabine-be-pro-mes-clients,
.sabine-be-pro-agents,
.sabine-be-pro-create-client {
	color: var(--texte);
	width: 100%;
	margin: 40px auto;
}

/* ==========================================================================
   Actions Haut/Bas (Créer un client)
   ========================================================================== */

.sabine-be-pro-clients-actions {
	margin: 30px 0;
	display: flex;
	justify-content: flex-end;
}

.sabine-be-pro-clients-actions-top {
	margin-top: 0;
	border-bottom: 1px solid var(--noir);
	padding-bottom: 20px;
}

/* ==========================================================================
   Toolbar (Recherche + Filtres)
   ========================================================================== */

.sabine-be-pro-clients-toolbar {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin-bottom: 40px;
	background: var(--gris-clair);
	padding: 35px;
}

.sabine-be-pro-clients-search {
	width: 100%;
}

.sabine-be-pro-search-input {
	width: 100%;
	border: none !important;
	border-bottom: 1px solid var(--texte) !important;
	background: transparent;
	padding: 12px 0 !important;
	font-size: 16px;
	outline: none;
	font-family: 'Helvetica', Arial, sans-serif;
	color: var(--texte) !important;
	box-sizing: border-box;
}

.sabine-be-pro-clients-filters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
}

.sabine-be-pro-filter-select {
	min-width: 180px;
}

/* ==========================================================================
   Select2 - Multiple Selection
   ========================================================================== */

.select2-container--default .select2-selection--multiple {
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	min-height: 45px !important;
	background-color: var(--blanc) !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 10px !important;
}

.select2-container {
	z-index: unset;
}

span.select2-dropdown {
	z-index: 99999;
}

.select2-selection__rendered {
	display: flex !important;
	flex-wrap: wrap !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--noir) !important;
	color: var(--blanc) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 2px 8px !important;
	margin: 5px 5px 0px 0px !important;
	font-size: 0.75rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--blanc) !important;
	margin-right: 5px;
	border: none !important;
	background: none !important;
	padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: var(--blanc) !important;
	background: none !important;
}

.select2-search__field {
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-family: 'Helvetica', Arial, sans-serif !important;
	font-size: 0.85rem !important;
	text-transform: lowercase !important;
	padding: 8px 0 !important;
	width: 100% !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
	padding: 0 !important;
	margin: 5px 0;
}

/* Dropdown (ouvert) */
span.select2-dropdown {
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	position: relative !important;
	margin-top: 2px;
}

.select2-dropdown--above {
	margin-top: 0;
	margin-bottom: 2px;
}

.select2-container--open .select2-selection--multiple {
	border-color: var(--noir) !important;
}

.select2-dropdown .select2-search--dropdown {
	padding: 8px !important;
	border-bottom: 1px solid var(--border);
}

.select2-dropdown .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border) !important;
	border-radius: 0 !important;
	padding: 6px 10px !important;
	font-family: 'Helvetica', Arial, sans-serif !important;
	font-size: 0.85rem !important;
	text-transform: none !important;
	outline: none !important;
}

.select2-dropdown .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--noir) !important;
}

.select2-results__options {
	max-height: 220px !important;
	scrollbar-width: thin;
	scrollbar-color: var(--gris-moyen) transparent;
}

.select2-results__options::-webkit-scrollbar {
	width: 5px;
}

.select2-results__options::-webkit-scrollbar-track {
	background: transparent;
}

.select2-results__options::-webkit-scrollbar-thumb {
	background-color: var(--gris-moyen);
	border-radius: 3px;
}

.select2-container--default .select2-results__option {
	padding: 8px 12px !important;
	font-family: 'Helvetica', Arial, sans-serif !important;
	font-size: 0.85rem !important;
	color: var(--texte);
	background-color: var(--blanc) !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.select2-container--default .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--texte) !important;
	color: var(--blanc) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--gris-clair) !important;
	color: var(--texte) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]:hover,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
	background-color: var(--texte) !important;
	color: var(--blanc) !important;
}

.select2-container--default .select2-results__message {
	padding: 8px 12px !important;
	font-size: 0.85rem !important;
	color: var(--gris-moyen);
}

/* Clear button */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
	margin: 0 5px 0 0;
	font-size: 16px;
	color: var(--gris-moyen);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.sabine-be-pro-pagination-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	font-size: 0.8rem;
	color: var(--gris);
	letter-spacing: 1px;
}

.sabine-be-pro-pagination-wrapper-top {
	margin-bottom: 15px;
}

.sabine-be-pro-pagination-wrapper-bottom {
	margin-top: 15px;
	justify-content: flex-end;
}

.sabine-be-pro-results-info {
	font-size: 0.8rem;
	color: var(--gris);
	font-weight: 500;
	letter-spacing: 1px;
}

.sabine-be-pro-pagination-controls {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sabine-be-pro-pagination-btn {
	background: transparent !important;
	border: 1px solid var(--border);
	padding: 8px 15px;
	cursor: pointer;
	font-size: 0.75rem;
	transition: all 0.3s;
	color: var(--texte) !important;
	text-decoration: none;
}

.sabine-be-pro-pagination-btn:hover:not([disabled]) {
	border-color: var(--texte);
	color: var(--texte);
}

.sabine-be-pro-pagination-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.sabine-be-pro-pagination-current {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--gris);
}

.sabine-be-pro-pagination-input {
	width: 45px;
	border: none !important;
	border-bottom: 1px solid var(--texte) !important;
	text-align: center;
	margin: 0 5px;
	outline: none;
	font-size: 0.85rem;
	font-weight: bold;
	background: transparent;
	color: var(--texte) !important;
	-moz-appearance: textfield !important;
}

.sabine-be-pro-pagination-input::-webkit-outer-spin-button,
.sabine-be-pro-pagination-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sabine-be-pro-pagination-total-pages {
	font-weight: 600;
}

/* Masquer la pagination par défaut de WooCommerce */
.woocommerce-pagination--without-numbers {
	display: none !important;
}

/* Pagination des commandes - utilise les mêmes styles que les clients */
.sabine-be-pro-orders-pagination {
	margin: 15px 0;
}

.sabine-be-pro-orders-pagination a.sabine-be-pro-pagination-btn {
	text-decoration: none;
	color: var(--texte);
}

.sabine-be-pro-orders-pagination a.sabine-be-pro-pagination-btn:hover {
	border-color: var(--noir);
	color: var(--noir);
}

/* ==========================================================================
   Tableaux (Clients / Agents)
   ========================================================================== */

.sabine-be-pro-clients-table-wrapper,
.sabine-be-pro-agents-table-wrapper {
	width: 100%;
	overflow-x: auto;
	margin-bottom: 40px;
}

.sabine-be-pro-clients-table,
.sabine-be-pro-agents-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	text-align: left;
}

.sabine-be-pro-clients-table th,
.sabine-be-pro-agents-table th {
	font-size: 0.7rem;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: var(--gris);
	padding: 15px 10px;
	border: 0;
	border-bottom: 2px solid var(--noir);
	font-weight: bold;
}

.sabine-be-pro-clients-table td,
.sabine-be-pro-agents-table td {
	padding: 20px 10px;
	border: 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.9rem;
	vertical-align: middle;
}

.sabine-be-pro-agents-table tbody tr:hover {
	background-color: var(--gris-clair);
}

/* ==========================================================================
   Colonnes triables
   ========================================================================== */

.sabine-be-pro-sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
}

.sabine-be-pro-sortable:hover {
	color: var(--noir);
}

.sabine-be-pro-sort-icon {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-left: 1px solid var(--texte);
	border-bottom: 1px solid var(--texte);
	transform: rotate(-45deg);
	transition: 0.3s;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -6px;
}

/* Active sorting states */
.sabine-be-pro-sortable.sort-asc .sabine-be-pro-sort-icon {
	transform: rotate(135deg);
	margin-top: -3px;
}

.sabine-be-pro-sortable.sort-desc .sabine-be-pro-sort-icon {
	transform: rotate(-45deg);
	margin-top: -6px;
}

/* ==========================================================================
   Colonnes spécifiques
   ========================================================================== */

/* Nom du client */
.sabine-be-pro-col-name strong {
	display: block;
	text-transform: uppercase !important;
	font-size: 0.95rem;
	margin-bottom: 4px;
}

.sabine-be-pro-client-fullname {
	font-size: 0.75rem;
	color: var(--gris);
	text-transform: uppercase !important;
}

/* Adresse - casse naturelle */
.sabine-be-pro-col-address,
.sabine-be-pro-agent-name {
	text-transform: none !important;
}

/* Agent initials badge */
.sabine-be-pro-agent-initials {
	background: var(--noir);
	color: var(--blanc);
	padding: 4px 8px;
	font-size: 0.7rem;
	display: inline-block;
	margin-bottom: 5px;
	text-transform: uppercase !important;
	font-weight: bold;
	letter-spacing: 1px;
}

/* Agent email */
.sabine-be-pro-agent-email {
	font-size: 0.75rem;
	color: var(--gris);
	text-transform: none !important;
	display: block;
	margin-top: 3px;
}

/* Agent col - nombre clients */
.sabine-be-pro-col-clients {
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--noir);
}

/* Badge gros portefeuille */
.high-volume {
	color: var(--rouge);
}

.sabine-be-pro-not-assigned {
	color: var(--gris-moyen);
	font-style: italic;
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.sabine-be-pro-btn {
	display: inline-block;
	padding: 15px 45px;
	font-size: 12px;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	border: none;
	border-radius: 0;
}

.sabine-be-pro-btn-primary {
	background: var(--texte);
	color: var(--blanc) !important;
	font-weight: bold;
}

.sabine-be-pro-btn-primary:hover {
	background: var(--rouge);
}

.sabine-be-pro-btn-edit {
	background: var(--gris-clair);
	color: var(--texte);
	margin-right: 5px;
	padding: 8px 15px;
}

.sabine-be-pro-btn-edit:hover {
	background: var(--texte);
	color: var(--blanc);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sabine-be-pro-btn-delete {
	background: transparent;
	color: var(--gris-moyen);
	border: 1px solid var(--border);
	padding: 8px 15px;
}

.sabine-be-pro-btn-delete:hover {
	border-color: var(--rouge);
	color: var(--rouge);
	background: rgba(242, 54, 69, 0.05);
}

.sabine-be-pro-btn-cancel {
	color: var(--gris);
	background: transparent;
	border: 1px solid var(--border);
	padding: 15px 45px;
	font-size: 0.75rem;
	letter-spacing: 2px;
}

.sabine-be-pro-btn-cancel:hover {
	border-color: var(--texte);
	color: var(--texte);
}

/* ==========================================================================
   Bouton Loading State
   ========================================================================== */

.sabine-be-pro-btn.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.sabine-be-pro-btn.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--blanc);
	border-top-color: transparent;
	border-radius: 50%;
	animation: sabine-be-pro-spin 0.8s linear infinite;
}

@keyframes sabine-be-pro-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Loading state pour le tableau */
.sabine-be-pro-loading,
.sabine-be-pro-clients-table.sabine-be-pro-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ==========================================================================
   En-tête Création / Édition Client
   ========================================================================== */

.sabine-be-pro-create-header {
	margin-bottom: 50px;
	border-bottom: 1px solid var(--noir);
	padding-bottom: 20px;
}

.sabine-be-pro-back-link {
	color: var(--gris);
	text-decoration: none;
	font-size: 0.8rem;
	display: inline-block;
	margin-bottom: 15px;
	letter-spacing: 1px;
	transition: color 0.3s;
}

.sabine-be-pro-back-link:hover {
	color: var(--rouge);
}

.sabine-be-pro-create-header h2 {
	font-size: 1.8rem;
	font-weight: 300;
	letter-spacing: 2px;
	margin: 0;
	color: var(--noir);
}

/* ==========================================================================
   Formulaire Création / Édition Client - Layout
   ========================================================================== */

.sabine-be-pro-create-form-columns {
	display: flex;
	gap: 80px;
	align-items: flex-start;
}

.sabine-be-pro-create-form-left {
	flex: 2;
}

.sabine-be-pro-create-form-right {
	flex: 1;
	background-color: var(--gris-clair);
	padding: 40px 30px;
	border-radius: 0;
	position: sticky;
	top: 20px;
}

/* ==========================================================================
   Formulaire - Sections
   ========================================================================== */

.sabine-be-pro-form-section {
	margin-bottom: 50px;
}

.sabine-be-pro-form-section h4 {
	font-size: 0.85rem;
	letter-spacing: 2px;
	border-left: 2px solid var(--rouge);
	padding-left: 15px;
	margin-bottom: 35px;
	font-weight: 700;
	color: var(--noir);
	text-transform: lowercase;
}

/* ==========================================================================
   Formulaire - Champs de saisie
   ========================================================================== */

.sabine-be-pro-form-row {
	display: flex;
	gap: 30px;
	margin-bottom: 25px;
}

.sabine-be-pro-form-row:last-child {
	margin-bottom: 0;
}

.sabine-be-pro-form-group {
	display: flex;
	flex-direction: column;
}

.sabine-be-pro-form-group.half-width {
	flex: 1;
}

.sabine-be-pro-form-group.full-width {
	width: 100%;
}

.sabine-be-pro-form-group label {
	font-size: 0.7rem;
	margin-bottom: 8px;
	color: var(--gris);
	letter-spacing: 1px;
}

.sabine-be-pro-form-group input,
.sabine-be-pro-form-group select {
	border: none !important;
	border-bottom: 1px solid var(--border) !important;
	padding: 12px 0 !important;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 16px;
	transition: border-color 0.3s;
	background: transparent;
	outline: none;
	border-radius: 0 !important;
	color: var(--texte) !important;
	width: 100%;
	box-sizing: border-box;
}

.sabine-be-pro-form-group input:focus,
.sabine-be-pro-form-group select:focus {
	border-bottom: 1px solid var(--rouge) !important;
}

.sabine-be-pro-form-group input[readonly],
.sabine-be-pro-form-group select[disabled] {
	color: var(--gris-moyen) !important;
	cursor: not-allowed !important;
}

/* Champ obligatoire */
.required {
	color: var(--rouge);
	margin-left: 2px;
}

/* Description sous les champs */
.sabine-be-pro-form-group .description {
	font-size: 0.65rem;
	color: var(--gris);
	margin-top: 8px;
	font-style: italic;
}

/* ==========================================================================
   Champs Non Éditables (Readonly / Locked)
   ========================================================================== */

.readonly-info {
	padding: 12px 15px;
	font-size: 0.9rem;
	color: var(--gris-moyen);
	background-color: var(--gris-readonly);
	border: 1px solid var(--border);
	border-radius: 0;
	font-weight: 400;
	cursor: not-allowed;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.icon-lock {
	width: 14px;
	height: 14px;
	opacity: 0.3;
	color: var(--noir);
}

/* ==========================================================================
   Notice Sellsy (Info)
   ========================================================================== */

.sabine-be-pro-info-notice {
	background: var(--blanc);
	border: 1px solid var(--border);
	border-left: 4px solid var(--noir);
	padding: 20px;
	display: flex;
	gap: 15px;
	align-items: flex-start;
	margin-bottom: 35px;
	border-radius: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.sabine-be-pro-info-notice-icon {
	width: 18px;
	height: 18px;
	color: var(--noir);
	flex-shrink: 0;
	margin-top: 2px;
}

.sabine-be-pro-info-notice p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--texte);
	line-height: 1.6;
	letter-spacing: 0.3px;
}

/* ==========================================================================
   Checkbox
   ========================================================================== */

.sabine-be-pro-checkbox-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 0.85rem;
	margin-top: 10px;
}

.sabine-be-pro-checkbox-label input[type="checkbox"] {
	accent-color: var(--rouge);
	width: 16px;
	height: 16px;
}

/* Checkbox "Copier l'adresse de facturation" */
.sabine-be-pro-copy-billing-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: none;
	cursor: pointer;
}

.sabine-be-pro-copy-billing-label input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--rouge);
}

/* ==========================================================================
   Actions Formulaire
   ========================================================================== */

.sabine-be-pro-form-actions {
	margin-top: 60px;
	padding: 40px 0;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: 25px;
}

/* ==========================================================================
   Agents - Header
   ========================================================================== */

.sabine-be-pro-header {
	margin-bottom: 40px;
	border-bottom: 1px solid var(--noir);
	padding-bottom: 20px;
}

.sabine-be-pro-header h1,
.sabine-be-pro-agents h1 {
	font-size: 1.5rem;
	letter-spacing: 2px;
	margin: 0;
	font-weight: 300;
}

/* Agent column specifics */
.sabine-be-pro-col-agent strong {
	display: block;
	text-transform: uppercase !important;
	font-size: 0.95rem;
	margin-bottom: 4px;
	letter-spacing: 0.5px;
}

/* ==========================================================================
   Adresses (WooCommerce)
   ========================================================================== */

.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	margin-top: 20px;
}

.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce-MyAccount-content .woocommerce-Address-title::before,
.woocommerce-MyAccount-content .woocommerce-Address-title::after {
	display: none !important;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	border-top: 2px solid var(--noir);
	padding-top: 25px;
	display: flex;
	flex-direction: column;
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2 {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: 2px;
	color: var(--noir);
	text-transform: lowercase;
	border-left: 2px solid var(--rouge);
	padding-left: 15px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
	font-size: 0.75rem;
	font-weight: bold;
	color: var(--noir);
	text-decoration: none;
	border-bottom: 1px solid var(--noir);
	transition: all 0.3s ease;
	padding-bottom: 2px;
}

.woocommerce-MyAccount-content .woocommerce-Address-title a.edit:hover {
	color: var(--rouge);
	border-bottom-color: var(--rouge);
}

.woocommerce-MyAccount-content address {
	font-style: normal;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--texte);
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content > p {
	font-size: 0.9rem;
	color: var(--gris);
	margin-bottom: 40px;
	line-height: 1.6;
}

/* ==========================================================================
   Détails du compte (WooCommerce Edit Account Form)
   ========================================================================== */

.woocommerce-MyAccount-content .page-title {
	font-size: 1.5rem;
	font-weight: 300;
	border-bottom: 2px solid var(--noir);
	padding-bottom: 20px;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

.woocommerce-EditAccountForm.edit-account {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.woocommerce-EditAccountForm .form-row {
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.woocommerce-EditAccountForm .clear {
	display: none;
}

.woocommerce-EditAccountForm label {
	font-size: 0.75rem;
	font-weight: bold;
	color: var(--noir);
	letter-spacing: 1px;
	display: block;
}

/* Correction du transform: translateX(-100%) dans le DOM WooCommerce */
.woocommerce-EditAccountForm label[style*="transform: translateX(-100%)"] {
	transform: none !important;
	margin-bottom: 2px;
}

.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
	width: 100% !important;
	padding: 10px 0 !important;
	border: none !important;
	border-bottom: 1px solid var(--border) !important;
	border-radius: 0 !important;
	font-size: 16px;
	outline: none;
	transition: border-color 0.3s ease;
	background: transparent;
	box-sizing: border-box !important;
}

.woocommerce-EditAccountForm input:focus {
	border-bottom-color: var(--rouge) !important;
}

#account_display_name_description {
	display: block;
	font-size: 0.65rem;
	color: var(--gris-moyen);
	margin-top: 5px;
	line-height: 1.4;
	font-style: italic;
}

/* Fieldset Changement de mot de passe */
.woocommerce-EditAccountForm fieldset {
	border: 1px solid var(--noir);
	padding: 25px;
	margin: 30px 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	clear: both;
}

.woocommerce-EditAccountForm legend {
	font-size: 0.8rem;
	font-weight: bold;
	background: var(--blanc);
	padding: 0 10px;
	letter-spacing: 2px;
	text-transform: lowercase;
}

.woocommerce-EditAccountForm .password-input {
	position: relative;
	display: block;
}

.woocommerce-EditAccountForm .show-password-input {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 20px;
	padding: 0;
}

/* Icône mot de passe masqué */
.woocommerce-EditAccountForm .show-password-input::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z' fill='%23111111'/></svg>");
}

/* Icône mot de passe affiché */
.woocommerce-EditAccountForm .show-password-input.display-password::before {
	background-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z' fill='%23111111'/></svg>");
}

/* Bouton enregistrer — même style que .sabine-be-pro-btn.sabine-be-pro-btn-primary */
.woocommerce-EditAccountForm .woocommerce-Button.button {
	display: inline-block !important;
	padding: 15px 45px !important;
	font-size: 12px !important;
	letter-spacing: 1px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	border: none !important;
	border-radius: 0 !important;
	background: var(--texte) !important;
	color: var(--blanc) !important;
	font-weight: bold;
	margin-top: 20px;
	width: auto;
	float: right;
}

.woocommerce-EditAccountForm .woocommerce-Button.button:hover {
	background: var(--rouge) !important;
}

/* Required star */
.woocommerce-EditAccountForm .required {
	color: var(--rouge);
	text-decoration: none;
}

/* Layout 2 colonnes prénom/nom (> 768px) */
@media (min-width: 768px) {
	.woocommerce-EditAccountForm.edit-account {
		display: block;
	}
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last {
		width: 48%;
		display: inline-flex;
		flex-direction: column;
		margin-bottom: 20px;
	}
	.woocommerce-EditAccountForm .form-row-first {
		float: left;
	}
	.woocommerce-EditAccountForm .form-row-last {
		float: right;
	}
	.woocommerce-EditAccountForm .form-row-wide {
		clear: both;
		width: 100%;
	}
}

/* ==========================================================================
   Modal Édition Client
   ========================================================================== */

.sabine-be-pro-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
}

.sabine-be-pro-modal-overlay.active {
	display: flex;
}

.sabine-be-pro-modal {
	background-color: var(--blanc);
	border-radius: 0;
	max-width: 700px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.sabine-be-pro-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid var(--border);
}

.sabine-be-pro-modal-header h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--noir);
	letter-spacing: 1px;
}

.sabine-be-pro-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--gris-moyen);
	line-height: 1;
	padding: 0;
}

.sabine-be-pro-modal-close:hover {
	color: var(--noir);
}

.sabine-be-pro-modal-body {
	padding: 20px;
}

.sabine-be-pro-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	padding: 20px;
	border-top: 1px solid var(--border);
}

/* ==========================================================================
   Modal Confirmation Suppression (petite)
   ========================================================================== */

.sabine-be-pro-modal-small {
	max-width: 450px;
}

.sabine-be-pro-modal-small .sabine-be-pro-modal-body {
	text-align: center;
	padding: 30px 20px;
}

.sabine-be-pro-confirm-message {
	font-size: 1rem;
	color: var(--texte);
	margin-bottom: 10px;
}

.sabine-be-pro-confirm-info {
	font-size: 0.8rem;
	color: var(--gris-moyen);
}

.sabine-be-pro-modal-small .sabine-be-pro-modal-footer {
	justify-content: center;
}

/* ==========================================================================
   Erreurs de champs (Field-level errors)
   ========================================================================== */

.sabine-be-pro-form-group.has-error input,
.sabine-be-pro-form-group.has-error select,
.sabine-be-pro-form-group.has-error textarea {
	border-bottom-color: var(--rouge);
}

.sabine-be-pro-form-group.has-error input:focus,
.sabine-be-pro-form-group.has-error select:focus,
.sabine-be-pro-form-group.has-error textarea:focus {
	border-bottom-color: var(--rouge);
}

.sabine-be-pro-form-group.has-error label {
	color: var(--rouge);
}

.sabine-be-pro-field-error {
	display: block;
	margin-top: 5px;
	font-size: 0.7rem;
	color: var(--rouge);
	line-height: 1.3;
}

/* ==========================================================================
   Notices (Information, Erreur, Succès)
   ========================================================================== */

.sabine-be-pro-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 15px 20px;
	border-radius: 0;
	margin-bottom: 15px;
	font-size: 0.8rem;
	line-height: 1.5;
}

.sabine-be-pro-notice-icon {
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
}

.sabine-be-pro-notice p {
	margin: 0;
}

/* Notice Info */
.sabine-be-pro-notice--info {
	background-color: var(--gris-clair);
	border: 1px solid var(--border);
	border-left: 4px solid var(--noir);
	color: var(--texte);
}

/* Notice Erreur */
.sabine-be-pro-notice--error {
	background-color: rgba(242, 54, 69, 0.05);
	border: 1px solid var(--rouge);
	border-left: 4px solid var(--rouge);
	color: var(--rouge);
}

.sabine-be-pro-notice--error .sabine-be-pro-notice-icon {
	color: var(--rouge);
}

/* Notice Succès */
.sabine-be-pro-notice--success {
	background-color: #f0fff4;
	border: 1px solid #28a745;
	border-left: 4px solid #28a745;
	color: #155724;
}

.sabine-be-pro-notice--success .sabine-be-pro-notice-icon {
	color: #28a745;
}

/* ==========================================================================
   Messages (No clients, No agents, etc.)
   ========================================================================== */

.sabine-be-pro-no-clients,
.sabine-be-pro-no-agents,
.sabine-be-pro-no-results {
	padding: 20px;
	text-align: center;
	color: var(--gris-moyen);
	background-color: var(--gris-clair);
	border-radius: 0;
}

.sabine-be-pro-message {
	padding: 10px 15px;
	border-radius: 0;
	margin-bottom: 15px;
}

.sabine-be-pro-message-success {
	background-color: #f0fff4;
	color: #155724;
	border: 1px solid #28a745;
}

.sabine-be-pro-message-error {
	background-color: rgba(242, 54, 69, 0.05);
	color: var(--rouge);
	border: 1px solid var(--rouge);
}

/* ==========================================================================
   Dashboard - Tableau de bord Mon Compte
   ========================================================================== */

/* Message de bienvenue */
.woocommerce-MyAccount-content > p:nth-of-type(1) {
	font-size: 1.1rem;
	margin-bottom: 50px;
	color: var(--texte);
}

.woocommerce-MyAccount-content > p:nth-of-type(1) strong {
	color: var(--rouge);
	font-weight: bold;
}

/* Lien de déconnexion */
.woocommerce-MyAccount-content > p:nth-of-type(1) a {
	color: var(--texte);
	text-decoration: none;
	margin-left: 5px;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

.woocommerce-MyAccount-content > p:nth-of-type(1) a:hover {
	color: var(--rouge);
	border-bottom-color: var(--rouge);
}

/* Encadré principal */
.woocommerce-MyAccount-content > p:nth-of-type(2) {
	border: 1px solid var(--texte);
	padding: 50px;
	line-height: 1.8;
	font-size: 1.2rem;
	position: relative;
	background-color: var(--blanc);
	color: var(--texte);
}

/* Carré de signature rouge */
.woocommerce-MyAccount-content > p:nth-of-type(2)::before {
	content: '';
	position: absolute;
	top: -11px;
	left: 30px;
	width: 21px;
	height: 21px;
	background: var(--rouge);
}

/* Liens dans l'encadré */
.woocommerce-MyAccount-content > p:nth-of-type(2) a {
	color: var(--texte);
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid var(--border);
	transition: all 0.2s;
}

.woocommerce-MyAccount-content > p:nth-of-type(2) a:hover {
	color: var(--rouge);
	border-bottom-color: var(--rouge);
}

/* Barre de tri clients (résultats info + tri sur la même ligne) */
.sabine-be-pro-clients-sort-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
}

.sabine-be-pro-clients-sort-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sabine-be-pro-clients-sort-bar .sort-label {
	font-size: 0.7rem;
	color: var(--gris);
	letter-spacing: 1px;
	font-weight: 600;
}

.sabine-be-pro-clients-sort-select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--gris-clair);
	border: none;
	padding: 8px 30px 8px 12px;
	font-size: 0.75rem;
	font-family: inherit;
	text-transform: lowercase;
	color: var(--texte);
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23091F2C' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border-radius: 0;
}

.sabine-be-pro-clients-sort-select:focus {
	outline: none;
	box-shadow: inset 0 -2px 0 var(--rouge);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.sabine-be-pro-create-form-columns {
		flex-direction: column;
		gap: 40px;
	}

	.sabine-be-pro-create-form-right {
		width: 100%;
		position: static;
		order: 2;
		box-sizing: border-box;
	}

	.sabine-be-pro-create-form-left {
		width: 100%;
		order: 1;
	}
}

@media (max-width: 992px) {
	.sabine-be-pro-clients-filters {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	/* Dashboard responsive */
	.woocommerce-MyAccount-content > p:nth-of-type(2) {
		padding: 30px 20px;
		font-size: 1.05rem;
	}

	.sabine-be-pro-mes-clients,
	.sabine-be-pro-agents {
		margin: 0;
	}

	.sabine-be-pro-create-client {
		margin: 0;
	}

	.sabine-be-pro-create-form-right {
		padding: 30px 20px;
	}

	/* Agents - colonnes */
	.sabine-be-pro-col-clients {
		width: 40%;
	}

	.sabine-be-pro-col-agent {
		width: 60%;
	}

	td.sabine-be-pro-col-clients {
		text-align: end;
	}

	.sabine-be-pro-create-header h2 {
		font-size: 1.4rem;
	}

	.sabine-be-pro-clients-toolbar {
		padding: 20px;
	}

	.sabine-be-pro-form-row {
		flex-direction: column;
		gap: 20px;
	}

	.sabine-be-pro-form-actions {
		flex-direction: column-reverse;
		gap: 15px;
		padding: 30px 0;
	}

	.sabine-be-pro-form-actions .sabine-be-pro-btn {
		width: 100%;
		text-align: center;
	}

	.sabine-be-pro-form-section h4 {
		margin-bottom: 25px;
	}

	.sabine-be-pro-clients-table th,
	.sabine-be-pro-clients-table td,
	.sabine-be-pro-agents-table th,
	.sabine-be-pro-agents-table td {
		padding: 10px;
	}

	.sabine-be-pro-modal {
		width: 95%;
		max-height: 95vh;
	}

	/* Formulaire création : champs en pleine largeur sur mobile */
	.sabine-be-pro-form-group.half-width {
		flex: 1 1 100%;
		min-width: 100%;
	}

	/* Adresses */
	.woocommerce-MyAccount-content .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	/* Détails du compte */
	.woocommerce-EditAccountForm .form-row-first,
	.woocommerce-EditAccountForm .form-row-last {
		width: 100% !important;
		float: none !important;
	}

	.woocommerce-EditAccountForm fieldset {
		padding: 15px;
	}

	/* Commandes */
	body .select2-container {
		z-index: unset !important;
	}

	.sabine-be-pro-orders-pagination {
		flex-direction: column;
		align-items: flex-end;
		row-gap: 10px;
	}

	/* ==========================================================================
	   Clients - Cards compactes (mobile)
	   ========================================================================== */

	/* Barre de tri sticky sur mobile */
	.sabine-be-pro-clients-sort-bar {
		flex-direction: column;
		align-items: flex-end;
		padding: 12px 0;
		border-bottom: 1px solid var(--noir);
		position: sticky;
		top: 231px;
		background: var(--blanc);
		z-index: 10;
	}

	/* Bouton créer : pleine largeur + reset border/padding */
	.sabine-be-pro-clients-actions {
		justify-content: stretch;
		border: 0;
		padding: 0;
	}

	.sabine-be-pro-clients-actions .sabine-be-pro-btn-primary {
		width: 100%;
		text-align: center;
	}

	/* Masquer le thead */
	.sabine-be-pro-clients-table thead {
		display: none;
	}

	.sabine-be-pro-clients-table tbody {
		display: block;
	}

	/* Chaque ligne = carte flex */
	.sabine-be-pro-client-row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 14px 0;
		border-bottom: 1px solid var(--border);
		column-gap: 8px;
		row-gap: 4px;
	}

	/* Reset des td */
	.sabine-be-pro-client-row td {
		display: block;
		padding: 0;
		border: none;
	}

	/* Nom entreprise */
	.sabine-be-pro-client-row .sabine-be-pro-col-name {
		flex: 1 1 0%;
		min-width: 0;
		order: 1;
	}

	.sabine-be-pro-client-row .sabine-be-pro-col-name strong {
		font-size: 0.9rem;
		color: var(--texte);
		text-transform: uppercase;
		margin-bottom: 0;
	}

	/* Masquer le fullname en mobile */
	.sabine-be-pro-client-row .sabine-be-pro-client-fullname {
		display: none;
	}

	/* Nb commandes - mis en valeur */
	.sabine-be-pro-client-row .sabine-be-pro-col-orders {
		flex-shrink: 0;
		font-size: 0.95rem;
		color: var(--texte);
		font-weight: bold;
		text-align: right;
		order: 2;
	}

	/* Suffixe traduit via data-suffix */
	.sabine-be-pro-client-row .sabine-be-pro-col-orders::after {
		content: ' ' attr(data-suffix);
		font-size: 0.65rem;
		font-weight: 600;
		color: var(--gris);
		letter-spacing: 0.3px;
	}

	/* Adresse */
	.sabine-be-pro-client-row .sabine-be-pro-col-address {
		flex: 1 1 100%;
		font-size: 0.75rem;
		color: var(--gris-moyen);
		order: 3;
	}

	/* Agent : initiales + nom sur la même ligne */
	.sabine-be-pro-client-row .sabine-be-pro-col-assigned-agent {
		flex: 1 1 100%;
		order: 4;
		font-size: 0.75rem;
		color: var(--gris);
	}

	.sabine-be-pro-client-row .sabine-be-pro-col-assigned-agent br {
		display: none;
	}

	.sabine-be-pro-client-row .sabine-be-pro-agent-initials {
		display: inline-block;
		padding: 1px 5px;
		font-size: 0.6rem;
		font-weight: 600;
		letter-spacing: 0.3px;
		vertical-align: middle;
		margin-right: 4px;
		margin-bottom: 0;
	}

	.sabine-be-pro-client-row .sabine-be-pro-agent-name {
		font-size: 0.75rem;
		color: var(--gris);
		vertical-align: middle;
	}

	/* Actions : alignées à droite */
	.sabine-be-pro-client-row .sabine-be-pro-col-actions {
		flex-basis: 100%;
		display: flex;
		gap: 5px;
		order: 5;
		margin-top: 4px;
		justify-content: flex-end;
	}
}

@media (max-width: 480px) {
	.sabine-be-pro-col-address {
		display: none;
	}
}