/* Design tokens — Giovane Matita gestionale */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--color-brand: #022363;
	--color-brand-mid: #1a4a8a;
	--color-brand-light: #0f4090;
	--color-accent: #3399ff;
	--color-accent-soft: #e8f1ff;
	--color-text: #2d3a52;
	--color-text-muted: #6b7a99;
	--color-text-inverse: #ffffff;
	--color-border: #dfe6f5;
	--color-border-strong: #c8d8f5;
	--color-bg-page: #f0f4fb;
	--color-bg-surface: #ffffff;
	--color-bg-muted: #f8fafd;
	--color-bg-sidebar: #f4f7fc;
	--color-bg-sidebar-hover: #e8f1ff;
	--color-bg-sidebar-start: #f6f9fd;
	--color-bg-sidebar-end: #eef3fb;
	--color-sidebar-text: #2d3a52;
	--color-sidebar-text-muted: #6b7a99;
	--color-sidebar-border: #dfe6f5;
	--color-danger: #c62828;
	--color-success: #059669;
	--font-family: 'Outfit', Arial, sans-serif;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 3px rgba(2, 35, 99, 0.06);
	--shadow-md: 0 4px 16px rgba(2, 35, 99, 0.08);
	--shadow-lg: 0 8px 32px rgba(2, 35, 99, 0.12);
	--shadow-header: 0 1px 0 rgba(15, 23, 42, 0.06);
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--transition-fast: 0.15s ease;
	--transition-base: 0.22s ease;
	--content-max: 1440px;
	--sidebar-width-pct: 16%;
	--main-width-pct: 84%;
}

/* Base pagina */
body.site-body {
	background-color: var(--color-bg-page);
	color: var(--color-text);
	margin: 0;
}

body.site-body--admin #TemplateColSX_Box {
	box-sizing: border-box;
}

body.site-body--admin #TemplateColDX_Box {
	background-color: var(--color-bg-muted);
	min-height: calc(100vh - 120px);
	box-sizing: border-box;
}

@media screen and (min-width: 768px) {
	body.site-body--admin #TemplateColDX_Box {
		float: left;
		width: calc(100% - var(--sidebar-width-pct, 16%));
		overflow: visible;
	}
}

/* Dashboard admin / rivenditore / merchandising */
.AdminDashboard {
	width: 100%;
	box-sizing: border-box;
}

.AdminDashboard h1 {
	margin-bottom: 12px;
	text-align: left;
}

.AdminDashboard h1::after {
	left: 0;
	transform: none;
}

.DashboardFiltri {
	margin-bottom: 20px;
	background: #f5f7fa;
	padding: 12px;
	border-radius: 6px;
}

.DashboardGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.DashboardPanel {
	min-width: 0;
	overflow: hidden;
}

.DashboardPanel .MyFormTitle {
	float: none;
	width: auto;
	margin-top: 0;
	padding-top: var(--space-sm);
}

.DashboardPanel--wide {
	grid-column: 1 / -1;
}

.DashboardPanelBody {
	font-size: 0.95rem;
}

.DashboardPanel--alert .MyFormTitle {
	background-color: #c62828;
	color: #fff;
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.DashboardAlarm {
	color: #c62828;
	font-weight: bold;
}

.DashboardList {
	margin: 0;
	padding-left: 18px;
}

.DashboardTable th {
	text-align: left;
	border-bottom: 1px solid #ccc;
}

.DashboardPanelLink {
	margin-top: 10px;
	font-size: 0.9rem;
}

@media screen and (max-width: 767px) {
	body.site-body--admin #TemplateColDX_Box {
		overflow: visible;
		width: 100%;
	}
}

body.site-body--guest .Container {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
	box-sizing: border-box;
}

/* Footer CTA (ex inline) */
.FooterCtaBanner {
	padding: 3rem 2.5rem;
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-mid) 100%);
	text-align: left;
	clear: both;
	width: 100%;
	box-sizing: border-box;
}

.FooterCtaTitle {
	font-size: 1.7rem;
	color: var(--color-text-inverse);
	font-weight: 600;
	line-height: 1.3;
}

.FooterCtaSubtitle {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 0.35rem;
	line-height: 1.4;
}

.FooterLegalNote {
	font-size: 0.875rem;
	opacity: 0.92;
}

/* Sidebar catalogo (menu libri) */
.SidebarCatalog-heading {
	color: var(--color-brand);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-sidebar-border);
}

.SidebarCatalog {
	padding: 0 2px;
}

/* Menu laterale — testi scuri su sfondo chiaro */
#TemplateColSX_Box .ArticlesMenu,
#TemplateColSX_Box .ArticlesMenu a {
	color: var(--color-sidebar-text);
}

#TemplateColSX_Box .ArticlesMenu {
	border-bottom-color: var(--color-sidebar-border);
}

#TemplateColSX_Box .ArticlesMenu:hover {
	background: var(--color-bg-sidebar-hover);
}

#TemplateColSX_Box .ArticlesSubMenu,
#TemplateColSX_Box .ArticlesSubMenu a,
#TemplateColSX_Box li {
	color: var(--color-sidebar-text-muted);
}

#TemplateColSX_Box .ArticlesSubMenu a:hover,
#TemplateColSX_Box .ArticlesMenu a:hover {
	color: var(--color-brand);
}

#TemplateColSX_Box .ProductsMenu_Box {
	border-bottom-color: var(--color-sidebar-border);
	color: var(--color-sidebar-text);
}

/* Spazio legacy sotto header (TemplateRicerca_Box vuoto) — non usato nel layout admin nuovo */
body.site-body--admin #TemplateRicerca_Box {
	display: none;
	margin: 0;
	padding: 0;
	height: 0;
	overflow: hidden;
}

/* Ricerca catalogo nell'header admin */
.AdminSiteHeader-search {
	flex: 1 1 240px;
	min-width: 0;
	max-width: 560px;
	margin: 0 auto;
	padding: 0 var(--space-sm);
}

.AdminCatalogSearch {
	position: relative;
	width: 100%;
}

.AdminCatalogSearch-form {
	position: relative;
	margin: 0;
}

.AdminCatalogSearch-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.AdminCatalogSearch-input {
	width: 100%;
	box-sizing: border-box;
	height: 42px;
	padding: 0 16px 0 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-bg-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E") 14px center no-repeat;
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: 0.9375rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.AdminCatalogSearch-input::placeholder {
	color: var(--color-text-muted);
}

.AdminCatalogSearch-input:focus {
	outline: none;
	border-color: var(--color-accent);
	background-color: var(--color-bg-surface);
	box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.2);
}

.AdminCatalogSearch-results {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: max(100%, 440px);
	max-width: min(560px, calc(100vw - 32px));
	z-index: 1200;
	background: var(--color-bg-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	box-shadow: var(--shadow-lg);
	max-height: 360px;
	overflow-y: auto;
	text-align: left;
	font-size: 0.875rem;
}

.AdminCatalogSearch-results table {
	width: 100%;
	border-collapse: collapse;
}

.AdminCatalogSearch-results td {
	padding: 8px 10px;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-border);
}

.AdminCatalogSearch-results tr:last-child td {
	border-bottom: none;
}

.AdminCatalogSearch-results tr:hover td {
	background: var(--color-accent-soft);
}

.AdminCatalogSearch-results a {
	color: var(--color-text);
	text-decoration: none;
}

.AdminCatalogSearch-results a:hover {
	color: var(--color-brand);
}

.AdminCatalogSearch-results img {
	border-radius: 4px;
	margin-right: 8px;
	vertical-align: middle;
}

@media screen and (max-width: 767px) {
	.AdminSiteHeader-search {
		flex: 1 1 100%;
		max-width: none;
		order: 2;
		margin: 0;
		padding: 0;
	}

	.AdminCatalogSearch-results {
		width: 100%;
		max-width: none;
		left: 0;
		right: 0;
	}
}

/* Card contenuto principale admin */
body.site-body--admin #TemplateMain_Box {
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	margin-top: var(--space-sm);
	box-shadow: var(--shadow-sm);
	float: none;
	width: auto;
}

body.site-body--guest #LogoRow {
	box-shadow: var(--shadow-header);
}

/* Parte pubblica: contenuto leggibile su schermi piccoli */
@media screen and (max-width: 767px) {
	body.site-body--guest .Container {
		max-width: 100%;
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);
		box-sizing: border-box;
	}

	body.site-body--guest #TemplateMain_Box {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
		border-radius: var(--radius-md);
	}

	body.site-body--guest #TemplateMain_Pad {
		padding: var(--space-md) var(--space-sm);
		box-sizing: border-box;
		overflow-x: hidden;
		text-align: left;
	}

	body.site-body--guest #TemplateMain_Pad img,
	body.site-body--guest #TemplateMain_Pad iframe,
	body.site-body--guest #TemplateMain_Pad video {
		max-width: 100%;
		height: auto;
	}

	body.site-body--guest #TemplateMain_Pad table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	body.site-body--guest #TemplateMain_Pad h1,
	body.site-body--guest #TemplateMain_Pad h2 {
		word-wrap: break-word;
		overflow-wrap: anywhere;
	}
}

/* === Titoli pagina (h1, h2) — leggeri e moderni === */
h1 {
	font-family: var(--font-family);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.025em;
	color: var(--color-text);
	margin: 0 0 var(--space-md);
	padding: 0 0 0.65rem;
	text-align: center;
	position: relative;
	background: none;
	-webkit-text-fill-color: unset;
}

h1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.5rem;
	height: 3px;
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	opacity: 0.75;
}

h2 {
	font-family: var(--font-family);
	font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--color-text-muted);
	margin: var(--space-lg) 0 var(--space-sm);
	padding: 0;
	text-align: center;
	position: relative;
}

h2::after {
	display: none;
}

/* Admin: titoli allineati a sinistra nel contenuto */
body.site-body--admin #TemplateMain_Pad h1,
body.site-body--admin #TemplateMain_Pad h2,
body.site-body--admin #TemplateMain_Pad .FormTitle,
body.site-body--admin #TemplateMain_Pad .Form_TitoloParagrafo {
	text-align: left;
}

body.site-body--admin #TemplateMain_Pad h1::after {
	left: 0;
	transform: none;
}