/* GestHotels App Shell - UI-06B.1 */

.gh-app-shell-header{
    position:sticky;top:0;z-index:1000;
    background:var(--surface);border-bottom:1px solid var(--border);
}
.gh-app-shell-header-inner{
    max-width:1180px;margin:0 auto;min-height:72px;
    padding:var(--space-4) var(--space-7);
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
}
.gh-app-shell-brand-block,.gh-app-shell-brand,.gh-app-shell-user-block{
    display:flex;align-items:center;
}
.gh-app-shell-brand-block{gap:var(--space-8);min-width:0}
.gh-app-shell-brand{gap:var(--space-4);color:var(--text-strong);text-decoration:none;min-width:0}
.gh-app-shell-brand-mark{
    width:42px;height:42px;border-radius:var(--radius-lg);
    display:grid;place-items:center;flex:0 0 42px;
    background:var(--primary);color:var(--text-inverse);font-weight:900;
}
.gh-app-shell-brand-copy strong,.gh-app-shell-brand-copy small,
.gh-app-shell-user-copy strong,.gh-app-shell-user-copy small,
.gh-app-shell-hotel span,.gh-app-shell-hotel strong{display:block}
.gh-app-shell-brand-copy strong{font-size:20px;line-height:1.05}
.gh-app-shell-brand-copy small,.gh-app-shell-user-copy small,.gh-app-shell-hotel-label{color:var(--muted)}
.gh-app-shell-brand-copy small{margin-top:2px;font-size:11px}
.gh-app-shell-hotel{padding-left:var(--space-7);border-left:1px solid var(--border)}
.gh-app-shell-hotel-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.gh-app-shell-hotel strong{margin-top:2px;font-size:13px}
.gh-app-shell-user-block{justify-content:flex-end;gap:var(--space-5)}
.gh-app-shell-user-copy{text-align:right}
.gh-app-shell-user-copy strong{font-size:13px}
.gh-app-shell-user-copy small{font-size:11px}
.gh-app-shell-notifications{
    position:relative;width:42px;height:42px;display:grid;place-items:center;
    border:1px solid var(--border);border-radius:var(--radius-lg);
    background:var(--surface);text-decoration:none;
}
.gh-app-shell-notifications.active{border-color:var(--primary);background:var(--primary-soft)}
.gh-app-shell-notification-badge{
    position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
    display:grid;place-items:center;border:2px solid var(--surface);
    border-radius:var(--radius-pill);background:var(--danger);color:var(--text-inverse);
    font-size:10px;font-weight:900;
}
.gh-app-shell-desktop-nav{
    max-width:1180px;margin:0 auto;padding:0 var(--space-7) var(--space-4);
    display:flex;align-items:center;gap:var(--space-2);
}
.gh-app-shell-desktop-nav>a,.gh-app-shell-more>summary{
    min-height:38px;padding:0 var(--space-5);display:inline-flex;align-items:center;
    gap:var(--space-2);border-radius:var(--radius-md);color:var(--text);
    text-decoration:none;font-size:13px;font-weight:700;cursor:pointer;list-style:none;
}
.gh-app-shell-desktop-nav>a:hover,.gh-app-shell-more>summary:hover,
.gh-app-shell-desktop-nav>a.active{background:var(--primary-soft);color:var(--primary-text)}
.gh-app-shell-inline-badge{
    min-width:20px;padding:2px 6px;border-radius:var(--radius-pill);
    background:var(--danger);color:var(--text-inverse);font-size:10px;text-align:center;
}
.gh-app-shell-more{position:relative}
.gh-app-shell-more>summary::-webkit-details-marker,
.gh-app-shell-mobile-more>summary::-webkit-details-marker{display:none}
.gh-app-shell-more-menu{
    position:absolute;top:calc(100% + 8px);right:0;width:230px;padding:var(--space-3);
    display:grid;gap:var(--space-1);border:1px solid var(--border);
    border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg);
}
.gh-app-shell-more-menu a{
    padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
    color:var(--text);text-decoration:none;font-size:13px;font-weight:650;
}
.gh-app-shell-more-menu a:hover,.gh-app-shell-more-menu a.active{background:var(--surface-soft)}
.gh-app-shell-logout{color:var(--danger-text)!important}
.gh-app-shell-mobile-nav{display:none}
.gh-app-shell-footer{
    max-width:1180px;margin:var(--space-10) auto 0;padding:var(--space-7);
    display:flex;align-items:center;gap:var(--space-3);border-top:1px solid var(--border);
    color:var(--muted);font-size:12px;
}
.gh-app-shell-footer-version{margin-left:auto}

@media (max-width:900px){
    body{padding-bottom:84px}
    .gh-app-shell-header-inner{min-height:62px;padding:var(--space-3) var(--space-5)}
    .gh-app-shell-brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:var(--radius-md);font-size:13px}
    .gh-app-shell-brand-copy strong{font-size:17px}
    .gh-app-shell-brand-copy small,.gh-app-shell-user-copy,.gh-app-shell-hotel-label{display:none}
    .gh-app-shell-brand-block{gap:var(--space-4)}
    .gh-app-shell-hotel{max-width:135px;padding-left:var(--space-4)}
    .gh-app-shell-hotel strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
    .gh-app-shell-notifications{width:38px;height:38px}
    .gh-app-shell-desktop-nav{display:none}
    .gh-app-shell-mobile-nav{
        position:fixed;left:0;right:0;bottom:0;z-index:1200;min-height:68px;
        padding:6px 8px max(6px,env(safe-area-inset-bottom));
        display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:2px;
        border-top:1px solid var(--border);background:var(--surface);
        box-shadow:0 -8px 24px rgba(15,23,42,.08);
    }
    .gh-app-shell-mobile-nav>a,.gh-app-shell-mobile-more>summary,
    .gh-app-shell-mobile-spacer,.gh-app-shell-main-action-disabled{
        min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:3px;border-radius:var(--radius-md);color:var(--muted);
        text-decoration:none;list-style:none;font-size:20px;cursor:pointer;
    }
    .gh-app-shell-mobile-nav small{font-size:10px;font-weight:700;line-height:1}
    .gh-app-shell-mobile-nav>a.active{color:var(--primary);background:var(--primary-soft)}
    .gh-app-shell-mobile-icon{position:relative}
    .gh-app-shell-main-action{
        position:relative;top:-10px;width:58px;min-width:58px!important;height:58px;
        min-height:58px!important;margin:0 auto;border-radius:var(--radius-pill)!important;
        background:var(--primary)!important;color:var(--text-inverse)!important;
        box-shadow:var(--shadow-lg);
    }
    .gh-app-shell-main-action>span{font-size:30px;line-height:.8}
    .gh-app-shell-main-action small{color:var(--text-inverse)}
    .gh-app-shell-main-action-disabled{opacity:0;pointer-events:none}
    .gh-app-shell-mobile-more{position:static;min-width:0}
    .gh-app-shell-mobile-more[open]>summary{color:var(--primary);background:var(--primary-soft)}
    .gh-app-shell-mobile-sheet{
        position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));
        z-index:1300;max-height:min(70vh,560px);overflow:auto;border:1px solid var(--border);
        border-radius:var(--radius-2xl);background:var(--surface);box-shadow:var(--shadow-overlay);
    }
    .gh-app-shell-mobile-sheet-head{
        padding:var(--space-7);display:flex;align-items:center;justify-content:space-between;
        gap:var(--space-5);border-bottom:1px solid var(--border);
    }
    .gh-app-shell-mobile-sheet-head strong,.gh-app-shell-mobile-sheet-head small{display:block}
    .gh-app-shell-mobile-sheet-head small{margin-top:2px;color:var(--muted);font-size:11px}
    .gh-app-shell-mobile-sheet-links{padding:var(--space-3);display:grid;gap:var(--space-2)}
    .gh-app-shell-mobile-sheet-links a{
        min-height:48px;padding:0 var(--space-5);display:flex;align-items:center;gap:var(--space-4);
        border-radius:var(--radius-lg);color:var(--text);text-decoration:none;font-weight:700;
    }
    .gh-app-shell-mobile-sheet-links a:hover{background:var(--surface-soft)}
    .gh-app-shell-footer{display:none}
}


/* ==========================================================
   UI-06B.1.1 Refinement
========================================================== */

.gh-app-shell-header {
    background: var(--surface);
    box-shadow: 0 4px 18px rgba(15,23,42,.04);
}

.gh-app-shell-header-inner {
    min-height: 82px;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}

.gh-app-shell-brand-block {
    gap: var(--space-10);
}

.gh-app-shell-brand-mark,
.gh-app-shell-hotel-logo {
    overflow: hidden;
}

.gh-app-shell-brand-mark img,
.gh-app-shell-hotel-logo img,
.gh-app-shell-mobile-sheet-hotel-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.gh-app-shell-hotel {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 190px;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.gh-app-shell-hotel-logo {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.gh-app-shell-hotel-copy {
    min-width: 0;
}

.gh-app-shell-user-block {
    min-width: 190px;
}

.gh-app-shell-desktop-nav {
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
    border-top: 1px solid var(--border);
}

.gh-app-shell-mobile-nav {
    opacity: 1 !important;
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -10px 30px rgba(15,23,42,.14) !important;
}

.gh-app-shell-mobile-sheet {
    background: var(--surface) !important;
    opacity: 1 !important;
}

.gh-app-shell-mobile-sheet-hotel {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 52%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    font-size: 11px;
    font-weight: 700;
}

.gh-app-shell-mobile-sheet-hotel-logo {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

@media (max-width: 900px) {
    .gh-app-shell-header-inner {
        min-height: 76px;
        padding: var(--space-4) var(--space-5);
        gap: var(--space-4);
    }

    .gh-app-shell-brand-block {
        flex: 1;
        gap: var(--space-5);
    }

    .gh-app-shell-brand {
        flex: 0 0 auto;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 16px;
    }

    .gh-app-shell-hotel {
        min-width: 0;
        max-width: 145px;
        padding: var(--space-2) var(--space-3);
        gap: var(--space-3);
    }

    .gh-app-shell-hotel-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .gh-app-shell-hotel strong {
        font-size: 11px;
    }

    .gh-app-shell-user-block {
        min-width: auto;
        margin-left: auto;
    }

    .gh-app-shell-mobile-nav {
        border-top: 1px solid var(--border-strong);
    }
}


/* ==========================================================
   UI-06B.1.2 - Final header/mobile refinement
========================================================== */

/* Desktop: più presenza visiva */
@media (min-width: 901px) {
    .gh-app-shell-header-inner {
        min-height: 96px;
        padding: 18px 28px;
    }

    .gh-app-shell-brand-mark {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
        border-radius: 16px;
        font-size: 17px;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 25px;
    }

    .gh-app-shell-brand-copy small {
        margin-top: 4px;
        font-size: 13px;
    }

    .gh-app-shell-hotel {
        min-width: 240px;
        padding: 12px 16px;
    }

    .gh-app-shell-hotel-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .gh-app-shell-hotel-label {
        font-size: 11px;
    }

    .gh-app-shell-hotel strong {
        font-size: 15px;
    }

    .gh-app-shell-user-block {
        min-width: 230px;
    }

    .gh-app-shell-notifications {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .gh-app-shell-user-copy strong {
        font-size: 15px;
    }

    .gh-app-shell-user-copy small {
        font-size: 12px;
    }

    .gh-app-shell-desktop-nav > a,
    .gh-app-shell-more > summary {
        min-height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }
}

/* Mobile: header pienamente opaco e hotel centrato */
@media (max-width: 900px) {
    .gh-app-shell-header {
        background: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 4px 16px rgba(15,23,42,.10) !important;
    }

    .gh-app-shell-header-inner {
        position: relative;
        min-height: 78px;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        align-items: center;
        padding: 10px 14px;
        gap: 8px;
        background: #ffffff !important;
    }

    .gh-app-shell-brand-block {
        display: contents;
    }

    .gh-app-shell-brand {
        grid-column: 1;
        justify-self: start;
        gap: 8px;
        min-width: 0;
    }

    .gh-app-shell-brand-mark {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 16px;
        white-space: nowrap;
    }

    .gh-app-shell-hotel {
        grid-column: 2;
        justify-self: center;
        width: auto;
        min-width: 0;
        max-width: 145px;
        margin: 0;
        padding: 6px 9px;
        gap: 7px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #f8fafc !important;
    }

    .gh-app-shell-hotel-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .gh-app-shell-hotel-copy {
        min-width: 0;
    }

    .gh-app-shell-hotel strong {
        max-width: 92px;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gh-app-shell-user-block {
        grid-column: 3;
        justify-self: end;
        margin: 0;
    }

    .gh-app-shell-notifications {
        width: 40px;
        height: 40px;
        background: #ffffff !important;
    }

    .gh-app-shell-mobile-nav {
        background: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 -10px 30px rgba(15,23,42,.18) !important;
        border-top: 1px solid #d1d5db !important;
    }

    .gh-app-shell-mobile-sheet {
        background: #ffffff !important;
        opacity: 1 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (max-width: 420px) {
    .gh-app-shell-header-inner {
        grid-template-columns: minmax(0,1fr) auto 42px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 14px;
    }

    .gh-app-shell-hotel {
        max-width: 122px;
        padding: 5px 7px;
    }

    .gh-app-shell-hotel-logo {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .gh-app-shell-hotel strong {
        max-width: 76px;
        font-size: 10px;
    }
}

/* UI-06B.1.3 - Mobile final refinements */
.gh-app-shell-help { display: none; }

@media (max-width: 900px) {
    .gh-app-shell-help {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: #ffffff;
        color: var(--primary);
        text-decoration: none;
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
    }

    .gh-app-shell-user-block > .gh-app-shell-notifications {
        display: none !important;
    }

    .gh-app-shell-main-action,
    .gh-app-shell-main-action:visited,
    .gh-app-shell-main-action:hover,
    .gh-app-shell-main-action:active {
        color: #ffffff !important;
    }

    .gh-app-shell-main-action > span {
        color: #ffffff !important;
        font-size: 34px;
        font-weight: 500;
        line-height: .75;
    }

    .gh-app-shell-main-action small {
        color: #ffffff !important;
    }
}

/* ==========================================================
   UI-06B.1.5
   Mobile header: hotel-first layout
========================================================== */

.gh-brand-line {
    display: inline;
}

/* Desktop resta sostanzialmente invariato */
@media (min-width: 901px) {

    .gh-brand-line {
        display: inline;
    }

    .gh-brand-line + .gh-brand-line::before {
        content: "";
    }

}


/* Mobile */
@media (max-width: 900px) {

    .gh-app-shell-header-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 46px;
        align-items: center;

        min-height: 76px;
        padding: 9px 12px;

        gap: 10px;

        background: #ffffff !important;
    }


    /* permette a branding e hotel di partecipare alla griglia */
    .gh-app-shell-brand-block {
        display: contents;
    }


    /* --------------------------
       GestHotels
    -------------------------- */

    .gh-app-shell-brand {
        grid-column: 1;

        display: flex;
        align-items: center;

        gap: 6px;

        min-width: 0;
    }


    .gh-app-shell-brand-mark {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }


    .gh-app-shell-brand-copy {
        display: block;
    }


    .gh-app-shell-brand-copy strong {
        display: block;

        font-size: 13px;
        font-weight: 800;
        line-height: 1;

        white-space: normal;
    }


    .gh-brand-line {
        display: block;
    }


    .gh-app-shell-brand-copy small {
        display: none !important;
    }


    /* --------------------------
       HOTEL
    -------------------------- */

    .gh-app-shell-hotel {
        grid-column: 2;

        justify-self: stretch;

        width: 100%;
        max-width: none;
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 8px;

        padding: 7px 9px;

        border: 1px solid var(--border);
        border-radius: 12px;

        background: #f8fafc !important;
    }


    .gh-app-shell-hotel-logo {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }


    .gh-app-shell-hotel-copy {
        flex: 1;
        min-width: 0;
    }


    /* "Hotel attivo" non viene più usato,
       ma nascondiamolo anche per sicurezza */
    .gh-app-shell-hotel-label {
        display: none !important;
    }


    .gh-app-shell-hotel strong {
        display: block;

        width: 100%;
        max-width: none;

        margin: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;

        color: var(--text-strong);
    }


    /* --------------------------
       Destra: solo HELP
    -------------------------- */

    .gh-app-shell-user-block {
        grid-column: 3;

        justify-self: end;

        min-width: 0;
        margin: 0;
    }


    .gh-app-shell-help {
        width: 42px;
        height: 42px;

        display: grid;
        place-items: center;

        font-size: 25px;
        font-weight: 900;

        border-radius: 12px;
    }


    /* nome utente fuori dall'header mobile */
    .gh-app-shell-user-copy {
        display: none !important;
    }


    /* notifiche solamente nella bottom bar */
    .gh-app-shell-user-block > .gh-app-shell-notifications {
        display: none !important;
    }

}


/* Smartphone più stretti */
@media (max-width: 420px) {

    .gh-app-shell-header-inner {
        grid-template-columns: auto minmax(0, 1fr) 42px;

        padding-left: 8px;
        padding-right: 8px;

        gap: 7px;
    }


    .gh-app-shell-brand-mark {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }


    .gh-app-shell-brand-copy strong {
        font-size: 12px;
    }


    .gh-app-shell-hotel {
        max-width: none;

        padding: 6px 7px;

        gap: 6px;
    }


    .gh-app-shell-hotel-logo {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }


    .gh-app-shell-hotel strong {
        max-width: none;

        font-size: 12px;
    }


    .gh-app-shell-help {
        width: 38px;
        height: 38px;

        font-size: 23px;
    }

}


/* ==========================================================
   UI-06B.1.6
   Multi-hotel selector refinement
========================================================== */

.gh-hotel-switch-form {
    width: 100%;
    margin: 0;
}

.gh-hotel-switch-select {
    width: 100%;
    min-width: 0;
    max-width: 220px;

    height: 38px;

    padding: 0 30px 0 10px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background-color: #ffffff;

    color: var(--text-strong);

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}


/* Desktop */
@media (min-width: 901px) {

    .gh-app-shell-hotel-copy {
        min-width: 150px;
    }

    .gh-hotel-switch-select {
        min-width: 170px;
    }

}


/* Mobile: brand compatto a due righe, hotel prioritario */
@media (max-width: 900px) {

    .gh-app-shell-header-inner {
        grid-template-columns:
            76px
            minmax(0,1fr)
            42px;

        gap: 8px;
    }

    .gh-app-shell-brand {
        width: 76px;

        gap: 5px;
    }

    .gh-app-shell-brand-mark {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 11px;
        line-height: .98;
        white-space: normal;
    }

    .gh-brand-line {
        display: block !important;
    }

    .gh-app-shell-hotel {
        width: 100%;
        max-width: none;

        padding: 6px 7px;
    }

    /*
     * Nell'header mobile privilegiamo il nome struttura.
     * Il logo hotel resta visibile nel menu "Altro".
     */
    .gh-app-shell-hotel > .gh-app-shell-hotel-logo {
        display: none;
    }

    .gh-app-shell-hotel-copy {
        width: 100%;
        min-width: 0;
    }

    .gh-hotel-switch-select {
        width: 100%;
        max-width: none;

        height: 36px;

        padding-left: 9px;
        padding-right: 25px;

        font-size: 12px;
    }

    /*
     * Dentro il foglio mobile "Altro" il select
     * può utilizzare tutta la larghezza disponibile.
     */
    .gh-app-shell-mobile-sheet-hotel
    .gh-hotel-switch-form {
        flex: 1;
        min-width: 0;
    }

    .gh-app-shell-mobile-sheet-hotel
    .gh-hotel-switch-select {
        width: 100%;
        max-width: none;
    }

}


@media (max-width: 380px) {

    .gh-app-shell-header-inner {
        grid-template-columns:
            66px
            minmax(0,1fr)
            38px;

        gap: 6px;
    }

    .gh-app-shell-brand {
        width: 66px;
    }

    .gh-app-shell-brand-copy strong {
        font-size: 10px;
    }

    .gh-hotel-switch-select {
        font-size: 11px;
    }

}