/* =========================================================================
   Compatt Planner — Main stylesheet
   Stile: contenuti chiari e luminosi + navigazione scura, accento ROSSO
   Compatt (meeting 3: "i colori di Compatt sono rossi").
   Sovrascrive Bootstrap 5.3 per un look "admin moderno".
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Superfici (chiare) */
    --color-bg:            #F6F7FB;   /* off-white con tinta fredda */
    --color-bg-subtle:     #EFF1F6;
    --color-surface:       #FFFFFF;
    --color-surface-2:     #FAFBFF;
    --color-border:        #EAEBF1;
    --color-border-strong: #D8DAE5;

    /* Testo */
    --color-text:          #161929;
    --color-muted:         #6B7280;

    /* Accento rosso Compatt */
    --color-primary:       #C8102E;
    --color-primary-hover: #A50D26;
    --color-primary-soft:  #FCEDEF;
    --violet:              #E11D48;   /* accento secondario (nome storico) */
    --grad-brand:          linear-gradient(135deg, #E0263B 0%, #A50D26 100%);
    --grad-brand-hover:    linear-gradient(135deg, #C8102E 0%, #8C0B20 100%);

    /* Navigazione scura */
    --nav-bg:        #171214;
    --nav-bg-grad:   linear-gradient(180deg, #221A1C 0%, #171214 100%);
    --nav-text:      #D2C8CB;
    --nav-text-hi:   #FFFFFF;
    --nav-hover:     rgba(255,255,255,.08);
    --nav-active:    linear-gradient(135deg, rgba(200,16,46,.45), rgba(225,29,72,.35));

    /* Stati */
    --color-success:#16A34A; --color-success-soft:#DCFCE7;
    --color-warning:#F59E0B; --color-warning-soft:#FEF3C7;
    --color-danger: #DC2626; --color-danger-soft:#FEE2E2;
    --color-info:   #2563EB; --color-info-soft:#DBEAFE;

    /* Tinte soft (chip-icona KPI) */
    --t-indigo:#EEF0FE; --t-violet:#F3F0FE; --t-blue:#DBEAFE;
    --t-green:#DCFCE7; --t-amber:#FEF3C7; --t-rose:#FFE4EC; --t-slate:#EEF1F6;

    /* Camion (spedizione) */
    --truck-previsto:#1A1A1A; --truck-prenotato:#F59E0B; --truck-spedito:#16A34A;

    /* Colori per fase */
    --phase-sopralluogo:#8B8275; --phase-tracciatura:#6366F1; --phase-scavo:#92400E;
    --phase-binari:#92682E; --phase-maturazione:#94A3B8; --phase-meccanica:#16A34A;
    --phase-scaffalatura:#DC2626; --phase-elettrica:#2563EB; --phase-startup:#7C3AED;

    /* Forma e profondita' */
    --radius:14px; --radius-sm:10px; --radius-pill:999px;
    --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px -2px rgba(16,24,40,.08);
    --shadow-md: 0 8px 20px -6px rgba(16,24,40,.12), 0 3px 8px -3px rgba(16,24,40,.08);
    --shadow-lg: 0 24px 48px -16px rgba(49,46,129,.22), 0 8px 18px -10px rgba(16,24,40,.12);
    --transition: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Mappatura Bootstrap */
    --bs-primary: var(--color-primary);
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    /* Bootstrap 5.3 calcola i link da *-rgb: senza questi resterebbe il blu di default */
    --bs-link-color-rgb: 200, 16, 46;
    --bs-link-hover-color-rgb: 165, 13, 38;
}

/* === Base === */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--color-bg);
    background-image:
        radial-gradient(900px 380px at 100% -5%, rgba(200,16,46,.05), transparent 60%),
        radial-gradient(800px 360px at -5% 0%, rgba(23,18,20,.05), transparent 55%);
    background-attachment: fixed;
    color: var(--color-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--color-text); letter-spacing: -0.022em; }
.text-muted, .muted { color: var(--color-muted) !important; }
a { text-decoration: none; }

/* === Top navigation (scura) === */
.app-navbar {
    background: var(--nav-bg);
    background-image: var(--nav-bg-grad);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 18px -8px rgba(15,23,42,.55);
    padding: 0 1.25rem;
    min-height: 62px;
    position: sticky; top: 0; z-index: 1030;
}
.app-navbar .navbar-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-weight: 800; font-size: 1.08rem; color: var(--nav-text-hi); letter-spacing: -0.02em;
}
/* Logo ufficiale Compatt (rosso su trasparente): NESSUN riquadro bianco
   attorno — il rosso si stacca bene sia sul chrome scuro sia sulle card chiare. */
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
}
.brand-mark .brand-logo { display: block; width: auto; height: 100%; }

.app-navbar .brand-mark { height: 22px; }
.app-navbar .nav-link {
    color: var(--nav-text); font-weight: 500; font-size: .925rem;
    padding: .5rem .85rem; border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
    display: inline-flex; align-items: center; gap: .45rem;
}
.app-navbar .nav-link:hover { color: var(--nav-text-hi); background: var(--nav-hover); }
.app-navbar .nav-link.active {
    color: var(--nav-text-hi); background: var(--nav-active);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
/* Dropdown aperto: Bootstrap applica .show con un colore quasi-nero
   (--bs-navbar-active-color della navbar chiara) che rende invisibile il
   testo sulla barra scura. Manteniamo il testo chiaro come nell'hover. */
.app-navbar .nav-link.show,
.app-navbar .nav-link:focus { color: var(--nav-text-hi); background: var(--nav-hover); }
.app-navbar .nav-link.active.show { background: var(--nav-active); }
.app-navbar .nav-link.disabled { color: rgba(194,200,214,.45); }
.app-navbar .navbar-toggler { border-color: rgba(255,255,255,.2); }
.app-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Dropdown: pannelli chiari sopra la barra scura */
.app-navbar .dropdown-menu {
    border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .35rem; margin-top: .5rem;
}
.app-navbar .dropdown-item {
    border-radius: var(--radius-sm); font-size: .9rem; padding: .5rem .7rem;
    color: var(--color-text); display: flex; align-items: center; gap: .5rem;
}
.app-navbar .dropdown-item:hover { background: var(--color-bg-subtle); }
.app-navbar .dropdown-item.active { background: var(--color-primary-soft); color: var(--color-primary); }
.app-navbar .dropdown-item.disabled { color: var(--color-muted); }

/* === Layout === */
.app-main { padding: 1.9rem clamp(1rem, 4vw, 2.6rem); max-width: 1500px; margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.page-header h1 { font-size: 1.55rem; margin: 0; }
.page-header .subtitle { color: var(--color-muted); font-size: .925rem; margin-top: .2rem; }

/* === Cards === */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.card .card-header { background: transparent; border-bottom: 1px solid var(--color-border); font-weight: 600; padding: 1rem 1.25rem; }
.card .card-body { padding: 1.25rem; }

.stat-card { padding: 1.3rem; position: relative; overflow: hidden; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card .stat-label { color: var(--color-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-size: 2rem; font-weight: 800; letter-spacing: -0.035em; margin-top: .25rem; }
.stat-card .stat-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad-brand-soft, var(--t-indigo)); color: var(--color-primary); font-size: 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(79,70,229,.08);
}
/* Varianti tinta per i chip-icona KPI */
.stat-icon.i-indigo{background:var(--t-indigo);color:#4F46E5}
.stat-icon.i-violet{background:var(--t-violet);color:#7C3AED}
.stat-icon.i-blue{background:var(--t-blue);color:#2563EB}
.stat-icon.i-green{background:var(--t-green);color:#16A34A}
.stat-icon.i-amber{background:var(--t-amber);color:#B45309}
.stat-icon.i-rose{background:var(--t-rose);color:#E11D48}
/* Fila KPI della dashboard: tutte le card uguali.
   - min-width:0 -> senza, la card Trasporti (tre numeri affiancati) ha una
     larghezza minima maggiore e si prende piu' spazio delle altre;
   - height:100% (anche sul link che avvolge la card) -> stessa altezza anche se
     il contenuto e' su due livelli. */
.kpi-row > [class*="col-"] { min-width: 0; }
.kpi-row > [class*="col-"] > a { display: block; height: 100%; }
.kpi-row .stat-card { height: 100%; }
.stat-delta{ font-size:.8rem; font-weight:600; }
.stat-delta.up{color:var(--color-success)} .stat-delta.down{color:var(--color-danger)}

/* === Buttons === */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; padding: .55rem 1rem;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background-image: var(--grad-brand); background-color: var(--color-primary);
    border: none; color: #fff; box-shadow: 0 6px 16px -6px rgba(200,16,46,.55);
}
.btn-primary:hover, .btn-primary:focus { background-image: var(--grad-brand-hover); color: #fff; box-shadow: 0 8px 20px -6px rgba(200,16,46,.65); }
.btn-outline-secondary { color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn-outline-secondary:hover { background: var(--color-bg-subtle); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-sm { padding: .35rem .6rem; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200,16,46,.3); }

/* === Forms === */
.form-control, .form-select {
    border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
    padding: .55rem .8rem; font-size: .925rem; background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(200,16,46,.16); }
.form-label { font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.input-group-text { background: var(--color-bg-subtle); border-color: var(--color-border-strong); color: var(--color-muted); border-radius: var(--radius-sm); }

/* === Tables === */
.table { --bs-table-bg: transparent; color: var(--color-text); margin: 0; }
.table thead th {
    text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: #5b6172;
    font-weight: 700; border-bottom: 1px solid var(--color-border); padding: .8rem 1rem;
    background: linear-gradient(180deg, #F7F5F6, #EFF1F6);
}
.table tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--transition); }
.table-hover tbody tr:hover { background: #F7F8FE; }
/* Link dentro le tabelle: testo normale (niente blu/rosso a pioggia), l'accento
   compare solo al passaggio del mouse. */
.table a { color: var(--color-text); }
.table a:hover { color: var(--color-primary); }
/* Riga bloccata (un altro utente la sta modificando): lucchetto a sinistra,
   riga attenuata con una banda ambra sul bordo sinistro. */
.table tbody tr.row-locked { background: #FFFCF5; box-shadow: inset 3px 0 0 var(--color-warning); }
.table tbody tr.row-locked td { opacity: .7; }
.row-lock { color: var(--color-warning); margin-right: .35rem; }

/* Legenda icone sopra la tabella: riga compatta, voci ben distanziate */
.table-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
    padding: .5rem .9rem; margin-bottom: .6rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.table-legend .lg-item { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }

/* === Badges === */
.badge { font-weight: 600; font-size: .72rem; padding: .4em .65em; border-radius: var(--radius-pill); letter-spacing: .01em; }
.badge-soft { display: inline-flex; align-items: center; gap: .35rem; }
.badge-role-admin     { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-role-operativo { background: var(--color-info-soft);    color: var(--color-info); }
.badge-role-tecnico   { background: var(--color-success-soft); color: var(--color-success); }
.badge-role-ufficio   { background: var(--color-bg-subtle);    color: var(--color-muted); }
.badge-state-success  { background: var(--color-success-soft); color: var(--color-success); }
.badge-state-warning  { background: var(--color-warning-soft); color: #B45309; }
.badge-state-danger   { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge-state-info     { background: var(--color-info-soft);    color: var(--color-info); }

/* === Login === */
.login-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background:
        radial-gradient(1100px 520px at 8% -10%, rgba(200,16,46,.22), transparent 55%),
        radial-gradient(1000px 520px at 100% 110%, rgba(225,29,72,.18), transparent 55%),
        linear-gradient(180deg, #171214 0%, #33141B 100%);
}
.login-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 18px; box-shadow: var(--shadow-lg); padding: 2.4rem; width: 100%; max-width: 420px;
}
.login-brand { display: inline-flex; align-items: center; gap: .6rem; justify-content: center; margin-bottom: .25rem; }
.login-brand .brand-mark { height: 46px; }
.login-card h4 { font-weight: 800; margin: .85rem 0 .15rem; }

/* === Pallino tecnico (neutro: solo iniziali, tooltip col nome) === */
.tech-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: #334155; color: #fff; font-size: .68rem; font-weight: 700;
    line-height: 1; box-shadow: var(--shadow-xs); }
.tech-dot.free { background: transparent !important; color: var(--color-muted); border: 1.5px dashed var(--color-border-strong); box-shadow:none; }

/* === Tabella fasi commesse === */
.phase-head th { font-size: .68rem; }
.phase-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; background: var(--color-surface); box-shadow: var(--shadow-xs); }
.phase-card.disabled { opacity: .55; }
/* Fase GIA' FATTA: marcatore chiaro a sinistra (bordo verde + spunta), per non
   confonderla con una fase disabilitata (meeting 3). */
.phase-card.done { border-left: 4px solid var(--color-success); background: #FAFDFB; }
.phase-done-mark { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem;
    font-weight: 700; color: var(--color-success); background: var(--color-success-soft);
    border-radius: var(--radius-pill); padding: .15rem .55rem; white-space: nowrap; }
.phase-bar { width: 4px; border-radius: 4px; align-self: stretch; }

/* Card fase: corpo diviso in sezioni (pianificazione / assegnazione / logistica / note),
   con griglia a colonne fisse cosi' i campi restano allineati tra una fase e l'altra. */
.phase-body .ph-section { padding: .7rem 0; border-top: 1px dashed var(--color-border); }
.phase-body .ph-section:first-child { border-top: none; padding-top: .2rem; }
.phase-body .ph-section-last { padding-bottom: .1rem; }
.ph-section-title {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-muted); margin-bottom: .45rem;
}
.ph-grid {
    display: grid; gap: .5rem .75rem;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    align-items: end;
}
.ph-field .form-label { margin-bottom: .15rem; color: var(--color-muted); font-size: .74rem; }
.ph-field.ph-narrow { max-width: 130px; }
.ph-assignee { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.ph-two-cols { display: grid; gap: .75rem; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) { .ph-two-cols { grid-template-columns: 1fr; } }
/* Tecnici/aziende: griglia a colonne — con 12 tecnici resta leggibile.
   Riusata anche nei modali (interventi, chiamate, manutenzioni). */
.check-grid, .ph-check-grid {
    display: grid; gap: .1rem .5rem;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: .35rem; background: var(--color-surface-2);
    max-height: 190px; overflow-y: auto;
}
.check-grid .filter-check, .ph-check-grid .filter-check { font-size: .78rem; }
.check-grid .avail, .ph-check-grid .avail { margin-left: auto; font-size: .8rem; }
/* Griglia mesi (scadenze manutenzione) */
.month-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .15rem .4rem;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: .4rem; background: var(--color-surface-2);
}

/* === Pannello filtri laterale collassabile (riusabile) ===
   ANCORATO al bordo sinistro dello schermo, FUORI dal container principale;
   quando e' aperto il contenuto si sposta a destra (main.sf-open). */
/* NB: il pannello va messo FUORI da <main> (figlio di <body>): .app-main ha
   un'animazione con transform che diventerebbe il contenitore del position:fixed
   (il pannello finirebbe sfasato/sopra il contenuto). */
/* Geometria UNICA per tutte le pagine (timeline inclusa): stessa larghezza,
   stesso stacco dal bordo, stesso margine del contenuto. */
:root { --sf-gap: 14px; --sf-width: 248px; }
.side-filters {
    position: fixed; left: var(--sf-gap); top: 76px; width: var(--sf-width); z-index: 90;
    max-height: calc(100vh - 92px);
    border-radius: var(--radius);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transition: transform .3s ease;
}
.side-filters.collapsed { transform: translateX(calc(-100% - var(--sf-gap) - 4px)); }
.side-filters .card-body { padding: .85rem; }
.side-filters .form-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-bottom: .25rem; }
/* Il contenuto occupa TUTTA la fascia a destra del pannello, con lo stesso
   respiro (--sf-gap) sia verso il pannello sia verso il bordo destro: cosi'
   l'insieme pannello+contenuto risulta bilanciato su ogni pagina. */
:root { --sf-band: calc(var(--sf-gap) * 2 + var(--sf-width)); }
.app-main.sf-open {
    margin-left: var(--sf-band);
    margin-right: var(--sf-gap);
    max-width: none;
    transition: margin .3s ease;
}
@media (max-width: 900px) { .app-main.sf-open { margin-left: 0; margin-right: 0; } }  /* mobile: overlay */
/* Ricerca con icona */
.filter-search { position: relative; }
.filter-search .bi { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
    color: var(--color-muted); font-size: .82rem; pointer-events: none; }
.filter-search .form-control { padding-left: 1.85rem; }

/* Chip di stato (selezione singola) */
.filter-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter-chip {
    border: 1px solid var(--color-border-strong); background: var(--color-surface);
    color: var(--color-text); border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600; padding: .18rem .6rem; line-height: 1.3;
    cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-chip:hover { background: var(--color-bg-subtle); }
.filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Lista di checkbox con pallino/etichetta (tecnici, clienti…) */
.filter-check-list {
    max-height: 190px; overflow-y: auto;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: .3rem; background: var(--color-surface);
    display: flex; flex-direction: column; gap: .1rem;
}
/* Pannelli con pochi filtri (Clienti, Destinazioni): l'ultimo blocco usa tutto lo
   spazio verticale disponibile invece di fermarsi a 190px e lasciare il vuoto sotto.
   Serve `sf-fill` sull'<aside> + `filter-grow` sul blocco elastico.
   La card NON e' alta per forza: resta alta quanto il contenuto (poche province =
   riquadro corto, niente scatola vuota) e si ferma al max-height del pannello,
   dove a scorrere e' la lista e non tutto il pannello. */
.side-filters.sf-fill { display: flex; flex-direction: column; }
.side-filters.sf-fill .card-body { flex: 1 1 auto; min-height: 0; }
.filter-grow { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* Il minimo (150px) evita che nei pannelli piu' carichi la lista venga schiacciata:
   arrivata li' e' il pannello a scorrere, come faceva prima. */
.filter-grow .filter-check-list { max-height: none; flex: 0 1 auto; min-height: 150px; }
.filter-check {
    display: flex; align-items: center; gap: .45rem;
    padding: .2rem .3rem; border-radius: var(--radius-sm);
    font-size: .8rem; cursor: pointer; margin: 0;
}
.filter-check:hover { background: var(--color-bg-subtle); }
/* Stato del tecnico nel giorno scelto (meeting 4): libero = bianco, occupato =
   pieno grigio, ferie/assenza = giallo. Restano tutti selezionabili: il blocco
   vero e' il controllo conflitti al salvataggio, che si puo' forzare. */
.filter-check.av-free { background: var(--color-surface); }
.filter-check.av-busy { background: #E2E8F0; color: var(--color-muted); }
.filter-check.av-off  { background: var(--color-warning-soft); color: #7C4A03; }
.filter-check.av-busy:hover, .filter-check.av-off:hover { filter: brightness(.97); }
.filter-check input { margin: 0; flex: 0 0 auto; }
.filter-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-check .tech-dot { flex: 0 0 auto; }

.side-filters-tab {
    position: fixed; left: 0; top: 120px; z-index: 91;
    width: 26px; height: 64px; border-radius: 0 8px 8px 0;
    background: var(--color-primary); color: #fff;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--shadow-md);
}
.side-filters-tab.show { display: flex; }

/* === Timeline ===
   La timeline custom vive in timeline.css. Qui resta solo la classe condivisa
   con le viste settimanali (pagina a tutta larghezza). */
.app-main.tl-full { max-width:none; }
/* Titolo pagina nell'header (accanto al brand): recupera spazio verticale */
.navbar-page-title { color:var(--nav-text-hi); font-weight:600; font-size:.95rem;
    padding-left:.9rem; margin-left:.5rem; border-left:1px solid rgba(255,255,255,.16); }

/* === PWA Tecnico === */
.tech-topbar { background:var(--nav-bg); background-image:var(--nav-bg-grad); color:var(--nav-text-hi);
    box-shadow:0 4px 18px -8px rgba(15,23,42,.55); position:sticky; top:0; z-index:1030;
    display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; }
.tech-topbar strong { color:var(--nav-text-hi); }
.tech-topbar .brand-mark { height:18px; }
.tech-topbar .text-muted { color:var(--nav-text) !important; }
.tech-main { max-width:680px; margin:0 auto; padding:1rem; }
.tech-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:1rem; margin-bottom:.8rem; transition: box-shadow var(--transition), transform var(--transition); }
.tech-card:active { transform: scale(.997); }
.tech-card .t-title { font-weight:700; }
.tech-card .t-sub { color:var(--color-muted); font-size:.85rem; }
.btn-touch { min-height:48px; font-size:1rem; }
.sig-canvas { width:100%; height:180px; border:1px dashed var(--color-border-strong); border-radius:var(--radius-sm); background:#fff; touch-action:none; }
.chk-row { display:flex; align-items:center; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--color-border); }
.chk-toggle .btn { min-width:48px; }

/* === Toast === */
.toast { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: none; }

/* === Polish (Fase C) === */
/* Solo opacita': un'animazione su `transform` renderebbe .app-main il
   contenitore dei figli position:fixed (pannelli filtri/legenda sfasati). */
@media (prefers-reduced-motion: no-preference) {
    .app-main { animation: fadein .35s ease both; }
    @keyframes fadein { from { opacity:0; } to { opacity:1; } }
}
* { scrollbar-width: thin; scrollbar-color: #C7CBD9 transparent; }
*::-webkit-scrollbar { height:10px; width:10px; }
*::-webkit-scrollbar-thumb { background:#C7CBD9; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:#A9AEC2; background-clip:content-box; }

.skeleton { background:linear-gradient(90deg,#EEF0F4 25%,#E3E6EE 37%,#EEF0F4 63%); background-size:400% 100%; animation:sk 1.2s ease-in-out infinite; border-radius:6px; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:0 0} }
.empty-state { text-align:center; padding:2.5rem 1rem; color:var(--color-muted); }
.empty-state .es-icon { width:54px; height:54px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:var(--t-indigo); color:var(--color-primary); font-size:1.5rem; margin-bottom:.6rem; }
.spinner-inline { display:inline-block; width:1.05rem; height:1.05rem; border:2px solid var(--color-border-strong); border-top-color:var(--color-primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }

.wk-chip { box-shadow:var(--shadow-xs); }
.badge-pulse { position:relative; }
.badge-pulse::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(220,38,38,.5); animation:pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow:0 0 0 6px rgba(220,38,38,0); } 100% { box-shadow:0 0 0 0 rgba(220,38,38,0); } }

/* === Dialog di conferma personalizzato === */
.app-confirm-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
    padding: 1rem; animation: confirm-fade var(--transition);
}
.app-confirm-dialog {
    width: 100%; max-width: 420px; background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow: hidden;
    animation: confirm-pop 180ms cubic-bezier(.2, .8, .2, 1);
}
.app-confirm-header {
    display: flex; align-items: center;
    padding: 1rem 1.25rem; font-weight: 700; font-size: 1.05rem;
    color: var(--color-text); border-bottom: 1px solid var(--color-border);
}
.app-confirm-body { padding: 1.1rem 1.25rem; color: var(--color-text); line-height: 1.5; }
.app-confirm-footer {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .85rem 1.25rem; background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
}
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* === Responsive === */
@media (max-width: 991.98px) {
    .app-navbar .navbar-nav { padding: .5rem 0; gap: .15rem; }
    .app-navbar .nav-link { width: 100%; }
    .app-navbar .dropdown-menu { box-shadow: none; border-color: rgba(255,255,255,.08); }
}