@import url('./views/reservation-view.css');
@import url('./views/registration-view.css');
@import url('./views/deals-view.css');

@import url('./menu.css');
@import url('./app-layout.css');
@import url('./login-view.css');

@import url('./components/vaadin-dialog-overlay.css');

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap');

html {



    --app-layout-menu-button-height: 40px;

    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 3rem;
    --lumo-font-size-xxl: 2.25rem;
    --lumo-font-size-xl: 1.75rem;
    --lumo-font-size-l: 1.375rem;
    --lumo-font-size-m: 1.125rem;
    --lumo-font-size-s: 1rem;
    --lumo-font-size-xs: 0.875rem;
    --lumo-font-size-xxs: 0.8125rem;
    --lumo-font-family: Nunito Sans;

    --lumo-border-radius: 5px; /*calc(var(--lumo-size-m) / 2);*/
    /*--lumo-border-radius: calc(var(--lumo-size-m) / 2);*/
    --lumo-size-xl: 4rem;
    --lumo-size-l: 3rem;
    --lumo-size-m: 2.5rem;
    --lumo-size-s: 2rem;
    --lumo-size-xs: 1.75rem;
    --lumo-primary-color: rgb(0, 106, 180);
    --lumo-primary-color-50pct: rgba(0, 106, 180, 0.5);
    --lumo-primary-color-10pct: rgba(0, 106, 180, 0.1);
    --lumo-shade: hsl(214, 39%, 12%);
    --lumo-shade-5pct: hsla(214, 39%, 12%, 0.05);
    --lumo-shade-10pct: hsla(214, 39%, 12%, 0.1);
    --lumo-shade-20pct: hsla(214, 39%, 12%, 0.2);
    --lumo-shade-30pct: hsla(214, 39%, 12%, 0.3);
    --lumo-shade-40pct: hsla(214, 39%, 12%, 0.4);
    --lumo-shade-50pct: hsla(214, 39%, 12%, 0.5);
    --lumo-shade-60pct: hsla(214, 39%, 12%, 0.6);
    --lumo-shade-70pct: hsla(214, 39%, 12%, 0.7);
    --lumo-shade-80pct: hsla(214, 39%, 12%, 0.8);
    --lumo-shade-90pct: hsla(214, 39%, 12%, 0.9);
    --lumo-primary-text-color: rgb(0, 106, 180);

    /*Menu settings*/
    --menu-dark-blue-color: #006ab4;
    --menu-black-color: #2c3144;
    --menu-white-color: white;

    /*Menu Item*/
    --menu-color: #ffffff;

    /*Menu highlight*/
    --menu-item-highlight-color:var(--menu-black-color);
    --menu-item-highlight-background-color: var(--menu-white-color);

    /*submenu*/
    --sub-menu-color: var(--menu-white-color);
    /*--sub-menu-collapse-background-color: #ffffff;*/
    --sub-menu-background-color: var(--lumo-contrast-30pct);

    /*Submenu highlight*/
    --sub-menu-item-highlight-background-color: var(--menu-white-color);
    --sub-menu-item-highlight-color: var(--menu-black-color);

    /*Impostazioni per il componente Theme select*/
    --theme-label-system: "Sistema";
    --theme-label-light: "Chiaro";
    --theme-label-dark: "Scuro";

}

[theme~="dark"] {

    --lumo-base-color: hsl(214, 35%, 21%);
    --lumo-primary-color: rgb(0, 106, 180);
    --lumo-primary-color-50pct: rgba(0, 106, 180, 0.5);
    --lumo-primary-color-10pct: rgba(0, 106, 180, 0.1);
    --lumo-primary-text-color: #1c9cd9;

    /*!*Menu settings*!*/
    /*--menu-color: var(--lumo-body-text-color);*/
    /*--menu-color-active: #ffffff;*/


    /*--menu-item-highlight-background-color: var(--lumo-contrast-40pct);*/
    /*--sub-menu-highlight-background-color: var(--lumo-contrast-40pct);*/

    /*--menu-background-color: var(--lumo-primary-color);*/
    /*!*--menu-color: var(--menu-color-active);*!*/


    /*!*--menu-item-highlight-background-color: #006ab4;*!*/
    /*--menu-item-highlight-color: var(--lumo-body-text-color);*/


    /*!*!*Submenu*!*!*/
    /*!*--sub-menu-collapse-color: var(--menu-color-active);*!*/
    /*!*--sub-menu-background-color: var(--lumo-primary-color-50pct);*!*/

    /*!*--sub-menu-highlight-background-color: #AAEBFE;*!*/
    /*!*--sub-menu-highlight-background-color: #006ab4;*!*/
    /*--sub-menu-highlight-color: white;*/

    /*!*--app-layout-drawer-background-base-color : var(--lumo-primary-color-10pct);*!*/

    /*!*--context-menu-background-color: var(--menu-background-color) !important;*!*/
    /*!*--context-menu-color: #FFFFFF;*!*/



    /*Menu settings*/
    /*--menu-background-color: linear-gradient(90deg, #1c9cd9 100%, #006ab4 100%) !important;*/
    --menu-color: #ffffff;
    /*--menu-color: var(--lumo-body-text-color);*/

    --menu-item-highlight-background-color: var(--lumo-contrast-30pct);
    --sub-menu-item-highlight-background-color: var(--lumo-contrast-30pct);
    /*--menu-item-highlight-background-color: #006ab4;*/
    /*--sub-menu-highlight-background-color: #006ab4;*/

    --menu-item-highlight-color: var(--lumo-body-text-color);
    /*--menu-color-active: #2c3144;*/

    /*--sub-menu-color: var(--menu-color-active);*/
    --sub-menu-color: var(--menu-color);
    /*--sub-menu-collapse-background-color: #ffffff;*/
    /*--sub-menu-background-color: #FFFFFF;*/
 /*--sub-menu-background-color: var(--lumo-contrast-5pct);*/

    --sub-menu-item-highlight-color: white;
    /*--sub-menu-highlight-background-color: #AAEBFE;*/


    /*--context-menu-background-color: #FFFFFF !important;*/
    /*--context-menu-color: var(--menu-color-active);*/


}

.app-menu-item span {
    margin-left: 18px;
    font-variant-caps: all-small-caps;
}

.app-menu-item {
    height: 10px;
}


.generator-toolbars{
    /*background-color: var(--lumo-contrast-5pct);*/
    border-bottom: solid var(--lumo-primary-color) 3px ;
    /*box-shadow: 0px 3px 2px var(--lumo-primary-color); !* Sfumatura verso il basso *!*/
    /*background-color: none;*/
}


.previewSmsLayout {
    background-image: url("./img/background/iPhone/iPhone-280.png");
    background-repeat: no-repeat;
    background-position: center;

    height: 500px;
}

.previewSmsLayoutBlue {
    background-image: url("img/background/iPhone/iPhone-blue.png");
    background-repeat: no-repeat;
    background-position: center;

}

/*Full calendar*/

/* change the border color of the fc in a global way*/
.fc {
    --fc-border-color: #ddd;
}

/* change the border color of the fc for dark themes*/
[theme~="dark"] .fc {
    --fc-border-color: #333;
}


/*!* change the appearance of the week and day number to a more button like style when hovering *!*/
.fc a:is(.fc-daygrid-week-number, .fc-daygrid-day-number) {
    background: transparent;
    font-size: 12px;
    transition: background 200ms ;
    border-radius: 3px;
}

.fc a:is(.fc-daygrid-week-number, .fc-daygrid-day-number):hover {
    background: var(--lumo-primary-color-10pct);
    text-decoration: none;
}

.fc a.fc-daygrid-day-number {
    padding-left: 6px;
    padding-right: 6px;
}


.fc .fc-more-popover .fc-popover-body{
    background-color: var(--lumo-base-color);
}