/*
 * Burger menu mobile per il backend gestionale.
 * Sotto i 1025px (dove la sidebar fissa desktop non si applica) il menu di navigazione
 * diventa un drawer a scomparsa che entra da sinistra, scrollabile, con backdrop.
 * Le categorie con sottomenu si aprono a fisarmonica (tap-to-expand) - vedi eplan-menu.js.
 *
 * Caricato dopo styles_backend.css (InitPlugin) cosi' da sovrascrivere le regole compilate
 * del vecchio menu mobile (barra orizzontale con tendine in hover, senza scroll).
 */

/* =========================================================================
 * Layout backend (header, sidebar, fullscreen toggle, logo)
 * Override della palette compilata di styles_backend.css con i colori brand
 * eplan (#008c77 sostituisce il blue-grey #697b91 e l'accent yellow #dedc06).
 * ========================================================================= */
body.fullscreen { padding: 2px; margin: 0; box-sizing: border-box; }
body.fullscreen .page-header { display: none !important; }
body.fullscreen .page-content { padding-top: 0 !important; }
body.fullscreen .col-sx.menu { display: none !important; }
body.fullscreen .content { margin-left: 0 !important; }

#fullscreenToggle {
    position: fixed;
    top: 6px;
    right: 6px;
    z-index: 1100;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(0, 140, 119, 0.3);
    background: #fff;
    color: #008c77;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
#fullscreenToggle:hover { background: #e8f5f1; color: #007362; border-color: #008c77; }

/* Menu sx - palette eplan */
.col-sx.menu { background-color: #3a464e !important; }
#gestMenuSx .moogrid-header-name { color: #fff !important; }
#gestMenuSx .menuEl.sel,
#gestMenuSx .menuEl.sel:before { color: #fff !important; }

/* Hover dei menuEl: applico a tutti i breakpoint */
.menu .menuEl {
    transition: background-color .15s ease, opacity .15s ease, color .15s ease !important;
}
.menu .menuEl:hover,
.menu .menuDiv:hover > .menuEl {
    opacity: 1 !important;
    background-color: transparent !important;
    color: #ebf200 !important;
}

/* Hover dei sotto-elementi (menuSub) sul bg bianco del menuCnt */
#gestMenuSx .menuSub a {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color .15s ease, padding-left .15s ease;
}
#gestMenuSx .menuSub a:hover {
    /*background-color: #e8f5f1;*/
    color: #ebf200 !important;
    padding-left: 14px;
}
#gestMenuSx .menuSub.sel a {
    background-color: rgba(235, 242, 0, 0.12);
}
/*#gestMenuSx .menuSub.sel a:hover {*/
/*    background-color: #e8f5f1;*/
/*}*/

@media only screen and (min-width: 64.0625em) {
    #gestMenuSx .sel .menuEl { border-left-color: #fff !important; }
    #gestMenuSx .open .menuEl {
        /*background-color: #fff !important;*/
        /*color: #007362 !important;*/
        /*border-color: rgba(0, 140, 119, 0.3) !important;*/
        border-width: 0px 0px 0px 5px;
        border-color: #fff;
    }
    .menuCnt { border-left-color: #ebf200 !important; }
}
@media screen and (max-width: 64em) {
    .menu .menuDiv:hover .menuCnt { background-color: #2e383f !important; }
}

/* Header: accento verde sulla riga inferiore */
.page-header { border-bottom: 2px solid #3a464e !important; }

/* Box utente in header: passa dal vecchio giallo-verde #dedc06 al brand */
.page-header .box_utente { background-color: #3a464e !important; color: #fff !important; }
.page-header .box_utente a,
.page-header .box_utente .permessi-utente,
.page-header .box_utente #linkEsci { color: #fff !important; }

.page-header .box_utente .nome-utente {
    color: #ebf200;
}

.page-header .box_utente .utente_img,
.page-header .box_utente #benvenuto { max-width: none !important; }

/* Logo testuale stile eplanweb (sostituisce il vecchio .logo-azienda con background image) */
.eplan-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 90px;
    padding: 0 25px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ebf200;
    text-decoration: none;
    line-height: 1;
}
.eplan-logo span { color: #3a464e; }
.eplan-logo .eplan-pittogramma {
    height: 48px;
    width: auto;
    display: block;
}

.eplan-burger { display: none; }
.eplan-menu-backdrop { display: none; }

@media (max-width: 64em) {
    /* --- Pulsante burger (creato via JS, fisso in alto a sinistra) --- */
    .eplan-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 6px;
        left: 6px;
        z-index: 1300;
        width: 38px;
        height: 38px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        background: #3a464e;
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .eplan-burger:hover { background: #2e383f; }

    /* Icona burger disegnata in CSS (tre barre): nessuna dipendenza dal charset di file/pagina,
       quindi rende uguale su Safari iOS e Chrome desktop. */
    .eplan-burger-bars,
    .eplan-burger-bars::before,
    .eplan-burger-bars::after {
        display: block;
        width: 20px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    }
    .eplan-burger-bars {
        position: relative;
    }
    .eplan-burger-bars::before,
    .eplan-burger-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .eplan-burger-bars::before { top: -6px; }
    .eplan-burger-bars::after  { top: 6px; }

    /* Morph in "X" col drawer aperto */
    body.menu-open .eplan-burger-bars { background: transparent; }
    body.menu-open .eplan-burger-bars::before { top: 0; transform: rotate(45deg); }
    body.menu-open .eplan-burger-bars::after  { top: 0; transform: rotate(-45deg); }

    /* Lascio spazio al burger nell'angolo dell'header */
    .page-header .box_utente {
        padding-left: 46px;
        box-sizing: border-box;
    }

    /* --- Backdrop --- */
    .eplan-menu-backdrop {
        display: block;
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1150;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    body.menu-open .eplan-menu-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* --- Il menu diventa un drawer fisso a sinistra, scrollabile --- */
    .page-content .menu.col-sx {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: 100%;
        margin: 0;
        padding: 52px 0 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
    }
    body.menu-open .page-content .menu.col-sx {
        transform: translateX(0);
    }
    /* blocco lo scroll della pagina mentre il drawer e' aperto */
    body.menu-open { overflow: hidden; }

    /* --- Lista verticale --- */
    #gestMenuSx.menu-container {
        flex-direction: column;
        width: 100%;
        overflow: visible;
    }
    #gestMenuSx .menuDiv {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* --- Accordion: il sottomenu compare solo con .open; disattivo l'hover --- */
    #gestMenuSx .menuDiv .menuCnt {
        position: static !important;
        display: none;
        padding: 4px 0 8px;
        background-color: rgba(0, 0, 0, 0.15);
    }
    #gestMenuSx .menuDiv:hover .menuCnt { display: none; }
    #gestMenuSx .menuDiv.open .menuCnt { display: block; }

    #gestMenuSx .menuEl {
        padding: 14px 16px 14px 44px;
        opacity: 1;
        font-size: 14px;
    }
    /* indicatore espandi/comprimi per le categorie con sottomenu */
    #gestMenuSx .menuDiv.haveSub > .menuEl::after {
        content: "\25B8";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.15s ease;
        font-size: 12px;
    }
    #gestMenuSx .menuDiv.haveSub.open > .menuEl::after {
        transform: translateY(-50%) rotate(90deg);
    }

    #gestMenuSx .menuSub {
        margin: 0;
    }
    #gestMenuSx .menuSub a {
        display: block;
        padding: 10px 16px 10px 44px;
        font-size: 14px;
    }

    /* in fullscreen il drawer non serve */
    body.fullscreen .eplan-burger,
    body.fullscreen .eplan-menu-backdrop { display: none; }
}

/* =========================================================================
 * Stili condivisi estratti dai blocchi <style> inline delle .phtml.
 * Caricato globalmente nel backend (dopo styles_backend.css).
 * Selettori troppo generici sono confinati con wrapper di pagina
 * (.view-*, #statsContainer, #outputContainer, #ganttContainer)
 * per evitare regressioni su altre viste.
 * ========================================================================= */

/* --- Gestione: input testuali nella griglia delle righe ----------------- */
.gridContainer .moogrid-row-tr-odd input[type=text] {
    min-width: 120px;
}

/* --- Operatori griglia Team (Utenti_Team::getOperators): icone differenziate
       con FontAwesome. Override del font-family 'cosmo' di base solo per questi id. */
.gridOperators span.openPianificazione:before,
.gridOperators span.openCommesse:before,
.gridOperators span.openAssistenze:before {
    font-family: 'FontAwesome';
}
.gridOperators span.openPianificazione:before { content: '\f073'; } /* fa-calendar */
.gridOperators span.openCommesse:before       { content: '\f0b1'; } /* fa-briefcase */
.gridOperators span.openAssistenze:before      { content: '\f1cd'; } /* fa-life-ring */

/* --- Box "stats-ore" (foglio ore calendario + tabella mensile) ----------- */
.stats-ore {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.1);
}

/* --- Changelog (admin/changelog) ---------------------------------------- */
.changelog-accordion {
    max-width: 820px;
    margin: 0 auto;
}
.changelog-entry {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 6px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    overflow: hidden;
}
.changelog-summary {
    cursor: pointer;
    padding: 14px 18px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2c3e50;
    list-style: none;
    position: relative;
    user-select: none;
    transition: background .15s;
}
.changelog-summary::-webkit-details-marker {
    display: none;
}
.changelog-summary::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 10px;
    font-size: .7em;
    color: #8a96a3;
    transition: transform .2s;
}
.changelog-entry[open] > .changelog-summary::before {
    transform: rotate(90deg);
}
.changelog-summary:hover {
    background: #f7f9fb;
}
.changelog-entry[open] > .changelog-summary {
    border-bottom: 1px solid #eef0f3;
    background: #fafbfc;
}
.changelog-content {
    padding: 6px 26px 22px;
    line-height: 1.55;
    color: #34404b;
}
.changelog-content h1 {
    font-size: 1.4rem;
    margin: 18px 0 6px;
    color: #2c3e50;
}
.changelog-content h2 {
    font-size: 1.15rem;
    margin: 22px 0 8px;
    color: #2c3e50;
    border-bottom: 1px solid #eef0f3;
    padding-bottom: 4px;
}
.changelog-content h3 {
    font-size: 1rem;
    margin: 16px 0 4px;
    color: #3b4a59;
}
.changelog-content p {
    margin: 6px 0 10px;
}
.changelog-content ul {
    margin: 6px 0 12px 20px;
}
.changelog-content li {
    margin: 3px 0;
}
.changelog-content blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid #b0bec5;
    background: #f5f7f9;
    color: #555;
    font-style: italic;
}
.changelog-content hr {
    border: 0;
    border-top: 1px solid #eef0f3;
    margin: 18px 0;
}
.changelog-content code {
    background: #f1f3f5;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .9em;
}
.changelog-empty {
    text-align: center;
    color: #8a96a3;
    padding: 40px 0;
}

/* --- Dashboard "Timeline" (Gantt DHTMLX, partial timeline.phtml) -------- */
.gantt_row.odd,
.gantt_task_row.odd {
    background-color: #f5f5f5;
}
#ganttContainer .weekend {
    background-color: #ffdddd !important;
}
#ganttContainer .today {
    background-color: #ddffaa !important;
}

/* --- Dashboard "Occupazione" -------------------------------------------- */
#outputContainer form[name=form-filter] dl {
    float: left;
    width: 20%;
    margin-right: 3%;
}
#outputContainer form[name=form-filter] dd {
    margin-left: 0;
}
#outputContainer form[name=form-filter] button {
    width: 7%;
    margin-bottom: 5px;
    padding: 3px;
}
#outputContainer > div {
    border-bottom: 1px solid #ddd;
}
#outputContainer > div > p {
    margin: 0;
    position: absolute;
    top: 15px;
    z-index: 1;
    font-weight: bold;
}

/* --- Dashboard "Avanzamento" -------------------------------------------- */
.view-avanzamento .filter-box {
    margin: 20px 0;
}
.view-avanzamento .filter-box label {
    float: left;
    width: 30%;
    line-height: 34px;
}
.view-avanzamento .filter-box select {
    width: 70%;
}
.view-avanzamento th {
    text-align: left;
}
.view-avanzamento td .resp {
    font-style: italic;
}
.view-avanzamento .indicatore-avanzamento {
    height: 20px;
    background: #5dc2f1;
    text-align: center;
    font-weight: bold;
}
.view-avanzamento .edit-commessa,
.view-avanzamento .edit-attivita {
    cursor: pointer;
}
.view-avanzamento .day-late {
    color: red;
}
.view-avanzamento .day-warning {
    color: orange;
}
.view-avanzamento .totali {
    padding: 10px;
    margin: 10px 0 30px;
    border: 1px solid #5dc2f1;
    border-radius: 4px;
    overflow: hidden;
}

/* --- Dashboard "Ore lavorate" (tabella mensile) ------------------------- */
.view-orelavorate td.day {
    background: rgba(0, 255, 0, 0.3);
    font-weight: bold;
}
.view-orelavorate td.day.future {
    background: rgba(255, 255, 255, 1);
}
.view-orelavorate td.day.warning {
    background: rgba(255, 0, 0, 0.3);
}
.view-orelavorate td.day.weekend {
    background: rgba(255, 255, 0, 0.3);
}
.view-orelavorate .ferie {
    color: red;
}
.view-orelavorate .malattia {
    color: orange;
}
.view-orelavorate .aspettativa {
    color: rosybrown;
}
.view-orelavorate .extra {
    color: #2b81af;
}
.view-orelavorate .ore-title {
    text-align: center;
}
.view-orelavorate .exportCsv {
    float: right;
}

/* --- Dashboard "Ore" (foglio ore selezione utente) ---------------------- */
.view-foglioore .utente {
    padding: 20px 0;
}

/* =========================================================================
 * Statistiche (stats/*) - tutte le viste usano #statsContainer come wrapper.
 * Grid layout responsivo: le colonne delle .wrapper sono definite inline
 * nelle singole pagine (grid-template-columns variabile per vista).
 * ========================================================================= */
#statsContainer .grid-container {
    display: grid;
    width: 100%;
}
/* Ogni riga della griglia e' a sua volta una grid; le colonne
 * (grid-template-columns) sono definite inline per pagina perche' variabili. */
#statsContainer .wrapper {
    display: grid;
}
#statsContainer .grid-container > .wrapper:first-child {
    background-color: #5f7285;
    color: white;
    font-weight: bold;
}
/* anno.phtml ha anche una riga totali in coda */
#statsContainer.statsContainer-with-totali .grid-container > .wrapper:last-child {
    background-color: #5f7285;
    color: white;
    font-weight: bold;
}
#statsContainer .comm {
    background-color: #cccccc;
    cursor: pointer;
}
/* assistenze/nuovi/anno/clienti: .comm e' grigia chiara, override */
#statsContainer.statsContainer-flat .comm {
    background-color: #f0f0f0;
}
#statsContainer .elem {
    background-color: #f0f0f0;
    cursor: pointer;
}
#statsContainer [id^=elem],
#statsContainer [id^=dett] {
    display: none;
}
#statsContainer .grid-item {
    border: 1px solid rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 10px 5px;
}
/* sotto-righe header (.tit) e varianti "flat" usano padding ridotto */
#statsContainer .tit .grid-item,
#statsContainer.statsContainer-flat .grid-item {
    padding: 5px 5px;
}
#statsContainer .tit {
    font-style: oblique;
    font-weight: bold;
    font-size: smaller;
}
/* Colori di status delle commesse (assistenze/nuovi/anno/clienti) */
#statsContainer .comm.low {
    background-color: #ffffcc;
}
#statsContainer .comm.high {
    background-color: #ffdddd;
}
#statsContainer .comm.tragic {
    background-color: #ffaaaa;
}
#statsContainer .comm.great {
    background-color: #ccffcc;
}
/* Varianti piu' sature per anno.phtml */
#statsContainer.statsContainer-anno .comm.high {
    background-color: #ffcccc;
}
#statsContainer.statsContainer-anno .comm.tragic {
    background-color: #ff8888;
}
#statsContainer .comm.st-chiuso {
    font-style: italic;
}
#statsContainer .compareValues {
    font-style: italic;
}
/* Dialog Highcharts per drill-down assistenze */
#statsContainer .assist-chart-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#statsContainer .assist-chart-dialog {
    background: #fff;
    width: 90%;
    max-width: 900px;
    padding: 20px 25px 25px;
    border-radius: 4px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
    position: relative;
}
#statsContainer .assist-chart-dialog h3.assist-chart-title {
    margin: 0 30px 15px 0;
    font-size: 18px;
}
#statsContainer .assist-chart-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}
#statsContainer .chart-assistenza,
#statsContainer .chart-assistenza:hover {
    text-decoration: none;
}

/* =========================================================================
 * Home Gestione (index/gestione.phtml) - dashboard con planning + todo.
 * ========================================================================= */
.sezione .titolo {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #333;
}
.impegni-wrapper {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 2rem;
}
.impegni-left {
    flex: 2;
    min-width: 0;
}
.impegni-right {
    flex: 1;
    min-width: 0;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 1rem;
}
.planning-container {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.planning-section {
    flex: 1;
    min-width: 0;
}
.planning-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 0.5rem;
}
.planning-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.planning-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: box-shadow 0.15s ease;
}
.planning-card.clickable {
    cursor: pointer;
}
.planning-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.planning-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
    line-height: 1.3;
    min-width: 0;
}
.planning-card-subtitle {
    font-size: 0.8rem;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Todo system della home gestione */
.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.todo-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.todo-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3498db;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.todo-add-btn:hover {
    background: #2980b9;
}
.todo-vedi-tutti {
    font-size: 0.75rem;
    color: #3498db;
    text-decoration: none;
}
.todo-vedi-tutti:hover {
    text-decoration: underline;
}
.todo-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    transition: box-shadow 0.15s ease;
}
.todo-card.clickable {
    cursor: pointer;
}
.todo-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
.todo-card-content {
    min-width: 0;
    flex: 1;
}
.todo-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #888;
}
.todo-meta-commessa:before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3498db;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.todo-meta-referente:before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #888;
    margin-right: 0.3rem;
    vertical-align: middle;
}
.todo-meta-deadline {
    margin-left: auto;
    font-size: 0.75rem;
    color: #666;
    position: relative;
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
}
.todo-meta-deadline:hover {
    background: rgba(0, 0, 0, 0.06);
}
.todo-meta-deadline i {
    margin-right: 0.15rem;
}
.todo-meta-deadline.scaduto {
    color: #c0392b;
    font-weight: 600;
}
.todo-meta-deadline.vuota {
    color: #999;
    font-style: italic;
}
/* Input nascosto ma focusabile per supportare showPicker() / click di fallback */
.todo-meta-deadline .todo-deadline-input {
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    padding: 0;
    border: none;
    background: transparent;
}
.todo-card-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.todo-card-top .planning-card-title {
    flex: 1;
    min-width: 0;
}
.todo-link-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #3498db;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}
.todo-link-btn:hover {
    color: #2071a7;
}
.todo-edit-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: #aaa;
    cursor: pointer;
    transition: color 0.15s;
}
.todo-edit-btn:hover {
    color: #3498db;
}
.todo-stato-select {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f8f8f8;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    width: auto;
    height: auto;
    margin: 0;
}
.todo-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-top: 0.3rem;
}
.todo-card.stato-1 { border-right: 4px solid #95a5a6; }
.todo-card.stato-4 { border-right: 4px solid #3498db; }
.todo-pallino-iniziato {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.todo-icon.priorita-1 { color: #aaa; }
.todo-icon.priorita-2 { color: #3498db; }
.todo-icon.priorita-3 { color: #e67e22; }
.todo-icon.priorita-4 { color: #e74c3c; }
.todo-icon.priorita-5 { color: #fff; }
.todo-card.priorita-4 {
    border-left: 3px solid #e74c3c;
}
.todo-card.priorita-5 {
    border-left: 3px solid #8e0000;
    background: #fdeded;
}
.todo-card.priorita-5 .todo-icon {
    background: #8e0000;
    border-radius: 50%;
    padding: 0.15rem;
}
.todo-card.priorita-3 {
    border-left: 3px solid #e67e22;
}
.todo-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.todo-modal {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.todo-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.todo-modal-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #222;
}
.todo-modal-close {
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
}
.todo-modal-close:hover { color: #333; }
#todoModalBody {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444;
}

@media (max-width: 640px) {
    .impegni-wrapper {
        flex-direction: column;
    }
    .planning-container {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Home Gestione: card moderne per il menu (override degli stili "pill" datati) */
#gestioneHome .sezione {
    border-bottom: 1px solid rgba(0, 140, 119, 0.12);
    padding: 18px 0 14px;
}
#gestioneHome .titolo {
    color: #3a464e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
#gestioneHome .elemento {
    display: inline-flex;
    align-items: center;
    margin: 0 15px 15px 0;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid rgba(235, 242, 0, 0.5);
    border-left: 3px solid rgba(235, 242, 0, 0.7);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 32, 29, 0.04);
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
#gestioneHome .elemento:hover {
    background: #fdfdea;
    border-color: rgba(235, 242, 0, 0.85);
    border-left-color: #ebf200;
    box-shadow: 0 4px 14px rgba(235, 242, 0, 0.3);
    transform: translateY(-1px);
}
#gestioneHome .elemento-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#gestioneHome .elemento-inner > span {
    vertical-align: middle;
}
#gestioneHome .immagine {
    margin: 0;
    font-size: 18px;
    color: #008c77;
    line-height: 1;
}
#gestioneHome .nome {
    margin: 0;
    color: #0b201d;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
}
#gestioneHome .icon-chevron-small-right {
    background: transparent;
    color: #008c77;
    font-size: 14px;
    border-radius: 0;
    margin-left: 2px;
    opacity: 0.55;
    transition: opacity .15s ease, transform .15s ease;
}
#gestioneHome .elemento:hover .icon-chevron-small-right {
    opacity: 1;
    transform: translateX(2px);
}