/* ========================================================== 
LIBURU 
notifications.css 
Gestion visuelle des notifications 
========================================================== */ 

/****************************************************** 
POPUP 
******************************************************/ 
.popup_notifications 
{ 
	max-width:650px; 
	width:100%; 
} 

/****************************************************** 
LISTE 
******************************************************/ 
.liste_notifications 
{ 
	display:flex; 
	flex-direction:column; 
	gap:10px; 
	max-height:60vh; 
	overflow-y:auto; 
	margin-top:10px; 
} 

/****************************************************** 
CHARGEMENT 
******************************************************/ 
.notifications_loading 
{ 
	padding:25px; 
	text-align:center; 
	color:#777; 
	font-size:14px; 
} 

/****************************************************** 
AUCUNE NOTIFICATION 
******************************************************/ 
.notifications_aucune 
{ 
	padding:30px 20px; 
	text-align:center; 
	color:#777; 
	background:#f7f7f7; 
	border-radius:12px; 
	font-size:14px; 
} 

/****************************************************** 
ERREUR 
******************************************************/ 
.notifications_erreur 
{ 
	padding:20px; 
	text-align:center; 
	color:#c33; 
	background:#fff5f5; 
	border:1px solid #f0cccc; 
	border-radius:12px; 
} 

/****************************************************** 
LIGNE NOTIFICATION 
******************************************************/ 
.notification_ligne 
{ 
	display:flex; 
	align-items:flex-start; 
	gap:12px; 
	padding:14px; 
	background:#fafafa; 
	border:1px solid #e5e5e5; 
	border-radius:12px; 
	transition:.2s; 
} 

.notification_ligne:hover 
{ 
	background:#f7f8ff; 
	border-color:#cfd5ff; 
} 

/****************************************************** 
NOTIFICATION CLIQUABLE 
******************************************************/ 

.notification_ligne.notification_cliquable 
{ 
	cursor:pointer; 
} 

.notification_ligne.notification_cliquable:hover 
{ 
	transform:translateY(-1px); 
} 

/****************************************************** 
ICONE 
******************************************************/ 
.notification_icone 
{ 
	width:38px; 
	min-width:38px; 
	height:38px; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	background:#f1f1f1; 
	border-radius:50%; 
	font-size:19px; 
} 

/****************************************************** 
CONTENU 
******************************************************/ 
.notification_contenu 
{ 
	flex:1; 
	min-width:0; 
} 

/****************************************************** 
MESSAGE 
******************************************************/ 
.notification_message 
{ 
	font-size:14px; 
	line-height:1.5; 
	color:#333; 
	word-break:break-word; 
} 

/****************************************************** 
SOURCE 
******************************************************/ 
.notification_source 
{ 
	margin-top:5px; 
	font-size:12px; 
	color:#777; 
} 

/****************************************************** 
DATE 
******************************************************/ 
.notification_date 
{ 
	margin-top:4px; 
	font-size:11px; 
	color:#999; 
} 

/****************************************************** 
SCROLLBAR 
******************************************************/ 
.liste_notifications::-webkit-scrollbar 
{ 
	width:7px; 
} 

.liste_notifications::-webkit-scrollbar-track 
{ 
	background:#f5f5f5; 
	border-radius:10px; 
} 

.liste_notifications::-webkit-scrollbar-thumb 
{ 
	background:#ccc; 
	border-radius:10px; 
} 

.liste_notifications::-webkit-scrollbar-thumb:hover 
{ 
	background:#aaa; 
} 

/****************************************************** 
BADGE NOTIFICATIONS 
******************************************************/ 
.notifications_compteur 
{ 
	position:absolute; 
	top:-7px; 
	right:-9px; 
	min-width:18px; 
	height:18px; 
	padding:0 5px; 
	display:flex; 
	align-items:center; 
	justify-content:center; 
	box-sizing:border-box; 
	background:#e53935; 
	color:white; 
	border-radius:10px; 
	font-size:11px; 
	font-weight:600; 
	line-height:18px; 
} 

/****************************************************** 
BOUTON NOTIFICATIONS HEADER 
******************************************************/ 
.notifications 
{ 
	position:relative; 
	display:inline-flex; 
	align-items:center; 
	justify-content:center; 
	text-decoration:none; 
} 

/****************************************************** 
MOBILE 
******************************************************/ 
@media (max-width:768px) 
{ 
	.popup_notifications 
	{ 
		width:100%; 
		max-height:95vh; 
	} 
	.liste_notifications 
	{ 
		max-height:60vh; 
	} 
	.notification_ligne 
	{ 
		padding:12px; 
	} 
	.notification_message 
	{ 
		font-size:13px; 
	} 
}