/**
 * Layout modes: mobile / tablet / desktop.
 * Driven by [data-layout-mode] on root.
 */

:root {
	--sof-app-max-width: 430px;
	--sof-content-columns: 1;
	--sof-control-height: 44px;
	--sof-panel-gap: 12px;
	--sof-font-scale: 1;
	--sof-sidebar-width: 0px;
	--sof-layout-frame-bg: #ece7df;
}

html[data-sof-layout="tablet"],
[data-layout-mode="tablet"] {
	--sof-app-max-width: 1024px;
	--sof-content-columns: 2;
	--sof-control-height: 44px;
	--sof-panel-gap: 16px;
	--sof-font-scale: 1.02;
	--sof-sidebar-width: 220px;
}

html[data-sof-layout="desktop"],
[data-layout-mode="desktop"] {
	--sof-app-max-width: 1440px;
	--sof-content-columns: 3;
	--sof-control-height: 40px;
	--sof-panel-gap: 20px;
	--sof-font-scale: 1;
	--sof-sidebar-width: 260px;
}

html[data-sof-layout="mobile"],
[data-layout-mode="mobile"] {
	--sof-app-max-width: 430px;
	--sof-content-columns: 1;
	--sof-control-height: 44px;
	--sof-panel-gap: 12px;
	--sof-font-scale: 1;
}

/* Frame simulazione su viewport più larghi */
body.sof-layout-mobile:not(.sof-pwa-app-body),
body.sof-pwa-app-body.sof-layout-mobile {
	background: var(--sof-layout-frame-bg);
}

#sof-pwa-root[data-layout-mode="mobile"],
[data-sof-app-shell][data-layout-mode="mobile"],
.sof-front-wrap[data-layout-mode="mobile"] {
	max-width: min(100%, var(--sof-app-max-width));
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	#sof-pwa-root[data-layout-mode="mobile"],
	[data-sof-app-shell][data-layout-mode="mobile"],
	.sof-front-wrap[data-layout-mode="mobile"] {
		max-width: 100%;
	}

	body.sof-layout-mobile {
		background: transparent;
	}
}

#sof-pwa-root[data-layout-mode="tablet"],
[data-sof-app-shell][data-layout-mode="tablet"],
.sof-front-wrap[data-layout-mode="tablet"],
#sof-pwa-root[data-layout-mode="desktop"],
[data-sof-app-shell][data-layout-mode="desktop"],
.sof-front-wrap[data-layout-mode="desktop"] {
	max-width: min(100%, var(--sof-app-max-width));
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Selettore — solo 3 icone + menu secondario */
.sof-layout-mode {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.06);
}

.sof-layout-mode__btn,
.sof-layout-mode__menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 6px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #2b1b0f;
	cursor: pointer;
	line-height: 1;
}

.sof-layout-mode__menu-btn {
	min-width: 32px;
	opacity: 0.75;
}

.sof-layout-mode__btn:hover,
.sof-layout-mode__menu-btn:hover,
.sof-layout-mode__btn:focus-visible,
.sof-layout-mode__menu-btn:focus-visible,
.sof-layout-mode__menu-item:focus-visible {
	outline: 2px solid var(--sof-accent, #8b1e1e);
	outline-offset: 1px;
	background: rgba(255, 255, 255, 0.7);
}

.sof-layout-mode__btn.is-active {
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	color: var(--sof-accent, #8b1e1e);
}

.sof-layout-mode[data-sof-layout-preference="auto"] .sof-layout-mode__btn.is-active {
	box-shadow: 0 0 0 2px rgba(139, 30, 30, 0.25);
}

.sof-layout-mode__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 220px;
	padding: 6px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.sof-layout-mode__menu-item {
	display: block;
	width: 100%;
	text-align: left;
	min-height: 40px;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	font-size: 0.9rem;
	color: #2b1b0f;
}

.sof-layout-mode__menu-item.is-active,
.sof-layout-mode__menu-item[aria-pressed="true"] {
	background: rgba(139, 30, 30, 0.08);
	font-weight: 600;
	color: var(--sof-accent, #8b1e1e);
}

.sof-pwa-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(246, 239, 228, 0.96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sof-pwa-topbar__brand {
	font-weight: 700;
	font-size: 0.95rem;
	color: #2b1b0f;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sof-app-header__right .sof-layout-mode {
	margin-right: 6px;
}

/* Controlli touch */
[data-layout-mode] .sof-btn,
[data-layout-mode] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-layout-mode] select,
[data-layout-mode] textarea {
	min-height: var(--sof-control-height);
	box-sizing: border-box;
	max-width: 100%;
}

[data-layout-mode="mobile"] {
	font-size: calc(1rem * var(--sof-font-scale));
	overflow-x: hidden;
}

[data-layout-mode="mobile"] .sof-pwa-main,
[data-layout-mode="mobile"] .sof-front-wrap,
[data-layout-mode="mobile"] [data-sof-app-shell] {
	padding-bottom: max(72px, calc(56px + env(safe-area-inset-bottom)));
}

/* Griglie moduli */
[data-layout-mode="tablet"] .sof-prodotti-grid,
[data-layout-mode="desktop"] .sof-prodotti-grid,
[data-layout-mode="tablet"] .sof-dashboard-grid,
[data-layout-mode="desktop"] .sof-dashboard-cards,
[data-layout-mode="tablet"] .sof-owner-dashboard__cards,
[data-layout-mode="desktop"] .sof-owner-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(var(--sof-content-columns), minmax(0, 1fr));
	gap: var(--sof-panel-gap);
}

[data-layout-mode="mobile"] .sof-prodotti-grid,
[data-layout-mode="mobile"] .sof-dashboard-grid,
[data-layout-mode="mobile"] .sof-dashboard-cards,
[data-layout-mode="mobile"] .sof-owner-dashboard__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sof-panel-gap);
}

[data-layout-mode="tablet"] .sof-checkout-grid,
[data-layout-mode="desktop"] .sof-checkout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sof-panel-gap);
}

[data-layout-mode="desktop"] .sof-checkout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

[data-layout-mode="mobile"] .sof-checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sof-panel-gap);
}

[data-layout-mode="desktop"] .sof-fidelity-guided,
[data-layout-mode="desktop"] .sof-fidelity-staff-console {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--sof-panel-gap);
	align-items: start;
}

[data-layout-mode="tablet"] .sof-fidelity-guided,
[data-layout-mode="tablet"] .sof-fidelity-staff-console {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sof-panel-gap);
}

[data-layout-mode="mobile"] .sof-fidelity-guided,
[data-layout-mode="mobile"] .sof-fidelity-staff-console {
	display: block;
}

/* Toolbar / filtri — classi reali console */
[data-layout-mode="tablet"] .sof-panel-toolbar,
[data-layout-mode="desktop"] .sof-panel-toolbar,
[data-layout-mode="tablet"] .sof-panel-filter,
[data-layout-mode="desktop"] .sof-panel-filter,
[data-layout-mode="tablet"] .sof-orders-filters,
[data-layout-mode="desktop"] .sof-orders-filters,
[data-layout-mode="tablet"] .sof-stock-toolbar,
[data-layout-mode="desktop"] .sof-stock-toolbar,
[data-layout-mode="tablet"] .sof-reports-filters,
[data-layout-mode="desktop"] .sof-reports-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

[data-layout-mode="mobile"] .sof-panel-toolbar,
[data-layout-mode="mobile"] .sof-panel-filter,
[data-layout-mode="mobile"] .sof-orders-filters,
[data-layout-mode="mobile"] .sof-stock-toolbar,
[data-layout-mode="mobile"] .sof-reports-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

[data-layout-mode="desktop"] .sof-panel-toolbar .sof-btn,
[data-layout-mode="desktop"] .sof-panel-filter .sof-btn,
[data-layout-mode="desktop"] .sof-orders-filters .sof-btn {
	min-height: 40px;
}

/* Tabelle → card su mobile */
[data-layout-mode="mobile"] .sof-tabella-front,
[data-layout-mode="mobile"] .sof-table,
[data-layout-mode="mobile"] table.sof-orders-table,
[data-layout-mode="mobile"] table.sof-customers-table,
[data-layout-mode="mobile"] table.sof-clienti-table,
[data-layout-mode="mobile"] table.sof-stock-table,
[data-layout-mode="mobile"] table.sof-activity-table,
[data-layout-mode="mobile"] table.sof-log-unified-table,
[data-layout-mode="mobile"] table.sof-reports-table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

[data-layout-mode="mobile"] .sof-tabella-front thead,
[data-layout-mode="mobile"] .sof-fidelity-history thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

[data-layout-mode="mobile"] .sof-tabella-front tr,
[data-layout-mode="mobile"] .sof-fidelity-history tr {
	display: block;
	margin-bottom: 12px;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: #fff;
}

[data-layout-mode="mobile"] .sof-tabella-front td,
[data-layout-mode="mobile"] .sof-fidelity-history td {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border: 0;
	padding: 6px 0;
	text-align: right;
}

[data-layout-mode="mobile"] .sof-tabella-front td::before,
[data-layout-mode="mobile"] .sof-fidelity-history td::before {
	content: attr(data-label);
	font-weight: 600;
	text-align: left;
	color: #5c5c5c;
}

[data-layout-mode="tablet"] .sof-tabella-front,
[data-layout-mode="desktop"] .sof-tabella-front,
[data-layout-mode="tablet"] .sof-table,
[data-layout-mode="desktop"] .sof-table {
	display: table;
	width: 100%;
	overflow: visible;
}

/* Modali / form / scanner */
[data-layout-mode] .sof-modal,
[data-layout-mode] .sof-dialog,
[data-layout-mode] [role="dialog"] {
	max-width: min(96vw, var(--sof-app-max-width));
	max-height: min(90vh, 900px);
	overflow: auto;
	box-sizing: border-box;
}

[data-layout-mode="mobile"] .sof-form-row,
[data-layout-mode="mobile"] .sof-form-row input,
[data-layout-mode="mobile"] .sof-form-row select,
[data-layout-mode="mobile"] .sof-form-row textarea {
	width: 100%;
}

[data-layout-mode] .sof-scanner-box,
[data-layout-mode] #sof-qr-reader,
[data-layout-mode] [data-sof-scanner] {
	width: 100%;
	max-width: 100%;
}

[data-layout-mode="desktop"] .sof-settings-grid,
[data-layout-mode="desktop"] .sof-reports-grid,
[data-layout-mode="desktop"] .sof-warehouse-grid,
[data-layout-mode="desktop"] .sof-admin-grid,
[data-layout-mode="desktop"] .sof-dash-kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sof-panel-gap);
}

[data-layout-mode="mobile"] .sof-settings-grid,
[data-layout-mode="mobile"] .sof-reports-grid,
[data-layout-mode="mobile"] .sof-warehouse-grid,
[data-layout-mode="mobile"] .sof-admin-grid,
[data-layout-mode="mobile"] .sof-dash-kpi-grid,
[data-layout-mode="tablet"] .sof-settings-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sof-panel-gap);
}

[data-layout-mode="tablet"] .sof-admin-grid,
[data-layout-mode="tablet"] .sof-dash-kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sof-panel-gap);
}

/* Solo form di inserimento/settings: non comprimere tabelle console */
[data-layout-mode="desktop"] [data-sof-panel="impostazioni"] form.sof-card-front,
[data-layout-mode="desktop"] [data-sof-panel="impostazioni"] .sof-card-front > form,
[data-layout-mode="desktop"] [data-sof-panel="prodotti"] .sof-card-front > form:first-of-type,
[data-layout-mode="desktop"] [data-sof-panel="categorie"] .sof-card-front > form:first-of-type {
	max-width: 720px;
}

[data-layout-mode="desktop"] .sof-console-wrap,
[data-layout-mode="tablet"] .sof-console-wrap,
[data-layout-mode="desktop"] .sof-owner-dashboard__console,
[data-layout-mode="tablet"] .sof-owner-dashboard__console {
	max-width: min(1600px, 100%);
	width: 100%;
}

[data-layout-mode="desktop"] .sof-orders-desktop-table,
[data-layout-mode="tablet"] .sof-orders-desktop-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Receipt / guided fidelity */
.sof-fidelity-receipt {
	margin-top: 14px;
}

.sof-fidelity-receipt.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

.sof-fidelity-selected-card {
	border: 2px solid var(--sof-accent, #8b1e1e);
	border-radius: 14px;
	padding: 12px 14px;
	background: #fff;
	margin: 12px 0;
}

.sof-fidelity-selected-card__name {
	margin: 0 0 4px;
	font-size: 1.15rem;
	font-weight: 700;
}

.sof-fidelity-receipt__preview {
	margin: 10px 0;
	padding: 12px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.04);
}

.sof-fidelity-receipt__preview dt {
	font-size: 0.8rem;
	color: #5c5c5c;
}

.sof-fidelity-receipt__preview dd {
	margin: 0 0 8px;
	font-weight: 600;
}

.sof-fidelity-phase-title {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.sof-is-hidden {
	display: none !important;
}

/* Copertura moduli: dashboard, prodotti, categorie, clienti, volantino, ricevute, attività, notifiche */
[data-layout-mode="mobile"] .sof-dashboard,
[data-layout-mode="mobile"] .sof-owner-dashboard,
[data-layout-mode="mobile"] .sof-owner-dashboard__console,
[data-layout-mode="mobile"] .sof-products-grid,
[data-layout-mode="mobile"] .sof-prodotti-grid,
[data-layout-mode="mobile"] .sof-categories-grid,
[data-layout-mode="mobile"] [data-sof-panel="categorie"],
[data-layout-mode="mobile"] [data-sof-panel="prodotti"],
[data-layout-mode="mobile"] [data-sof-panel="ordini"],
[data-layout-mode="mobile"] [data-sof-panel="clienti"],
[data-layout-mode="mobile"] [data-sof-panel="magazzino"],
[data-layout-mode="mobile"] [data-sof-panel="ricevute"],
[data-layout-mode="mobile"] [data-sof-panel="attivita"],
[data-layout-mode="mobile"] [data-sof-panel="report"],
[data-layout-mode="mobile"] [data-sof-panel="impostazioni"],
[data-layout-mode="mobile"] [data-sof-panel="fidelity"],
[data-layout-mode="mobile"] .sof-customers-panel,
[data-layout-mode="mobile"] .sof-fidelity-customers,
[data-layout-mode="mobile"] .sof-volantino-alert,
[data-layout-mode="mobile"] .sof-site-alert-admin,
[data-layout-mode="mobile"] .sof-receipts-panel,
[data-layout-mode="mobile"] .sof-activity-log,
[data-layout-mode="mobile"] .sof-notifications,
[data-layout-mode="mobile"] .sof-confirm-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sof-panel-gap, 12px);
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

[data-layout-mode="tablet"] .sof-products-grid,
[data-layout-mode="tablet"] .sof-prodotti-grid,
[data-layout-mode="tablet"] .sof-categories-grid,
[data-layout-mode="tablet"] .sof-dashboard-grid,
[data-layout-mode="tablet"] .sof-owner-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sof-panel-gap, 14px);
}

[data-layout-mode="desktop"] .sof-products-grid,
[data-layout-mode="desktop"] .sof-prodotti-grid,
[data-layout-mode="desktop"] .sof-categories-grid,
[data-layout-mode="desktop"] .sof-dashboard-grid,
[data-layout-mode="desktop"] .sof-owner-dashboard__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sof-panel-gap, 16px);
}

[data-layout-mode="mobile"] .sof-bottom-nav,
[data-layout-mode="mobile"] .sof-app-nav {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env(safe-area-inset-bottom, 0);
}

[data-layout-mode="mobile"] .sof-bottom-nav .sof-btn,
[data-layout-mode="mobile"] .sof-app-nav a,
[data-layout-mode="mobile"] .sof-app-nav__link,
[data-layout-mode="mobile"] .sof-pagination .sof-btn,
[data-layout-mode="mobile"] .sof-pagination a {
	min-height: 44px;
	min-width: 44px;
}

[data-layout-mode="mobile"] .sof-pagination,
[data-layout-mode="tablet"] .sof-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

[data-layout-mode="desktop"] .sof-pagination {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
}

[data-layout-mode="mobile"] .sof-notifications,
[data-layout-mode="mobile"] .sof-toast,
[data-layout-mode="mobile"] .sof-confirm-panel {
	max-width: min(96vw, 100%);
	box-sizing: border-box;
}

[data-layout-mode="mobile"] .sof-volantino-alert,
[data-layout-mode="tablet"] .sof-volantino-alert,
[data-layout-mode="mobile"] .sof-site-alert-admin,
[data-layout-mode="tablet"] .sof-site-alert-admin,
[data-layout-mode="mobile"] .sof-site-alert-modal__dialog {
	width: 100%;
	max-width: 100%;
	overflow-wrap: anywhere;
}

[data-layout-mode] .sof-receipts-panel table,
[data-layout-mode] .sof-activity-log table,
[data-layout-mode] [data-sof-panel="ricevute"] table,
[data-layout-mode] [data-sof-panel="attivita"] table,
[data-layout-mode] [data-sof-panel="magazzino"] table {
	width: 100%;
	max-width: 100%;
}

[data-layout-mode="mobile"] .sof-receipts-panel table,
[data-layout-mode="mobile"] .sof-activity-log table,
[data-layout-mode="mobile"] [data-sof-panel="ricevute"] table,
[data-layout-mode="mobile"] [data-sof-panel="attivita"] table,
[data-layout-mode="mobile"] [data-sof-panel="magazzino"] table,
[data-layout-mode="mobile"] [data-sof-panel="ordini"] table,
[data-layout-mode="mobile"] [data-sof-panel="clienti"] table,
[data-layout-mode="mobile"] [data-sof-panel="report"] table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

[data-layout-mode="desktop"] .sof-owner-dashboard__console .sof-tab-panel.is-active,
[data-layout-mode="tablet"] .sof-owner-dashboard__console .sof-tab-panel.is-active {
	max-width: 100%;
}

[data-layout-mode="desktop"] [data-sof-panel="impostazioni"] .sof-card-front form,
[data-layout-mode="desktop"] [data-sof-panel="prodotti"] .sof-card-front form {
	max-width: 720px;
}