.calendar{display:flex;flex-flow:column}.day_num a{color:#000!important}.calendar .header .month-year{font-size:20px;font-weight:700;color:#636e73;padding:20px 0}.calendar .days{display:flex;flex-flow:wrap}.calendar .days .day_name{width:calc(100% / 7);border-right:1px solid #2c7aca;padding:20px;text-transform:uppercase;font-size:12px;font-weight:700;color:#fff;background-color:#448cd6}.calendar .days .day_name:nth-child(7){border:none}.calendar .days .day_num{display:flex;flex-flow:column;width:calc(100% / 7);border-right:1px solid #e6e9ea;border-bottom:1px solid #e6e9ea;padding:15px;font-weight:700;color:#7c878d;cursor:pointer;min-height:100px}.calendar .days .day_num span{display:inline-flex;width:30px;font-size:14px}.calendar .days .day_num .event{margin-top:10px;font-weight:500;font-size:14px;padding:3px 6px;border-radius:4px;background-color:#f0f4ff;color:#fff;word-wrap:break-word}.calendar .days .day_num .event.black{background-color:#000}.calendar .days .day_num .event.orange{background-color:orange}.calendar .days .day_num .event.green{background-color:#51ce57}.calendar .days .day_num .event.blue{background-color:#518fce}.calendar .days .day_num .event.red{background-color:#ce5151}.calendar .days .day_num:nth-child(7n+1){border-left:1px solid #e6e9ea}.calendar .days .day_num:hover{background-color:#fdfdfd}.calendar .days .day_num.ignore{background-color:#fdfdfd;color:#ced2d4;cursor:inherit}.calendar .days .day_num.selected{background-color:#f1f2f3;cursor:inherit}
a.link-documento {
    color: black !important;
}

.d-flex-calendar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.calendar-color {
    height: 20px;
    width: 20px;
    background-color: var(--first-color);
	margin-right: 5px;
}



  /* ============================================================
       1. STRUTTURA GRIGLIA CALENDARIO (Desktop & Mobile)
       ============================================================ */

        /* Forza GRID per evitare collisioni e giorni che saltano */
        .calendar .days {
            display: grid !important;
            grid-template-columns: repeat(7, 1fr) !important;
            /* 7 colonne fisse */
            gap: 1px;
            background: #dee2e6;
            border: 1px solid #dee2e6;
            flex-wrap: nowrap !important;
        }

        /* Reset celle */
        .calendar .days .day_num {
            width: auto !important;
            margin: 0 !important;
            background: #fff;
            min-height: 120px;
            /* Altezza base desktop */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* Header giorni */
        .calendar .days .day_name {
            width: auto !important;
            text-align: center;
            background: #0d6efd;
            color: #fff;
            font-weight: 700;
            padding: 10px 0;
        }

        /* ============================================================
       2. STILE EVENTO NEL CALENDARIO (Piccolo e troncato)
       ============================================================ */
        .event {
            font-size: 11px;
            padding: 4px 6px;
            margin-bottom: 4px;
            border-radius: 3px;
            border-left: 3px solid #0d6efd;
            background-color: #f0f4ff;
            color: #333;

            /* TRONCAMENTO: Qui serve per non spaccare il calendario */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        /* Nascondiamo i badge nel calendario piccolo per pulizia (opzionale, ma consigliato) */
        .calendar-day .badge {
            display: none !important;
        }

        /* ============================================================
       3. MOBILE FIX (Max 768px)
       ============================================================ */
        @media (max-width: 768px) {
            .calendar .days .day_num {
                min-height: 60px !important;
                height: auto !important;
                padding: 2px !important;
                align-items: center;
                overflow: visible !important;
                /* Importante per i pallini */
            }

            /* Pallini colorati invece del testo */
            .calendar .days .day_num .event {
                width: 8px !important;
                height: 8px !important;
                min-height: 8px !important;
                border-radius: 50%;
                padding: 0 !important;
                margin: 2px auto !important;
                color: transparent !important;
                border: none !important;
                background-clip: border-box;
            }

            /* Nasconde contenuto del pallino */
            .calendar .days .day_num .event * {
                display: none !important;
            }

            .calendar-week {
                flex-direction: column;
            }

            .calendar-week .day-block {
                width: 100%;
                margin-bottom: 10px;
            }
        }


        
      

/* ============================================================
   4. MODAL FIX (Centratura e Badge interi)
   ============================================================ */

/* Dialog centrato, lasciamo fare a Bootstrap */
#modalGiorno .modal-dialog {
    width: 100%;
    max-width: 600px;
    margin: 1.75rem auto;
}

/* Card evento dentro il modal */
.modal-event-item {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    border-left-width: 5px !important; /* Bordo colorato */

    /* Reset del troncamento che avevi sulla .event del calendario */
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
}

/* Badge stato nel modal (In corso / Chiuso / Creato) */
.modal-event-item .badge {
    display: inline-block !important;      /* niente blocco */
    padding: 0.35em 0.65em !important;
    font-size: 0.75rem !important;
    border-radius: 0.375rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin-top: 8px !important;
}

/* Icone e testo descrittivo */
.modal-event-item .small.text-muted {
    font-size: 0.9rem !important;
    margin-top: 5px;
}

/* Titolo cliente */
.modal-event-item .fw-bold {
    font-size: 1.1rem !important;
    margin-bottom: 5px;
}


.calendar .days .day_num .event {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}