/* =============================================================
   planning.css — Planning2 calendar page
   Scope: toolbar, calendar area, view placeholders, scrollbar
   Variables: uses --upf-* and --bs-* from variables.css / Hyper theme
   ============================================================= */

/* --- Configurabili --- */
:root {
    --planning-hour-height: 64px;
    --planning-time-col-width: 64px;
    --planning-current-time-color: #e74c3c;
    --planning-event-border-radius: 6px;
    --planning-event-min-height: 28px;
    --planning-header-height: 60px;
}

/* Nota: gli stili della toolbar sono in /css/components/toolbar.css */

/* =============================================================
   AREA CALENDARIO
   ============================================================= */

.planning-page-wrapper {
    display: flex;
    flex-direction: column;
    /* height: 100% non propaga nel layout Hyper (nessun parent con altezza fissa).
       Lo scroll avviene sul body. La griglia oraria in T4 userà min-height esplicito. */
}

.planning-calendar-area {
    /* transparent: lascia che il body/layout del tema gestisca il background
       sia in light che in dark mode, evitando la striscia visibile sotto la card
       causata da --upf-color-bg che non ha override nel blocco [data-bs-theme=dark]. */
    background-color: transparent;
    padding: var(--upf-space-4);
}

.planning-calendar-card {
    background: var(--upf-color-surface);
    border: 1px solid var(--upf-color-border);
    border-radius: var(--upf-radius-lg);
    box-shadow: var(--upf-shadow-xs);
    overflow: hidden;
}

/* =============================================================
   SCROLLABILE — contenitore griglia con scroll interno
   ============================================================= */

.planning-calendar-scroll {
    overflow-y: auto;
    max-height: calc(100vh - var(--planning-header-height) - 120px);
    border-radius: var(--upf-radius-lg);
}

.planning-calendar-scroll::-webkit-scrollbar {
    width: 5px;
}

.planning-calendar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.planning-calendar-scroll::-webkit-scrollbar-thumb {
    background-color: var(--upf-color-border-strong);
    border-radius: 10px;
}

.planning-calendar-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--upf-text-muted);
}

/* =============================================================
   DAY VIEW
   ============================================================= */

.planning-day-view {
    padding: 0;
}

/* Layout flex: colonna orari | colonna eventi */
.planning-time-grid {
    display: flex;
    min-height: calc(24 * var(--planning-hour-height));
    position: relative;
}

/* --- Colonna orari sinistra --- */
.planning-time-col {
    width: var(--planning-time-col-width);
    flex-shrink: 0;
    border-right: 1px solid var(--upf-color-border);
    background: var(--upf-color-surface);
    position: sticky;
    left: 0;
    z-index: 5;
}

/* Slot da 30 minuti nella colonna orari */
.planning-time-slot {
    height: calc(var(--planning-hour-height) / 2);
    box-sizing: border-box; /* border-top inclusa nell'altezza → allineamento con griglia eventi */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 3px 8px 0 0;
}

.planning-time-slot-hour {
    border-top: 1px solid var(--upf-color-border);
}

.planning-time-slot-half {
    border-top: 1px dashed rgba(148, 163, 184, 0.20);
}

.planning-time-label {
    font-size: .7rem;
    color: var(--upf-text-muted);
    line-height: 1;
    user-select: none;
}

/* --- Colonna eventi destra --- */
.planning-events-col {
    flex: 1;
    position: relative;
    background: var(--upf-color-surface);
    /* min-height garantisce un containing block risolto per i figli position:absolute
       (eventi e linea ora). Senza questo, Safari/Firefox con flex:1 potrebbero non
       propagare la min-height del genitore planning-time-grid, rendendo invisibili
       gli elementi assolutamente posizionati. Stessa regola già presente su planning-week-day-col. */
    min-height: calc(24 * var(--planning-hour-height));
}

/* Righe griglia sfondo (generate nel loop Blazor) */
.planning-grid-row {
    height: calc(var(--planning-hour-height) / 2);
    box-sizing: border-box; /* coerente con .planning-time-slot → nessun drift */
    border-top: 1px solid var(--upf-color-border);
    cursor: pointer;
    transition: background-color .15s ease;
}

.planning-grid-row-half {
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

/* Righe alternate per leggibilità (sfondo leggerissimo sulle ore pari) */
.planning-grid-row:nth-child(4n+1),
.planning-grid-row:nth-child(4n+2) {
    background-color: rgba(148, 163, 184, 0.025);
}

/* Hover slot vuoto — dichiarato DOPO nth-child per avere precedenza nella cascade */
.planning-grid-row:hover {
    background-color: rgba(60, 116, 211, 0.06);
}

/* --- Blocco evento ---
   left e width vengono impostati via inline style da PlanningLayoutHelper.ComputeEventLayout,
   che gestisce il column-splitting per eventi sovrapposti. Non impostare left/right/width qui. */
.planning-event {
    position: absolute;
    min-height: var(--planning-event-min-height);
    border-radius: var(--planning-event-border-radius);
    padding: 4px 8px;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
    transition: box-shadow .15s ease, transform .12s ease;
    box-sizing: border-box;
    /* L'espansione scaleX avviene verso sinistra: il bordo destro rimane fisso
       e non viene tagliato dai contenitori con overflow:hidden/auto. */
    transform-origin: right center;
}

/* Evento senza sovrapposizioni: occupa tutta la colonna con margini fissi.
   left/width non vengono impostati via inline style — questa regola li gestisce. */
.planning-event--solo {
    left: 4px;
    right: 4px;
    width: auto;
}

.planning-event:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px) scaleX(1.01);
    z-index: 20;
}

.planning-event-title {
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.planning-event-meta {
    font-size: .7rem;
    opacity: 0.85;
    margin-top: 1px;
    line-height: 1.2;
}

.planning-event-resource {
    font-size: .67rem;
    opacity: 0.75;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Immagine rotonda del tipo corso (Day/Week view).
   Centrata verticalmente, ancorata a destra con 4px di margine.
   width e height sono impostatati inline (70% dell'altezza evento calcolata in C#).
   Non intercetta i click (pointer-events:none).
   Il bordo usa il primary color del tema Bootstrap. */
.planning-event-course-img {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bs-primary, #3c74d3);
    z-index: 3;
    pointer-events: none;
    flex-shrink: 0;
}

/* Icona evento Month view con immagine corso: dimensione aumentata del 30% rispetto
   all'icona standard (36px × 1.3 ≈ 47px). padding:0 e overflow:hidden
   sono già applicati inline dalla logica Razor. */
.planning-month-icon--with-img {
    width: 47px;
    height: 47px;
}

/* Linea "ora corrente" */
.planning-current-time-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--planning-current-time-color);
    z-index: 10;
    pointer-events: none;
}

.planning-current-time-line::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--planning-current-time-color);
}

/* Label ora corrente (sovrapposta alla colonna orari) */
.planning-current-time-label {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    width: var(--planning-time-col-width);
    padding-right: 8px;
    text-align: right;
    font-size: .68rem;
    font-weight: 700;
    color: var(--planning-current-time-color);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    /* Esce dalla colonna eventi e si sovrappone alla colonna orari */
    margin-left: calc(-1 * var(--planning-time-col-width));
}

/* =============================================================
   WEEK VIEW
   ============================================================= */

/* Variabile altezza header giorni */
:root {
    --planning-week-header-height: 56px;
}

/* Card wrapper WeekView: header fisso sopra, body scrollante sotto */
.planning-card-week {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* clipping bordi arrotondati */
}

/* Riga header giorni — sticky all'interno del contenitore scrollante.
   Essendo nello stesso contenitore della griglia, header e colonne condividono
   sempre la stessa larghezza: la scrollbar verticale non causa disallineamento. */
.planning-week-header-row {
    display: flex;
    align-items: stretch;
    min-height: var(--planning-week-header-height);
    flex-shrink: 0;
    border-bottom: 1px solid var(--upf-color-border);
    background: var(--upf-color-surface);
    position: sticky;
    top: 0;
    z-index: 15; /* sopra .planning-time-col (z-index:5) e gli eventi (z-index:2/20) */
}

/* Spaziatore sotto la colonna orari nell'header */
.planning-week-time-spacer {
    width: var(--planning-time-col-width);
    flex-shrink: 0;
    border-right: 1px solid var(--upf-color-border);
}

/* Singolo header colonna giorno */
.planning-week-day-header {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    border-left: 1px solid var(--upf-color-border);
    gap: 2px;
    cursor: default;
    user-select: none;
}

.planning-week-day-header.today {
    background-color: var(--upf-primary-soft);
}

/* Nome giorno abbreviato (LUN, MAR, …) */
.planning-week-day-name {
    font-size: .62rem;
    font-weight: 600;
    color: var(--upf-text-muted);
    letter-spacing: .05em;
}

.planning-week-day-header.today .planning-week-day-name {
    color: var(--upf-primary);
}

/* Numero del giorno — cerchio per oggi */
.planning-week-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: .88rem;
    font-weight: 400;
    color: var(--upf-text-primary);
    border-radius: 50%;
    line-height: 1;
}

.planning-week-day-num.today {
    background-color: var(--upf-primary);
    color: #fff;
    font-weight: 600;
}

/* Corpo scrollante WeekView — contiene anche l'header (sticky).
   Il max-height non sottrae più --planning-week-header-height perché l'header
   è ora all'interno di questo contenitore, non sopra di esso. */
.planning-week-body-scroll {
    overflow-y: auto;
    max-height: calc(100vh - var(--planning-header-height) - 120px);
}

.planning-week-body-scroll::-webkit-scrollbar { width: 5px; }
.planning-week-body-scroll::-webkit-scrollbar-track { background: transparent; }
.planning-week-body-scroll::-webkit-scrollbar-thumb {
    background-color: var(--upf-color-border-strong);
    border-radius: 10px;
}
.planning-week-body-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--upf-text-muted);
}

/* Griglia settimana: colonna orari + wrapper colonne giorno */
.planning-week-grid {
    display: flex;
    min-height: calc(24 * var(--planning-hour-height));
    position: relative;
}

/* Wrapper dei 7 giorni + linea ora corrente */
.planning-week-cols-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    min-height: calc(24 * var(--planning-hour-height));
}

/* Singola colonna giorno */
.planning-week-day-col {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--upf-color-border);
    min-height: calc(24 * var(--planning-hour-height));
}

/* =============================================================
   MONTH VIEW
   ============================================================= */

.planning-month-view {
    /* nessun padding aggiuntivo: la griglia gestisce bordi e spacing */
}

/* Griglia 7 colonne uguali — condivisa da header nomi e celle giorni */
.planning-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Header nomi giorni (Lun–Dom) */
.planning-month-header {
    padding: 8px 4px;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: var(--upf-text-muted);
    letter-spacing: .05em;
    border-bottom: 1px solid var(--upf-color-border);
    background: var(--upf-color-surface);
    user-select: none;
}

/* Cella giorno */
.planning-month-cell {
    min-height: 100px;
    padding: 6px 8px;
    border-right: 1px solid var(--upf-color-border);
    border-bottom: 1px solid var(--upf-color-border);
    cursor: pointer;
    transition: background-color .15s ease;
    /* overflow: visible permette alle icone hover (scale) di espandersi oltre
       i bordi della cella senza essere tagliate. Il contenuto è limitato
       (numero giorno breve + max N icone + badge) quindi non c'è rischio
       di overflow involontario verso celle adiacenti. */
    overflow: visible;
    position: relative;
    box-sizing: border-box;
}

.planning-month-cell:hover {
    background-color: var(--upf-color-surface-muted);
    /* Porta la cella sopra le adiacenti così le icone scalate al hover
       non vengono coperte dai bordi/sfondi delle celle vicine. */
    z-index: 2;
}

/* Rimuove bordo destro sulle celle dell'ultima colonna */
.planning-month-cell:nth-child(7n) {
    border-right: none;
}

/* Giorni del mese precedente / successivo */
.planning-month-cell.other-month {
    opacity: 0.4;
}

/* Giorno odierno */
.planning-month-cell.today {
    background-color: var(--upf-primary-soft);
}

.planning-month-cell.today:hover {
    background-color: var(--upf-primary-soft);
}

/* Numero del giorno in alto a sinistra */
.planning-month-day-number {
    font-size: .82rem;
    color: var(--upf-text-secondary);
    margin-bottom: 6px;
    line-height: 1;
}

/* Cerchio colorato per il giorno odierno */
.planning-month-day-number span.today {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--upf-primary);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
}

/* Contenitore icone avatar-stack */
.planning-month-icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* overflow: visible per permettere alle icone in hover (scale) di
       espandersi senza essere tagliate dal contenitore. */
    overflow: visible;
}

/* Cerchio singola icona evento */
.planning-month-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--upf-color-surface);
    font-size: 1rem;
    color: var(--upf-text-secondary);
    position: relative;
    z-index: 1;
    transition: box-shadow .15s ease, transform .15s ease;
    box-sizing: border-box;
}

/* Icone dalla seconda in poi: overlap avatar-stack */
.planning-month-icon.stacked {
    margin-left: -6px;
}

.planning-month-icon:hover {
    z-index: 10;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
}

/* Badge "+N" eventi nascosti */
.planning-month-more-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 10px;
    background-color: var(--upf-color-surface-muted);
    border: 1px solid var(--upf-color-border);
    font-size: .62rem;
    font-weight: 600;
    color: var(--upf-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}


/* =============================================================
   STATI VUOTI E LOADING
   ============================================================= */

/* Empty state: nessun calendario / caricamento iniziale */
.planning-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--upf-text-muted);
    font-size: .9rem;
}

/* Avviso risorse vuote sopra la card */
.planning-resources-warning {
    border-radius: var(--upf-radius-sm);
    font-size: .85rem;
}

/* Overlay loading sulla card degli eventi */
.planning-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* =============================================================
   SCROLLBAR CUSTOM (area oraria)
   ============================================================= */

.planning-calendar-area::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.planning-calendar-area::-webkit-scrollbar-track {
    background: transparent;
}

.planning-calendar-area::-webkit-scrollbar-thumb {
    background-color: var(--upf-color-border-strong);
    border-radius: 10px;
}

.planning-calendar-area::-webkit-scrollbar-thumb:hover {
    background-color: var(--upf-text-muted);
}

/* =============================================================
   VIEW TRANSITION FADE
   ============================================================= */

@keyframes planning-content-fadein {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.planning-calendar-content {
    animation: planning-content-fadein .18s ease both;
}

/* =============================================================
   SKELETON LOADER
   ============================================================= */

@keyframes planning-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.planning-skeleton-block {
    border-radius: var(--upf-radius-sm);
    background: linear-gradient(
        90deg,
        var(--upf-color-surface-muted) 25%,
        var(--upf-color-border) 50%,
        var(--upf-color-surface-muted) 75%
    );
    background-size: 600px 100%;
    animation: planning-shimmer 1.4s infinite linear;
}

.planning-skeleton-row {
    height: 40px;
    margin-bottom: 8px;
}

.planning-skeleton-header {
    height: 24px;
    width: 40%;
    margin-bottom: 16px;
}

.planning-skeleton-wrapper {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =============================================================
   EMPTY PERIOD STATE
   ============================================================= */

.planning-empty-period {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--upf-text-muted);
    font-size: .88rem;
    text-align: center;
}

.planning-empty-period .planning-empty-icon {
    font-size: 2rem;
    opacity: .4;
    line-height: 1;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* Mobile WeekView 3 colonne: disabilita lo scroll orizzontale del wrapper.
   Le 3 colonne generate da C# (VisibleWeekDays) si distribuiscono in flex 1:1:1
   senza overflow, quindi non servono min-width né overflow-x: auto. */
@media (max-width: 768px) {
    .planning-week-hscroll {
        overflow-x: visible;
    }

    .planning-week-hscroll .planning-week-header-row,
    .planning-week-hscroll .planning-week-grid {
        min-width: unset;
    }

    .planning-week-day-col {
        min-width: unset;
        flex: 1;
    }

    /* Ripristina overflow:hidden della card (rimosso in T10 per lo scroll) */
    .planning-card-week {
        overflow: hidden;
    }
}

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
    .planning-week-day-name {
        font-size: .6rem;
    }

    .planning-event {
        font-size: .65rem;
        padding: 1px 4px;
    }
}

/* Mobile: max 640px */
@media (max-width: 640px) {
    /* Nasconde colonna ore in DayView su schermi piccoli */
    .planning-time-col {
        display: none;
    }

    .planning-month-cell {
        min-height: 52px;
        padding: 4px;
    }

    .planning-month-icon {
        width: 28px;
        height: 28px;
        font-size: .8rem;
    }

    .planning-month-more-badge {
        font-size: .55rem;
        height: 16px;
    }
}


/* =============================================================
   AGENDA VIEW
   ============================================================= */

.planning-agenda-scroll {
    overflow-y: auto;
    max-height: calc(100vh - var(--planning-header-height) - 80px);
}

.planning-agenda-scroll::-webkit-scrollbar { width: 5px; }
.planning-agenda-scroll::-webkit-scrollbar-track { background: transparent; }
.planning-agenda-scroll::-webkit-scrollbar-thumb {
    background-color: var(--upf-color-border-strong);
    border-radius: 10px;
}
.planning-agenda-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--upf-text-muted);
}

.planning-agenda-view {
    background: var(--upf-color-surface);
    border: 1px solid var(--upf-color-border);
    border-radius: var(--upf-radius-lg);
    overflow: hidden;
}

/* Intestazione giorno */
.planning-agenda-day-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 7px 16px;
    background: var(--upf-color-surface-muted);
    border-bottom: 1px solid var(--upf-color-border);
    border-top: 1px solid var(--upf-color-border);
}

.planning-agenda-day-header:first-child {
    border-top: none;
}

.planning-agenda-day-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--upf-text-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Contenitore eventi del giorno */
.planning-agenda-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

/* Blocco singolo evento */
.planning-agenda-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--planning-event-border-radius);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .12s ease;
    transform-origin: right center;
}

.planning-agenda-event:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

/* Immagine rotonda corso */
.planning-agenda-event-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
    flex-shrink: 0;
}

/* Corpo testo evento */
.planning-agenda-event-body {
    flex: 1;
    min-width: 0;
}

/* Spinner "caricamento altri eventi" */
.planning-agenda-load-more {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

/* Messaggio fine lista */
.planning-agenda-end-message {
    display: flex;
    justify-content: center;
    padding: 16px;
    color: var(--upf-text-muted);
    font-size: .8rem;
}

/* Sentinel invisibile per IntersectionObserver */
.planning-agenda-sentinel {
    height: 1px;
    width: 100%;
}