/* ── Prime Booking: il marchio del gestionale (task #407, bozza A "Blu notte") ───────────────────
   Il gestionale non veste piu' i colori dell'hotel ma quelli del prodotto. Tutto quello che c'e' qui vale
   solo sotto html.pb-gestionale, la classe che lo script "Gestionale Prime Booking" di index.html mette
   sulle pagine del gestionale quando l'<html> ha data-gestionale="prime-booking". Il sito degli ospiti
   non la ha mai, e senza l'attributo nemmeno il gestionale: resta com'era.
   Colori e misure vengono dai mockup allegati al task. */

html.pb-gestionale {
    /* il marchio */
    --pb-navy: #132B43;          /* blu notte: barra, testi, pulsanti principali */
    --pb-navy-700: #2E4C6B;
    --pb-navy-500: #5B7590;
    --pb-navy-100: #E4E9EF;
    --pb-navy-50: #F3F6F9;
    --pb-giallo: #FFD359;        /* giallo stella: voce attiva, check-in veloce, oggi, da completare */
    --pb-giallo-100: #FFF3CF;
    --pb-rosso: #C0392B;         /* il contatore dei pendenti */
    --pb-punta: 12px 12px 12px 3px; /* la punta del pin del logo: tre angoli tondi e uno vivo in basso a sinistra */

    /* I colori del tema che altrove arrivano da COLOR_PRIMARY (ThemeBuilder) qui diventano il blu notte,
       e con loro pulsanti, link, anelli di focus e calendario. html.pb-gestionale batte il :root di
       ThemeBuilder per specificita', quindi l'ordine dei fogli non conta. Le varianti scure seguono le
       regole di ThemeBuilder (-15% e -28%), le chiare sono le tinte del mockup. */
    --color-primary: #132B43;
    --color-primary-dark: #102438;
    --color-primary-darker: #0D1E30;
    --color-primary-light: #EEF2F6;
    --color-primary-medium: #E4E9EF;
    --color-primary-rgb: 19, 43, 67;
    --color-primary-dark-rgb: 16, 36, 56;
}

/* ── carattere ────────────────────────────────────────────────────────────────────────────────
   Aptos dal kit Adobe Fonts (data-gestionale-font in index.html). Dove il kit non c'e', o se Adobe non
   risponde, si ripiega sul carattere di sistema. index.html impone Quattrocento Sans e, sui titoli,
   Italiana: sono i caratteri dell'hotel.
   Pesi: nel kit Aptos ha 400 e 700, Aptos Display solo 400 e 700. Finche' 600 e 800 non sono aggiunti al
   progetto Adobe escono come 700; Aptos non ha il 500, che esce come 400. */

/* Il colore del testo di base resta quello di index.html: il body lo eredita anche il contenitore in cui
   html2pdf copia fatture e preventivi, che vanno all'ospite. I PDF hanno il loro carattere scritto a mano,
   quindi il carattere del body non li tocca. */
html.pb-gestionale body {
    font-family: aptos, 'Segoe UI', system-ui, sans-serif;
}

html.pb-gestionale .gs,
html.pb-gestionale .gs-barra {
    font-family: aptos, 'Segoe UI', system-ui, sans-serif;
}

/* Le schede di prenotazione e di gruppo (.gp, con i loro pannelli e finestre) e l'editor dei letti del
   pannello Camere (.bce) si danno Urbanist da sole (GestionePrenotazione.razor, GestioneGruppo.razor,
   BedConfigEditor.razor): anche li' Aptos. I titoli dentro .gp lo ereditano (font-family: inherit). */
html.pb-gestionale .gp,
html.pb-gestionale .gp-pannello,
html.pb-gestionale .gp-finestra,
html.pb-gestionale .bce {
    font-family: aptos, 'Segoe UI', system-ui, sans-serif;
}

/* I titoli: (0,0,2) batte "h1 { }" di index.html ma perde contro qualunque classe, di Tailwind o del
   gestionale (.gs h1): i titoli bianchi delle finestre restano bianchi. Aptos Display e' per i titoli
   grandi, gli altri restano in Aptos. Fuori i titoli dentro .html2pdf__container, la copia di fatture e
   preventivi da cui html2pdf fa il PDF: restano come prima. :where() non aggiunge specificita'. */
:where(html.pb-gestionale) body :is(h1, h2):where(:not(.html2pdf__container *)) {
    font-family: aptos-display, aptos, 'Segoe UI', system-ui, sans-serif;
    color: var(--pb-navy);
}

:where(html.pb-gestionale) body :is(h3, h4, h5, h6):where(:not(.html2pdf__container *)) {
    font-family: aptos, 'Segoe UI', system-ui, sans-serif;
    color: var(--pb-navy);
}

/* ── barra del gestionale (BarraGestionale.razor) ─────────────────────────────────────────────
   Bozza A: barra blu notte con il logo giallo. Le voci sono bianche al 72%, in tondo; l'attiva e' "la
   punta": giallo pieno, testo blu in grassetto, con l'angolo vivo in basso a sinistra come il pin del
   logo (scelta di Marco il 05-11 fra quattro proposte). Il logo dell'hotel lascia il posto a Prime Booking. */

/* fuori dal gestionale Prime Booking il logo non si vede, e l'immagine di fondo non si scarica */
.gs-logo-pb { display: none; }

html.pb-gestionale .gs-logo-pb {
    display: block;
    width: 71px;
    height: 30px;
    background: url(/brand/prime-booking/logo-giallo.png) left center / contain no-repeat;
}

html.pb-gestionale .gs-logo-hotel { display: none; }

html.pb-gestionale .gs-barra {
    --gs-barra-fondo: var(--pb-navy);   /* il fondo delle frecce di scorrimento */
    background: var(--pb-navy);
    border-bottom-color: var(--pb-navy);
}

html.pb-gestionale .gs-tab {
    height: 36px;
    margin: 12px 1px;                   /* 12 + 36 + 12 e il filo sotto: 61px, l'altezza di oggi */
    padding: 0 12px;
    border-radius: var(--pb-punta);
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    transition: color .15s, background-color .15s;
}

html.pb-gestionale .gs-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

/* blu sul giallo: 10,1:1. Anche al passaggio del mouse resta com'e': e' la pagina in cui sei */
html.pb-gestionale .gs-tab.is-attivo,
html.pb-gestionale .gs-tab.is-attivo:hover {
    color: var(--pb-navy);
    background: var(--pb-giallo);
    font-weight: 700;
}

/* il filo verde sotto la voce attiva della barra bianca qui non serve: il segnale e' la punta gialla */
html.pb-gestionale .gs-tab.is-attivo::after { display: none; }

html.pb-gestionale .gs-freccia-tab { color: rgba(255, 255, 255, .75); }

/* il contatore dei pendenti: rosso pieno, come nel mockup */
html.pb-gestionale .gs-barra .pending-badge,
html.pb-gestionale .gs-barra .pending-badge--active,
html.pb-gestionale .gs-barra .gs-tab:hover .pending-badge {
    background: var(--pb-rosso);
    color: #fff;
}

/* Il contatore sta sull'angolo dell'icona (BarraGestionale.razor) col bordo destro 1px prima della scritta,
   come nella barra bianca. Qui la voce ha 12px di padding invece di 14: la scritta parte a 12 + 17 + 7 = 36px.
   L'anello e' il fondo della barra (--gs-barra-fondo, blu notte); sulla punta gialla della voce attiva e'
   giallo. */
html.pb-gestionale .gs-barra .pending-badge { right: calc(100% - 35px); }

html.pb-gestionale .gs-barra .gs-tab.is-attivo .pending-badge { box-shadow: 0 0 0 2px var(--pb-giallo); }

html.pb-gestionale .gs-esci {
    color: rgba(255, 255, 255, .75);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    border-radius: 9px;
}

html.pb-gestionale .gs-esci:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

/* Il fuoco da tastiera: l'anello blu del browser sul blu notte quasi non si vede (2,6-2,9:1), il giallo
   si' (10,1:1). 2px piu' 1px di distacco stanno nel margine delle schede, anche da telefono. */
html.pb-gestionale .gs-barra :is(.gs-tab, .gs-esci, .tabs-scroll-arrow):focus-visible {
    outline: 2px solid var(--pb-giallo);
    outline-offset: 1px;
}

/* Da telefono due righe, come nel mockup: sopra il logo ed Esci, sotto le schede a tutta larghezza. */
@media (max-width: 639px) {
    html.pb-gestionale .gs-barra > div {
        flex-wrap: wrap;
        padding-top: 10px;
    }

    html.pb-gestionale .gs-barra .gs-schede {
        order: 3;
        flex: 0 0 100%;
    }

    html.pb-gestionale .gs-barra .gs-esci { margin-left: auto; }

    /* le schede partono dal bordo: le frecce compaiono solo quando c'e' altro da scorrere da quel lato */
    html.pb-gestionale #tabs-bar > div {
        padding-left: 4px;
        padding-right: 4px;
    }

    html.pb-gestionale .gs-tab {
        height: 32px;
        margin: 4px 1px 8px;
    }

    /* Le etichette dei gruppi della Dashboard ("In casa", "In arrivo"...) restano agganciate sotto la
       barra mentre si scorre (Dashboard.razor le mette a 61px). Da telefono la barra Prime Booking e' alta
       99px: 10 sopra, 36 la riga del logo, 8 di stacco, 44 la riga delle schede, 1 il filo. */
    html.pb-gestionale .gs-tabella tbody tr.gs-gruppo { top: 99px; }
}