/* ============================================= */
/* == STILI DI BASE E RESET == */
/* ============================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5; /* Sfondo grigio chiaro per lo spazio esterno */
    color: #333;
}

.fade-out-box {
    background-color: #d1e7dd;
    color: #0f5132;
    padding: 1rem;
    border: 1px solid #badbcc;
    border-radius: 6px;
    margin-bottom: 1rem;
    /* Animazione */
    animation: fadeOut 5s forwards;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    min-width: 300px;
    text-align: center;
}

@keyframes fadeOut {
    0%   { opacity: 1; }
    80%  { opacity: 1; } /* Rimane visibile per 4 sec */
    100% { opacity: 0; } /* Scompare nell'ultimo sec */
}


/* ================================== */
/* == PAGINA DI LOGIN == */
/* ================================== */

/* Applica questi stili SOLO se il body ha l'ID "page-login" */
body#page-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
}

body#page-login #login {
    width: 50%;
    max-width: 500px;
}

body#page-login #login > div {
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

body#page-login #login_logo {
    max-width: 180px;
    margin-bottom: 2rem;
}

body#page-login #login ul {
    list-style-type: none;
}

body#page-login #login li {
    margin-bottom: 1.5rem;
    text-align: left;
}

body#page-login #login li label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

body#page-login #login li input[type="text"],
body#page-login #login li input[type="password"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

body#page-login #submit_login {
    display: block;
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 6px;
    background-color: #0d6efd;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

body#page-login #submit_login:hover {
    background-color: #0b5ed7;
}


/* ============================================= */
/* == LAYOUT PAGINA PRINCIPALE E MENU ORIZZONTALE == */
/* ============================================= */

#top-bar { text-align: center; display: none; }
#logo { width: 10%; margin: 2rem; display: inline-block; }
#logo img { display: block; width: 100%; }
.popup { display: none; }

/* Stilizza l'header e la barra del menu */
header #main-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 0 2rem;
    height: 65px;
    border-bottom: 1px solid #e0e0e0;
    margin-top: 30px;
}

header #main-menu,
header #settings-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Spazio tra le voci di menu */
}

header a {
    text-decoration: none;
    color: #333;
}

header .item-menu {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

header .item-menu i.material-icons {
    margin-right: 8px; /* Spazio tra icona e testo */
    font-size: 20px;
}

header .item-menu:hover {
    background-color: #f0f2f5; /* Sfondo grigio al passaggio del mouse */
}

/* Stile per la voce di menu attiva */
header .item-menu.selected_item_menu {
    background-color: #e7f0ff; /* Sfondo blu chiaro */
    color: #0d6efd; /* Testo blu */
    font-weight: bold;
}


/* ========================================================= */
/* == CONTENUTO PAGINA GESTIONE PREVENTIVI == */
/* ========================================================= */

.input-with-buttons {
    position: relative; /* Necessario per posizionare i bottoni all'interno */
    display: flex;
    align-items: center;
}

.status-block {
    color: #fff;
}

.status-sent {
    background-color: green;
}
.status-draft {
    background-color: lightblue;
}
.status-pending_approval {
    background-color: orange;
}
.status-approved {
    background-color: greenyellow;
}
.status-rejected, .status-deleted {
    background-color: red;
}

.input-with-buttons input {
    flex-grow: 1;
    /* Aggiunge spazio a destra DENTRO l'input per i bottoni */
    padding-right: 5rem !important; /* circa 80px */
}

.input-with-buttons .btn-input {
    position: absolute; /* Posiziona i bottoni sopra l'input */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
    height: 100%;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0 0.75rem; /* Spaziatura orizzontale dei bottoni */
}

/* Posiziona il bottone "Cancella" (close) tutto a destra */
#clear-org-btn, #clear-deal-btn, #clear-person-btn {
    right: 0;
}

/* Posiziona il bottone "Cerca" (search) a sinistra del primo */
#search-org-btn, #search-deal-btn, #search-person-btn {
    right: 2.5rem; /* circa 40px */
}

.btn-input .material-icons {
    font-size: 20px;
    color: #6c757d;
    transition: color 0.2s ease;
}

.btn-input:hover .material-icons {
    color: #333;
}

.input-with-buttons .btn-input:disabled .material-icons {
    color: #ced4da;
    cursor: not-allowed;
}

main.main-content {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin: 2rem; /* Spazio tra il contenuto e il bordo della pagina */
}

main .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

main .page-header h1 {
    font-size: 1.8rem;
    color: #333;
}

main .filters {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

main .filters select {
    height: 45px;
}

main .form-group {
    flex-grow: 1;
    text-align: left;
}

main label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

main input[type="text"], main .input-with-buttons span {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
}

main .form-group input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

main .btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

main .btn-primary {
    background-color: #0d6efd;
    color: #ffffff;
}
main .btn-primary:hover {
    background-color: #0b5ed7;
}

main .btn-secondary {
    background-color: #6c757d;
    color: #ffffff;
}
main .btn-secondary:hover {
    background-color: #5a6268;
}

main .table-container {
    width: 100%;
    overflow-x: auto;
    padding: 3px;
}

main .quotes-table {
    width: 100%;
    border-collapse: collapse;
}

main .quotes-table th,
main .quotes-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

main .quotes-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    font-size: 15px;
}

main .quotes-table tbody tr:hover {
    background-color: #f1f1f1;
}

main .quotes-table tbody a.btn {
    padding: 5px;
}

main .quotes-table tbody a.btn i.material-icons {
    font-size: 18px;
}

main .button-container {
    text-align: center;
    margin-top: 50px;
}

/* Stile base per tutti i select dentro il main content */
main select {
    padding: 0.5rem 0.75rem; /* Padding interno */
    border: 1px solid #ddd; /* Bordo simile agli input */
    border-radius: 6px;     /* Angoli arrotondati */
    font-size: 0.9rem;      /* Dimensione font */
    background-color: #f8f9fa; /* Sfondo leggermente grigio */
    cursor: pointer;
    min-width: 80px; /* Larghezza minima per leggibilità */
    text-align: center;
    -webkit-appearance: none; /* Rimuove stile di default su alcuni browser */
    -moz-appearance: none;
    appearance: none;
    /* Aggiunge una freccia personalizzata */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
    padding-right: 2rem; /* Spazio per la freccia */
}

/* Quotes */
.deal_info { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.quote_add_row { margin-top: 10px; font-style: italic; }
.quote_add_row a { color: black; }

#quote_page main .quotes-table thead th:nth-child(1) { /* Nome prodotto */
    width: 31%;
}
#quote_page main .quotes-table thead th:nth-child(2) { /* Quantità (la più piccola) */
    width: 8%;
}
#quote_page main .quotes-table thead th:nth-child(3) { /* Prezzo */
    width: 12%;
}
#quote_page main .quotes-table thead th:nth-child(4) { /* Sconto Def. */
    width: 10%;
}
#quote_page main .quotes-table thead th:nth-child(5) { /* Sconto 2 */
    width: 9%;
}
#quote_page main .quotes-table thead th:nth-child(6) { /* Sconto 3 */
    width: 9%;
}
#quote_page main .quotes-table thead th:nth-child(7) { /* Totale riga */
    width: 12%;
}
#quote_page main .quotes-table thead th:nth-child(8) { /* Sconto finale */
    width: 9%;
}

/* Allinea a destra tutte le colonne dalla Quantità in poi */
#quote_page main .quotes-table th:nth-child(n+2),
#quote_page main .quotes-table td:nth-child(n+2) {
    text-align: right;
}

/* Allinea a destra anche il testo DENTRO gli input numerici */
#quote_page main .quotes-table td:nth-child(n+2) input[type="text"] {
    text-align: right;
}

/* Rende gli input un po' più compatti per adattarsi meglio */
#quote_page main .quotes-table input[type="text"] {
    padding: 0.6rem;
    font-size: 0.9rem;
}

/* Ripristina il bordo SOTTO la riga delle note (o sotto il prodotto se le note sono chiuse) */
.quotes-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
}

/* Stile per il pulsante Note */
.btn-toggle-note {
    background: none;
    border: none;
    cursor: pointer;
    color: #0d6efd; /* Colore blu */
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-toggle-note:hover {
    background-color: #e7f0ff;
}

.btn-toggle-note i {
    font-size: 20px;
}

/* Quando ci sono note inserite, cambiamo colore (opzionale, via JS) */
.btn-toggle-note.has-note {
    color: #198754; /* Verde se c'è una nota */
}

/* Stile contenitore note (pulito e con sfondo leggero) */
.row-notes td {
    background-color: #f8f9fa; /* Sfondo leggermente grigio per differenziarlo */
    padding: 15px !important;
    box-shadow: inset 0 3px 6px -6px rgba(0,0,0,0.2); /* Ombreggiatura interna leggera */
}

.note-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-note-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Contenitore per i totali, posizionato dopo la tabella */
.quote-totals {
    width: 100%;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column; /* Impila i totali */
    gap: 0.75rem; /* Spazio tra le righe dei totali */
}

.total-group {
    display: flex; /* Allinea etichetta e input */
    align-items: center;
}

.total-group label {
    /* Occupa lo spazio delle prime 6 colonne (86%) */
    width: 86%; 
    text-align: right;
    font-weight: 600;
    padding-right: 1rem; /* Spazio prima dell'input */
}

.total-group input[type="text"] {
    /* Occupa lo spazio dell'ultima colonna (Totale riga) (14%) */
    width: 14%; 
    text-align: right;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fdfdfd;
}

/* Rende l'ultimo totale più evidente */
.total-group-final label {
    font-size: 1.1rem;
    color: #000;
}

.total-group-final input[type="text"] {
    font-size: 1.1rem;
    padding: 0.75rem;
    background-color: #f8f9fa;
    border-width: 2px;
}

/* ============================================= */
/* == STILI PER IL FOOTER == */
/* ============================================= */

footer {
    width: 100%;
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center; /* Centra il contenuto orizzontalmente */
    align-items: center;    /* Allinea verticalmente logo e testo */
    gap: 2rem;              /* Aggiunge spazio tra il logo e il blocco di testo */
    margin-top: auto;         /* Aiuta a spingere il footer in fondo alla pagina */
}

/* Stile specifico per il testo del footer */
footer div:last-child {
    font-size: 0.8rem;
    color: #6c757d;      /* Grigio scuro per il testo legale */
    text-align: left;
    line-height: 1.5;      /* Migliora la leggibilità del paragrafo */
    max-width: 800px;      /* Evita che il testo diventi troppo largo su schermi grandi */
}

/* Assicura che l'immagine del logo si comporti correttamente */
footer img {
    display: block; /* Rimuove eventuale spazio extra sotto l'immagine */
}

/* ============================================= */
/* == ERROR BLOCK == */
/* ============================================= */
.alert {
    margin: 2rem;
    border: solid 2px red;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: bold;
    background-color: #fff;
}

.alert i.material-icons {
    color: red;
}

/* --- Stile Paginazione --- */

/* Contenitore principale per centrare e allineare gli elementi */
.pagination-wrapper {
    display: flex;
    justify-content: center; /* Puoi cambiarlo in 'flex-end' per allineare a destra */
    align-items: center;
    margin-top: 1.5rem; /* Spazio dalla tabella o contenuto sopra */
    gap: 0.5rem; /* Spazio tra i pulsanti e il testo */
    
    /* Usa un font sans-serif pulito, come nel tuo screenshot */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Stile per i pulsanti "Avanti" e "Indietro" */
.pagination-btn {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    color: #495057; /* Testo grigio scuro */
    background-color: #f8f9fa; /* Sfondo grigio chiarissimo */
    border: 1px solid #dee2e6; /* Bordo grigio chiaro */
    border-radius: 0.25rem; /* Angoli leggermente arrotondati */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Effetto al passaggio del mouse */
.pagination-btn:hover {
    background-color: #e9ecef;
    color: #333;
}

/* Testo "Pagina X" */
.pagination-info {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 600; /* Leggermente in grassetto */
}

/* Stile per il pulsante disabilitato */
.pagination-btn.disabled {
    color: #6c757d; /* Testo grigio più chiaro */
    pointer-events: none; /* Rende il link non cliccabile */
    opacity: 0.65; /* Aspetto semi-trasparente */
}

/* --- Stile pagina di conferma --- */
#confirm_page {
    background-color: #ffffff;
    padding: 3rem 2rem;      /* Spaziatura interna abbondante */
    border-radius: 8px;      /* Angoli arrotondati */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ombreggiatura leggera */
    margin: 3rem auto;       /* Distanza dall'alto e centrato orizzontalmente */
    max-width: 700px;        /* Larghezza massima per non farlo espandere troppo */
    text-align: center;      /* Centra il contenuto (testo e icona) */
}

#confirm_page h1 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0; /* Riga sottile sotto il titolo */
}

.confirm-message-box {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra l'icona e il testo orizzontalmente */
    gap: 1.5rem;             /* Spazio tra icona e testo */
    padding: 1rem 0;
}

/* Migliora l'aspetto del testo */
.confirm-message-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #495057;
    text-align: left; /* Il testo del messaggio rimane allineato a sinistra rispetto all'icona */
}

/* Loading spinner */
.loading-spinner {
    /* Icona SVG in base64 (un cerchio che gira) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z' opacity='.3'/%3E%3Cpath fill='%23333' d='M20 12h2A10 10 0 0 0 12 2v2a8 8 0 0 1 8 8z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' dur='1s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* Posizionato a destra */
    background-size: 20px 20px; /* Dimensione icona */
}