@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
}

.navigation-drawer {
    --dxbl-drawer-separator-border-width: 0;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.icon {
    --icon-width: 1.25rem;
    --icon-height: 1.25rem;
    width: var(--icon-width);
    height: var(--icon-height);
    background-color: currentcolor;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-mask-image);
    mask-image: var(--icon-mask-image);
}

/* .icon-menu e .icon-application: definite in App.razor, dove si conosce il sotto-percorso
   dell'installazione (AppPaths) - un url("/images/...") qui andrebbe alla radice del server. */

/* Popup overlays: cover the full page including the top navigation bar.
   z-index must exceed the DxDrawer stacking context (998) and any DxMenu portals. */
.dxbl-modal-backdrop {
    z-index: 9000 !important;
}

.dxbl-modal {
    z-index: 9001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Remove internal scrollbar from popup body — the overlay scrolls instead. */
.dxbl-modal .dxbl-popup {
    max-height: none !important;
}

.dxbl-modal .dxbl-popup-body {
    max-height: none !important;
    overflow-y: visible !important;
}


/* Popup del menu hamburger (.dxbl-menu-navbar-dropdown): DevExpress lo posiziona con un
   transform: translate(X,Y) inline dentro una dxbl-popup-cell 0x0 all'origine del viewport;
   su schermi stretti la X viene calcolata contro la larghezza del layout (che le griglie
   possono estendere oltre il viewport visibile) e il popup finirebbe fuori schermo a destra.
   L'allineamento vero (bordo destro del popup = bordo destro del bottone hamburger) e' fatto
   via margin-left dal menuHandler JS in Menu.razor — un override CSS di left/right qui si
   combinerebbe col translate spostando il popup nel posto sbagliato (verificato).
   Larghezza: tetto fisso (320px) cosi' su finestre molto larghe il popup non si allarga a
   dismisura verso sinistra; su schermi stretti scende a 100vw-8px. Cappiamo anche gli elementi
   interni, nel caso DevExpress imposti una width esplicita piu' larga. */
dxbl-itemlist-dropdown:has(> .dxbl-menu-navbar-dropdown),
dxbl-itemlist-dropdown:has(> .dxbl-menu-navbar-dropdown) > .dxbl-menu-navbar-dropdown,
dxbl-itemlist-dropdown:has(> .dxbl-menu-navbar-dropdown) .dxbl-dropdown-body {
    max-width: min(320px, calc(100vw - 8px)) !important;
}

/* Il menu di destra (icona utente + carrello) NON e' piu' un DxMenu ma un contenitore semplice
   (#right-menu = div in Menu.razor) con AccountItem/CartItem resi come componenti standalone.
   Cosi' le icone restano inline anche su cellulare, dove DevExpress collasserebbe un DxMenu in un
   hamburger. Nessuna regola DevExpress da forzare qui. */

/* I pulsanti delle toolbar (grid, popup, ecc.) hanno un'altezza fissa di 32px nel tema
   DevExpress, non legata al font-size: a differenza dei pulsanti standalone (es. l'hamburger
   del menu), non seguono la densita' di layout scelta in Impostazioni (LayoutSizeService).
   32px = 2rem alla densita' Media (16px, il default), quindi qui la esprimiamo in rem cosi'
   scala insieme al resto: 28px a Piccola, 36px a Grande, invariata a Media. */
.dxbl-toolbar-btn {
    height: 2rem !important;
}

/* Voce di menu "Prenota" del cliente (iBookCustomer in Booking.Medora.Core, CssClass="ba-book-menu-item"):
   e' l'azione principale per chi accede come cliente, quindi spicca nel colore accento del tema
   DevExpress e in grassetto invece del solito colore neutro delle altre voci. Regola anche sui
   discendenti (testo e icona) perche' DxMenuItem applica CssClass alla voce nel suo insieme, non
   al testo/icona al suo interno, e l'icona (tecnica mask+currentColor, vedi le altre .icon-* del
   progetto) segue lo stesso color. */
.ba-book-menu-item,
.ba-book-menu-item * {
    color: var(--dxbl-accent-color, var(--bs-primary, #0d6efd)) !important;
    font-weight: 700 !important;
}