/**
 * Slaypowiadomienia — styl.
 * Wartości kolorów wyciągnięte na górę, żeby łatwo dopasować do Twojego stylu.
 */
.fnt-tabs {
	--fnt-border:       rgba(255, 255, 255, 0.09);
	--fnt-tab-color:    #b6b2a7;          /* nieaktywna zakładka */
	--fnt-tab-hover:    #ffffff;
	--fnt-active-color: #ffffff;          /* aktywna zakładka */
	--fnt-active-bg:    rgba(255, 255, 255, 0.06);
	--fnt-active-line:  #8a9a5b;          /* oliwkowy akcent z motywu */
	--fnt-badge-bg:     #c0392b;          /* czerwona plakietka */
	--fnt-badge-color:  #ffffff;

	display: flex;
	gap: 2px;
	margin: 0;
	padding: 5px 6px 0;
	border-bottom: 1px solid var(--fnt-border);
}

/* Pasek na pełnej liście w UCP — trochę oddechu wokół. */
.fnt-tabs-ucp {
	margin: 0 0 10px;
	border-bottom: 2px solid var(--fnt-border);
}

.fnt-tabs .fnt-tab {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 4px;
	margin: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--fnt-tab-color);
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.fnt-tabs .fnt-tab:hover {
	color: var(--fnt-tab-hover);
}

.fnt-tabs .fnt-tab.fnt-active {
	color: var(--fnt-active-color);
	background-color: var(--fnt-active-bg);
	border-bottom-color: var(--fnt-active-line);
}

.fnt-tabs .fnt-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background-color: var(--fnt-badge-bg);
	color: var(--fnt-badge-color);
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
}

/* Element ukryty przez filtr zakładki. */
.fnt-hidden {
	display: none !important;
}

/* Czerwona kropka przy nieodczytanym powiadomieniu — tuż przed tekstem tytułu. */
/* Dropdown w nagłówku: */
#notification_list .fnt-unread .notification-title::before,
#notification-menu .fnt-unread .notification-title::before,
/* Pełna lista w UCP: */
.notification_list .fnt-unread .notifications_title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background-color: #c0392b;
	vertical-align: middle;
}