/*
 * HtmlPlanningGrid — timeline planning (portata da Beatrice.Planning.Base.Forms).
 * Look fedele al WinForms con PLANNING_THEME_VER2: blocchi "vetro" arrotondati,
 * striscia di stato a sinistra, pallino societa', testate di riga colorate.
 * Le righe/blocchi sono costruiti da planninggrid.js dal modello JSON.
 */

.pg-root {
    --pg-header-w: 220px;
    --pg-row-h: 34px;
    --pg-ruler-h: 40px;
    --pg-border: #b8b8b8;
    --pg-grid-line: #d7dde5;
    --pg-grid-line-day: #9fb0c4;
    --pg-headbg: #f3f5f8;
    --pg-headbg2: #e7ebf1;
    --pg-work: #c9d6e5; /* LightSteelBlue-ish, area di lavoro */
    --pg-track: #eef1f5;
    --pg-track-alt: #e7ebf1;
    --pg-now: #e2504b;
    --pg-weekend-sat: rgba(120,140,170,.07); /* sabato attenuato */
    --pg-weekend-sun: rgba(120,140,170,.18); /* domenica piu' marcata */

    display: flex;
    flex-direction: column;
    position: relative; /* ancora per il drawer laterale scadenze/prenotazioni */
    height: 100%;
    min-height: 320px;
    font-family: Tahoma, Segoe UI, Arial, sans-serif;
    font-size: 12px;
    color: #33373c;
    border: 1px solid var(--pg-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

/* ---- Toolbar ---- */
.pg-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #4a5a6b, #3a4756);
    color: var(--color-text-inverse);
    flex: 0 0 auto;
}
.pg-toolbar .pg-title { font-weight: 600; font-size: 13px; margin-right: 8px; }
.pg-toolbar .pg-spacer { flex: 1 1 auto; }
.pg-toolbar button.pg-tb {
    background: rgba(255,255,255,.12);
    color: var(--color-text-inverse);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
    line-height: 18px;
}
.pg-toolbar button.pg-tb:hover { background: rgba(255,255,255,.22); }
.pg-toolbar button.pg-tb.pg-on { background: #fff; color: #33373c; border-color: #fff; }
.pg-toolbar input.pg-date {
    background: #fff; color: #222; color-scheme: light;
    border: 1px solid rgba(255,255,255,.35); border-radius: 3px;
    padding: 2px 6px; font-size: 12px; cursor: pointer; line-height: 1.3;
}
.pg-toolbar select.pg-sede, .pg-toolbar select.pg-categ {
    background: rgba(255,255,255,.12); color: var(--color-text-inverse);
    border: 1px solid rgba(255,255,255,.25); border-radius: 3px;
    padding: 3px 6px; font-size: 12px; max-width: 220px; cursor: pointer;
}
.pg-toolbar select.pg-sede option, .pg-toolbar select.pg-categ option { color: #222; }
.pg-toolbar .pg-ar { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-inverse); font-size: 11px; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; }
.pg-toolbar .pg-ar.pg-on { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.pg-toolbar .pg-ar-lbl { opacity: .85; }
.pg-toolbar .pg-ar-in { width: 46px; padding: 2px 4px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; background: rgba(255,255,255,.12); color: var(--color-text-inverse); font-size: 12px; }

/* ---- Pannello filtri ---- */
.pg-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px;
    padding: 8px 10px; flex: 0 0 auto;
    background: #eef1f5; border-bottom: 1px solid var(--pg-grid-line-day);
}
.pg-filters .pg-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #3a4756; }
.pg-filters .pg-f-lbl { font-weight: 600; }
.pg-filters .pg-f-in { padding: 3px 6px; border: 1px solid #b8c0cb; border-radius: 3px; font-size: 12px; min-width: 120px; background: #fff; color: #222; }
.pg-filters input[type="checkbox"].pg-f-in, .pg-filters .pg-f input[type="checkbox"] { min-width: 0; width: 16px; height: 16px; }
.pg-filters .pg-f-actions { display: flex; gap: 6px; align-items: flex-end; }
.pg-filters .pg-tb { background: #4a5a6b; color: var(--color-text-inverse); border: 1px solid #3a4756; border-radius: 3px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
.pg-filters .pg-tb.pg-f-apply { background: #2e7d46; border-color: #256437; }
.pg-filters .pg-tb:hover { filter: brightness(1.08); }

/* ---- Viewport / griglia ---- */
.pg-viewport { position: relative; flex: 1 1 auto; overflow: auto; background: var(--pg-work); }
.pg-loading, .pg-empty {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #5a6672; font-style: italic;
}
.pg-grid { position: relative; }

/* Righello date/ore in alto (sticky). */
.pg-ruler {
    position: sticky; top: 0; z-index: 5;
    height: var(--pg-ruler-h);
    margin-left: var(--pg-header-w);
    background: linear-gradient(180deg, var(--pg-headbg), var(--pg-headbg2));
    border-bottom: 1px solid var(--pg-grid-line-day);
}
.pg-ruler .pg-day {
    position: absolute; top: 0; height: 18px; line-height: 18px;
    border-left: 1px solid var(--pg-grid-line-day);
    font-weight: 600; font-size: 11px; color: #3a4756;
    padding-left: 4px; white-space: nowrap; overflow: hidden;
}
.pg-ruler .pg-hour {
    position: absolute; top: 18px; height: 22px; line-height: 22px;
    border-left: 1px solid var(--pg-grid-line);
    font-size: 10px; color: #6b7783; padding-left: 2px;
    box-sizing: border-box;
}
/* Testata giorno weekend (Sab attenuato, Dom marcata). */
.pg-ruler .pg-day.pg-day-sat { background: var(--pg-weekend-sat); }
.pg-ruler .pg-day.pg-day-sun { background: var(--pg-weekend-sun); color: #2a3340; }

/* Angolo in alto a sinistra (sticky su entrambi gli assi). */
.pg-corner {
    position: sticky; top: 0; left: 0; z-index: 7;
    float: left;
    width: var(--pg-header-w); height: var(--pg-ruler-h);
    margin-top: calc(-1 * var(--pg-ruler-h));
    background: linear-gradient(180deg, #4a5a6b, #3a4756);
    color: var(--color-text-inverse); box-sizing: border-box;
    border-right: 1px solid var(--pg-grid-line-day);
    border-bottom: 1px solid var(--pg-grid-line-day);
    display: flex; align-items: center; padding: 0 8px; font-size: 11px;
}

/* Righe */
.pg-row { position: relative; height: var(--pg-row-h); }
.pg-row:nth-child(even) .pg-track { background-color: var(--pg-track-alt); }

/* Testata di riga (sticky a sinistra). */
.pg-rowhead {
    position: sticky; left: 0; z-index: 4; float: left;
    width: var(--pg-header-w); height: var(--pg-row-h);
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--pg-headbg), var(--pg-headbg2));
    border-right: 1px solid var(--pg-grid-line-day);
    border-bottom: 1px solid var(--pg-grid-line);
    display: flex; align-items: center; gap: 6px; padding: 0 6px 0 0;
    overflow: hidden;
}
.pg-rowhead.pg-rowhead-menu { cursor: context-menu; }
.pg-rowhead .pg-ind { width: 6px; align-self: stretch; flex: 0 0 6px; background: #c9c9c9; }
.pg-rowhead .pg-rh-txt { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.pg-rowhead .pg-rh-title { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rowhead .pg-rh-sub { font-size: 10px; color: #6b7783; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Testata riga "ricca" (ver2), fedele a NoleggioRowHeaderCell.drawCell_Ver2 ---- */
.pg-rowhead.pg-rh2 {
    padding: 0;
    background: linear-gradient(180deg, #ffffff, #eef0ea);
    gap: 0;
}
.pg-rh2 .pg-ind {
    /* striscia colore-sede a sinistra, con "vetro" verticale */
    flex: 0 0 10px; width: 10px;
    border-radius: 8px 0 0 8px;
    background-image: linear-gradient(180deg, rgba(255,255,255,.85), transparent);
    background-blend-mode: screen;
}
.pg-rh2-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 2px 4px 2px 6px; gap: 2px; }
.pg-rh2-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pg-rh2-targa {
    flex: 0 0 auto;
    background: #dcdcd7; color: #000;
    font-weight: 700; font-size: 12px; letter-spacing: .5px;
    padding: 1px 6px; border-radius: 2px; border: 1px solid #b9b9b2;
    font-family: "Consolas", Tahoma, monospace;
}
.pg-rh2-desc { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2a2f35; }
.pg-rh2-icons { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; }
.pg-rh2-ico { width: 16px; height: 16px; object-fit: contain; display: block; }
.pg-rh2-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 10.5px; color: #5a6672; }
.pg-rh2-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rh2-km { font-weight: 600; color: #444; }
.pg-rh2-carb { color: #6b5300; }
.pg-rh2-gg { font-weight: 700; color: var(--color-text-inverse); background: #2e7d46; border-radius: 8px; padding: 0 5px; }
.pg-rh2-gg.pg-gg-over { background: #b22222; }
.pg-rh2-sede { margin-left: auto; font-style: italic; max-width: 40%; }
.pg-rh2-status { flex: 0 0 8px; width: 8px; align-self: stretch; background-image: linear-gradient(180deg, #fff, rgba(0,0,0,.15)); }
.pg-rh2-prev {
    position: absolute; right: 12px; bottom: 1px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,0,.5); border: 1px solid #fff;
    color: #6b5300; font-size: 13px; line-height: 18px; text-align: center;
}
/* Sticky come il .pg-rowhead base (la sticky fa anche da contenitore per il badge .pg-rh2-prev
   posizionato in assoluto): NON usare position:relative qui, annullerebbe lo sticky orizzontale. */
.pg-rowhead.pg-rh2 { position: sticky; left: 0; }

/* Traccia (contenitore dei blocchi). */
.pg-track {
    position: relative; height: var(--pg-row-h);
    margin-left: var(--pg-header-w);
    background-color: var(--pg-track);
    border-bottom: 1px solid var(--pg-grid-line);
    /* Linee-giorno sopra, bande weekend sotto. */
    background-image:
        repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--pg-day-w) - 1px), var(--pg-grid-line-day) calc(var(--pg-day-w) - 1px), var(--pg-grid-line-day) var(--pg-day-w)),
        var(--pg-weekend-bg, none);
}

/* Cella-ora evidenziata sotto il cursore (dietro ai blocchi). */
.pg-hovercell { position: absolute; top: 0; bottom: 0; pointer-events: none; background: rgba(74,90,107,.18); box-shadow: inset 0 0 0 1px rgba(74,90,107,.45); }
/* Tooltip data/ora della cella. */
.pg-celltip { position: fixed; z-index: 10001; pointer-events: none; background: #2a2f35; color: var(--color-text-inverse); font-size: 11px; padding: 3px 7px; border-radius: 4px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* Linea "ora attuale". */
.pg-nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pg-now); z-index: 6; pointer-events: none; }

/* ---- Blocco pianificazione ---- */
.pg-block {
    position: absolute; top: 3px; bottom: 3px;
    box-sizing: border-box;
    border: 1px solid #7d7d7d;
    border-radius: 8px;
    padding: 1px 6px 1px 12px;
    overflow: hidden;
    display: flex; align-items: center;
    font-size: 11px; color: #444;
    cursor: pointer;
    background: #cfd8e6;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
/* THEME_VER2: gradiente "vetro" verticale + angoli piu' morbidi. */
.pg-root.pg-theme2 .pg-block {
    background-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%, rgba(0,0,0,.08));
}
.pg-block:hover { filter: brightness(1.06); }
.pg-block.pg-dragging { opacity: .75; z-index: 5; cursor: grabbing; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
/* Riga target durante il drag&drop cross-row (cambio mezzo): overlay ben visibile sopra
   header/blocchi (z-index 8), pointer-events:none per non disturbare elementFromPoint. */
.pg-row.pg-row-drop::after {
    content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
    outline: 2px dashed #2f6fe0; outline-offset: -2px;
    background: rgba(47,111,224,.16);
}
.pg-block.pg-clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.pg-block.pg-clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }
.pg-block .pg-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Striscia di stato (sinistra). */
.pg-block .pg-status { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 6px; border-radius: 3px; }
/* Pallino societa'. */
.pg-block .pg-company { position: absolute; left: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
/* Icona baloon / origine web (alto a destra). */
.pg-block .pg-icon { position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; opacity: .8; }
/* Badge dati chiusura (lucchetto). */
.pg-block .pg-lock { position: absolute; left: 3px; bottom: 1px; width: 16px; height: 16px; }
/* Marcatori sede. */
.pg-block .pg-sede { position: absolute; width: 0; height: 0; }
.pg-block .pg-sede-out { left: 3px; top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #ffa500; }
.pg-block .pg-sede-in  { left: 3px; top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #9370db; }
.pg-block .pg-sede-cons { left: 2px; bottom: 3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #4169e1; }

.pg-block.pg-current { outline: 2px solid rgba(226,80,75,.5); outline-offset: -2px; }

/* ---- Tooltip ---- */
.pg-tooltip {
    position: fixed; z-index: 9999; max-width: 320px;
    background: #333a42; color: var(--color-text-inverse); border-radius: 4px;
    padding: 6px 8px; font-size: 11px; line-height: 1.35;
    box-shadow: 0 4px 12px rgba(0,0,0,.3); pointer-events: none;
    white-space: pre-line;
}
.pg-tooltip .pg-tt-head { font-weight: 600; margin-bottom: 2px; }

/* ---- Selezione a range (fase interattiva) ---- */
.pg-track .pg-sel { position: absolute; top: 0; bottom: 0; background: rgba(74,90,107,.22); border: 1px dashed #4a5a6b; pointer-events: none; z-index: 3; }

/* ---- Menu contestuale ---- */
.pg-ctx {
    position: fixed; z-index: 10000; min-width: 200px;
    background: #fff; border: 1px solid #b8c0cb; border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden;
    font-size: 12px; color: #2a2f35;
}
.pg-ctx-head { padding: 6px 10px; background: #4a5a6b; color: var(--color-text-inverse); font-weight: 600; font-size: 11px; white-space: nowrap; }
.pg-ctx-item { padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.pg-ctx-item:hover { background: #eef1f5; }
.pg-ctx-item.pg-dis { color: #a0a8b0; cursor: default; }
.pg-ctx-item.pg-dis:hover { background: transparent; }
.pg-ctx-item.pg-ctx-parent { display: flex; justify-content: space-between; gap: 12px; }
.pg-ctx-sub { z-index: 10001; }
.pg-ctx-sep { height: 1px; background: #e2e6ec; margin: 3px 0; }

:root[data-theme="dark"] .pg-ctx, .simply-theme-dark .pg-ctx { background: #262c33; color: #d7dde5; border-color: #3a4048; }
:root[data-theme="dark"] .pg-ctx-item:hover, .simply-theme-dark .pg-ctx-item:hover { background: #313842; }
:root[data-theme="dark"] .pg-ctx-sep, .simply-theme-dark .pg-ctx-sep { background: #3a4048; }

/* ---- Toolbar: dropdown "Prenotazioni" ---- */
.pg-toolbar .pg-dd { position: relative; display: inline-block; }
.pg-toolbar .pg-dd-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 40;
    min-width: 180px; margin-top: 3px;
    background: #fff; color: #2a2f35; border: 1px solid #b8c0cb; border-radius: 5px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden;
}
.pg-toolbar .pg-dd.pg-open .pg-dd-menu { display: block; }
.pg-dd-item { padding: 7px 12px; cursor: pointer; white-space: nowrap; font-size: 12px; }
.pg-dd-item:hover { background: #eef1f5; }
.pg-dd-item.pg-dd-on { font-weight: 600; background: #eef4ff; }

/* Dropdown sedi con icone (gruppo/sede) */
.pg-sede-btn { display: inline-flex; align-items: center; gap: 5px; }
.pg-dd-caret { font-size: 10px; opacity: .8; }
.pg-toolbar .pg-sede-menu { max-height: 60vh; overflow: auto; min-width: 220px; }
.pg-sede-ico { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; display: block; }
.pg-sede-ico-empty { background: transparent; }
.pg-sede-item { display: flex; align-items: center; gap: 7px; }
.pg-sede-sub { padding-left: 22px; }
.pg-sede-group {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px 3px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: #6a7480; background: #f2f4f7; border-top: 1px solid #e2e6ea;
}
:root[data-theme="dark"] .pg-sede-group, .simply-theme-dark .pg-sede-group { color: #98a2ad; background: #2b323a; border-color: #3a4048; }

/* ---- Drawer laterale scadenze / prenotazioni non pianificate ---- */
.pg-drawer {
    position: absolute; right: 0; bottom: 0; width: 340px; max-width: 80%;
    z-index: 30; display: flex; flex-direction: column;
    background: #f7f9fc; border-left: 1px solid var(--pg-border);
    box-shadow: -6px 0 18px rgba(0,0,0,.15);
}
.pg-drawer-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px; background: linear-gradient(180deg, #4a5a6b, #3a4756); color: var(--color-text-inverse);
}
.pg-drawer-title { font-weight: 600; font-size: 12px; }
.pg-drawer-close {
    border: none; background: transparent; color: var(--color-text-inverse); font-size: 18px; line-height: 1;
    cursor: pointer; padding: 0 4px;
}
.pg-drawer-close:hover { color: #ffd; }
.pg-drawer-filters {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px 12px;
    padding: 7px 10px; background: #eef1f4; border-bottom: 1px solid #d4d9df;
}
.pg-drawer-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #33383f; cursor: pointer; }
.pg-drawer-chk input { margin: 0; cursor: pointer; }
.pg-drawer-body { flex: 1 1 auto; overflow: auto; padding: 8px; }
.pg-drawer-empty { color: #7a828c; font-size: 12px; padding: 10px 4px; text-align: center; }

.pg-scad {
    background: #fff; border: 1px solid #dfe4ea; border-left: 4px solid #9fb0c4;
    border-radius: 4px; padding: 6px 8px; margin-bottom: 6px;
}
.pg-scad-link { cursor: pointer; }
.pg-scad-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pg-scad-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pg-scad-tipo { font-weight: 600; font-size: 12px; color: #33373c; }
.pg-scad-data { font-size: 11px; color: #6b7681; white-space: nowrap; }
.pg-scad-stato {
    display: inline-block; margin: 3px 0; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; color: #33373c;
}
.pg-scad-desc { font-size: 11px; color: #55606c; margin-top: 2px; line-height: 1.35; }

:root[data-theme="dark"] .pg-drawer, .simply-theme-dark .pg-drawer { background: #20262c; }
:root[data-theme="dark"] .pg-scad, .simply-theme-dark .pg-scad { background: #262c33; border-color: #3a4048; color: #d7dde5; }
:root[data-theme="dark"] .pg-scad-tipo, .simply-theme-dark .pg-scad-tipo { color: #e4e9ef; }
:root[data-theme="dark"] .pg-scad-desc, .simply-theme-dark .pg-scad-desc { color: #aab2bd; }
:root[data-theme="dark"] .pg-toolbar .pg-dd-menu, .simply-theme-dark .pg-toolbar .pg-dd-menu { background: #262c33; color: #d7dde5; border-color: #3a4048; }
:root[data-theme="dark"] .pg-dd-item:hover, .simply-theme-dark .pg-dd-item:hover { background: #313842; }

/* ---- Dialog form: messaggio d'errore nel .dlg-content (chrome e layout li fa il
   dialog di sistema showJquiConfirm; qui resta solo lo stile del fallback errore) ---- */
.pg-formdlg-err { padding: 16px; font-size: 13px; color: #b00020; }

/* ---- Banner messaggi di pagina ---- */
.pg-page-banner {
    margin: 6px 8px; padding: 6px 10px;
    background: #fff4d6; border: 1px solid #e6c34a; border-radius: 4px;
    color: #6b5300; font-size: 12px;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] .pg-root,
.simply-theme-dark .pg-root {
    --pg-border: #3a4048;
    --pg-grid-line: #3a424c;
    --pg-grid-line-day: #55606c;
    --pg-headbg: #2b3138;
    --pg-headbg2: #242a30;
    --pg-work: #2f3841;
    --pg-track: #262c33;
    --pg-track-alt: #2b3138;
    --pg-weekend-sat: rgba(150,170,200,.06);
    --pg-weekend-sun: rgba(150,170,200,.14);
    color: #d7dde5;
    background: #1e2329;
}