/* Back-office "app shell" : plein écran (voir class-fullscreen-template.php),
   navigation par icônes fixée en bas façon application mobile. Mobile first :
   Sarah et les éditeurs y accèdent surtout depuis leur téléphone. */

/* ---------- Mode sombre ----------
   Propre à CHAQUE compte back-office (colonne dark_mode_enabled sur
   pbr_backoffice_users), jamais un réglage partagé : la classe .pbr-dark est
   posée directement par le PHP du gabarit (backoffice-canvas.php), à partir
   du compte actuellement connecté (PBR_Auth::current_user_dark_mode()) —
   donc déjà correcte au tout premier rendu de l'app, sans flash de thème.
   L'écran de connexion (personne encore identifié) reste volontairement
   TOUJOURS en clair : cette classe n'y est jamais posée.
   Toutes les couleurs de l'app passent déjà par les variables --pbr-* de
   pbr-theme.css : ce seul bloc de redéfinition suffit à tout couvrir, aucune
   autre règle de ce fichier n'a besoin d'être dupliquée pour le mode sombre. */
body.pbr-dark {
	--pbr-cream: #211c17;
	--pbr-white: #2a241c;
	--pbr-ink: #efe6d9;
	--pbr-muted: #a99a85;
	--pbr-border: #3d342a;
	--pbr-brown: #c7b092;
	--pbr-brown-dark: #f2e6d4;
	--pbr-mint: #6fae9a;
	--pbr-mint-light: #2b3a34;
	--pbr-mint-dark: #8fd8bd;
	--pbr-pink: #d98d7e;
	--pbr-pink-light: #3c2b26;
	--pbr-pink-dark: #f2ab99;
	--pbr-danger: #e7998c;
	--pbr-danger-light: #3d2621;
	--pbr-success: #86caa8;
	--pbr-warning: #e0b565;
	--pbr-warning-light: #3d3220;
	--pbr-warning-border: #5c4b2c;
	--pbr-shadow: 0 4px 18px rgba( 0, 0, 0, 0.35 );
	--pbr-shadow-l: 0 8px 32px rgba( 0, 0, 0, 0.5 );
}

html:has( .pbr-fullscreen-body ) {
	background: var( --pbr-cream, #fdfaf5 );
}

.pbr-fullscreen-body {
	margin: 0;
	background: var( --pbr-cream, #fdfaf5 );
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- Overlay de chargement plein écran ----------
   Remplace le texte "Chargement…" partout dans l'app : un seul nœud partagé
   (voir showLoading()/hideLoading() dans backoffice.js), fondu d'opacité,
   loader "roller" (8 points en rotation, currentColor → nos couleurs, donc
   déjà correct en mode sombre sans bloc de redéfinition séparé). */
.pbr-loading-overlay {
	position: fixed;
	inset: 0;
	background: var( --pbr-cream, #fdfaf5 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.pbr-loading-overlay.pbr-visible {
	opacity: 0.94;
	visibility: visible;
	pointer-events: all;
	transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.pbr-loading-overlay .lds-roller {
	color: var( --pbr-mint-dark, #5fa48d );
}

.lds-roller,
.lds-roller div,
.lds-roller div:after {
	box-sizing: border-box;
}
.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-roller div {
	animation: pbr-lds-roller 1.2s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
	transform-origin: 40px 40px;
}
.lds-roller div:after {
	content: ' ';
	display: block;
	position: absolute;
	width: 7.2px;
	height: 7.2px;
	border-radius: 50%;
	background: currentColor;
	margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child( 1 ) {
	animation-delay: -0.036s;
}
.lds-roller div:nth-child( 1 ):after {
	top: 62.62742px;
	left: 62.62742px;
}
.lds-roller div:nth-child( 2 ) {
	animation-delay: -0.072s;
}
.lds-roller div:nth-child( 2 ):after {
	top: 67.71281px;
	left: 56px;
}
.lds-roller div:nth-child( 3 ) {
	animation-delay: -0.108s;
}
.lds-roller div:nth-child( 3 ):after {
	top: 70.90963px;
	left: 48.28221px;
}
.lds-roller div:nth-child( 4 ) {
	animation-delay: -0.144s;
}
.lds-roller div:nth-child( 4 ):after {
	top: 72px;
	left: 40px;
}
.lds-roller div:nth-child( 5 ) {
	animation-delay: -0.18s;
}
.lds-roller div:nth-child( 5 ):after {
	top: 70.90963px;
	left: 31.71779px;
}
.lds-roller div:nth-child( 6 ) {
	animation-delay: -0.216s;
}
.lds-roller div:nth-child( 6 ):after {
	top: 67.71281px;
	left: 24px;
}
.lds-roller div:nth-child( 7 ) {
	animation-delay: -0.252s;
}
.lds-roller div:nth-child( 7 ):after {
	top: 62.62742px;
	left: 17.37258px;
}
.lds-roller div:nth-child( 8 ) {
	animation-delay: -0.288s;
}
.lds-roller div:nth-child( 8 ):after {
	top: 56px;
	left: 12.28719px;
}
@keyframes pbr-lds-roller {
	0% {
		transform: rotate( 0deg );
	}
	100% {
		transform: rotate( 360deg );
	}
}

.pbr-backoffice,
.pbr-login-wrap {
	font-family: var( --pbr-font, sans-serif );
	color: var( --pbr-ink, #4a3f33 );
	font-size: 16px; /* évite le zoom auto iOS sur les inputs */
}

.pbr-backoffice {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background: var( --pbr-cream, #fdfaf5 );
}

/* ---------- Barre du haut ---------- */

.pbr-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 16px;
	background: var( --pbr-white, #fff );
	border-bottom: 1px solid var( --pbr-border, #ece2d6 );
}

/* Ciblé sur cette classe précise, pas ".pbr-header span" (trop large) : ce
   sélecteur générique attrapait AUSSI .pbr-header-actions et
   .pbr-notif-bell-wrap (des <span> eux aussi) et leur imposait
   overflow:hidden — ce qui rognait la pastille de notification qui dépasse
   volontairement de son conteneur. C'était la vraie cause du "cercle coupé",
   pas le <button> lui-même. */
.pbr-header-greeting {
	font-size: 15px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pbr-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Boutons ronds icône-seule du header (déconnexion / mode sombre / cloche) —
   un seul style partagé, `Se déconnecter` (un <a>, les deux autres des
   <button>) rendu identique aux deux autres plutôt que le pill rose-texte
   d'avant, maintenant qu'il n'affiche plus que 🚪. */
.pbr-icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var( --pbr-mint-light, #e6f4ef );
	color: var( --pbr-ink, #4a3f33 );
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	text-decoration: none;
}

/* La pastille est un frère du bouton cloche, pas un enfant (voir le
   commentaire dans backoffice.js, render()) : .pbr-icon-btn est un <button>
   à coins arrondis, et un <button> rogne son propre contenu qui déborde dans
   certains navigateurs — la pastille se retrouvait coupée en deux au lieu de
   dépasser proprement. Ce conteneur neutre (un <span>) n'a pas ce problème. */
.pbr-notif-bell-wrap {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.pbr-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var( --pbr-radius-pill, 999px );
	/* Rouge franc volontairement à part de --pbr-danger (le corail pastel
	   utilisé partout ailleurs pour "Supprimer"/erreurs) : une pastille de
	   notification doit sauter aux yeux, demande explicite de l'utilisateur —
	   ne pas le fondre dans le thème doux du reste de l'app. */
	background: #e0201f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	box-sizing: border-box;
	/* Centrage flex plutôt que line-height : à cette taille, line-height cale
	   mal le chiffre selon les métriques de la police (rendu "1" décalé vers le
	   haut, comme collé au bord du cercle) — flex centre exactement, quel que
	   soit le chiffre affiché ("1" ou "9+"), façon pastille iOS. */
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* Liseré qui reprend le fond du bouton rond sous la pastille (.pbr-icon-btn
	   est en --pbr-mint-light) : donne l'effet "détouré" façon badge iOS
	   plutôt qu'un cercle rouge qui semble juste posé par-dessus. */
	border: 2px solid var( --pbr-mint-light, #e6f4ef );
}

/* ---------- Panneau de notifications ---------- */

.pbr-notif-panel {
	position: fixed;
	top: 60px;
	right: 12px;
	left: 12px;
	max-width: 380px;
	margin-left: auto;
	background: var( --pbr-white, #fff );
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 18px );
	box-shadow: var( --pbr-shadow-l, 0 8px 30px rgba( 0, 0, 0, 0.18 ) );
	padding: 14px;
	z-index: 500;
	max-height: 70vh;
	overflow-y: auto;
}

.pbr-notif-panel h4 {
	margin: 0 0 8px;
}

.pbr-notif-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pbr-notif-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 4px;
	border-bottom: 1px solid var( --pbr-border, #ece2d6 );
}

.pbr-notif-item:last-child {
	border-bottom: none;
}

.pbr-notif-icon {
	flex-shrink: 0;
	font-size: 18px;
	line-height: 1.3;
}

.pbr-notif-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	/* Doit remplir l'espace restant maintenant qu'il y a un 3e élément (la
	   croix) sur la ligne, sinon les deux se retrouvent collés au centre au
	   lieu que la croix reste à droite. */
	flex: 1 1 auto;
}

.pbr-notif-dismiss {
	flex-shrink: 0;
	align-self: center;
	width: 22px;
	height: 22px;
	border: none;
	background: transparent;
	color: var( --pbr-muted, #97897a );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.pbr-notif-dismiss:hover {
	background: var( --pbr-mint-light, #e6f4ef );
	color: var( --pbr-ink, #4a3f33 );
}

.pbr-notif-item-message {
	font-size: 13px;
	color: var( --pbr-muted, #97897a );
}

.pbr-notif-item-date {
	font-size: 11px;
	color: var( --pbr-muted, #97897a );
}

.pbr-notif-empty {
	padding: 10px 4px;
}

.pbr-notif-clear {
	width: 100%;
	margin-top: 10px;
}

/* ---------- Contenu ---------- */

.pbr-tab-content {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px 14px 110px; /* la marge basse laisse la place à la barre de nav */
}

/* ---------- Barre de navigation du bas (façon app mobile) ---------- */

.pbr-tabs {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	background: var( --pbr-white, #fff );
	border-top: 1px solid var( --pbr-border, #ece2d6 );
	padding: 6px 6px calc( 6px + env( safe-area-inset-bottom, 0px ) );
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	box-shadow: 0 -4px 16px rgba( 138, 113, 86, 0.08 );
}

.pbr-tabs::-webkit-scrollbar {
	display: none;
}

.pbr-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1 1 0;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 6px 4px;
	border-radius: var( --pbr-radius, 18px );
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	color: var( --pbr-muted, #97897a );
	min-height: 54px;
}

.pbr-tab-icon {
	font-size: 23px;
	line-height: 1;
}

.pbr-tab-active {
	background: var( --pbr-mint-light, #e6f4ef );
	color: var( --pbr-mint-dark, #5fa48d );
}

/* ---------- Cartes & formulaires ---------- */

.pbr-card {
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 18px );
	padding: 18px 16px 20px;
	margin-bottom: 16px;
	background: var( --pbr-white, #fff );
	box-shadow: var( --pbr-shadow, none );
}

.pbr-card h3 {
	margin-top: 0;
	color: var( --pbr-brown-dark, #5c4a38 );
}

.pbr-input {
	display: block;
	width: 100%;
	min-width: 0; /* les champs date/datetime-local ont une largeur de contenu
	                 intrinsèque plus grande qu'un champ texte ; sans ça ils
	                 débordent de leur cellule de grille/flex au lieu de suivre
	                 width:100% comme les autres champs. */
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var( --pbr-border, #ccc );
	border-radius: var( --pbr-radius-s, 10px );
	margin: 4px 0 12px;
	font-size: 16px; /* anti-zoom iOS */
	min-height: 44px;
	font-family: inherit;
	background: var( --pbr-cream, #fff );
	color: var( --pbr-ink, #333 );
}

.pbr-input:focus {
	outline: 2px solid var( --pbr-mint, #8fc9b8 );
	outline-offset: 1px;
}

/* Certains navigateurs mobiles (notamment iOS Safari) allouent une hauteur
   bien plus généreuse que min-height à un input date/heure natif — le champ
   "Date et heure" du formulaire de résa manuelle apparaissait 2 à 3 fois plus
   haut que ses voisins. Une hauteur explicite (pas juste min-height) force le
   même gabarit que les autres champs, quel que soit le rendu natif du
   sélecteur derrière. */
.pbr-input[type='date'],
.pbr-input[type='datetime-local'],
.pbr-input[type='time'] {
	height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

textarea.pbr-input {
	min-height: 70px;
}

.pbr-card h3 .pbr-input {
	font-size: 18px;
	font-weight: 700;
}

.pbr-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.pbr-grid label {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 13px;
	color: var( --pbr-muted, #555 );
}

.pbr-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	font-size: 15px;
	min-height: 32px;
}

.pbr-checkbox input {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var( --pbr-mint-dark, #5fa48d );
}

fieldset {
	border: 1px solid var( --pbr-border, #eee );
	border-radius: var( --pbr-radius, 12px );
	margin: 10px 0;
	padding: 10px;
}

.pbr-button-primary,
.pbr-button-secondary,
.pbr-button-danger {
	border: none;
	border-radius: var( --pbr-radius-pill, 999px );
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin: 4px 6px 4px 0;
	min-height: 44px;
	font-family: inherit;
}

.pbr-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.pbr-button-primary {
	background: var( --pbr-mint, #8fc9b8 );
	color: var( --pbr-white, #fff );
}

.pbr-button-secondary {
	background: var( --pbr-pink-light, #fce8e2 );
	color: var( --pbr-brown-dark, #5c4a38 );
}

.pbr-button-danger {
	background: var( --pbr-danger-light, #f6e2e2 );
	color: var( --pbr-danger, #a33 );
}

.pbr-save-status {
	display: block;
	font-size: 13px;
	color: var( --pbr-success, #4a8f4a );
	margin-top: 4px;
}

.pbr-badge {
	display: inline-block;
	background: var( --pbr-pink-light, #f3c98b );
	color: var( --pbr-brown-dark, #3a2a12 );
	font-size: 11px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: var( --pbr-radius-pill, 10px );
	vertical-align: middle;
}

/* ---------- Calendriers externes (Google/Apple, phase 4) ---------- */

.pbr-calendar-connections {
	border: 1px solid var( --pbr-border, #e6ddd0 );
	border-radius: 8px;
	padding: 10px 12px;
	margin: 12px 0;
}

.pbr-calendar-connections legend {
	font-size: 12px;
	font-weight: 700;
	color: var( --pbr-muted, #777 );
	text-transform: uppercase;
	padding: 0 4px;
}

.pbr-calendar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var( --pbr-border, #f0ebe3 );
}

.pbr-calendar-row:last-child {
	border-bottom: none;
}

.pbr-connected-badge {
	color: var( --pbr-success, #4a8f4a );
	font-weight: 700;
	margin-right: 8px;
}

.pbr-apple-connect-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
}

.pbr-apple-connect-form label {
	font-size: 12px;
	color: var( --pbr-muted, #777 );
}

.pbr-planning-panel {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var( --pbr-border, #ddd );
}

.pbr-notif-section {
	border-top: 1px solid var( --pbr-border, #ece2d6 );
	padding-top: 12px;
	margin-top: 12px;
}

.pbr-notif-recipients {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin-left: 26px;
}

.pbr-notif-recipients .pbr-checkbox {
	margin: 4px 0;
	min-height: auto;
	font-size: 14px;
}

.pbr-planning-warning {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: var( --pbr-warning-light );
	border: 1px solid var( --pbr-warning-border );
	border-radius: var( --pbr-radius-s );
	padding: 10px 12px;
	margin-bottom: 12px;
	font-size: 0.92em;
	color: var( --pbr-warning );
}

.pbr-planning-warning .pbr-copy-general-hours {
	background: var( --pbr-mint );
	border: none;
	border-radius: var( --pbr-radius-s );
	padding: 6px 12px;
	font-weight: 600;
	color: var( --pbr-ink );
	cursor: pointer;
	white-space: nowrap;
}

.pbr-planning-day {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 0;
	border-bottom: 1px solid var( --pbr-border, #f2ede5 );
}

.pbr-planning-day strong {
	width: auto;
}

.pbr-slots {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}

.pbr-slot {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.pbr-slot input[type="time"] {
	padding: 8px;
	min-height: 40px;
	font-size: 15px;
	border-radius: var( --pbr-radius-s, 8px );
	border: 1px solid var( --pbr-border, #ccc );
	background: var( --pbr-cream, #fff );
	color: var( --pbr-ink, #333 );
}

.pbr-add-slot {
	background: var( --pbr-mint-light, #eee );
	color: var( --pbr-mint-dark, #333 );
	border: none;
	border-radius: var( --pbr-radius-pill, 6px );
	padding: 8px 14px;
	min-height: 40px;
	font-weight: 600;
	font-family: inherit;
}

.pbr-remove-slot,
.pbr-remove-exception {
	border: none;
	background: transparent;
	color: var( --pbr-danger, #a33 );
	cursor: pointer;
	font-size: 20px;
	min-width: 32px;
	min-height: 32px;
}

.pbr-add-exception {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
}

.pbr-exception-field {
	display: block;
	font-size: 13px;
	color: var( --pbr-muted, #97897a );
}

.pbr-exception-field input {
	display: block;
	margin-top: 4px;
}

.pbr-add-exception input,
.pbr-add-exception select {
	min-width: 0;
	min-height: 44px;
	font-size: 16px;
	padding: 8px;
	border-radius: var( --pbr-radius-s, 8px );
	border: 1px solid var( --pbr-border, #ccc );
	font-family: inherit;
	background: var( --pbr-cream, #fff );
	color: var( --pbr-ink, #333 );
}

.pbr-exceptions-list {
	list-style: none;
	padding-left: 0;
}

.pbr-exceptions-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var( --pbr-border, #f2ede5 );
}

/* ---------- Écran de connexion ---------- */

.pbr-login-wrap {
	max-width: 360px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 20px;
	box-sizing: border-box;
}

.pbr-login-form {
	border: 1px solid var( --pbr-border, #eee );
	border-radius: var( --pbr-radius-l, 22px );
	padding: 28px 24px;
	background: var( --pbr-white, #fff );
	box-shadow: var( --pbr-shadow-l, none );
	text-align: center;
}

.pbr-login-logo {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 14px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var( --pbr-shadow, none );
}

.pbr-login-form h2 {
	color: var( --pbr-brown-dark, #5c4a38 );
	margin-top: 0;
}

.pbr-login-form label {
	display: block;
	text-align: left;
	font-size: 13px;
	color: var( --pbr-muted, #777 );
	margin-bottom: 4px;
}

.pbr-login-form input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	margin: 0 0 16px;
	border: 1px solid var( --pbr-border, #ccc );
	border-radius: var( --pbr-radius-s, 10px );
	font-size: 16px;
	min-height: 46px;
	font-family: inherit;
	background: var( --pbr-cream, #fff );
	color: var( --pbr-ink, #333 );
}

.pbr-login-form button {
	width: 100%;
	min-height: 48px;
	border: none;
	border-radius: var( --pbr-radius-pill, 999px );
	background: var( --pbr-mint, #8fc9b8 );
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

.pbr-login-error {
	color: var( --pbr-danger, #a33 );
	font-size: 14px;
}

.pbr-muted {
	color: var( --pbr-muted, #999 );
	font-size: 13px;
}

.pbr-placeholder {
	color: var( --pbr-muted, #888 );
	font-style: italic;
}

/* ---------- Créneaux de la résa manuelle ----------
   Même principe que les chips du formulaire client (frontend-booking.css),
   redéclaré ici avec les variables --pbr-* du back-office plutôt que
   mutualisé, les deux feuilles de style n'étant jamais chargées ensemble. */
.pbr-manual-slots-wrap {
	margin: 4px 0 16px;
}

.pbr-manual-slots-label {
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 8px;
}

.pbr-manual-slots {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 76px, 1fr ) );
	gap: 8px;
}

.pbr-manual-slot {
	border: 1px solid var( --pbr-border, #e5ddd2 );
	background: var( --pbr-white, #fffdfa );
	color: var( --pbr-ink, #333 );
	border-radius: var( --pbr-radius, 12px );
	padding: 10px 4px;
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
	cursor: pointer;
}

.pbr-manual-slot:hover {
	background: var( --pbr-pink-light, #f5efe8 );
	border-color: var( --pbr-pink, #f2a99a );
}

.pbr-manual-slot-active {
	background: var( --pbr-mint, #9fd8c8 );
	border-color: var( --pbr-mint-dark, #6bb8a1 );
	color: var( --pbr-white, #fff );
}

.pbr-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
	font-size: 14px;
}

.pbr-table th,
.pbr-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var( --pbr-border, #f0ebe3 );
	vertical-align: top;
}

.pbr-table th {
	color: var( --pbr-muted, #777 );
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
}

code {
	background: var( --pbr-mint-light, #f5efe8 );
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	word-break: break-all;
}

.pbr-table-responsive {
	overflow-x: visible;
}

/* ---------- Tableaux responsives (cartes empilées en dessous de 1024px) ---------- */
/* En dessous de la vue ordinateur, un <table> classique force un scroll latéral
   inconfortable au doigt : on transforme chaque ligne en petite carte, avec le
   nom de colonne (data-label) affiché devant la valeur. Au-delà de 1024px on
   revient au tableau normal (voir la règle .pbr-table-stack dans le bloc
   desktop plus bas, qui annule tout ceci). */
@media ( max-width: 1023.98px ) {
	.pbr-table-responsive {
		overflow-x: visible;
	}

	.pbr-table-stack {
		min-width: 0;
		width: 100%;
	}

	.pbr-table-stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
		border: 0;
	}

	.pbr-table-stack,
	.pbr-table-stack tbody,
	.pbr-table-stack tr {
		display: block;
	}

	/* Le sélecteur ci-dessus (classe + type) est plus spécifique que la règle
	   [hidden] { display:none } de la feuille par défaut du navigateur (simple
	   attribut) : sans ceci, une ligne masquée (ex: formulaire d'édition client
	   replié) redeviendrait visible ici. */
	.pbr-table-stack tr[hidden] {
		display: none;
	}

	.pbr-table-stack tr {
		margin-bottom: 12px;
		border: 1px solid var( --pbr-border, #eee );
		border-radius: var( --pbr-radius-m, 10px );
		padding: 4px 12px;
		background: var( --pbr-white, #fff );
	}

	.pbr-table-stack tr:last-child {
		margin-bottom: 0;
	}

	.pbr-table-stack td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		text-align: right;
		padding: 7px 0;
		border-bottom: 1px solid var( --pbr-border, #f0ebe3 );
	}

	.pbr-table-stack td:last-child {
		border-bottom: none;
	}

	.pbr-table-stack td:not( [data-label] ) {
		display: block;
		text-align: left;
	}

	.pbr-table-stack td[data-label]::before {
		content: attr( data-label );
		font-weight: 700;
		font-size: 11px;
		text-transform: uppercase;
		color: var( --pbr-muted, #777 );
		text-align: left;
		flex-shrink: 0;
	}
}

.pbr-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.pbr-sortable:hover {
	color: var( --pbr-mint-dark, #5fa48d );
}

.pbr-client-actions {
	white-space: nowrap;
	text-align: right;
}

.pbr-client-actions button {
	margin-right: 6px;
}

.pbr-client-edit-row td {
	background: var( --pbr-mint-light, #f5efe8 );
}

.pbr-client-edit-row .pbr-grid {
	margin-bottom: 8px;
}

.pbr-client-edit-row textarea.pbr-input {
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Lien vers la fiche client (Clients, Résa, Agenda) ---------- */

.pbr-client-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var( --pbr-mint-dark, #5fa48d );
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.pbr-client-link:hover {
	color: var( --pbr-brown-dark, #5c4a38 );
}

/* ---------- Fiche client (superposition plein écran) ---------- */

.pbr-client-fiche-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 74, 63, 51, 0.45 );
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.pbr-client-fiche-panel {
	background: var( --pbr-cream, #fdfaf5 );
	width: 100%;
	max-height: 92vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var( --pbr-radius-l, 26px ) var( --pbr-radius-l, 26px ) 0 0;
	padding: 20px 18px calc( 24px + env( safe-area-inset-bottom, 0px ) );
	box-shadow: var( --pbr-shadow-l, 0 8px 30px rgba( 138, 113, 86, 0.18 ) );
}

.pbr-client-fiche-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.pbr-client-fiche-header h2 {
	margin: 0;
}

.pbr-fiche-close {
	background: var( --pbr-mint-light, #e6f4ef );
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.pbr-client-fiche-stats {
	display: flex;
	gap: 10px;
	margin: 14px 0;
}

.pbr-fiche-stat {
	flex: 1;
	background: var( --pbr-white, #fff );
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 18px );
	padding: 10px;
	text-align: center;
}

.pbr-fiche-stat-value {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var( --pbr-mint-dark, #5fa48d );
}

.pbr-fiche-stat-label {
	display: block;
	font-size: 12px;
	color: var( --pbr-muted, #97897a );
}

.pbr-fiche-notes {
	background: var( --pbr-pink-light, #fce8e2 );
	border-radius: var( --pbr-radius-s, 10px );
	padding: 10px 12px;
	white-space: pre-wrap;
}

@media ( min-width: 700px ) {
	.pbr-client-fiche-overlay {
		align-items: center;
	}

	.pbr-client-fiche-panel {
		width: 640px;
		max-width: 92vw;
		border-radius: var( --pbr-radius-l, 26px );
	}
}

/* ---------- Onglets pleine largeur (Réglages, Services, Emails, Clients…) ----------
   Un vrai système d'onglets (pas des pastilles flottantes) : largeur répartie,
   indicateur net de l'onglet actif, aucune transition/animation pour rester
   instantané au toucher. */

.pbr-subtabs {
	display: flex;
	gap: 0;
	overflow-x: auto;
	padding: 0 !important;
	/* Bordure complète (y compris en bas) : sans elle la barre d'onglets se
	   "diffusait" dans le blanc du contenu en dessous, sans limite visible. */
	border: 1px solid var( --pbr-border, #ece2d6 ) !important;
	box-shadow: none !important;
	background: var( --pbr-white, #fff ) !important;
	border-radius: var( --pbr-radius, 18px ) var( --pbr-radius, 18px ) 0 0;
	margin-bottom: 0 !important;
}

.pbr-subtab {
	flex: 1 1 0;
	min-width: max-content;
	border: none;
	border-left: 1px solid var( --pbr-border, #ece2d6 );
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var( --pbr-muted, #97897a );
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

/* Pas de filet avant le tout premier onglet (déjà la bordure du conteneur). */
.pbr-subtab:first-child {
	border-left: none;
}

.pbr-subtab.pbr-tab-active {
	background: var( --pbr-mint-light, #e6f4ef );
	color: var( --pbr-mint-dark, #5fa48d );
	border-bottom-color: var( --pbr-mint, #8fc9b8 );
}

.pbr-subtabs + .pbr-card,
.pbr-subtabs + .pbr-card-wide {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	padding-top: 22px;
}

.pbr-subtabs-secondary {
	border-top: none !important;
	border-radius: 0 !important;
	border-bottom: 1px solid var( --pbr-border, #ece2d6 ) !important;
}

.pbr-subtabs-secondary .pbr-subtab {
	padding: 9px 10px;
	font-size: 12px;
}

.pbr-subtabs-secondary .pbr-subtab.pbr-tab-active {
	background: var( --pbr-pink-light, #fce8e2 );
	color: var( --pbr-pink-dark, #dd7f6d );
	border-bottom-color: var( --pbr-pink, #f2a99a );
}

/* ---------- Pastilles (Réglages > Personnes) ---------- */

.pbr-people-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 4px 14px;
	background: transparent;
	border: none;
	box-shadow: none;
}

.pbr-people-pill {
	border: 1px solid var( --pbr-border, #ece2d6 );
	background: var( --pbr-white, #fff );
	color: var( --pbr-ink, #4a3f33 );
	border-radius: var( --pbr-radius-pill, 999px );
	padding: 8px 16px;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.pbr-people-pill-active {
	background: var( --pbr-mint, #8fc9b8 );
	border-color: var( --pbr-mint, #8fc9b8 );
	color: #fff;
}

.pbr-people-pill-paused {
	opacity: 0.6;
}

.pbr-people-pill-active.pbr-people-pill-paused {
	opacity: 1;
}

.pbr-emails-subcontent {
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* ---------- Balises dans l'éditeur riche ---------- */

.pbr-token {
	background: var( --pbr-pink-light, #fce8e2 );
	color: var( --pbr-pink-dark, #dd7f6d );
	padding: 1px 6px;
	border-radius: 6px;
	white-space: nowrap;
}

.pbr-token-select {
	margin-bottom: 12px !important;
}

.mce-content-body .pbr-token {
	display: inline-block;
}

/* ---------- Bascule Visuel / Code de l'éditeur riche ---------- */

.pbr-rich-editor-wrap {
	margin-bottom: 10px;
}

/* Barre fine au-dessus de l'éditeur, bouton aligné à droite — plutôt qu'un
   bouton en position absolute superposé au coin de la barre d'outils
   TinyMCE (finissait mal aligné selon la largeur de l'éditeur). Le mode
   visuel reste la vue par défaut, ce bouton n'est là que pour l'usage
   occasionnel de voir/éditer le HTML brut. */
.pbr-rich-editor-topbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 4px;
}

.pbr-rich-toggle {
	width: 30px;
	height: 26px;
	border: 1px solid var( --pbr-border, #e6ddd0 );
	background: var( --pbr-white, #fff );
	color: var( --pbr-muted, #777 );
	border-radius: 7px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.pbr-rich-toggle:hover {
	border-color: var( --pbr-mint, #8fc9b8 );
	color: var( --pbr-mint-dark, #5fa48d );
}

.pbr-rich-toggle.is-active {
	background: var( --pbr-mint-dark, #5fa48d );
	border-color: var( --pbr-mint-dark, #5fa48d );
	color: #fff;
}

.pbr-rich-editor-body {
	border: 1px solid var( --pbr-border, #e6ddd0 );
	border-radius: 8px;
	overflow: hidden;
}

.pbr-rich-editor-code {
	width: 100%;
	box-sizing: border-box;
	min-height: 260px;
	border: none !important;
	border-radius: 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	resize: vertical;
}

/* Cet élément porte aussi .pbr-input (display:block), qui bat sinon la
   règle UA [hidden]{display:none} — même famille de bug que
   .pbr-template-hours[hidden] plus bas, corrigé de la même façon. */
.pbr-rich-editor-code[hidden] {
	display: none;
}

/* Bouton actif de la barre d'outils TinyMCE (ex : curseur dans du texte en
   gras) : le skin par défaut suppose un fond de "pression" qui ne prend pas
   toujours bien sur le thème du site, laissant l'icône blanche sur fond
   blanc — donc invisible. On force un état lisible, quelle que soit la
   version de TinyMCE embarquée par WordPress (4 "lightgray" ou 5/6 "tox"). */
.mce-btn.mce-active,
.mce-btn.mce-active:hover {
	background: var( --pbr-mint-light, #e6f4ef ) !important;
	border-color: var( --pbr-mint, #8fc9b8 ) !important;
}

.mce-btn.mce-active i.mce-ico,
.mce-btn.mce-active button {
	color: var( --pbr-mint-dark, #5fa48d ) !important;
}

.tox-tbtn--enabled,
.tox-tbtn--enabled:hover {
	background: var( --pbr-mint-light, #e6f4ef ) !important;
}

.tox-tbtn--enabled svg {
	fill: var( --pbr-mint-dark, #5fa48d ) !important;
}

/* ---------- Horaires standards (Réglages) ---------- */

.pbr-weekly-template {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 12px;
}

.pbr-template-day {
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 14px );
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Jour + créneau sur la même ligne (au lieu d'empiler checkbox puis heures
   sur des lignes séparées) : occupe mieux la largeur, moins haut. */
.pbr-template-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.pbr-template-day-active {
	font-weight: 700;
}

.pbr-template-hours {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.pbr-template-hours input[type="time"] {
	padding: 8px;
	border-radius: var( --pbr-radius-s, 8px );
	border: 1px solid var( --pbr-border, #ccc );
	min-height: 40px;
	background: var( --pbr-cream, #fff );
	color: var( --pbr-ink, #333 );
}

/* .pbr-template-hours{display:inline-flex} beats the UA [hidden] rule
   (author styles win over UA styles at equal importance) — same class of
   bug as the .pbr-table-stack tr[hidden] fix, same fix shape. */
.pbr-template-hours[hidden] {
	display: none;
}

.pbr-template-split {
	font-size: 13px;
}

/* ---------- Calendrier d'ouverture d'un service ---------- */

.pbr-service-cal {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pbr-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.pbr-cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
}

.pbr-cal-weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var( --pbr-muted, #97897a );
	text-transform: uppercase;
	padding: 4px 0;
}

.pbr-cal-cell {
	position: relative;
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius-s, 8px );
	background: var( --pbr-white, #fff );
	min-height: 42px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px;
}

.pbr-cal-cell-empty {
	border: none;
	cursor: default;
	background: transparent;
}

.pbr-cal-status-open {
	background: var( --pbr-mint-light, #e6f4ef );
}

.pbr-cal-status-closed {
	background: #f2ede6;
	color: var( --pbr-muted, #97897a );
}

.pbr-cal-override {
	box-shadow: inset 0 0 0 2px var( --pbr-pink, #f2a99a );
}

.pbr-cal-selected {
	box-shadow: inset 0 0 0 2px var( --pbr-mint-dark, #5fa48d );
}

.pbr-cal-holiday-flag {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 10px;
}

.pbr-cal-legend {
	font-size: 12px;
	color: var( --pbr-muted, #97897a );
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.pbr-cal-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 2px;
}

.pbr-cal-legend-dot.pbr-cal-status-open {
	background: var( --pbr-mint-light, #e6f4ef );
	border: 1px solid var( --pbr-mint, #8fc9b8 );
}

.pbr-cal-legend-dot.pbr-cal-status-closed {
	background: #f2ede6;
	border: 1px solid var( --pbr-border, #ccc );
}

.pbr-cal-legend-dot.pbr-cal-override {
	background: #fff;
	border: 2px solid var( --pbr-pink, #f2a99a );
}

.pbr-cal-day-editor h4 {
	margin-top: 0;
}

.pbr-cal-custom-hours {
	margin: 8px 0;
}

/* ---------- Agenda ---------- */

.pbr-agenda-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.pbr-agenda-toolbar > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.pbr-agenda-legend {
	font-size: 12px;
	color: var( --pbr-muted, #97897a );
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}

.pbr-agenda-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pbr-agenda-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.pbr-agenda-month-grid {
	grid-auto-rows: minmax( 60px, auto );
}

.pbr-agenda-month-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: default;
	align-items: flex-start;
}

.pbr-agenda-day-num {
	font-size: 12px;
}

.pbr-agenda-dots {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}

.pbr-agenda-more {
	font-size: 10px;
	color: var( --pbr-muted, #97897a );
}

/* ---------- Vue "semaine d'un coup d'œil" (voir agendaWeekHtml) ----------
   Un jour par ligne (défilement vertical naturel sur mobile, jamais de
   défilement horizontal forcé), les heures en règle partagée en haut —
   chaque réservation est un segment coloré positionné en % sur la ligne de
   son jour, comme un mini-diagramme de Gantt par jour. Cliquer une ligne
   affiche le détail texte de ce jour dans .pbr-agenda-week-panel en dessous
   (les segments sont trop fins pour porter le nom du client au tap mobile). */
.pbr-week-glance {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 14px;
}

.pbr-week-glance-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: none;
	background: var( --pbr-white, #fff );
	border-radius: var( --pbr-radius-s, 10px );
	padding: 6px 8px;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

.pbr-week-glance-ruler-row {
	background: transparent;
	cursor: default;
	padding: 0 8px 4px;
}

.pbr-week-glance-row-active {
	background: var( --pbr-mint-light, #e6f4ef );
}

.pbr-week-glance-row-closed .pbr-week-glance-label {
	opacity: 0.5;
}

.pbr-week-glance-label {
	flex-shrink: 0;
	width: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.2;
}

.pbr-week-glance-label strong {
	font-size: 10px;
	letter-spacing: 0.03em;
	color: var( --pbr-muted, #97897a );
}

.pbr-week-glance-num {
	font-size: 14px;
	font-weight: 700;
	color: var( --pbr-ink, #4a3f33 );
}

.pbr-week-glance-today {
	color: var( --pbr-mint-dark, #5fa48d );
}

.pbr-week-glance-track {
	position: relative;
	flex: 1;
	height: 22px;
	background: var( --pbr-cream, #fdfaf5 );
	border-radius: var( --pbr-radius-s, 10px );
	overflow: hidden;
}

.pbr-week-glance-ruler {
	background: transparent;
	height: 14px;
	overflow: visible;
}

.pbr-week-glance-hour {
	position: absolute;
	top: 0;
	font-size: 9px;
	color: var( --pbr-muted, #97897a );
	white-space: nowrap;
}

.pbr-week-glance-hour-center {
	transform: translateX( -50% );
}

.pbr-week-glance-hour-right {
	transform: translateX( -100% );
}

.pbr-week-glance-block {
	position: absolute;
	top: 2px;
	bottom: 2px;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.15 );
}

.pbr-week-glance-detail-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var( --pbr-border, #ece2d6 );
	font-size: 13px;
}

.pbr-week-glance-detail-row:last-child {
	border-bottom: none;
}

.pbr-week-glance-detail-dot {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.pbr-agenda-selected-day-label {
	font-size: 13px;
	font-weight: 700;
	color: var( --pbr-brown-dark, #5c4a38 );
	text-transform: capitalize;
	margin-bottom: 8px;
}

.pbr-agenda-selected-day-label.pbr-cal-status-closed {
	color: var( --pbr-muted, #97897a );
}

/* Fondu doux à chaque changement de mois/jour (nouveau nœud DOM à chaque
   rendu, donc se relance automatiquement) — même traitement que le vrai
   calendrier du widget de résa, pour une cohérence visuelle entre les deux. */
.pbr-fade-in {
	animation: pbrFadeIn 0.28s ease;
}

@keyframes pbrFadeIn {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* ---------- Panneau repliable "Nouvelle réservation manuelle" (Agenda) ---------- */

.pbr-manual-booking-toggle-card {
	padding: 14px 18px;
}

.pbr-toggle-manual-booking {
	width: 100%;
	text-align: left;
	font-weight: 700;
}

.pbr-manual-booking-panel {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var( --pbr-border, #ddd );
}

.pbr-manual-booking-panel[hidden] {
	display: none;
}

/* ---------- Résumé des revenus (Résa) ---------- */

.pbr-revenue-summary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 18px );
	padding: 14px 16px;
	background: var( --pbr-mint-light, #e6f4ef );
	font-family: inherit;
}

.pbr-revenue-summary-label {
	font-size: 12px;
	color: var( --pbr-mint-dark, #5fa48d );
	font-weight: 700;
}

.pbr-revenue-summary-value {
	font-size: 24px;
	font-weight: 700;
	color: var( --pbr-brown-dark, #5c4a38 );
}

/* ---------- Sélecteur de période (Stats) ---------- */

.pbr-stats-period {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ---------- Blocs "Stats" (4 chiffres clés en haut de l'onglet) ---------- */

.pbr-stats-blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 14px;
}

.pbr-stats-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var( --pbr-white, #fff );
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: var( --pbr-radius, 18px );
	padding: 16px;
}

.pbr-stats-block-value {
	font-size: 26px;
	font-weight: 700;
	color: var( --pbr-brown-dark, #5c4a38 );
}

.pbr-stats-block-value-small {
	font-size: 16px;
	line-height: 1.3;
}

.pbr-stats-block-label {
	font-size: 12px;
	color: var( --pbr-muted, #97897a );
	font-weight: 600;
}

@media ( min-width: 700px ) {
	.pbr-stats-blocks {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* ---------- Graphiques en lignes SVG (Stats) ---------- */

.pbr-chart-svg {
	width: 100%;
	height: auto;
	display: block;
}

.pbr-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 8px;
}

.pbr-chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var( --pbr-muted, #97897a );
}

/* ---------- Pagination (Résas) ---------- */

.pbr-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 14px;
}

/* ---------- Recherche de destinataire (Emails > Envoi) ---------- */

.pbr-envoi-suggestions {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: -8px 0 12px;
	border: 1px solid var( --pbr-border, #ece2d6 );
	border-radius: 10px;
	overflow: hidden;
	max-height: 220px;
	overflow-y: auto;
}

.pbr-envoi-suggestions[hidden] {
	display: none;
}

.pbr-envoi-suggestion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	border: none;
	background: var( --pbr-white, #fff );
	text-align: left;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var( --pbr-ink, #4a3f33 );
}

.pbr-envoi-suggestion:hover {
	background: var( --pbr-mint-light, #e6f4ef );
}

/* ---------- Tablette : l'app garde son look "mobile", centrée dans une carte ---------- */
@media ( min-width: 700px ) and ( max-width: 1023.98px ) {
	.pbr-fullscreen-body {
		display: flex;
		justify-content: center;
		padding: 24px 0;
	}

	.pbr-backoffice {
		max-width: 520px;
		min-height: calc( 100vh - 48px );
		border-radius: var( --pbr-radius-l, 26px );
		overflow: hidden;
		box-shadow: var( --pbr-shadow-l, none );
	}

	.pbr-header {
		border-radius: var( --pbr-radius-l, 26px ) var( --pbr-radius-l, 26px ) 0 0;
	}

	.pbr-tabs {
		position: sticky;
		border-radius: 0 0 var( --pbr-radius-l, 26px ) var( --pbr-radius-l, 26px );
	}
}

/* ---------- Tablette + Desktop : ajustements communs de contenu ---------- */
@media ( min-width: 700px ) {
	.pbr-grid {
		grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
		gap: 8px 16px;
	}

	.pbr-planning-day {
		flex-direction: row;
		align-items: center;
		border-bottom: none;
	}

	.pbr-planning-day strong {
		width: 90px;
		flex-shrink: 0;
	}

	.pbr-slots {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pbr-slot {
		flex-wrap: nowrap;
	}

	.pbr-add-exception {
		flex-direction: row;
		align-items: center;
	}

	.pbr-agenda-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ---------- Desktop : véritable mise en page "application", pas du mobile agrandi.
   S'affiche automatiquement à partir de 1024px, sans bascule manuelle. ---------- */
@media ( min-width: 1024px ) {
	.pbr-fullscreen-body {
		padding: 0;
	}

	.pbr-backoffice {
		display: grid;
		grid-template-columns: 240px 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: "header header" "nav content";
		width: 100%;
		max-width: none;
		min-height: 100vh;
		min-height: 100dvh;
		border-radius: 0;
		box-shadow: none;
	}

	.pbr-header {
		grid-area: header;
		border-radius: 0;
		padding: 18px 32px;
	}

	.pbr-tabs {
		grid-area: nav;
		position: static;
		flex-direction: column;
		align-items: stretch;
		width: auto;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		border-top: none;
		border-right: 1px solid var( --pbr-border, #ece2d6 );
		box-shadow: none;
		border-radius: 0;
		padding: 20px 14px;
		gap: 4px;
	}

	.pbr-tab {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		gap: 12px;
		padding: 11px 14px;
		font-size: 14px;
		min-height: 44px;
	}

	.pbr-tab-icon {
		font-size: 18px;
	}

	.pbr-tab-content {
		grid-area: content;
		padding: 32px 40px 40px;
		display: grid;
		grid-template-columns: repeat( auto-fill, minmax( 380px, 1fr ) );
		gap: 20px;
		align-content: start;
		max-width: 1400px;
	}

	.pbr-tab-content > .pbr-placeholder,
	.pbr-tab-content > .pbr-loading,
	.pbr-tab-content > p.pbr-muted,
	.pbr-tab-content > .pbr-card-wide,
	/* Ces conteneurs (Réglages, Emails > Envoi/Listes) rendent leur propre
	   carte à l'intérieur d'un <div> intermédiaire sans classe — le
	   sélecteur enfant-direct ci-dessus ne pouvait donc jamais les
	   atteindre, et chaque écran de Réglages restait coincé sur une seule
	   colonne de la grille auto-fill (~la moitié de la largeur réelle
	   disponible) au lieu de prendre toute la largeur. Trouvé en vérifiant
	   la largeur réellement calculée d'un champ, pas juste en le regardant.
	   (#pbr-settings-emails-subcontent est imbriqué un niveau plus loin, à
	   l'intérieur d'un de ces deux-là une fois qu'il est corrigé : il hérite
	   déjà de la pleine largeur sans règle séparée.) */
	.pbr-tab-content > #pbr-settings-subcontent,
	.pbr-tab-content > #pbr-emails-subcontent {
		grid-column: 1 / -1;
	}

	.pbr-card {
		margin-bottom: 0;
		min-width: 0;
	}

	.pbr-table {
		min-width: 0;
	}

	.pbr-table-responsive {
		overflow-x: auto;
	}

	.pbr-service-cal {
		flex-direction: row;
		align-items: flex-start;
	}

	.pbr-service-cal-main {
		flex: 2;
		min-width: 0;
	}

	.pbr-service-cal-side {
		flex: 1;
		min-width: 240px;
	}

	/* Une carte seule dans la grille (le cas le plus fréquent des écrans de
	   Réglages/formulaires d'email) prend toute la largeur disponible jusqu'à
	   1400px faute de carte voisine — un champ "Sujet" ou une URL sur ~1300px
	   de large est illisible. On plafonne les champs eux-mêmes (pas la carte,
	   qui peut légitimement rester large pour encadrer un tableau/calendrier),
	   sauf ceux à l'intérieur d'un .pbr-grid (déjà dimensionnés par leur
	   colonne, ex: Prix/Durée côte à côte) et la zone de code de l'éditeur
	   riche (doit rester large pour éditer du HTML confortablement). */
	.pbr-card .pbr-input:not( .pbr-rich-editor-code ),
	.pbr-card-wide .pbr-input:not( .pbr-rich-editor-code ) {
		max-width: 560px;
	}

	.pbr-grid .pbr-input {
		max-width: none;
	}
}