/* ============================================================
   SGS-MES — Fogli di stile condivisi (HTMX edition)
   Estratti dal blocco <style> di app.html, riorganizzati.
   ============================================================ */

:root {
    /* Scala font centralizzata (allineata ad app.html v01.18).
       Usata sia nelle classi qui sotto sia negli style inline delle view. */
    --txt-xs: 10px;
    --txt-sm: 11.5px;
    --txt-md: 12.5px;
    --txt-lg: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #eae8e3;
    color: #1a1a18;
    font-size: 13px;
}

/* ─── LAYOUT PRINCIPALE ─────────────────────────────────────── */

.app {
    display: flex;
    height: 100vh;
}
/* Preferenza utente: menu/sidebar a destra (utenti.sidebar_position='right'). */
.app.menu-right { flex-direction: row-reverse; }

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #eae8e3;
}

/* ─── SIDEBAR ───────────────────────────────────────────────── */

.sb {
    flex-shrink: 0;
    /* Colore tenant-driven: vedi Facto\Core\SidebarTheme + injection in
       layout/page.php. Fallback al navy storico per richieste pre-tenant.
       --sb-fg = colore testo, --sb-hover = rgba per hover/active. */
    background: var(--sb-bg, #2c4a6e);
    color: var(--sb-fg, #cfe2f3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 240px;
    transition: width .22s;
}
.sb.mini { width: 56px; }

/* HEADER */
.sb-header {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.sb.mini .sb-header {
    flex-direction: column;
    padding: 9px 0;
    gap: 4px;
}
.sb-brand-icon {
    width: 26px; height: 26px;
    background: #f1c40f;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sb-brand-text       { flex: 1; min-width: 0; }
.sb-brand-title      { color: var(--sb-fg, #d8eaf7); font-size: 18px; font-weight: 600; white-space: nowrap; line-height: 1.1; }
.sb-brand-subtitle   { font-size: 11px; color: var(--sb-bg-light, #4e7a9e); }

.sb-iconbtn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sb-bg-light, #4e7a9e);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sb-iconbtn:hover { color: var(--sb-bg-light, #8ab4d4); filter: brightness(1.25); }

/* NAV — stile "pill": voci grandi, arrotondate, stato attivo pieno. */
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px; }
.sb.mini .sb-nav { padding: 6px 0; }

.sb-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
}
/* Le SVG della libreria sono 14×14: le scalo per riempire il box pill. */
.sb-icon svg { width: 100%; height: 100%; display: block; }
/* Su pill attiva (sfondo rosso) le icone duotone diventano bianche piene. */
.sb-link.is-active .sb-icon svg,
.sb-group:not([open]) > .sb-group-header.is-active .sb-icon svg { filter: brightness(0) invert(1); }

/* Voci top-level (link diretti + intestazioni gruppo): pill arrotondata. */
.sb-link, .sb-group-header {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 12px;
    margin: 2px 0;
    background: none; border: none;
    border-radius: 10px;
    color: var(--sb-fg, #cfe2f3);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    opacity: .82;
}
.sb-link:hover, .sb-group-header:hover {
    background: var(--sb-hover, rgba(255, 255, 255, .07));
    opacity: 1;
}
.sb-link.is-active {
    background: #c0392b;
    color: #fff;
    font-weight: 600;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(192, 57, 43, .4);
}
.sb.mini .sb-link, .sb.mini .sb-group-header {
    justify-content: center;
    padding: 10px 0;
    margin: 2px 5px;
    gap: 0;
}
.sb.mini .sb-link.is-active { box-shadow: none; }

.sb-group summary { list-style: none; }
.sb-group summary::-webkit-details-marker { display: none; }
.sb-group { margin: 0; }

.sb-group-header.is-active { opacity: 1; font-weight: 600; }
.sb-group[open] > .sb-group-header { opacity: 1; }
/* Gruppo attivo ma chiuso: alone accent per indicare il sub attivo nascosto. */
.sb-group:not([open]) > .sb-group-header.is-active {
    background: rgba(192, 57, 43, .16);
    color: #fff;
}

.sb-chevron {
    margin-left: auto;
    transition: transform .18s;
    display: inline-flex;
    align-items: center;
    opacity: .65;
}
.sb-group[open] .sb-chevron { transform: rotate(90deg); }
.sb.mini .sb-chevron { display: none; }

.sb-group-children { padding: 2px 0 6px; }
.sb-sublink {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 12px 8px 36px;
    margin: 1px 0;
    background: none; border: none;
    border-radius: 8px;
    color: var(--sb-fg, #cfe2f3);
    opacity: .66;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.sb-sublink:hover { background: var(--sb-hover, rgba(255, 255, 255, .06)); opacity: 1; }
.sb-sublink.is-active {
    background: #c0392b;
    color: #fff;
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(192, 57, 43, .4);
}
.sb-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    flex-shrink: 0;
}
.sb-sublink.is-active .sb-dot { background: #fff; opacity: 1; }

/* FOOTER */
.sb-footer {
    padding: 9px 12px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex; align-items: center; gap: 7px;
    flex-shrink: 0;
}
.sb.mini .sb-footer {
    padding: 8px 0;
    justify-content: center;
}
.sb-user-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sb-user-name { font-size: 11px; color: #5e8bb0; }

/* Tenant switcher (superuser SaaS cross-tenant): vive sopra il footer. */
.sb-tenant-switcher {
    padding: 7px 12px 8px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}
.sb-tenant-label { font-size: 10px; color: #5e8bb0; text-transform: uppercase; letter-spacing: .05em; }
.sb-tenant-select {
    flex: 1; min-width: 0;
    font-size: 12px; padding: 3px 6px;
    border-radius: 4px; border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .05); color: #cfe2f3;
}
.sb-tenant-select:focus { outline: none; border-color: #5e8bb0; }
.sb.mini .sb-tenant-switcher { padding: 6px 4px; justify-content: center; }
.sb-tenant-mini {
    width: 100%; font-size: 10px; padding: 2px;
    border-radius: 3px; border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05); color: #cfe2f3; text-align: center;
}

/* ─── SCHEDA FULL-PAGE (documenti/anagrafica/articoli/contratti) ──
   Pattern: .tb toolbar (flex-shrink:0) + .scheda-fs fieldset (flex:1)
   con .scheda-body scrollabile. Il min-height:0 sui flex item è
   indispensabile per consentire all'overflow:auto del figlio di
   restringersi sotto la sua content-height (default flex item è
   min-height:auto, che impedisce lo scroll interno).
   .scheda-sticky si applica a una card dentro .scheda-body per
   tenerla visibile durante lo scroll (es. testata documento). */

.scheda-fs {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.scheda-body {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
    min-height: 0;
}
.scheda-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* ─── TOPBAR ────────────────────────────────────────────────── */

.tb {
    background: #fff;
    border-bottom: .5px solid rgba(0, 0, 0, .1);
    padding: 0 16px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* position:relative consente di ancorare ai bordi del topbar bottoni
       a comparsa con position:absolute (es. chip "Info" in articoli). */
    position: relative;
}
.tb .title { font-size: 13px; font-weight: 500; flex: 1; }
.tb .muted { font-size: 11px; color: #888; }

/* ─── BOTTONI ───────────────────────────────────────────────── */

.btn {
    padding: 5px 11px; font-size: 12px;
    border-radius: 7px;
    border: .5px solid rgba(0, 0, 0, .2);
    background: transparent;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
    text-decoration: none;
}
.btn:hover { background: #f0eff0; }
.btn-sm { padding: 3px 8px; font-size: 11px; }
.btn-p  { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; }
.btn-p:hover { background: #a93226 !important; }
.btn-g  { background: #2e7d52 !important; color: #fff !important; border-color: #2e7d52 !important; }
.btn-g:hover { background: #256041 !important; }
.btn-d  { color: #791f1f; border-color: rgba(163, 45, 45, .3); }
.btn-d:hover { background: #fcebeb; }
/* Toolbar icone: btn-viz (azzurro) per visualizza, btn-edit (verde) per modifica */
.btn-viz  { background: #e8f3fb; }
.btn-viz:hover  { background: #d4e9f8; }
.btn-edit { background: #f0fbec; }
.btn-edit:hover { background: #d8f4d0; }
/* Link "cliccabile" inline: usato per cliente/articolo nelle testate */
.nav-link {
    cursor: pointer;
    text-decoration: underline dotted;
    color: #2c4a6e;
}
.nav-link:hover { text-decoration: underline solid; }

/* ─── INPUT / SELECT / TEXTAREA ─────────────────────────────── */

.fi {
    padding: 6px 9px; font-size: var(--txt-md);
    border: .5px solid rgba(0, 0, 0, .2);
    border-radius: 7px;
    background: #f5f5f3;
    color: #1a1a18;
    width: 100%;
    font-family: inherit;
}
.fi:focus { outline: none; border-color: rgba(0, 0, 0, .38); background: #fff; }
select.fi { appearance: auto; }
textarea.fi { resize: vertical; min-height: 60px; }

/* ─── BADGE ─────────────────────────────────────────────────── */

.bdg {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 3px;
    font-size: 10.5px; font-weight: 500;
}
.bok { background: #eaf3de; color: #27500a; }
.bko { background: #fcebeb; color: #791f1f; }
.bwa { background: #faeeda; color: #633806; }
.bin { background: #e6f1fb; color: #0c447c; }
.bgy { background: #f0eff0; color: #555; }

/* ─── TABELLE ───────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }
thead th {
    padding: 7px 12px; font-size: 10.5px; font-weight: 500;
    color: #666; text-align: left;
    border-bottom: .5px solid rgba(0, 0, 0, .1);
    background: #f5f5f3;
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
tbody td {
    padding: 7px 12px; font-size: 12px; color: #1a1a18;
    border-bottom: .5px solid rgba(0, 0, 0, .07);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 200px;
}
tbody tr { cursor: pointer; }
tbody tr:hover td { background: #f8f8f7; }
tbody tr.is-active td { background: #e6f1fb; }

/* ─── FILTRI (filter bar) ───────────────────────────────────── */

.fbar {
    padding: 8px 16px;
    border-bottom: .5px solid rgba(0, 0, 0, .1);
    background: #f5f5f3;
    display: flex; flex-wrap: wrap;
    gap: 10px; align-items: flex-end;
}
.fitem { display: flex; flex-direction: column; }
.fbar label {
    font-size: 9.5px; text-transform: uppercase;
    color: #888; margin-bottom: 2px;
}

/* ─── CARD / DETAIL PANEL ───────────────────────────────────── */

.card {
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.card-h {
    font-size: var(--txt-xs); font-weight: 500; text-transform: uppercase;
    color: #888; margin-bottom: 10px;
}

/* Card collassabile (HTML5 <details>): summary stilizzato come card-h
   cliccabile, niente caret nativo (sostituito da ▸/▾ via JS-free CSS). */
.card-collapsible { padding: 0; overflow: hidden; }
.card-collapsible > .card-summary {
    list-style: none; cursor: pointer;
    padding: 12px 16px; margin: 0;
    display: flex; align-items: center; gap: 8px;
    user-select: none;
}
.card-collapsible > .card-summary::-webkit-details-marker { display: none; }
.card-collapsible > .card-summary:hover { background: rgba(0, 0, 0, .025); }
.card-summary-toggle { display: inline-block; transition: transform .15s; color: #5e8bb0; }
.card-collapsible[open] > .card-summary > .card-summary-toggle { transform: rotate(90deg); }
.card-collapsible[open] > *:not(.card-summary) { padding: 4px 16px 14px; }

/* ─── Bar chart andamento fatturato (12 mesi) ─────────────── */
.bars-chart {
    display: flex; align-items: flex-end; gap: 6px;
    height: 140px; padding: 0 4px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.bars-month {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: stretch;
    height: 100%; cursor: default;
}
.bars-stack {
    flex: 1; display: flex; align-items: flex-end; gap: 2px;
    min-height: 0;
}
.bars-stack .bar {
    flex: 1; border-radius: 2px 2px 0 0;
    transition: opacity .15s;
}
.bar-cli { background: linear-gradient(180deg, #5e8bb0, #3a6694); }
.bar-for { background: linear-gradient(180deg, #d4a373, #b07e4a); }
.bars-month:hover .bar { opacity: .75; }
.bars-lbl {
    text-align: center; font-size: 10px; color: #888;
    margin-top: 4px; text-transform: capitalize;
}
.dot-cli, .dot-for {
    display: inline-block; width: 9px; height: 9px;
    border-radius: 2px; vertical-align: -1px;
}
.dot-cli { background: #3a6694; }
.dot-for { background: #b07e4a; }

.detail-pane {
    width: 380px; min-width: 380px;
    border-left: .5px solid rgba(0, 0, 0, .1);
    overflow-y: auto; background: #fff; padding: 14px;
}
.detail-title {
    font-size: var(--txt-lg); font-weight: 500; color: #2c4a6e;
    margin-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between;
}

.fld { display: flex; flex-direction: column; gap: 3px; }
.fld label, .fld > .fld-label {
    font-size: 10.5px; text-transform: uppercase;
    color: #888; font-weight: 500;
}
.fld .req { color: #c0392b; }
.fld-value { font-size: var(--txt-md); padding: 6px 0; }

/* ─── DASHBOARD War Room ───────────────────────────────────── */

.kpi {
    background: #fff;
    border: .5px solid rgba(0, 0, 0, .1);
    border-left: 3px solid;
    border-radius: 10px;
    padding: 10px 14px;
}
.kpi .kl { font-size: 11px; color: #888; margin-bottom: 4px; }
.kpi .kv { font-size: 24px; font-weight: 500; color: #1a1a18; }

/* Tab War Room / KPI nella topbar */
.dash-tabs {
    display: flex;
    border: .5px solid rgba(0, 0, 0, .15);
    border-radius: 7px;
    overflow: hidden;
    margin-right: 14px;
}
.dash-tab {
    padding: 5px 14px;
    font-size: var(--txt-sm);
    background: transparent;
    color: #555;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.dash-tab + .dash-tab { border-left: .5px solid rgba(0, 0, 0, .15); }
.dash-tab.is-active   { background: #2c4a6e; color: #fff; font-weight: 500; }

/* Body */
.dash-body {
    flex: 1;
    overflow: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Alert strip */
.dash-alerts { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.dash-alert  {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border: .5px solid;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .1s;
}
.dash-alert:hover { opacity: .8; }
.dash-alert-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-alert-v     { font-size: 12px; font-weight: 500; }
.dash-alert-l     { font-size: 12px; }

/* KPI strip */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    flex-shrink: 0;
}

/* Grid 4 colonne */
.dash-grid {
    flex: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 250px 1fr 250px 200px;
    gap: 10px;
    min-height: 0;
}
.dash-col-1 { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.dash-col-2 { overflow-y: auto; min-height: 0; }
.dash-card-scroll { overflow-y: auto; min-height: 0; }

/* Sovrascrive il margin-bottom default di .card dentro la dashboard */
.dash-grid .card,
.dash-col-1 .card { margin-bottom: 0; padding: 12px 14px; }

/* Semaforo macchine */
.dash-sem { display: flex; flex-direction: column; gap: 5px; }
.dash-sem-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 7px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none; color: inherit;
}
.dash-sem-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-sem-cod { font-size: 11px; font-weight: 500; color: #1a1a18; width: 56px; flex-shrink: 0; }
.dash-sem-lbl {
    font-size: 10.5px; color: #555; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Avanzamento settimanale (col 2) */
.dash-avz-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 11px;
}
.dash-avz-list { display: flex; flex-direction: column; gap: 7px; }
.dash-avz-row  { display: flex; align-items: center; gap: 8px; }
.dash-avz-name { width: 105px; flex-shrink: 0; }
.dash-avz-num  { font-size: 11px; font-weight: 500; color: #2c4a6e; }
.dash-avz-art  {
    font-size: 9.5px; color: #aaa;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-avz-bar  { flex: 1; height: 13px; background: #f0eff0; border-radius: 6px; overflow: hidden; }
.dash-avz-fill { height: 100%; border-radius: 6px; }
.dash-avz-bdg  { font-size: 9px; flex-shrink: 0; width: 78px; text-align: center; }
.dash-avz-qty  { width: 58px; text-align: right; flex-shrink: 0; font-size: 11px; color: #555; }
.dash-avz-pct  { width: 32px; text-align: right; flex-shrink: 0; font-size: 10.5px; font-weight: 500; }

/* Liste laterali (ultimi OC, scadenze) */
.dash-list-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-bottom: .5px solid rgba(0, 0, 0, .07);
    cursor: pointer;
    text-decoration: none; color: inherit;
}
.dash-list-row-sm { gap: 8px; padding: 6px 0; }
.dash-list-main   { flex: 1; min-width: 0; }
.dash-list-title  { font-size: var(--txt-md); font-weight: 500; }
.dash-list-sub    {
    font-size: 11px; color: #888;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── DIALOG (modale edit/new) ──────────────────────────────── */

dialog.modal {
    /* margin auto rimessa esplicitamente: il reset globale `* { margin:0 }`
       in cima al file annulla il margin di default che il browser usa per
       centrare i <dialog> aperti con showModal(). Senza questa riga le
       modali si attaccano in alto a sinistra. */
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 12px;
    max-width: 95vw;
    width: 640px;
    max-height: 90vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, .45); }

/* Lightbox-galleria immagini annotazioni (cantieri). */
dialog.lb {
    margin: 0; padding: 0; border: none; background: transparent;
    max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    grid-template-rows: 44px 1fr auto;
    grid-template-areas: "bar bar bar" "prev img next" "cap cap cap";
    align-items: center; justify-items: center;
}
dialog.lb::backdrop { background: rgba(0, 0, 0, .85); }
.lb .lb-bar { grid-area: bar; align-self: start; width: 100%; display: flex;
    align-items: center; gap: 10px; padding: 8px 14px; color: #fff; box-sizing: border-box; }
.lb .lb-count { color: #ddd; font-size: 13px; }
.lb .lb-img, .lb .lb-vid { grid-area: img; max-width: calc(100vw - 130px); max-height: calc(100vh - 110px);
    object-fit: contain; border-radius: 6px; background: #111; }
.lb .lb-nav { background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
    width: 44px; height: 64px; border-radius: 8px; font-size: 34px; line-height: 1; }
.lb .lb-nav:hover { background: rgba(255,255,255,.25); }
.lb .lb-prev { grid-area: prev; }
.lb .lb-next { grid-area: next; }
.lb .lb-cap { grid-area: cap; width: 100%; box-sizing: border-box; padding: 10px 16px 16px;
    color: #f2f2f2; text-align: center; font-size: 14px; }
.lb .lb-x, .lb .lb-dl { color: #fff; text-decoration: none; cursor: pointer;
    background: rgba(255,255,255,.12); border: none; border-radius: 6px;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.lb .lb-x:hover, .lb .lb-dl:hover { background: rgba(255,255,255,.25); }
/* Thumbnail cliccabili */
.js-lb { cursor: pointer; }
/* Variante LARGA del dialog — si attiva se il contenuto include
   .modal-articolo-completo. Usata dalla modale unificata articolo. */
dialog.modal:has(.modal-articolo-completo) {
    width: 1056px;
    max-width: 95vw;
    border-left: 4px solid #2e7d52;
}
/* Variante LARGA per l'import estratto conto (anteprima tabellare): evita lo
   scroll orizzontale dando spazio alle colonne. Marker `.pn-import` sul .modal-b. */
dialog.modal:has(.pn-import) {
    width: 1040px;
    max-width: 95vw;
}
.modal-articolo-completo { display: flex; flex-direction: column; min-height: 0; height: 86vh; }
.mac-tabs { display: flex; border-bottom: 1px solid rgba(0,0,0,.1);
            padding: 0 16px; background: #f0eff0; flex-shrink: 0; }
.mac-body { flex: 1; overflow: hidden; padding: 14px 18px; background: #f0eff0; display: flex; flex-direction: column; }

.modal-h {
    padding: 14px 18px;
    border-bottom: .5px solid rgba(0, 0, 0, .1);
    display: flex; align-items: center; gap: 10px;
}
.modal-h .mt  { font-size: var(--txt-lg); font-weight: 500; flex: 1; }
.modal-h .mc  { width: 4px; height: 22px; border-radius: 2px; background: #2c4a6e; }
.modal-b {
    padding: 18px;
    overflow-y: auto;
    max-height: calc(90vh - 110px);
    display: flex; flex-direction: column; gap: 12px;
}
/* Nelle dialog il calendario flatpickr (static) è posizionato in `fixed` via JS
   (onOpen, vedi layout/page.php) così non viene clippato dagli overflow della
   modale e sborda liberamente. Qui solo lo z-index per stare sopra al contenuto. */
dialog .flatpickr-calendar { z-index: 100000; }
.modal-f {
    padding: 12px 18px;
    border-top: .5px solid rgba(0, 0, 0, .1);
    display: flex; justify-content: flex-end; gap: 8px;
}
.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
/* Modificatore opzionale: griglia a 3 colonne (riga form più densa).
   Si combina con .frow (es. <div class="frow frow-3">). */
.frow-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ─── TOAST / NOTIFICHE ─────────────────────────────────────── */

#toast {
    position: fixed;
    bottom: 12px; right: 14px;
    background: #1e5c36; color: #9fe8b4;
    font-size: var(--txt-sm);
    padding: 8px 14px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    z-index: 99;
    border: .5px solid rgba(46, 204, 113, .3);
}
#toast.show       { opacity: 1; }
#toast.toast-err  { background: #5c1e1e; color: #e8b4b4; border-color: rgba(204, 46, 46, .3); }

/* ─── STATI / VARIE ─────────────────────────────────────────── */

.loading, .empty {
    padding: 40px;
    text-align: center;
    color: #aaa;
    font-size: 13px;
}

/* ─── Empty-state ricco (componente shared/empty-state) ─────────
   Pattern: icona + titolo + body + CTA. Usato per liste vuote dove
   c'è valore nel guidare l'utente al "primo gesto".              */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
    color: #6b6862;
}
.empty-state-icon svg {
    width: 36px; height: 36px;
    opacity: .85;
    margin-bottom: 6px;
}
.empty-state-title {
    font-size: 15px;
    font-weight: 600;
    color: #3c3a36;
}
.empty-state-body {
    font-size: 12.5px;
    color: #8a877f;
    max-width: 380px;
    line-height: 1.5;
}
.empty-state-cta {
    margin-top: 12px;
}

.prog-bar {
    height: 6px; background: #e8e8e6;
    border-radius: 3px; overflow: hidden;
    margin-top: 4px;
}
.prog-fill {
    height: 100%; border-radius: 3px;
    background: #2e7d52;
}

/* Scrollbar sottile (solo WebKit) */
.sc { overflow-y: auto; }
.sc::-webkit-scrollbar { width: 4px; }
.sc::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 2px; }

/* ─── Loading / feedback ─────────────────────────────────────── */

/* Indicatore visivo mentre HTMX sta caricando un pezzo */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }
.htmx-swapping { opacity: .5; transition: opacity .12s; }

/* Stato busy dei bottoni: feedback immediato al click. HTMX aggiunge
   automaticamente la classe `.htmx-request` durante la pending request. */
.btn.htmx-request {
    opacity: .65;
    cursor: wait;
    pointer-events: none;     /* evita doppio click */
    position: relative;
}
/* Spinner inline aggiunto a tutti i btn durante request — appare a destra
   del testo del bottone. Non si vede se manca lo spazio: padding-right
   diventa più stretto per i bottoni piccoli. */
.btn.htmx-request::after {
    content: '';
    display: inline-block;
    width: 10px; height: 10px;
    margin-left: 6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: facto-spin .7s linear infinite;
    vertical-align: -1px;
}
@keyframes facto-spin {
    to { transform: rotate(360deg); }
}

/* Spinner riusabile esplicito: per casi in cui serve uno spinner standalone
   (es. accanto al label di un input typeahead durante la fetch).         */
.spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: facto-spin .7s linear infinite;
    vertical-align: -2px;
    opacity: .6;
}

/* Container con upload in corso (form multipart): opacità + cursor wait
   sull'intero blocco, così l'utente capisce di aspettare.               */
form.htmx-request {
    opacity: .85;
    pointer-events: none;
    cursor: progress;
}
/* Eccezione: il bottone submit dentro è già coperto dal selettore .btn.htmx-request
   sopra; lasciamo pointer-events:none sull'intero form per evitare interazioni
   parassite con campi durante l'invio.                                       */

/* Bottone "↶ annulla" — appare solo se il container [data-save-on-exit]
   ha modifiche pending (data-dirty). Sfrutta defaultValue/defaultSelected
   per ripristinare l'ultimo stato salvato; vedi undoEdit() in
   layout/page.php. */
.btn-row-undo { display: none; color: #d68910; border-color: rgba(214, 137, 16, .3); }
[data-save-on-exit][data-dirty] .btn-row-undo { display: inline-flex; }

/* Icona tooltip ⓘ accanto al label dei campi tecnici (helper helpIcon()).
   Sfrutta tooltip nativo del browser via `title`. cursor:help comunica
   "informativo, non cliccabile". */
.help-icon {
    display: inline-block;
    margin-left: 4px;
    color: #6b89aa;
    cursor: help;
    font-size: .9em;
    user-select: none;
}
.help-icon:hover { color: #2c4a6e; }

/* Utility di spacing/layout */
.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1   { flex: 1; }
.gap-1    { gap: 4px; }
.gap-2    { gap: 8px; }
.gap-3    { gap: 12px; }
.ml-auto  { margin-left: auto; }

/* ─── EDITOR CICLO: fase-card + catalogo fasi (porting da app.html v01.18) ─── */

/* Container drop fasi (sia in pagina principale che in modale) */
.ciclo-drop {
    border: 1.5px solid transparent;
    border-radius: 8px;
    min-height: 60px;
    transition: background .12s;
}
.ciclo-drop.drag-over { background: rgba(44,74,110,.07); border-color: #2c4a6e; }

/* Fase card (phc = phase card, phh = phase header, phb = phase body, dgh = drag handle) */
.phc {
    background: #fff;
    border: .5px solid rgba(0,0,0,.1);
    border-radius: 8px;
    margin-bottom: 7px;
    overflow: hidden;
}
.ciclo-drop .phc { margin-bottom: 2px; }
.phc.dov { border-color: #c0392b; box-shadow: 0 0 0 2px rgba(192,57,43,.1); }
.phc.dng { opacity: .4; }
.phc-ghost { opacity: .4; }
.phh {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    cursor: pointer; user-select: none;
}
.phh:hover { background: #f8f8f7; }
.phb { border-top: .5px solid rgba(0,0,0,.08); padding: 12px; }
.dgh {
    cursor: grab; color: #bbb; font-size: var(--txt-lg);
    flex-shrink: 0; padding: 2px 3px; line-height: 1;
}
.dgh:hover   { color: #888; }
.dgh:active  { cursor: grabbing; }

/* ─── TAB BASE (porting da app.html v01.18: red underline active) ───
   Usata sia dal menu schede della modale articolo (mac-tabs) sia da
   eventuali altri pannelli a schede (es. art-info-panel). */
.tab {
    padding: 6px 12px;
    font-size: var(--txt-md);
    border: none;
    background: none;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;  /* sovrappone il bordo del container */
    font-family: inherit;
}
.tab:hover { color: #2c4a6e; }
.tab.act {
    color: #c0392b;
    border-bottom-color: #c0392b;
    font-weight: 500;
}

/* Catalogo fasi: ogni voce è draggable verso il ciclo */
.cat-item {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 10px;
    border-bottom: .5px solid rgba(0,0,0,.07);
    cursor: grab; font-size: var(--txt-md);
    transition: background .08s;
}
.cat-item:hover  { background: #f0f4f8; }
.cat-item:active { cursor: grabbing; }

/* ── Modulo documenti: righe inline ──────────────────────────── */
.righe-tbl { width:100%; }
.righe-tbl th { font-size:10px; text-transform:uppercase; color:#888; padding:4px 5px; text-align:left; }
.righe-tbl td { padding:2px 4px; vertical-align:middle; overflow:visible; max-width:none; }
.righe-tbl .fi { padding:3px 5px; font-size:12px; height:auto; width:100%; box-sizing:border-box; }
.righe-tbl input[type=number] { text-align:right; }
.ml-auto { margin-left:auto; }

/* ── Typeahead (ricerca anagrafica) ──────────────────────────── */
.typeahead { position:relative; }
.ta-results { position:absolute; left:0; right:0; top:100%; z-index:30;
              background:#fff; border:1px solid #d8d8d4; border-top:none;
              border-radius:0 0 4px 4px; max-height:240px; overflow:auto;
              box-shadow:0 6px 16px rgba(0,0,0,.08); }
.ta-results:empty { display:none; }
.ta-item { padding:6px 9px; font-size:13px; cursor:pointer; border-bottom:1px solid #f0f0ee; }
.ta-item:last-child { border-bottom:none; }
.ta-item:hover,
.ta-item.ta-active { background:#eef4f8; }
.ta-item.ta-new { color:#2e7d52; font-weight:600; cursor:pointer; background:#f3f9f5; }
.ta-item.ta-new:hover,
.ta-item.ta-new.ta-active { background:#e6f3ea; }

/* ─── RICERCA GLOBALE ────────────────────────────────────────── */
.gs-results { max-height:60vh; overflow:auto; margin-top:8px; }
.gs-hint { padding:14px 4px; text-align:center; font-size:var(--txt-sm); }
.gs-section { margin-bottom:14px; }
.gs-section-h { display:flex; align-items:center; gap:6px;
                font-size:var(--txt-xs); font-weight:600;
                text-transform:uppercase; color:#6b6862;
                padding:4px 2px 6px; border-bottom:1px solid #ece8e0; margin-bottom:4px; }
.gs-item { display:block; padding:7px 8px; border-radius:4px;
           text-decoration:none; color:inherit; cursor:pointer; }
.gs-item:hover,
.gs-item.ta-active { background:#eef4f8; }

/* ─── SIDEBAR SHORTCUTS ──────────────────────────────────────── */
.sb-shortcuts {
    flex-shrink:0;
    margin:0 6px 4px;
    padding:6px 4px;
    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
    color:#cfe2f3;
}
.sb-shortcuts-empty {
    text-align:center; padding:10px 4px; font-size:10px; line-height:1.3;
    color:rgba(255,255,255,.45); border:1px dashed rgba(255,255,255,.15);
    border-radius:4px;
}
.sb-shortcuts.sb-shortcuts-over {
    background:rgba(255,255,255,.05);
}
.sb-shortcuts.sb-shortcuts-over .sb-shortcuts-empty {
    border-color:rgba(255,255,255,.45); color:#cfe2f3;
}
.sb-shortcuts-grid {
    display:flex; gap:4px; justify-content:flex-start; flex-wrap:wrap;
}
.sb-sc-item {
    position:relative; width:34px; height:34px;
}
.sb-sc-link {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%; border-radius:5px;
    background:rgba(255,255,255,.06); color:inherit; text-decoration:none;
    transition:background .15s;
}
.sb-sc-link:hover { background:rgba(255,255,255,.14); }
.sb-sc-edit, .sb-sc-del {
    position:absolute; width:13px; height:13px; border-radius:50%;
    background:#444; color:#fff; border:1px solid #2c4a6e;
    font-size:9px; line-height:1; padding:0; cursor:pointer;
    display:none; align-items:center; justify-content:center;
}
.sb-sc-edit { top:-4px; left:-4px; }
.sb-sc-del  { top:-4px; right:-4px; background:#7a1c1c; }
.sb-sc-item:hover .sb-sc-edit,
.sb-sc-item:hover .sb-sc-del { display:flex; }
.sb-shortcuts-info {
    font-size:10px; color:rgba(255,255,255,.4); text-align:center;
    margin-top:4px;
}
/* In mini-mode: la sezione resta ma più compatta */
.sb.mini .sb-shortcuts { margin:0 4px 4px; padding:4px 2px; }
.sb.mini .sb-shortcuts-empty { display:none; }
.sb.mini .sb-shortcuts-info { display:none; }
.sb.mini .sb-shortcuts-grid { justify-content:center; }
.sb.mini .sb-sc-item { width:30px; height:30px; }

/* ─── SIDEBAR RECENTI ────────────────────────────────────────── */
.sb-recenti { flex-shrink:0; margin:0 6px 4px; padding:4px 4px 6px; color:#cfe2f3; }
.sb-recenti-h {
    display:flex; align-items:center; gap:4px;
    font-size:9.5px; text-transform:uppercase; letter-spacing:.5px;
    color:rgba(255,255,255,.45); padding:4px 6px 4px;
}
.sb-recenti-clear {
    background:none; border:0; padding:2px 4px; cursor:pointer;
    color:rgba(255,255,255,.4); display:inline-flex; align-items:center;
    border-radius:3px;
}
.sb-recenti-clear:hover { color:#fff; background:rgba(255,255,255,.08); }
.sb-recenti-list { display:flex; flex-direction:column; gap:1px; }
.sb-recenti-item {
    display:flex; align-items:baseline; gap:6px;
    padding:4px 8px; border-radius:4px;
    color:#cfe2f3; text-decoration:none; font-size:12px;
    transition:background .15s;
}
.sb-recenti-item:hover { background:rgba(255,255,255,.08); }
.sb-recenti-type {
    font-size:10px; font-weight:600; letter-spacing:.3px;
    color:var(--sb-bg-light, #5e8bb0); text-transform:uppercase;
    min-width:32px; flex-shrink:0;
}
.sb-recenti-num { font-variant-numeric:tabular-nums; opacity:.85; }
/* In mini-mode: nascondi (i numeri sono illeggibili a 52px) */
.sb.mini .sb-recenti { display:none; }

/* ─── PAGINA IMPORTA/ESPORTA ─────────────────────────────────── */
.imex-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
}
.imex-card {
    display:block; padding:16px 18px; text-align:left;
    background:#fff; border:1px solid #d4d1ca; border-radius:6px;
    text-decoration:none; color:inherit; cursor:pointer;
    font-family:inherit;
    transition:border-color .15s, box-shadow .15s;
}
.imex-card:hover { border-color:#2c4a6e; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.imex-card-h {
    font-weight:600; font-size:14px; color:#2c4a6e; margin-bottom:6px;
}
.imex-card-b {
    font-size:12.5px; color:#666; line-height:1.5;
}

/* Picker modale icone */
.sb-icon-picker {
    display:grid; grid-template-columns:repeat(6, 1fr);
    gap:8px; padding:4px;
}
.sb-icon-picker-item {
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border:1px solid #d4d1ca; border-radius:5px;
    background:#fff; cursor:pointer; padding:0;
}
.sb-icon-picker-item:hover { background:#eef4f8; border-color:#5e8bb0; }
.sb-icon-picker-item.selected { background:#eef4f8; border-color:#2c4a6e; }
.gs-item-title { font-size:var(--txt-sm); }
.gs-item-meta  { font-size:var(--txt-xs); color:#8a877f; margin-top:1px; }
.gs-code { display:inline-block; background:#ece8e0; color:#3c3a36;
           padding:0 5px; border-radius:3px; font-size:var(--txt-xs);
           font-weight:600; margin-right:5px; }

/* ─── CALENDARIO ────────────────────────────────────────────── */
.cal-bar { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.cal-month { font-weight:600; font-size:var(--txt-lg); min-width:160px; text-align:center; text-transform:capitalize; }
.cal-seg { display:inline-flex; border:1px solid #d4d1ca; border-radius:5px; overflow:hidden; }
.cal-seg .btn { border:0 !important; border-radius:0 !important; }
.cal-seg .btn.on { background:#c0392b !important; color:#fff !important; }

.cal-grid { width:100%; border-collapse:collapse; table-layout:fixed; }
.cal-grid th { font-size:var(--txt-xs); text-transform:uppercase; color:#8a877f; font-weight:600; padding:4px 5px; text-align:left; }
.cal-grid td { border:1px solid #e0e0dc; vertical-align:top; height:94px; padding:3px 4px; background:#fff; overflow:hidden; }
.cal-grid td.cal-out { background:#f4f2ee; }
.cal-day-num { font-size:var(--txt-sm); color:#6b6862; font-weight:600; }
.cal-out .cal-day-num { color:#b9b6ae; }
.cal-today .cal-day-num { background:#c0392b; color:#fff; border-radius:50%; width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; }
.cal-add { float:right; cursor:pointer; color:#a7a49d; font-weight:700; visibility:hidden; text-decoration:none; line-height:1; padding:0 2px; }
.cal-grid td:hover .cal-add { visibility:visible; }
.cal-add:hover { color:#c0392b; }

.cal-voce { display:block; font-size:var(--txt-xs); margin-top:2px; padding:1px 4px; border-radius:3px; background:#dfe9e2; color:#1f3b2c; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-voce.pub { background:#e3e7f2; color:#243559; }
.cal-voce .cal-ora { font-weight:600; margin-right:3px; }
.cal-more { font-size:var(--txt-xs); color:#8a877f; margin-top:2px; }

.cal-ag-day { margin-bottom:12px; }
.cal-ag-date { font-weight:600; font-size:var(--txt-md); padding:4px 0; border-bottom:1px solid #e0e0dc; margin-bottom:4px; text-transform:capitalize; }
.cal-ag-voce { display:flex; gap:10px; align-items:baseline; padding:5px 4px; border-radius:4px; cursor:pointer; }
.cal-ag-voce:hover { background:#f0eee9; }
.cal-ag-time { width:90px; color:#6b6862; font-size:var(--txt-sm); flex:none; }
.cal-ag-meta { color:#8a877f; font-size:var(--txt-xs); margin-left:auto; }
.cal-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2f7d52; flex:none; }
.cal-dot.pub { background:#3a59a8; }
.cal-main { flex:1; overflow:auto; padding:12px; }
.cal-editor {
    width:390px; flex:none; overflow:auto;
    border-left:2px solid #c0392b;     /* bordo evidente per individuare il panel */
    border-radius:0 8px 8px 0;
    padding:14px;
    box-shadow:-3px 0 8px -2px rgba(192, 57, 43, .15);
    background:#fefdfb;
}

/* ─── Tab bar riusabile (articoli, asset, anagrafica scheda) ─── */
.tab-bar { border-bottom:1px solid #e0e0dc; display:flex; gap:4px; }
.tab-btn {
    border-radius:0; border:0; padding:8px 14px;
    background:transparent; opacity:.6; cursor:pointer;
    font-size:var(--txt-xs); color:#3a3833;
}
.tab-btn:hover { opacity:.85; }
.tab-btn.is-active {
    opacity:1; border-bottom:2px solid #2c4a6e;
    font-weight:500; color:#2c4a6e;
}

/* ─── CALENDARIO · vista giornaliera (gantt verticale) ──────── */
.cal-day-num { cursor:pointer; }
.cal-day-num:hover { color:#c0392b; }

.cal-day-allday { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 8px; border:1px solid #e0e0dc; background:#faf9f6; border-radius:5px; margin-bottom:8px; }
.cal-day-allday-lbl { font-size:var(--txt-xs); color:#8a877f; text-transform:uppercase; font-weight:600; margin-right:4px; }

.cal-day-grid { position:relative; border:1px solid #e0e0dc; border-radius:5px; background:#fff; overflow:visible; margin-left:2px; }
.cal-hour { position:absolute; left:0; right:0; height:0; border-top:1px solid #ededea; }
.cal-hour-lbl { position:absolute; top:-7px; left:4px; font-size:var(--txt-xs); color:#a7a49d; background:#fff; padding:0 2px; }
.cal-day-events { position:absolute; left:52px; right:8px; top:0; bottom:0; }
.cal-day-block { position:absolute; background:#dfe9e2; border:1px solid #b9d2c2; border-left:3px solid #2f7d52; border-radius:4px; padding:2px 5px; overflow:hidden; cursor:pointer; font-size:var(--txt-xs); line-height:1.25; }
.cal-day-block.pub { background:#e3e7f2; border-color:#bcc8e6; border-left-color:#3a59a8; }
.cal-day-block .cal-ora { font-weight:600; margin-right:4px; }
.cal-day-block-dur { display:block; color:#6b6862; }

/* ─── CALENDARIO · stato voce (data-stato) ──────────────────────
   in_lavorazione = accento arancio (riusa il border-left dei block);
   chiuso = barrato + muted (look "completato"). aperto = default. */
.cal-day-block[data-stato="in_lavorazione"] { border-left-color:#d68910; }
.cal-voce[data-stato="in_lavorazione"] { box-shadow:inset 3px 0 0 #d68910; }
.cal-voce[data-stato="chiuso"], .cal-day-block[data-stato="chiuso"] { opacity:.5; text-decoration:line-through; }
.cal-ag-voce[data-stato="chiuso"] { opacity:.55; }
.cal-ag-voce[data-stato="chiuso"] > span:not(.cal-dot) { text-decoration:line-through; }
.cal-ag-stato { font-weight:600; }
.cal-ag-stato.cal-st-in_lavorazione { color:#d68910; }
.cal-ag-stato.cal-st-chiuso { color:#7f8c8d; }

/* ─── CALENDARIO · voce selezionata ─────────────────────────── */
.cal-voce.cal-sel { outline:2px solid #c0392b; outline-offset:-1px; font-weight:600; }
.cal-ag-voce.cal-sel { background:#f6e2df; box-shadow:inset 3px 0 0 #c0392b; }
.cal-day-block.cal-sel { outline:2px solid #c0392b; z-index:5; }

/* ─── CALENDARIO · vista settimanale (gantt 7 giorni) ───────── */
.cal-week-row { display:flex; }
.cal-week-gutter { width:52px; flex:none; font-size:var(--txt-xs); color:#8a877f; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; text-align:right; }
.cal-week-head { margin-bottom:2px; }
.cal-week-dayhead { flex:1; text-align:center; cursor:pointer; padding:4px 2px; font-size:var(--txt-sm); color:#3a3833; border-radius:4px; }
.cal-week-dayhead:hover { background:#f0eee9; }
.cal-week-dayname { color:#8a877f; text-transform:uppercase; font-size:var(--txt-xs); margin-right:4px; }
.cal-week-dayhead.cal-today .cal-week-daynum { background:#c0392b; color:#fff; border-radius:50%; padding:0 5px; display:inline-block; min-width:18px; }
.cal-week-allday { border:1px solid #e0e0dc; border-radius:5px; background:#faf9f6; margin-bottom:6px; }
.cal-week-allday .cal-week-gutter { text-transform:uppercase; font-weight:600; }
.cal-week-allday-cell { flex:1; border-left:1px solid #eceae5; padding:3px; display:flex; flex-direction:column; gap:2px; min-height:24px; }
.cal-week-body { display:flex; position:relative; border:1px solid #e0e0dc; border-radius:5px; background:#fff; overflow:visible; }
.cal-week-gutter-col { width:52px; flex:none; position:relative; }
.cal-week-gutter-col .cal-hour-lbl { right:6px; left:auto; text-align:right; }
.cal-week-col { flex:1; position:relative; border-left:1px solid #eceae5; background-image:repeating-linear-gradient(to bottom, #ededea 0, #ededea 1px, transparent 1px, transparent var(--pxh)); }
.cal-week-col:first-child { border-left:0; }
.cal-week-col-today { box-shadow:inset 0 0 0 9999px rgba(192,57,43,0.045); }

/* ─── CALENDARIO · allegati ─────────────────────────────────── */
.cal-att-grid { display:flex; flex-direction:column; gap:4px; }
.cal-att { display:flex; align-items:center; gap:6px; }
.cal-att-link { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-decoration:none; color:inherit; padding:3px; border-radius:4px; }
.cal-att-link:hover { background:#f0eee9; }
.cal-att-ico { flex:none; width:34px; height:34px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; letter-spacing:.3px; }
.cal-att-name { font-size:var(--txt-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-att-name small { display:block; color:#8a877f; font-size:var(--txt-xs); font-weight:400; }
.cal-att-del { flex:none; }
.cal-att-ico.t-img    { background:#3a7d52; }
.cal-att-ico.t-pdf    { background:#c0392b; }
.cal-att-ico.t-doc    { background:#2f5aa8; }
.cal-att-ico.t-sheet  { background:#1f7a4d; }
.cal-att-ico.t-slide  { background:#cc7a1f; }
.cal-att-ico.t-archive{ background:#7a6a3a; }
.cal-att-ico.t-text   { background:#6b6862; }
.cal-att-ico.t-file   { background:#8a877f; }

/* ─── CALENDARIO · tab dettagli voce ────────────────────────── */
.cal-tabs { display:flex; gap:4px; margin:12px 0 8px; }
.cal-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 4px; border:1px solid #d4d1ca; background:#f4f2ee; border-radius:5px; cursor:pointer; font-size:var(--txt-xs); color:#3a3833; white-space:nowrap; overflow:hidden; }
.cal-tab:hover { background:#eceae5; }
.cal-tab.on { background:#fff; border-color:#c0392b; color:#c0392b; font-weight:600; }
.cal-tab svg { width:14px; height:14px; flex:none; }
.cal-tab-lbl { overflow:hidden; text-overflow:ellipsis; }
.cal-tab-n { flex:none; background:#d9d6cf; color:#3a3833; border-radius:9px; padding:0 5px; font-size:var(--txt-xs); font-weight:600; }
.cal-tab.on .cal-tab-n { background:#c0392b; color:#fff; }

/* ─── Drag & drop riordino (generico) ───────────────────────── */
.dnd-item { cursor:grab; }
.dnd-item:active { cursor:grabbing; }
.dnd-item.dnd-drag { opacity:.45; }
.dnd-handle { color:#a7a49d; cursor:grab; font-size:14px; line-height:1; user-select:none; letter-spacing:-2px; }
.dnd-item:hover .dnd-handle { color:#6b6862; }

/* ─── Testata documento: griglia a 12 colonne (span proporzionale) ─ */
.hdr-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:10px 12px; align-items:end; }
@media (max-width: 820px) { .hdr-grid .fld { grid-column: span 6 !important; } }
@media (max-width: 520px) { .hdr-grid .fld { grid-column: span 12 !important; } }

/* ─── Editor testata a griglia (preview drag&drop) ──────────── */
.hdr-grid.dnd-list { align-items:start; }
.hdr-edit-fld { border:1px solid #d4d1ca; border-radius:6px; padding:5px 7px; background:#fff; }
.hdr-edit-fld.dnd-drag { opacity:.45; }
.hdr-edit-top { display:flex; align-items:center; gap:5px; }
.hdr-edit-lbl { flex:1; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdr-edit-w { width:46px !important; padding:2px 3px !important; }
.hdr-edit-x { padding:0 6px; }
.hdr-edit-mock { height:16px; border:1px dashed #d9d6cf; border-radius:4px; margin-top:5px; background:#f7f6f3; }

/* ─── Testata: separatore "a capo" ──────────────────────────── */
/* Nel documento: occupa l'intera riga ma è invisibile, forza il wrap. */
.hdr-break { grid-column: 1 / -1; height: 0; }
/* Nell'editor: barra trascinabile orizzontale visibile. */
.hdr-edit-br { display:flex; align-items:center; gap:8px; padding:4px 8px; border:1px dashed #b9b6ae; border-radius:5px; background:#faf9f6; color:#8a877f; font-size:11px; }
.hdr-edit-br-lbl { flex:1; text-align:center; text-transform:uppercase; letter-spacing:1px; }

/* ═══ MENU "DOCK" (barra in basso) — utenti.menu_stile = 'dock' ═══════
   Alternativa alla sidebar. .app diventa colonna: contenuto sopra, dock
   sotto. Vedi resources/htmx/views/layout/dock.php + syncDockActive(). */
.app-dock { flex-direction: column; }

.dock-wrap {
    flex-shrink: 0;
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Fascia leggermente più scura della pagina + ombra verso l'alto: separa
       il dock dal contenuto e fa percepire che la pagina scorre "sotto" la
       barra (affordance di scrollabilità). */
    background: rgba(0, 0, 0, .055);
    border-top: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 -7px 16px -8px rgba(0, 0, 0, .22);
    /* z-index alto: il dock (e il suo popup, fixed) è chrome e deve stare
       sopra il contenuto — incluse le card .scheda-sticky (z-index 5) e i
       dropdown typeahead (30). Sotto il toast (99) e i dialog (top layer).
       NB: lo z-index qui crea un contesto di impilamento che "contiene"
       anche il popup fixed: per questo dev'essere alto, non 1. */
    position: relative; z-index: 40;
}

/* Notch "Facto": linguetta sopra il dock, comprime/espande la barra. */
.dock-notch {
    display: flex; align-items: center; gap: 7px;
    background: var(--sb-bg, #2c4a6e); color: var(--sb-fg, #cfe2f3);
    border: 1px solid rgba(255, 255, 255, .1); border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 4px 18px; margin-bottom: -1px;
    cursor: pointer; line-height: 1;
    box-shadow: 0 -5px 14px -7px rgba(0, 0, 0, .3);
    position: relative; z-index: 2;
}
.dock-notch:hover { filter: brightness(1.08); }
.dock-notch-logo {
    width: 18px; height: 18px; border-radius: 6px;
    background: #f1c40f; color: #2c4a6e;
    display: flex; align-items: center; justify-content: center;
}
.dock-notch-logo svg { width: 12px; height: 12px; }
.dock-notch b { font-size: 13px; }
.dock-notch-arr { font-size: 10px; opacity: .7; transition: transform .2s; }

/* Stato compresso: il dock sparisce, resta la sola notch flottante in basso. */
.app-dock.dock-collapsed .dock { display: none; }
.app-dock.dock-collapsed .dock-wrap {
    background: transparent; border-top: none; box-shadow: none; padding: 0 12px 8px;
}
.app-dock.dock-collapsed .dock-notch {
    border-radius: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.app-dock.dock-collapsed .dock-notch-arr { transform: rotate(180deg); }
.dock {
    width: 100%;
    max-width: 1180px;
    background: var(--sb-bg, #2c4a6e);
    color: var(--sb-fg, #cfe2f3);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}
.dock-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 0 4px; flex-shrink: 0; }
.dock-logo {
    width: 32px; height: 32px; border-radius: 10px;
    background: #f1c40f; color: #2c4a6e;
    display: flex; align-items: center; justify-content: center;
}
.dock-logo svg { width: 18px; height: 18px; }
.dock-brand b { font-size: 15px; line-height: 1; }

.dock-es { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.dock-es select {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: inherit; border-radius: 8px; padding: 6px 5px;
    font-size: 13px; font-weight: 700;
}

.dock-sep { width: 1px; height: 42px; background: rgba(255, 255, 255, .14); margin: 0 4px; flex-shrink: 0; }

.dock-apps {
    display: flex; align-items: center; gap: 2px;
    flex: 1; justify-content: safe center; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
    /* I popup dei gruppi sono position:fixed (posizionati via dockPopups() in
       page.php): lo scroll orizzontale qui NON li ritaglia. */
}
.dock-apps::-webkit-scrollbar { height: 6px; }
.dock-apps::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.dock-app { flex: 0 0 auto; }

.dock-app {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 8px 4px; border-radius: 12px; cursor: pointer;
    color: var(--sb-fg, #cfe2f3); opacity: .82;
    text-decoration: none; min-width: 58px;
}
.dock-app:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.dock-tile {
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(255, 255, 255, .10);
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s, background .12s;
}
.dock-tile .sb-icon { width: 26px; height: 26px; }
.dock-app:hover .dock-tile { transform: translateY(-3px); }
.dock-lab { font-size: 10.5px; font-weight: 600; white-space: nowrap; }

.dock-app.is-active { opacity: 1; }
.dock-app.is-active .dock-tile {
    background: #c0392b; color: #fff;
    box-shadow: 0 4px 14px rgba(192, 57, 43, .45);
}
.dock-app.is-active .dock-tile .sb-icon svg { filter: brightness(0) invert(1); }

.dock-chev { position: absolute; top: 2px; right: 8px; font-size: 11px; opacity: .6; }

/* popup verso l'alto delle sotto-voci (gruppi) */
.dock-pop {
    /* position:fixed + left/bottom impostati da dockPopups() in page.php, così
       lo scroll orizzontale della barra non ritaglia il popup. */
    position: fixed; left: 0; bottom: 0;
    transform: translateX(-50%) translateY(6px);
    /* Stesso stile (scuro) del dock, non più card bianca. */
    background: var(--sb-bg, #2c4a6e); color: var(--sb-fg, #cfe2f3);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    min-width: 300px; max-width: 460px; max-height: 62vh; overflow: auto; padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transition: opacity .14s, transform .14s; z-index: 60;
}
.dock-has-pop.open .dock-pop {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dock-pop::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--sb-bg, #2c4a6e);
}
.dock-pop-h {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--sb-fg, #cfe2f3); opacity: .6; padding: 4px 8px 8px; font-weight: 700;
}
/* Sotto-voci come tile verticali grandi, identiche allo stile del dock. */
.dock-pop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
}
.dock-sub {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; border-radius: 12px;
    color: var(--sb-fg, #cfe2f3); opacity: .82;
    text-decoration: none; cursor: pointer; min-width: 0;
}
.dock-sub:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.dock-sub-tile {
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(255, 255, 255, .10);
    display: flex; align-items: center; justify-content: center;
}
.dock-sub-tile .sb-icon { width: 26px; height: 26px; }
.dock-sub-lab {
    font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center;
    max-width: 100%;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dock-sub.is-active { opacity: 1; }
.dock-sub.is-active .dock-sub-tile {
    background: #c0392b; box-shadow: 0 4px 14px rgba(192, 57, 43, .45);
}
.dock-sub.is-active .dock-sub-tile .sb-icon svg { filter: brightness(0) invert(1); }

/* Popup "Recenti": lista di righe (badge tipo + descrizione + numero). */
.dock-reclist { display: flex; flex-direction: column; gap: 2px; min-width: 240px; }
.dock-rec {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    color: var(--sb-fg, #cfe2f3); opacity: .85;
    text-decoration: none; font-size: 12.5px;
}
.dock-rec:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.dock-rec-badge {
    font-size: 10px; font-weight: 700; flex-shrink: 0;
    background: rgba(255, 255, 255, .14); border-radius: 5px; padding: 2px 6px;
}
.dock-rec-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-rec-num { opacity: .7; flex-shrink: 0; }

.dock-util { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.dock-ibtn {
    background: rgba(255, 255, 255, .1); border: none; color: var(--sb-fg, #cfe2f3);
    min-width: 38px; height: 38px; border-radius: 11px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    text-decoration: none; font-size: 15px;
}
.dock-ibtn:hover { background: rgba(255, 255, 255, .2); }
.dock-ibtn svg { width: 18px; height: 18px; }
.dock-tenant {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    color: var(--sb-fg, #cfe2f3); border-radius: 8px; padding: 6px; font-size: 12px; max-width: 130px;
}
.dock-ava {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: flex; align-items: center; justify-content: center;
}
.dock-ava svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
    .dock-brand b, .dock-lab { display: none; }
    .dock-app { min-width: 50px; }
}

/* Dock — gestione "Accesso rapido": pulsanti ⚙/× sulle tile + drop zone. */
.dock-fav { position: relative; }
.dock-fav-edit, .dock-fav-del {
    position: absolute; top: 1px; width: 17px; height: 17px;
    border: none; border-radius: 50%; cursor: pointer;
    font-size: 10px; line-height: 1; padding: 0;
    background: rgba(0, 0, 0, .5); color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .12s;
}
.dock-fav-edit { left: 1px; }
.dock-fav-del  { right: 1px; }
.dock-fav:hover .dock-fav-edit, .dock-fav:hover .dock-fav-del { opacity: .92; }
.dock-fav-edit:hover, .dock-fav-del:hover { opacity: 1; background: #c0392b; }
.dock-fav-empty {
    grid-column: 1 / -1; text-align: center;
    font-size: 11px; opacity: .65; padding: 8px 6px; line-height: 1.3;
}
.dock-fav-drop.drag-over .dock-ibtn {
    outline: 2px dashed rgba(255, 255, 255, .65); outline-offset: 2px;
    background: rgba(255, 255, 255, .2);
}