/* ==========================================================================
   Gestionale Spiaggia - tema
   Colore primario richiesto: #11aeef (azzurro mare/cielo)
   ========================================================================== */

:root {
    --gs-primary: #11aeef;
    --gs-primary-rgb: 17, 174, 239;
    --gs-primary-hover: #0e98d3;
    --gs-primary-active: #0b82b6;
    --gs-primary-light: #f0f9ff;
    --gs-sea-deep: #004d7a;
    --gs-sand: #f8f9fa;
    --gs-sand-dark: #e2e8f0;
    --gs-ink: #212529;

    /* Secondario: arancione/ambra originale TopSpiagge */
    --gs-secondary: #ffac1c;
    --gs-secondary-rgb: 255, 172, 28;
    --bs-secondary: var(--gs-secondary);
    --bs-secondary-rgb: var(--gs-secondary-rgb);

    /* Il tema "bootstrap-external" di DevExpress legge le variabili --bs-* della pagina */
    --bs-primary: var(--gs-primary);
    --bs-primary-rgb: var(--gs-primary-rgb);
    --bs-link-color: var(--gs-primary);
    --bs-link-color-rgb: var(--gs-primary-rgb);
    --bs-link-hover-color: var(--gs-primary-hover);
}

body {
    background-color: var(--gs-sand);
    color: var(--gs-ink);
}

a {
    color: var(--gs-primary);
}

    a:hover {
        color: var(--gs-primary-hover);
    }

/* Il Bootstrap vendorizzato (5.1.3) non usa variabili CSS nei componenti:
   sovrascriviamo le classi principali per allinearle al colore primario. */
.btn-primary {
    background-color: var(--gs-primary);
    border-color: var(--gs-primary);
}

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus {
        background-color: var(--gs-primary-hover) !important;
        border-color: var(--gs-primary-hover) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--gs-primary-rgb), 0.35) !important;
    }

.btn-outline-primary {
    color: var(--gs-primary);
    border-color: var(--gs-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--gs-primary);
        border-color: var(--gs-primary);
    }

.text-primary {
    color: var(--gs-primary) !important;
}

.bg-primary {
    background-color: var(--gs-primary) !important;
}

.border-primary {
    border-color: var(--gs-primary) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--gs-primary-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--gs-primary);
    border-color: var(--gs-primary);
}

.spinner-border.text-primary {
    color: var(--gs-primary) !important;
}

/* ==========================================================================
   Pagina di login
   ========================================================================== */

.gs-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1.5rem;
    overflow: hidden;
    background: linear-gradient(160deg, var(--gs-sea-deep) 0%, var(--gs-primary) 45%, #9ed6ef 100%);
}

.gs-login-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}

.gs-login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(15, 45, 65, 0.35);
    padding: 2.5rem 2rem;
}

.gs-login-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--gs-primary-light);
    color: var(--gs-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.75rem;
}

.gs-login-title {
    text-align: center;
    font-weight: 700;
    color: var(--gs-ink);
    margin-bottom: 0.25rem;
}

.gs-login-subtitle {
    text-align: center;
    color: #6c8494;
    margin-bottom: 1.75rem;
    font-size: 0.925rem;
}

.gs-login-card .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--gs-ink);
}

.gs-login-card .form-control {
    border-radius: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-color: #dbe6ee;
}

.gs-login-card .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.gs-login-card .gs-toggle-password {
    border-color: #dbe6ee;
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    color: #6c8494;
    background-color: #fff;
}

    .gs-login-card .gs-toggle-password:hover,
    .gs-login-card .gs-toggle-password:focus {
        color: var(--gs-primary);
        border-color: var(--gs-primary);
        background-color: var(--gs-primary-light);
        box-shadow: none;
    }

.gs-login-submit {
    border-radius: 0.6rem;
    padding: 0.65rem;
    font-weight: 600;
}

/* ==========================================================================
   Splash di avvio (verifica/ripristino sessione)
   ========================================================================== */

.gs-splash {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Shell applicativo (ribbon a piena larghezza + menu verticale a sinistra),
   usato da tutte le pagine autenticate tramite @layout AppShellLayout
   ========================================================================== */

.gs-app-shell {
    display: flex;
    flex-direction: column;
    /* Altezza della finestra: scorre solo l'area di lavoro (.gs-shell-content), così le barre
       fisse delle pagine (es. Registra in Info Azienda) restano in vista. */
    height: 100vh;
}

/* Riga sotto la ribbon: menu verticale + area di lavoro */
.gs-shell-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.gs-shell-content {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}

/* Ribbon bar: compatta, a piena larghezza, in alto */
.gs-ribbon {
    height: 52px;
    flex-shrink: 0;
    background-color: #fff;
    border-bottom: 1px solid var(--gs-sand-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    gap: 1rem;
}

/* Menu: colonna verticale a sinistra, a blocchi quadrati */
.gs-sidebar {
    flex-shrink: 0;
    width: 84px;
    background-color: #fff;
    border-right: 1px solid var(--gs-sand-dark);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.4rem;
    overflow-y: auto;
}

.gs-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.2rem;
    border-radius: 0.55rem;
    color: var(--gs-ink);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}

    .gs-menu-item i {
        font-size: 1.35rem;
        color: #8ba2b1;
    }

    .gs-menu-item:hover {
        background-color: var(--gs-sand);
    }

    .gs-menu-item.active {
        background-color: var(--gs-primary-light);
        color: var(--gs-sea-deep);
    }

        .gs-menu-item.active i {
            color: var(--gs-primary);
        }

.gs-ribbon-left,
.gs-ribbon-center,
.gs-ribbon-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.gs-ribbon-center {
    flex: 1;
    justify-content: center;
}

.gs-ribbon-brand {
    font-weight: 700;
    color: var(--gs-sea-deep);
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.95rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .gs-ribbon-brand:hover {
        color: var(--gs-sea-deep);
    }

.gs-ribbon-brand-light {
    font-weight: 400;
    color: #7c94a3;
}

.gs-ribbon-azienda {
    font-weight: 600;
    color: var(--gs-ink);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

.gs-ribbon-anno {
    width: auto;
    min-width: 5.5rem;
}

.gs-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    font-size: 1.25rem;
    color: var(--gs-ink);
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

    .gs-sidebar-toggle:hover {
        color: var(--gs-primary);
    }

.gs-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--gs-primary);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.gs-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 0.95rem;
}

.gs-avatar-menu {
    min-width: 290px;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border-color: var(--gs-sand-dark);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 45, 65, 0.18);
}

.gs-avatar-menu .dropdown-item {
    border-radius: 0.5rem;
}

/* Bootstrap colora di blu la voce premuta (:active): qui resta il grigio chiaro del passaggio del mouse, come per "Esci" in rosso. */
.gs-avatar-menu .dropdown-item:not(.text-danger):hover,
.gs-avatar-menu .dropdown-item:not(.text-danger):focus,
.gs-avatar-menu .dropdown-item:not(.text-danger):active {
    background-color: #eef2f5;
    color: var(--gs-ink);
    outline: none;
}

.gs-avatar-menu .dropdown-item.text-danger:hover,
.gs-avatar-menu .dropdown-item.text-danger:focus,
.gs-avatar-menu .dropdown-item.text-danger:active {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--bs-danger);
}

.gs-avatar-menu-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.25rem 0.25rem 0.5rem;
}

/* Informazioni sulla sessione nel menu dell'operatore: etichetta a sinistra, valore a destra. */
.gs-avatar-info {
    margin: 0.25rem 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.gs-avatar-info > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid #eef2f5;
}

.gs-avatar-info dt {
    flex: 0 0 auto;
    color: #6c7a86;
    font-weight: 500;
}

.gs-avatar-info dd {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--gs-ink);
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Contenuti pagina (home, sezioni in costruzione, ...)
   ========================================================================== */

.gs-welcome-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 45, 65, 0.08);
    padding: 2rem;
}

.gs-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 1.5rem;
    color: #7c94a3;
}

    .gs-empty-state i {
        font-size: 2.5rem;
        color: var(--gs-primary);
        margin-bottom: 0.75rem;
    }

    .gs-empty-state h4 {
        color: var(--gs-ink);
        margin-bottom: 0.25rem;
    }

/* ==========================================================================
   Mappa stabilimento (toolbar e canvas: stili nei file .razor.css del componente)
   ========================================================================== */

.gs-mappa-stage {
    position: relative;
    height: 100%;
    min-height: 0;
}

/* ==========================================================================
   Archivi: griglia comune (ArchiviGriglia), filtri e finestra di modifica. Sono qui e non nel
   CSS della pagina perché la finestra di modifica si apre fuori dalla pagina e i campi sono
   scritti da componenti diversi.
   ========================================================================== */

.gs-ar-filtri {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .6rem 1rem;
	margin-bottom: 1rem;
	padding: .8rem 1rem;
	border-radius: .9rem;
	background: #fff;
	box-shadow: 0 .2rem .8rem rgba(15, 45, 65, .07);
}

.gs-ar-campo {
	min-width: 11rem;
}

.gs-ar-campo-largo {
	min-width: 18rem;
}

.gs-ar-campo label {
	display: block;
	margin-bottom: .15rem;
	color: var(--gs-ink);
	font-size: .75rem;
	font-weight: 600;
}

.gs-ar-avviso {
	margin-bottom: .75rem;
	padding: .5rem .9rem;
	font-size: .85rem;
}

.gs-ar-avviso i {
	margin-right: .35rem;
}

.gs-ar-griglia {
	padding: .75rem;
	border-radius: .9rem;
	background: #fff;
	box-shadow: 0 .2rem .8rem rgba(15, 45, 65, .07);
}

.gs-ar-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
}

.gs-ar-righe {
	color: #6c8494;
	font-size: .85rem;
}

.gs-ar-righe i {
	margin-right: .25rem;
	color: var(--gs-primary);
}

.gs-ar-strumenti {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.gs-ar-nuovo {
	font-weight: 600;
}

.gs-ar-azioni-riga {
	display: flex;
	justify-content: center;
	gap: .2rem;
}

.gs-ar-azione {
	padding: .1rem .35rem;
	color: #6c8494;
}

.gs-ar-azione:hover {
	color: var(--gs-primary);
}

.gs-ar-azione-elimina:hover {
	color: #dc3545;
}

/* Campione di colore in una cella. */
.gs-ar-colore {
	display: inline-block;
	width: 1.6rem;
	height: 1rem;
	border-radius: .25rem;
	box-shadow: 0 0 0 1px #d9e2e8;
	vertical-align: middle;
}

/* Icona di un articolo, nella griglia e nella combo. */
.gs-ar-icona-articolo {
	width: 1.6rem;
	height: 1.6rem;
	object-fit: contain;
}

.gs-ar-voce-icona {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.gs-ar-voce-icona img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: contain;
}

/* Finestra "Copia listino". */
.gs-ar-copia .form-label {
	margin-bottom: .2rem;
	color: var(--gs-ink);
	font-size: .8rem;
	font-weight: 600;
}

.gs-ar-copia .form-check-label {
	font-size: .875rem;
}

.gs-ar-copia-sezione {
	margin-bottom: .35rem;
	color: var(--gs-sea-deep);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.gs-ar-copia-valore {
	padding: .25rem .5rem;
	border-radius: .25rem;
	background: #f4f7f9;
	font-size: .875rem;
}

/* Finestra di modifica. */
.gs-ar-popup {
	width: min(52rem, 94vw) !important;
	max-width: 94vw !important;
}

.gs-ar-popup-largo {
	width: min(68rem, 96vw) !important;
	max-width: 96vw !important;
}

/* Le schede lunghe scorrono dentro la finestra; i pulsanti restano in vista. */
.gs-ar-modulo {
	max-height: 72vh;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Animali nella scheda del cliente. */
.gs-ar-animali {
	margin-bottom: 0;
	font-size: .85rem;
}

.gs-ar-animali th {
	color: #6c8494;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-ar-animali td {
	min-width: 6rem;
	vertical-align: middle;
}

.gs-ar-modulo .validation-errors {
	margin: 0 0 .75rem;
	padding: .5rem .75rem .5rem 1.75rem;
	border-radius: .5rem;
	background: #fdecea;
	color: #b02a37;
	font-size: .85rem;
}

.gs-ar-modulo .validation-errors:empty {
	display: none;
}

.gs-ar-modulo .dxbl-fl-cpt {
	color: var(--gs-ink);
	font-size: .8rem;
	font-weight: 600;
}

.gs-ar-opzioni {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	padding-top: 1.4rem;
}

.gs-ar-selettore-colore {
	width: 4rem;
	padding: .2rem;
}

.gs-ar-nota {
	margin: .75rem 0 0;
	color: #6c8494;
	font-size: .8rem;
}

.gs-ar-modulo-azioni {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1rem;
	padding-top: .75rem;
	border-top: 1px solid var(--gs-sand-dark);
}

.gs-ar-salva {
	min-width: 7rem;
	font-weight: 600;
}

/* ==========================================================================
   Colore secondario #ffc100: pulsanti .btn-secondary / .btn-outline-secondary nel formato
   del Bootstrap 5.2 vendorizzato (proprietà dirette, non variabili --bs-btn-*).
/* Colore secondario TopSpiagge #ffac1c */
.btn-secondary {
	color: #ffffff;
	background-color: #ffac1c;
	border-color: #ffac1c;
}

.btn-secondary:hover {
	color: #ffffff;
	background-color: #e59a17;
	border-color: #e59a17;
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
	color: #ffffff;
	background-color: #e59a17;
	border-color: #e59a17;
	box-shadow: 0 0 0 .25rem rgba(255, 172, 28, .5);
}

.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
	color: #ffffff;
	background-color: #d1870b;
	border-color: #d1870b;
}

.btn-check:checked + .btn-secondary:focus,
.btn-check:active + .btn-secondary:focus,
.btn-secondary:active:focus,
.btn-secondary.active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .25rem rgba(255, 193, 0, .5);
}

.btn-secondary:disabled,
.btn-secondary.disabled {
	color: #212529;
	background-color: #ffc100;
	border-color: #ffc100;
}

.btn-outline-secondary {
	color: #8a6b0c;
	border-color: #ffc100;
}

.btn-outline-secondary:hover {
	color: #212529;
	background-color: #ffc100;
	border-color: #ffc100;
}

.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus {
	box-shadow: 0 0 0 .25rem rgba(255, 193, 0, .5);
}

/* Anche premuto o con il focus da tastiera l'anello è giallo come quello del pulsante pieno (senza queste regole Bootstrap usa il suo anello grigio
   scuro, che sul pulsante "Vai al conto" sembrava un bordo nero). */
.btn-outline-secondary {
	--bs-btn-focus-shadow-rgb: 255, 193, 0;
	--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 193, 0, .5);
}

.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active:focus,
.btn-outline-secondary:active:focus-visible,
.btn-check:focus-visible + .btn-outline-secondary {
	box-shadow: 0 0 0 .25rem rgba(255, 193, 0, .5);
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
	color: #212529;
	background-color: #e6ad00;
	border-color: #e6ad00;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
	color: #8a6b0c;
	background-color: transparent;
}

/* ==========================================================================
   Archivi: indicatore di caricamento al centro della pagina, scheda cliente, animali.
   ========================================================================== */

.gs-ar-attesa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	min-height: 55vh;
	color: #6c8494;
	font-size: .95rem;
	text-align: center;
}

.gs-ar-attesa .spinner-border {
	width: 2.5rem;
	height: 2.5rem;
}

/* Animali del cliente: barra e griglia. */
.gs-ar-animali-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .5rem;
}

.gs-ar-animali-griglia {
	min-height: 8rem;
}

/* Scheda del cliente: testata con avatar, nome e badge. */
.gs-cli-testata {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-bottom: .75rem;
	padding: .8rem 1rem;
	border-radius: .75rem;
	background: linear-gradient(135deg, var(--gs-primary-light, #e8f3fc), #fff);
	border: 1px solid #d9e8f5;
}

.gs-cli-avatar {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--gs-primary);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.gs-cli-avatar-allerta {
	background: #dc3545;
}

.gs-cli-intestazione {
	flex: 1 1 14rem;
	min-width: 0;
}

.gs-cli-nome {
	overflow: hidden;
	color: var(--gs-ink);
	font-size: 1.15rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-cli-sotto {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem 1rem;
	color: #6c8494;
	font-size: .82rem;
}

.gs-cli-sotto i {
	margin-right: .2rem;
}

.gs-cli-badge {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

/* Schede (anagrafica, contatti, animali, note): il contenuto scorre, la testata e i pulsanti restano in vista. */
.gs-cli-schede {
	max-height: 58vh;
}

.gs-cli-schede .dxbl-tabs-content,
.gs-cli-schede > div:last-child {
	max-height: 50vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding-top: .75rem;
}

.gs-cli-form {
	padding-right: .25rem;
}

/* Login a due colonne: logo a sinistra, modulo a destra (in colonna sotto i 860px). */
.gs-login-page {
    gap: 4rem;
}

.gs-login-brand {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    max-width: 460px;
    text-align: center;
}

.gs-login-logo {
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 .4rem 1rem rgba(15, 45, 65, .3));
}

.gs-login-claim {
    margin-top: 1rem;
    color: rgba(255, 255, 255, .9);
    font-size: 1.1rem;
    letter-spacing: .04em;
}

.gs-login-page .gs-login-card {
    flex: 0 1 420px;
}

@media (max-width: 860px) {
    .gs-login-page {
        flex-direction: column;
        gap: 1.5rem;
    }

    .gs-login-brand {
        flex: 0 0 auto;
        max-width: 260px;
    }

    .gs-login-claim {
        display: none;
    }
}

/* Logo del prodotto nella ribbon, al posto della scritta. */
.gs-ribbon-logo {
    display: block;
    height: 2.9rem;
    width: auto;
}

/* Griglie DevExpress senza righe (componente GrigliaVuota). */
.gs-griglia-vuota {
	padding: 1.5rem 1rem;
	color: #6c8494;
	text-align: center;
}

.gs-griglia-vuota i {
	margin-right: .35rem;
	color: var(--gs-primary);
}

/* Anteprima di stampa dei report: finestra larga e alta, con il visualizzatore di DevExpress a tutta altezza. */
.gs-anteprima-dialogo {
	width: min(96vw, 1400px);
	max-width: none;
}

.gs-anteprima-corpo {
	height: 72vh;
	padding: .25rem;
}

.gs-anteprima-visualizzatore {
	height: 100%;
}

/* Finestre di modifica degli Archivi (popup della griglia): intestazione e piede come le finestre modali di Info Azienda
   (titolo con icona, linea sotto l'intestazione, pulsanti in basso a destra). */
.gs-ar-popup .dxbl-modal-header {
	padding: 1rem;
	border-bottom: 1px solid var(--gs-sand-dark);
}

.gs-ar-popup .dxbl-modal-title {
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--gs-ink) !important;
}

.gs-ar-popup .dxbl-modal-title::before {
	content: "\f4ca";
	font-family: "bootstrap-icons";
	font-weight: normal;
	margin-right: .35rem;
	color: var(--gs-primary);
}

/* Finestre modali della Mappa (occupazioni, scheda del conto): stesso aspetto delle finestre degli Archivi (intestazione con linea
   sabbia e titolo con icona, piede con i pulsanti a destra), con una tabella in stile griglia. */
.gs-finestra .modal-content {
	border: 0;
	border-radius: .6rem;
	box-shadow: 0 10px 30px rgba(15, 45, 65, .3);
}

.gs-finestra .modal-header {
	padding: 1rem;
	border-bottom: 1px solid var(--gs-sand-dark);
}

.gs-finestra .modal-title {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gs-ink);
}

.gs-finestra .modal-title small {
	font-size: .85rem;
	font-weight: 400;
}

.gs-finestra .modal-footer {
	border-top: 1px solid var(--gs-sand-dark);
}

.gs-finestra .form-label {
	margin-bottom: .2rem;
	color: var(--gs-ink);
	font-size: .8rem;
	font-weight: 600;
}

.gs-finestra .gs-ar-copia-valore {
	min-height: 1.9rem;
}

.gs-tabella {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .875rem;
}

.gs-tabella th {
	padding: .45rem .6rem;
	background: #f4f7f9;
	border-top: 1px solid var(--gs-sand-dark);
	border-bottom: 1px solid var(--gs-sand-dark);
	color: var(--gs-sea-deep);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-tabella th:first-child {
	border-left: 1px solid var(--gs-sand-dark);
	border-top-left-radius: .35rem;
}

.gs-tabella th:last-child {
	border-right: 1px solid var(--gs-sand-dark);
	border-top-right-radius: .35rem;
}

.gs-tabella td {
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--gs-sand-dark);
	vertical-align: middle;
}

.gs-tabella tbody tr:hover td {
	background: var(--gs-primary-light);
}

.gs-tabella tfoot td {
	font-weight: 700;
}

/* Finestre della Mappa: carattere più piccolo (il corpo parte da .8rem), titolo più sobrio. */
.gs-finestra .modal-body,
.gs-finestra .modal-footer .btn {
	font-size: .8rem;
}

.gs-finestra .modal-title {
	font-size: 1.05rem;
}

.gs-finestra .modal-title small {
	font-size: .75rem;
}

.gs-finestra .gs-tabella {
	font-size: .78rem;
}

.gs-finestra .gs-tabella th {
	font-size: .66rem;
}

.gs-finestra .gs-ar-copia-valore,
.gs-finestra .btn-sm {
	font-size: .78rem;
}

.gs-finestra .btn-close {
	margin: 0 0 0 auto;
	padding: .5rem;
}

/* ==========================================================================
   SISTEMA SCHEDE (TABS) E TESTATA - STILE GESTIONALE SPIAGGIA
   ========================================================================== */

/* Testata unificata per le pagine di gestione */
.gs-admin-testata {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .75rem 1.25rem;
	margin-bottom: 1rem;
	padding-bottom: .25rem;
}

.gs-admin-titolo {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0;
	color: var(--gs-ink);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.gs-admin-titolo i {
	color: var(--gs-primary);
	font-size: 1.6rem;
}

.gs-admin-sottotitolo {
	margin: .35rem 0 0 0;
	color: #64748b;
	font-size: .88rem;
	line-height: 1.4;
}

/* Menu schede principale (sottolineato con il colore secondario ambra sulla scheda attiva) */
.gs-schede,
.gs-admin-menu,
.gs-finestra .gs-schede {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border-bottom: 2px solid var(--gs-sand-dark);
	list-style: none;
}

.gs-scheda,
.gs-admin-menu-voce,
.gs-finestra .gs-scheda {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.15rem;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	border-radius: .5rem .5rem 0 0;
	background: none;
	color: #64748b;
	font-size: .92rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s ease;
	font-family: inherit;
}

.gs-scheda:hover,
.gs-admin-menu-voce:hover,
.gs-finestra .gs-scheda:hover {
	background: var(--gs-primary-light);
	color: var(--gs-sea-deep);
}

.gs-scheda.active,
.gs-admin-menu-voce.active,
.gs-finestra .gs-scheda.active {
	border-bottom-color: var(--gs-secondary);
	color: var(--gs-sea-deep);
	font-weight: 700;
	background: transparent;
}

.gs-scheda.active i,
.gs-admin-menu-voce.active i,
.gs-finestra .gs-scheda.active i {
	color: var(--gs-primary);
}

.gs-admin-badge {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	border-radius: 50rem;
	font-size: .75rem;
	font-weight: 700;
	background-color: var(--gs-primary-light);
	color: var(--gs-sea-deep);
	border: 1px solid rgba(var(--gs-primary-rgb), 0.2);
}

.gs-admin-menu-voce.active .gs-admin-badge {
	background-color: var(--gs-primary);
	color: #fff;
	border-color: var(--gs-primary);
}

/* Schede pillola (per filtri, viste e sotto-sezioni) */
.gs-ar-schede {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-ar-scheda {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .38rem .95rem;
	border: 1px solid var(--gs-sand-dark);
	border-radius: 2rem;
	background: #fff;
	color: #475569;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s ease;
	font-family: inherit;
}

.gs-ar-scheda:hover {
	background: var(--gs-primary-light);
	border-color: #cbd5e1;
	color: var(--gs-sea-deep);
}

.gs-ar-scheda.active {
	border-color: var(--gs-primary);
	background: var(--gs-primary) !important;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(var(--gs-primary-rgb), 0.25);
}

.gs-ar-scheda .badge {
	font-size: .75rem;
	padding: .2em .5em;
	border-radius: 50rem;
	transition: all .15s ease;
}

.gs-ar-scheda.active .badge {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #fff !important;
}

.gs-ar-scheda:not(.active) .badge {
	background: #f1f5f9 !important;
	color: #64748b !important;
}

/* Testo che scorre se non sta nello spazio (wwwroot/js/scorrevole.js mette la classe gs-scorre e --gs-delta solo quando serve). Il testo va in uno
   <span> dentro l'elemento con la classe gs-scorrevole. Senza script, o con il movimento ridotto nel sistema, il testo si tronca con i puntini. */
.gs-scorrevole {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-scorrevole > span {
    display: inline-block;
}

.gs-scorrevole.gs-scorre {
    text-overflow: clip;
}

.gs-scorrevole.gs-scorre > span {
    animation: gs-scorri 9s ease-in-out infinite alternate;
}

@keyframes gs-scorri {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-1 * var(--gs-delta, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
    .gs-scorrevole.gs-scorre {
        text-overflow: ellipsis;
    }

    .gs-scorrevole.gs-scorre > span {
        animation: none;
    }
}

/* Carattere del programma: Poppins (wwwroot/css/poppins.css, file in wwwroot/fonts/poppins), con i caratteri di sistema come ripiego. Le variabili di
   Bootstrap lo estendono a tutti i componenti; i componenti DevExpress ereditano dal corpo della pagina. */
:root {
    --gs-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-font-sans-serif: var(--gs-font);
    --bs-body-font-family: var(--gs-font);
}

body {
    font-family: var(--gs-font);
}

/* Codici generati (password, voucher): a spaziatura fissa, per leggerli senza confondere i caratteri. */
.gs-ar-codice {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.04em;
}

/* Stampa della mappa a griglia (Utility): il foglio A4 orizzontale. Gli stili sono qui, non nel CSS della pagina, perche la stampa copia il foglio fuori dalla pagina. */
.gs-stm-anteprima {
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid #dbe4ea;
    border-radius: 0.6rem;
    background: #e9eef2;
    max-height: 70vh;
}

.gs-stm-anteprima .gs-stm-foglio {
    zoom: 0.62;
    box-shadow: 0 0.2rem 0.8rem rgba(15, 45, 65, 0.2);
}

.gs-stm-foglio {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 297mm;
    height: 210mm;
    padding: 8mm;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.gs-stm-testata {
    flex: 0 0 auto;
    margin-bottom: 2mm;
    text-align: center;
    font-size: 11pt;
    font-weight: bold;
    text-decoration: underline;
}

.gs-stm-griglia {
    display: grid;
    flex: 1 1 auto;
    gap: 0.6mm;
    min-height: 0;
}

.gs-stm-cella {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    border: 0.2mm solid #000;
    background: #fff;
    padding: 0.3mm;
    text-align: center;
    line-height: 1.1;
}

.gs-stm-cella > span {
    max-width: 100%;
}

.gs-stm-id {
    font-weight: bold;
    white-space: nowrap;
}

.gs-stm-voci {
    color: #d00000;
    font-weight: bold;
    white-space: nowrap;
}

.gs-stm-riga,
.gs-stm-nome {
    font-size: 0.72em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-stm-riga {
    white-space: nowrap;
}

.gs-stm-nome {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

@media print {
    .gs-stm-foglio {
        width: 281mm;
        height: 193mm;
        padding: 0;
    }
}

/* Numero di versione sotto il modulo di accesso. */
.gs-login-versione {
    margin-top: 1rem;
    color: #6c8494;
    font-size: 0.75rem;
    text-align: center;
}

/* Designer: intestazioni di sezione nei moduli e variazione in blocco delle risorse (le finestre si aprono fuori dalla pagina, quindi gli stili sono qui). */
.gs-ar-sezione {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gs-sea-deep);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.gs-ar-sezione i {
    color: var(--gs-primary);
}

.gs-dz-varia {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.gs-dz-varia-riga {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 600;
    color: var(--gs-ink);
}

/* Designer della piantina e della griglia: barra, mappa, pannello. Le dimensioni dei posti della piantina arrivano dal settore con le variabili --rw, --rh, --rr (raggio) e --rf; le celle della griglia con --cw e --ch. */
.gs-dzp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: .75rem;
    align-items: start;
}

.gs-dzp-corpo {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .5rem;
}

.gs-dzp-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.gs-dzp-settori {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.gs-dzp-settore {
    padding: .25rem .75rem;
    border: 1px solid #cfe3f4;
    border-radius: 2rem;
    background: #fff;
    color: #2b5f8a;
    font-size: .82rem;
    font-weight: 600;
}

.gs-dzp-settore:hover {
    background: var(--gs-primary-light);
}

.gs-dzp-settore.active {
    border-color: var(--gs-primary);
    background: var(--gs-primary);
    color: #fff;
}

.gs-dzp-strumenti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
}

.gs-dzp-campo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    color: #6c8494;
    font-size: .82rem;
}

.gs-dzp-campo .form-select,
.gs-dzp-campo .form-control {
    width: auto;
}

.gs-dzp-snap input[type="number"] {
    width: 4.2rem;
}

/* Colora per e Cerca posto: input-group con l'icona (come "Ospite, posto o conto" nel Planner), non più l'icona nuda. */
.gs-dzp-w-colora { width: 13.5rem; }
.gs-dzp-w-cerca { width: 11rem; }

/* Carica il file della piantina: un <label> fatto apparire come un pulsante, con l'<InputFile> dentro ma invisibile (clic sul
   pulsante = clic sul file input, come al solito con i file input). */
.gs-dzp-file {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gs-dzp-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gs-dzp-file:has(input:disabled) {
    cursor: default;
}

/* Area della mappa: sfondo scuro come i bordi di una tavola da disegno. */
.gs-dzp-host {
    position: relative;
    height: 68vh;
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid #c7d6e0;
    border-radius: .7rem;
    background: #dfe7ec;
    outline: none;
    cursor: default;
    touch-action: none;
    user-select: none;
}

.gs-dzp-host:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--gs-primary-rgb), .3);
}

.gs-dzp-host.gs-dzp-posizionando {
    cursor: crosshair;
}

.gs-dzp-host.gs-dzp-spostando {
    cursor: grabbing;
}

.gs-dzp-mondo {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    background: #fff;
    box-shadow: 0 2px 12px rgba(30, 58, 76, .25);
}

.gs-dzp-img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gs-dzp-host[data-img="errore"] .gs-dzp-img {
    display: none;
}

.gs-dzp-assente {
    display: none;
    position: absolute;
    left: 50%;
    top: .75rem;
    transform: translateX(-50%);
    padding: .3rem .8rem;
    border-radius: 2rem;
    background: #fff4d6;
    color: #7a5b00;
    font-size: .8rem;
}

.gs-dzp-host[data-img="errore"] .gs-dzp-assente {
    display: inline-flex;
    gap: .4rem;
}

/* Un posto: il suo centro è (left, top). */
.gs-dzp-r {
    position: absolute;
    display: flex;
    width: var(--rw);
    height: var(--rh);
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, .55);
    border-radius: var(--rr);
    background: var(--c, #999);
    color: #111;
    font-size: var(--rf);
    line-height: 1;
    cursor: grab;
    overflow: visible;
}

.gs-dzp-r.gs-dzp-spento {
    opacity: .45;
}

.gs-dzp-r.gs-dzp-sel {
    z-index: 5;
    outline: calc(2px / var(--zoom, 1)) solid #0d6efd;
    outline-offset: calc(1px / var(--zoom, 1));
    box-shadow: 0 0 0 calc(4px / var(--zoom, 1)) rgba(13, 110, 253, .25);
}

.gs-dzp-r.gs-dzp-trascinato {
    z-index: 9;
    opacity: .85;
}

.gs-dzp-testo {
    max-width: none;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* Testi e immagini della mappa: non hanno la forma del posto. */
.gs-dzp-r.gs-dzp-deco {
    width: auto;
    height: auto;
    min-width: 1rem;
    min-height: 1rem;
    padding: 0 .2rem;
    border: 1px dashed rgba(0, 0, 0, .5);
    border-radius: .2rem;
    background: rgba(255, 255, 255, .55);
}

.gs-dzp-r.gs-dzp-deco img {
    display: block;
    max-width: 120px;
    pointer-events: none;
}

.gs-dzp-banda {
    position: absolute;
    z-index: 20;
    border: 1px dashed #0d6efd;
    background: rgba(13, 110, 253, .12);
    pointer-events: none;
}

.gs-dzp-controlli {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.gs-dzp-avviso {
    position: absolute;
    left: 50%;
    top: .6rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transform: translateX(-50%);
    padding: .35rem .5rem .35rem .85rem;
    border-radius: 2rem;
    background: #0d6efd;
    color: #fff;
    font-size: .85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.gs-dzp-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: #4a6577;
}

.gs-dzp-spazio {
    flex: 1 1 auto;
}

.gs-dzp-modificate {
    color: #b45309;
    font-weight: 600;
}

/* Pannello. */
.gs-dzp-pannello {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: calc(68vh + 4.5rem);
    overflow-y: auto;
}

.gs-dzp-sezione {
    padding: .65rem .8rem;
    border: 1px solid #dbe8f1;
    border-radius: .7rem;
    background: #fff;
}

.gs-dzp-sezione h6 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
    color: var(--gs-sea-deep);
    font-size: .85rem;
    font-weight: 700;
}

.gs-dzp-sezione h6 i {
    color: var(--gs-primary);
}

.gs-dzp-codice {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gs-ink);
}

.gs-dzp-attrezzi {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .5rem 0;
}

.gs-dzp-riga {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .4rem 0;
}

.gs-dzp-riga input {
    width: 4.5rem;
}

.gs-dzp-croce {
    display: flex;
    gap: .2rem;
}

.gs-dzp-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.gs-dzp-elenco,
.gs-dzp-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-height: 11rem;
    overflow-y: auto;
}

.gs-dzp-voce {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border: 1px solid #cfe3f4;
    border-radius: 2rem;
    background: #fff;
    color: #2b5f8a;
    font-size: .78rem;
}

.gs-dzp-voce:hover:not(:disabled) {
    background: var(--gs-primary-light);
}

.gs-dzp-voce.attivo {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

.gs-dzp-voce small {
    color: #7a8e9c;
}

.gs-dzp-pallino {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border: 1px solid rgba(0, 0, 0, .45);
    border-radius: 50%;
    background: var(--c, #999);
}

@media (max-width: 1100px) {
    .gs-dzp {
        grid-template-columns: minmax(0, 1fr);
    }

    .gs-dzp-pannello {
        max-height: none;
    }
}

/* Designer della griglia. */
.gs-dzg {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 0.75rem;
    align-items: start;
}

.gs-dzg-corpo {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.gs-dzg-zoom {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #6c8494;
    font-size: 0.82rem;
}

.gs-dzg-host {
    position: relative;
    height: 68vh;
    min-height: 22rem;
    overflow: auto;
    border: 1px solid #c7d6e0;
    border-radius: 0.7rem;
    background: #f1f5f8;
    outline: none;
    user-select: none;
}

.gs-dzg-host:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--gs-primary-rgb), 0.3);
}

.gs-dzg-host.gs-dzg-posizionando {
    cursor: crosshair;
}

.gs-dzg-quadro {
    display: grid;
    width: max-content;
}

.gs-dzg-angolo {
    position: sticky;
    z-index: 4;
    top: 0;
    left: 0;
    grid-row: 1;
    grid-column: 1;
    background: #e3ebf1;
}

/* Intestazioni di riga e di colonna: restano visibili scorrendo; i pulsanti compaiono al passaggio del mouse. */
.gs-dzg-testata {
    position: sticky;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    background: #e3ebf1;
    color: #4a6577;
    font-size: 0.78rem;
    font-weight: 700;
}

.gs-dzg-tc {
    top: 0;
    flex-direction: column;
    border-bottom: 1px solid #c7d6e0;
}

.gs-dzg-tr {
    left: 0;
    flex-direction: column;
    border-right: 1px solid #c7d6e0;
}

.gs-dzg-mini {
    display: none;
    width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0.3rem;
    background: #fff;
    color: #2b5f8a;
    font-size: 0.9rem;
    line-height: 1;
}

.gs-dzg-mini-no {
    color: #c0392b;
}

.gs-dzg-testata:hover .gs-dzg-mini {
    display: inline-flex;
}

.gs-dzg-testata:hover > span {
    display: none;
}

.gs-dzg-tc:hover,
.gs-dzg-tr:hover {
    flex-direction: row;
}

.gs-dzg-tr:hover {
    flex-direction: column;
}

.gs-dzg-tabella {
    position: relative;
    display: grid;
    background-color: #fff;
    background-image: linear-gradient(#d3dee6 1px, transparent 1px), linear-gradient(90deg, #d3dee6 1px, transparent 1px);
    background-size: var(--cw) var(--ch);
}

.gs-dzg-aggiungi {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.2rem;
}

.gs-dzg-r {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 0.35rem;
    background: var(--c, #999);
    color: #111;
    font-size: var(--rf, 12px);
    line-height: 1.15;
    text-align: center;
    cursor: grab;
}

.gs-dzg-r strong {
    max-width: 100%;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.gs-dzg-r small {
    max-width: 100%;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.75em;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.gs-dzg-r.gs-dzg-spento {
    opacity: 0.45;
}

.gs-dzg-r.gs-dzg-sel {
    z-index: 2;
    outline: 2px solid #0d6efd;
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

.gs-dzg-r.gs-dzg-deco {
    border: 1px dashed rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.gs-dzg-r.gs-dzg-deco img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

/* Creati dal browser durante il trascinamento. */
.gs-dzg-mirino {
    position: absolute;
    z-index: 5;
    border: 2px solid #0d6efd;
    border-radius: 0.3rem;
    background: rgba(13, 110, 253, 0.12);
    pointer-events: none;
}

.gs-dzg-fantasma {
    position: fixed;
    z-index: 2000;
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    background: #0d6efd;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
}

.gs-dzg-banda {
    position: fixed;
    z-index: 2000;
    border: 1px dashed #0d6efd;
    background: rgba(13, 110, 253, 0.12);
    pointer-events: none;
}

.gs-dzg-avviso {
    position: sticky;
    left: 50%;
    bottom: 0.6rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    border-radius: 2rem;
    background: #0d6efd;
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 1100px) {
    .gs-dzg {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Designer: scelta del colore di un tipo di risorsa. */
.gs-dz-colore {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Foglio da disegno del Designer (DesignerFoglio): canvas, barra strumenti, icone. */
.gs-dzf-host {
    position: relative;
    height: 62vh;
    min-height: 22rem;
    overflow: hidden;
    border: 1px solid #c7d6e0;
    border-radius: .7rem;
    background: #dfe7ec;
    outline: none;
    touch-action: none;
    user-select: none;
}

.gs-dzf-host:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--gs-primary-rgb), .3);
}

.gs-dzf-host canvas {
    display: block;
}

.gs-dzf-host.gs-dzf-spostando canvas {
    cursor: grabbing;
}

.gs-dzf-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-bottom: .4rem;
}

.gs-dzf-strumento {
    border: 1px solid #c7d6e0;
    background: #fff;
    color: #1f3a4d;
    white-space: nowrap;
}

.gs-dzf-strumento.active {
    background: var(--gs-primary, #0d6efd);
    border-color: var(--gs-primary, #0d6efd);
    color: #fff;
}

@media (max-width: 1200px) {
    .gs-dzf-strumento span {
        display: none;
    }
}

.gs-dzf-vuoto {
    padding: 1.2rem 1.4rem;
    border: 1px dashed #b5c8d4;
    border-radius: .7rem;
    background: #f7fafc;
}

.gs-dzf-opzione {
    height: 100%;
    padding: .9rem 1rem;
    border: 1px solid #d3e0e8;
    border-radius: .6rem;
    background: #fff;
}

.gs-dzf-nome {
    max-width: 34rem;
}

.gs-dzf-misure {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .3rem .5rem;
    margin-bottom: .4rem;
    font-size: .8rem;
}

.gs-dzf-icone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
    gap: .3rem;
}

.gs-dzf-icona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .25rem .1rem;
    border: 1px solid #d3e0e8;
    border-radius: .4rem;
    background: #fff;
    font-size: .65rem;
    line-height: 1.1;
    color: #1f3a4d;
}

.gs-dzf-icona img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.gs-dzf-icona:hover,
.gs-dzf-icona.active {
    border-color: var(--gs-primary, #0d6efd);
    background: #eaf2ff;
}

/* Controllo della mappa (DesignerPiantina): una riga per controllo, colorata per esito. */
.gs-dzp-controllo.ok {
    color: #2f7d4f;
}

.gs-dzp-controllo.errore {
    color: #b42318;
}

.gs-dzp-controllo.avviso {
    color: #a15c00;
}

.gs-dzf-scala {
    margin-top: .3rem;
}