/* --- common --- */

* {
	box-sizing: border-box;
	border-collapse: collapse;
	padding: 0;
	margin: 0;
}
:root {
	--bg-color: #f4f5f7;
	--fg-color-blue: #161e29; /* Bleu foncé du menu */
	--fg-color-white: #333333;
	--fg-color-light: #ffffff;
	--bg-color-badge: #008a1c; /* Vert "Actif" */
	--bordure: 1px solid #e0e0e0;
	--ombre: 0 2px 4px rgba(0,0,0,0.05);
	--sidebar-width: 260px;

	--modal-max-width: 90vw;
}
html, button, input, select, textarea {
	font-family: Arial, sans-serif;
	font-size: 16px;
}
body {
	color: var(--fg-color-white);
	-webkit-font-smoothing: antialiased;
}
.error { color: #d40000 !important; }
/* Boutons */
button, .btn-action, .btn-icon {
	background-color: white;
}
.btn-icon, .btn-action {
	display: inline-block;
	border: var(--bordure);
	margin: 4px;
	cursor: pointer;
}
.btn-icon { border-radius: 9999px; padding: 0px 3px; }
.btn-action { border-radius: 20px; padding: 6px 8px; text-align: center; }
.btn-icon:hover, .btn-action:hover, a.action:hover {
	color: #fff !important;
	background-color: #e61e29 !important;
}
.btn-danger {
	background: #e61e29;
	color: #fff;
}
/* liens */
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
/* input */
select { width: fit-content; }
input[type="date"], input[type="time"] { width: fit-content; }
input, textarea, select, label {
	padding: 3px 6px;
	border-width: 1px;
	border-style: solid;
}
input, textarea, select { border-color: var(--fg-color-blue); background-color: var(--fg-color-light); }
label { width: fit-content; border-color: transparent; }
/* item sélectionné */
.active {
	background: #0079d2;
	color: white;
}
.hidden {
	display: none !important;
}
toolbar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	gap: 5px 10px;
}

/* --- infinite_scroll --- */
/* Composant Infinite Scroll - Sentinelle et Loader */
.scroll-sentinel-wrapper {
	/* On empêche le display:none de la classe .hidden de détruire la géométrie de la sentinelle */
    display: flex !important; /* Conserve sa forme dans le DOM */
    visibility: hidden;       /* Invisible à l'œil, mais détectable au scroll ! */
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: 100%;
    min-height: 60px; /* Évite les sauts brutaux du scrollbar */
}

/* Spinner par défaut (remplaçable par un composant 'waiting' visuel si souhaité) */
.shared-loader {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e0e0e0);
    border-top-color: var(--brand-primary, #0056b3);
    border-radius: 50%;
    animation: infinite-scroll-spin 1s linear infinite;
}

@keyframes infinite-scroll-spin {
    to { transform: rotate(360deg); }
}

.text-muted.meta-text-sub {
    color: var(--text-muted, #6c757d);
    font-size: 0.9rem;
    font-style: italic;
}
/* --- modal --- */
/* Composant Modal - Style mutualisé */
.modal-overlay {
	--modal-max-width: 90vw;
	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
	--modal-shadow: 0 10px 25px rgba(0,0,0,0.2);
	--modal-border-color: var(--border-color, #e0e0e0);
	--modal-content-fg: var(--text-color, #333);
	--modal-content-bg: var(--content-bg, #ffffff);
	--modal-radius: var(--radius-md, 8px);
	--error-color: var(#ff0000); /* Croix rouge au survol */;

    position: fixed;
    inset: 0; /* Remplace top/left/right/bottom: 0 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* Assure la superposition globale */
    background-color: var(--modal-overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;	
}

.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: var(--modal-max-width);
    max-height: 90vh;
    border-radius: var(--modal-radius);
    background-color: var(--modal-content-bg);
    box-shadow: var(--modal-shadow);
    border: 1px solid var(--modal-border-color);
    overflow: hidden; /* Contraint le débordement des enfants */
    transform: translateY(-20px);
    transition: transform 0.2s ease-out;
}

.modal-overlay.is-active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--modal-border-color);
    flex-shrink: 0; /* Reste fixe */
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn svg {
    fill: var(--modal-content-fg);
    width: 24px;
    height: 24px;
    transition: fill 0.15s ease;
}

.modal-close-btn:hover svg {
    fill: var(--error-color);
}

.modal-body {
    padding: 24px;
    overflow-y: auto; /* Défilement interne */
    flex-grow: 1;
}

/* Scrollbar personnalisée */
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb { 
    background-color: var(--modal-border-color); 
    border-radius: 4px; 
}
/* --- popover --- */
/* Composant Popover */
.popover {
    position: fixed;
    z-index: 2000;
    background: var(--content-bg, #ffffff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--modal-shadow, 0 4px 12px rgba(0,0,0,0.15));
    min-width: 150px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    /* Animation d'apparition */
    animation: popoverFadeIn 0.15s ease-out;
}

@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.popover-item {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
    color: var(--text-main, #333333);
    transition: background-color 0.2s;
}

.popover-item:hover { background-color: var(--bg-input, #f5f5f5); }
.popover-item.active { font-weight: bold; color: var(--brand-primary, #0056b3); }
/* --- toast --- */
/* Composant Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10050; /* Toujours au-dessus de tout, sauf overlays critiques */
    pointer-events: none; /* Laisse passer les clics à travers le conteneur vide */
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 250px;
    max-width: 400px;
    padding: 12px 16px;
    border-radius: var(--radius-md, 8px);
    background-color: var(--content-bg, #ffffff);
    color: var(--text-main, #333333);
    box-shadow: var(--modal-shadow, 0 4px 12px rgba(0,0,0,0.15));
    border-left: 4px solid var(--toast-border, #ccc);
    pointer-events: auto; /* Restaure l'interaction sur l'élément */
    
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

.toast.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.toast-success { border-left-color: var(--success-color, #28a745); }
.toast-error { border-left-color: var(--error-color, #dc3545); }
.toast-info { border-left-color: var(--info-color, #17a2b8); }

.toast-message { font-size: 0.95rem; font-weight: 500; }

.toast-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #6c757d);
    margin-left: 16px;
}
.toast-close:hover { color: var(--text-main, #333); }
/* --- waiting --- */
/* Composant waiting Loader */
.waiting-wrapper {
    display: flex;
    gap: 16px;
    padding: 16px;
    width: 100%;
}

.waiting-text-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
    justify-content: center;
}

.waiting {
    background-color: var(--waiting-bg, #e2e5e7);
    border-radius: var(--radius-sm, 4px);
    /* Animation de balayage (Shimmer effect) utilisant un dégradé linéaire */
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.4) 60%,
        rgba(255, 255, 255, 0)
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Modificateurs de forme */
.waiting-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}

.waiting-title {
    height: 20px;
    width: 40%;
    margin-bottom: 8px;
}

.waiting-text {
    height: 12px;
    width: 100%;
}

.waiting-text.short {
    width: 60%;
}