/**
 * Visiora Core — Composant : Status Dot
 *
 * Indicateur visuel d’état.
 *
 * Utilisations :
 * - Avatar
 * - Dashboard
 * - CRM
 * - Tickets
 * - Agents IA
 * - Utilisateurs
 * - Notifications
 *
 * Dépendances :
 * - colors.css
 * - radius.css
 * - opacity.css
 * - animation.css
 * - containers.css
 *
 * @package Visiora_Core
 */

/* ======================================================
   1. BASE
   ====================================================== */

.v-status-dot {
	display: inline-block;
	flex: 0 0 auto;
	inline-size: var(--v-size-status-dot-md);
	block-size: var(--v-size-status-dot-md);
	border-radius: var(--v-radius-full);
	background-color: var(--v-color-border);
	vertical-align: middle;
	transition:
		background-color var(--v-transition-component),
		opacity var(--v-transition-component),
		transform var(--v-transition-component);
}

/* ======================================================
   2. VARIANTES
   ====================================================== */

.v-status-dot--neutral {
	background-color: var(--v-color-border);
}

.v-status-dot--success {
	background-color: var(--v-color-success);
}

.v-status-dot--warning {
	background-color: var(--v-color-warning);
}

.v-status-dot--danger {
	background-color: var(--v-color-danger);
}

.v-status-dot--info {
	background-color: var(--v-color-info);
}

/* ======================================================
   3. TAILLES
   ====================================================== */

.v-status-dot--sm {
	inline-size: var(--v-size-status-dot-sm);
	block-size: var(--v-size-status-dot-sm);
}

.v-status-dot--md {
	inline-size: var(--v-size-status-dot-md);
	block-size: var(--v-size-status-dot-md);
}

.v-status-dot--lg {
	inline-size: var(--v-size-status-dot-lg);
	block-size: var(--v-size-status-dot-lg);
}

/* ======================================================
   4. ÉTATS
   ====================================================== */

/*
 * État inactif ou inconnu.
 */

.v-status-dot.is-inactive {
	background-color: var(--v-color-border);
}

/*
 * État désactivé.
 *
 * aria-disabled ne remplace jamais l’information textuelle
 * destinée aux technologies d’assistance.
 */

.v-status-dot.is-disabled,
.v-status-dot[aria-disabled="true"] {
	opacity: var(--v-opacity-disabled);
}

/*
 * État masqué.
 */

.v-status-dot.is-hidden,
.v-status-dot[hidden] {
	display: none;
}

/* ======================================================
   5. ACCESSIBILITÉ
   ====================================================== */

/*
 * Cas 1 — Le point porte lui-même l’information :
 *
 * <span
 *     class="v-status-dot v-status-dot--success"
 *     role="status"
 *     aria-label="En ligne"
 * ></span>
 *
 * Cas 2 — Un libellé visible accompagne le point :
 *
 * <span
 *     class="v-status-dot v-status-dot--success"
 *     aria-hidden="true"
 * ></span>
 *
 * <span>En ligne</span>
 *
 * La couleur seule ne doit jamais être l’unique moyen
 * de transmettre une information essentielle.
 */

@media (forced-colors: active) {
	.v-status-dot {
		background-color: currentColor;
		border:
			var(--v-size-border-thin)
			solid
			currentColor;
		forced-color-adjust: auto;
	}
}

/* ======================================================
   6. RESPONSIVE
   ====================================================== */

/*
 * Aucun changement de taille automatique.
 *
 * Les tailles sm, md et lg restent explicites afin
 * de préserver une hiérarchie visuelle prévisible.
 */

/* ======================================================
   7. REDUCED MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
	.v-status-dot {
		transition: none;
	}
}

/* ======================================================
   8. COMPATIBILITÉ WORDPRESS
   ====================================================== */

.v-root .v-status-dot,
.editor-styles-wrapper .v-status-dot {
	box-sizing: border-box;
}

.v-root .v-status-dot::before,
.v-root .v-status-dot::after,
.editor-styles-wrapper .v-status-dot::before,
.editor-styles-wrapper .v-status-dot::after {
	box-sizing: border-box;
}

/* ======================================================
   9. COMPATIBILITÉ GUTENBERG
   ====================================================== */

.wp-block .v-status-dot {
	flex-shrink: 0;
}

/* ======================================================
   10. COMPATIBILITÉ SPECTRA
   ====================================================== */

.uagb-container__content .v-status-dot,
.uagb-infobox .v-status-dot,
.uagb-buttons__outer-wrap .v-status-dot {
	flex-shrink: 0;
}

/* ======================================================
   11. PERFORMANCE ET SÉCURITÉ
   ====================================================== */

/*
 * - Aucun JavaScript.
 * - Aucun filtre graphique.
 * - Aucun positionnement absolu.
 * - Aucun contexte d’empilement.
 * - Aucun contenu utilisateur injecté.
 * - Aucune dépendance externe.
 * - Compatible CSP.
 * - Compatible RTL.
 * - Conçu pour être utilisé en grand nombre.
 * - Les bordures utilisent les tokens officiels.
 */