/* Variabili CSS personalizzate */
/* Palette colori appuntamenti - Web safe con hover */
:root {
    --calendar-header-bg: #f8f9fa;
    --calendar-border: #dee2e6;
    --holiday-bg: #f8f9fa;
    --today-bg: #e3f2fd;

    /* Appuntamento 0 - Giallo */
    --appointment-0-bg: #fffbcc;
    --appointment-0-border: #cccc00;
    --appointment-0-text: #666600;
    --appointment-0-hover-bg: #fffa99;
    --appointment-0-hover-border: #999900;
    --appointment-0-hover-text: #444400;

    /* Appuntamento 1 - Rosso */
    --appointment-1-bg: #ffcccb;
    --appointment-1-border: #cc0000;
    --appointment-1-text: #660000;
    --appointment-1-hover-bg: #ffaaaa;
    --appointment-1-hover-border: #990000;
    --appointment-1-hover-text: #440000;

    /* Appuntamento 2 - Verde */
    --appointment-2-bg: #ccffcc;
    --appointment-2-border: #009900;
    --appointment-2-text: #004400;
    --appointment-2-hover-bg: #aaffaa;
    --appointment-2-hover-border: #006600;
    --appointment-2-hover-text: #002200;

    /* Appuntamento 3 - Blu */
    --appointment-3-bg: #ccddff;
    --appointment-3-border: #0066cc;
    --appointment-3-text: #003366;
    --appointment-3-hover-bg: #aaccff;
    --appointment-3-hover-border: #004499;
    --appointment-3-hover-text: #002244;

    /* Appuntamento 4 - Rosa */
    --appointment-4-bg: #ffccdd;
    --appointment-4-border: #cc0066;
    --appointment-4-text: #660033;
    --appointment-4-hover-bg: #ffaacc;
    --appointment-4-hover-border: #990044;
    --appointment-4-hover-text: #440022;

    /* Appuntamento 5 - Arancione */
    --appointment-5-bg: #ffddaa;
    --appointment-5-border: #cc6600;
    --appointment-5-text: #663300;
    --appointment-5-hover-bg: #ffcc88;
    --appointment-5-hover-border: #994400;
    --appointment-5-hover-text: #442200;

    /* Appuntamento 6 - Celeste */
    --appointment-6-bg: #aaddff;
    --appointment-6-border: #0099cc;
    --appointment-6-text: #004466;
    --appointment-6-hover-bg: #88ccff;
    --appointment-6-hover-border: #006699;
    --appointment-6-hover-text: #003344;

    /* Appuntamento 7 - Grigio */
    --appointment-7-bg: #f0f0f0;
    --appointment-7-border: #666666;
    --appointment-7-text: #333333;
    --appointment-7-hover-bg: #e0e0e0;
    --appointment-7-hover-border: #444444;
    --appointment-7-hover-text: #222222;

    /* Appuntamento 8 - Viola */
    --appointment-8-bg: #ddccff;
    --appointment-8-border: #6600cc;
    --appointment-8-text: #330066;
    --appointment-8-hover-bg: #ccaaff;
    --appointment-8-hover-border: #440099;
    --appointment-8-hover-text: #220044;

    /* Appuntamento 9 - Verde lime */
    --appointment-9-bg: #ddffaa;
    --appointment-9-border: #66cc00;
    --appointment-9-text: #336600;
    --appointment-9-hover-bg: #ccff88;
    --appointment-9-hover-border: #449900;
    --appointment-9-hover-text: #224400;

    --courtesy-car-color: #ff6b35;
}

/* Container principale */
.calendar-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f5f5f5;
}

/* Header del calendario */
.calendar-header {
    background: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    min-height: auto;
}

.calendar-nav {
    display: flex;
    gap: 0.25rem;
}

/* Override specifici per i pulsanti del calendario */
.calendar-nav button {
    background: white;
    border: 1px solid var(--calendar-border);
    color: #495057;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    margin: 0;
    width: auto;
    display: inline-block;
    min-height: auto;
}

.calendar-nav button:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.calendar-title {
    text-transform: capitalize;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

/* Contenuto del calendario */
.calendar-content {
    flex: 1;
    overflow: auto;
    background: white;
    /* Disabilita il bounce scroll su Safari/iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    /* Fallback per browser più vecchi */
    -webkit-overscroll-behavior: none;
}

.calendar-grid {
    display: flex;
    min-height: 100%;
    height: 100%;
}

/* Header fisso delle colonne dei giorni */
.calendar-days-header {
    background: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
    display: flex;
    flex-shrink: 0;
    width: 100%; /* Assicura larghezza piena */
}

/* La griglia all'interno dell'header deve occupare tutta la larghezza */
.calendar-days-header .calendar-grid {
    width: 100%;
    display: flex;
    min-height: auto; /* Override per l'header */
    height: auto; /* Override per l'header */
}

/* Colonne dei giorni */
.day-column {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--calendar-border);
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* ← AGGIUNTO: Include i bordi nel calcolo della larghezza */
}

.day-column:last-child {
    border-right: none;
}

.day-column.holiday {
    background-color: var(--holiday-bg);
}

.day-column.today {
    background-color: var(--today-bg);
}

/* Header dei giorni */
.day-header {
    background: var(--calendar-header-bg);
    border-bottom: 1px solid var(--calendar-border);
    padding: 0.25rem 0.125rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: auto;
}

.day-header-cell {
    flex: 1;
    min-width: 0;
    border-right: 1px solid var(--calendar-border);
    padding: 0.25rem 0.125rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: #495057;
    background: var(--calendar-header-bg);
    box-sizing: border-box; /* ← AGGIUNTO: Include i bordi nel calcolo della larghezza */
}

.day-header-cell:last-child {
    border-right: none;
}

.day-header-cell.holiday {
    background-color: var(--holiday-bg);
}

.day-header-cell.today {
    background-color: var(--today-bg);
}

.day-number {
    font-size: 0.8rem;
    color: #212529;
    line-height: 1;
}

.day-name {
    font-size: 0.6rem;
    color: #6c757d;
    margin-top: 0.125rem;
    line-height: 1;
}

/* Appuntamenti */
.appointment-row {
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    margin: 0.5px 0;
    z-index: 5;
}

.appointment-bar {
    margin-left: 1px;
    margin-right: 2px;
    border: 1px solid;
    border-radius: 3px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 3px;
    font-size: 0.54rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 0 0.5px 1px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    box-sizing: border-box; /* Include bordi nel calcolo larghezza */
}

.appointment-bar:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    z-index: 15;
}

.appointment-bar.tier-0 {
    background: var(--appointment-0-bg);
    border-color: var(--appointment-0-border);
    color: var(--appointment-0-text);
}

.appointment-bar.tier-0:hover {
    background: var(--appointment-0-hover-bg);
    border-color: var(--appointment-0-hover-border);
    color: var(--appointment-0-hover-text);
}

.appointment-bar.tier-1 {
    background: var(--appointment-1-bg);
    border-color: var(--appointment-1-border);
    color: var(--appointment-1-text);
}

.appointment-bar.tier-1:hover {
    background: var(--appointment-1-hover-bg);
    border-color: var(--appointment-1-hover-border);
    color: var(--appointment-1-hover-text);
}

.appointment-bar.tier-2 {
    background: var(--appointment-2-bg);
    border-color: var(--appointment-2-border);
    color: var(--appointment-2-text);
}

.appointment-bar.tier-2:hover {
    background: var(--appointment-2-hover-bg);
    border-color: var(--appointment-2-hover-border);
    color: var(--appointment-2-hover-text);
}

.appointment-bar.tier-3 {
    background: var(--appointment-3-bg);
    border-color: var(--appointment-3-border);
    color: var(--appointment-3-text);
}

.appointment-bar.tier-3:hover {
    background: var(--appointment-3-hover-bg);
    border-color: var(--appointment-3-hover-border);
    color: var(--appointment-3-hover-text);
}

.appointment-bar.tier-4 {
    background: var(--appointment-4-bg);
    border-color: var(--appointment-4-border);
    color: var(--appointment-4-text);
}

.appointment-bar.tier-4:hover {
    background: var(--appointment-4-hover-bg);
    border-color: var(--appointment-4-hover-border);
    color: var(--appointment-4-hover-text);
}

.appointment-bar.tier-5 {
    background: var(--appointment-5-bg);
    border-color: var(--appointment-5-border);
    color: var(--appointment-5-text);
}

.appointment-bar.tier-5:hover {
    background: var(--appointment-5-hover-bg);
    border-color: var(--appointment-5-hover-border);
    color: var(--appointment-5-hover-text);
}

.appointment-bar.tier-6 {
    background: var(--appointment-6-bg);
    border-color: var(--appointment-6-border);
    color: var(--appointment-6-text);
}

.appointment-bar.tier-6:hover {
    background: var(--appointment-6-hover-bg);
    border-color: var(--appointment-6-hover-border);
    color: var(--appointment-6-hover-text);
}

.appointment-bar.tier-7 {
    background: var(--appointment-7-bg);
    border-color: var(--appointment-7-border);
    color: var(--appointment-7-text);
}

.appointment-bar.tier-7:hover {
    background: var(--appointment-7-hover-bg);
    border-color: var(--appointment-7-hover-border);
    color: var(--appointment-7-hover-text);
}

.appointment-bar.tier-8 {
    background: var(--appointment-8-bg);
    border-color: var(--appointment-8-border);
    color: var(--appointment-8-text);
}

.appointment-bar.tier-8:hover {
    background: var(--appointment-8-hover-bg);
    border-color: var(--appointment-8-hover-border);
    color: var(--appointment-8-hover-text);
}

.appointment-bar.tier-9 {
    background: var(--appointment-9-bg);
    border-color: var(--appointment-9-border);
    color: var(--appointment-9-text);
}

.appointment-bar.tier-9:hover {
    background: var(--appointment-9-hover-bg);
    border-color: var(--appointment-9-hover-border);
    color: var(--appointment-9-hover-text);
}

.appointment-bar.has-courtesy-car {
    border-left: 2px solid var(--courtesy-car-color);
    padding-left: 4px; /* Compensa leggermente il bordo più spesso */
}

/* Tooltip con freccia dinamica - Solo sopra/sotto */
.appointment-tooltip {
    position: absolute;
    z-index: 1000;
    background: #2c3e50;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    max-width: 250px;
    display: none;
    pointer-events: none;
}

/* Freccia verso l'alto (tooltip sotto l'elemento) */
.appointment-tooltip.arrow-up::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #2c3e50;
}

/* Freccia verso il basso (tooltip sopra l'elemento) */
.appointment-tooltip.arrow-down::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #2c3e50;
}

.appointment-tooltip.show {
    display: block;
}

/* Stati di caricamento ed errore */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 0.9rem;
    color: #6c757d;
}

.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 0.75rem;
    border-radius: 4px;
    margin: 0.75rem;
    font-size: 0.85rem;
}

/* Responsive - Ancora più compatto su mobile */
@media (max-width: 768px) {
    .calendar-header {
        padding: 0.25rem 0.5rem;
    }

    .calendar-nav button {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
    }

    .calendar-title {
        font-size: 0.9rem;
    }

    .day-header {
        padding: 0.2rem 0.1rem;
        font-size: 0.6rem;
    }

    .day-header-cell {
        padding: 0.2rem 0.1rem;
        font-size: 0.6rem;
    }

    .day-number {
        font-size: 0.7rem;
    }

    .day-name {
        font-size: 0.55rem;
    }

    .appointment-row {
        height: 10px;
    }

    .appointment-bar {
        font-size: 0.55rem;
        padding: 0 2px;
    }
}

/* Supporto per gesture zoom (preparazione futura) */
.calendar-container {
    touch-action: pan-x pan-y pinch-zoom;
}