.page-element-input {
    background-color: #fff;
    border: 2px solid var(--control-border);
    border-radius: var(--radius-control);
    height: 34px;
    padding: 0 10px;
    width: 300px;
    font-size: 13px;
}

/* Compact react-select — deterministic 34px-per-row height */
.page-element-select-wrapper {
    --page-element-select-rows: 1;
    --page-element-select-line-height: 34px;
    --page-element-select-control-height-base: calc(var(--page-element-select-line-height) * var(--page-element-select-rows));
    --page-element-select-control-height: var(--page-element-select-control-height-base);
    --page-element-select-chip-height: 22px;
    --page-element-select-chip-gap: 4px;
    --page-element-select-chip-bg: var(--background-color2);
    --page-element-select-chip-color: var(--blue);
    --page-element-select-vc-padding-x: 6px;
    --page-element-select-vc-padding-y: 4px;
    min-width: 0;
    width: 100%;
}

.page-element-select-wrapper[data-page-element-select-focused="true"] {
    --page-element-select-control-height: calc(
        var(--page-element-select-control-height-base) + var(--page-element-select-chip-height)
    );
}

.page-element-select-wrapper--measuring .page-element-select__control {
    height: auto !important;
    min-height: var(--page-element-select-line-height) !important;
    max-height: none !important;
}

.page-element-select-wrapper--measuring .page-element-select__value-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
}

.page-element-select {
    font-size: 13px;
    min-width: 0;
    width: 100%;
}

.page-element-select__control {
    min-height: var(--page-element-select-line-height) !important;
    height: var(--page-element-select-control-height) !important;
    max-height: var(--page-element-select-control-height) !important;
    background-color: #fff !important;
    border: 2px solid var(--control-border) !important;
    border-radius: var(--radius-control);
    box-shadow: none !important;
    align-items: stretch !important;
    cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box;
}

.page-element-select__control:hover {
    border-color: var(--control-border-hover) !important;
}

.page-element-select__control--is-focused {
    border-color: var(--control-border-hover) !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

/* react-select emotion hash classes (e.g. css-1mh9uxz-control) */
.page-element-select-wrapper [class$="-control"] {
    background-color: #fff !important;
    align-items: stretch !important;
}

.page-element-select-wrapper [class$="-multiValue"] {
    background-color: var(--page-element-select-chip-bg, var(--background-color2)) !important;
    color: var(--page-element-select-chip-color, var(--blue)) !important;
    border-radius: calc(var(--radius-control) - 1px) !important;
    height: var(--page-element-select-chip-height, 22px) !important;
    max-height: var(--page-element-select-chip-height, 22px) !important;
    margin: 0 !important;
}

.page-element-select-wrapper [class$="-multiValue"] [class$="-MultiValueLabel"] {
    color: var(--page-element-select-chip-color, var(--blue)) !important;
}

.page-element-select-wrapper [class$="-multiValue"] [class$="-MultiValueRemove"] {
    color: color-mix(in srgb, var(--page-element-select-chip-color, var(--blue)) 75%, transparent) !important;
}

.page-element-select-wrapper [class$="-multiValue"] [class$="-MultiValueRemove"]:hover {
    background-color: var(--hover-color2) !important;
    color: var(--page-element-select-chip-color, var(--blue)) !important;
}

.page-element-select-wrapper [class$="-IndicatorsContainer"] {
    align-self: stretch !important;
    height: 100% !important;
    align-items: stretch !important;
}

.page-element-select-wrapper [class$="-indicatorSeparator"] {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 1px !important;
    margin: 0 !important;
    background-color: var(--control-border) !important;
}

.page-element-select-wrapper [class$="-dropdownIndicator"],
.page-element-select-wrapper [class$="-clearIndicator"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

.page-element-select__value-container {
    padding: var(--page-element-select-vc-padding-y) var(--page-element-select-vc-padding-x) !important;
    height: 100% !important;
    max-height: 100% !important;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--page-element-select-chip-gap);
    overflow: hidden;
}

/* Single row: keep chips + caret vertically centered (flex-start pins the line to the top). */
.page-element-select-wrapper[data-page-element-select-rows="1"] .page-element-select__value-container {
    align-content: center;
}

.page-element-select-wrapper[data-page-element-select-focused="true"] .page-element-select__value-container {
    align-content: flex-start;
}

.page-element-select__indicators {
    align-self: stretch !important;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 100% !important;
    padding: 0 2px;
}

.page-element-select__indicator-separator {
    align-self: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    width: 1px;
    margin: 0;
    background-color: var(--control-border);
}

.page-element-select__dropdown-indicator,
.page-element-select__clear-indicator {
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    color: #888;
}

.page-element-select__dropdown-indicator svg,
.page-element-select__clear-indicator svg {
    width: 16px;
    height: 16px;
}

.page-element-select__placeholder,
.page-element-select__single-value {
    margin: 0;
    line-height: 1.2;
    font-size: 13px;
    text-align: left;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-element-select__multi-value {
    margin: 0;
    font-size: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: var(--page-element-select-chip-height);
    max-height: var(--page-element-select-chip-height);
    border-radius: calc(var(--radius-control) - 1px);
    box-sizing: border-box;
    background-color: var(--page-element-select-chip-bg, var(--background-color2));
    color: var(--page-element-select-chip-color, var(--blue));
}

.page-element-select__multi-value__label {
    padding: 2px 6px;
    line-height: 1.2;
    text-align: left;
    color: var(--page-element-select-chip-color, var(--blue));
}

.page-element-select__multi-value__remove {
    padding: 0 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: color-mix(in srgb, var(--page-element-select-chip-color, var(--blue)) 75%, transparent);
}

.page-element-select__multi-value__remove:hover {
    background-color: var(--hover-color2);
    color: var(--page-element-select-chip-color, var(--blue));
}

.page-element-select__input-container {
    margin: 0;
    padding: 0;
    flex: 1 1 40px;
    min-width: 24px;
    height: var(--page-element-select-chip-height);
    min-height: var(--page-element-select-chip-height);
    max-height: var(--page-element-select-chip-height);
    display: flex;
    align-items: center;
    align-self: center;
}

.page-element-select__input-container input,
.page-element-select__input {
    margin: 0 !important;
    padding: 0 !important;
    line-height: var(--page-element-select-chip-height) !important;
    height: var(--page-element-select-chip-height) !important;
    min-height: 0 !important;
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
}

.page-element-select__menu-list {
    text-align: center;
}

.page-element-select__option {
    text-align: center;
    justify-content: center;
}

.page-element-select-wrapper--compact-options .page-element-select__menu {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
}

.page-element-select-wrapper--compact-options .page-element-select__menu-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px;
    padding: 6px;
    max-height: none;
    text-align: left;
}

.page-element-select-wrapper--compact-options .page-element-select__option {
    display: inline-flex;
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    justify-content: flex-start;
    border-radius: calc(var(--radius-control) - 1px);
    padding: 4px 10px;
    min-height: 28px;
}

.page-element-select-wrapper--compact-options .page-element-select__option--is-focused {
    background-color: var(--hover-color2);
}

.page-element-select-wrapper--compact-options .page-element-select__option--is-selected {
    background-color: color-mix(in srgb, var(--blue) 12%, #fff);
    color: var(--blue);
}

/* Page header layout only — visual style uses default PageElementSelect rules above */
.page-settings-header .page-element-select-wrapper {
	flex: 1 1 auto;
	min-width: var(--page-header-control-min);
	width: 100%;
}

.page-settings-header .page-element-select {
	min-width: var(--page-header-control-min);
}

/* Defensive: legacy page-header span rules must not stretch react-select chips */
.page-settings-header .page-element-select span {
	line-height: normal;
}

/* ------------------------------------------------------------------ */
/* Setting controls — compact toggles & inputs in panels / sidebars     */
/* (not page-header SearchInput or PageElementSelect)                 */
/* ------------------------------------------------------------------ */

.setting-field__label,
.info-settings-field__label,
.dishes-settings-box .setting-group label,
.dishes-settings-box .spacing-title {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--blue);
	line-height: 1.3;
}

.dishes-settings-box .spacing-cell--label {
	font-size: 12px;
	font-weight: 500;
	color: var(--blue);
	line-height: 1.3;
}

.dishes-settings-box .spacing-title {
	font-weight: 600;
}

/*
 * Control text alignment standard
 * Rule A — clickable surfaces (chips, toggles): flex center, text centered in background
 * Rule B — single-line inputs: see input.input-modern / form-control / SearchInput (vertical via tokens)
 */
.setting-toggle,
.toggle-btn,
.toggle-button-group .toggle-segment,
.filters-group .filter,
.filters-group .oName,
.filters-group .dName {
	box-sizing: border-box;
	margin: 0;
	padding: var(--input-modern-control-padding);
	min-height: var(--control-height);
	border: none;
	border-radius: var(--input-modern-control-radius);
	background-color: transparent;
	font-family: inherit;
	font-size: var(--input-modern-control-font-size);
	font-weight: 400;
	line-height: var(--control-text-line-height);
	text-transform: uppercase;
	text-align: center;
	color: var(--blue);
	cursor: pointer;
	white-space: nowrap;
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: var(--hover-surface-transition), color 0.2s ease;
}

.setting-toggle:hover,
.toggle-btn:hover:not(:disabled),
.toggle-button-group .toggle-segment--unselected:hover:not(:disabled),
.filters-group .filter:hover,
.filters-group .oName:hover,
.filters-group .dName:hover {
	background-color: var(--hover-color2);
}

.setting-toggle.is-selected,
.setting-toggle.selected,
.toggle-btn.checked,
.toggle-button-group .toggle-segment--selected,
.filters-group .filter.selected,
.filters-group .oName.selected,
.filters-group .dName.selected {
	background-color: var(--hover-color2);
	color: var(--blue);
	font-weight: 600;
}

.setting-toggle.is-selected:hover,
.setting-toggle.selected:hover,
.toggle-btn.checked:hover:not(:disabled),
.toggle-button-group .toggle-segment--selected:hover:not(:disabled),
.filters-group .filter.selected:hover,
.filters-group .oName.selected:hover,
.filters-group .dName.selected:hover {
	background-color: var(--hover-color2);
}

/* Label + standard toggle-btn (Mostra utenti disattivati, Mostra shop chiusi) */
.page-header-labeled-toggle,
.access-rules-inactive-toggle {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	flex-shrink: 0;
	justify-content: flex-start;
}

.page-header-labeled-toggle .mense-toggle-field__label,
.access-rules-inactive-toggle .mense-toggle-field__label {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--blue);
	white-space: nowrap;
	text-align: left;
	line-height: 1.35;
}

.toggle-btn:disabled,
.toggle-button-group .toggle-segment:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.toggle-button-group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	max-width: 100%;
	border: none;
	background: transparent;
	overflow: visible;
	vertical-align: middle;
}

.selector-field {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.selector-field--top {
	flex-direction: column;
	align-items: flex-start;
}

.selector-field__label {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: var(--blue);
	line-height: 1.35;
}

.selector-field--small .selector-field__label {
	font-size: 12px;
}

.toggle-button-group[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.toggle-button-group .toggle-segment {
	flex: 0 0 auto;
	min-width: 0;
	box-shadow: none;
	outline: none;
}

.toggle-button-group--small .toggle-segment {
	min-height: 25px;
	padding: 2px 10px;
	font-size: 12px;
}

.toggle-button-group--normal .toggle-segment {
	min-height: 34px;
}

.toggle-button-group .toggle-segment:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent);
	outline-offset: 1px;
}

.input-modern,
select.input-modern,
textarea.input-modern,
.input-modern-textarea {
	box-sizing: border-box;
	margin: 0;
	padding: 4px 8px;
	border: 1px solid var(--input-modern-border);
	border-radius: var(--input-modern-control-radius);
	background-color: var(--input-modern-bg);
	background-image: none;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	font-family: inherit;
	font-size: var(--input-modern-control-font-size);
	font-weight: 400;
	line-height: 1;
	color: var(--blue);
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

/* Single-line fields — height + vertical text alignment (Rule B) */
input.input-modern,
select.input-modern {
	min-height: var(--control-height);
	max-height: var(--control-height);
	height: var(--control-height);
	padding-top: var(--control-text-padding-top);
	padding-right: var(--control-padding-x);
	padding-bottom: var(--control-text-padding-y);
	padding-left: var(--control-padding-x);
	line-height: var(--control-text-line-height);
	field-sizing: fixed;
}

input.input-modern--small,
select.input-modern--small {
	width: var(--input-modern-small-width);
	min-width: var(--input-modern-small-width);
	max-width: var(--input-modern-small-width);
	text-align: center;
}

input.input-modern--medium,
select.input-modern--medium {
	width: var(--input-modern-medium-width);
	min-width: var(--input-modern-tight-min-width);
	max-width: var(--input-modern-medium-width);
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

input.input-modern--large,
select.input-modern--large {
	width: 100%;
	min-width: var(--input-modern-tight-min-width);
	max-width: 100%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

textarea.input-modern--flexible,
textarea.input-modern.input-modern--flexible {
	width: 100%;
	min-width: var(--input-modern-tight-min-width);
	max-width: 100%;
	min-height: var(--input-modern-height);
	max-height: none;
	height: auto;
	text-align: left;
	padding: var(--input-modern-control-padding);
}

input.input-modern[type="number"]::-webkit-outer-spin-button,
input.input-modern[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input.input-modern[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

textarea.input-modern-textarea {
	min-height: 60px;
	max-height: none;
	height: auto;
	width: 100%;
	text-align: left;
	padding: var(--input-modern-control-padding);
}

.input-modern:focus,
select.input-modern:focus,
textarea.input-modern:focus,
.input-modern-textarea:focus {
	outline: none;
	border-color: var(--blue);
	background-color: var(--input-modern-bg);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(36, 56, 124, 0.25);
}

.input-modern:disabled,
select.input-modern:disabled,
textarea.input-modern:disabled,
.input-modern-textarea:disabled {
	cursor: not-allowed;
	opacity: 0.55;
	background-color: #eee;
}

select.input-modern {
	cursor: pointer;
}

.setting-toggle-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.setting-toggle-row__label {
	margin: 0;
	font-size: var(--input-modern-control-font-size, 14px);
	font-weight: 500;
	color: var(--blue);
}
.dishes-settings-box .setting-section h5,
.dishes-settings-box .toggle-text {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--blue);
	line-height: 1.3;
}

.dishes-settings-box .setting-section h5 {
	margin-bottom: 8px;
	text-align: center;
	font-weight: 600;
}

.dishes-settings-box .toggle-text {
	margin-left: 10px;
	user-select: none;
}

/* ------------------------------------------------------------------ */
/* Interactive hover standards                                        */
/*                                                                    */
/* hover-lift          — white cards: lift + border + shadow (+ media)  */
/* hover-zoom          — media thumbs: scale + shadow only              */
/* hover-surface-white — compact targets on white (--hover-color1)    */
/* hover-surface-section — targets on section gray (--hover-color2)   */
/* hover-none          — explicit opt-out                             */
/*                                                                    */
/* Extended (do not merge): border-only (controls), link/text hovers,   */
/* opacity-reveal overlays, icon emphasis, dark-theme, brand CTA fill.  */
/* ------------------------------------------------------------------ */

:root {
	--hover-lift-y: -2px;
	--hover-lift-border: rgba(0, 0, 0, 0.06);
	--hover-lift-border-hover: rgba(var(--blue-rgb), 0.22);
	--hover-lift-shadow: 0 6px 18px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(var(--blue-rgb), 0.1);
	--hover-lift-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	--hover-lift-media-scale: 1.04;
	--hover-lift-transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
	--hover-zoom-scale: 1.02;
	--hover-zoom-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	--hover-zoom-overlay-scale: 1.1;
	--hover-zoom-transition: transform 0.3s ease, box-shadow 0.3s ease;
	--hover-surface-transition: background-color 0.2s ease;
}

/* A — Lift + border (chooser cards, dashboard shortcuts, row tabs) */
.hover-lift {
	border: 1px solid var(--hover-lift-border);
	transition: var(--hover-lift-transition);
}

.hover-lift:hover,
.hover-lift:focus-visible {
	transform: translateY(var(--hover-lift-y));
	border-color: var(--hover-lift-border-hover);
	box-shadow: var(--hover-lift-shadow);
	background-color: #fff;
}

.hover-lift:active {
	transform: translateY(0);
	box-shadow: var(--hover-lift-active-shadow);
}

.hover-lift__media {
	transition: transform 0.22s ease;
}

.hover-lift:hover .hover-lift__media,
.hover-lift:focus-visible .hover-lift__media {
	transform: scale(var(--hover-lift-media-scale));
}

/* Centered media inside absolutely positioned logos (chooser) */
.hover-lift:hover .hover-lift__media--centered,
.hover-lift:focus-visible .hover-lift__media--centered {
	transform: translate(-50%, -50%) scale(var(--hover-lift-media-scale));
}

/* B — Zoom only (news thumbs, image-first click targets) */
.hover-zoom {
	transition: var(--hover-zoom-transition);
}

.hover-zoom:hover,
.hover-zoom:focus-visible {
	transform: scale(var(--hover-zoom-scale));
	box-shadow: var(--hover-zoom-shadow);
}

.hover-zoom__overlay {
	transition: var(--hover-zoom-transition);
}

.hover-zoom:hover .hover-zoom__overlay,
.hover-zoom:focus-visible .hover-zoom__overlay {
	transform: scale(var(--hover-zoom-overlay-scale));
}

/* C — Surface on white */
.hover-surface-white {
	transition: var(--hover-surface-transition);
}

.hover-surface-white:hover,
.hover-surface-white:focus-visible {
	background-color: var(--hover-color1);
}

/* D — Surface on section gray */
.hover-surface-section {
	transition: var(--hover-surface-transition);
}

.hover-surface-section:hover,
.hover-surface-section:focus-visible {
	background-color: var(--hover-color2);
}

/* Opt-out */
.hover-none,
.hover-none:hover,
.hover-none:focus-visible,
.hover-none:active {
	background-color: inherit !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
	transition: none !important;
}

/* Parent-triggered lift (NavLink / wrapper hovers child card) */
.hover-lift-parent {
	display: block;
	text-decoration: none;
	color: inherit;
}

.hover-lift-parent:hover .hover-lift,
.hover-lift-parent:focus-visible .hover-lift {
	transform: translateY(var(--hover-lift-y));
	border-color: var(--hover-lift-border-hover);
	box-shadow: var(--hover-lift-shadow);
	background-color: #fff !important;
}

.hover-lift-parent:active .hover-lift {
	transform: translateY(0);
	box-shadow: var(--hover-lift-active-shadow);
}

.hover-lift-parent:hover .hover-lift__media,
.hover-lift-parent:focus-visible .hover-lift__media {
	transform: scale(var(--hover-lift-media-scale));
}

.hover-lift-parent:hover .hover-lift__media--centered,
.hover-lift-parent:focus-visible .hover-lift__media--centered {
	transform: translate(-50%, -50%) scale(var(--hover-lift-media-scale));
}

/* Dashboard stats — informational only */
.dashboard-header-container .dashboard-square-items .custom-container.hover-none,
.dashboard-header-container .dashboard-square-items .custom-container.hover-none:hover,
.dashboard-header-container .dashboard-square-items .custom-container.hover-none:focus-visible,
.dashboard-header-container .dashboard-square-items .custom-container.hover-none:active {
	background-color: #fff !important;
}