/* ============================================================================
   Global7 — tema "global7" per MyStarPrint
   Caricato DOPO css/main.css: fa da skin scura sopra la grafica storica
   (bridge legacy) e definisce i componenti nuovi della shell (navbar, login).
   Tutti i valori passano dai token in tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Pagina: gradiente fisso, tipografia, reset del vecchio sfondo
   ------------------------------------------------------------------------- */
html
{
	min-height: 100%;
	background: var(--page-gradient);
	background-attachment: fixed;
}

body
{
	background: transparent;         /* annulla backint.png / bianco di main.css */
	background-image: none;
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 14px;
	overflow: hidden;                /* comportamento storico: scroll interni alle aree */
}

a
{
	color: var(--clr-secondary);
	text-decoration: none;
}

a:hover
{
	color: var(--clr-secondary-hover);
	text-decoration: underline;
}

h1, h2, h3
{
	color: var(--clr-text);
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   2. Navbar superiore (nuova shell, markup in templates/themes/global7/header.tpl)
   ------------------------------------------------------------------------- */
#g7Navbar
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	height: var(--nav-height);
	background: var(--clr-popup);
	border-bottom: 1px solid var(--clr-border);
}

.g7-nav-inner
{
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 0 24px;
}

.g7-brand
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}

.g7-brand:hover
{
	text-decoration: none;
}

/* Logo ufficiale STAR7 in SVG (img/star7-logo-white.svg): lettering bianco + "7" rosso
   istituzionale, gia' pronto per il fondo scuro (nessun filtro CSS necessario) */
.g7-logo
{
	width: auto;
	height: 30px;
}

.g7-brand .g7-logo
{
	height: 30px;
	width: auto;
}

.g7-brand-name
{
	color: var(--clr-text);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.g7-menu
{
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.g7-menu::-webkit-scrollbar
{
	display: none;
}

.g7-navlink
{
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	color: var(--clr-text-muted);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 150ms, color 150ms;
}

.g7-navlink:hover
{
	background: var(--clr-accent);
	color: var(--clr-accent-fg);
	text-decoration: none;
}

.g7-navlink.is-active
{
	background: var(--clr-nav-active);
	color: var(--clr-text);
}

.g7-navlink:focus-visible,
.g7-btn:focus-visible,
.g7-brand:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

.g7-nav-actions
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.g7-nav-actions form
{
	margin: 0;
}

/* ---------------------------------------------------------------------------
   3. Bottoni (nuovi .g7-btn + bridge del vecchio .button arancione)
   ------------------------------------------------------------------------- */
.g7-btn,
input.g7-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: var(--clr-secondary);
	color: var(--clr-secondary-fg);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 150ms;
}

.g7-btn:hover,
input.g7-btn:hover
{
	background: var(--clr-secondary-hover);
	color: var(--clr-secondary-fg);
	text-decoration: none;
}

.g7-btn-outline,
input.g7-btn-outline
{
	background: transparent;
	border-color: var(--clr-border);
	color: var(--clr-text);
}

.g7-btn-outline:hover,
input.g7-btn-outline:hover
{
	background: var(--clr-accent);
	color: var(--clr-accent-fg);
}

.g7-btn-block
{
	width: 100%;
}

/* Bridge: il vecchio bottone arancione diventa l'azione indaco del design system */
.button
{
	background-color: var(--clr-secondary);
	border-radius: var(--radius-md);
	padding: 6px 12px;
	transition: background-color 150ms;
}

.button:hover
{
	background-color: var(--clr-secondary-hover);
}

.button > input
{
	color: var(--clr-secondary-fg);
	font-family: var(--font-sans);
	font-weight: 600;
}

/* Submit/button "nudi" usati nelle pagine legacy */
#container input[type="submit"],
#container input[type="button"],
#container button,
#container a.g7-btn-reset
{
	background: var(--clr-secondary);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--clr-secondary-fg);
	font-family: var(--font-sans);
	font-weight: 600;
	padding: 5px 12px;
	cursor: pointer;
	transition: background-color 150ms;
}

#container input[type="submit"]:hover,
#container input[type="button"]:hover,
#container button:hover
{
	background: var(--clr-secondary-hover);
}

/* dentro .button il submit resta trasparente (lo sfondo lo dà .button) */
#container .button > input[type="submit"]
{
	background: transparent;
	border: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   4. Container principale (bridge di #container di main.css)
   ------------------------------------------------------------------------- */
#container
{
	position: relative;
	width: auto;
	max-width: none;
	margin: calc(var(--nav-height) + 20px) 24px 24px;
	left: auto;
	top: 0;
	box-sizing: border-box;
	height: calc(100vh - var(--nav-height) - 40px);
	background-color: transparent;
	background-image: none;
	background: var(--clr-card);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	color: var(--clr-text);
	overflow: auto;
}

#footer
{
	color: var(--clr-text-muted);
}

/* ---------------------------------------------------------------------------
   5. Form (bridge input/select/textarea legacy)
   ------------------------------------------------------------------------- */
#container input[type="text"],
#container input[type="password"],
#container input[type="date"],
#container input[type="number"],
#container input[type="file"],
#container textarea,
#container select
{
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-md);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 13px;
	padding: 5px 8px;
}

#container input:focus-visible,
#container textarea:focus-visible,
#container select:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.35);
}

#container select option
{
	background: var(--clr-popup);
	color: var(--clr-text);
}

#container label
{
	color: var(--clr-text);
}

/* ---------------------------------------------------------------------------
   6. Tabelle (bridge)
   ------------------------------------------------------------------------- */
#container table
{
	color: var(--clr-text);
	border-color: var(--clr-border);
}

#container th,
#container td
{
	border-color: var(--clr-border);
}

#container th
{
	color: var(--clr-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

#container tbody tr:hover
{
	background: var(--clr-muted);
}

/* Gli header sticky storici <thead style="background:white;"> diventano superficie solida */
#container thead[style*="background:white"]
{
	background: var(--clr-popup) !important;
	color: var(--clr-text) !important;
}

#container thead[style*="background:white"] th,
#container thead[style*="background:white"] td
{
	color: var(--clr-text) !important;
}

/* Link nelle celle: leggibili sul fondo scuro */
#container td a,
#container th a
{
	color: var(--clr-secondary);
}

#container td a:hover,
#container th a:hover
{
	color: var(--clr-secondary-hover);
}

/* ---------------------------------------------------------------------------
   7. Login (markup in templates/themes/global7/login.tpl)
   Layout split a due colonne: form a sinistra, presentazione a destra.
   ------------------------------------------------------------------------- */
.g7-login-split
{
	display: flex;
	height: 100vh;
	width: 100%;
}

.g7-login-form
{
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.g7-login-info
{
	flex: 1 1 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 72px;
	background: hsl(216 74% 7% / 0.75);
	border-right: 1px solid var(--clr-border);
}

.g7-chip
{
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 4px 14px;
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	background: var(--clr-muted);
	color: var(--clr-text-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.g7-login-headline
{
	margin: 0 0 16px;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--clr-text);
	max-width: 520px;
}

.g7-login-desc
{
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--clr-text-muted);
	max-width: 460px;
}

.g7-login-footer
{
	position: absolute;
	left: 72px;
	bottom: 40px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--clr-text-muted);
	font-size: 13px;
}

.g7-login-footer .g7-logo
{
	height: 20px;
}

@media (max-width: 900px)
{
	.g7-login-info
	{
		display: none;
	}
}

.g7-login-wrap
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 480px;
}

/* L'id vince sulla classe: neutralizza esplicitamente il vecchio #loginForm
   rosso di main.css (background #a80532, absolute, 400x150) */
#container #loginForm.g7-login-card,
.g7-login-card
{
	position: static !important;
	width: 380px;
	max-width: 90%;
	height: auto !important;
	padding: 40px 36px !important;
	background: var(--clr-popover) !important;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	box-shadow: 0 24px 64px hsl(216 74% 4% / 0.5);
	color: var(--clr-text) !important;
	text-align: center;
}

.g7-login-logo
{
	height: 34px;
	margin-bottom: 20px;
}

.g7-login-title
{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	color: var(--clr-text);
}

.g7-login-sub
{
	margin: 0 0 24px;
	font-size: 13px;
	color: var(--clr-text-muted);
}

.g7-field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
	text-align: left;
}

.g7-field label
{
	font-size: 13px;
	font-weight: 500;
	color: var(--clr-text);
}

.g7-field input
{
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-md);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 14px;
	padding: 9px 12px;
	width: 100%;
	box-sizing: border-box;
}

.g7-field input:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.35);
}

.g7-login-card .g7-btn
{
	height: 40px;
	width: 100%;
	margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   8. Home / hero (markup in templates/themes/global7/index.tpl)
   ------------------------------------------------------------------------- */
.g7-hero
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 300px;
	text-align: center;
	padding: 24px;
	box-sizing: border-box;
}

.g7-hero-logo
{
	height: 56px;
	margin-bottom: 28px;
}

.g7-hero-title
{
	margin: 0 0 10px;
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--clr-text);
}

.g7-hero-sub
{
	margin: 0;
	font-size: 18px;
	color: var(--clr-text-muted);
}

/* ---------------------------------------------------------------------------
   9. Widget di terze parti su fondo scuro (jQuery UI, multi-select, dropzone)
   ------------------------------------------------------------------------- */
.ui-widget-content,
.ui-datepicker,
.ui-dialog
{
	background: var(--clr-popup);
	border: 1px solid var(--clr-border);
	color: var(--clr-text);
}

.ui-widget-header
{
	background: var(--clr-accent);
	border: 1px solid var(--clr-border);
	color: var(--clr-text);
}

.ui-state-default,
.ui-widget-content .ui-state-default
{
	background: var(--clr-muted);
	border: 1px solid var(--clr-border);
	color: var(--clr-text);
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-active,
.ui-widget-content .ui-state-active
{
	background: var(--clr-secondary);
	border: 1px solid var(--clr-secondary);
	color: var(--clr-secondary-fg);
}

/* ---------------------------------------------------------------------------
   9.1 Calendario (jQuery UI datepicker)
   Il widget era illeggibile per due motivi strutturali, non di gusto: le frecce
   avanti/indietro sono sprite di icone SCURE (img/ui-icons_222222) su fondo
   scuro, quindi invisibili, e le celle usano le texture chiare di jQuery UI
   (ui-bg_glass_*_ffffff). Qui si spengono le immagini e si ridisegna la griglia
   con i token del tema; le frecce diventano due chevron di testo.
   Il formato della data resta dd-mm-yyyy: ShowOrdiniCorrenti lo legge con
   substr, cambiarlo romperebbe la ricerca.
   ------------------------------------------------------------------------- */
/* I due campi data della barra filtri hanno width:70px inline: "10-08-2026" non
   ci sta. L'inline si batte solo con !important, come fa il resto del bridge. */
#cercaForm #dpFrom,
#cercaForm #dpTo
{
	width: 104px !important;
	cursor: pointer;
}

.ui-datepicker
{
	width: 260px;
	padding: 10px;
	border-radius: var(--radius);
	box-shadow: 0 16px 40px hsl(216 74% 4% / 0.55);
	font-family: var(--font-sans);
	font-size: 13px;
}

.ui-datepicker,
.ui-datepicker .ui-widget-header,
.ui-datepicker .ui-state-default,
.ui-datepicker td .ui-state-default
{
	background-image: none;
}

.ui-datepicker .ui-datepicker-header
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 0 8px;
	background: transparent;
	border: 0;
}

.ui-datepicker .ui-datepicker-title
{
	order: 2;
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	font-weight: 600;
	color: var(--clr-text);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next
{
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	top: auto;
	left: auto;
	right: auto;
	background: var(--clr-muted);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev { order: 1; }
.ui-datepicker .ui-datepicker-next { order: 3; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover
{
	background: var(--clr-secondary);
	border-color: var(--clr-secondary);
}

/* Via lo sprite invisibile, dentro un chevron che si vede. */
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon
{
	display: none;
}

.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after
{
	color: var(--clr-text);
	font-size: 18px;
	line-height: 1;
}

.ui-datepicker .ui-datepicker-prev::after { content: "\2039"; }
.ui-datepicker .ui-datepicker-next::after { content: "\203A"; }

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover
{
	top: auto;
	left: auto;
	right: auto;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year
{
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-sm);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 13px;
	padding: 3px 4px;
}

.ui-datepicker table
{
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 2px;
	font-size: 13px;
}

.ui-datepicker th
{
	padding: 6px 0;
	border: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--clr-text-muted);
}

.ui-datepicker td
{
	padding: 0;
	border: 0;
}

.ui-datepicker td span,
.ui-datepicker td a
{
	display: block;
	padding: 7px 0;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	text-align: center;
	text-decoration: none;
	color: var(--clr-text);
}

.ui-datepicker td a:hover
{
	background: var(--clr-accent);
	border-color: var(--clr-border);
}

/* Oggi: si riconosce dal bordo, non dal colore soltanto. */
.ui-datepicker td.ui-datepicker-today a
{
	border-color: var(--clr-secondary);
	font-weight: 700;
}

.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td a.ui-state-active
{
	background: var(--clr-secondary);
	border-color: var(--clr-secondary);
	color: var(--clr-secondary-fg);
	font-weight: 700;
}

.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-datepicker-other-month span
{
	color: var(--clr-text-muted);
	opacity: 0.45;
}

.ui-datepicker .ui-datepicker-buttonpane
{
	margin: 8px 0 0;
	padding: 8px 0 0;
	border-top: 1px solid var(--clr-border);
}

.ui-datepicker .ui-datepicker-buttonpane button
{
	background: var(--clr-muted);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 12px;
	padding: 4px 10px;
	cursor: pointer;
}

.ms-container .ms-selectable,
.ms-container .ms-selection
{
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	color: var(--clr-text);
}

.ms-container .ms-list
{
	background: transparent;
	border: 1px solid var(--clr-input-border);
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection
{
	color: var(--clr-text);
	border-bottom: 1px solid var(--clr-border);
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover
{
	background: var(--clr-secondary);
	color: var(--clr-secondary-fg);
}

.dropzone
{
	background: var(--clr-muted) !important;
	border: 1px dashed var(--clr-input-border) !important;
	border-radius: var(--radius) !important;
	color: var(--clr-text-muted) !important;
}

/* ---------------------------------------------------------------------------
   9b. Overlay di caricamento pagina (markup in header.tpl, JS nel tema)
   ------------------------------------------------------------------------- */
.g7-loading-overlay
{
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
}

.g7-loading-overlay.is-visible
{
	display: flex;
}

.g7-spinner
{
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 4px solid hsl(240 62% 60% / 0.25);
	border-top-color: var(--clr-secondary);
	animation: g7-spin 0.8s linear infinite;
}

@keyframes g7-spin
{
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce)
{
	.g7-spinner
	{
		animation-duration: 2s;
	}
}

/* ---------------------------------------------------------------------------
   10. Scrollbar scure per le aree con scroll interno
   ------------------------------------------------------------------------- */
#container ::-webkit-scrollbar,
#container::-webkit-scrollbar
{
	width: 10px;
	height: 10px;
}

#container ::-webkit-scrollbar-thumb,
#container::-webkit-scrollbar-thumb
{
	background: hsl(0 0% 100% / 0.15);
	border-radius: 999px;
}

#container ::-webkit-scrollbar-track,
#container::-webkit-scrollbar-track
{
	background: transparent;
}

/* ---------------------------------------------------------------------------
   11. Fix bottoni-link legacy (<a class="button">testo</a>): testo visibile
   ------------------------------------------------------------------------- */
a.button,
a.button:hover
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--clr-secondary-fg);
	text-decoration: none;
	padding: 6px 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   12. Layout di pagina per i template rifatti nel tema
   ------------------------------------------------------------------------- */
.g7-page
{
	padding: 24px 32px;
}

.g7-page-title
{
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.g7-toolbar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.g7-page-lede
{
	margin: 6px 0 0;
	max-width: 560px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--clr-text-muted);
}

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

/* Icone lucide inline */
.g7-icon
{
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.g7-icon-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md);
	color: var(--clr-text-muted);
	transition: background-color 150ms, color 150ms;
}

.g7-icon-btn:hover
{
	background: var(--clr-accent);
	color: var(--clr-accent-fg);
	text-decoration: none;
}

.g7-icon-btn:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

/* ---------------------------------------------------------------------------
   13. Tabella dati (skill §5.1)
   ------------------------------------------------------------------------- */
.g7-table-wrap
{
	overflow: auto;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: hsl(216 74% 10% / 0.35);
}

.g7-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.g7-table th
{
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 12px 16px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--clr-text-muted);
	background: var(--clr-popup);
	border-bottom: 1px solid var(--clr-border);
	white-space: nowrap;
}

.g7-table td
{
	padding: 12px 16px;
	border-bottom: 1px solid var(--clr-border);
	color: var(--clr-text);
}

.g7-table tbody tr
{
	transition: background-color 120ms;
}

.g7-table tbody tr:hover
{
	background: hsl(238 44% 27% / 0.5);
}

.g7-table .is-num
{
	text-align: right;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.g7-td-actions,
.g7-th-actions
{
	text-align: right;
	width: 1%;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Tabella che deve stare tutta nello schermo (ordini correnti)
   Con una ventina di colonne lo scroll orizzontale rende impraticabile la
   selezione delle checkbox, che stanno in fondo a destra. Layout fisso, celle
   compatte e testo che va a capo: niente esce dallo schermo.
   ------------------------------------------------------------------------- */
.g7-table-fit
{
	table-layout: fixed;
	width: 100%;
}

.g7-table-fit th,
.g7-table-fit td
{
	padding: 8px 6px;
	font-size: 12px;
	/* anywhere e non break-word: i part number e i nomi file non hanno spazi
	   dove andare a capo, e senza questo allargherebbero la colonna. */
	overflow-wrap: anywhere;
}

.g7-table-fit th
{
	padding: 10px 6px;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.g7-table-fit .is-num
{
	width: 54px;
}

.g7-table-fit .g7-th-actions,
.g7-table-fit .g7-td-actions
{
	width: 34px;
	padding-left: 2px;
	padding-right: 2px;
	text-align: center;
}

.g7-table-wrap-fit
{
	overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   Filtri per colonna (widget "filter" di tablesorter, gia' nel bundle)
   ------------------------------------------------------------------------- */
.tablesorter-filter-row td
{
	padding: 6px 4px;
	background: var(--clr-popup);
	border-bottom: 1px solid var(--clr-border);
}

.tablesorter-filter-row input.tablesorter-filter
{
	width: 100%;
	height: 28px;
	padding: 4px 6px;
	box-sizing: border-box;
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-sm);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 12px;
}

.tablesorter-filter-row input.tablesorter-filter::placeholder
{
	color: var(--clr-text-muted);
	opacity: 0.7;
}

.tablesorter-filter-row input.tablesorter-filter:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 2px hsl(240 62% 60% / 0.35);
}

/* Colonne dichiarate filter-false: la casella esiste ma non si usa. */
.tablesorter-filter-row input.tablesorter-filter.disabled
{
	display: none;
}

/* Righe escluse dal filtro. Serve una regola nostra: il tema di tablesorter
   non e' caricato, quindi senza questa le righe "nascoste" resterebbero visibili. */
.g7-table tr.filtered
{
	display: none;
}

/* Gli header sticky sono un CLONE della thead fatto da tablesorter, e il clone non
   porta con se' i gestori di evento: la sua riga dei filtri sarebbe una copia inerte.
   Meglio non mostrarla: nel clone restano i soli titoli di colonna. */
.containsStickyHeaders .tablesorter-filter-row
{
	display: none;
}

/* ---------------------------------------------------------------------------
   Filtro di colonna a caselle di spunta (js/g7-colfilter.js)
   Compare solo dove i valori distinti sono pochi; sopra la soglia resta la
   casella di testo. NEW_ADDITIONS: la skill non ha un componente equivalente
   (e' un misto fra DropdownMenu e gruppo di checkbox).
   ------------------------------------------------------------------------- */
.g7-colfilter
{
	position: relative;
}

/* La casella di testo del widget resta nel DOM come contenitore del valore. */
input.tablesorter-filter.g7-colfilter-hidden
{
	display: none;
}

.g7-colfilter-toggle
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	width: 100%;
	height: 28px;
	padding: 0 6px;
	box-sizing: border-box;
	background: var(--clr-input-bg);
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-sm);
	color: var(--clr-text);
	font-family: var(--font-sans);
	font-size: 12px;
	cursor: pointer;
	text-align: left;
}

.g7-colfilter-toggle:hover
{
	border-color: var(--clr-ring);
}

.g7-colfilter-toggle:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 2px hsl(240 62% 60% / 0.35);
}

/* Filtro attivo: si vede dal bordo e dal testo, non dal solo colore. */
.g7-colfilter.is-attivo .g7-colfilter-toggle
{
	border-color: var(--clr-secondary);
	color: var(--clr-secondary);
	font-weight: 600;
}

.g7-colfilter-stato
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.g7-colfilter-caret
{
	flex: 0 0 auto;
	font-size: 10px;
	color: var(--clr-text-muted);
}

/* Pannello: superficie SOLIDA, galleggia sopra la tabella. */
.g7-colfilter-panel
{
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	min-width: 190px;
	max-width: 280px;
	padding: 8px;
	background: var(--clr-popup);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	box-shadow: 0 16px 40px hsl(216 74% 4% / 0.55);
	text-align: left;
}

.g7-colfilter-panel[hidden]
{
	display: none;
}

.g7-colfilter-list
{
	max-height: 260px;
	margin: 6px 0 0;
	padding: 6px 0 0;
	overflow-y: auto;
	list-style: none;
	border-top: 1px solid var(--clr-border);
}

.g7-colfilter-item
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: var(--radius-sm);
	color: var(--clr-text);
	font-size: 12px;
	font-weight: 400;
	cursor: pointer;
}

.g7-colfilter-item:hover
{
	background: var(--clr-accent);
}

.g7-colfilter-master
{
	font-weight: 600;
}

.g7-colfilter-label
{
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.g7-colfilter-count
{
	flex: 0 0 auto;
	color: var(--clr-text-muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* Sulle colonne strette il pannello sfonderebbe a destra: si ancora a destra. */
.g7-table-fit .is-num .g7-colfilter-panel,
.g7-filtri-colonna td:nth-last-child(-n+6) .g7-colfilter-panel
{
	left: auto;
	right: 0;
}

/* Empty state (skill §8.4): mai una tabella con soli header */
.g7-empty
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 48px 24px;
	text-align: center;
	color: var(--clr-text-muted);
	font-size: 14px;
}

.g7-empty .g7-icon
{
	width: 24px;
	height: 24px;
}

/* ---------------------------------------------------------------------------
   14. Paginazione (skill §6.4) — markup in templates/themes/global7/pagination.tpl
   ------------------------------------------------------------------------- */
.g7-pagination
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 2px;
	font-size: 14px;
}

.g7-pagination-info
{
	color: var(--clr-text-muted);
}

.g7-pagination-size
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--clr-text-muted);
}

.g7-pagination-pages
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.g7-page-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: var(--radius-md);
	color: var(--clr-text);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 150ms;
}

.g7-page-btn:hover
{
	background: var(--clr-accent);
	color: var(--clr-accent-fg);
	text-decoration: none;
}

.g7-page-btn.is-active
{
	background: var(--clr-secondary);
	color: var(--clr-secondary-fg);
}

.g7-page-btn:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

/* ---------------------------------------------------------------------------
   15. Form a card (skill §2 + §3.2) per i template rifatti
   ------------------------------------------------------------------------- */
.g7-stack
{
	max-width: 680px;
	margin: 24px auto;
	padding: 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.g7-section-card
{
	background: var(--clr-card);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	padding: 24px;
}

.g7-section-card h2
{
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
}

.g7-form-row
{
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.g7-form-row .g7-field
{
	flex: 1 1 auto;
	margin-bottom: 0;
}

/* Controlli e bottone della riga condividono la stessa altezza in box-sizing
   border-box: il .g7-btn base e' content-box, quindi va dichiarato qui, altrimenti
   i due bordi inferiori non coincidono nonostante l'align-items: flex-end. */
.g7-form-row .g7-field input[type="file"],
.g7-form-row .g7-field input[type="text"],
.g7-form-row .g7-field input[type="date"],
.g7-form-row .g7-field input[type="number"],
.g7-form-row .g7-field select
{
	height: 40px;
	box-sizing: border-box;
}

/* Il bottone nativo del file input non sta nei 20px lasciati dal padding
   verticale: si toglie e il contenuto resta centrato dal browser. */
.g7-form-row .g7-field input[type="file"]
{
	padding: 0 12px;
}

.g7-form-row .g7-btn,
.g7-form-row input.g7-btn
{
	flex-shrink: 0;
	height: 40px;
	box-sizing: border-box;
}

/* Nota descrittiva di una .g7-form-row: va messa dopo la riga, non dentro il
   .g7-field, altrimenti l'allineamento flex-end sposta il bottone piu' in basso
   dell'input. */
.g7-form-row-hint
{
	display: block;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--clr-text-muted);
}

/* Griglia di campi affiancati che va a capo da sola */
.g7-form-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	align-items: end;
}

.g7-form-grid .g7-field
{
	margin-bottom: 0;
}

.g7-form-grid select,
.g7-form-grid input
{
	width: 100%;
	box-sizing: border-box;
}

/* Riga azioni del form: bottone a destra (skill §1.5) */
.g7-actions
{
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* Descrizione dentro le card */
.g7-card-desc
{
	margin: -8px 0 16px;
	font-size: 13px;
	color: var(--clr-text-muted);
}

.g7-form-actions
{
	justify-content: flex-end;
	margin-top: 4px;
}

.g7-plants-toolbar
{
	align-items: flex-start;
	flex-wrap: wrap;
}

@media (max-width: 720px)
{
	#container
	{
		margin: calc(var(--nav-height) + 12px) 12px 12px;
		top: 0;
		height: calc(100vh - var(--nav-height) - 24px);
	}

	.g7-form-actions
	{
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.g7-form-actions .g7-btn,
	.g7-form-actions input.g7-btn,
	.g7-plants-toolbar .g7-btn
	{
		width: 100%;
	}

	.g7-page-lede
	{
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   16. Bridge: griglie legacy con bordi inline #CCCCCC → righe moderne
   (vale per le pagine non ancora rifatte nel tema)
   ------------------------------------------------------------------------- */
#container td[style*="#CCCCCC"],
#container th[style*="#CCCCCC"]
{
	border: 0 !important;
	border-bottom: 1px solid var(--clr-border) !important;
	padding: 10px 14px;
}

/* ---------------------------------------------------------------------------
   17. Tabelle dati legacy: sempre full-width dentro i wrapper scrollabili,
   senza gli offset negativi che compensavano il vecchio layout assoluto
   ------------------------------------------------------------------------- */
#container div[class*="wrapper"]
{
	top: 0 !important;
}

/* Altezza piena e uniforme per i wrapper delle tabelle rifatte (annulla le
   altezze fisse storiche 290/400/520px di .wrapper/.wrapper2..6) */
#container div[class*="wrapper"].g7-table-wrap
{
	height: calc(100vh - var(--nav-height) - 330px) !important;
	min-height: 300px;
}

#container div[class*="wrapper"] > table
{
	width: 100% !important;
	margin: 0 !important;
}

/* Header sticky legacy: superficie solida anche senza inline background:white */
#container div[class*="wrapper"] > table > thead th
{
	background: var(--clr-popup);
	position: sticky;
	top: 0;
	z-index: 1;
}

/* La barra sotto-tabella hackerata (paginazione a margin-left:-450px) torna in flusso */
#container div[style*="margin-left:-450px"]
{
	position: static !important;
	width: auto !important;
	margin: 0 !important;
}

/* Totali (left:1050px;top:-96px) → riga normale allineata a destra */
#container div[style*="left:1050px"]
{
	position: static !important;
	text-align: right;
	margin: 4px 0 8px;
	color: var(--clr-text-muted);
}

/* ---------------------------------------------------------------------------
   18. Hover righe legacy: gli onmouseover inline (#DDD, testo illeggibile)
   vengono sovrascritti dal hover del design system (CSS !important vince
   sugli style inline impostati da JS)
   ------------------------------------------------------------------------- */
#container tr[onmouseover]
{
	background: transparent !important;
	transition: background-color 120ms;
}

#container tr[onmouseover]:hover
{
	background: hsl(238 44% 27% / 0.5) !important;
}

/* ---------------------------------------------------------------------------
   19. Barra filtri (#cercaForm): da tabella con offset assoluti a barra
   flessibile fluida (skill: FilterBar). Le celle diventano item flex.
   ------------------------------------------------------------------------- */
#container #cercaForm,
#container .g7-filterbar
{
	position: static !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	width: auto !important;
	height: auto !important;
	left: auto !important;
	top: auto !important;
	margin: 0 0 14px !important;
	padding: 12px 16px !important;
	background: hsl(216 74% 10% / 0.35);
	border: 1px solid var(--clr-border) !important;
	border-radius: var(--radius);
}

#cercaForm table,
#cercaForm tbody,
#cercaForm tr,
.g7-filterbar table,
.g7-filterbar tbody,
.g7-filterbar tr
{
	display: contents;
}

#cercaForm td,
.g7-filterbar td
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
	color: var(--clr-text-muted);
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
   20. Stati e dettagli per le tabelle rifatte
   ------------------------------------------------------------------------- */
/* Righe "non stampate" (era color:blue inline, illeggibile sul tema scuro) */
.g7-table tr.g7-row-unprinted td
{
	color: hsl(210 100% 72%);
}

/* Icona della pagina di errore */
.g7-error-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 999px;
	background: hsl(358 74% 59% / 0.15);
	color: var(--clr-danger);
}

.g7-error-icon .g7-icon
{
	width: 22px;
	height: 22px;
}

/* Icone di stato non cliccabili.
   Il :not esclude la variante a pillola: warning/success fanno da colore anche su
   .g7-status-pill, che ha una forma propria e non deve diventare un quadrato di
   32px con il testo fuori (era il caso delle pillole d'esito del resoconto). */
.g7-status-warning:not(.g7-status-pill),
.g7-status-success:not(.g7-status-pill)
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.g7-status-warning
{
	color: var(--clr-warning);
}

.g7-status-success
{
	color: var(--clr-success);
}

/* Icon button per azioni distruttive */
.g7-icon-btn-danger
{
	color: var(--clr-danger);
}

.g7-icon-btn-danger:hover
{
	background: hsl(358 74% 59% / 0.15);
	color: var(--clr-danger);
}

/* Bottone azione distruttiva */
.g7-btn-danger,
input.g7-btn-danger
{
	background: transparent;
	border-color: hsl(358 74% 59% / 0.4);
	color: var(--clr-danger);
}

.g7-btn-danger:hover,
input.g7-btn-danger:hover
{
	background: hsl(358 74% 59% / 0.15);
	color: var(--clr-danger);
}

/* Bottone distruttivo pieno, per le azioni di massa (Svuota Ord. Ass.).
   NEW_ADDITIONS: variante "destructive" piena. Il rosso qe-low e' scurito al 80%
   perche' con il testo chiaro il colore puro resta sotto il contrasto 4.5:1. */
.g7-btn-danger-solid,
input.g7-btn-danger-solid
{
	gap: 8px;
	background: color-mix(in srgb, var(--clr-danger) 80%, black);
	border-color: transparent;
	color: var(--clr-text);
}

.g7-btn-danger-solid:hover,
input.g7-btn-danger-solid:hover
{
	background: color-mix(in srgb, var(--clr-danger) 68%, black);
	color: var(--clr-text);
}

.g7-btn-danger-solid:disabled,
input.g7-btn-danger-solid:disabled
{
	opacity: 0.5;
	cursor: not-allowed;
}

.g7-btn-danger-solid .g7-icon
{
	width: 16px;
	height: 16px;
}

/* Barra delle azioni distruttive sotto la tabella: in fondo, a destra, staccata
   dalla paginazione. */
.g7-danger-bar
{
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--clr-border);
}

/* Bottone Reset della barra filtri.
   Condivide il blocco di regole del GO qui sopra (stesso padding, stesso font,
   stesso raggio): qui si cambia solo il colore, cosi' i due bottoni non possono
   divergere di dimensione quando si tocca l'uno o l'altro. */
#container a.g7-btn-reset
{
	display: inline-block;
	line-height: normal;
	text-decoration: none;
	background: var(--clr-danger);
	color: hsl(216 74% 12%);
}

#container a.g7-btn-reset:hover
{
	background: hsl(358 74% 53%);
	color: hsl(216 74% 12%);
}

/* Intestazioni di colonna ordinabili lato server.
   Il link deve leggersi come l'intestazione che sostituisce, non come un link: eredita
   colore e peso dal th e non si sottolinea. La freccia e' un indicatore, quindi resta
   fuori dal flusso del testo (aria-hidden) e lo stato vero lo porta aria-sort sul th. */
.g7-sort
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.g7-sort:hover
{
	color: var(--clr-text);
}

.g7-sort-ind::after
{
	content: "";
	opacity: 0.35;
}

.g7-sort.is-active
{
	color: var(--clr-secondary);
}

/* La freccia compare solo sulla colonna attiva: il verso lo detta aria-sort sul th,
   cosi' l'indicatore visivo e quello assistivo non possono raccontare cose diverse. */
[aria-sort="ascending"] .g7-sort-ind::after
{
	content: "\2191";
	opacity: 1;
}

[aria-sort="descending"] .g7-sort-ind::after
{
	content: "\2193";
	opacity: 1;
}

/* Riga dei filtri per colonna, sotto le intestazioni.
   Sostituisce le caselle che generava tablesorter: stessa posizione e stesso ruolo,
   ma sono campi veri che ricaricano la pagina e filtrano sul database. */
/* Sfondo SOLIDO, come le intestazioni: la riga finisce anche nel clone sticky di
   tablesorter, e con uno sfondo traslucido le righe che scorrono sotto si vedevano
   attraverso le caselle dei filtri. */
.g7-filtri-colonna td
{
	padding: 4px 6px;
	background: var(--clr-popup);
	border-bottom: 1px solid var(--clr-border);
}

.g7-filtri-colonna input[type="text"]
{
	/* Niente min-width: su una colonna stretta faceva sfondare la casella sopra
	   quella accanto. Con box-sizing la casella sta sempre dentro la sua colonna. */
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: 2px 4px;
	font-size: 11px;
}

/* Il bottone sta nell'ultima colonna, stretta: qui il testo va tenuto corto e il
   bottone non deve allargare la colonna delle azioni. */
.g7-btn-filtro
{
	padding: 3px 8px !important;
	font-size: 12px !important;
	white-space: nowrap;
}

/* Barra azioni della tendina.
   Applicare ora vuol dire ricaricare la pagina, quindi la spunta non applica piu' da
   sola: serve un bottone esplicito, uno per colonna. */
.g7-colfilter-azioni
{
	display: flex;
	justify-content: flex-end;
	padding: 8px;
	border-top: 1px solid var(--clr-border);
}

.g7-colfilter-applica
{
	padding: 4px 12px !important;
	font-size: 12px !important;
}

/* Barra di applicazione dei filtri di colonna.
   Il bottone stava nell'ultima cella della riga filtri, che e' stretta e lo tagliava:
   qui sopra la tabella si vede sempre e non comprime nessuna colonna. */
.g7-filtri-barra
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}

.g7-filtri-nota
{
	color: var(--clr-text-muted);
	font-size: 12px;
}

/* Badge conteggio accanto al titolo */
.g7-count
{
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: hsl(240 62% 60% / 0.2);
	color: var(--clr-secondary-fg);
	font-size: 13px;
	font-weight: 600;
	vertical-align: middle;
}

/* Barra sotto-tabella: totali */
.g7-table-footbar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 2px 0;
}

/* Bottone compatto per le azioni di servizio accanto ai totali. */
.g7-btn-sm,
input.g7-btn-sm
{
	height: 30px;
	padding: 0 12px;
	font-size: 12px;
}

.g7-table-totals
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--clr-text-muted);
	font-size: 13px;
}

.g7-table-totals span
{
	color: var(--clr-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.g7-dot
{
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--clr-border);
}

/* ---------------------------------------------------------------------------
   20. Tab di sezione e banner di esito — pannello Prezzi
   NEW_ADDITIONS: la skill elenca Tabs e StatusBanner fra i componenti da
   costruire. Resi qui con i soli token del tema e con lo stesso idiom di focus
   già usato sopra (box-shadow indaco al 50%).
   ------------------------------------------------------------------------- */
.g7-tabs
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid var(--clr-border);
}

.g7-tab
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	color: var(--clr-text-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

@media (hover: hover)
{
	.g7-tab:hover
	{
		background: var(--clr-accent);
		color: var(--clr-accent-fg);
	}
}

.g7-tab:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

.g7-tab[aria-current="page"]
{
	background: var(--clr-card);
	border-color: var(--clr-border);
	color: var(--clr-text);
	box-shadow: inset 0 -2px 0 0 var(--clr-secondary);
}

.g7-banner
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-muted);
	color: var(--clr-text);
	font-size: 14px;
	line-height: 1.5;
}

.g7-banner .g7-icon
{
	flex: 0 0 auto;
	margin-top: 2px;
}

.g7-banner-success
{
	border-color: hsl(150 55% 42% / 0.45);
}

.g7-banner-success .g7-icon
{
	color: var(--clr-success);
}

.g7-banner-warning
{
	border-color: color-mix(in srgb, var(--clr-warning) 45%, transparent);
	background: color-mix(in srgb, var(--clr-warning) 10%, transparent);
}

.g7-banner-warning .g7-icon
{
	color: var(--clr-warning);
}

.g7-banner-error
{
	border-color: hsl(358 74% 59% / 0.45);
}

.g7-banner-error .g7-icon
{
	color: var(--clr-danger);
}

.g7-inline-form
{
	display: inline;
}

.g7-num
{
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.g7-explain
{
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.7;
	color: var(--clr-text);
}

.g7-explain li
{
	padding: 2px 0;
	border-bottom: 1px solid var(--clr-border);
}

.g7-explain li:last-child
{
	border-bottom: none;
}

/* ---------------------------------------------------------------------------
   21. Menu account nella navbar
   NEW_ADDITIONS: la skill elenca DropdownMenu fra i componenti da costruire.
   Superficie SOLIDA (--clr-popup) come vuole la regola sulle superfici
   flottanti: il menu galleggia sopra la pagina, non e' una card traslucida.
   ------------------------------------------------------------------------- */
.g7-account
{
	position: relative;
	flex-shrink: 0;
}

.g7-account-btn
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 4px 10px 4px 4px;
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	background: transparent;
	color: var(--clr-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

@media (hover: hover)
{
	.g7-account-btn:hover
	{
		background: var(--clr-accent);
		border-color: var(--clr-ring);
	}
}

.g7-account-btn:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

.g7-account-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--clr-secondary);
	color: var(--clr-secondary-fg);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.g7-account-caret
{
	width: 16px;
	height: 16px;
	color: var(--clr-text-muted);
}

.g7-account-btn[aria-expanded="true"] .g7-account-caret
{
	transform: rotate(180deg);
}

.g7-account-menu
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 232px;
	padding: 6px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-popup);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.g7-account-menu[hidden]
{
	display: none;
}

.g7-account-item
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	color: var(--clr-text);
	font-size: 14px;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.g7-account-item .g7-icon
{
	width: 18px;
	height: 18px;
	color: var(--clr-text-muted);
}

@media (hover: hover)
{
	.g7-account-item:hover
	{
		background: var(--clr-accent);
		color: var(--clr-accent-fg);
	}
}

.g7-account-item:focus-visible
{
	outline: none;
	background: var(--clr-accent);
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

.g7-account-sep
{
	height: 1px;
	margin: 6px 4px;
	background: var(--clr-border);
}

@media (max-width: 640px)
{
	.g7-account-name
	{
		display: none;
	}

	.g7-account-menu
	{
		min-width: 208px;
	}
}

/* ---------------------------------------------------------------------------
   22. Pagine a piena larghezza quando contengono tabelle dati
   .g7-stack nasce per le pagine-form ed e' limitato a 680px. Una tabella dati
   dentro quel limite risulta compressa, quindi il vincolo cade da solo quando
   nella pagina c'e' una tabella. Le tabelle chiave/valore (.g7-table-compact)
   non contano: sono comunque a piena larghezza della card, ma non giustificano da
   sole di stirare tutta la pagina.
   .g7-stack-wide fa la stessa cosa in modo esplicito, ed e' anche la variante
   che regge sui browser senza :has().
   Una larghezza dichiarata a mano (.g7-stack-large) vince sull'automatismo:
   e' escluso qui invece che sovrascritto dopo, perche' la specificita' di :has()
   e' quella del suo argomento e batterebbe la classe.
   ------------------------------------------------------------------------- */
.g7-stack-wide,
.g7-stack:not(.g7-stack-large):has(.g7-table:not(.g7-table-compact))
{
	max-width: none;
	padding-left: 32px;
	padding-right: 32px;
}

/* Le tabelle occupano sempre tutta la larghezza disponibile: .g7-table-compact non
   e' piu' un vincolo di larghezza ma solo la dichiarazione "questa e' una tabella
   chiave/valore", che serve alla regola :has() qui sopra per NON allargare la pagina.
   La larghezza la da' .g7-table (width: 100%). */
.g7-table-compact
{
	width: 100%;
}

/* Via di mezzo fra i 680px del .g7-stack e il pieno schermo del .g7-stack-wide:
   l'80% della pagina. La max() tiene i 680px come pavimento, cosi' sotto gli
   850px di viewport la colonna non si restringe rispetto a oggi. */
.g7-stack-large
{
	max-width: max(80%, 680px);
	padding-left: 32px;
	padding-right: 32px;
}

/* In pagina larga le tabelle usano tutto lo spazio, i form no: campi lunghi
   1500px non si leggono meglio, si leggono peggio. */
.g7-stack-wide .g7-form-grid,
.g7-stack-large .g7-form-grid,
.g7-stack:has(.g7-table:not(.g7-table-compact)) .g7-form-grid
{
	max-width: 1080px;
}

/* ---------------------------------------------------------------------------
   23. Riquadri della home
   NEW_ADDITIONS: StatsCard e' fra i componenti che la skill elenca come da
   costruire. Griglia responsiva: 1 colonna sotto 640px, poi auto-fit.
   ------------------------------------------------------------------------- */
.g7-stats
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.g7-stat
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-xl);
	background: var(--clr-card);
}

.g7-stat-label
{
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--clr-text-muted);
}

.g7-stat-value
{
	margin: 0;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--clr-text);
}

.g7-stat-warning .g7-stat-value
{
	color: var(--clr-warning);
}

.g7-stat-danger .g7-stat-value
{
	color: var(--clr-danger);
}

.g7-stat-hint
{
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--clr-text-muted);
}

.g7-stat .g7-btn
{
	margin-top: auto;
}

@media (max-width: 640px)
{
	.g7-stats
	{
		grid-template-columns: 1fr;
	}
}

/* Testata operativa della home: applicazione compatta del PageHeader Global7.
   Il caricamento ZIP e' l'azione principale del flusso prezzi e resta visibile
   senza duplicare il form completo del wizard. */
.g7-home
{
	margin-top: 16px;
}

.g7-home-header
{
	margin: 0;
	min-height: 44px;
}

.g7-home-heading
{
	display: flex;
	align-items: baseline;
	min-width: 0;
	gap: 8px;
}

.g7-home-separator
{
	color: var(--clr-text-muted);
}

.g7-home-welcome
{
	margin: 0;
	font-size: 14px;
	color: var(--clr-text-muted);
}

.g7-home-upload
{
	flex: 0 0 auto;
}

@media (max-width: 640px)
{
	.g7-home
	{
		margin-top: 12px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.g7-home-header
	{
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.g7-home-heading
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.g7-home-separator
	{
		display: none;
	}

	.g7-home-upload
	{
		width: 100%;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------------
   24. Wizard importazione email prezzi CNH
   NEW_ADDITIONS: Stepper/Wizard e FileUploadList, previsti dalla skill ma non
   presenti nel tema legacy. Tutte le superfici e gli stati usano i token.
   ------------------------------------------------------------------------- */
.g7-price-flow
{
	gap: 24px;
}

.g7-field .g7-field-error
{
	color: var(--clr-danger);
}

.g7-field .g7-field-error[hidden]
{
	display: none;
}

.g7-flow-header
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.g7-back-link
{
	display: inline-flex;
	margin-bottom: 8px;
	border-radius: var(--radius-sm);
	color: var(--clr-secondary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.g7-back-link:hover
{
	text-decoration: underline;
}

.g7-back-link:focus-visible,
.g7-flow-table summary:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px var(--clr-ring);
}

.g7-stepper
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g7-stepper li
{
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 10px;
	padding: 14px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-card);
}

.g7-stepper li > span
{
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--clr-muted);
	color: var(--clr-text-muted);
	font-family: var(--font-mono);
	font-weight: 700;
}

.g7-stepper li.is-current
{
	border-color: var(--clr-secondary);
}

.g7-stepper li.is-current > span
{
	background: var(--clr-secondary);
	color: var(--clr-secondary-fg);
}

.g7-stepper li.is-complete > span
{
	background: var(--clr-success);
	color: var(--clr-text);
}

.g7-stepper strong
{
	font-size: 14px;
}

.g7-stepper small,
.g7-field small
{
	color: var(--clr-text-muted);
	font-size: 12px;
}

.g7-field textarea
{
	box-sizing: border-box;
	width: 100%;
	min-height: 80px;
	padding: 10px 12px;
	border: 1px solid var(--clr-input-border);
	border-radius: var(--radius-md);
	background: var(--clr-input-bg);
	color: var(--clr-text);
	font: inherit;
	resize: vertical;
}

.g7-field textarea:focus-visible
{
	outline: none;
	border-color: var(--clr-ring);
	box-shadow: 0 0 0 3px var(--clr-ring);
}

.g7-flow-actions
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.g7-flow-actions form
{
	margin: 0;
}

.g7-flow-note
{
	margin: 16px 0 0;
	color: var(--clr-text-muted);
	font-size: 13px;
}

.g7-status-pill
{
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 10px;
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	background: var(--clr-muted);
	color: var(--clr-text);
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Varianti d'esito della pillola: fondo tinto per opacita' sul colore semantico,
   non nuove tinte. Il colore non e' l'unico veicolo, il testo dice sempre l'esito. */
.g7-status-pill.g7-status-success
{
	border-color: color-mix(in srgb, var(--clr-success) 45%, transparent);
	background: color-mix(in srgb, var(--clr-success) 15%, transparent);
	color: var(--clr-success);
}

.g7-status-pill.g7-status-warning
{
	border-color: color-mix(in srgb, var(--clr-warning) 45%, transparent);
	background: color-mix(in srgb, var(--clr-warning) 15%, transparent);
	color: var(--clr-warning);
}

.g7-status-pill.g7-status-danger
{
	border-color: color-mix(in srgb, var(--clr-danger) 45%, transparent);
	background: color-mix(in srgb, var(--clr-danger) 15%, transparent);
	color: var(--clr-danger);
}

/* ---------------------------------------------------------------------------
   Barra di avanzamento
   NEW_ADDITIONS: la skill non ha un componente Progress. Non si usa <progress>
   perche' non e' stilabile in modo uniforme fra i browser; il ruolo ARIA sta sul
   contenitore e il riempimento e' decorativo.
   ------------------------------------------------------------------------- */
.g7-progress
{
	overflow: hidden;
	width: 100%;
	height: 8px;
	margin-top: 16px;
	border-radius: 999px;
	background: var(--clr-muted);
}

.g7-progress-fill
{
	display: block;
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: var(--clr-secondary);
	transition: width 200ms;
}

@media (prefers-reduced-motion: reduce)
{
	.g7-progress-fill
	{
		transition: none;
	}
}

.g7-row-error td:first-child
{
	box-shadow: inset 3px 0 0 var(--clr-danger);
}

.g7-flow-table
{
	max-height: 640px;
}

.g7-flow-table details
{
	min-width: 220px;
	max-width: 420px;
}

.g7-flow-table summary
{
	border-radius: var(--radius-sm);
	color: var(--clr-secondary);
	cursor: pointer;
	font-weight: 600;
}

.g7-flow-table details ul,
.g7-flow-table details ol
{
	margin: 10px 0 0;
	padding-left: 20px;
}

.g7-confirm-dialog
{
	width: min(520px, calc(100% - 32px));
	padding: 24px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-popup);
	color: var(--clr-text);
}

.g7-confirm-dialog::backdrop
{
	background: var(--clr-card);
	backdrop-filter: blur(4px);
}

.g7-confirm-dialog h2
{
	margin-top: 0;
}

.g7-confirm-dialog .g7-actions
{
	justify-content: flex-end;
}

.g7-config-dialog
{
	width: min(880px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	overflow: auto;
}

.g7-config-dialog .g7-form-grid
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g7-config-dialog .g7-field-wide
{
	grid-column: 1 / -1;
}

.g7-config-dialog textarea
{
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.g7-config-dialog .g7-check-field
{
	align-self: center;
}

.g7-actions-top
{
	margin-top: 0;
	margin-bottom: 16px;
}

.g7-btn:disabled,
input.g7-btn:disabled
{
	cursor: not-allowed;
	opacity: 0.5;
}

@media (max-width: 900px)
{
	.g7-stepper
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px)
{
	.g7-config-dialog .g7-form-grid
	{
		grid-template-columns: 1fr;
	}

	.g7-config-dialog .g7-field-wide
	{
		grid-column: auto;
	}

	.g7-flow-header
	{
		flex-direction: column;
	}

	.g7-stepper
	{
		grid-template-columns: 1fr;
	}

	.g7-flow-actions,
	.g7-flow-actions form,
	.g7-flow-actions .g7-btn
	{
		width: 100%;
	}

	.g7-flow-actions .g7-btn
	{
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------------------
   Badge di avviso in tabella
   NEW_ADDITIONS: variante della Badge gia' presente fra i componenti della
   skill. Serve alla colonna Alias della configurazione prezzi, dove uno zero
   da solo non comunica che la categoria non verra' mai riconosciuta.
   Usa i soli token esistenti: nessun colore nuovo.
   ------------------------------------------------------------------------- */
.g7-badge-warning
{
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid color-mix(in srgb, var(--clr-warning) 45%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--clr-warning) 12%, transparent);
	color: var(--clr-warning);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Aggiornamento database STAR7 (showstar7dbimport.tpl)
   Tutto sotto .g7-s7: nessun effetto sulle altre pagine.
   NEW_ADDITIONS:
   - stepper a 7 fasi con stato di errore (.is-failed), variante dello Stepper;
   - barra di avanzamento indeterminata, per le fasi non misurabili: striscia
     che scorre, ferma con prefers-reduced-motion (resta il testo "non misurabile");
   - registro eventi a scorrimento (mono, come .g7-explain).
   Solo token esistenti, nessun colore nuovo.
   ------------------------------------------------------------------------- */
/* le classi del tema impostano display: l'attributo hidden deve vincere */
.g7-s7 [hidden]
{
	display: none !important;
}

.g7-s7 code
{
	font-family: var(--font-mono);
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

.g7-s7-dbname
{
	font-size: 20px;
	overflow-wrap: anywhere;
}

.g7-s7 .g7-field-error
{
	margin: 0;
	color: var(--clr-danger);
	font-size: 12px;
}

.g7-s7-testmode
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
}

.g7-s7-testmode legend
{
	padding: 0 6px;
	font-size: 13px;
	font-weight: 500;
}

.g7-s7-check
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
}

.g7-s7-check input
{
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	accent-color: var(--clr-secondary);
	flex: none;
}

.g7-s7-upload-progress
{
	margin-top: 8px;
}

.g7-s7-progress-row
{
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.g7-s7-progress-text
{
	margin: 8px 0 0;
	color: var(--clr-text-muted);
	font-size: 13px;
}

.g7-s7-message
{
	margin: 12px 0 0;
	font-size: 14px;
}

.g7-s7-blocked
{
	margin: 12px 0 0;
	color: var(--clr-warning);
	font-size: 13px;
}

.g7-s7-action
{
	margin-bottom: 16px;
}

.g7-s7-subtitle
{
	margin: 24px 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.g7-s7-stepper
{
	grid-template-columns: repeat(7, minmax(0, 1fr));
	margin-bottom: 16px;
}

.g7-s7-stepper li.is-failed
{
	border-color: var(--clr-danger);
}

.g7-s7-stepper li.is-failed > span
{
	background: var(--clr-danger);
	color: var(--clr-text);
}

.g7-progress.is-indeterminate .g7-progress-fill
{
	width: 30% !important;
	animation: g7-s7-slide 1.4s ease-in-out infinite;
}

@keyframes g7-s7-slide
{
	from { transform: translateX(-100%); }
	to   { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce)
{
	.g7-progress.is-indeterminate .g7-progress-fill
	{
		width: 100% !important;
		opacity: 0.4;
		animation: none;
	}
}

.g7-s7-log
{
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
	background: var(--clr-muted);
	list-style: none;
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 1.6;
}

.g7-s7-log:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
}

.g7-s7-log li
{
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr);
	gap: 10px;
	padding: 2px 0;
	border-bottom: 1px solid var(--clr-border);
}

.g7-s7-log li:last-child
{
	border-bottom: 0;
}

.g7-s7-log time
{
	color: var(--clr-text-muted);
}

.g7-s7-log .is-warning span
{
	color: var(--clr-warning);
}

.g7-s7-log .is-error span
{
	color: var(--clr-danger);
}

.g7-s7-log .g7-s7-log-empty
{
	display: block;
	color: var(--clr-text-muted);
}

.g7-s7 details
{
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-md);
}

.g7-s7 details summary
{
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}

.g7-s7 details summary:focus-visible
{
	outline: none;
	box-shadow: 0 0 0 3px hsl(240 62% 60% / 0.5);
	border-radius: var(--radius-sm);
}

.g7-s7 details .g7-explain
{
	margin-top: 8px;
	overflow-wrap: anywhere;
}

.g7-s7-items
{
	margin: 6px 0 0;
	padding-left: 18px;
	color: var(--clr-text-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.g7-s7-dialog-form .g7-field input,
#s7DialogConfirm
{
	font-family: var(--font-mono);
}

@media (max-width: 1280px)
{
	.g7-s7-stepper
	{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 900px)
{
	.g7-s7-stepper
	{
		grid-template-columns: 1fr;
	}

	.g7-s7-progress-row
	{
		flex-direction: column;
		gap: 0;
	}

	.g7-s7 .g7-actions .g7-btn
	{
		width: 100%;
		min-height: 44px;
	}
}