/*
 * ThermoDiag SAV - Habillage moderne SupportCandy
 * Surcharge visuelle uniquement (aucun fichier SupportCandy modifié).
 * Palette inspirée du prototype "AI Studio" (cartes arrondies, badges pastel,
 * tableau épuré sans zébrures) et d'un second moodboard de dashboard sombre
 * (gris neutre quasi-noir, cartes plates à bordure discrète, sobre).
 * Toutes les règles de couleur/texte sont scoped sous #wpsc-container ou
 * body.wpsc-theme-dark afin de gagner en spécificité face aux styles
 * inline !important générés par les réglages "Apparence" de SupportCandy.
 */

/* ==========================================================================
   1. VARIABLES — thème clair (par défaut) et sombre
   ========================================================================== */

body {
	--wpsc-bg: #fafafb;
	--wpsc-surface: #ffffff;
	--wpsc-surface-alt: #f1f5f9;
	--wpsc-input-bg: #ffffff;
	--wpsc-border: #e2e8f0;
	--wpsc-border-strong: #cbd5e1;
	--wpsc-text: #0f172a;
	--wpsc-text-muted: #64748b;
	--wpsc-text-faint: #94a3b8;
	--wpsc-accent: #2563eb;
	--wpsc-accent-hover: #1d4ed8;
	--wpsc-accent-soft: rgba(37, 99, 235, 0.08);
	--wpsc-success: #16a34a;
	--wpsc-success-soft: #dcfce7;
	--wpsc-warning: #d97706;
	--wpsc-warning-soft: #fef3c7;
	--wpsc-danger: #dc2626;
	--wpsc-danger-soft: #fee2e2;
	--wpsc-info: #0284c7;
	--wpsc-info-soft: #e0f2fe;
	--wpsc-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
	--wpsc-shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
	--wpsc-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.16);
	--wpsc-radius-sm: 8px;
	--wpsc-radius-md: 12px;
	--wpsc-radius-lg: 20px;
	--wpsc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wpsc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--td-topbar-h: 44px;
}

/* Le bandeau du haut n'existe pas dans wp-admin (voir injectTopbar en JS,
   IS_ADMIN) : la variable retombe à 0 pour que tous les calc() ci-dessous
   (sidebar, page pleine...) restent corrects dans ce contexte. */
body.wp-admin {
	--td-topbar-h: 0px;
}

/* Palette gris neutre façon outils Adobe (Photoshop/Illustrator...), plutôt
   qu'un noir profond façon GitHub Dark : #4d4d4d comme gris de référence pour
   les cartes, avec des paliers plus clairs/plus foncés autour. */
body.wpsc-theme-dark {
	--wpsc-bg: #333333;
	--wpsc-surface: #4d4d4d;
	--wpsc-surface-alt: #5c5c5c;
	--wpsc-input-bg: #3f3f3f;
	--wpsc-border: #666666;
	--wpsc-border-strong: #808080;
	--wpsc-text: #f5f5f5;
	--wpsc-text-muted: #c2c2c2;
	--wpsc-text-faint: #999999;
	--wpsc-accent: #4f9cf9;
	--wpsc-accent-hover: #7db6fa;
	--wpsc-accent-soft: rgba(79, 156, 249, 0.2);
	--wpsc-success: #5fd88a;
	--wpsc-success-soft: rgba(95, 216, 138, 0.2);
	--wpsc-warning: #fbbf24;
	--wpsc-warning-soft: rgba(251, 191, 36, 0.2);
	--wpsc-danger: #f9807a;
	--wpsc-danger-soft: rgba(249, 128, 122, 0.2);
	--wpsc-info: #4dc8f9;
	--wpsc-info-soft: rgba(77, 200, 249, 0.2);
	--wpsc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
	--wpsc-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
	--wpsc-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   2. BASE — conteneur, typographie, pleine largeur
   ========================================================================== */

#wpsc-container,
.wpsc-shortcode-container {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* SupportCandy met "overflow: hidden" sur ce conteneur (pour arrondir ses
   coins nativement) — mais ça casse "position: sticky" sur tout ce qu'il
   contient (la sidebar ne peut plus se figer au scroll). On n'a pas besoin
   de ce clip : chaque carte gère déjà son propre arrondi. */
.wpsc-shortcode-container {
	overflow: visible !important;
}

/* Les réglages "Apparence > Général" de SupportCandy injectent une couleur de
   fond/bordure figée en inline (souvent blanc) sur ce conteneur : #wpsc-container
   devant le sélecteur suffit à passer devant en spécificité. */
#wpsc-container .wpsc-shortcode-container {
	background-color: transparent !important;
	border: none !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container,
#wpsc-container input,
#wpsc-container select,
#wpsc-container textarea,
#wpsc-container button {
	font-family: var( --wpsc-font ) !important;
}

/* Champs de formulaire non couverts par .wpsc-input-group (filtres de
   widgets du tableau de bord, recherches ponctuelles, etc.) */
#wpsc-container input[type="text"],
#wpsc-container input[type="search"],
#wpsc-container input[type="number"],
#wpsc-container input[type="email"],
#wpsc-container input[type="password"],
#wpsc-container select,
#wpsc-container textarea {
	background-color: var( --wpsc-input-bg ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	color: var( --wpsc-text ) !important;
}

/* Réglages > Apparence injecte aussi "#wpsc-container select { color: #000 }"
   en inline (même spécificité que la règle ci-dessus) : "body" en préfixe
   suffit à passer devant, quel que soit l'ordre d'injection dans le DOM. */
body #wpsc-container select,
body #wpsc-container select:focus,
body #wpsc-container input[type="text"],
body #wpsc-container input[type="text"]:focus,
body #wpsc-container input[type="password"],
body #wpsc-container input[type="password"]:focus,
body #wpsc-container textarea,
body #wpsc-container textarea:focus {
	color: var( --wpsc-text ) !important;
}

body.wpsc-theme-dark .wpsc-modal select,
body.wpsc-theme-dark .wpsc-modal select:focus {
	color: var( --wpsc-text ) !important;
}

#wpsc-container {
	background: transparent !important;
	color: var( --wpsc-text ) !important;
}

body.page-id-2014 .page-content .container,
body.page-id-2014 .container {
	max-width: 96% !important;
	width: 96% !important;
}

/* Gabarit "Page pleine (sans thème)" (templates/full-page.php) : aucun
   habillage du thème Mugi autour, donc c'est nous qui posons le fond. */
body.td-scui-blank-canvas {
	margin: 0 !important;
	min-height: 100vh !important;
	background-color: var( --wpsc-bg ) !important;
}

#wpsc-container ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
#wpsc-container ::-webkit-scrollbar-track {
	background: transparent;
}
#wpsc-container ::-webkit-scrollbar-thumb {
	background-color: var( --wpsc-border-strong );
	border-radius: 10px;
}

/* ==========================================================================
   3. NAVIGATION — barre d'onglets principale
   ========================================================================== */

/* Propriétés autres que "display" : sans risque, la visibilité elle-même
   (display:none/block inline) reste entièrement pilotée par le JS natif de
   SupportCandy (framework/scripts.js, bascule à 768px) — on ne la court-circuite
   jamais avec !important, sinon la barre resterait visible sur mobile. */
#wpsc-container .wpsc-header.wpsc-hidden-xs {
	align-items: center !important;
	gap: 4px !important;
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	padding: 8px !important;
	margin: 0 20px 20px !important;
	position: sticky !important;
	top: calc( var( --td-topbar-h ) + 8px ) !important;
	z-index: 50 !important;
}

@media ( min-width: 769px ) {
	#wpsc-container .wpsc-header.wpsc-hidden-xs {
		display: flex !important;
	}
}

#wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 9px 16px !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	color: var( --wpsc-text-muted ) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

#wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav svg {
	width: 16px !important;
	height: 16px !important;
	fill: currentColor !important;
}

#wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav:hover {
	background-color: var( --wpsc-surface-alt ) !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav.active {
	background-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
}

#wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav.log-out {
	margin-left: auto !important;
}

/* Bouton de bascule thème (injecté par theme.js) */
.td-theme-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	margin-left: 8px !important;
	border-radius: 999px !important;
	border: 1px solid var( --wpsc-border ) !important;
	background-color: var( --wpsc-surface-alt ) !important;
	color: var( --wpsc-text-muted ) !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	flex: 0 0 auto !important;
}
.td-theme-toggle:hover {
	color: var( --wpsc-accent ) !important;
	border-color: var( --wpsc-accent ) !important;
}
.td-theme-toggle svg {
	width: 17px !important;
	height: 17px !important;
	fill: currentColor !important;
}

/* Barre mobile (humbargar) */
#wpsc-container .wpsc-header.wpsc-visible-xs {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	margin: 0 20px 20px !important;
	color: var( --wpsc-text ) !important;
}

/* ==========================================================================
   4. TABLEAU DE BORD
   ========================================================================== */

/* Grille à colonnes fixes (pas auto-fit) : 3 colonnes maximum sur grand écran
   pour des blocs plus confortables, avec repli progressif sur petits écrans. */
#wpsc-container .wpsc-dash-widgets-row {
	display: grid !important;
	grid-template-columns: repeat( 1, 1fr ) !important;
	align-items: start !important;
	gap: 16px !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
	margin: 0 0 20px !important;
}

@media ( min-width: 640px ) {
	#wpsc-container .wpsc-dash-widgets-row {
		grid-template-columns: repeat( 2, 1fr ) !important;
	}
}

@media ( min-width: 992px ) {
	#wpsc-container .wpsc-dash-widgets-row {
		grid-template-columns: repeat( 3, 1fr ) !important;
	}

	/* Les 5 petites cartes (New Tickets, Non résolu, Non attribué, Fermé,
	   Mine) sur une seule ligne. Cette ligne est la seule sans la classe
	   wpsc-dashboard-widget-view (réservée à la ligne des widgets plus larges). */
	#wpsc-container .wpsc-dash-widgets-row:not( .wpsc-dashboard-widget-view ) {
		grid-template-columns: repeat( 5, 1fr ) !important;
	}
}

/* SupportCandy dimensionne nativement ces cartes en pourcentage de la ligne
   (ex: width: calc(20% - 20px)) pour son propre layout en flex-wrap. Comme on
   transforme la ligne en grille, ce pourcentage se recalcule sur la largeur
   d'une case de grille au lieu de la ligne entière et donne des cartes minuscules
   ("pilules" étroites). On neutralise ça : la grille seule pilote la largeur. */
#wpsc-container .wpsc-dash-widget {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#wpsc-container .wpsc-dash-widget-small,
#wpsc-container .wpsc-dash-widget-mid,
#wpsc-container .wpsc-dash-widget-large {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	color: var( --wpsc-text ) !important;
	overflow: hidden !important;
	transition: border-color 0.2s ease, transform 0.2s ease !important;
}

#wpsc-container .wpsc-dash-widget-small {
	padding: 20px !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

#wpsc-container .wpsc-dash-widget-small:hover,
#wpsc-container .wpsc-dash-widget-mid:hover,
#wpsc-container .wpsc-dash-widget-large:hover {
	border-color: var( --wpsc-border-strong ) !important;
}

#wpsc-container .wpsc-dash-widget-small h2,
#wpsc-container .wpsc-dash-widget-mid h2,
#wpsc-container .wpsc-dash-widget-large h2 {
	color: var( --wpsc-text ) !important;
	font-weight: 800 !important;
}

#wpsc-container .wpsc-dash-widget-small svg {
	opacity: 0.9;
}

#wpsc-container .wpsc-dash-widget-header {
	background-color: var( --wpsc-surface-alt ) !important;
	border-bottom: 1px solid var( --wpsc-border ) !important;
	padding: 12px 16px !important;
	color: var( --wpsc-text ) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 11px !important;
	letter-spacing: 0.05em !important;
}

#wpsc-container .wpsc-dash-widget-header svg {
	color: var( --wpsc-text-muted ) !important;
}

/* Tableaux internes des widgets (Agent Workload, Recent Tickets...) : le
   thème Mugi impose "th { color: black }" globalement (theme-core.css), et
   DataTables ses propres bordures grises claires — les deux jurent en
   thème sombre. */
#wpsc-container .wpsc-dashboard-view th,
#wpsc-container .wpsc-dashboard-view td {
	color: var( --wpsc-text ) !important;
	border-color: var( --wpsc-border ) !important;
}

#wpsc-container .wpsc-dashboard-view th {
	background-color: var( --wpsc-surface-alt ) !important;
}

/* ==========================================================================
   5. LISTE DES TICKETS
   ========================================================================== */

#wpsc-container .wpsc-tickets-container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 20px 20px !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-filter-actions,
#wpsc-container .wpsc-it-action-container {
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-filter-actions .action-devider {
	border-left: 1px solid var( --wpsc-border ) !important;
}

#wpsc-container .wpsc-filter-actions span:hover {
	color: var( --wpsc-accent ) !important;
}

#wpsc-container .wpsc-bulk-actions select,
#wpsc-container .wpsc-input-group input[type="text"],
#wpsc-container .wpsc-input-group input[type="number"],
#wpsc-container .wpsc-input-group input[type="email"],
#wpsc-container .wpsc-input-group input[type="password"],
#wpsc-container .wpsc-input-group select,
#wpsc-container .wpsc-input-group textarea,
#wpsc-container .wpsc-search-input,
#wpsc-container select.select2-hidden-accessible + span .select2-selection {
	background-color: var( --wpsc-input-bg ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	color: var( --wpsc-text ) !important;
}

/* selectWoo/select2 (Client, Catégorie, Agent assigné...) : la valeur
   affichée vit dans un span interne avec sa propre couleur par défaut
   (gris foncé #444), qui ne récupère pas la couleur posée sur le conteneur. */
#wpsc-container .select2-selection__rendered {
	color: var( --wpsc-text ) !important;
}
#wpsc-container .select2-selection__placeholder {
	color: var( --wpsc-text-faint ) !important;
}
#wpsc-container .select2-selection__arrow b {
	border-color: var( --wpsc-text-faint ) transparent transparent transparent !important;
}

/* Puces des valeurs choisies sur un select2/selectWoo "multiple" (ex. la
   liste d'agents dans "Destinataires supplémentaires" ou les règles
   d'assignation) : la lib fixe déjà `color` sur ce sélecteur précis
   (.select2-container--default .select2-selection--multiple
   .select2-selection__choice), donc une règle scopée à #wpsc-container ou
   .wpsc-modal ne suffit pas à le battre en spécificité — il faut reprendre
   exactement ce sélecteur. Le fond de la puce (#e4e4e4, natif à la lib)
   reste clair dans tous les thèmes : on fixe donc un texte sombre en dur
   plutôt que var(--wpsc-text), qui deviendrait illisible en thème sombre. */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	color: #000000 !important;
}

/* Le panneau déroulant (résultats, champ de recherche) est ajouté hors de
   #wpsc-container, directement dans <body>. */
body.wpsc-theme-dark .select2-dropdown {
	background-color: var( --wpsc-surface ) !important;
	border-color: var( --wpsc-border ) !important;
}
body.wpsc-theme-dark .select2-search__field {
	background-color: var( --wpsc-input-bg ) !important;
	border-color: var( --wpsc-border ) !important;
	color: var( --wpsc-text ) !important;
}
body.wpsc-theme-dark .select2-results__option {
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text ) !important;
}
body.wpsc-theme-dark .select2-results__option--highlighted {
	background-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
}

#wpsc-container .wpsc-input-group label {
	color: var( --wpsc-text-muted ) !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
}

/* Tableau épuré : pas de zébrures, en-tête sans fond (juste une règle basse),
   surlignage léger au survol — inspiré du prototype AI Studio. */
table.wpsc-ticket-list-tbl {
	border-collapse: separate !important;
	border-spacing: 0 !important;
}

table.wpsc-ticket-list-tbl thead tr {
	background-color: transparent !important;
}

table.wpsc-ticket-list-tbl thead th {
	background-color: transparent !important;
	color: var( --wpsc-text-faint ) !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	letter-spacing: 0.06em !important;
	font-weight: 700 !important;
	border-bottom: 1px solid var( --wpsc-border ) !important;
	padding-bottom: 12px !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 2 !important;
}

table.wpsc-ticket-list-tbl tbody td {
	border-bottom: 1px solid var( --wpsc-border ) !important;
	color: var( --wpsc-text ) !important;
	font-size: 13px !important;
}

/* En-têtes triables (voir applyTicketListSortIndicators/initTicketListSorting
   dans theme.js) : uniquement les colonnes déjà gérées par le tri natif de
   SupportCandy. */
table.wpsc-ticket-list-tbl thead th.td-sortable {
	cursor: pointer !important;
	user-select: none !important;
}
table.wpsc-ticket-list-tbl thead th.td-sortable:hover {
	color: var( --wpsc-accent ) !important;
}
table.wpsc-ticket-list-tbl thead th.td-sort-active {
	color: var( --wpsc-text ) !important;
}
table.wpsc-ticket-list-tbl thead th .td-sort-arrow {
	display: inline-block !important;
	margin-left: 4px !important;
	font-size: 9px !important;
	opacity: 0.5 !important;
}
table.wpsc-ticket-list-tbl thead th.td-sort-active .td-sort-arrow {
	opacity: 1 !important;
	color: var( --wpsc-accent ) !important;
}

/* Bouton "masquer cette colonne" : discret, révélé au survol de l'en-tête. */
table.wpsc-ticket-list-tbl thead th {
	position: relative !important;
}
table.wpsc-ticket-list-tbl thead th .td-col-hide-btn {
	display: none !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 50% !important;
	right: 4px !important;
	transform: translateY( -50% ) !important;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 4px !important;
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text-faint ) !important;
	cursor: pointer !important;
}
table.wpsc-ticket-list-tbl thead th:hover .td-col-hide-btn {
	display: inline-flex !important;
}
table.wpsc-ticket-list-tbl thead th .td-col-hide-btn:hover {
	color: var( --wpsc-danger ) !important;
}
table.wpsc-ticket-list-tbl thead th .td-col-hide-btn svg {
	width: 12px !important;
	height: 12px !important;
}

/* Colonne masquée (par l'agent) : en-tête ET cellules correspondantes. */
table.wpsc-ticket-list-tbl th.td-col-hidden,
table.wpsc-ticket-list-tbl td.td-col-hidden {
	display: none !important;
}

/* Barre de restauration des colonnes masquées, au-dessus du tableau. */
#wpsc-container .td-hidden-columns-bar {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 14px !important;
	margin-bottom: 14px !important;
	border: 1px dashed var( --wpsc-border-strong ) !important;
	border-radius: var( --wpsc-radius-md ) !important;
	background-color: var( --wpsc-surface-alt ) !important;
}

table.wpsc-ticket-list-tbl tbody tr {
	background-color: transparent !important;
	transition: background-color 0.12s ease !important;
}

table.wpsc-ticket-list-tbl tbody tr:hover {
	background-color: var( --wpsc-accent-soft ) !important;
}

table.wpsc-ticket-list-tbl tbody tr:last-child td {
	border-bottom: none !important;
}

/* ID de ticket en police mono, accentué (repère visuel rapide) */
table.wpsc-ticket-list-tbl tbody td:nth-child( 2 ) {
	font-family: var( --wpsc-font-mono ) !important;
	font-weight: 700 !important;
	color: var( --wpsc-accent ) !important;
}

/* Pagination des tableaux DataTables (ex. widget "Charge de travail des
   agents") : la lib embarquée fixe `color: rgba(0,0,0,.5)` en dur sur les
   boutons désactivés, illisible sur fond sombre. */
#wpsc-container .dt-paging-button {
	color: var( --wpsc-text-muted ) !important;
	border-color: var( --wpsc-border ) !important;
}
#wpsc-container .dt-paging-button.disabled {
	color: var( --wpsc-text-faint ) !important;
}
#wpsc-container .dt-paging-button.current {
	color: var( --wpsc-text ) !important;
	font-weight: 700 !important;
}
#wpsc-container .dt-paging-button:not( .disabled ):hover {
	color: var( --wpsc-accent ) !important;
	border-color: var( --wpsc-accent ) !important;
}
#wpsc-container .dt-length,
#wpsc-container .dt-info,
#wpsc-container .dt-search label {
	color: var( --wpsc-text-muted ) !important;
}

/* Pastilles de statut/priorité : mises en forme ici, couleurs douces
   calculées par theme.js à partir de la couleur configurée dans SupportCandy
   (fond 12% d'opacité + texte/bordure pleine teinte + petit point). */
#wpsc-container .wpsc-tag,
#wpsc-container span[style*="background-color"] {
	border-radius: 999px !important;
	padding: 4px 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: none !important;
}

#wpsc-container .wpsc-tag.td-badge-enhanced::before,
#wpsc-container span[style*="background-color"].td-badge-enhanced::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background-color: currentColor;
	flex: 0 0 auto;
}

#wpsc-container .wpsc-ticket-pagination-header,
#wpsc-container .wpsc-ticket-pagination-footer {
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-ticket-pagination-header span:hover,
#wpsc-container .wpsc-ticket-pagination-footer span:hover {
	color: var( --wpsc-accent ) !important;
}

/* Boutons et liens */
#wpsc-container .wpsc-button {
	border-radius: var( --wpsc-radius-sm ) !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
	border: 1px solid transparent !important;
	transition: all 0.15s ease !important;
}

/* Boutons "secondaires" : couleur fixée en inline par Réglages > Apparence
   (souvent blanc) — on la neutralise. */
#wpsc-container .wpsc-button.secondary {
	background-color: var( --wpsc-input-bg ) !important;
	border-color: var( --wpsc-border ) !important;
	color: var( --wpsc-text ) !important;
}

/* Barre de recherche (liste des tickets) : fond fixé par SupportCandy lui-même
   (framework/style.css), pas une couleur d'apparence configurable. */
#wpsc-container .wpsc-search .search-field {
	background-color: var( --wpsc-input-bg ) !important;
	color: var( --wpsc-text ) !important;
}
#wpsc-container .wpsc-search .search-field input {
	background-color: transparent !important;
	color: var( --wpsc-text ) !important;
}
#wpsc-container .wpsc-search .search-field svg {
	color: var( --wpsc-text-faint ) !important;
}

#wpsc-container .wpsc-link {
	color: var( --wpsc-accent ) !important;
}

#wpsc-container .wpsc-popover-menu {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	box-shadow: var( --wpsc-shadow-lg ) !important;
}

#wpsc-container .wpsc-popover-menu-item {
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-popover-menu-item:hover {
	background-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
}

/* ==========================================================================
   6. DÉTAIL D'UN TICKET
   ========================================================================== */

/* --- 6.1 Structure responsive (repris du mu-plugin supportcandy-grid-fix) --- */

#wpsc-container .wpsc-it-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

#wpsc-container .wpsc-it-body,
#wpsc-container .wpsc-it-sidebar-widget-container {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

#wpsc-container .wpsc-it-sidebar-widget-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	min-width: 0 !important;
	max-width: none !important;
}

@media ( min-width: 768px ) and ( max-width: 1199px ) {
	#wpsc-container .wpsc-it-container {
		flex-direction: row !important;
		gap: 20px !important;
	}
	#wpsc-container .wpsc-it-body {
		flex: 0 0 calc( 60% - 10px ) !important;
		max-width: calc( 60% - 10px ) !important;
		width: calc( 60% - 10px ) !important;
	}
	#wpsc-container .wpsc-it-sidebar-widget-container {
		flex: 0 0 calc( 40% - 10px ) !important;
		max-width: calc( 40% - 10px ) !important;
		width: calc( 40% - 10px ) !important;
		min-width: 0 !important;
	}
}

@media ( min-width: 1200px ) {
	#wpsc-container .wpsc-it-container {
		flex-direction: row !important;
		gap: 24px !important;
	}
	#wpsc-container .wpsc-it-body {
		flex: 0 0 calc( 40% - 12px ) !important;
		max-width: calc( 40% - 12px ) !important;
		width: calc( 40% - 12px ) !important;
	}
	#wpsc-container .wpsc-it-sidebar-widget-container {
		flex: 0 0 calc( 60% - 12px ) !important;
		max-width: calc( 60% - 12px ) !important;
		width: calc( 60% - 12px ) !important;
		min-width: 0 !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-auto-flow: row dense !important;
		align-content: start !important;
		align-items: start !important;
		gap: 16px !important;
	}
	.wpsc-it-sidebar-widget-container .wpsc-itw-raised-by,
	.wpsc-it-sidebar-widget-container .wpsc-itw-ticket-status,
	.wpsc-it-sidebar-widget-container .wpsc-itw-ticket-fields,
	.wpsc-it-sidebar-widget-container .wpsc-itw-ac {
		grid-column: 1 !important;
	}
	.wpsc-it-sidebar-widget-container .wpsc-itw-ticket-tags,
	.wpsc-it-sidebar-widget-container .wpsc-itw-ticket-info,
	.wpsc-it-sidebar-widget-container .wpsc-itw-assignee,
	.wpsc-it-sidebar-widget-container .wpsc-itw-agentonly-fields {
		grid-column: 2 !important;
	}
}

/* --- 6.2 Cartes de widget sidebar --- */

#wpsc-container .wpsc-it-sidebar-widget-container > div {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	overflow: hidden !important;
	margin-bottom: 0 !important;
	transition: border-color 0.2s ease, transform 0.2s ease !important;
}

#wpsc-container .wpsc-it-sidebar-widget-container > div:hover {
	border-color: var( --wpsc-border-strong ) !important;
}

#wpsc-container .wpsc-widget-header {
	background-color: var( --wpsc-surface-alt ) !important;
	border-bottom: 1px solid var( --wpsc-border ) !important;
	padding: 12px 16px !important;
	color: var( --wpsc-text ) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

#wpsc-container .wpsc-widget-header h2 {
	color: var( --wpsc-text ) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin: 0 !important;
}

#wpsc-container .wpsc-widget-header svg,
#wpsc-container .wpsc-widget-header i,
#wpsc-container .wpsc-widget-header .toggle-icon {
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-widget-header:hover svg,
#wpsc-container .wpsc-widget-header:hover .toggle-icon {
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-widget-body {
	background-color: var( --wpsc-surface ) !important;
	padding: 16px !important;
	color: var( --wpsc-text-muted ) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

#wpsc-container .wpsc-widget-body .info-list-item,
#wpsc-container .wpsc-widget-body .info-list-item-container {
	border-bottom: 1px dashed var( --wpsc-border ) !important;
	padding: 10px 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

#wpsc-container .wpsc-widget-body .info-list-item:first-child,
#wpsc-container .wpsc-widget-body .info-list-item-container:first-child {
	padding-top: 0 !important;
}

#wpsc-container .wpsc-widget-body .info-list-item:last-child,
#wpsc-container .wpsc-widget-body .info-list-item-container:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

/* Mention sous le widget "Bénéficiaires supplémentaires" (voir
   wpsc_itw_additional_recipients dans thermodiag-supportcandy-ui.php) */
#wpsc-container .wpsc-widget-body .td-scui-hint {
	margin: 8px 0 0 !important;
	font-size: 11px !important;
	font-style: italic !important;
	color: var( --wpsc-text-faint ) !important;
	line-height: 1.4 !important;
}

#wpsc-container .wpsc-widget-body .info-label,
#wpsc-container .wpsc-widget-body .wpsc-lg-label {
	color: var( --wpsc-text-faint ) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

#wpsc-container .wpsc-widget-body .info-val,
#wpsc-container .wpsc-widget-body .info-value {
	color: var( --wpsc-text ) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
}

#wpsc-container .wpsc-widget-body a,
#wpsc-container .wpsc-widget-body .wpsc-link {
	color: var( --wpsc-accent ) !important;
	font-weight: 600 !important;
}

#wpsc-container .wpsc-widget-body img.avatar,
#wpsc-container .wpsc-widget-body .avatar img {
	border-radius: 999px !important;
	border: 2px solid var( --wpsc-border ) !important;
}

/* --- 6.3 Zone de discussion --- */

#wpsc-container .wpsc-it-body {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	padding: 24px !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-it-subject-container h2 {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var( --wpsc-text ) !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 20px !important;
}

#wpsc-container .wpsc-thread {
	background-color: var( --wpsc-surface-alt ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-md ) !important;
	padding: 20px !important;
	margin-bottom: 16px !important;
	box-shadow: none !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-thread.note {
	background-color: var( --wpsc-warning-soft ) !important;
	border-color: var( --wpsc-warning ) !important;
}

#wpsc-container .wpsc-thread-header {
	border-bottom: 1px solid var( --wpsc-border ) !important;
	padding-bottom: 12px !important;
	margin-bottom: 14px !important;
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-thread-avatar img,
#wpsc-container .wpsc-thread .avatar {
	border-radius: 999px !important;
	border: 2px solid var( --wpsc-border ) !important;
}

/* SupportCandy applique `opacity: 0.5` sur .thread-type (ex: "a ajouté une
   note"), ce qui rend ce texte illisible une fois mélangé au fond translucide
   de .wpsc-thread.note en thème sombre. On remplace l'opacité par une couleur
   pleine et lisible dans les deux thèmes. */
#wpsc-container .wpsc-thread .thread-type {
	opacity: 1 !important;
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-thread .thread-time {
	color: var( --wpsc-text-muted ) !important;
}

/* Réglages > Apparence > Détail de ticket de SupportCandy injecte un <style>
   en dur avec des couleurs foncées fixes (ex: `.wpsc-thread.log .thread-body
   { color: #2c3e50; }` pour les entrées d'historique de champ) qui ne
   changent jamais avec le thème. On reprend la main sur tout le corps d'une
   entrée de thread pour garantir un texte lisible dans les deux thèmes. */
#wpsc-container .wpsc-thread .thread-body {
	color: var( --wpsc-text ) !important;
}

#wpsc-container .wpsc-thread .user-name {
	color: var( --wpsc-text ) !important;
}

/* ==========================================================================
   7. MODALES / POPUPS (rendus hors de #wpsc-container)
   ========================================================================== */

body.wpsc-theme-dark .wpsc-modal .inner-container {
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text ) !important;
	border: 1px solid var( --wpsc-border ) !important;
}

body.wpsc-theme-dark .wpsc-modal input[type="text"],
body.wpsc-theme-dark .wpsc-modal select,
body.wpsc-theme-dark .wpsc-modal textarea {
	background-color: var( --wpsc-input-bg ) !important;
	color: var( --wpsc-text ) !important;
	border-color: var( --wpsc-border ) !important;
}

/* ==========================================================================
   8. SIDEBAR RÉTRACTABLE — portail front-end uniquement (page publique).
   Le back-office wp-admin garde la barre d'onglets horizontale (section 3).
   Scoping via body:not(.wp-admin), classe que WordPress ajoute lui-même
   uniquement en dehors de l'admin — aucune classe custom nécessaire.
   ========================================================================== */

@media ( min-width: 769px ) {

	body:not( .wp-admin ) #wpsc-container .wpsc-shortcode-container {
		display: flex !important;
		align-items: flex-start !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-header.wpsc-hidden-xs {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 2px !important;
		flex: 0 0 240px !important;
		width: 240px !important;
		height: calc( 100vh - var( --td-topbar-h ) ) !important;
		margin: 0 !important;
		padding: 12px !important;
		top: var( --td-topbar-h ) !important;
		border-radius: 0 !important;
		border: none !important;
		border-right: 1px solid var( --wpsc-border ) !important;
		box-shadow: none !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		transition: width 0.2s ease !important;
		z-index: 100 !important;
	}

	body:not( .wp-admin ).td-sidebar-collapsed #wpsc-container .wpsc-header.wpsc-hidden-xs {
		flex-basis: 72px !important;
		width: 72px !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav {
		justify-content: flex-start !important;
		white-space: nowrap !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav label {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	body:not( .wp-admin ).td-sidebar-collapsed #wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav {
		justify-content: center !important;
		padding: 10px !important;
	}

	body:not( .wp-admin ).td-sidebar-collapsed #wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav label {
		display: none !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-header .wpsc-menu-list.wpsc-tickets-nav.log-out {
		margin-left: 0 !important;
		margin-top: 8px !important;
		border-top: 1px solid var( --wpsc-border ) !important;
		padding-top: 12px !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-body {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		padding: 24px !important;
		box-sizing: border-box !important;
	}

	/* Bouton de bascule thème réadapté en item de liste verticale — scopé à la
	   sidebar (celui du bandeau du haut garde l'icône ronde par défaut). */
	body:not( .wp-admin ) #wpsc-container .wpsc-header.wpsc-hidden-xs .td-theme-toggle {
		width: 100% !important;
		height: auto !important;
		margin-left: 0 !important;
		margin-top: 4px !important;
		border-radius: var( --wpsc-radius-sm ) !important;
		justify-content: flex-start !important;
		gap: 10px !important;
		padding: 9px 16px !important;
	}

	body:not( .wp-admin ) #wpsc-container .wpsc-header.wpsc-hidden-xs .td-theme-toggle::after {
		content: attr( data-label );
		font-size: 13px !important;
		font-weight: 600 !important;
		white-space: nowrap !important;
	}

	body:not( .wp-admin ).td-sidebar-collapsed #wpsc-container .wpsc-header.wpsc-hidden-xs .td-theme-toggle {
		justify-content: center !important;
		padding: 10px !important;
	}

	body:not( .wp-admin ).td-sidebar-collapsed #wpsc-container .wpsc-header.wpsc-hidden-xs .td-theme-toggle::after {
		display: none !important;
	}
}

/* Le thème Mugi impose globalement `strong{color:#111}` et `a{color:#000}`
   (theme-core.css), jamais pensé pour un fond sombre : ça rendait le nom des
   agents/clients et les libellés de champ (ex. "Ticket créé le :") dans les
   blocs de conversation, ainsi que les liens des widgets du tableau de bord
   (ex. numéros de tickets dans "Activités récentes"), illisibles en thème
   sombre. `strong`/`b` reprennent la couleur du texte ambiant (quel que soit
   le fond) ; les liens passent à la couleur d'accent, comme partout ailleurs
   dans le portail.
   */
#wpsc-container strong,
#wpsc-container b {
	color: inherit !important;
}

#wpsc-container a {
	color: var( --wpsc-accent ) !important;
}
#wpsc-container a:hover {
	color: var( --wpsc-accent-hover ) !important;
}

/* ==========================================================================
   10. BANDEAU DU HAUT — remplace l'espace laissé par la barre d'admin
   WordPress (masquée sur tout le site). Injecté par theme.js (injectTopbar),
   front-end uniquement. `body.td-has-topbar` réserve la place via
   padding-top ; voir aussi `--td-topbar-h` utilisée par la sidebar plus haut.
   ========================================================================== */

body.td-has-topbar {
	padding-top: var( --td-topbar-h ) !important;
}

/* WordPress imprime toujours son style inline "html { margin-top: 32px }"
   (bump réservé à la vraie barre d'admin, #wpadminbar) dès qu'un
   utilisateur est connecté, même quand cette barre n'est pas affichée sur
   le front-end (elle ne l'est jamais ici, en dehors de wp-admin) — ce qui
   laissait un espace mort de 32px (46px en mobile) entre notre bandeau et
   le contenu, sans aucune barre pour le justifier. On neutralise ce
   décalage uniquement côté front-end (html.td-has-topbar, posé par
   injectTopbar en JS) — jamais dans wp-admin, où la vraie barre garde son
   comportement natif. */
html.td-has-topbar {
	margin-top: 0 !important;
}

@media screen and ( max-width: 782px ) {
	html.td-has-topbar {
		margin-top: 0 !important;
	}
}

.td-topbar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: var( --td-topbar-h ) !important;
	/* Le z-index des popups SupportCandy est réglable dans Réglages >
	   Apparence — sur ce site, il est configuré à une valeur extrêmement
	   haute (900 000 000), largement au-dessus de ce que qu'on avait mis ici
	   au départ (100 000), ce qui rendait le bandeau (donc le bouton clair/
	   sombre) inatteignable dès qu'une popup était ouverte. Valeur max
	   pratique en CSS pour être toujours sûr de rester au-dessus, quelle que
	   soit la valeur choisie côté réglages. */
	z-index: 2147483647 !important;
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
	background-color: var( --wpsc-surface ) !important;
	border-bottom: 1px solid var( --wpsc-border ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	font-family: var( --wpsc-font ) !important;
}

.td-topbar-brand {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	white-space: nowrap !important;
	color: var( --wpsc-text ) !important;
}

.td-topbar-brand-badge {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 7px !important;
	border-radius: 6px !important;
	background-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.03em !important;
}

.td-topbar-brand-text {
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.td-topbar-announcement {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.td-topbar-announcement-track {
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 640px !important;
	height: 18px !important;
}

.td-topbar-announcement-text {
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var( --wpsc-text-muted ) !important;
	white-space: nowrap !important;
	line-height: 18px !important;
}

.td-topbar-announcement-edit {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	border: none !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	color: var( --wpsc-text-faint ) !important;
	cursor: pointer !important;
	transition: color 0.15s ease, background-color 0.15s ease !important;
}
.td-topbar-announcement-edit:hover {
	color: var( --wpsc-accent ) !important;
	background-color: var( --wpsc-accent-soft ) !important;
}
.td-topbar-announcement-edit svg {
	width: 14px !important;
	height: 14px !important;
}

.td-topbar-announcement-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 480px !important;
	resize: none !important;
	height: 30px !important;
	padding: 6px 10px !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	background-color: var( --wpsc-input-bg ) !important;
	color: var( --wpsc-text ) !important;
	font-family: var( --wpsc-font ) !important;
	font-size: 12.5px !important;
	line-height: 18px !important;
}
.td-topbar-announcement-input:focus {
	outline: none !important;
	border-color: var( --wpsc-accent ) !important;
	box-shadow: 0 0 0 3px var( --wpsc-accent-soft ) !important;
}

.td-topbar-announcement-save,
.td-topbar-announcement-cancel {
	flex: 0 0 auto !important;
	padding: 6px 12px !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
}
.td-topbar-announcement-save {
	border: none !important;
	background-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
}
.td-topbar-announcement-save:hover {
	background-color: var( --wpsc-accent-hover ) !important;
}
.td-topbar-announcement-cancel {
	border: 1px solid var( --wpsc-border ) !important;
	background-color: transparent !important;
	color: var( --wpsc-text-muted ) !important;
}

.td-topbar-right {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	white-space: nowrap !important;
}

.td-topbar-right .td-theme-toggle {
	width: 32px !important;
	height: 32px !important;
	margin-left: 0 !important;
}
.td-topbar-right .td-theme-toggle svg {
	width: 15px !important;
	height: 15px !important;
}

.td-topbar-user {
	font-size: 13px !important;
	color: var( --wpsc-text-muted ) !important;
}

.td-topbar-logout {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	color: var( --wpsc-text-muted ) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 0.15s ease, border-color 0.15s ease !important;
}
.td-topbar-logout:hover {
	color: var( --wpsc-danger ) !important;
	border-color: var( --wpsc-danger ) !important;
}
.td-topbar-logout svg {
	width: 15px !important;
	height: 15px !important;
}

@media ( max-width: 780px ) {
	.td-topbar-brand-text {
		display: none !important;
	}
	.td-topbar-user {
		display: none !important;
	}
}

@media ( max-width: 560px ) {
	.td-topbar-announcement {
		display: none !important;
	}
	.td-topbar-logout span {
		display: none !important;
	}
}

/* Marque + bouton de repli (injectés par theme.js, front-end uniquement) */
.td-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid var( --wpsc-border );
}
.td-sidebar-brand-badge {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: var( --wpsc-radius-sm );
	background: linear-gradient( 135deg, var( --wpsc-accent ), var( --wpsc-accent-hover ) );
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.02em;
	font-family: var( --wpsc-font-mono );
}
.td-sidebar-brand-text {
	font-weight: 800;
	font-size: 13px;
	color: var( --wpsc-text );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.td-sidebar-collapsed .td-sidebar-brand-text {
	display: none !important;
}

.td-sidebar-collapse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	border: 1px solid var( --wpsc-border );
	border-radius: var( --wpsc-radius-sm );
	background-color: var( --wpsc-surface-alt );
	color: var( --wpsc-text-muted );
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	font-family: var( --wpsc-font );
}
.td-sidebar-collapse-btn:hover {
	color: var( --wpsc-accent );
	border-color: var( --wpsc-accent );
}
.td-sidebar-collapse-btn svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}
.td-sidebar-collapsed .td-sidebar-collapse-btn svg {
	transform: rotate( 180deg );
}
.td-sidebar-collapsed .td-sidebar-collapse-btn span {
	display: none;
}

/* ==========================================================================
   9. PERSONNALISATION DU TABLEAU DE BORD — masquer / glisser-déposer / taille
   (surcouche perso par agent, injectée par theme.js — ne touche jamais aux
   réglages SupportCandy "wpsc-dashboard-cards"/"wpsc-dashboard-widgets")
   ========================================================================== */

#wpsc-container .wpsc-dash-widget {
	position: relative !important;
}

#wpsc-container .td-widget-toolbar {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 5 !important;
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 3px !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	box-shadow: var( --wpsc-shadow-sm ) !important;
	opacity: 0 !important;
	transform: translateY( -4px ) !important;
	transition: opacity 0.15s ease, transform 0.15s ease !important;
	pointer-events: none !important;
}

#wpsc-container .wpsc-dash-widget:hover .td-widget-toolbar,
#wpsc-container .wpsc-dash-widget:focus-within .td-widget-toolbar {
	opacity: 1 !important;
	transform: translateY( 0 ) !important;
	pointer-events: auto !important;
}

#wpsc-container .td-widget-toolbar .td-drag-handle,
#wpsc-container .td-widget-toolbar button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var( --wpsc-text-faint ) !important;
	cursor: pointer !important;
}

#wpsc-container .td-widget-toolbar .td-drag-handle {
	cursor: grab !important;
}
#wpsc-container .td-widget-toolbar .td-drag-handle:active {
	cursor: grabbing !important;
}

#wpsc-container .td-widget-toolbar .td-drag-handle:hover,
#wpsc-container .td-widget-toolbar .td-widget-resize-btn:hover {
	background-color: var( --wpsc-surface-alt ) !important;
	color: var( --wpsc-text ) !important;
}

#wpsc-container .td-widget-toolbar .td-widget-hide-btn:hover {
	background-color: var( --wpsc-danger-soft ) !important;
	color: var( --wpsc-danger ) !important;
}

#wpsc-container .td-widget-toolbar svg {
	width: 14px !important;
	height: 14px !important;
	fill: currentColor !important;
	stroke: none !important;
}
#wpsc-container .td-widget-toolbar .td-widget-resize-btn svg,
#wpsc-container .td-widget-toolbar .td-widget-hide-btn svg {
	fill: none !important;
	stroke: currentColor !important;
}

/* Masquage perso (n'affecte que l'agent connecté) */
#wpsc-container .wpsc-dash-widget.td-widget-hidden {
	display: none !important;
}

/* Barre de restauration des blocs masqués */
#wpsc-container .td-hidden-widgets-bar {
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 14px !important;
	border: 1px dashed var( --wpsc-border-strong ) !important;
	border-radius: var( --wpsc-radius-md ) !important;
	background-color: var( --wpsc-surface-alt ) !important;
}

#wpsc-container .td-hidden-widgets-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var( --wpsc-text-faint ) !important;
}

#wpsc-container .td-hidden-chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	border: 1px solid var( --wpsc-border ) !important;
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text-muted ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}
#wpsc-container .td-hidden-chip:hover {
	border-color: var( --wpsc-accent ) !important;
	color: var( --wpsc-accent ) !important;
}

/* Paliers de taille (grille CSS déjà en place, section 4) */
#wpsc-container .wpsc-dash-widget.td-size-md {
	grid-column: span 2 !important;
}
#wpsc-container .wpsc-dash-widget.td-size-lg {
	grid-column: span 3 !important;
}
#wpsc-container .wpsc-dash-widget.td-size-full {
	grid-column: 1 / -1 !important;
}

/* jQuery UI Sortable : espace réservé pendant le glissé */
#wpsc-container .td-widget-sortable-placeholder {
	border: 2px dashed var( --wpsc-border-strong ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	background-color: var( --wpsc-surface-alt ) !important;
	visibility: visible !important;
}

/* ==========================================================================
   9. AUTHENTIFICATION — écran de connexion du portail (visiteur déconnecté)
   Rendu par SupportCandy hors de #wpsc-container (pas encore de session),
   donc scoping direct sur .wpsc-auth-container.
   Pour une photo de fond : déposer un fichier "auth-bg.jpg" dans
   assets/img/ (même dossier que ce fichier CSS, sous-dossier img/). Sans
   fichier, le dégradé de secours ci-dessous s'affiche seul.
   ========================================================================== */

.wpsc-auth-container {
	position: fixed !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow-y: auto !important;
	box-sizing: border-box !important;
	padding: 24px !important;
	background-color: var( --wpsc-bg ) !important;
	background-image:
		linear-gradient( 160deg, rgba( 37, 99, 235, 0.16 ), rgba( 37, 99, 235, 0 ) 60% ),
		url( '../img/auth-bg.jpg' ) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	font-family: var( --wpsc-font ) !important;
}

.wpsc-auth-container .auth-inner-container {
	width: 100% !important;
	max-width: 380px !important;
	box-sizing: border-box !important;
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-lg ) !important;
	padding: 40px 36px !important;
}

.wpsc-auth-container .auth-inner-container h2 {
	margin: 0 0 24px !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.3 !important;
	color: var( --wpsc-text ) !important;
	text-align: center !important;
	font-family: var( --wpsc-font ) !important;
}

/* Logo "SUPPORT DM" au-dessus du titre de connexion — même style de badge
   que la sidebar/le bandeau du haut, pour une identité visuelle cohérente. */
.wpsc-auth-container .td-auth-logo {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	margin: 0 0 20px !important;
}

.wpsc-auth-container .td-auth-logo-badge {
	flex: 0 0 auto !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	background: linear-gradient( 135deg, var( --wpsc-accent ), var( --wpsc-accent-hover ) ) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 800 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em !important;
}

.wpsc-auth-container .td-auth-logo-text {
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: 0.03em !important;
	color: var( --wpsc-text ) !important;
	font-family: var( --wpsc-font ) !important;
}

.wpsc-auth-container form.wpsc-login {
	display: flex !important;
	flex-direction: column !important;
}

.wpsc-auth-container form.wpsc-login input[type="text"],
.wpsc-auth-container form.wpsc-login input[type="password"],
.wpsc-auth-container form.wpsc-login input[type="email"] {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px !important;
	margin-bottom: 14px !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	background-color: var( --wpsc-input-bg ) !important;
	color: var( --wpsc-text ) !important;
	font-size: 14px !important;
	font-family: var( --wpsc-font ) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.wpsc-auth-container form.wpsc-login input::placeholder {
	color: var( --wpsc-text-faint ) !important;
}

.wpsc-auth-container form.wpsc-login input:focus {
	outline: none !important;
	border-color: var( --wpsc-accent ) !important;
	box-shadow: 0 0 0 3px var( --wpsc-accent-soft ) !important;
}

.wpsc-auth-container .checkbox-container.remember-me {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 20px !important;
	font-size: 13px !important;
	color: var( --wpsc-text-muted ) !important;
}

.wpsc-auth-container .checkbox-container.remember-me label {
	margin: 0 !important;
}

.wpsc-auth-container form.wpsc-login button.wpsc-button {
	width: 100% !important;
	padding: 13px !important;
	border: none !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	background-color: var( --wpsc-accent ) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: var( --wpsc-font ) !important;
	letter-spacing: 0.01em !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, transform 0.05s ease !important;
}

.wpsc-auth-container form.wpsc-login button.wpsc-button:hover {
	background-color: var( --wpsc-accent-hover ) !important;
}

.wpsc-auth-container form.wpsc-login button.wpsc-button:active {
	transform: translateY( 1px ) !important;
}

.wpsc-auth-container .auth-links {
	margin-top: 22px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
	text-align: center !important;
}

.wpsc-auth-container .auth-links a.wpsc-link {
	color: var( --wpsc-text-muted ) !important;
	font-size: 13px !important;
	text-decoration: none !important;
}

.wpsc-auth-container .auth-links a.wpsc-link:hover {
	color: var( --wpsc-accent ) !important;
	text-decoration: underline !important;
}

#wpsc-container .wpsc-dash-widget.ui-sortable-helper {
	box-shadow: var( --wpsc-shadow-lg ) !important;
	opacity: 0.95 !important;
}

/* Bloc "Informations dispositif" (détail du ticket) : réutilise les classes
   natives du widget SupportCandy (.wpsc-it-widget, .info-list-item, ...),
   seuls les à-côtés propres à notre bloc (édition, boutons) ont besoin de CSS. */
#wpsc-container .td-device-info .wpsc-widget-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

#wpsc-container .td-device-info .wpsc-widget-header h2 {
	flex: 1 1 auto !important;
}

#wpsc-container .td-device-info .td-device-info-edit {
	cursor: pointer !important;
	display: inline-flex !important;
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .td-device-info .td-device-info-edit:hover {
	color: var( --wpsc-accent ) !important;
}

#wpsc-container .td-device-info .td-device-info-edit svg {
	width: 16px !important;
	height: 16px !important;
}

#wpsc-container .td-device-info .td-device-info-save,
#wpsc-container .td-device-info .td-device-info-cancel {
	font-size: 13px !important;
	white-space: nowrap !important;
}

#wpsc-container .td-device-info .info-val textarea {
	width: 100% !important;
	resize: vertical !important;
}

/* Fenêtres modales (Ajouter un client, Modifier les infos du client, et
   tous les autres popups natifs de SupportCandy) : leur HTML est imprimé
   directement dans <body>, en dehors de #wpsc-container — c'est pour ça
   qu'elles étaient restées à l'apparence native de SupportCandy jusqu'ici,
   aucune règle scopée à #wpsc-container ne les atteignait. Les variables
   --wpsc-* réagissent ici aussi automatiquement au mode clair/sombre (leur
   valeur change selon body.wpsc-theme-dark), pas besoin de dupliquer quoi
   que ce soit par thème.  */
.wpsc-modal .inner-container .modal {
	background-color: var( --wpsc-surface ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-lg ) !important;
	box-shadow: var( --wpsc-shadow-lg ) !important;
	overflow: hidden !important;
	font-family: var( --wpsc-font ) !important;
}

.wpsc-modal-header {
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text ) !important;
	border-bottom: 1px solid var( --wpsc-border ) !important;
	font-weight: 800 !important;
	font-size: 16px !important;
}

.wpsc-modal-body {
	background-color: var( --wpsc-surface ) !important;
	color: var( --wpsc-text ) !important;
}

.wpsc-modal-body .info-label {
	color: var( --wpsc-text-muted ) !important;
}

.wpsc-modal-footer {
	background-color: var( --wpsc-surface-alt ) !important;
	border-top: 1px solid var( --wpsc-border ) !important;
}

.wpsc-modal .wpsc-input-group label,
.wpsc-modal .label-container label {
	color: var( --wpsc-text-muted ) !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
}

.wpsc-modal input[type="text"],
.wpsc-modal input[type="email"],
.wpsc-modal input[type="password"],
.wpsc-modal input[type="number"],
.wpsc-modal select,
.wpsc-modal textarea {
	background-color: var( --wpsc-input-bg ) !important;
	border: 1px solid var( --wpsc-border ) !important;
	border-radius: var( --wpsc-radius-sm ) !important;
	color: var( --wpsc-text ) !important;
}

.wpsc-modal .wpsc-button {
	border-radius: var( --wpsc-radius-sm ) !important;
	font-weight: 600 !important;
	border: 1px solid transparent !important;
	transition: all 0.15s ease !important;
}

.wpsc-modal .wpsc-button.primary {
	background-color: var( --wpsc-accent ) !important;
	border-color: var( --wpsc-accent ) !important;
	color: #ffffff !important;
}

.wpsc-modal .wpsc-button.primary:hover {
	background-color: var( --wpsc-accent-hover ) !important;
	border-color: var( --wpsc-accent-hover ) !important;
}

.wpsc-modal .wpsc-button.secondary {
	background-color: var( --wpsc-input-bg ) !important;
	border-color: var( --wpsc-border ) !important;
	color: var( --wpsc-text ) !important;
}

.wpsc-modal .wpsc-link {
	color: var( --wpsc-accent ) !important;
}

/* Fond de la popup : natif SupportCandy (framework/style.css), pas une
   règle ajoutée par nous à l'origine — noir à 70% d'opacité, sans
   !important. On le neutralise complètement pour garder le contenu
   visible derrière la popup. */
.wpsc-modal .overlay {
	background-color: transparent !important;
}

.td-add-customer-error {
	color: var( --wpsc-danger ) !important;
}

/* ==========================================================================
   12. PROFIL AGENT — carte nom/e-mail + onglets de réglages
   ========================================================================== */

/* Carte d'en-tête (photo + nom + e-mail) : fond gris clair fixe côté
   SupportCandy (framework/style.css, #f0f0f1), jamais adapté au thème
   sombre — texte blanc (hérité de --wpsc-text) illisible dessus. */
#wpsc-container .wpsc-up-container {
	background-color: var( --wpsc-surface-alt ) !important;
}

#wpsc-container .wpsc-up-email {
	color: var( --wpsc-text-muted ) !important;
}

/* Onglets "Paramètres généraux" / etc : couleurs fixes (#bbb, #2b2d42)
   pensées pour un fond clair — illisibles en thème sombre une fois actifs. */
#wpsc-container .wpsc-up-section .wpsc-profile-tab {
	color: var( --wpsc-text-muted ) !important;
}

#wpsc-container .wpsc-up-section .wpsc-profile-tab:hover,
#wpsc-container .wpsc-up-tab > .active {
	color: var( --wpsc-accent ) !important;
}