/* ==========================================================================
   Planner: posti in riga, giorni in colonna, conti come barre. Le misure (larghezza del giorno --gw, altezza della riga --rh, colonna dei posti --lw,
   numero di giorni --n, corpo del testo --fs) sono variabili della tela (.gs-pn-tela): barre, fasce e celle si posizionano con calc() su queste, così
   cambiare zoom non ridisegna niente e la tela, copiata per la stampa, porta con sé le sue misure. Gli stili sono globali perché le barre temporanee
   (fantasma, giorni scelti) le crea il JavaScript.
   ========================================================================== */

.gs-pn {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    height: 100%;
    min-height: 0;
    padding: .35rem .5rem .25rem;
    background: #fff;
}

.gs-pn-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.gs-pn-barra .form-control-sm,
.gs-pn-barra .form-select-sm,
.gs-pn-barra .btn-sm {
    min-height: 1.9rem;
    padding-top: .1rem;
    padding-bottom: .1rem;
}

/* Spiaggia: input-group con l'icona, come nella Mappa (gs-mtb-spiaggia). */
.gs-pn-w-spiaggia { width: 11rem; }
.gs-pn-w-spiaggia .input-group-text { padding-inline: .45rem; color: #11aeef; background: #fff; }
.gs-pn-w-spiaggia .form-select { min-width: 0; padding-left: .4rem; }
.gs-pn-w-cerca { position: relative; width: 18rem; }
/* Icona della ricerca come quella del calendario del periodo: azzurra, dentro il campo, senza il riquadro grigio. */
.gs-pn-w-cerca .gs-pn-cerca-icona { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); z-index: 1; color: #11aeef; pointer-events: none; }
.gs-pn-w-cerca .form-control { padding-left: 1.9rem; }

/* Campo del periodo (toolbar): il selettore date di DevExpress (come nella Mappa), alla stessa altezza degli altri
   controlli della barra. L'icona sta in posizione assoluta accanto al campo: avvolgere il componente in un input-group
   rompe la posizione del suo popup. Non è una pagina con CSS isolato (il JavaScript del Planner crea barre fuori da
   Blazor), quindi le regole sono dirette, senza ::deep. Il nome è "gs-pn-w-periodo" (non "gs-pn-periodo", già usato più
   sotto per la striscia del periodo scelto sullo sfondo della tela: stesso nome, due cose diverse, un bordo azzurro
   indesiderato). */
.gs-pn-w-periodo {
    position: relative;
    width: 12.75rem;
    cursor: pointer;
}

.gs-pn-w-periodo .gs-pn-periodo-icona {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #11aeef;
    pointer-events: none;
}

.gs-pn-w-periodo dxbl-date-range-picker {
    width: 100%;
    height: 1.9rem;
    font-size: .875rem;
}

.gs-pn-w-periodo .dxbl-text-edit-input {
    padding-left: 1.9rem;
    cursor: pointer;
}
.gs-pn-w-num { width: 4rem; }
.gs-pn-spazio { flex: 1; }
.gs-pn-agg { margin-left: .25rem; font-size: .72rem; }

.gs-pn-zoom {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: #5b6b78;
    font-size: .85rem;
}

/* I due cursori (larghezza dei giorni, altezza delle righe) nel colore primario dell'applicazione. */
.gs-pn-zoom input[type=range] { width: 5.5rem; accent-color: var(--gs-primary); }
.gs-pn-ruota { display: inline-block; transform: rotate(90deg); }

/* Barra dei filtri nello stile delle barre dei posti e del conto selezionato (stessa spaziatura, angoli e bordo sottile), con un fondo grigetto. */
.gs-pn-filtri {
    padding: .25rem .6rem;
    border: 1px solid #d5dbe0;
    border-radius: .4rem;
    background: #eceff2;
    font-size: .82rem;
}

.gs-pn-filtri .form-select { width: auto; max-width: 11rem; }
.gs-pn-sep { width: 1px; height: 1.4rem; background: #d6dde2; }
.gs-pn-et-sel { display: flex; align-items: center; gap: .3rem; margin: 0; color: #5b6b78; }
.gs-pn-filtri .form-check-label { font-size: .82rem; }

.gs-pn-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem;
    border-radius: .4rem;
    font-size: .82rem;
}

.gs-pn-info-sel { background: var(--gs-primary-light); border: 1px solid #bfe6f8; }
.gs-pn-info-per { background: #fff8e1; border: 1px solid #ffe69c; }
.gs-pn-info-testo { flex: 1; min-width: 12rem; }

/* L'area che scorre: l'intestazione dei giorni resta in alto, la colonna dei posti a sinistra. */
.gs-pn-host {
    flex: 1;
    min-height: 0;
    overflow: auto;
    position: relative;
    border: 1px solid #d6dde2;
    border-radius: .4rem;
    background: #fff;
    outline: none;
}

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

.gs-pn-tela {
    position: relative;
    width: max-content;
    min-width: 100%;
    font-size: var(--fs);
    background: #fff;
}

.gs-pn-intest {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    width: calc(var(--lw) + var(--n) * var(--gw));
    background: #fff;
}

.gs-pn-angolo {
    position: sticky;
    left: 0;
    z-index: 7;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: var(--lw);
    background: #e6eef3;
    border-right: 1px solid #c3ced6;
    border-bottom: 1px solid #c3ced6;
    color: #44525d;
    font-size: .66rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
}

.gs-pn-asse {
    flex: none;
    width: calc(var(--n) * var(--gw));
    border-bottom: 1px solid #c3ced6;
    user-select: none;
    touch-action: none;
    cursor: col-resize;
}

.gs-pn-mesi { display: flex; height: 16px; background: #e6eef3; }

.gs-pn-mese {
    flex: none;
    width: calc(var(--n) * var(--gw));
    overflow: hidden;
    padding-left: 4px;
    border-left: 1px solid #b4c1ca;
    color: var(--gs-sea-deep);
    font-size: .68rem;
    font-weight: 700;
    line-height: 16px;
    text-transform: capitalize;
    white-space: nowrap;
}

.gs-pn-gg { display: flex; height: 18px; background: #f7fafb; }
.gs-pn-gg.alto { height: 30px; }

.gs-pn-g {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--gw);
    overflow: hidden;
    color: #44525d;
    font-size: .64rem;
    line-height: 1.05;
}

.gs-pn-g small { color: #8a98a3; font-size: .56rem; }
.gs-pn-g.we { background: #eaeff2; color: #b3283a; }
.gs-pn-g.m1 { border-left: 1px solid #b4c1ca; }
.gs-pn-g.oggi { background: var(--gs-secondary); color: #3a2c00; font-weight: 700; }

/* Posti liberi per giorno: verde molti, giallo pochi, arancio quasi finiti, rosso nessuno. */
.gs-pn-tot { display: flex; height: 16px; }

.gs-pn-t {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gw);
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    overflow: hidden;
}

.gs-pn-t.t3 { background: #3fb76d; }
.gs-pn-t.t2 { background: #e5b836; color: #4a3a00; }
.gs-pn-t.t1 { background: #ef8a3a; }
.gs-pn-t.t0 { background: #dc3f4d; }
.gs-pn-t.oggi { box-shadow: inset 0 -3px 0 var(--gs-secondary); }
.gs-pn-ta { background: #e6f6ed; color: #1d7a46; }
.gs-pn-tp { background: #fdeceb; color: #b3283a; }

/* Il corpo: le fasce (fine settimana, oggi, periodo scelto) stanno dietro le righe, che sono trasparenti. */
.gs-pn-corpo {
    position: relative;
    isolation: isolate;
    width: calc(var(--lw) + var(--n) * var(--gw));
}

.gs-pn-fondo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--lw);
    width: calc(var(--n) * var(--gw));
    z-index: 0;
    pointer-events: none;
}

.gs-pn-fondo > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--s) * var(--gw));
    width: calc(var(--n) * var(--gw));
}

.gs-pn-we { background: rgba(110, 135, 150, .11); }
.gs-pn-oggi { background: rgba(255, 193, 0, .22); box-shadow: inset 1px 0 0 #e0a800, inset -1px 0 0 #e0a800; }
.gs-pn-fondo > .gs-pn-m1 { width: 1px; background: #b4c1ca; }
.gs-pn-periodo { background: rgba(var(--gs-primary-rgb), .15); box-shadow: inset 1px 0 0 var(--gs-primary), inset -1px 0 0 var(--gs-primary); }

.gs-pn-riga {
    position: relative;
    z-index: 1;
    display: flex;
    height: calc(var(--rh) * var(--c));
    border-bottom: 1px solid rgba(30, 58, 76, .08);
}

.gs-pn-riga.libera .gs-pn-celle { background-color: rgba(63, 183, 109, .14); }
.gs-pn-riga.libera .gs-pn-et { background: #dff3e7; color: #1d7a46; }

.gs-pn-et {
    position: sticky;
    left: 0;
    z-index: 4;
    flex: none;
    display: flex;
    align-items: center;
    width: var(--lw);
    padding: 0 4px;
    overflow: hidden;
    background: #f1f5f7;
    border-right: 1px solid #c3ced6;
    color: var(--gs-ink);
    font-size: var(--fs);
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

.gs-pn-celle {
    position: relative;
    flex: none;
    width: calc(var(--n) * var(--gw));
    background-image: linear-gradient(90deg, rgba(30, 58, 76, .09) 1px, transparent 1px);
    background-size: var(--gw) 100%;
    touch-action: none;
    cursor: crosshair;
}

.gs-pn-tela.senza-linee .gs-pn-celle { background-image: none; }

.gs-pn-gr {
    position: relative;
    z-index: 1;
    height: 20px;
    background: #e3ecf1;
    border-bottom: 1px solid #c3ced6;
}

.gs-pn-gr-bt {
    position: sticky;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 100%;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--gs-sea-deep);
    font-size: .74rem;
    cursor: pointer;
}

.gs-pn-gr-bt small { color: #6c7a86; }

.gs-pn-vuoto {
    position: sticky;
    left: 0;
    z-index: 3;
    width: max-content;
    padding: 2rem;
    color: #6c7a86;
}

/* Le barre: il contenitore è il bersaglio del mouse, l'interno disegna (colore pieno, bordo dello stato di pagamento). */
.gs-pn-b {
    position: absolute;
    z-index: 2;
    left: calc(var(--s) * var(--gw));
    top: calc(var(--l) * var(--rh));
    width: calc(var(--n) * var(--gw));
    height: var(--rh);
    padding: 1px 0;
    box-sizing: border-box;
    user-select: none;
    touch-action: none;
    cursor: pointer;
}

.gs-pn-b.mov { cursor: grab; }

.gs-pn-bi {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 100%;
    margin: 0 1px;
    padding: 0 3px;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid;
    border-width: clamp(1px, calc(var(--rh) * .09), 2px);
    border-radius: 4px;
    color: #fff;
    font-size: var(--fs);
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .6);
    white-space: nowrap;
}

.gs-pn-bi span { overflow: hidden; text-overflow: ellipsis; }
.gs-pn-bi i { flex: none; font-size: 1em; }

/* Icona dell'occupazione: le stesse immagini della Mappa (AspettoRisorsaCalcolatore.Icona), non un'icona di Bootstrap. */
.gs-pn-bi img { flex: none; width: 1em; height: 1em; object-fit: contain; }

.gs-pn-b.chiara .gs-pn-bi { color: #111; text-shadow: none; }
.gs-pn-b.tsx .gs-pn-bi { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gs-pn-b.tdx .gs-pn-bi { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gs-pn-b.riserva .gs-pn-bi { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 10px); }
.gs-pn-b.checkin .gs-pn-bi { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 4px, transparent 4px 8px); }
.gs-pn-b.fioco .gs-pn-bi { opacity: .2; filter: grayscale(.5); }
/* Conto selezionato: bordo nero DENTRO la barra (un contorno esterno veniva coperto dalle barre vicine) con un filo bianco all'interno, ben visibile su ogni colore. */
.gs-pn-b.sel { z-index: 4; }
.gs-pn-b.sel .gs-pn-bi { outline: none; box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px #fff; }
.gs-pn-b.trascina { opacity: .35; }
.gs-pn-b:hover .gs-pn-bi { filter: brightness(1.08); }

.gs-pn-buco {
    position: absolute;
    z-index: 1;
    top: 1px;
    bottom: 1px;
    left: calc(var(--s) * var(--gw));
    width: calc(var(--n) * var(--gw));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px dashed #3fb76d;
    border-radius: 3px;
    background: rgba(63, 183, 109, .1);
    color: #1d7a46;
    font-size: calc(var(--fs) - 1px);
    pointer-events: none;
}

/* Temporanei, creati dal JavaScript durante il trascinamento. */
.gs-pn-fantasma {
    position: absolute;
    z-index: 5;
    top: 0;
    display: flex;
    align-items: center;
    height: var(--rh);
    padding: 0 4px;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px dashed var(--gs-primary);
    border-radius: 4px;
    background: rgba(var(--gs-primary-rgb), .22);
    color: #0b4f73;
    font-size: var(--fs);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.gs-pn-fantasma.conflitto { border-color: #dc3f4d; background: rgba(220, 63, 77, .26); color: #7f1d2a; }
.gs-pn-fantasma.uguale { opacity: .5; }

.gs-pn-scelta {
    position: absolute;
    z-index: 3;
    top: 1px;
    bottom: 1px;
    left: calc(var(--s) * var(--gw));
    width: calc(var(--n) * var(--gw));
    box-sizing: border-box;
    /* Il periodo che si sta scegliendo trascinando sui giorni liberi: giallo #ffc100 (come il posto selezionato nelle mappe) pieno, con bordo nero tratteggiato (quando si rilascia diventa il riquadro
       "selezionato", pieno e con l'alone che pulsa). */
    border: 2px dashed #000;
    border-radius: 3px;
    background: #ffc100;
    pointer-events: none;
}

.gs-pn-host.gs-pn-trascina,
.gs-pn-host.gs-pn-trascina * { cursor: grabbing !important; }

.gs-pn-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    padding: 0 .2rem;
    color: #5b6b78;
    font-size: .72rem;
}

.gs-pn-sw {
    display: inline-block;
    width: 14px;
    height: 10px;
    border: 3px solid;
    border-radius: 3px;
    background: #9aa7b1;
    vertical-align: middle;
}

.gs-pn-sw-riserva { background: repeating-linear-gradient(45deg, #94a1ac 0 4px, #7d8b97 4px 8px); border-color: #5f6d79; }
.gs-pn-sw-check { background: #fff; border-color: #000; }
.gs-pn-suggerimento { margin-left: auto; }

/* Finestra di spostamento. */
.gs-pn-sp-confronto {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.gs-pn-sp-confronto > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .7rem;
    border: 1px solid #d6dde2;
    border-radius: .5rem;
    background: #f7fafb;
}

.gs-pn-sp-confronto strong { font-size: 1.15rem; }
.gs-pn-sp-et { color: #6c7a86; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.gs-pn-sp-ok { border-color: #3fb76d !important; background: #effaf3 !important; }
.gs-pn-sp-ko { border-color: #dc3f4d !important; background: #fdf0f1 !important; }

/* Scheda rapida del conto (come quella della Mappa). */
.gs-pn-scheda {
    position: fixed;
    z-index: 1500;
    width: 22rem;
    max-width: 92vw;
    max-height: min(30rem, 80vh);
    overflow: hidden;
    padding: .65rem .8rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 6px 20px rgba(15, 45, 65, .35);
    color: #1e3a4c;
    font-size: .75rem;
    line-height: 1.35;
    pointer-events: none;
}

.gs-pn-scheda.sinistra { transform: translateX(-100%); }
.gs-pn-scheda.sopra { transform: translateY(-100%); }
.gs-pn-scheda.sinistra.sopra { transform: translate(-100%, -100%); }

.gs-pn-s-titolo { overflow: hidden; font-size: .9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gs-pn-s-rif { color: #5b6b78; font-size: .72rem; }
.gs-pn-s-importi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin: .5rem 0 .3rem; }
.gs-pn-s-importi > div { padding: .25rem .4rem; border-radius: .35rem; background: #f4f7f9; text-align: center; }
.gs-pn-s-importi span { display: block; color: #6c7a86; font-size: .65rem; letter-spacing: .03em; text-transform: uppercase; }
.gs-pn-s-importi strong { font-size: .85rem; }
.gs-pn-scheda .ok { color: #198754; }
.gs-pn-scheda .ko { color: #dc3545; }
.gs-pn-s-nota { color: #6c7a86; font-size: .7rem; }
.gs-pn-s-sezione { margin: .5rem 0 .15rem; padding-top: .35rem; border-top: 1px solid #eee5d1; color: #1f5c8a; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gs-pn-s-riga { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; padding: .08rem 0; }
.gs-pn-s-riga span { color: #5b6b78; }
.gs-pn-s-riga em { min-width: 3.5rem; font-style: normal; text-align: right; }
.gs-pn-s-altri { color: #6c7a86; font-style: italic; }
.gs-pn-s-testo { white-space: pre-line; }

/* Posti selezionati per un conto nuovo: giallino (più chiaro del giallo secondario #ffc100 delle mappe, che resta per i pulsanti) con bordo nero e, come le risorse
   selezionate nelle mappe, l'alone nero che pulsa. */
.gs-pn-info-multi { background: #fff8dc; border: 1px solid #ffc100; }
.gs-pn-riga.multi .gs-pn-et { background: #ffc100; color: #000; box-shadow: inset 3px 0 0 #000; }
.gs-pn-riga.multi .gs-pn-celle { background-color: rgba(255, 193, 0, .12); }
.gs-pn-scelta-multi {
    z-index: 4;
    border: 2px solid #000;
    background: #ffc100;
    color: #000;
    font-size: .7rem;
    font-weight: 600;
    line-height: calc(var(--rh) - 6px);
    padding-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    animation: gs-pn-pulsa 1.2s ease-in-out infinite;
}
/* L'alone nero nasce da fuori del bordo e si allarga svanendo (come nelle mappe). Il riquadro taglia il testo (overflow), ma l'ombra esterna no. */
@keyframes gs-pn-pulsa {
    0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .65); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .gs-pn-scelta-multi { animation: none; }
}

/* Carrello della selezione (come quello delle mappe): pulsante diviso con tendina dei posti. */
.gs-pn-sel-principale { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #212529; }
.gs-pn-sel-principale:hover, .gs-pn-sel-principale:focus, .gs-pn-sel-principale:active { color: #212529; }
.gs-pn-sel-nr { min-width: 1.35rem; padding: 0 .35rem; border-radius: 1rem; background: #fff; color: #212529; font-size: .8rem; line-height: 1.35rem; text-align: center; }

.gs-pn-cart-freccia { font-weight: 600; background: #fff; }
.gs-pn-cart-pannello { width: 17rem; max-width: calc(100vw - 2rem); padding: .3rem; border: 0; border-radius: .9rem; box-shadow: 0 6px 20px rgba(15, 45, 65, .22); font-size: .78rem; line-height: 1.25; }
.gs-pn-cart-elenco { display: flex; flex-direction: column; gap: .15rem; max-height: 40vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.gs-pn-cart-elenco li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .4rem; padding: .2rem .3rem; border-radius: .55rem; transition: background-color .12s; }
.gs-pn-cart-elenco li:hover { background: #f1f6fa; }
.gs-pn-cart-posto { min-width: 2rem; padding: .05rem .4rem; border-radius: 1rem; background: #e6f1fa; color: #1a5a8c; font-weight: 700; text-align: center; }
.gs-pn-cart-periodo { color: #5d6b79; white-space: nowrap; }
.gs-pn-cart-importo { min-width: 3.2rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.gs-pn-cart-rimuovi { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 1.3rem; min-width: 1.3rem; height: 1.3rem; min-height: 1.3rem; padding: 0; border: 0; border-radius: 50%; color: #a9b4be; font-size: .65rem; line-height: 1; }
.gs-pn-cart-rimuovi:hover { background: #fde8ea; color: #dc3545; }


/* Seconda riga: strumenti a sinistra e barra dei posti selezionati a destra, che prende lo spazio che resta. */
.gs-pn-barra-sel { align-items: center; }
.gs-pn-barra-sel .gs-pn-info-multi { flex: 1 1 28rem; min-width: 0; }
.gs-pn-barra-griglia { padding: 0 .1rem; }

/* Le X di chiusura delle barre (posti selezionati, conto selezionato, periodo, filtri): tutte dello stesso grigio, un po' più scuro al passaggio del mouse. */
.gs-pn-x, .gs-pn-x:focus { color: #8a97a3; }
.gs-pn-x:hover { color: #5b6b78; }

/* Barra di scorrimento del periodo (sotto la griglia), fatta come una scrollbar: frecce ai lati, traccia con le tacche dei mesi e segno di oggi, cursore con la maniglia
   e le date del periodo mostrato. */
.gs-pn-scorri { display: flex; align-items: stretch; gap: .25rem; padding: .15rem .1rem 0; }
.gs-pn-sc-freccia { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 24px; padding: 0; background: #fff; font-size: .7rem; }
.gs-pn-sc-traccia { position: relative; flex: 1 1 auto; min-width: 0; height: 24px; border: 1px solid #aebbc4; border-radius: .4rem; background: #e6ebef; cursor: pointer; user-select: none; touch-action: none; }
.gs-pn-sc-mese { position: absolute; top: 0; bottom: 0; padding-left: 3px; border-left: 1px solid #c3ced6; color: #66757f; font-size: .62rem; line-height: 22px; pointer-events: none; }
.gs-pn-sc-oggi { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: #dc3545; pointer-events: none; }
.gs-pn-sc-pollice { position: absolute; top: -1px; bottom: -1px; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 18px; padding: 0 .3rem 0 20px; overflow: hidden; border: 1px solid #0b8fc4; border-radius: .4rem; background: rgba(17, 174, 239, .78); color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; cursor: grab; outline: none; box-shadow: 0 1px 2px rgba(15, 45, 65, .3); }
.gs-pn-sc-pollice::before { content: ""; position: absolute; left: 6px; top: 5px; bottom: 5px; width: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 2px, transparent 2px 4px); }
.gs-pn-sc-pollice:hover { background: rgba(17, 174, 239, .9); }
.gs-pn-sc-pollice:active { cursor: grabbing; }
.gs-pn-sc-pollice:focus-visible { box-shadow: 0 0 0 2px rgba(17, 174, 239, .45); }
.gs-pn-sc-date { overflow: hidden; text-overflow: clip; }
.gs-pn-sc-tip { position: absolute; bottom: calc(100% + 4px); z-index: 6; padding: .05rem .4rem; border-radius: .3rem; background: #26343f; color: #fff; font-size: .72rem; white-space: nowrap; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .08s; }
.gs-pn-sc-tip.visibile { opacity: 1; }

/* Le tre barre sotto la barra principale (filtri, posti selezionati, conto selezionato) hanno la stessa altezza, anche se il contenuto è diverso. */
.gs-pn-filtri, .gs-pn-info-multi, .gs-pn-info-sel {
    box-sizing: border-box;
    align-items: center;
    min-height: 2.75rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* Frecce ai lati della barra di scorrimento: grigie come la traccia. */
.gs-pn-sc-freccia, .gs-pn-sc-freccia:focus { border-color: #aebbc4; background: #e6ebef; color: #5b6b78; }
.gs-pn-sc-freccia:hover:not(:disabled), .gs-pn-sc-freccia:active:not(:disabled) { border-color: #8a97a3; background: #d5dde3; color: #26343f; }
.gs-pn-sc-freccia:disabled { border-color: #c3ced6; background: #eef1f4; color: #b2bcc4; opacity: 1; }

/* Filtri compatti (carattere più piccolo nelle combo) perché la barra stia su una sola riga negli schermi larghi, come le altre due. */
.gs-pn-filtri .form-select { max-width: 9.5rem; font-size: .82rem; }
.gs-pn-filtri .form-control { font-size: .82rem; }

/* Nessun anello giallo del tema sulle frecce della barra di scorrimento (né col clic né col focus): restano grigie. */
.gs-pn-sc-freccia:focus, .gs-pn-sc-freccia:focus-visible, .gs-pn-sc-freccia:active, .gs-pn-sc-freccia.active { outline: 0; box-shadow: none; border-color: #aebbc4; background: #e6ebef; color: #5b6b78; }
.gs-pn-sc-freccia:hover:not(:disabled) { border-color: #8a97a3; background: #d5dde3; color: #26343f; }
.gs-pn-sc-freccia:disabled { border-color: #c3ced6; background: #eef1f4; color: #b2bcc4; }

/* Negli schermi larghi la barra dei filtri sta su una sola riga (stessa altezza delle altre due): le combo si restringono invece di andare a capo. */
@media (min-width: 1400px) {
    .gs-pn-filtri { flex-wrap: nowrap; }
    .gs-pn-filtri .form-select, .gs-pn-filtri .gs-pn-et-sel { min-width: 0; flex-shrink: 1; }
    .gs-pn-filtri .form-check { flex-shrink: 0; white-space: nowrap; }
}

/* Le frecce non usano più .btn-outline-secondary (il tema mette l'anello giallo anche col clic): stile tutto qui, senza anello né ombra in nessuno stato. */
.gs-pn-sc-freccia, .gs-pn-sc-freccia:hover, .gs-pn-sc-freccia:focus, .gs-pn-sc-freccia:focus-visible, .gs-pn-sc-freccia:active, .gs-pn-sc-freccia:active:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
.gs-pn-sc-freccia { border: 1px solid #aebbc4; border-radius: .4rem; background: #e6ebef; color: #5b6b78; }
.gs-pn-sc-freccia:focus, .gs-pn-sc-freccia:focus-visible, .gs-pn-sc-freccia:active, .gs-pn-sc-freccia:active:focus { border-color: #aebbc4; background: #e6ebef; color: #5b6b78; }
.gs-pn-sc-freccia:hover:not(:disabled) { border-color: #8a97a3; background: #d5dde3; color: #26343f; }
.gs-pn-sc-freccia:disabled { border-color: #c3ced6; background: #eef1f4; color: #b2bcc4; }