/* ==========================================================================
   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: #e6f6fd;
    --gs-sea-deep: #1f5c8a;
    --gs-sand: #f7f2e7;
    --gs-sand-dark: #eee5d1;
    --gs-ink: #1e3a4c;

    /* Secondario: giallo */
    --gs-secondary: #ffc100;
    --gs-secondary-rgb: 255, 193, 0;
    --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;
    /* Su telefono 100vh comprende la barra del browser e taglia il fondo: dvh è l'altezza realmente visibile. */
    height: 100dvh;
    box-sizing: border-box;
    /* Tacca, angoli arrotondati e barra Home (iPhone, app installata o schermo orizzontale). */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 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);
    /* Tre colonne: logo e ricerca a sinistra, nome dello stabilimento al centro della barra (le due laterali pesano uguale), utente a destra. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    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;
    }

    /* Voce che apre un sito esterno (Food): l'immagine si usa come maschera, così ha lo stesso grigio delle altre icone; quando la voce è selezionata
       (mouse sopra, focus o clic) diventa verde, insieme al testo. */
    .gs-menu-item .gs-menu-img {
        display: inline-block;
        width: 1.2rem;
        height: 1.35rem;
        background-color: #8ba2b1;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .gs-menu-esterno:hover,
    .gs-menu-esterno:focus-visible,
    .gs-menu-esterno:active {
        color: #3eb489;
    }

        .gs-menu-esterno:hover .gs-menu-img,
        .gs-menu-esterno:focus-visible .gs-menu-img,
        .gs-menu-esterno:active .gs-menu-img {
            background-color: #3eb489;
        }

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

        /* Con il mouse sopra, icona e testo diventano azzurri. */
        .gs-menu-item:hover,
        .gs-menu-item:hover i {
            color: var(--gs-primary);
        }

        /* Food resta verde. */
        a.gs-menu-esterno:hover,
        a.gs-menu-esterno:focus-visible,
        a.gs-menu-esterno:active {
            color: #3eb489;
        }

    .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-left {
    grid-column: 1;
}

.gs-ribbon-center {
    grid-column: 2;
    justify-content: center;
}

.gs-ribbon-right {
    grid-column: 3;
    justify-content: flex-end;
}

.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;
	max-height: 72dvh;
	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-*).
   Il testo sul giallo è scuro, per il contrasto.
   ========================================================================== */

/* Il testo sul giallo è scuro, per il contrasto. */
.btn-secondary {
	color: #212529;
	background-color: #ffc100;
	border-color: #ffc100;
}

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

.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
	color: #212529;
	background-color: #e6ad00;
	border-color: #e6ad00;
	box-shadow: 0 0 0 .25rem rgba(255, 193, 0, .5);
}

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

.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);
}

/* I menu a tendina di DevExpress (calendario del periodo, elenchi) stanno a 1050, sotto le finestre di Bootstrap (1055): dentro una finestra `gs-finestra`
   comparivano nascosti. Sopra le finestre e il loro sfondo, sotto le notifiche (2500). */
dxbl-popup-cell {
	z-index: 1060 !important;
}

/* 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;
}

/* Schede (tab) nelle finestre: stesso aspetto delle schede della pagina Conto (icona, sottolineatura gialla sulla scheda attiva). */
.gs-finestra .gs-schede {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 .75rem;
	padding: 0;
	border-bottom: 1px solid var(--gs-sand-dark);
	list-style: none;
}

.gs-finestra .gs-scheda {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .8rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: .5rem .5rem 0 0;
	background: none;
	color: #6c8494;
	font-size: .9rem;
	font-weight: 600;
}

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

.gs-finestra .gs-scheda.active {
	border-bottom-color: var(--gs-secondary);
	color: var(--gs-sea-deep);
}

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

/* 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;
}

/* Foglio: campi con l'etichetta sopra, in due colonne. */
.gs-dzf-campi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem .6rem;
    margin: .4rem 0 .6rem;
}

.gs-dzf-campi label {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    color: #6c8494;
    font-size: .78rem;
    font-weight: 600;
}

.gs-dzf-campi .form-control {
    width: 100%;
}

.gs-dzf-campi .form-control-color {
    min-width: 0;
    height: calc(1.5em + .5rem + 2px);
    padding: .2rem;
}

.gs-dzf-spunte {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .4rem;
}

.gs-dzf-scala-riga {
    margin-bottom: .4rem;
}

.gs-dzf-scala-riga .form-control {
    min-width: 0;
}

.gs-dzf-scala-riga .input-group-text {
    font-size: .78rem;
}

/* Pulsanti in due colonne, tutti della stessa larghezza. */
.gs-dzf-pulsanti {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .6rem;
}

.gs-dzf-pulsanti .btn {
    white-space: nowrap;
}

/* Designer griglia: elementi trascinabili dalla card (icone e testo) sulla griglia. */
.gs-dzf-icona[data-trascina],
.gs-dzf-maniglia {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.gs-dzf-maniglia {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border: 1px dashed var(--gs-primary);
    border-radius: .4rem;
    color: var(--gs-primary);
    font-size: .8rem;
}

.gs-dzf-maniglia.spenta {
    border-color: #c9d6de;
    color: #9fb1bd;
    cursor: not-allowed;
}

.gs-dzf-icona img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Mappa: calendario della disponibilità di un posto. */
.gs-dsp-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: .75rem; font-size: .85rem; }
.gs-dsp-sw { display: inline-block; width: .9rem; height: .9rem; margin-right: .3rem; border-radius: .25rem; vertical-align: middle; }
.gs-dsp-mesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.gs-dsp-mese { padding: .5rem .6rem; border: 1px solid #d8e6ee; border-radius: .6rem; background: #fff; }
.gs-dsp-mese-titolo { margin-bottom: .35rem; color: var(--gs-primary); font-size: .85rem; font-weight: 700; }
.gs-dsp-giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gs-dsp-intest { color: #8fa3b0; font-size: .65rem; font-weight: 700; text-align: center; }
.gs-dsp-g { padding: .2rem 0; border: 1px solid transparent; border-radius: .3rem; font-size: .78rem; line-height: 1.2; cursor: pointer; }
.gs-dsp-g.gs-dsp-libero, .gs-dsp-sw.gs-dsp-libero { background: #d7f0e0; color: #1d7a3a; }
.gs-dsp-g.gs-dsp-occupato, .gs-dsp-sw.gs-dsp-occupato { background: #f8d9d9; color: #b03a3a; }
.gs-dsp-g.gs-dsp-passato { opacity: .5; }
.gs-dsp-sw.gs-dsp-passato { background: #dfe7ec; }
.gs-dsp-g.gs-dsp-oggi { border-color: var(--gs-primary); font-weight: 700; }
.gs-dsp-g.gs-dsp-sel { border-color: #1b6ca8; box-shadow: 0 0 0 2px rgba(var(--gs-primary-rgb), .45); }
.gs-dsp-periodi { display: flex; flex-wrap: wrap; gap: .4rem; }
.gs-dsp-periodo { display: inline-flex; align-items: baseline; gap: .4rem; padding: .25rem .6rem; border: 1px solid #9fd6b4; border-radius: .5rem; background: #f2fbf5; color: #1d7a3a; font-size: .85rem; font-weight: 600; }
.gs-dsp-periodo small { color: #5d7485; font-weight: 400; }
.gs-dsp-periodo.scelto, .gs-dsp-periodo:hover { border-color: #2e9d5b; background: #d7f0e0; }

/* Ricerca delle funzioni nella ribbon: campo (un form-control-sm di Bootstrap, come gli altri input) con elenco a tendina dei risultati. */
.gs-ricerca {
    position: relative;
    flex: 0 0 26rem;
}

/* Su schermi stretti il campo si restringe e l'elenco resta largo come serve. */
@media (max-width: 1100px) {
    .gs-ricerca {
        flex: 0 1 14rem;
        min-width: 9rem;
    }

    .gs-ricerca-risultati {
        min-width: 22rem;
    }
}

.gs-ricerca-campo {
    position: relative;
}

.gs-ricerca-bottone,
.gs-ricerca-chiudi {
    display: none;
}

.gs-ricerca-lente {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7c94a3;
    font-size: 0.85rem;
    pointer-events: none;
}

.gs-ricerca-input {
    padding-left: 2.1rem;
}

/* Da PC il campo è una "pillola" leggera: sfondo appena colorato, che diventa bianco con l'anello azzurro quando ha il cursore; il tasto rapido (Ctrl K) si vede
   finché è vuoto e senza cursore. */
@media (min-width: 768px) {
    .gs-ricerca-input {
        border-color: #dbe6ee;
        border-radius: 2rem;
        background-color: #f4f8fb;
        transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .gs-ricerca-input:hover {
        border-color: #b9cfdd;
    }

    .gs-ricerca-input:focus {
        border-color: var(--gs-primary);
        background-color: #fff;
        box-shadow: 0 0 0 0.2rem rgba(var(--gs-primary-rgb), 0.2);
    }

    .gs-ricerca-lente {
        left: 0.85rem;
    }

    .gs-ricerca-input {
        padding-left: 2.35rem;
    }

    .gs-ricerca-tasto {
        position: absolute;
        top: 50%;
        right: 0.6rem;
        padding: 0.05rem 0.4rem;
        border: 1px solid #cfdce6;
        border-radius: 0.35rem;
        background: #fff;
        color: #7c94a3;
        font-family: inherit;
        font-size: 0.68rem;
        line-height: 1.3;
        pointer-events: none;
        transform: translateY(-50%);
    }

    .gs-ricerca-ha-testo .gs-ricerca-tasto,
    .gs-ricerca-campo:focus-within .gs-ricerca-tasto {
        display: none;
    }
}

.gs-ricerca-tasto {
    display: none;
}

@media (min-width: 768px) {
    .gs-ricerca-tasto {
        display: block;
    }
}

/* La parte del titolo che corrisponde a quanto scritto. */
.gs-ricerca-evid {
    padding: 0;
    border-radius: 0.2rem;
    background: rgba(var(--gs-primary-rgb), 0.18);
    color: inherit;
}

/* Riga con i tasti, in fondo all'elenco (solo da PC). */
.gs-ricerca-guida {
    display: none;
}

@media (min-width: 768px) {
    .gs-ricerca-guida {
        display: block;
        margin-top: 0.25rem;
        padding: 0.35rem 0.6rem 0.15rem;
        border-top: 1px solid var(--gs-sand-dark);
        color: #7c94a3;
        font-size: 0.72rem;
    }

    .gs-ricerca-guida kbd {
        margin-right: 0.15rem;
        padding: 0 0.3rem;
        border: 1px solid #cfdce6;
        border-radius: 0.25rem;
        background: #f4f8fb;
        color: #5d7485;
        font-family: inherit;
        font-size: 0.68rem;
    }
}

/* Da PC: piccola x dentro il campo, solo con un testo scritto, per svuotare la ricerca. Da telefono il pulsante è quello a tutto schermo (più sotto). */
@media (min-width: 768px) {
    .gs-ricerca-ha-testo .gs-ricerca-chiudi {
        position: absolute;
        top: 50%;
        right: 0.4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.4rem;
        height: 1.4rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: none;
        color: #7c94a3;
        font-size: 0.7rem;
        transform: translateY(-50%);
    }

        .gs-ricerca-ha-testo .gs-ricerca-chiudi:hover {
            background-color: var(--gs-sand);
            color: var(--gs-ink);
        }

    .gs-ricerca-ha-testo .gs-ricerca-input {
        padding-right: 2.1rem;
    }
}

.gs-ricerca-risultati {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 1050;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--gs-sand-dark);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(30, 58, 76, 0.16);
    max-height: 70vh;
    overflow-y: auto;
}

.gs-ricerca-voce {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

    .gs-ricerca-voce.attiva {
        background-color: var(--gs-primary-light);
    }

.gs-ricerca-icona {
    flex-shrink: 0;
    width: 1.3rem;
    text-align: center;
    font-size: 1.05rem;
    color: var(--gs-sea-deep);
}

.gs-ricerca-testi {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gs-ricerca-titolo {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-ricerca-percorso {
    font-size: 0.74rem;
    color: #7c94a3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-ricerca-vuoto {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: #7c94a3;
}

/* Da telefono il campo diventa un pulsante a lente (come quello del menu) e, premuto, la ricerca occupa tutto lo schermo. */
@media (max-width: 767.98px) {
    .gs-ricerca {
        flex: 0 0 auto;
        min-width: 0;
    }

    .gs-ricerca-bottone {
        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.5rem;
        line-height: 1;
    }

        .gs-ricerca-bottone:hover {
            color: var(--gs-primary);
        }

    .gs-ricerca-campo {
        display: none;
    }

    .gs-ricerca-piena {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

        .gs-ricerca-piena .gs-ricerca-bottone {
            display: none;
        }

        .gs-ricerca-piena .gs-ricerca-campo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.75rem;
            border-bottom: 1px solid var(--gs-sand-dark);
        }

        .gs-ricerca-piena .gs-ricerca-lente {
            left: 1.45rem;
        }

        .gs-ricerca-piena .gs-ricerca-input {
            flex: 1;
            height: 2.5rem;
            font-size: 1rem;
        }

    .gs-ricerca-chiudi {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border: none;
        background: none;
        font-size: 1.15rem;
        color: var(--gs-ink);
    }

    .gs-ricerca-piena .gs-ricerca-risultati {
        position: static;
        flex: 1;
        min-height: 0;
        max-height: none;
        min-width: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0.4rem 0.5rem;
    }

    .gs-ricerca-piena .gs-ricerca-voce {
        padding: 0.65rem 0.6rem;
    }

    .gs-ricerca-piena .gs-ricerca-titolo {
        font-size: 1rem;
    }

    .gs-ricerca-piena .gs-ricerca-percorso {
        font-size: 0.8rem;
    }
}

/* Da telefono logo, lente e utente non lasciano spazio per centrare il nome: lo stabilimento prende lo spazio che resta e si accorcia con i puntini. */
@media (max-width: 767.98px) {
    .gs-ribbon {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0 0.6rem;
    }

    .gs-ribbon-azienda {
        max-width: 100%;
    }

    /* Il logo non si mostra: lascia spazio al nome dello stabilimento. */
    .gs-ribbon-brand {
        display: none;
    }
}

/* ==========================================================================
   Telefono e tablet: menu a scomparsa, ribbon compatta, bersagli di tocco, finestre a schermo intero
   ========================================================================== */

/* Schermo largo: il contenitore del menu non esiste come riquadro (resta solo il menu) e il velo non serve. */
.gs-sidebar-area {
    display: contents;
}

.gs-sidebar-area.gs-menu-chiuso {
    display: none;
}

.gs-sidebar-velo {
    display: none;
}

@media (max-width: 767.98px) {
    /* Il menu diventa un pannello sopra la pagina, chiuso all'apertura; il velo scuro dietro si tocca per chiuderlo. */
    .gs-sidebar-area,
    .gs-sidebar-area.gs-menu-chiuso {
        position: fixed;
        top: calc(52px + env(safe-area-inset-top));
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: flex;
        visibility: hidden;
        pointer-events: none;
    }

    .gs-sidebar-area.gs-menu-mobile-aperto {
        visibility: visible;
        pointer-events: auto;
    }

    .gs-sidebar-area .gs-sidebar {
        width: 6.5rem;
        height: 100%;
        padding-left: calc(.4rem + env(safe-area-inset-left));
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
        box-shadow: 4px 0 16px rgba(0, 0, 0, .2);
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .gs-sidebar-area.gs-menu-mobile-aperto .gs-sidebar {
        transform: translateX(0);
    }

    .gs-sidebar-velo {
        display: block;
        flex: 1;
        background: rgba(0, 0, 0, .35);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .gs-sidebar-area.gs-menu-mobile-aperto .gs-sidebar-velo {
        opacity: 1;
    }

    .gs-menu-item {
        min-height: 3.6rem;
        font-size: .75rem;
    }

    /* Ribbon: meno aria ai lati, il nome dell'azienda lascia spazio ai pulsanti. */
    .gs-ribbon {
        padding: 0 .5rem;
        gap: .5rem;
    }

    .gs-ribbon-azienda {
        max-width: 32vw;
        font-size: .8rem;
    }

    .gs-ribbon-logo {
        max-width: 7.5rem;
    }
}

/* Dispositivi a tocco: pulsanti e voci almeno alti come un dito, e campi a 16 px (sotto, iOS ingrandisce la pagina entrando nel campo). */
@media (pointer: coarse) {
    .gs-sidebar-toggle {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.5rem;
    }

    .gs-avatar {
        width: 40px;
        height: 40px;
    }

    /* Esclusi i pulsanti della barra della Mappa (dettaglio e carrello), alti 31 px come i campi accanto. */
    .btn:not(.btn-sm):not(.btn-close):not(.gs-mtb-dettaglio):not(.gs-cart-principale):not(.gs-cart-freccia) {
        min-height: 2.5rem;
    }

    .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    input:not([type=checkbox]):not([type=radio]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* Finestre modali a schermo intero sui telefoni, con il corpo che scorre e i pulsanti sempre raggiungibili. */
@media (max-width: 575.98px) {
    /* !important: alcune finestre (ricerca ospite, occupazioni, anteprima) hanno una larghezza massima propria, anche negli stili scoped. */
    .modal-dialog {
        width: 100% !important;
        min-height: 100dvh;
        max-width: none !important;
        margin: 0;
    }

    .modal-content {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .modal-body {
        overflow-y: auto;
    }

    .modal-footer {
        padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    }
}

/* Schermate solo per tablet e computer (Designer, Planner): sul telefono la pagina si nasconde e resta l'avviso. */
.gs-avviso-largo {
    display: none;
}

@media (max-width: 767.98px) {
    .gs-solo-largo {
        display: none !important;
    }

    .gs-avviso-largo {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .75rem;
        padding: 3rem 1.5rem;
        text-align: center;
        color: var(--gs-ink);
    }

    .gs-avviso-largo i {
        font-size: 3rem;
        color: var(--gs-primary);
    }

    .gs-avviso-largo h2 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }

    .gs-avviso-largo p {
        margin: 0;
        max-width: 22rem;
    }
}

/* Telefono: nelle finestre di modifica degli Archivi (e nella scheda cliente del Conto) le schede interne scorrono di lato. La larghezza (94vw) non si tocca: la posizione la calcola DevExpress. */
@media (max-width: 575.98px) {
	.gs-ar-popup .nav-tabs,
	.gs-ar-popup .dxbl-tabs-tablist {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}
}