// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

// ═══════════════════════════════════════════════════════════════
//  NOTIFICHE — feed raggruppato per fascia temporale.
//  Card bianche radius 16, non lette con tinta brand + dot;
//  stesso linguaggio di bacheca (partial condivisi in src/theme).
// ═══════════════════════════════════════════════════════════════
@use '../../../theme/card-rise';
@use '../../../theme/detail-modal';

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 5rem 2.5rem;
	text-align: center;

	.empty-icon-ring {
		width: 72px;
		height: 72px;
		border-radius: 50%;
		background: rgba(var(--app-brand-rgb), 0.12);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;

		ion-icon {
			font-size: 32px;
			color: var(--app-brand-3);
		}
	}

	.empty-title {
		font-size: 1rem;
		font-weight: 700;
		color: var(--ion-color-dark);
		margin: 0 0 0.25rem;
	}

	.empty-sub {
		font-size: 0.85rem;
		color: var(--ion-color-medium);
		margin: 0;
		max-width: 26ch;
		line-height: 1.45;
	}
}

.notif-list {
	padding: 14px 14px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.unread-summary {
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ion-color-dark);
	background: rgba(var(--app-brand-rgb), 0.14);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 2px;
}

.notif-group {
	display: flex;
	flex-direction: column;
	gap: 8px;

	& + .notif-group {
		margin-top: 10px;
	}
}

.group-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ion-color-medium);
	padding: 2px 4px 0;
}

.notif-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 14px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 6px 18px -12px rgba(17, 24, 39, 0.35);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.12s ease;

	&:active {
		transform: scale(0.98);
	}

	&.unread {
		background: rgba(var(--app-brand-rgb), 0.07);
		border-color: rgba(var(--app-brand-rgb), 0.28);
	}

	&.skeleton {
		pointer-events: none;
		box-shadow: none;
	}
}

// fill-mode 'backwards' (non 'both'/'forwards'): a fine animazione il
// keyframe finale non deve restare applicato, altrimenti il suo
// transform vincerebbe in cascata sullo scale di :active per sempre.
// Il delay legge --i impostata dal template ($index), così lo stagger
// non dipende dalla posizione nth-child dentro al gruppo.
@media (prefers-reduced-motion: no-preference) {
	.notif-item:not(.skeleton) {
		animation: card-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
		animation-delay: calc(var(--i, 0) * 30ms);
	}
}

.notif-dot-col {
	padding-top: 6px;
	flex-shrink: 0;
	width: 8px;
	display: flex;
	justify-content: center;
}

.notif-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--app-brand-3);
	flex-shrink: 0;
}

.notif-content {
	flex: 1;
	min-width: 0;
}

.notif-top {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 3px;
}

.notif-title {
	flex: 1;
	min-width: 0;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ion-color-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	b,
	strong {
		font-weight: 600;
	}
}

.notif-item.unread .notif-title {
	font-weight: 700;

	b,
	strong {
		font-weight: 700;
	}
}

.notif-time {
	flex-shrink: 0;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--ion-color-medium);
}

.notif-message {
	font-size: 0.85rem;
	color: var(--ion-color-medium-shade);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.45;

	b,
	strong {
		font-weight: 600;
	}
}

// ─── DETTAGLIO (modal) ────────────────────────────────────────
// Toolbar, corpo, titolo e testo vengono dal partial condiviso
// src/theme/_detail-modal.scss; qui restano solo media e data,
// che divergono dalle altre pagine.
.detail-media {
	img {
		width: 100%;
		max-height: 320px;
		object-fit: cover;
		display: block;
	}
}

.detail-date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ion-color-medium);
	margin-bottom: 14px;

	ion-icon {
		font-size: 14px;
	}
}

.notif-image-wrap {
	margin-top: 8px;
	border-radius: 12px;
	overflow: hidden;
	max-width: 100%;

	.notif-image {
		width: 100%;
		max-height: 170px;
		object-fit: cover;
		display: block;
	}
}
