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

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

@@font-face {
    font-family: 'HK Modular';
    /* Il percorso parte dalla cartella wwwroot/css o dalla pagina stessa */
    src: url('fonts/MODULAR-14.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/*body {
    background-image: none !important;*/ /* Rimuovi lo sfondo originale */
    /*background-color: transparent;
    margin: 0;
    padding-top: 120px;*/ /* Lascia lo spazio per l'header */
/*}*/


    body::before {
        content: "";
        position: fixed;
        top: 120px !important;
        left: 0;
        right: 0; /* Forza la larghezza */
        bottom: 0; /* Forza l'altezza fino alla fine dello schermo */
        z-index: -1;
        background-image: url('images/sfondo-turismo.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

/*.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

.main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}*/

/*.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}*/

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

    .sidebar .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .sidebar .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .sidebar .nav-item a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

    .sidebar .nav-item a.active {
        background-color: rgba(255,255,255,0.25);
        color: white;
    }

    .sidebar .nav-item a:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

/*.content {
    padding-top: 1.1rem;*/
/*}*/

/*.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}*/

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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: 1200;
}

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

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
/*}*/

/*Per cambiare il colore del placeholder del dropdownlist visto che quello standard è evanescente*/
/*.e-ddl.e-input-group input.e-input::placeholder {
    color: green !important;
}*/

/*Dialoghi personalizzati*/
/*header dialogo modifiche e inserimento*/
.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    top: 0px !important;
    color: white !important;
}

.e-dialog .e-dlg-header-content {
    background-color: orange !important;
    border-top-left-radius: 16px!important;
    border-top-right-radius: 16px!important;
}

/*.e-dlg-header, .e-dlg-header * {
    color: white !important;
}*/

.e-icon-dlg-close {
    color: white !important;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 20px !important;
}

.e-dialog {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

/*per i dialog predefiniti*/
.custom-dialog-content {
    padding: 10px !important;
    font-size: 20px !important;
    color: #007bff;
}


/*Griglie personalizzate*/
.e-grid .e-control.e-toolbar .e-tbar-btn-text {
    display: none !important;
}

.e-grid .e-altrow {
    background-color: #F0F7FE!important;
}

#Gridriepilogo .e-altrow {
    background-color: darkgrey !important;
    /* font-weight:bold; */
}

/*.e-toolbar .e-tbar-btn .e-btn-icon {
    color: white !important;
}*/

.e-tbar-btn-text {
    font-size: 14px !important;
}

.e-btn .e-btn-icon, .e-css.e-btn .e-btn-icon {
    font-size: 20px !important;
}

.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button {
    background-color: #007bff !important;
}

/*.e-overlay {
    opacity: 0 !important;
}*/

.e-unboundcell {
    padding-top: unset !important;
}


/*end griglie*/

/*Pulsanti personalizzati */
/* --- CONFIGURAZIONE PER LA GRIGLIA (Pulsanti Piccoli e Tondi) --- */
.sf-icons, .sf-icons:hover, .sf-icons:focus, .sf-icons:active {
    font-family: 'mrGiv' !important;
    speak: none;
    /*font-size: 16px !important;*/
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: White !important;
    background-color: #007bff !important;
    padding: 2px !important;
}

.sf-icons {
    border-radius: 50% !important;
}

/* --- CONFIGURAZIONE DEFINITIVA SPEEDDIAL (Grandi) --- */
.custom-css .sf-icons {
    width: 60px !important;
    height: 60px !important;
    background-color: #007bff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

    .custom-css .sf-icons::before {
        font-family: 'mrGiv' !important;
        font-size: 30px !important;
        color: white !important;
    }

    /* Assicurati che l'icona dentro il bottone della griglia sia bianca e della misura giusta */
/*    .e-grid .e-command-column .e-btn.sf-icons .sf-icon {
        font-size: 14px !important;
        color: white !important;
        margin: 0 !important;
    }*/


    /* Effetto al passaggio del mouse */
    .sf-icons:hover {
        background-color: #0056b3 !important;
        transform: scale(1.1); /* Leggero ingrandimento */
    }

/* Rimuovi eventuali padding o stili di default di Syncfusion che interferiscono */
.e-speeddial-li .sf-icons {
    margin: 0 !important;
    padding: 0 !important;
}

/* Regola specifica per l'icona del pulsante principale (Fab) se necessario */
.custom-css.e-speeddial.e-lib.e-btn.e-icons {
    width: 70px !important;
    height: 70px !important;
}
/*.sf-icons, .sf-icons:hover, .sf-icons:focus, .sf-icons:active {
    font-family: 'mrGiv' !important;
    speak: none;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: White !important;
    background-color: #007bff !important;
    padding: 0px !important;
}

.sf-icons {
    border-radius: 50% !important;
}*/
/*end pulsanti*/

/*Toast personalizzati*/
.e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: red !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: aqua !important;
    font-size: 15px !important;
    font-weight: normal !important;
}

#components-reconnect-modal {
    display: none !important;
}

/* Stili per il preventivo generato dall'AI */
/* Forza le dimensioni del logo nel preventivo */
.prev-logo {
    width: 150px !important; /* Dimensione fissa */
    height: auto; /* Mantiene le proporzioni */
    max-width: 150px;
    object-fit: contain;
}

/* Stile per la tabella header per allineare logo e data */
.prev-header-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.prev-header-table td {
    vertical-align: middle;
}

.prev-client-info {
    text-align: right;
    font-weight: bold;
}

.prev-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.prev-img {
    width: 45%;
    max-width: 350px;
    height: auto;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}


.prev-table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

.prev-table td, .prev-table th {
    border: 1px solid #eee;
    padding: 8px;
}


/* Ogni volta che l'AI usa questa classe, appare un'icona di spunta blu */
.prev-benefit {
    color: #003366;
    font-weight: bold;
    display: block;
    margin: 8px 0;
    padding-left: 25px;
    position: relative;
}

.prev-benefit::before {
    content: '\e7ff'; /* Codice icona 'Check' di Syncfusion */
    font-family: 'e-icons';
    position: absolute;
    left: 0;
    color: #28a745; /* Verde per i benefit */
    font-size: 16px;
}

/* Icona per la descrizione della struttura */
.prev-description::first-line {
    font-weight: bold;
    color: #118ad6;
}

.prev-description {
    line-height: 1.6;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 4px solid #118ad6;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
}

.typing-loader {
    width: 40px;
    height: 10px;
    background: radial-gradient(circle 3px, #118ad6 100%, transparent 0);
    background-size: 10px 100%;
    animation: p 0.5s infinite alternate;
}

@keyframes p {
    0% {
        background-position: 0 0, 10px 0, 20px 0
    }

    100% {
        background-position: 0 -5px, 10px -5px, 20px -5px
    }
}