:root {
  --lavoro: #2f5d8a;
  --personale: #3f7d5a;
  --up: #1f7a4d;
  --down: #b3261e;
  --flat: #5f6b76;
}

body { background: #f5f6f8; }
.login-page { min-height: 100vh; }

.area-lavoro { border-top: 3px solid var(--lavoro); }
.area-personale { border-top: 3px solid var(--personale); }
.area-lavoro .area-badge { background: var(--lavoro); }
.area-personale .area-badge { background: var(--personale); }

.area-card { transition: transform .12s ease, box-shadow .12s ease; border: 1px solid #dee2e6; }
.area-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.area-card-lavoro i { color: var(--lavoro); }
.area-card-personale i { color: var(--personale); }
.area-card h2 { color: #212529; }

.kpi { background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; padding: 1rem 1.1rem; height: 100%; }
.kpi .label { font-size: .8rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.kpi .value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
a.kpi { display: block; color: inherit; text-decoration: none; }
a.kpi:hover { border-color: #adb5bd; }

.card { border-color: #e3e6ea; }
.table-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: #6c757d; white-space: nowrap; }

.status-aumento { background: #dff3e8; color: var(--up); }
.status-calo { background: #fbe3e1; color: var(--down); }
.status-costante { background: #e9ecef; color: var(--flat); }
.status-nuovo { background: #dfeefb; color: #1d5b91; }
.status-perso { background: #3a3f44; color: #fff; }
.status-inattivo { background: #f1f3f5; color: #adb5bd; }
.trend-aumento { color: var(--up); }
.trend-calo { color: var(--down); }
.trend-costante { color: var(--flat); }
.pos { color: var(--up); }
.neg { color: var(--down); }

.stage-confermato { background: #e9ecef; color: #495057; }
.stage-produzione { background: #dfeefb; color: #1d5b91; }
.stage-pronto { background: #fff4d6; color: #7a5a00; }
.stage-consegnato { background: #dff3e8; color: var(--up); }
/* etichetta azienda · prodotto: il colore arriva da --tag (GC PVC blu, Sciuker legno marrone, Teknika viola…) */
.order-tag { display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1.5; padding: 0 .45rem;
  border-radius: 999px; white-space: nowrap; vertical-align: middle; color: var(--tag);
  background: color-mix(in srgb, var(--tag) 12%, #fff); border: 1px solid color-mix(in srgb, var(--tag) 35%, #fff); }
.stage-annullato { background: #3a3f44; color: #fff; }
.stage-late { background: #fbe3e1; color: var(--down); }
.customer-head { background: #fff; cursor: pointer; padding: .75rem 1rem; }
.customer-head:hover { background: #f8f9fa; }
.customer-head .chevron, .year-head .chevron, .compare-row .chevron { transition: transform .15s ease; color: #6c757d; }
.customer-head:not(.collapsed) .chevron, .year-head:not(.collapsed) .chevron,
.compare-row:not(.collapsed) .chevron { transform: rotate(90deg); }
/* agenda */
.appt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.fc-appt { white-space: normal; overflow: hidden; font-size: .78rem; line-height: 1.2; }
.appt-annullato .fc-appt { text-decoration: line-through; }
.fc-event.appt-readonly { border-style: dashed; opacity: .88; }  /* calendari in sola lettura: non si spostano */

/* finanze personali: tabella delle spese */
.fin-table-wrap { max-height: 78vh; }
.fin-table { font-size: .82rem; }
.fin-table thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 2; }
.fin-table .fin-first { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 12rem; white-space: nowrap; }
.fin-table thead .fin-first { z-index: 3; background: #f8f9fa; }
.fin-table td { min-width: 4.6rem; }
.fin-group { cursor: pointer; }
.fin-group > * { background: color-mix(in srgb, var(--grp) 10%, #fff) !important; font-weight: 600; }
.fin-group .fin-first { border-left: 4px solid var(--grp); }
.fin-plan { font-size: .72rem; color: #8a939c; line-height: 1.1; }
.fin-cell { color: inherit; text-decoration: none; border-bottom: 1px dotted #adb5bd; }
.fin-cell:hover { color: var(--bs-primary); }
.fin-over { background: #fdecec !important; }
.fin-now { box-shadow: inset 2px 0 0 #1f5fa8, inset -2px 0 0 #1f5fa8; }
.fin-unknown .fin-first { color: #c53030; font-weight: 600; }
.fin-total > * { background: #f8f9fa !important; font-weight: 600; border-top: 2px solid #dee2e6; }
.fin-saving > * { background: #f1f7f3 !important; }
.fin-slips > * { background: #f4f7fb !important; border-bottom: 2px solid #dee2e6; }
.fin-legend { display: inline-block; width: .9rem; height: .9rem; vertical-align: -2px; border: 1px solid #f5c2c2; }
.due-row.status-pagato { background: #f1f8f3; }
.due-row.status-in_ritardo { background: #fdecec; }
.due-row.status-in_scadenza { background: #fff8e6; }
.due-row.status-saltato { opacity: .6; }
.check-list li { padding: .3rem 0; border-bottom: 1px solid #f0f1f3; }
#a-fields:disabled { opacity: .75; }
.appt-fatto { opacity: .8; }
.fc .fc-toolbar-title { font-size: 1.15rem; }
/* mappa negozi */
#map { height: 68vh; min-height: 420px; }
.map-legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px #ced4da; vertical-align: -1px; }
.status-dot-aumento { background: #1e7b4b; } .status-dot-costante { background: #6c757d; } .status-dot-calo { background: #c0392b; }
.status-dot-nuovo { background: #1f5fa8; } .status-dot-perso { background: #7b2d26; } .status-dot-inattivo { background: #adb5bd; }
.map-popup { min-width: 220px; }
/* confronto fatturato / ordini */
.compare-row { gap: .5rem; }
.compare-row .c-name { flex: 1 1 280px; min-width: 0; }
.compare-row .c-num { flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; }
.compare-row .c-state { flex: 0 0 190px; text-align: right; }
.compare-orders td:first-child, .compare-orders th:first-child { padding-left: 2.5rem; }
.match-ok { background: #dff3e8; color: #1e7b4b; }
.match-less { background: #fdecc8; color: #8a5a00; }
.match-more { background: #dbeafe; color: #1f4f96; }
.cover-bar { height: 8px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.cover-bar > div { height: 100%; background: #2f5d8a; }
@media (max-width: 767px) { .compare-row .c-num, .compare-row .c-state { flex: 1 1 30%; text-align: left; } }
.year-head { padding-left: 1.5rem; background: #fcfcfd; }
.year-orders .order-row { padding-left: 2.5rem; }
.year-table td:first-child, .year-table th:first-child { padding-left: 2.5rem; }
.order-row { padding: .6rem 1rem .6rem 2.4rem; }
.order-row .order-num { min-width: 60px; }
.order-row .order-ref { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-detail { background: #fafbfc; border-top: 1px solid #eef0f2; }
.steps-inline { display: flex; gap: .25rem; max-width: 560px; }
.steps-inline .step { flex: 1; text-align: center; font-size: .75rem; color: #adb5bd; }
.steps-inline .step .bar { height: 6px; border-radius: 3px; background: #e3e6ea; margin-bottom: .25rem; }
.steps-inline .step.done { color: var(--up); } .steps-inline .step.done .bar { background: var(--up); }
.steps-inline .step.current { color: #2f5d8a; font-weight: 600; } .steps-inline .step.current .bar { background: #2f5d8a; }
.timeline-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; max-height: 260px; overflow: auto; }
.timeline-list li { padding: .25rem 0; border-top: 1px dashed #e3e6ea; }
.timeline-list li.is-change { font-weight: 600; color: #7a5a00; }
.timeline-list li.is-muted { color: #6c757d; }
.stage-bar { display: flex; gap: 2px; width: 120px; }
.stage-bar span { flex: 1; height: 4px; border-radius: 2px; background: #e3e6ea; }
.stage-bar span.on { background: #2f5d8a; }

.group-ritardo .card-header { background: #fbe3e1; color: var(--down); }
.group-settimana .card-header { background: #fff4d6; color: #7a5a00; }

.mail-body { white-space: pre-wrap; font-family: inherit; font-size: .9rem; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem; padding: 1rem; }
.lines-table input { min-width: 70px; }
.lines-table input.desc { min-width: 220px; }
.done-task { text-decoration: line-through; color: #adb5bd; }
.note-body { white-space: pre-wrap; }
.chart-box { position: relative; height: 280px; }