/**
 * Nome File: ic-archivio.css
 * Descrizione: Stili per la pagina archivio annunci — layout, filtri sidebar, header, vista griglia/lista
 * © Francesco Russo - francescorusso.work
 */

/* ===================================
   LAYOUT ARCHIVIO
   =================================== */
.ic-archivio {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--ic-space-lg);
	align-items: start;
}

/* ===================================
   SIDEBAR FILTRI
   =================================== */
.ic-filtri {
	background: var(--ic-white);
	padding: var(--ic-space-lg);
	border-radius: var(--ic-radius-lg);
	box-shadow: var(--ic-shadow-sm);
	position: sticky;
	top: calc(var(--ic-header-height) + var(--ic-space-md));
	max-height: calc(100vh - var(--ic-header-height) - var(--ic-space-lg));
	overflow-y: auto;
}

/* Scrollbar sottile per i filtri */
.ic-filtri::-webkit-scrollbar {
	width: 4px;
}

.ic-filtri::-webkit-scrollbar-track {
	background: transparent;
}

.ic-filtri::-webkit-scrollbar-thumb {
	background: var(--ic-border);
	border-radius: 2px;
}

/* Gruppi di filtri */
.ic-filtri__group {
	margin-bottom: var(--ic-space-lg);
	padding-bottom: var(--ic-space-lg);
	border-bottom: 1px solid var(--ic-border);
}

.ic-filtri__group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

/* Header filtri */
.ic-filtri__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ic-space-lg);
}

.ic-filtri__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ic-text);
	margin-bottom: 0;
}

.ic-filtri__reset {
	background: none;
	border: none;
	color: var(--ic-blue);
	font-family: var(--ic-font);
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	transition: color var(--ic-transition);
}

.ic-filtri__reset:hover {
	color: var(--ic-blue-dark);
	text-decoration: underline;
}

/* Label nei filtri */
.ic-filtri__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ic-text);
	margin-bottom: var(--ic-space-xs);
}

/* Range prezzo / superficie con separatore */
.ic-filtri__range {
	display: flex;
	align-items: center;
	gap: var(--ic-space-sm);
}

.ic-filtri__range .ic-input {
	flex: 1;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

.ic-filtri__range-sep {
	color: var(--ic-text-muted);
	font-size: 0.875rem;
	flex-shrink: 0;
}

/* Griglia caratteristiche (2 colonne) */
.ic-filtri__caratteristiche {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ic-space-xs) var(--ic-space-sm);
}

.ic-filtri__caratteristiche .ic-checkbox {
	font-size: 0.8125rem;
	margin-bottom: 0;
}

.ic-filtri__caratteristiche .ic-checkbox input {
	width: 16px;
	height: 16px;
}

/* Pulsante applica filtri (mobile) */
.ic-filtri__apply {
	display: none;
	margin-top: var(--ic-space-md);
}

/* ===================================
   HEADER ARCHIVIO (risultati + vista)
   =================================== */
.ic-archivio__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ic-space-lg);
	flex-wrap: wrap;
	gap: var(--ic-space-sm);
}

.ic-archivio__count {
	font-size: 0.9375rem;
	color: var(--ic-text-light);
}

.ic-archivio__count strong {
	font-weight: 700;
	color: var(--ic-text);
}

.ic-archivio__controls {
	display: flex;
	align-items: center;
	gap: var(--ic-space-sm);
}

/* Ordinamento */
.ic-archivio__sort {
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
}

/* Toggle vista griglia/lista */
.ic-archivio__views {
	display: flex;
	gap: 2px;
	background: var(--ic-bg);
	border-radius: var(--ic-radius-sm);
	padding: 2px;
}

.ic-archivio__view {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	border-radius: var(--ic-radius-sm);
	color: var(--ic-text-muted);
	cursor: pointer;
	transition: all var(--ic-transition);
}

.ic-archivio__view svg {
	width: 18px;
	height: 18px;
}

.ic-archivio__view:hover {
	color: var(--ic-text);
}

.ic-archivio__view.active {
	background: var(--ic-white);
	color: var(--ic-blue);
	box-shadow: var(--ic-shadow-sm);
}

/* ===================================
   GRIGLIA RISULTATI
   =================================== */
.ic-archivio__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ic-space-lg);
}

.ic-archivio__grid--list {
	grid-template-columns: 1fr;
}

.ic-archivio__grid--list .ic-card {
	display: grid;
	grid-template-columns: 280px 1fr;
}

.ic-archivio__grid--list .ic-card .ic-card__image {
	aspect-ratio: auto;
	height: 100%;
}

/* Stato vuoto */
.ic-archivio__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--ic-space-xl);
	color: var(--ic-text-muted);
}

.ic-archivio__empty-icon {
	font-size: 3rem;
	margin-bottom: var(--ic-space-md);
	opacity: 0.5;
}

.ic-archivio__empty-text {
	font-size: 1.125rem;
	margin-bottom: var(--ic-space-sm);
}

/* ===================================
   TOGGLE FILTRI MOBILE
   =================================== */
.ic-filtri-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--ic-space-sm);
	width: 100%;
	padding: 0.75rem var(--ic-space-md);
	background: var(--ic-white);
	border: 1.5px solid var(--ic-border);
	border-radius: var(--ic-radius-md);
	font-family: var(--ic-font);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ic-text);
	cursor: pointer;
	transition: all var(--ic-transition);
	margin-bottom: var(--ic-space-md);
}

.ic-filtri-toggle svg {
	width: 18px;
	height: 18px;
}

.ic-filtri-toggle:hover {
	border-color: var(--ic-blue);
	color: var(--ic-blue);
}

/* Overlay mobile per filtri */
.ic-filtri-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 1024px) {
	.ic-archivio__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ic-archivio {
		display: block;
	}

	.ic-filtri-toggle {
		display: flex;
	}

	.ic-filtri {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		max-width: 85vw;
		max-height: 100vh;
		border-radius: 0;
		z-index: 9999;
		transform: translateX(-100%);
		transition: transform var(--ic-transition);
		box-shadow: var(--ic-shadow-lg);
		padding-bottom: 80px;
	}

	.ic-filtri.active {
		transform: translateX(0);
	}

	.ic-filtri-overlay.active {
		display: block;
	}

	.ic-filtri__apply {
		display: block;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		background: var(--ic-white);
		padding: var(--ic-space-md);
		border-top: 1px solid var(--ic-border);
		margin: 0 calc(-1 * var(--ic-space-lg));
	}

	.ic-archivio__grid {
		grid-template-columns: 1fr;
	}

	.ic-archivio__grid--list .ic-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.ic-archivio__header {
		flex-direction: column;
		align-items: stretch;
	}

	.ic-archivio__controls {
		justify-content: space-between;
	}
}