/* ====================================================================
   Basic LAB — Cool Slate design system.
   Struttura: token → reset Bootstrap → componenti → pattern di pagina
   → moduli (Agenti) → media query mobile / print.
   ==================================================================== */

/* ==== BASE ==== */
html, body {
  background: var(--dc-bg);
  color: var(--dc-text);
}

code,
kbd,
samp,
pre,
.dc-mono {
  font-family: var(--dc-font-mono);
  font-feature-settings: "zero", "ss01";
}
.dc-status-badge__date,
.dc-erp-table td.text-nowrap:first-child,
.dc-doc-lines td:first-child,
.dc-doc-lines td:last-child,
.dc-info-tile__value--mono {
  font-family: var(--dc-font-mono);
  font-feature-settings: "zero";
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  color: var(--dc-text);
}
a { color: var(--dc-primary); }
a:hover { color: var(--dc-primary); filter: brightness(.92); }

.dc-cat-card:hover,
.dc-config-tile:hover,
.dc-kpi-tile:hover { filter: none; }
hr { border-color: var(--dc-border); }
::selection { background: var(--dc-primary-soft); color: var(--dc-text); }

/* ==== LAYOUT (header + sidebar + main) ==== */
.dc-header__brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: var(--dc-text);
}
.dc-header__brand img {
  height: 28px;
  width: auto;
  display: block;
}
[data-bs-theme="dark"]  .basic-logo-dark  { display: none !important; }
[data-bs-theme="light"] .basic-logo-light { display: none !important; }

.dc-header__brand .basic-logo-dark  { display: none !important; }
.dc-header__brand .basic-logo-light { display: block !important; }

.dc-theme-toggle .icon-sun  { display: none; }
.dc-theme-toggle .icon-moon { display: inline; }
[data-bs-theme="dark"] .dc-theme-toggle .icon-sun  { display: inline; }
[data-bs-theme="dark"] .dc-theme-toggle .icon-moon { display: none; }

/* ----- Sidebar ----- */
/* Sidebar "console di controllo": titoli sezione tracked rigorosi
   (preceduti da un trattino tipo modulo amministrativo), voci attive
   marcate da una piping amber a tutto alto. */
.dc-sidebar__title::before {
  content: "";
  width: .9rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.dc-sidebar a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .58rem 1.5rem;
  color: var(--dc-sidebar-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: var(--dc-transition);
}
.dc-sidebar a i { font-size: 1rem; opacity: .8; width: 1.1rem; text-align: center; }

/* ----- Sidebar gruppi espandibili (BRT / GLS) -----*/
.dc-sidebar-group > summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .58rem 1.5rem;
  color: var(--dc-sidebar-text);
  font-size: .9rem;
  font-weight: 600;
  border-left: 3px solid transparent;
  cursor: pointer;
  list-style: none; /* Firefox */
  user-select: none;
  transition: var(--dc-transition);
}
.dc-sidebar-group > summary::-webkit-details-marker { display: none; }
.dc-sidebar-group > summary::marker { content: ""; }
.dc-sidebar-group > summary:hover {
  color: var(--dc-sidebar-text-strong);
  background: var(--dc-sidebar-active-bg);
}
.dc-sidebar-group__label {
  flex: 1;
  letter-spacing: .04em;
}
.dc-sidebar-group[open] > summary .dc-sidebar-group__chevron {
  transform: rotate(90deg);
  opacity: .85;
}
.dc-sidebar-group[open] > summary {
  color: var(--dc-sidebar-text-strong);
}
.dc-sidebar-group__items a i { font-size: .9rem; }

/* ----- Main ----- */
.dc-page-title code {
  font-family: var(--dc-font-mono);
  font-size: .92em;
  font-weight: 600;
  background: var(--dc-bg-soft);
  border: 1px solid var(--dc-border-strong);
  padding: 0 .35em;
  border-radius: 3px;
}

/* ==== COMPONENTI: card, table, form, button ==== */

.table {
  color: var(--dc-text);
  margin: 0;
}
.table > :not(caption) > * > * { background: transparent; color: inherit; }
.table thead th {
  background: var(--dc-card-header-bg);
  color: var(--dc-text-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: var(--dc-letter-tracked);
  font-weight: 600;
  border-bottom: 2px solid var(--dc-border-strong);
  padding: .65rem .75rem .5rem;
}
.table.table-sm > * > tr > :first-child { padding-left: 1.25rem; }
.table.table-sm > * > tr > :last-child  { padding-right: 1.25rem; }
.table tbody tr {
  border-color: var(--dc-border);
  transition: var(--dc-transition);
}
.table tbody tr:hover > * {
  background: var(--dc-table-hover) !important;
  color: var(--dc-text);
}
.table > :not(caption) > * > * { border-color: var(--dc-border); }
.table tbody tr.dc-row-hl > * {
  background: color-mix(in srgb, var(--dc-warning) 16%, transparent);
}

.table tfoot tr.dc-tfoot-plain > th,
.table tfoot tr.dc-tfoot-plain > td {
  background: transparent;
  border-top: 1px solid var(--dc-border);
}

.form-label.small,
label.form-label.small {
  font-size: .66rem;
}
.form-check-input { background-color: var(--dc-input-bg); border-color: var(--dc-border-strong); }

.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-primary) 30%, transparent);
  outline: none;
}

.btn-primary:hover {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
}
.btn-success {
  background: color-mix(in srgb, var(--dc-success) 78%, #fff);
  border-color: color-mix(in srgb, var(--dc-success) 85%, #fff);
  color: #1c1917;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--dc-success) 35%, transparent);
}
.btn-danger:hover {
  background: var(--dc-danger);
  border-color: var(--dc-danger);
  color: #fff;
}

[data-bs-theme="dark"] .btn-primary {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-primary:hover {
  background: color-mix(in srgb, var(--dc-primary) 88%, #fff);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
  background: var(--dc-primary);
  color: #0a0908;
  border-color: var(--dc-primary);
}

[data-bs-theme="dark"] .btn-warning {
  background: var(--dc-warning);
  border-color: var(--dc-warning);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-warning:hover {
  background: color-mix(in srgb, var(--dc-warning) 88%, #fff);
  border-color: color-mix(in srgb, var(--dc-warning) 88%, #fff);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-success:hover {
  background: var(--dc-success);
  border-color: var(--dc-success);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-danger {
  background: var(--dc-danger);
  border-color: var(--dc-danger);
  color: #0a0908;
}
[data-bs-theme="dark"] .btn-danger:hover {
  background: color-mix(in srgb, var(--dc-danger) 88%, #fff);
  border-color: color-mix(in srgb, var(--dc-danger) 88%, #fff);
  color: #0a0908;
}

/* Badge / chip riusabili */

/* Loghi corriere usati nelle tabelle / nei titoli */
.dc-carrier-logo {
  display: inline-block;
  height: 26px;
  width: auto;
  vertical-align: middle;
}

/* Chip identità vettore: sostituisce il logo nelle tabelle (BRT/GLS) e dà una
   pill neutra agli altri corrieri. Pill compatto in mono, bianco su brand
   attenuato. Senza modificatore usa il colore "altro" (slate). */
.dc-carrier-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-carrier-other);
  color: #fff;
  font-family: var(--dc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
}
.dc-carrier-chip--gls { background: var(--dc-carrier-gls); }
.dc-carrier-chip--brt { background: var(--dc-carrier-brt); }

/* Card "carrier" che apre l'elenco BRT/GLS */
.dc-carrier-card {
  --dc-card-accent: var(--dc-primary);
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--dc-text);
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 1.25rem;
  box-shadow: var(--dc-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
  height: 100%;
  overflow: hidden;
}
.dc-carrier-card--brt { --dc-card-accent: #e30613; }
.dc-carrier-card--gls { --dc-card-accent: #061ab1; }
.dc-carrier-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--dc-card-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.dc-carrier-card:hover::after {
  transform: scaleX(1);
}
.dc-carrier-card:focus-visible {
  outline: 2px solid var(--dc-card-accent);
  outline-offset: 3px;
}
.dc-carrier-card__foot {
  margin-top: .75rem;
  display: flex;
  justify-content: flex-end;
}
.dc-carrier-card__cta {
  color: var(--dc-text-muted);
  font-weight: 500;
  transition: color .25s ease, transform .25s ease;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dc-carrier-card__cta i {
  display: inline-block;
  transition: transform .25s ease;
}
.dc-carrier-card:hover .dc-carrier-card__cta {
  color: var(--dc-card-accent);
}
.dc-carrier-card:hover .dc-carrier-card__cta i {
  transform: translateX(4px);
}

/* ----- Carrier card "consolidata" (header + lista sedi cliccabili) ----- */

.dc-carrier-sedi__head > span:nth-child(2),
.dc-carrier-sedi__head > span:nth-child(3) {
  justify-self: end;
}

.dc-carrier-sede:last-child { border-bottom: none; }
.dc-carrier-sede__name i {
  color: var(--dc-card-accent);
  font-size: .95rem;
}
.dc-carrier-sede:hover .dc-carrier-sede__chevron {
  color: var(--dc-card-accent);
  opacity: 1;
  transform: translateX(3px);
}

/* ==== GRAFICI ==== */

/* Gruppi di filtro nei form di ricerca (es. erp "Cerca documenti"):
   etichetta di sezione + separatore verticale tra gruppi. Riusabili su tutte
   le card-filtro che adottano lo schema "raggruppato". */
.dc-filter-grp-label {
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--dc-text-muted);
  margin-bottom: 6px;
}
/* Header di sezione dentro un form denso (testata reso): label in grassetto a
   SINISTRA, con la linea che la prolunga a destra (flex + pseudo-elemento). */
.dc-form-section {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--dc-text-muted);
}
.dc-form-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--dc-border);
}
.dc-filter-grp--bordered {
  border-left: 1px solid var(--dc-border);
  padding-left: 16px;
}
@media (max-width: 767px) {
  .dc-filter-grp--bordered { border-left: 0; padding-left: 0; }
}

/* Form filtro date dashboard */
.dc-date-filter {
  display: inline-flex;
  align-items: flex-end;
  gap: .55rem;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: .65rem .85rem;
  box-shadow: var(--dc-shadow);
}
.dc-date-filter__field { display: flex; flex-direction: column; min-width: 0; }
.dc-date-filter__field label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dc-text-muted);
  font-weight: 600;
  margin-bottom: .2rem;
}
/* Wrapper input con icona calendario */
.dc-date-input input:focus,
.dc-date-input input.form-control:focus,
.dc-date-input .flatpickr-input + input.form-control:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-primary) 18%, transparent);
  background: var(--dc-input-bg);
  color: var(--dc-text);
}
.dc-date-filter .btn { height: 36px; }

/* Switch maggiorato, alto come .form-control-sm (≈31px) */
.dc-switch-lg.form-switch {
  padding-left: 3.25em;
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: calc(1.5em + .5rem + 2px);
  margin-bottom: 0;
}
.dc-switch-lg.form-switch .form-check-input {
  width: 2.75em;
  height: 1.65em;
  margin-top: 0;
  margin-left: -3.25em;
  cursor: pointer;
  flex-shrink: 0;
}
.dc-switch-lg .form-check-label {
  cursor: pointer;
  line-height: 1.25;
}

/* Color input: la swatch riempie il box, niente cornice bianca interna.
   `input.` alza la specificità per battere .form-control/.form-control-sm
   (entrambe `padding: 0 12px`, righe 4807/4835); resta sotto la regola del
   modal agenda (#agendaEventModal …) che mantiene il suo padding dedicato. */
input.form-control-color { padding: 2px; }
input.form-control-color::-webkit-color-swatch-wrapper { padding: 0; }
input.form-control-color::-webkit-color-swatch { border: 0; border-radius: 6px; }
input.form-control-color::-moz-color-swatch { border: 0; border-radius: 6px; }

.dc-date-input--sm input,
.dc-date-input--sm input.form-control,
.dc-date-input--sm .flatpickr-input + input.form-control {
  height: auto;
  padding: .25rem .5rem .25rem 1.9rem;
  font-size: .875rem;
  line-height: 1.5;
  min-height: calc(1.5em + .5rem + 2px);
}
.dc-date-input--sm > i.bi-calendar3 {
  left: .55rem;
  font-size: .85rem;
}
@media (max-width: 767.98px) {
  .dc-date-filter { width: 100%; flex-wrap: wrap; }
  .dc-date-filter__field { flex: 1 1 45%; }
  .dc-date-input input { min-width: 0; width: 100%; }
}

/* ----- Tematizzazione flatpickr ----- */
.flatpickr-calendar {
  background: var(--dc-bg-elev) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius) !important;
  box-shadow: 0 24px 50px -16px rgba(15, 23, 42, .35),
              0 4px 12px -4px rgba(15, 23, 42, .15) !important;
  font-family: inherit !important;
  padding: .35rem !important;
  width: 320px !important;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--dc-border) !important; }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--dc-border) !important; }
.flatpickr-months {
  background: transparent !important;
  padding: .5rem .35rem .25rem !important;
  align-items: center;
}
.flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: var(--dc-text) !important;
  height: 38px;
  border-radius: var(--dc-radius-sm);
  overflow: hidden;
}
.flatpickr-current-month {
  font-size: .98rem !important;
  font-weight: 600 !important;
  padding-top: 6px !important;
  color: var(--dc-text) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: var(--dc-text) !important;
  font-weight: 600 !important;
  border-radius: 6px;
  padding: 2px 4px !important;
  cursor: pointer;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--dc-bg-soft) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background: var(--dc-bg-elev) !important;
  color: var(--dc-text) !important;
}
.flatpickr-current-month input.cur-year {
  color: var(--dc-text) !important;
  font-weight: 600 !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: var(--dc-text-muted) !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: var(--dc-text-muted) !important; }
.flatpickr-prev-month, .flatpickr-next-month {
  fill: var(--dc-text-muted) !important;
  color: var(--dc-text-muted) !important;
  border-radius: 8px;
  height: 32px !important;
  width: 32px !important;
  padding: 6px !important;
  top: 6px !important;
  transition: var(--dc-transition);
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
  background: var(--dc-bg-soft) !important;
  fill: var(--dc-primary) !important;
  color: var(--dc-primary) !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: inherit !important; }

.flatpickr-weekdays { background: transparent !important; padding: .25rem 0; }
.flatpickr-weekday {
  background: transparent !important;
  color: var(--dc-text-muted) !important;
  font-weight: 600 !important;
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.flatpickr-days { padding: .15rem; }
.dayContainer { padding: 2px !important; gap: 2px; }
.flatpickr-day {
  color: var(--dc-text) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: .85rem !important;
  font-weight: 500;
  height: 36px !important;
  line-height: 36px !important;
  max-width: 38px;
  transition: background .15s ease, color .15s ease;
}
.flatpickr-day:hover {
  background: var(--dc-bg-soft) !important;
  color: var(--dc-text) !important;
}
.flatpickr-day.today {
  background: transparent !important;
  border: 1.5px solid var(--dc-primary) !important;
  color: var(--dc-primary) !important;
}
.flatpickr-day.today:hover { background: color-mix(in srgb, var(--dc-primary) 14%, transparent) !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
  background: var(--dc-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--dc-primary) 80%, transparent);
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: color-mix(in srgb, var(--dc-primary) 18%, transparent) !important;
  color: var(--dc-text) !important;
  box-shadow: none !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--dc-text-muted) !important;
  opacity: .45;
}
.flatpickr-day.flatpickr-disabled:hover { background: transparent !important; }

/* L'input "alt" generato da flatpickr eredita lo stile da .dc-date-input input */
.dc-date-input input.flatpickr-input {
  /* L'input nascosto: lo sovrascriviamo per sicurezza */
  background: transparent;
}

/* ----- Filtro pillola sedi (sostituisce nav-tabs) ----- */
.dc-loc-filter a.active i { color: #ffffff; }

/* ==== TIMELINE EVENTI ==== */
.dc-timeline__item--current .dc-timeline__time {
  color: var(--dc-primary);
  font-weight: 700;
}
.dc-timeline__item--current .dc-timeline__desc { font-weight: 600; }
.dc-timeline__dot.dc-timeline__dot--success {
  border-color: var(--dc-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-success) 18%, transparent);
}
.dc-timeline__dot.dc-timeline__dot--success-soft {
  border-color: color-mix(in srgb, var(--dc-success) 70%, var(--dc-bg-elev));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-success) 14%, transparent);
}
.dc-timeline__dot.dc-timeline__dot--warning {
  border-color: var(--dc-warning);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-warning) 20%, transparent);
}
.dc-timeline__dot.dc-timeline__dot--danger {
  border-color: var(--dc-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-danger) 20%, transparent);
}
.dc-timeline__dot.dc-timeline__dot--secondary {
  border-color: var(--dc-border-strong);
  box-shadow: none;
}
.dc-timeline__meta i { font-size: .9em; margin-right: .15rem; }
.dc-timeline__empty i { font-size: 1.6rem; opacity: .55; display: block; margin-bottom: .35rem; }

/* ==== RESPONSIVE ==== */
/* Il blocco @media che collassa shell + sidebar-drawer (≤991.98px) è spostato
   DOPO la sezione "APP SHELL": deve seguire le definizioni base di
   .dc-shell/.dc-main/.dc-sidebar, altrimenti — a pari specificità — quelle
   vincono e annullano le override mobile. */
.dc-sidebar-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  color: var(--dc-text);
}
@media (max-width: 991.98px) {
  .dc-sidebar-toggle { display: inline-flex; }
}

/* Paginazione condivisa (erp.php / brt.php / gls.php) — resa compatta, moderna */
.dc-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .75rem 1.25rem;
  background: var(--dc-bg-soft);
  border-top: 1px solid var(--dc-border);
}
.dc-pagination__list.pagination {
  gap: .25rem;
  margin: 0;
}
.dc-pagination__list .page-item .page-link {
  min-width: 2rem;
  height: 2rem;
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-sm);
  border: 1px solid var(--dc-border);
  color: var(--dc-text);
  background: var(--dc-bg-elev);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  transition: var(--dc-transition);
}
.dc-pagination__list .page-item .page-link i.bi { font-size: .9rem; line-height: 1; }
.dc-pagination__list .page-item .page-link:hover {
  background: var(--dc-primary-soft);
  border-color: var(--dc-primary);
  color: var(--dc-primary);
}

/* Tabella elenco Documenti ERP — più aria laterale per migliorare la lettura */
.dc-erp-table thead th,
.dc-erp-table tbody td {
  padding-top: .6rem;
  padding-bottom: .6rem;
  padding-left: .75rem;
  padding-right: .75rem;
  font-size: 14px;
}

/* Breadcrumb — navigazione gerarchica compatta. */
.dc-breadcrumb {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  font-family: var(--dc-font-mono);
  font-feature-settings: "zero";
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--dc-text-muted);
}
.dc-breadcrumb a {
  color: var(--dc-text-muted);
  text-decoration: none;
  padding: .15rem .35rem;
  border-radius: var(--dc-radius-sm);
  transition: background .15s ease, color .15s ease;
}
.dc-breadcrumb a:hover {
  color: var(--dc-primary);
  background: color-mix(in srgb, var(--dc-primary) 8%, transparent);
}
.dc-breadcrumb i.bi-chevron-right {
  font-size: .65rem;
  opacity: .5;
}
.dc-breadcrumb__current {
  color: var(--dc-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--dc-letter-tracked);
}

/* Section title — eyebrow uppercase tracked usato per separare blocchi
   di tile KPI (es. carrier_invoice_line.php). */
.dc-section-title {
  font-family: var(--dc-font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
}
.dc-section-title i.bi { font-size: .9rem; opacity: .85; }

/* Pill mini per la sigla BRT (es. "W", "f") nelle tile delle voci di costo. */
.dc-cost-code-pill {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 .3rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--dc-primary) 12%, var(--dc-bg-elev));
  color: var(--dc-primary);
  border-radius: var(--dc-radius-sm);
  margin-right: .25rem;
}

.dc-cell-cliente { width: 100%; max-width: 0; }
.dc-cell-cliente > .text-truncate { display: block; max-width: 100%; }
/* Mobile: il trucco max-width:0 nella tabella scrollabile (.table-responsive)
   schiaccerebbe la colonna Cliente a ~zero → min-width così il nome resta
   leggibile; la tabella scorre in orizzontale per il resto. */
@media (max-width: 767.98px) {
  .dc-cell-cliente { min-width: 160px; }
}

/* Corpo documento ERP: righe articolo con taglie in pill */
.dc-doc-lines thead th {
  background: var(--dc-bg-soft);
  color: var(--dc-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  padding: .65rem 1rem;
}
.dc-doc-lines tbody td {
  padding: .7rem 1rem;
}
.dc-doc-lines tbody tr + tr td {
  border-top: 1px dashed var(--dc-border);
}
.dc-doc-lines code {
  color: var(--dc-text-muted);
  background: transparent;
  padding: 0;
  font-size: .82rem;
}

.dc-doc-thumbs {
  display: flex;
  gap: .25rem;
}
.dc-doc-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--dc-radius-sm);
  border: 1px solid var(--dc-border-strong);
  background: var(--dc-bg-elev);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dc-doc-thumb:hover {
  transform: scale(1.08);
  box-shadow: var(--dc-shadow);
}

.dc-size-pill > span {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
}
.dc-size-pill > span + span {
  border-left: 1px solid var(--dc-border);
}
/* Gap più ampio fra pill così ogni blocco resta ben distinto */
.dc-doc-lines .d-flex.flex-wrap { gap: .6rem !important; }

/* Status badge spedizioni (BRT/GLS) — colorato per stato.*/

.dc-status-badge__date {
  font-weight: 400;
  opacity: .75;
  letter-spacing: 0;
}

/* Palette badge: tinta soft + colore testo che fa anche da LED. */
.dc-status-badge--danger       { background: color-mix(in srgb, var(--dc-danger) 14%,  var(--dc-bg-elev)); color: var(--dc-danger);   border-color: color-mix(in srgb, var(--dc-danger) 35%,  transparent); }

.dc-status-select { position: relative; }
.dc-status-select__toggle {
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.5;
  min-height: calc(1.5em + .5rem + 2px);
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.dc-status-select__toggle.dropdown-toggle::after { display: none; }
.dc-status-select__shortcuts a {
  color: var(--bs-primary, #0d6efd);
  text-decoration: none;
  font-weight: 500;
}
.dc-status-select__shortcuts a:hover { text-decoration: underline; }
.dc-status-select__list { max-height: 18rem; overflow-y: auto; padding: .25rem 0; }
.dc-status-select__item .form-check-input { margin: 0; flex: 0 0 auto; }
.dc-status-select__label { flex: 1 1 auto; line-height: 1.25; }

.btn-sm {
  min-height: calc(.875rem * 1.5 + .5rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:not(.btn-sm):not(.btn-lg) {
  min-height: calc(1rem * 1.5 + .75rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scrollbar sottile */
* { scrollbar-width: thin; scrollbar-color: var(--dc-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--dc-border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Animazione "spin" usata dall'icona di refresh durante l'aggiornamento
   batched delle spedizioni: rotazione continua, ripristinata a fine sync */
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-spin { animation: dc-spin 1s linear infinite; transform-origin: center; display: inline-block; }

/* Quill editor "Corpo email" — vincola dimensioni dentro la card del
   form richiesta nota debito. Senza questi limiti Quill cresce
   illimitato in verticale (un body lungo "esce" dalla card) e il
   toolbar usa font diverso dal resto del form. */
.dc-mailto-form .ql-toolbar.ql-snow,
.dc-mailto-form .ql-container.ql-snow {
  border-color: var(--dc-border);
}
.dc-mailto-form .ql-container.ql-snow {
  font-family: var(--dc-font-sans);
  font-size: .9rem;
  /* Limita anche il container esterno: senza questo Quill cresce in
     altezza in modo arbitrario (osservato 430px con editor 360px)
     spingendolo oltre la card-body. */
  height: 280px;
  max-height: 360px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.dc-mailto-form .ql-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--dc-bg-elev);
}
.dc-mailto-form .ql-editor p { margin-bottom: .15rem; }

/* Render di note rich-text salvate da Quill (svincoli, resi…): i <p> di
   Quill hanno il margine browser di default — lo togliamo per non gonfiare
   i box compatti. Ultimo paragrafo senza margine sotto. */
.dc-rich-note > :first-child { margin-top: 0; }
.dc-rich-note > :last-child { margin-bottom: 0; }
.dc-rich-note p { margin-bottom: .35rem; }

/* Quill dentro una colonna flex Bootstrap (.row > .col): la regola di
   Quill `.ql-container{height:100%}`, in un flex item con altezza
   "definita" dallo stretch, fa esplodere l'altezza dell'editor che finisce
   per coprire gli elementi sottostanti. Forziamo height:auto sul container
   e spostiamo il min-height sull'area di editing. */
#reasonNoteEditor.ql-container,
#manualStatusNotesEditor.ql-container,
#internalNoteEditor.ql-container { height: auto; }
#reasonNoteEditor .ql-editor { min-height: 110px; }
#manualStatusNotesEditor .ql-editor { min-height: 140px; }
#internalNoteEditor .ql-editor { min-height: 110px; }

/* ============================================================
   Calcolo rimborso (returns/edit) — toggle "colpa nostra" +
   breakdown stile ricevuta.
   ============================================================ */
/* Stato attivo: errore BASIC → cornice + wash arancio, nota evidenziata. */
.dc-refund-toggle:has(#ourFault:checked) {
  border-color: var(--dc-warning);
  background: rgba(234, 88, 12, .08);
}
.dc-refund-toggle:has(#ourFault:checked) .dc-refund-toggle__note {
  color: var(--dc-warning);
}

.dc-refund__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--dc-border);
}
.dc-refund__row:last-child { border-bottom: 0; }

/* Riga con importo a sottrarre (fee, trasporto). */
.dc-refund__field input:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}

/* Link "ripristina calcolo automatico" sotto la voce editata. */
.dc-refund__reset {
  display: inline-block;
  margin-top: .3rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .72rem;
  font-weight: 600;
  color: var(--dc-danger);
  cursor: pointer;
}
.dc-refund__reset:hover {
  color: var(--dc-danger);
  text-decoration: underline;
}

/* Riga finale: rimborso al cliente. */
.dc-refund__row--total {
  align-items: center;
  margin-top: .15rem;
  padding: .85rem 0 .65rem;
  border-top: 2px solid var(--dc-primary);
  border-bottom: 0;
}
.dc-refund__row--total .dc-refund__label {
  font-weight: 700;
  font-size: .95rem;
}

/* Codice modello nelle tabelle reso: monospace ma colore testo neutro,
   non il fucsia di default di Bootstrap per <code>. */
.dc-modello {
  color: var(--dc-text);
}

.dc-kpi-grid {
  display: grid;
  /* auto-fit: i tile si adattano al loro numero e riempiono la larghezza.
     Le pagine con pochi KPI larghi (4 tile con valori €, es. loss_report) non
     restano schiacciate con lo spazio vuoto a destra. Il max() dentro minmax
     impone però un tetto di 5 tile per riga (il min-track non scende mai sotto
     1/5 della riga): le dashboard spedizioni con ~10 status vanno su 2 righe
     da 5 invece di schiacciarsi in una. Il 2rem nel calc = 4 gap × .5rem: se
     cambi il gap qui sotto aggiorna anche il calc, o il tetto slitta. Il floor
     a 150px è una safety net per container stretti (sotto i 1200px governano
     comunque le media query). */
  grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 2rem) / 5)), 1fr));
  gap: .5rem;
}
@media (max-width: 1199.98px) {
  .dc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .dc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dc-kpi-tile:hover,
.dc-kpi-tile:focus-visible {
  text-decoration: none;
  color: var(--dc-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
.dc-kpi-tile:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}


/* Variant accent per status class. Border-left + value color
   richiamano la stessa palette degli status badge. */
.dc-kpi-tile--success      .dc-kpi-tile__value,
.dc-kpi-tile--success      .dc-kpi-tile__icon { color: var(--dc-success); opacity: 1; }
.dc-kpi-tile--success-soft .dc-kpi-tile__value,
.dc-kpi-tile--success-soft .dc-kpi-tile__icon { color: color-mix(in srgb, var(--dc-success) 80%, var(--dc-text)); opacity: 1; }
.dc-kpi-tile--warning      .dc-kpi-tile__value,
.dc-kpi-tile--warning      .dc-kpi-tile__icon { color: var(--dc-warning); opacity: 1; }
.dc-kpi-tile--danger       .dc-kpi-tile__value,
.dc-kpi-tile--danger       .dc-kpi-tile__icon { color: var(--dc-danger); opacity: 1; }
.dc-kpi-tile--info         .dc-kpi-tile__value,
.dc-kpi-tile--info         .dc-kpi-tile__icon { color: var(--dc-info); opacity: 1; }

@keyframes dc-reveal-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dc-reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dc-pulse-dot {
  /* Pulsa solo il pallino "attenzione": espande un alone semitrasparente. */
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc-danger) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--dc-danger) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc-danger) 0%, transparent); }
}

.dc-main > * {
  animation: dc-reveal-up .42s cubic-bezier(.2, .7, .2, 1) backwards;
}
.dc-main > *:nth-child(1) { animation-delay: .00s; }
.dc-main > *:nth-child(2) { animation-delay: .07s; }
.dc-main > *:nth-child(3) { animation-delay: .14s; }
.dc-main > *:nth-child(4) { animation-delay: .21s; }
.dc-main > *:nth-child(5) { animation-delay: .28s; }
.dc-main > *:nth-child(6) { animation-delay: .35s; }
.dc-main > *:nth-child(7) { animation-delay: .42s; }
.dc-main > *:nth-child(n+8) { animation-delay: .49s; }

.dc-status-badge--danger { position: relative; }
.dc-status-badge--danger::before {
  animation: dc-pulse-dot 1.6s ease-out infinite;
}

.btn-primary {
  background-image: linear-gradient(
    100deg,
    transparent 35%,
    color-mix(in srgb, #fff 22%, transparent) 50%,
    transparent 65%);
  background-size: 220% 100%;
  background-position: -200% 0;
  background-color: var(--dc-primary);
  background-repeat: no-repeat;
  transition: background-position .9s ease, transform .15s ease, box-shadow .15s ease;
  background: color-mix(in srgb, var(--dc-primary) 80%, #fff);
  border-color: color-mix(in srgb, var(--dc-primary) 85%, #fff);
  color: #fff;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--dc-primary) 35%, transparent);
}
.btn-primary:active,
.btn-success:active,
.btn-danger:active {
  /* "stamp pressed": comprime l'ombra hard sotto */
  transform: translateY(1px);
  box-shadow: 0 0 0 0 transparent;
}

/* ----- Carrier card: rialzo discreto on hover ----- */
.dc-carrier-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dc-carrier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dc-shadow-lg);
  color: var(--dc-text);
  filter: none;
  border-color: color-mix(in srgb, var(--dc-card-accent) 55%, var(--dc-border));
}

@media (prefers-reduced-motion: reduce) {
  .dc-main > *,
  .dc-sidebar { animation: none !important; }
  .dc-status-badge--danger::before { animation: none !important; }
  .btn-primary { animation: none !important; background-image: none; }
  .dc-spin { animation: none !important; }
}

/* ============================================================
   Print stylesheet
   Pensato per le pagine "documento": erp_document.php (DDT/fattura
   ERP) e carrier_invoice.php (fattura corriere). Quando l'admin
   stampa o salva PDF, vogliamo:
     - niente header app, sidebar, azioni, palette trigger
     - colori ad alto contrasto, neri/grigi
     - tabelle con bordo netto, no zebra
     - footer auto con timestamp + URL canonica
     - page-break sensato sui blocchi card grossi
   ============================================================ */
@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    background-image: none !important;
  }
  body {
    font-family: var(--dc-font-sans);
    font-size: 10.5pt;
    line-height: 1.4;
  }

  /* Nascondi tutto il chrome dell'app */
  .dc-header,
  .dc-sidebar,
  .dc-sidebar-toggle,
  .dc-theme-toggle,
  .dc-toast-stack,
  .dc-page-header > div:last-child,  /* azioni a destra dell'header pagina */
  .btn,
  .alert button.btn-close,
  .pagination,
  nav.dc-breadcrumb,
  [data-bs-toggle],
  form,
  .modal {
    display: none !important;
  }

  /* Layout flat: no shell flex, padding zero */
  .dc-shell { display: block !important; }
  .dc-main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Card: niente shadow né background, solo bordo sottile per
     delimitare le sezioni del documento. */
  .card,
  .dc-info-tile {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  /* Tabelle: no zebra, bordo netto, font ridotto per stare in pagina */
  table {
    background: #fff !important;
    border-collapse: collapse !important;
    width: 100%;
    font-size: 9.5pt;
  }
  table th,
  table td {
    background: #fff !important;
    border: 1px solid #ccc !important;
    padding: 4pt 6pt !important;
  }
  table thead th {
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .table-hover > tbody > tr:hover { background: #fff !important; }

  /* Status badge: forza i colori in stampa per non perdere semantica.
     Print color adjust forza il browser a stampare i bg colorati. */
  .dc-status-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid currentColor !important;
  }

  /* Page header: titolo + sottotitolo restano, allineato a sinistra */
  .dc-page-header {
    display: block !important;
    border-bottom: 2px solid #000;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
  }
  .dc-page-title { font-size: 16pt; font-weight: 700; margin: 0; }
  .dc-page-subtitle { font-size: 10pt; color: #444 !important; margin-top: 2pt; }

  /* Link senza underline per pulizia (ma evidenzia il code/tracking) */
  a { color: #000 !important; text-decoration: none !important; }
  code { background: transparent !important; color: #000 !important; }

  /* Page breaks sensati */
  h1, h2, h3 { page-break-after: avoid; }
  table, .card { page-break-inside: avoid; }

  /* Footer auto in coda alla pagina con timestamp + URL.
     Sfrutta CSS counters per numerare le pagine (Chrome/Edge support). */
  @page {
    margin: 18mm 14mm 18mm 14mm;
  }
  /* @page :footer non è supportato da molti browser; il footer reale
     va aggiunto via PHP nella pagina (es. <footer class="dc-print-footer">).
     Qui stiliamo solo se presente. */
  .dc-print-footer {
    margin-top: 16pt;
    padding-top: 6pt;
    border-top: 1px solid #999;
    font-size: 8.5pt;
    color: #555 !important;
    display: flex !important;
    justify-content: space-between;
  }
}

/* ============================================================
   Microtypography numerica
   IBM Plex Sans supporta:
     "tnum" (tabular nums)  → cifre stessa larghezza, allineamento
                              verticale perfetto in colonna
     "zero" (slashed zero)  → zero barrato, distingue 0 da O / 8 / D
     "ss03" "cv11"          → stylistic set già attivi globalmente
   ============================================================ */
table th,
table td,
code,
.dc-num,
.dc-tabular,
.dc-info-tile__value,
.dc-status-badge__date,
input[type="number"],
input[type="text"][inputmode="numeric"] {
  font-feature-settings: "tnum" 1, "zero" 1, "ss03", "cv11";
  font-variant-numeric: tabular-nums slashed-zero;
}
/* IBM Plex Mono ha già tnum di default ma non sempre zero slashed in
   tutti i weights — esplicito per coerenza. */
code,
.dc-mono {
  font-feature-settings: "zero" 1;
  font-variant-numeric: slashed-zero;
}

/* ============================================================
   USERS PAGE — N card (anagrafica + 1 per category) con auto-save
   al toggle (feedback inline pending/ok/err).
   ============================================================ */

.dc-users-roster .card-header {
  background: var(--dc-card-header-bg);
  border-bottom: 1px solid var(--dc-border);
}
.dc-users-roster__table thead th {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  background: var(--dc-card-header-bg);
}

/* ---- Card permessi per category — stile uniforme alla roster ---- */
.dc-perm-card {
  width: fit-content;
  max-width: 100%;
}
.dc-perm-card .card-header {
  background: var(--dc-card-header-bg);
  border-bottom: 1px solid var(--dc-border);
}
.dc-perm-table {
  table-layout: fixed;
  width: auto;
}
.dc-perm-table thead th {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  background: var(--dc-card-header-bg);
}
.dc-perm-table__user-col {
  width: 240px;
  min-width: 240px;
  text-align: left !important;
}
.dc-perm-table__perm-col {
  width: 160px;
  min-width: 160px;
}
.dc-perm-table__perm-col span {
  display: inline-block;
  max-width: 140px;
  white-space: normal;
  line-height: 1.2;
}

/* ---- Toggle cell: feedback visivo auto-save (glow attorno allo switch) ---- */
.dc-perm-toggle { margin: 0; }
.dc-perm-toggle .form-check-input { transition: box-shadow .15s ease; }
.dc-perm-toggle--pending .form-check-input {
  box-shadow: 0 0 0 3px rgba(120, 113, 108, .25);
}
/* OK: glow lime che parte intenso e si espande svanendo (lime brand). */
.dc-perm-toggle--ok .form-check-input {
  animation: dc-glow-lime .8s ease-out forwards;
}
@keyframes dc-glow-lime {
  0% {
    box-shadow:
      0 0 0 0   rgba(200, 255, 0, .85),
      0 0 6px 1px rgba(200, 255, 0, .70);
  }
  60% {
    box-shadow:
      0 0 0 10px rgba(200, 255, 0, .25),
      0 0 18px 6px rgba(200, 255, 0, .35);
  }
  100% {
    box-shadow:
      0 0 0 16px rgba(200, 255, 0, 0),
      0 0 24px 10px rgba(200, 255, 0, 0);
  }
}
/* ERR: glow rosso analogo + shake. */
.dc-perm-toggle--err .form-check-input {
  animation: dc-glow-err .9s ease-out forwards, dc-shake .35s ease;
}
@keyframes dc-glow-err {
  0% {
    box-shadow:
      0 0 0 0   rgba(220, 38, 38, .80),
      0 0 6px 1px rgba(220, 38, 38, .60);
  }
  100% {
    box-shadow:
      0 0 0 16px rgba(220, 38, 38, 0),
      0 0 22px 8px rgba(220, 38, 38, 0);
  }
}
@keyframes dc-pulse {
  0%,100% { opacity: .35; }
  50%     { opacity: 1; }
}
@keyframes dc-shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  75%     { transform: translateX(3px); }
}

/* ============================================================
   TOM SELECT — multi-select stilizzato come .form-select-sm
   ============================================================*/
.ts-wrapper {
  font-size: .875rem;
  line-height: 1.4;
}
.ts-wrapper .ts-control {
  min-height: 38px;   /* allineato all'altezza standard di .form-control/.form-select (vedi nota "tutti a 38px") */
  padding: 2px 6px 2px 8px;
  background-color: var(--dc-input-bg);
  border: 1px solid var(--dc-border);
  border-radius: .375rem;
  color: var(--dc-text);
  box-shadow: none;
  gap: 4px;
  align-items: center;  /* il chip selezionato non si stira più a tutta altezza (testo centrato, niente padding-bottom asimmetrico) */
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  cursor: text;
}
/* Single-select: la voce selezionata + l'input di ricerca restano su UNA riga.
   Tom Select altrimenti, dopo la selezione, lascia l'input visibile accanto/sotto
   l'item → seconda riga e salto d'altezza. (Multi resta a chip-wrap.) */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
/* L'item resta su una riga; ellissi solo se davvero più lungo del controllo. */
.ts-wrapper.single .ts-control > .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Con un item selezionato (stato input-hidden) collasso l'input di ricerca: la
   voce occupa tutta la larghezza e non resta un cursore/riga vuota accanto. */
.ts-wrapper.single.input-hidden .ts-control > input {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  padding: 0;
}
/* Stato input-active e testo digitato: il CSS CDN li forza a bianco/#303030
   (.ts-wrapper.single.input-active .ts-control { background:#fff } e
   .ts-control input { color:#303030 }) — in dark mode il controllo diventava
   un box bianco appena si digitava. Stessi selettori/più specifici, coi token. */
.ts-wrapper.single.input-active .ts-control {
  background: var(--dc-input-bg);
}
.ts-wrapper .ts-control > input {
  color: var(--dc-text);
}
.ts-wrapper .ts-control > input::placeholder {
  color: var(--dc-text-muted);
  opacity: .75;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--dc-primary) 25%, transparent);
}
.ts-wrapper.disabled .ts-control {
  background-color: color-mix(in srgb, var(--dc-bg-soft) 60%, transparent);
  opacity: .65;
}

/* Chip (selected item) */
.ts-wrapper.multi .ts-control > .item {
  background: var(--dc-primary-soft);
  color: var(--dc-primary);
  border: 1px solid color-mix(in srgb, var(--dc-primary) 35%, transparent);
  border-radius: .25rem;
  padding: 1px 4px 1px 7px;
  margin: 1px 0;
  font-weight: 500;
  font-size: .78rem;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > .item {
  background: color-mix(in srgb, var(--dc-primary) 20%, transparent);
  color: var(--dc-primary);
  border-color: color-mix(in srgb, var(--dc-primary) 50%, transparent);
}
.ts-wrapper.multi .ts-control > .item.active {
  background: color-mix(in srgb, var(--dc-primary) 25%, transparent);
}
/* Remove button "×" del plugin remove_button */
.ts-wrapper .ts-control > .item .remove {
  border-left: none;
  padding: 0 4px 0 2px;
  color: inherit;
  opacity: .6;
  text-decoration: none;
}
.ts-wrapper .ts-control > .item .remove:hover {
  background: transparent;
  opacity: 1;
}

/* Caret a destra (override icona Tom Select default) */
.ts-wrapper.single .ts-control,
.ts-wrapper.plugin-remove_button .ts-control {
  padding-right: 28px;
}
.ts-wrapper::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--dc-text-muted);
  border-bottom: 1.5px solid var(--dc-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
  opacity: .7;
}
.ts-wrapper.focus::after,
.ts-wrapper.dropdown-active::after {
  border-color: var(--dc-primary);
}

/* Dropdown popover */
[data-bs-theme="dark"] .ts-dropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
}
.ts-dropdown .option,
.ts-dropdown .create {
  padding: 6px 10px;
  border-radius: 3px;
  margin: 1px 4px;
  color: var(--dc-text);
}
.ts-dropdown .option.selected {
  background: color-mix(in srgb, var(--dc-primary) 12%, transparent);
  color: var(--dc-text);
  font-weight: 500;
}
.ts-dropdown .no-results {
  padding: 8px 10px;
  color: var(--dc-text-muted);
  font-style: italic;
}

/* Compat con il form-select-sm vicino: stessa altezza riga */
.ts-wrapper.form-select-sm,
.col-md > .ts-wrapper,
.col-md-1 > .ts-wrapper,
.col-md-2 > .ts-wrapper,
.col-md-3 > .ts-wrapper {
  width: 100%;
}

/* ==== ITALY HEATMAP — mappa regionale + drill-down provincia (Leaflet) ==== */
.dc-italy-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 1.25rem;
  align-items: start;
}
.dc-italy-map__main {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.dc-italy-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.dc-italy-map__title {
  font-size: .875rem;
  color: var(--dc-text-muted);
  font-weight: 500;
}
#italyMap {
  width: 100%;
  height: 760px;
  border-radius: 6px;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  /* Leaflet usa z-index alti per pane/controlli (fino a 1000). Senza un
     stacking context locale, durante lo scroll questi salgono sopra l'header
     dell'app. position:relative + z-index:0 isola tutto l'iframe dei pane
     dentro la card. */
  position: relative;
  z-index: 0;
}
/* Override default Leaflet style per matchare basiclab */
.leaflet-container {
  font-family: inherit;
  background: var(--dc-bg-elev);
  outline: none;
}
.leaflet-control-zoom a {
  background-color: var(--dc-bg-elev);
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
}
.leaflet-control-zoom a:hover {
  background-color: var(--dc-bg-soft);
}
.leaflet-tooltip {
  background: var(--dc-text);
  color: var(--dc-bg-elev);
  border: 0;
  font-size: .8rem;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before { display: none; }

/* Label province (codice 2 lettere come AG, MI, RM…) */
.dc-italy-map__plabel {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow:
    0 0 2px rgba(0,0,0,.7),
    0 1px 2px rgba(0,0,0,.5);
  text-align: center;
  white-space: nowrap;
  background: transparent;
  border: 0;
  pointer-events: none;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.dc-italy-map__legend {
  font-size: .875rem;
}
.dc-italy-map__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-bottom: 4px;
  border-radius: 3px;
  overflow: hidden;
}
.dc-italy-map__swatch {
  display: block;
  height: 12px;
}
@media (max-width: 768px) {
  .dc-italy-map {
    grid-template-columns: 1fr;
  }
  #italyMap {
    height: 400px;
  }
}

/* Tabella province nel side-panel della mappa Italia (drill-down) */
.dc-italy-map__prov-table {
  font-size: .82rem;
}
.dc-italy-map__prov-table th,
.dc-italy-map__prov-table td {
  padding: .25rem .4rem;
  border-bottom: 1px solid var(--dc-border);
  white-space: nowrap;
}
.dc-italy-map__prov-table thead th {
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 500;
}
.dc-italy-map__prov-table tbody tr:last-child td {
  border-bottom: 0;
}
.dc-italy-map__prov-table code {
  font-size: .82rem;
  color: var(--dc-primary);
  background: transparent;
  padding: 0;
}
/* Numeri tabulari (tnum) per allineare le cifre a fondo decimale */
.dc-italy-map__prov-table td.text-end,
.dc-italy-map__prov-table th.text-end {
  font-variant-numeric: tabular-nums;
}

/* ==== ANALISI BI — modulo statistiche avanzato ==== */

/* Token locali della sezione, così posso temare la BI a parte. */
.dc-bi-section {
  --dc-bi-accent: #d97706;          /* amber/ochre per accenti caldi */
  --dc-bi-accent-soft: color-mix(in srgb, var(--dc-bi-accent) 12%, transparent);
  --dc-bi-grid-bleed: 16px;
}
[data-bs-theme="dark"] .dc-bi-section {
  --dc-bi-accent: #fbbf24;
  --dc-bi-accent-soft: color-mix(in srgb, var(--dc-bi-accent) 14%, transparent);
}

/* Barra accento a sinistra della KPI tile BI. */
.dc-bi-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--dc-primary);
  opacity: .9;
}
.dc-bi-kpi:hover { transform: translateY(-1px); box-shadow: var(--dc-shadow-lg); }

.dc-bi-kpi--accent::before { background: var(--dc-bi-accent); }

/* Card analitica con header strutturato. */
.dc-bi-card__chart {
  width: 100%;
  height: 300px;
}
.dc-bi-card__chart--tall { height: 420px; }
.dc-bi-card__chart--xtall { height: 540px; }

/* Lista "top N" con barra di proporzione integrata. */
.dc-bi-rank__bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dc-primary), color-mix(in srgb, var(--dc-primary) 60%, var(--dc-bi-accent)));
  border-radius: 999px;
}

/* Navigation tiles fra le pagine BI. */
.dc-bi-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
}
/* Tile compatto a riga singola: icona | nome | freccia, su una linea. */
.dc-bi-nav__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  text-decoration: none !important;
  color: var(--dc-text);
  overflow: hidden;
  transition: var(--dc-transition);
}
.dc-bi-nav__tile::after {
  content: '→';
  margin-left: auto;
  font-family: var(--dc-font-mono);
  font-weight: 600;
  color: var(--dc-text-muted);
  transition: transform .2s ease, color .2s ease;
}
.dc-bi-nav__tile:hover { transform: translateY(-1px); box-shadow: var(--dc-shadow-lg); border-color: var(--dc-primary); }
.dc-bi-nav__tile:hover::after { transform: translateX(3px); color: var(--dc-primary); }
.dc-bi-nav__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dc-primary) 10%, transparent);
  color: var(--dc-primary);
  font-size: .9rem;
  margin: 0;
}
.dc-bi-nav__name {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  letter-spacing: -.015em;
  font-size: .95rem;
  margin: 0;
}

/* ==== BI · CATALOG INTELLIGENCE  (stats/bi/catalog.php) ==== */

/* Form filtri compatto in hero (Anno + chips marchi) */
.dc-bi-filter-form {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.dc-bi-filter-form__label {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-bi-filter-form__brand-chips {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}

/* KPI row catalog */

/* Brand tag riusabile in tabelle BI */
.dc-bi-brand-tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  font-family: var(--dc-font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--dc-text);
}

/* Tabella BI compatta */
.dc-bi-table {
  font-family: var(--dc-font-mono);
  font-size: .82rem;
}
.dc-bi-table thead th {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  border-bottom: 1px solid var(--dc-border-strong);
}
.dc-bi-table tbody td {
  font-feature-settings: "tnum";
  vertical-align: middle;
}
.dc-bi-table code a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.dc-bi-table code a:hover { color: var(--dc-primary); }

/* Legenda quadrante attrattività */
.dc-cat-attract-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: .75rem;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  color: var(--dc-text-muted);
}
.dc-cat-attract-legend .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.dc-cat-attract-legend .dot--pronta  { background: #10b981; }
.dc-cat-attract-legend .dot--surich  { background: #f59e0b; }
.dc-cat-attract-legend .dot--novita  { background: #a855f7; border: 1.5px solid var(--dc-surface); }

/* Supporters surichiesta */
.dc-cat-supporters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: .75rem;
}
.dc-cat-supporter {
  border: 1px solid var(--dc-border-strong);
  border-radius: calc(var(--dc-radius) - 2px);
  padding: .75rem .9rem;
  background: color-mix(in srgb, var(--dc-text) 2%, var(--dc-bg-elev));
}
.dc-cat-supporter.is-concentrated {
  border-color: var(--dc-warning);
  background: color-mix(in srgb, var(--dc-warning) 5%, var(--dc-bg-elev));
}
.dc-cat-supporter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.dc-cat-supporter__code {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dc-text);
  text-decoration: none;
  letter-spacing: -.02em;
  margin-right: .5rem;
}
.dc-cat-supporter__code:hover { color: var(--dc-primary); }
.dc-cat-supporter__metrics {
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  color: var(--dc-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.dc-cat-supporter__metrics strong { color: var(--dc-text); font-feature-settings: "tnum"; }
.dc-cat-supporter__flag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .35rem;
  padding: .1rem .45rem;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  font-size: .68rem;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
}
.dc-cat-supporter__clients {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dc-cat-supporter__clients li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  gap: .5rem;
  align-items: center;
  font-family: var(--dc-font-mono);
  font-size: .76rem;
  padding: .15rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-border-strong) 50%, transparent);
}
.dc-cat-supporter__clients li:last-child { border-bottom: none; }
.dc-cat-supporter__client-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--dc-text);
}
.dc-cat-supporter__client-bar {
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.dc-cat-supporter__client-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dc-primary), color-mix(in srgb, var(--dc-primary) 70%, #fff));
}
.dc-cat-supporter__client-val {
  font-size: .72rem;
  color: var(--dc-text-muted);
  text-align: right;
  font-feature-settings: "tnum";
}
.dc-cat-supporter__client-val em {
  font-style: normal;
  opacity: .7;
}

/* ==== BI · PRODUCT PROFILE  (fact-sheet su products_lab.php) ==== */
.dc-prod-profile {
  display: grid;
  grid-template-columns: 96px minmax(220px, 1.4fr) auto minmax(200px, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  background: color-mix(in srgb, var(--dc-text) 3%, var(--dc-bg-elev));
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
}
@media (max-width: 991px) {
  .dc-prod-profile {
    grid-template-columns: 80px 1fr;
  }
  .dc-prod-profile__stock, .dc-prod-profile__colors {
    grid-column: 1 / -1;
  }
}
.dc-prod-profile__img {
  width: 96px; height: 96px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dc-prod-profile__img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.dc-prod-profile__img-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: color-mix(in srgb, var(--dc-text) 25%, transparent);
  font-size: 2rem;
}
.dc-prod-profile__main {
  display: flex; flex-direction: column;
  justify-content: center;
}
.dc-prod-profile__head {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: .4rem;
  margin-bottom: .35rem;
}
.dc-prod-profile__code {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--dc-text);
  text-decoration: none;
  margin-right: .25rem;
}
.dc-prod-profile__code:hover { color: var(--dc-primary); }
.dc-prod-profile__tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 3px;
  font-family: var(--dc-font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
.dc-prod-profile__tag i { font-size: .85em; }
.dc-prod-profile__tag--pronta  { color: #16a34a; background: rgba(22,163,74,.12); }
.dc-prod-profile__tag--surich  { color: #d97706; background: rgba(245,158,11,.15); }
.dc-prod-profile__tag--novita  { color: #a855f7; background: rgba(168,85,247,.15); }
.dc-prod-profile__tag--dismissed { color: var(--dc-text-muted); background: color-mix(in srgb, var(--dc-text) 10%, transparent); }
.dc-prod-profile__desc {
  font-family: var(--dc-font-mono);
  font-size: .82rem;
  color: var(--dc-text-muted);
  margin: 0 0 .35rem;
}
.dc-prod-profile__attrs {
  display: flex; flex-wrap: wrap;
  gap: .25rem .9rem;
  font-family: var(--dc-font-mono);
  font-size: .72rem;
}
.dc-prod-profile__attr-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dc-text-muted);
  margin-right: .25rem;
}
.dc-prod-profile__attr-value {
  color: var(--dc-text);
  font-weight: 600;
}

/* Stock 3 magazzini + cover */
.dc-prod-profile__stock {
  display: flex; flex-direction: column;
  gap: .35rem;
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-prod-profile__stock-row {
  display: flex; gap: .25rem;
}
.dc-prod-profile__stock-cell {
  text-align: center;
  padding: .3rem .5rem;
  min-width: 64px;
  background: color-mix(in srgb, var(--dc-text) 5%, transparent);
  border-radius: 4px;
}
.dc-prod-profile__stock-code {
  font-family: var(--dc-font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--dc-text-muted);
  text-transform: uppercase;
}
.dc-prod-profile__stock-qta {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--dc-text);
  line-height: 1.05;
  font-feature-settings: "tnum";
}
.dc-prod-profile__stock-label {
  font-family: var(--dc-font-mono);
  font-size: .58rem;
  color: var(--dc-text-muted);
  letter-spacing: .04em;
}
.dc-prod-profile__cover {
  display: flex; align-items: center;
  gap: .5rem;
  padding: .35rem .55rem;
  border-radius: 4px;
  font-family: var(--dc-font-mono);
  background: color-mix(in srgb, var(--dc-text) 5%, transparent);
}
.dc-prod-profile__cover-val {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: 1.05rem;
  font-feature-settings: "tnum";
}
.dc-prod-profile__cover-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dc-text-muted);
  line-height: 1.1;
}
.dc-prod-profile__cover.is-ok       { background: rgba(22,163,74,.12);  color: #16a34a; }
.dc-prod-profile__cover.is-warning  { background: rgba(245,158,11,.15); color: #d97706; }
.dc-prod-profile__cover.is-critical { background: rgba(220,38,38,.15);  color: #dc2626; }
.dc-prod-profile__cover.is-excess   { background: rgba(99,102,241,.12); color: #6366f1; }
.dc-prod-profile__cover.is-neutral  { color: var(--dc-text-muted); }
.dc-prod-profile__cover.is-ok .dc-prod-profile__cover-label,
.dc-prod-profile__cover.is-warning .dc-prod-profile__cover-label,
.dc-prod-profile__cover.is-critical .dc-prod-profile__cover-label,
.dc-prod-profile__cover.is-excess .dc-prod-profile__cover-label { color: currentColor; opacity: .7; }

/* Top colori */
.dc-prod-profile__colors {
  padding-left: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-prod-profile__colors-label {
  font-family: var(--dc-font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: .35rem;
}
.dc-prod-profile__colors-list {
  display: flex; flex-direction: column;
  gap: .25rem;
}
.dc-prod-profile__color {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: .4rem;
  align-items: center;
  font-family: var(--dc-font-mono);
  font-size: .74rem;
}
.dc-prod-profile__color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
}
.dc-prod-profile__color-name {
  color: var(--dc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-prod-profile__color-pct {
  color: var(--dc-text-muted);
  font-feature-settings: "tnum";
  font-size: .72rem;
}

/* ==== BI · SALUTE STOCK  (stats/bi/stock.php) ==== */
.dc-tag-chip-group { display: inline-flex; gap: .25rem; }

/* Days of supply: 3 tile (CT/PC/PROD) */
.dc-dos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: .25rem 0 .65rem;
}
@media (max-width: 768px) { .dc-dos-grid { grid-template-columns: 1fr; } }
.dc-dos-tile {
  padding: 1rem 1.25rem;
  border-radius: var(--dc-radius);
  background: color-mix(in srgb, var(--dc-text) 4%, var(--dc-bg-elev));
  border: 1px solid var(--dc-border-strong);
  border-left: 4px solid var(--dos-accent, var(--dc-text-muted));
  --dos-accent: var(--dc-text-muted);
}
.dc-dos-tile--is-ok       { --dos-accent: #16a34a; }
.dc-dos-tile--is-warning  { --dos-accent: #d97706; }
.dc-dos-tile--is-critical { --dos-accent: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--dc-bg-elev)); }
.dc-dos-tile--is-excess   { --dos-accent: #6366f1; }
.dc-dos-tile__head {
  display: flex; align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.dc-dos-tile__code {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--dos-accent);
}
.dc-dos-tile__label {
  font-family: var(--dc-font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-dos-tile__dos {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -.04em;
  color: var(--dc-text);
  line-height: 1;
  font-feature-settings: "tnum";
}
.dc-dos-tile__unit {
  font-family: var(--dc-font-mono);
  font-size: .9rem;
  font-weight: 500;
  color: var(--dc-text-muted);
  letter-spacing: 0;
}
.dc-dos-tile__stock {
  font-family: var(--dc-font-mono);
  font-size: .8rem;
  color: var(--dc-text-muted);
  margin-top: .35rem;
}
.dc-dos-tile__stock strong { color: var(--dc-text); font-feature-settings: "tnum"; }

/* Markers inline nei testi di legenda */
.dc-dos-marker {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 3px;
  font-family: var(--dc-font-mono);
  font-size: .7rem;
  margin-right: .35rem;
  font-weight: 600;
}
.dc-dos-marker.is-ok       { background: rgba(22,163,74,.18);  color: #16a34a; }
.dc-dos-marker.is-warning  { background: rgba(245,158,11,.18); color: #d97706; }
.dc-dos-marker.is-critical { background: rgba(220,38,38,.18);  color: #dc2626; }
.dc-dos-marker.is-excess   { background: rgba(99,102,241,.18); color: #6366f1; }

/* Tabella stock (riusa dc-bi-table) — variant compatta */
.dc-stock-table tbody td {
  white-space: nowrap;
}
.dc-stock-variant {
  display: inline-flex; align-items: center;
  gap: .35rem;
  margin-left: .55rem;
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  color: var(--dc-text-muted);
}
.dc-stock-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
}
.dc-stock-color {
  text-transform: capitalize;
}
.dc-stock-size {
  font-weight: 700;
  color: var(--dc-text);
  padding-left: .25rem;
}
.dc-stock-cell {
  display: inline-block;
  min-width: 38px;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  font-feature-settings: "tnum";
}
.dc-stock-cell--zero {
  color: #dc2626;
  background: rgba(220,38,38,.12);
  font-weight: 700;
}
.dc-cover-pill {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 3px;
  font-feature-settings: "tnum";
}
.dc-cover-pill.is-critical { background: rgba(220,38,38,.15); color: #dc2626; }
.dc-cover-pill.is-warning  { background: rgba(245,158,11,.15); color: #d97706; }

/* Heatmap marchio × categoria */
.dc-heatmap {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
}
.dc-heatmap thead th {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dc-text-muted);
  padding: .25rem .35rem;
}
.dc-heatmap tbody th {
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  text-align: right;
  padding: .3rem .65rem;
  color: var(--dc-text);
  white-space: nowrap;
}
.dc-heatmap__cell {
  text-align: center;
  padding: .35rem .5rem;
  border-radius: 4px;
  font-family: var(--dc-font-mono);
  font-size: .75rem;
  line-height: 1.15;
  min-width: 60px;
}
.dc-heatmap__cell strong {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: .82rem;
  font-feature-settings: "tnum";
}
.dc-heatmap__cell .dc-heatmap__sub {
  display: block;
  font-size: .62rem;
  opacity: .85;
  margin-top: .1rem;
  font-feature-settings: "tnum";
}
.dc-heatmap__empty {
  background: transparent;
  color: color-mix(in srgb, var(--dc-text) 15%, transparent);
  text-align: center;
  font-size: 1.1rem;
}

/* Widget Salute Stock nella home BI (link banda compatta) */
.dc-stock-widget__head > i {
  font-size: 1.1rem;
  color: var(--dc-primary);
}
.dc-stock-widget__cell {
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--dc-text) 4%, var(--dc-bg-elev));
  border-radius: 4px;
  border-left: 3px solid var(--dc-text-muted);
  display: flex; flex-direction: column;
}
.dc-stock-widget__cell--danger  { border-left-color: var(--dc-danger); }
.dc-stock-widget__cell--warning { border-left-color: var(--dc-warning); }
.dc-stock-widget__cell--info    { border-left-color: var(--dc-info); }
.dc-stock-widget__cell--danger  .dc-stock-widget__val { color: #dc2626; }
.dc-stock-widget__cell--info    .dc-stock-widget__val { color: #6366f1; }

/* ==== BI · DNA CLIENTE  (sezione in customers_lab.php) ==== */
.dc-dna {
  /* Padding laterale allineato a .dc-bi-card__head (1.1rem) così l'header
     cliente e la griglia non toccano i bordi della card. */
  padding: .25rem 1.1rem 1.1rem;
}
.dc-dna__header {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .85rem;
  margin-bottom: .85rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-dna__name {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  margin: 0 0 .2rem;
  color: var(--dc-text);
}
.dc-dna__meta {
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  color: var(--dc-text-muted);
  display: flex; flex-wrap: wrap; gap: .15rem .4rem;
}
.dc-dna__meta i { font-size: .85em; }
.dc-dna__meta code {
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  padding: .05rem .35rem;
  border-radius: 3px;
}
.dc-dna__meta strong { color: var(--dc-text); }
.dc-dna__totals {
  display: flex; gap: 1.25rem;
  text-align: right;
}
.dc-dna__totals-val {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  font-feature-settings: "tnum";
  color: var(--dc-text);
  line-height: 1.05;
}
.dc-dna__totals-lbl {
  font-family: var(--dc-font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}

.dc-dna__strip {
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border-left: 4px solid var(--dc-text-muted);
  background: color-mix(in srgb, var(--dc-text) 4%, var(--dc-bg-elev));
  font-family: var(--dc-font-mono);
  font-size: .85rem;
  display: flex; gap: .55rem; align-items: flex-start;
}
.dc-dna__strip i {
  font-size: 1.05rem; margin-top: 1px;
  color: var(--dc-text-muted);
}
.dc-dna__strip strong { color: var(--dc-text); }
.dc-dna__strip--is-mono         { border-left-color: #dc2626; background: color-mix(in srgb, #dc2626 6%, var(--dc-bg-elev)); }
.dc-dna__strip--is-mono i       { color: #dc2626; }
.dc-dna__strip--is-concentrated { border-left-color: #d97706; background: color-mix(in srgb, #d97706 6%, var(--dc-bg-elev)); }
.dc-dna__strip--is-concentrated i { color: #d97706; }
.dc-dna__strip--is-balanced     { border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 6%, var(--dc-bg-elev)); }
.dc-dna__strip--is-balanced i   { color: #16a34a; }

.dc-dna__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
@media (max-width: 1199px) { .dc-dna__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .dc-dna__grid { grid-template-columns: 1fr; } }
.dc-dna__card {
  padding: .65rem .75rem;
  background: color-mix(in srgb, var(--dc-text) 2%, var(--dc-bg-elev));
  border: 1px solid var(--dc-border-strong);
  border-radius: 6px;
}
.dc-dna__card--wide { grid-column: span 2; }
@media (max-width: 599px) { .dc-dna__card--wide { grid-column: span 1; } }
.dc-dna__card-head {
  font-family: var(--dc-font-mono);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: .35rem;
}
.dc-dna__chart {
  width: 100%;
  height: 180px;
}

.dc-dna__colors {
  display: flex; flex-direction: column;
  gap: .25rem;
}
.dc-dna__color {
  display: grid;
  grid-template-columns: 16px 1fr 120px;
  gap: .5rem;
  align-items: center;
  font-family: var(--dc-font-mono);
  font-size: .75rem;
}
.dc-dna__color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
}
.dc-dna__color-bar {
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.dc-dna__color-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--dc-primary), color-mix(in srgb, var(--dc-primary) 65%, #fff));
}
.dc-dna__color-text {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .72rem;
  color: var(--dc-text-muted);
  text-transform: capitalize;
}
.dc-dna__color-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--dc-text);
}

/* ==== BI · STOCK CHECK + REORDER COCKPIT  (products_lab.php) ==== */

/* Banda Stock Check sotto i KPI baseline */
.dc-stockcheck {
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border-strong);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.dc-stockcheck.is-shortage {
  background: color-mix(in srgb, #dc2626 5%, var(--dc-bg-elev));
  border-color: color-mix(in srgb, #dc2626 35%, var(--dc-border-strong));
}
.dc-stockcheck.is-covered {
  background: color-mix(in srgb, #16a34a 4%, var(--dc-bg-elev));
  border-color: color-mix(in srgb, #16a34a 30%, var(--dc-border-strong));
}
.dc-stockcheck__head {
  display: flex; align-items: center;
  gap: .5rem;
  margin-bottom: .65rem;
  font-family: var(--dc-font-mono);
  flex-wrap: wrap;
}
.dc-stockcheck__head i { font-size: 1.1rem; }
.dc-stockcheck.is-shortage .dc-stockcheck__head i { color: #dc2626; }
.dc-stockcheck.is-covered  .dc-stockcheck__head i { color: #16a34a; }
.dc-stockcheck__head strong {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.dc-stockcheck__meta {
  margin-left: auto;
  font-size: .7rem;
  color: var(--dc-text-muted);
  letter-spacing: .04em;
}
.dc-stockcheck__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
@media (max-width: 768px) { .dc-stockcheck__cells { grid-template-columns: repeat(2, 1fr); } }
.dc-stockcheck__cell {
  padding: .55rem .75rem;
  background: color-mix(in srgb, var(--dc-text) 3%, var(--dc-bg-elev));
  border-radius: 4px;
  border-left: 3px solid var(--dc-text-muted);
}
.dc-stockcheck__cell--cover {
  border-left-color: var(--dc-text-muted);
}
.dc-stockcheck__cell--cover.is-ok       { border-left-color: var(--dc-success); }
.dc-stockcheck__cell--cover.is-warning  { border-left-color: var(--dc-warning); }
.dc-stockcheck__cell--cover.is-critical { border-left-color: var(--dc-danger); background: color-mix(in srgb, var(--dc-danger) 6%, var(--dc-bg-elev)); }
.dc-stockcheck__cell--reorder {
  border-left-color: var(--dc-primary);
  background: color-mix(in srgb, var(--dc-primary) 6%, var(--dc-bg-elev));
}
.dc-stockcheck__lbl {
  font-family: var(--dc-font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: .15rem;
}
.dc-stockcheck__val {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  font-feature-settings: "tnum";
  color: var(--dc-text);
  line-height: 1.05;
}
.dc-stockcheck__cell--cover.is-critical .dc-stockcheck__val { color: #dc2626; }
.dc-stockcheck__cell--cover.is-warning  .dc-stockcheck__val { color: #d97706; }
.dc-stockcheck__cell--cover.is-ok       .dc-stockcheck__val { color: #16a34a; }
.dc-stockcheck__cell--reorder .dc-stockcheck__val { color: var(--dc-primary); }
.dc-stockcheck__unit {
  font-family: var(--dc-font-mono);
  font-size: .8rem;
  font-weight: 500;
  color: var(--dc-text-muted);
  letter-spacing: 0;
}
.dc-stockcheck__sub {
  font-family: var(--dc-font-mono);
  font-size: .7rem;
  color: var(--dc-text-muted);
  margin-top: .2rem;
}

/* Reorder cockpit table */
.dc-cockpit-pick code {
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
}
.dc-cockpit-pick code:hover { color: var(--dc-primary); }
.dc-reorder-qty {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--dc-primary) 12%, transparent);
  color: var(--dc-primary);
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-feature-settings: "tnum";
}

/* ==== BI · VARIANT FORECAST MATRIX  (products_lab.php) ==== */
.dc-vfc {
  border-collapse: separate;
  border-spacing: 1px;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  width: 100%;
  font-feature-settings: "tnum";
}
.dc-vfc thead th,
.dc-vfc tfoot th {
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  padding: .35rem .5rem;
  text-align: center;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  white-space: nowrap;
}
.dc-vfc .dc-vfc__corner {
  text-align: left;
  font-size: .65rem;
}
.dc-vfc__rowhead {
  text-align: left;
  padding: .3rem .55rem;
  background: color-mix(in srgb, var(--dc-text) 3%, transparent);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  color: var(--dc-text);
  font-family: var(--dc-font-mono);
  font-size: .76rem;
  text-transform: capitalize;
}
.dc-vfc__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  flex-shrink: 0;
}
.dc-vfc__rowcode {
  color: var(--dc-text-muted);
  font-size: .68rem;
  letter-spacing: .08em;
  margin-left: auto;
}
.dc-vfc__cell {
  text-align: center;
  padding: .3rem .4rem;
  min-width: 60px;
  border-radius: 3px;
  color: var(--dc-text);
}
.dc-vfc__zero { color: color-mix(in srgb, var(--dc-text) 25%, transparent); }
.dc-vfc__rowtot,
.dc-vfc__coltot {
  text-align: right;
  font-weight: 700;
  padding: .35rem .55rem;
  background: color-mix(in srgb, var(--dc-text) 4%, transparent);
}
.dc-vfc__grandtot {
  text-align: right;
  padding: .35rem .55rem;
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  background: color-mix(in srgb, var(--dc-primary) 12%, transparent);
  color: var(--dc-primary);
}

/* ==== CATALOG AI ASSISTANT  (catalog/assistant.php) ==== */
.dc-assistant {
  max-width: 880px;
  margin: 0 auto;
}
.dc-assistant__hero {
  padding: 1.5rem 0 1rem;
}
.dc-assistant__eyebrow {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: .35rem;
}
.dc-assistant__title {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -.04em;
  margin: 0 0 .35rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.dc-assistant__title i { color: var(--dc-primary); font-size: 1.8rem; }
.dc-assistant__sub {
  color: var(--dc-text-muted);
  font-size: .95rem;
  margin: 0 0 1.25rem;
}
.dc-assistant__form {
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--dc-shadow);
  margin-bottom: 1.5rem;
}
.dc-assistant__label {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: .35rem;
  display: block;
}
.dc-assistant__textarea {
  width: 100%;
  border: 1px solid var(--dc-border-strong);
  border-radius: calc(var(--dc-radius) - 2px);
  background: var(--dc-bg);
  color: var(--dc-text);
  padding: .85rem 1rem;
  font-family: var(--dc-font-mono);
  font-size: .95rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 100px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dc-assistant__textarea:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-primary) 18%, transparent);
}
.dc-assistant__examples {
  margin-top: .65rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
  align-items: center;
}
.dc-assistant__examples-label {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-right: .25rem;
}
.dc-assistant__example {
  background: none;
  border: 1px dashed color-mix(in srgb, var(--dc-border-strong) 70%, transparent);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  color: var(--dc-text-muted);
  cursor: pointer;
  transition: var(--dc-transition);
}
.dc-assistant__example:hover {
  border-color: var(--dc-primary);
  color: var(--dc-primary);
}
.dc-assistant__form-row {
  display: flex; align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.dc-assistant__hint {
  margin-left: auto;
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  color: var(--dc-text-muted);
}
.dc-assistant__error {
  display: flex; gap: .65rem;
  padding: .85rem 1rem;
  background: color-mix(in srgb, #dc2626 8%, var(--dc-bg-elev));
  border: 1px solid color-mix(in srgb, #dc2626 35%, var(--dc-border-strong));
  border-radius: var(--dc-radius);
  color: #dc2626;
  margin-bottom: 1rem;
}
.dc-assistant__error i { font-size: 1.2rem; margin-top: 2px; }

/* Risposta dell'AI */
.dc-assistant__answer {
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  margin-bottom: 2rem;
  overflow: hidden;
}
.dc-assistant__answer-head {
  display: flex; align-items: center;
  gap: .55rem;
  padding: .75rem 1.25rem;
  background: color-mix(in srgb, var(--dc-primary) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-assistant__answer-head i { color: var(--dc-primary); }
.dc-assistant__answer-head strong {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 700;
  font-size: .9rem;
}
.dc-assistant__meta {
  margin-left: auto;
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  color: var(--dc-text-muted);
  letter-spacing: .04em;
}
.dc-assistant__answer-body {
  padding: 1.25rem 1.5rem;
}
.dc-assistant__answer-body .dc-assistant__h2 {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
  margin: 1.25rem 0 .5rem;
}
.dc-assistant__answer-body .dc-assistant__h3 {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 700;
  font-size: 1rem;
  margin: 1rem 0 .35rem;
  color: var(--dc-primary);
}
.dc-assistant__answer-body .dc-assistant__p {
  margin: 0 0 .65rem;
  line-height: 1.55;
}
.dc-assistant__answer-body .dc-assistant__ul {
  margin: 0 0 .85rem 1.25rem;
  padding: 0;
}
.dc-assistant__answer-body .dc-assistant__ul li {
  margin-bottom: .25rem;
  line-height: 1.45;
}
.dc-assistant__answer-body .dc-assistant__quote {
  border-left: 3px solid var(--dc-primary);
  padding: .35rem .85rem;
  margin: .65rem 0;
  color: var(--dc-text-muted);
  font-style: italic;
}
.dc-assistant__answer-body .dc-assistant__hr {
  border: none;
  border-top: 1px dashed color-mix(in srgb, var(--dc-border-strong) 50%, transparent);
  margin: 1rem 0;
}
.dc-assistant__answer-body code {
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  padding: .05rem .35rem;
  border-radius: 3px;
  font-size: .85em;
}
.dc-assistant__code {
  color: var(--dc-primary);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.dc-assistant__code:hover { color: var(--dc-text); }

/* Cronologia conversazione (turni precedenti, collassabili) */
.dc-assistant__history {
  margin-bottom: 1.25rem;
  display: flex; flex-direction: column;
  gap: .5rem;
}
.dc-assistant__history-turn {
  background: color-mix(in srgb, var(--dc-text) 2%, var(--dc-bg-elev));
  border: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
  border-radius: var(--dc-radius);
  overflow: hidden;
}
.dc-assistant__history-q {
  list-style: none;
  cursor: pointer;
  padding: .65rem 1rem;
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--dc-font-mono);
  font-size: .85rem;
  color: var(--dc-text);
  transition: background .15s ease;
}
.dc-assistant__history-q:hover { background: color-mix(in srgb, var(--dc-primary) 6%, transparent); }
.dc-assistant__history-q::-webkit-details-marker { display: none; }
.dc-assistant__history-q::before {
  content: '▸';
  color: var(--dc-text-muted);
  font-size: .7rem;
  transition: transform .15s ease;
}
.dc-assistant__history-turn[open] .dc-assistant__history-q::before {
  transform: rotate(90deg);
}
.dc-assistant__history-tag {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  padding: .12rem .5rem;
  background: color-mix(in srgb, var(--dc-text) 8%, transparent);
  border-radius: 3px;
  flex-shrink: 0;
}
.dc-assistant__history-a {
  padding: .75rem 1.25rem 1rem;
  border-top: 1px dashed color-mix(in srgb, var(--dc-border-strong) 50%, transparent);
}
.dc-assistant__label-hint {
  font-family: var(--dc-font-mono);
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--dc-text-muted);
  margin-left: .5rem;
}

/* Stream live container */
.dc-assistant__stream {
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.dc-assistant__stream-head {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .75rem 1.25rem;
  background: color-mix(in srgb, var(--dc-primary) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
  flex-wrap: wrap;
}
.dc-assistant__stream-phase {
  font-family: var(--dc-font-mono);
  font-size: .85rem;
  color: var(--dc-text);
  display: inline-flex; align-items: center;
}
.dc-assistant__stream-tools {
  padding: .65rem 1.25rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-border-strong) 50%, transparent);
}
.dc-assistant__stream-tools:empty { display: none; }
.dc-assistant__tool-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  font-family: var(--dc-font-mono);
  font-size: .7rem;
  color: var(--dc-text-muted);
}
.dc-assistant__tool-chip i { color: var(--dc-primary); font-size: .85em; }
.dc-assistant__tool-chip strong { color: var(--dc-text); }
.dc-assistant__stream-body {
  padding: 1.25rem 1.5rem;
  min-height: 60px;
}
/* Cursor blinkante alla fine del testo in streaming */
.dc-assistant__stream-body p:last-child::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  color: var(--dc-primary);
  animation: dc-blink 1s steps(2) infinite;
}
@keyframes dc-blink {
  50% { opacity: 0; }
}

/* Footer della pagina BI con info di provenance dati. */
.dc-bi-footnote {
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  color: var(--dc-text-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dc-bi-footnote::before {
  content: '◆';
  color: var(--dc-bi-accent);
}

/* ==== Progress bar + log (per rebuild BI, ma generici). ==== */
.dc-progress {
  position: relative;
  width: 100%;
  height: 22px;
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  border: 1px solid var(--dc-border-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.dc-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dc-primary), color-mix(in srgb, var(--dc-primary) 60%, var(--dc-bi-accent, var(--dc-warning))));
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,.0,.2,1);
}
.dc-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--dc-text);
  letter-spacing: .04em;
  text-shadow: 0 1px 0 var(--dc-bg-elev);
}

.dc-log {
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  background: var(--dc-bg);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  padding: .5rem .75rem;
}
.dc-log__line {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  padding: .15rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-text) 6%, transparent);
}
.dc-log__line:last-child { border-bottom: 0; }
.dc-log__ts {
  color: var(--dc-text-muted);
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .03em;
}
.dc-log__msg { flex: 1 1 auto; word-break: break-word; }
.dc-log__line--muted   .dc-log__msg { color: var(--dc-text-muted); }
.dc-log__line--rollup  .dc-log__msg { color: var(--dc-primary); }
.dc-log__line--success .dc-log__msg { color: var(--dc-success); font-weight: 600; }
.dc-log__line--error   .dc-log__msg { color: var(--dc-danger);  font-weight: 600; }

/* ============================================================
   Segmentazione RFM — matrice 5×5 + palette segmenti.
   ============================================================
   Riga = FM (combinato Frequency+Monetary), colonna = Recency.
   La cella mostra count + segmento, colorata in base al segmento.
   Click → drill-down sulla pagina (?rfm_cell=R5_FM4).
*/

.dc-rfm-grid {
  display: grid;
  grid-template-columns: 60px repeat(5, 1fr);
  grid-template-rows: auto repeat(5, 1fr);
  gap: 6px;
  font-family: var(--dc-font-mono);
}
.dc-rfm-grid__corner { grid-row: 1; grid-column: 1; }
.dc-rfm-grid__col-label,
.dc-rfm-grid__row-label {
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
}
.dc-rfm-grid__col-label small,
.dc-rfm-grid__row-label small {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: .62rem;
  margin-top: .1rem;
  font-weight: 400;
}

.dc-rfm-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: .55rem .45rem;
  text-align: center;
  color: #fff;
  text-decoration: none !important;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--seg-color, var(--dc-text-muted));
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
  cursor: pointer;
}
.dc-rfm-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--seg-color, var(--dc-text-muted)) 80%, transparent);
  color: #fff;
}
.dc-rfm-cell.is-active {
  outline: 3px solid var(--dc-text);
  outline-offset: 2px;
}
.dc-rfm-cell__count {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.dc-rfm-cell__seg {
  margin-top: .25rem;
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 600;
  opacity: .95;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: none;
}
.dc-rfm-cell--empty {
  background: color-mix(in srgb, var(--dc-text) 6%, transparent);
  color: var(--dc-text-muted);
  cursor: default;
}
.dc-rfm-cell--empty:hover { transform: none; box-shadow: none; }
.dc-rfm-cell--empty .dc-rfm-cell__count { text-shadow: none; }

/* Palette segmenti — variabile applicata via inline style sulla cella. */
.dc-rfm-seg--champ        { --seg-color: #15803d; }
.dc-rfm-seg--loyal        { --seg-color: #65a30d; }
.dc-rfm-seg--potential    { --seg-color: #84cc16; }
.dc-rfm-seg--new          { --seg-color: #0d9488; }
.dc-rfm-seg--promising    { --seg-color: #0891b2; }
.dc-rfm-seg--attention    { --seg-color: #ca8a04; }
.dc-rfm-seg--sleeping     { --seg-color: #d97706; }
.dc-rfm-seg--atrisk       { --seg-color: #c2410c; }
.dc-rfm-seg--hibernating  { --seg-color: #78716c; }
.dc-rfm-seg--lost         { --seg-color: #991b1b; }
.dc-rfm-seg--mixed        { --seg-color: #a8a29e; }

/* Legenda compatta sotto la matrice */
.dc-rfm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: 1rem;
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  color: var(--dc-text-muted);
}
.dc-rfm-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.dc-rfm-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--seg-color, var(--dc-text-muted));
}

/* ==== Churn buckets — mini-stat list dentro un KPI. ==== */
.dc-churn-buckets {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  margin-top: .1rem;
}
.dc-churn-buckets__row {
  display: grid;
  grid-template-columns: 10px 56px 1fr auto;
  gap: .4rem;
  align-items: baseline;
}
.dc-churn-buckets__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dc-text-muted);
  align-self: center;
}
.dc-churn-buckets__dot--danger     { background: var(--dc-danger); }
.dc-churn-buckets__dot--warning    { background: var(--dc-warning); }
.dc-churn-buckets__dot--secondary  { background: var(--dc-text-muted); }
.dc-churn-buckets__label {
  color: var(--dc-text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .68rem;
}
.dc-churn-buckets__count {
  font-weight: 700;
  color: var(--dc-text);
}
.dc-churn-buckets__money {
  font-size: .72rem;
  text-align: right;
}

/* ==== BI Info button + modal — guida rapida per ogni card. ==== */
.dc-bi-info__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-left: .35rem;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--dc-primary) 25%, transparent);
  border-radius: 50%;
  color: var(--dc-primary);
  font-size: .95rem;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
  cursor: pointer;
}
.dc-bi-info__btn:hover {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
  transform: scale(1.08);
}
.dc-bi-info__btn:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}
/* Variante ridotta del bottone "i" quando sta nell'etichetta di un KPI BI:
   il testo dell'etichetta è piccolo, i 26px pieni delle intestazioni card
   risulterebbero sproporzionati. */
.dc-bi-kpi__label .dc-bi-info__btn {
  width: 16px;
  height: 16px;
  font-size: .62rem;
}

/* Modal: tipografia leggibile + spazio per testi articolati. */
.dc-bi-info__modal .modal-content {
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
}
.dc-bi-info__modal .modal-header {
  border-bottom: 1px solid var(--dc-border-strong);
}
.dc-bi-info__modal .modal-title {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.dc-bi-info__body {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--dc-text);
}
.dc-bi-info__body h6 {
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-primary);
  margin-top: 1.1rem;
  margin-bottom: .35rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--dc-primary) 18%, transparent);
}
.dc-bi-info__body h6:first-child { margin-top: 0; }
.dc-bi-info__body ul {
  padding-left: 1.2rem;
  margin-bottom: .65rem;
}
.dc-bi-info__body li { margin-bottom: .2rem; }
.dc-bi-info__body p { margin-bottom: .55rem; }
.dc-bi-info__body code {
  background: color-mix(in srgb, var(--dc-primary) 8%, transparent);
  color: var(--dc-primary);
  padding: .1rem .3rem;
  border-radius: 3px;
  font-size: .85em;
}
.dc-bi-info__formula {
  background: color-mix(in srgb, var(--dc-primary) 8%, transparent);
  border-left: 3px solid var(--dc-primary);
  padding: .55rem .75rem;
  margin: .35rem 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  color: var(--dc-text);
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
}
.dc-bi-info__rules {
  font-size: .82rem;
}
.dc-bi-info__rules td, .dc-bi-info__rules th {
  padding: .35rem .55rem;
}

/* ==== CATALOGO PRODOTTI — estetica "showroom B2B" ==== */


/* Filtri */
.dc-cat-filters__search > i {
  position: absolute; left: 14px;
  color: var(--dc-text-muted);
  font-size: 1.05rem;
}
.dc-cat-filters__search > input {
  flex: 1;
  height: 44px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--dc-border-strong);
  border-radius: 999px;
  background: var(--dc-bg);
  color: var(--dc-text);
  font-family: var(--dc-font-mono);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dc-cat-filters__search > input:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-primary) 18%, transparent);
}
.dc-cat-filters__chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .75rem;
}
.dc-cat-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
}
.dc-cat-filters__top {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .8rem;
}
.dc-cat-filters__top .dc-cat-filters__search { flex: 1; margin: 0; }
.dc-cat-filters__row--brands {
  padding-bottom: .65rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-cat-filters__group {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding-right: .9rem;
  margin-right: .25rem;
  border-right: 1px solid color-mix(in srgb, var(--dc-border-strong) 70%, transparent);
}
.dc-cat-filters__group:last-child {
  border-right: none;
  padding-right: 0;
}
.dc-cat-filters__row--palette {
  align-items: flex-start;
}
.dc-cat-filters__row--selects {
  gap: .65rem;
}

/* Tag-chip generico (disponibilità, magazzino, taglia) */
.dc-tag-chip i { font-size: .85em; opacity: .8; }
.dc-tag-chip.is-active i { opacity: 1; }
.dc-tag-chip--mag {
  padding: .3rem .65rem .3rem .55rem;
  gap: .5rem;
  position: relative;
}
.dc-tag-chip--mag .dc-tag-chip__sub {
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: lowercase;
  opacity: .65;
  margin-left: .2rem;
}
.dc-tag-chip--mag.is-active .dc-tag-chip__sub { opacity: .85; }
.dc-tag-chip--mag.is-active .dc-tag-chip__dot {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mag-color) 50%, transparent);
}

/* Palette colori (filtri catalogo) — namespace `dc-color-palette`. */

/* GRIGLIA PRODOTTI */
/* Skeleton shimmer durante il lazy load */
.dc-cat-card__img.is-loading::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(110deg,
      color-mix(in srgb, var(--dc-text) 6%, transparent) 8%,
      color-mix(in srgb, var(--dc-text) 14%, transparent) 18%,
      color-mix(in srgb, var(--dc-text) 6%, transparent) 33%);
  background-size: 220% 100%;
  animation: dcShimmer 1.4s linear infinite;
  pointer-events: none;
}
@keyframes dcShimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}

/* Pill disponibilità: ora dentro il body della card, accanto al codice
   prodotto (non più overlay sull'immagine — la stock info è informativa,
   non promozionale come NEW). */
.dc-cat-card__code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
/* Brand bar in coda al body della card: logo centrato in una fascia
   sopra al footer. Visivamente è la "firma fornitore" del prodotto.
   Fallback al testo (sigla in mono) se il file logo manca. */
.dc-cat-card__brandbar-surich {
  width: 64px;
  max-height: 44px;
  height: auto;
  object-fit: contain;
  opacity: .92;
}
/* Fallback testuale per "Su richiesta" se l'SVG manca per quel marchio. */
.dc-cat-card:hover .dc-cat-card__brandbar-logo { opacity: 1; }
.dc-cat-card__brandbar--text .dc-cat-card__brandbar-fallback { display: inline; }
.dc-cat-card__badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--dc-warning);
  color: #fff;
  font-family: var(--dc-font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .15rem .45rem;
  border-radius: 3px;
}
.dc-cat-card__badge--request { background: var(--dc-text-muted); bottom: 8px; top: auto; }

/* Variante card "su richiesta": sfondo leggermente caldo per distinguerla. */
.dc-cat-card--surichiesta {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-warning) 6%, var(--dc-bg-elev)) 0%,
    var(--dc-bg-elev) 70%);
}

/* Stock pill: posizionata sotto il brandbar, centrata. */
.dc-cat-card__stock {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--dc-font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .55rem;
  border-radius: 3px;
  align-self: center;
  border: 1px solid transparent;
  margin-top: .1rem;
}
.dc-cat-card__stock i { font-size: .8rem; }
.dc-cat-card__stock--ready {
  color: var(--dc-success);
  background: color-mix(in srgb, var(--dc-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--dc-success) 30%, transparent);
}
.dc-cat-card__stock--request {
  color: var(--dc-warning);
  background: color-mix(in srgb, var(--dc-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--dc-warning) 40%, transparent);
}

.dc-cat-card__meta {
  display: flex; gap: .3rem; flex-wrap: wrap;
}
.dc-cat-card__footer i {
  margin-right: .2rem;
  color: var(--dc-primary);
}

/* PAGINAZIONE */

/* ==== SCHEDA PRODOTTO ==== */
.dc-prod {
  max-width: 1200px;
  margin: 0 auto;
}
.dc-prod__back {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--dc-text-muted);
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  margin-bottom: 1rem;
}
.dc-prod__back:hover { color: var(--dc-primary); }
.dc-prod__grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.2fr;
  gap: 2rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .dc-prod__grid { grid-template-columns: 1fr; }
}

/* Gallery */
.dc-prod__gallery {
  position: sticky; top: 1rem;
}
.dc-prod__main-image {
  aspect-ratio: 1;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
}
.dc-prod__main-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 24px;
}
.dc-prod__main-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--dc-text) 25%, transparent);
  font-size: 5rem;
}
.dc-prod__color-strip {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.dc-prod__color-swatch {
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: var(--dc-transition);
}
.dc-prod__color-swatch:hover { border-color: color-mix(in srgb, var(--dc-primary) 30%, transparent); }
.dc-prod__color-dot {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dc-text) 15%, transparent);
}
.dc-prod__color-dot--lg { width: 38px; height: 38px; }

/* Check dentro al pallino: nascosto di default, visibile solo per il
   colore selezionato (.is-active). Bianco con drop-shadow per leggibilità
   su qualunque tinta — dal nero al pastello chiaro. */
.dc-prod__color-check {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
  text-shadow:
    0 0 2px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.45);
  -webkit-text-stroke: 0.5px rgba(0,0,0,.4);
  pointer-events: none;
}
.dc-prod__color-swatch.is-active .dc-prod__color-check {
  opacity: 1;
  transform: scale(1);
}

/* Info — header brand integrato (logo + nome + supplier capability) */
.dc-prod__head {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-prod__head-brand {
  display: flex; align-items: center;
  gap: .9rem;
  flex: 1;
}
.dc-prod__head-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 56px;
  flex-shrink: 0;
}
.dc-prod__head-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.dc-prod__head-logo-fallback {
  display: none;
  font-family: var(--dc-font-mono);
  font-size: .8rem;
  letter-spacing: .15em;
  font-weight: 700;
  color: var(--dc-text);
}
.dc-prod__head-brand-meta {
  display: flex; flex-direction: column;
  gap: .15rem;
}
.dc-prod__head-brand-name {
  font-family: var(--dc-font-mono);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dc-text);
}
.dc-prod__head-capability {
  display: inline-flex; align-items: center;
  gap: .35rem;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  color: var(--dc-text-muted);
}
.dc-prod__head-capability i {
  color: var(--dc-primary);
}
.dc-prod__head-capability strong {
  color: var(--dc-text);
  font-weight: 700;
}
.dc-prod__head-capability-sub {
  font-size: .7rem;
  opacity: .8;
  margin-left: .25rem;
}
.dc-prod__flag {
  font-family: var(--dc-font-mono);
  font-size: .62rem;
  letter-spacing: .15em;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 3px;
  color: #fff;
  background: var(--dc-text-muted);
}
.dc-prod__flag--new { background: var(--dc-success); }
.dc-prod__flag--request { background: var(--dc-warning); }
.dc-prod__code {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: -.04em;
  margin: 0 0 .35rem;
  color: var(--dc-text);
}
.dc-prod__desc {
  font-size: 1rem;
  color: var(--dc-text-muted);
  margin: 0 0 1rem;
}
.dc-prod__features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.dc-prod__features li {
  font-size: .9rem;
  color: var(--dc-text);
}

.dc-prod__color-current {
  display: flex; align-items: center; gap: .75rem;
  background: color-mix(in srgb, var(--dc-text) 4%, transparent);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  padding: .65rem .85rem;
  margin-bottom: 1rem;
}
.dc-prod__color-label {
  font-family: var(--dc-font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
}
.dc-prod__color-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dc-text);
}
.dc-prod__color-code {
  font-family: var(--dc-font-mono);
  font-size: .82rem;
  font-weight: 400;
  color: var(--dc-text-muted);
}

.dc-prod__sizes {
  margin-bottom: 1.5rem;
}
.dc-prod__sizes-label {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  margin-bottom: .5rem;
}
.dc-prod__sizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: .35rem;
}
.dc-prod__size {
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: 4px;
  padding: .55rem .65rem;
  text-align: center;
  transition: var(--dc-transition);
}
.dc-prod__size:hover { border-color: var(--dc-primary); }
.dc-prod__size-label {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1rem;
  color: var(--dc-text);
  letter-spacing: -.02em;
}
.dc-prod__size-price {
  font-family: var(--dc-font-mono);
  font-size: .82rem;
  color: var(--dc-primary);
  font-weight: 600;
  margin-top: .2rem;
  font-feature-settings: "tnum";
}
.dc-prod__size-barcode {
  font-family: var(--dc-font-mono);
  font-size: .6rem;
  color: var(--dc-text-muted);
  margin-top: .2rem;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-prod__attrs {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--dc-text) 7%, transparent);
}
.dc-prod__attrs-title {
  font-family: var(--dc-font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dc-primary);
  margin-bottom: .65rem;
  font-weight: 600;
}
.dc-prod__attrs-list {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .35rem .9rem;
  margin: 0;
  font-size: .85rem;
}
.dc-prod__attrs-list dt {
  color: var(--dc-text-muted);
  font-weight: 400;
}
.dc-prod__attrs-list dd { margin: 0; color: var(--dc-text); }

.dc-prod__chips {
  display: flex; gap: .35rem; flex-wrap: wrap;
}
.dc-prod__chip {
  font-family: var(--dc-font-mono);
  font-size: .75rem;
  padding: .25rem .65rem;
  background: color-mix(in srgb, var(--dc-primary) 8%, transparent);
  color: var(--dc-primary);
  border-radius: 999px;
  text-decoration: none !important;
}
.dc-prod__chip--link:hover {
  background: var(--dc-primary);
  color: #fff;
}

.dc-prod__certs {
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.dc-prod__cert {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem .65rem;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  background: var(--dc-bg-elev);
  font-size: .78rem;
  color: var(--dc-text-muted);
}
.dc-prod__cert img {
  width: 22px; height: 22px;
  object-fit: contain;
}

/* Matrice colori × taglie */
.dc-prod__matrix {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
}
.dc-prod__matrix-title {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  margin: 0 0 .15rem;
}
/* Banda riepilogo magazzino sopra la matrice */
.dc-prod__matrix-summary {
  display: flex; align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  margin: .35rem 0 .85rem;
  background: color-mix(in srgb, var(--dc-text) 4%, var(--dc-bg));
  border: 1px solid color-mix(in srgb, var(--dc-text) 8%, transparent);
  border-radius: var(--dc-radius);
}
.dc-prod__matrix-summary-mag {
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding-right: 1rem;
  border-right: 1px solid color-mix(in srgb, var(--dc-border-strong) 60%, transparent);
}
.dc-prod__matrix-summary-code {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--dc-text);
}
.dc-prod__matrix-summary-label {
  font-family: var(--dc-font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-top: .15rem;
}
.dc-prod__matrix-summary-stats {
  display: flex; flex-wrap: wrap;
  gap: .3rem 1.6rem;
  font-family: var(--dc-font-mono);
  font-size: .82rem;
  color: var(--dc-text-muted);
}
.dc-prod__matrix-summary-stats strong {
  color: var(--dc-text);
  font-weight: 700;
  font-feature-settings: "tnum";
}
.dc-prod__matrix-table th,
.dc-prod__matrix-table td {
  white-space: nowrap;
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  font-feature-settings: "tnum";
}
.dc-prod__matrix-cell {
  display: inline-block;
  min-width: 50px;
  padding: 2px 6px;
  border-radius: 3px;
  font-feature-settings: "tnum";
}
/* Gradiente qta: rosso = scarso, ambra = medio, verde = buono. */
.dc-prod__matrix-cell--zero {
  color: var(--dc-danger);
  background: color-mix(in srgb, var(--dc-danger) 10%, transparent);
}
.dc-prod__matrix-cell--low {
  color: var(--dc-warning);
  background: color-mix(in srgb, var(--dc-warning) 14%, transparent);
  font-weight: 700;
}
.dc-prod__matrix-cell--mid {
  color: var(--dc-text);
  background: color-mix(in srgb, var(--dc-success) 12%, transparent);
  font-weight: 700;
}
.dc-prod__matrix-cell--high {
  color: var(--dc-success);
  background: color-mix(in srgb, var(--dc-success) 22%, transparent);
  font-weight: 700;
}
.dc-prod__matrix-cell--unknown {
  color: var(--dc-text-muted);
  font-size: 1.1rem;
  line-height: 1;
}

/* Switch CT/BSC sopra la matrice giacenze. */
.dc-prod__stock-switch {
  display: inline-flex; gap: .35rem;
  padding: 4px;
  background: color-mix(in srgb, var(--dc-text) 4%, transparent);
  border: 1px solid var(--dc-border-strong);
  border-radius: 999px;
}
.dc-prod__stock-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--dc-text-muted);
  font-family: var(--dc-font-mono);
  font-size: .78rem;
  border: 1px solid transparent;
  transition: var(--dc-transition);
}
.dc-prod__stock-pill:hover {
  background: var(--dc-bg-elev);
  color: var(--dc-text);
  border-color: var(--dc-border-strong);
}
.dc-prod__stock-pill.is-active {
  background: var(--dc-text);
  color: var(--dc-bg-elev);
  border-color: var(--dc-text);
}
.dc-prod__stock-pill-code {
  font-weight: 700;
  letter-spacing: .12em;
}
.dc-prod__stock-pill-label {
  font-size: .72rem;
  opacity: .85;
}
.dc-prod__stock-pill-qta {
  padding-left: .35rem;
  margin-left: .25rem;
  border-left: 1px solid currentColor;
  opacity: .75;
  font-size: .7rem;
  font-feature-settings: "tnum";
}
.dc-prod__stock-pill.is-active .dc-prod__stock-pill-qta { opacity: .9; }

/* Messaggio "nessuna giacenza" sopra la matrice. */
.dc-prod__stock-empty {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .75rem .95rem;
  margin-bottom: .75rem;
  background: color-mix(in srgb, var(--dc-warning) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc-warning) 30%, transparent);
  color: var(--dc-text);
  font-size: .85rem;
  border-radius: var(--dc-radius);
}
.dc-prod__stock-empty i { color: var(--dc-warning); margin-top: 2px; }
.dc-prod__stock-empty code {
  background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px;
}
/* ==========================================================================
   Basic LAB — Redesign "Cool Slate & Dusty Blue"
   Caricato dopo app.css, attivato da su <html>.
   Single source of truth per palette, tipografia, radius, spacing del nuovo tema.

   Regole non negoziabili:
   - Border = single knob: var(--dc-border) ovunque, mai hex
   - Light + dark in parità (stessi componenti)
   - Riuso classi .dc-* esistenti, no rinominazioni
   - No build step: tutto qui dentro
   ========================================================================== */

:root {
  /* ===== Palette light (default) ===== */
  --dc-bg: #f6f7f9;
  --dc-bg-elev: #ffffff;
  --dc-surface: #ffffff;
  --dc-surface-2: #f8fafc;
  --dc-text: #0f172a;
  --dc-text-muted: #64748b;
  --dc-text-muted-2: #94a3b8;
  --dc-border: #cfd6df;
  --dc-border-strong: #b6c0cd;
  --dc-hover: #f1f4f8;

  --dc-primary: #5b7ca8;
  --dc-primary-2: #7a99c5;
  --dc-primary-3: #a8c4e8;
  --dc-primary-soft: #e7edf5;
  --dc-primary-strong: #2c4a72;

  --dc-success: #2f6638;
  --dc-success-soft: #e3f0e4;
  --dc-warning: #8a5a16;
  --dc-warning-soft: #fff0d6;
  --dc-danger: #9d2a2a;
  --dc-danger-soft: #fde2e2;
  --dc-info: #1e6478;
  --dc-info-soft: #e0f0f5;
  --dc-orange: #b04a1a;
  --dc-orange-soft: #ffe3d1;

  /* Identità vettore (chip — vedi .dc-carrier-chip). Brand attenuati per il
     registro Cool Slate; bianco su questi fondi medi è AA in light e dark. */
  --dc-carrier-gls: #3f6196;   /* blu attenuato */
  --dc-carrier-brt: #a83a3a;   /* rosso attenuato */
  --dc-carrier-other: #334155; /* slate neutro per gli altri corrieri */

  /* ===== Tipografia ===== */
  --dc-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --dc-font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  --dc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dc-letter-tracked: 0.1em;  /* +contenuto rispetto al .14em attuale */

  /* ===== Radius scale ===== */
  --dc-radius-xs: 4px;
  --dc-radius-sm: 7px;
  --dc-radius: 8px;
  --dc-radius-md: 10px;
  --dc-radius-lg: 14px;
  --dc-radius-pill: 999px;

  /* ===== Ombre ===== */
  --dc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --dc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px -10px rgba(15, 23, 42, 0.14);
  --dc-shadow-lg: 0 4px 6px -4px rgba(15, 23, 42, 0.06), 0 24px 50px -20px rgba(15, 23, 42, 0.18);

  /* Shadow accent: usata su CTA primary + voci attive di nav per
     "alzare" l'elemento dal piano. NON usare a tappeto: solo CTA principali
     e indicatori di stato urgente. */
  --dc-shadow-accent: 0 2px 6px -2px rgba(91, 124, 168, 0.45);
  --dc-shadow-warn:   0 2px 6px -2px rgba(138, 90, 22, 0.40);
  --dc-shadow-danger: 0 2px 6px -2px rgba(157, 42, 42, 0.40);

  /* ===== Transizioni ===== */
  --dc-transition: 0.15s ease;

  /* ===== Layout ===== */
  --dc-sidebar-w: 248px;
  --dc-header-h: 64px;

  /* ===== Chrome: sidebar + header (Deep Navy, identità autonoma dal tema pagina) ===== */
  --dc-sidebar-bg: #161c2c;
  --dc-sidebar-text: #e6eaf2;
  --dc-sidebar-text-strong: #ffffff;
  --dc-sidebar-hover: #20283a;
  --dc-sidebar-border: #20283a;
  --dc-sidebar-active-bg: #2c4a72;
  --dc-sidebar-active-text: #ffffff;
  --dc-sidebar-muted: #6b7785;
  --dc-sidebar-active-bar: #60a5fa;
  --dc-header-bg: #161c2c;
  --dc-header-border: #20283a;
  --dc-card-header-bg: var(--dc-surface);

  /* ===== Superfici dati (tabelle, input, chart) — derivate dalla palette cool slate ===== */
  --dc-bg-soft: #eef2f7;
  --dc-table-stripe: var(--dc-surface-2);   /* ricalibrato da #faf5ea (warm) */
  --dc-table-hover: #dbeafe;
  --dc-input-bg: var(--dc-surface);          /* ricalibrato da #fdfcf9 (warm) */
  --dc-chart-grid: var(--dc-border);         /* ricalibrato da #e7e2d4 (warm) */

  /* ===== Brand ===== */
  --bl-brand: #c8ff00;
}

/* ===== Palette dark ===== */
[data-bs-theme="dark"] {
  --dc-bg: #0d1117;
  --dc-bg-elev: #161b22;
  --dc-surface: #161b22;
  --dc-surface-2: #1c232c;
  --dc-text: #e6eaf2;
  --dc-text-muted: #8b97ad;
  --dc-text-muted-2: #6b768b;
  --dc-border: #232a35;          /* indicativo, calibrare visivamente (Task 1.5) */
  --dc-border-strong: #33404f;
  --dc-hover: #1f2630;

  --dc-primary: #7ea4d6;
  --dc-primary-2: #a8c4e8;
  --dc-primary-3: #c2d5ee;
  --dc-primary-soft: #1e2c44;
  --dc-primary-strong: #c2d5ee;

  --dc-success: #86d2a0;
  --dc-success-soft: #173026;
  --dc-warning: #f0c184;
  --dc-warning-soft: #3a2c12;
  --dc-danger: #f0a5a5;
  --dc-danger-soft: #3b1f23;
  --dc-info: #7fc2d6;
  --dc-info-soft: #143040;
  --dc-orange: #eb9d6a;
  --dc-orange-soft: #3a2415;

  /* ===== Chrome dark (Deep Navy) ===== */
  --dc-bg-soft: #1f2630;
  --dc-sidebar-bg: #0d1220;
  --dc-sidebar-text: #e6eaf2;
  --dc-sidebar-text-strong: #ffffff;
  --dc-sidebar-hover: #1a2236;
  --dc-sidebar-border: #1a2236;
  --dc-sidebar-active-bg: #2c4a72;
  --dc-sidebar-active-text: #ffffff;
  --dc-sidebar-muted: #6b7785;
  --dc-sidebar-active-bar: #60a5fa;
  --dc-header-bg: #0d1220;
  --dc-header-border: #1a2236;
  --dc-card-header-bg: var(--dc-bg-elev);
  --dc-table-hover: var(--dc-primary-soft);   /* ricalibrato da #2a2724 (warm) */
}

body {
  background: var(--dc-bg);
  background-image: none;
  color: var(--dc-text);
  font-family: var(--dc-font-sans);
  font-feature-settings: normal;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==== Titoli (Bricolage Grotesque) ==== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--dc-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dc-text);
}

/* ===== Mono ===== */
code,
kbd,
samp,
pre,
.dc-mono,
.text-mono {
  font-family: var(--dc-font-mono);
  font-feature-settings: normal;
}

/* ==== APP SHELL ==== */

.dc-shell {
  background: var(--dc-bg);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--dc-sidebar-w) 1fr;
  grid-template-rows: var(--dc-header-h) 1fr;
}

.dc-main {
  background: var(--dc-bg);
  padding: 20px 28px 60px;
  min-width: 0;
}

/* ==== SIDEBAR ==== */
/* Deep Navy chrome: stessa identità in light e dark (è il "chrome" dell'app,
   non eredita il tema della pagina). Token sidebar autonomi. */

.dc-sidebar {
  background: var(--dc-sidebar-bg);
  border-right: 1px solid var(--dc-sidebar-border);
  color: var(--dc-sidebar-text);
  padding: 16px 10px;
  position: sticky;
  top: var(--dc-header-h);
  height: calc(100vh - var(--dc-header-h));
  overflow-y: auto;
  animation: dc-reveal-fade .55s ease-out both;
  animation-delay: .05s;
}

/* ==== RESPONSIVE: collasso shell + sidebar a drawer (≤991.98px) ====
   Posizionato DOPO le definizioni base di .dc-shell/.dc-main/.dc-sidebar
   (stessa specificità → vince l'ultima regola nel sorgente). */
@media (max-width: 991.98px) {
  .dc-shell { grid-template-columns: 1fr; }
  .dc-sidebar {
    position: fixed;
    top: var(--dc-header-h);
    left: 0;
    width: 80%;
    max-width: 280px;
    height: calc(100vh - var(--dc-header-h));
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 40;
    box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  .dc-shell.sidebar-open .dc-sidebar { transform: translateX(0); }
  .dc-main { padding: 1.25rem; }
}

.dc-sidebar__title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-sidebar-muted);
  padding: 6px 12px;
  margin: 14px 0 4px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.dc-sidebar__title:first-child { margin-top: 0;   padding-top: .25rem;
}

.dc-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--dc-radius-sm);
  color: var(--dc-sidebar-text);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--dc-transition), color var(--dc-transition);
}
.dc-sidebar a:hover {
  background: var(--dc-sidebar-hover);
  color: var(--dc-sidebar-text-strong);
}
.dc-sidebar a.active {
  background: var(--dc-sidebar-active-bg);
  color: var(--dc-sidebar-active-text);
  font-weight: 600;
  border-left-color: var(--dc-sidebar-active-bar);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dc-sidebar-active-bar) 20%, transparent);
}
.dc-sidebar a i { color: inherit; opacity: .85; }
.dc-sidebar a.active i { opacity: 1;   color: var(--dc-sidebar-active-bar);
}

/* Gruppi espandibili BRT/GLS (details/summary) */
.dc-sidebar-group {
  margin: 0;
  display: block;
}
.dc-sidebar-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-radius: var(--dc-radius-sm);
  color: var(--dc-sidebar-text);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.dc-sidebar-group summary::-webkit-details-marker { display: none; }
.dc-sidebar-group summary:hover {
  background: var(--dc-sidebar-hover);
  color: var(--dc-sidebar-text-strong);
}
.dc-sidebar-group__chevron {
  transition: transform var(--dc-transition);
  font-size: 12px;
  color: var(--dc-sidebar-muted);
  margin-left: auto;
  opacity: .55;
}
.dc-sidebar-group[open] .dc-sidebar-group__chevron {
  transform: rotate(90deg);
}
.dc-sidebar-group__items a {
  padding-left: 32px;
  font-size: 12.5px;
  font-weight: 500;
}

/* ==== HEADER ==== */
/* Pattern "Split": il primo blocco (.dc-header__brand-block) ha lo stesso
   bg navy della sidebar e si allinea sopra di essa (width = --dc-sidebar-w);
   la fascia destra (.dc-header__actions) resta su bg surface bianco.
   I child ereditano due set di token via .dc-header__brand-block: dark
   chrome a sinistra, light tokens a destra. */

.dc-header {
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-border);
  backdrop-filter: none;
  padding: 0;
  color: var(--dc-text);
  /* I token --dc-border/--dc-bg/... ereditati da :root sono già corretti per
     entrambi i temi: non duplichiamo le definizioni qui (single knob rule). */
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Spanna tutta la riga grid (1/-1): senza min-width:0 il suo contenuto
     (brand-block + actions) allargherebbe la traccia 1fr oltre il viewport
     su mobile, trascinando .dc-main e tutto il resto fuori schermo. */
  min-width: 0;
}

.dc-header__brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--dc-sidebar-w);
  height: 100%;
  padding: 0 18px;
  background: var(--dc-sidebar-bg);
  border-right: 1px solid var(--dc-sidebar-border);
  /* I figli (lockup BASIC LAB + toggle mobile) leggono questi token chiari */
  color: var(--dc-sidebar-text-strong);
  --dc-text: #ffffff;
  --dc-text-muted: var(--dc-sidebar-text);
  --dc-border: var(--dc-sidebar-hover);
}

.dc-header__actions {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px;
}

/* Mobile: il brand-block non deve riservare la larghezza sidebar (248px) —
   lì serve solo per hamburger + logo. Liberando quello spazio le actions
   (tema + utente + logout) stanno nel viewport. Posizionato DOPO le basi di
   .dc-header__brand-block / .dc-header__actions per vincere la cascata. */
@media (max-width: 991.98px) {
  .dc-header__brand-block { width: auto; }
  .dc-header__actions { padding: 0 14px; gap: 8px; }
}

.dc-header__brand,
.dc-header__brand:hover {
  color: var(--dc-sidebar-text-strong);
  text-decoration: none;
}

.bl-lockup--header {
  font-family: var(--dc-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--dc-text);
}

.dc-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 31px;
  padding: 0 14px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  font-size: 12.5px;
  color: var(--dc-text);
  background: transparent;
  text-decoration: none;
  font-family: var(--dc-font-mono);
  font-weight: 500;
}
.dc-user-chip:hover { background: var(--dc-hover); }
.dc-user-chip i {
  color: var(--dc-text-muted);
  font-size: 14px;
}

.dc-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: transparent;
  color: var(--dc-text);
}
.dc-theme-toggle:hover { background: var(--dc-hover); }

/* ==== TOAST ==== */

.dc-toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1080;
  max-width: 360px;
}

.dc-toast {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-left-width: 4px;
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  padding: 12px 14px;
  font-family: var(--dc-font-sans);
  font-weight: 400;
  position: relative;
  background-image: none;
}

.dc-toast--success { border-left-color: var(--dc-success); }
.dc-toast--info    { border-left-color: var(--dc-primary); }
.dc-toast--warning { border-left-color: var(--dc-warning); }
.dc-toast--danger  { border-left-color: var(--dc-danger); }

.dc-toast__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.dc-toast__stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dc-text-muted);
  font-family: var(--dc-font-sans);
  background: transparent;
  border: none;
  padding: 0;
}
.dc-toast--success .dc-toast__stamp { color: var(--dc-success); }
.dc-toast--info    .dc-toast__stamp { color: var(--dc-primary); }
.dc-toast--warning .dc-toast__stamp { color: var(--dc-warning); }
.dc-toast--danger  .dc-toast__stamp { color: var(--dc-danger); }

.dc-toast__time {
  font-family: var(--dc-font-mono);
  font-size: 10.5px;
  color: var(--dc-text-muted-2);
  margin-left: auto;
}

.dc-toast__close {
  background: transparent;
  border: none;
  color: var(--dc-text-muted-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 22px;
  height: 22px;
}
.dc-toast__close:hover { color: var(--dc-text); }

.dc-toast__body {
  font-size: 13px;
  color: var(--dc-text);
  line-height: 1.5;
}

.dc-toast__action {
  margin-top: 8px;
  font-size: 12.5px;
}
.dc-toast__action a {
  color: var(--dc-primary-strong);
  text-decoration: none;
  font-weight: 500;
}
.dc-toast__action a:hover { text-decoration: underline; }

.dc-toast__edge { display: none; }

/* ==== BUTTONS ==== */

.btn {
  font-family: var(--dc-font-sans);
  font-weight: 500;
  border-radius: var(--dc-radius);
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  /* reset del vecchio app.css che metteva text-transform:uppercase +
     letter-spacing:.06em su tutti i .btn — qui solo capitalization normale,
     i bottoni "hero" (.dc-loc-refresh) si scrivono uppercase esplicitamente */
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  transition: background var(--dc-transition), filter var(--dc-transition);
}
.btn:hover { background: var(--dc-hover); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}

.btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.btn-lg {
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
}

.btn-primary,
.btn-primary:focus {
  background: var(--dc-primary);
  color: white;
  border-color: transparent;
  box-shadow: var(--dc-shadow-accent);
}
.btn-primary:hover {
  background: var(--dc-primary);
  filter: brightness(1.05);
  box-shadow: var(--dc-shadow-accent);
}

.btn-warning {
  background: var(--dc-warning);
  color: white;
  border-color: transparent;
}
.btn-warning:hover {
  background: var(--dc-warning);
  filter: brightness(1.08);
  color: white;
}

.btn-danger {
  background: var(--dc-danger);
  color: white;
  border-color: transparent;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--dc-danger) 35%, transparent);
}
.btn-danger:hover {
  background: var(--dc-danger);
  filter: brightness(1.05);
  color: white;
}
.btn-success:hover {
  background: var(--dc-success);
  border-color: var(--dc-success);
  color: #fff;
}

.btn-outline-primary {
  color: var(--dc-primary-strong);
  border-color: var(--dc-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: color-mix(in srgb, var(--dc-primary) 85%, #fff);
}
.btn-outline-secondary {
  color: var(--dc-text);
  border-color: var(--dc-border);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--dc-hover);
  color: var(--dc-text);
  border-color: var(--dc-text-muted);
}

/* Hover specifico per i bottoni di azione inline nelle righe di tabella
   (es. occhio "Apri dettaglio" in erp/index, shipments, ecc.):
   colore primary per indicare chiaramente l'interazione. */
.table tbody td .btn-outline-secondary:hover,
.dc-erp-table tbody td .btn-outline-secondary:hover,
.table tbody td a.btn:hover {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: var(--dc-primary);
}
.btn-outline-danger {
  color: var(--dc-danger);
  border-color: var(--dc-danger);
  background: transparent;
}
.btn-outline-danger:hover {
  background: var(--dc-danger-soft);
  color: var(--dc-danger);
  border-color: var(--dc-danger);
}

/* Bottone-azione a icona, quadrato e riusabile (es. "Report" a fine riga nelle
   tabelle). Tap target 32x32 (> minimo WCAG 2.5.8), quieto a riposo, hover =
   la convenzione di riga già in uso (primary-soft/-strong/-primary, righe ~4706).
   Light+dark si adattano dai token. Base per eventuali varianti semantiche. */
.dc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--dc-border);
  border-radius: 8px;
  background: transparent;
  color: var(--dc-text-muted);
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dc-icon-btn i { font-size: 15px; }
.dc-icon-btn:hover {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: var(--dc-primary);
}
.dc-icon-btn:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}

/* Success / Warning / Info: stesso pattern soft-tint degli altri outline.
   Senza queste regole ereditavano l'hover di Bootstrap (color:#fff) mentre la
   generica `.btn:hover { background: var(--dc-hover) }` riempiva di grigio
   chiaro → testo bianco su sfondo chiaro illeggibile. I token `-soft` sono
   theme-adattivi, quindi valgono in light e dark senza override dedicati. */
.btn-outline-success {
  color: var(--dc-success);
  border-color: var(--dc-success);
  background: transparent;
}
.btn-outline-success:hover {
  background: var(--dc-success-soft);
  color: var(--dc-success);
  border-color: var(--dc-success);
}
.btn-outline-warning {
  color: var(--dc-warning);
  border-color: var(--dc-warning);
  background: transparent;
}
.btn-outline-warning:hover {
  background: var(--dc-warning-soft);
  color: var(--dc-warning);
  border-color: var(--dc-warning);
}

/* Selettore esito visita (.dc-esito-choice): lo stato selezionato usa la stessa
   lingua soft-tint di badge ed esiti-board (theme-safe), invece dei riempimenti
   accesi di Bootstrap (giallo/rosso) o del verde-outline indistinguibile. */
.dc-esito-choice .btn-check:checked + .btn-outline-success { background: var(--dc-success-soft); color: var(--dc-success); border-color: var(--dc-success); }
.dc-esito-choice .btn-check:checked + .btn-outline-warning { background: var(--dc-warning-soft); color: var(--dc-warning); border-color: var(--dc-warning); }
.dc-esito-choice .btn-check:checked + .btn-outline-danger  { background: var(--dc-danger-soft);  color: var(--dc-danger);  border-color: var(--dc-danger); }
.btn-outline-info {
  color: var(--dc-info);
  border-color: var(--dc-info);
  background: transparent;
}
.btn-outline-info:hover {
  background: var(--dc-info-soft);
  color: var(--dc-info);
  border-color: var(--dc-info);
}

.dc-btn-surface:hover { background: var(--dc-hover); }

/* ==== FORM CONTROLS ==== */

.form-control,
.form-select {
  height: 38px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-family: var(--dc-font-sans);
  font-size: 13.5px;
  padding: 0 12px;
  outline: none;
  box-shadow: none;
  transition: var(--dc-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}
.form-control::placeholder {
  color: var(--dc-text-muted-2);
  opacity: .65;
}

/* Standardizziamo TUTTI gli input/select a 38px. Il modifier -sm di Bootstrap
   non riduce più l'altezza nei contesti form (filtri pagina): la differenza
   crea disordine percettivo all'operatore. Resta possibile usare .btn-sm per
   bottoni micro-inline (riga azione in tabella). */
.form-control-sm,
.form-select-sm {
  height: 38px;
  padding: 0 12px;
  font-size: 13.5px;
}

/* Marker campo obbligatorio: aggiungi la classe .dc-req al <label>. */
.dc-req::after {
  content: " *";
  color: var(--dc-danger);
  font-weight: 600;
}

/* Riga-tabella cliccabile (vedi app.js: tr[data-href]). Hover dato da .table-hover. */
tr.dc-row-link { cursor: pointer; }
tr.dc-row-link:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: -2px;
}

/* Barre orizzontali per i breakdown delle pagine stats (returns,
   warehouse_errors). CSS puro, niente chart library. Variante semantica
   solo dove la dimensione ha un significato (stati/esiti); dimensioni
   neutre usano il fill default primary. */
.dc-stat-bar {
  height: 22px;
  background: var(--dc-surface-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.dc-stat-bar__fill {
  height: 100%;
  background: var(--dc-primary);
  transition: width .4s ease;
}
.dc-stat-bar__fill--success { background: var(--dc-success); }
.dc-stat-bar__fill--warning { background: var(--dc-warning); }
.dc-stat-bar__fill--danger  { background: var(--dc-danger); }
.dc-stat-bar__fill--info    { background: var(--dc-info); }

/* Cella "Nota" nelle liste spedizioni: ultima nota del documento ERP per
   intero — il testo wrappa e la riga si alza (vedi erp_note_cell()).
   min/max-width tengono la colonna leggibile senza far esplodere la tabella. */
.dc-note-cell {
  min-width: 180px;
  max-width: 300px;
  white-space: normal;
}
.dc-note-cell__date {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  color: var(--dc-text-muted);
}

/* Intestazione tabella ordinabile: link nel <th> con caret di direzione.
   Riusabile: primo uso nelle liste "Da Monitorare". */
.dc-th-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.dc-th-sort:hover { color: var(--dc-primary); }
.dc-th-sort:focus-visible {
  color: var(--dc-primary);
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}
.dc-th-sort .bi { font-size: .95em; opacity: .75; }
.dc-th-sort.is-active .bi { opacity: 1; color: var(--dc-primary); }

/* Riga tabella spedizioni con nota di monitoraggio: sfondo rosso leggero (come
   il chip "in giacenza"). L'alert lampeggiante è il badge nella cella Nota. */
.dc-erp-table tbody tr.dc-row-monitor > td { background: color-mix(in srgb, var(--dc-danger) 7%, var(--dc-surface)); }
.dc-erp-table tbody tr.dc-row-monitor:hover > td { background: color-mix(in srgb, var(--dc-danger) 12%, var(--dc-surface)); }

/* Chevron che ruota quando il collapse associato è aperto (button[aria-expanded]). */
.dc-collapse-chevron { transition: transform .2s ease; font-size: .8em; opacity: .7; }
[aria-expanded="true"] .dc-collapse-chevron { transform: rotate(180deg); }

/* Catalogo: il toggle "Più filtri" è solo mobile; su desktop (≥992px) le
   faccette avanzate restano sempre visibili (annulla il .collapse di Bootstrap). */
@media (min-width: 992px) {
  .dc-cat-filters__more { display: block !important; }
}

textarea.form-control {
  height: auto;
  padding: 8px 12px;
  line-height: 1.5;
}

/* File input: il bottone nativo "Scegli file" non riempie i 38px del
   .form-control (padding verticale 0) e lasciava uno spazio vuoto sotto.
   Lo centriamo e lo facciamo stirare in altezza come segmento coerente. */
input[type="file"].form-control {
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
}
input[type="file"].form-control::file-selector-button {
  height: 100%;
  box-sizing: border-box;
  margin: 0 12px 0 0;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--dc-border);
  background: var(--dc-surface-2);
  color: var(--dc-text);
  font-family: var(--dc-font-sans);
  font-size: 13.5px;
  cursor: pointer;
}

.form-label {
  font-size: 10.5px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

.form-text {
  font-size: 11.5px;
  color: var(--dc-text-muted);
  margin-top: 4px;
}

.dc-date-input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  position: relative;
}
.dc-date-input:focus-within {
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}

.dc-date-input > i.bi-calendar3 {
  position: static;
  left: auto;
  color: var(--dc-text-muted);
  font-size: 14px;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
}
/* Specificità 0,3,2 per battere il vecchio (0,2,2):
   .dc-date-input input.form-control { padding: .4rem .7rem .4rem 2rem; ... } */
.dc-date-input input,
.dc-date-input input.form-control,
.dc-date-input .flatpickr-input + input.form-control {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13.5px;
  color: var(--dc-text);
  font-family: var(--dc-font-sans);
  padding: 0;
  height: auto;
  min-width: 0;
  box-shadow: none;
  border-radius: var(--dc-radius-sm);
  font-weight: 500;
  transition: var(--dc-transition);
  cursor: pointer;
}
.dc-date-input input:focus,
.dc-date-input input.form-control:focus,
.dc-date-input .flatpickr-input + input.form-control:focus {
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
}
/* dc-date-input--sm: forzato a 38px per uniformità con gli altri input
   nei filtri (Status select, Cerca, Tipo doc) — vedi commento sopra. */
.dc-date-input--sm { height: 38px; padding: 0 12px; }

/* Allineamento altezze nei form di filtro (Dashboard, BI, Spedizioni, ERP, ecc.):
   tutti gli elementi del filtro (input, select, date, button) devono avere
   stessa altezza 38px. Il modifier .btn-sm normalmente è 30px (per row-actions
   inline in tabella), ma DENTRO un <form> diventa 38px così FILTRA/AZZERA
   si allineano agli input. .dc-action-row (righe della card Azioni pratica)
   uniforma allo stesso formato anche i bottoni-link fuori form. */
.dc-date-filter .btn,
.dc-date-filter .btn-sm,
form .btn-sm,
form.row .btn-sm,
.card-body > form .btn-sm,
.dc-action-row .btn-sm {
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
}
.dc-date-filter .btn .bi,
form .btn-sm .bi,
.dc-action-row .btn-sm .bi {
  font-size: 13px;
}

/* Eccezione: .btn-sm dentro celle tabella (row actions: occhio "Apri dettaglio",
   trash inline, ecc.) torna a 30px per non gonfiare le righe. */
table .btn-sm,
.dc-erp-table .btn-sm,
td .btn-sm,
th .btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* Eccezione: .btn-sm in un <form> dentro l'header di pagina (azioni come
   Archivia/Riattiva, wrappate in form solo per il POST CSRF) restano a 30px,
   allineate ai bottoni-link adiacenti (Template/PDF/Rinomina). */
.dc-page-header form .btn-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}
.dc-page-header form .btn-sm .bi {
  font-size: 12px;
}

/* Cella row-actions con più bottoni affiancati (es. occhio + azione primaria):
   più aria dentro i bottoni (padding come il .btn standard) e gap 8px tra
   loro (i bottoni inline nudi distano ~2px, troppo poco tra due target).
   Altezza resta 30px da `table .btn-sm` per non gonfiare le righe. */
.dc-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dc-row-actions .btn-sm { padding: 0 14px; }

/* Tile-opzione selezionabile (griglia Opzioni della pratica assistenza):
   contenitore bordato che si accende quando la checkbox è spuntata, con
   l'eventuale campo input dentro la tile. Riusabile per griglie di scelte
   checkbox + dettaglio. */
.dc-option-tile {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 12px 14px;
  height: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.dc-option-tile:hover { border-color: var(--dc-border-strong); }
.dc-option-tile.is-checked {
  border-color: color-mix(in srgb, var(--dc-primary) 45%, var(--dc-border));
  background: var(--dc-primary-soft);
}
.dc-option-tile .form-check { margin-bottom: 0; }
.dc-option-tile .form-check-label { font-weight: 500; cursor: pointer; }

.form-check-input:checked {
  background-color: var(--dc-primary);
  border-color: var(--dc-primary);
}
.form-switch .form-check-input {
  background-color: var(--dc-surface);
  border-color: var(--dc-border-strong);
}
.form-switch .form-check-input:checked {
  background-color: var(--dc-primary);
  border-color: var(--dc-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
  border-color: var(--dc-primary);
}
/* Checkbox grande per selezione righe in tabella (es. modal lookup
   documenti): target più comodo dei 16px di default. La cella che la
   ospita (.dc-check-cell) è essa stessa cliccabile via JS. */
.form-check-input.dc-check-lg {
  width: 22px;
  height: 22px;
  margin-top: 0;
  vertical-align: middle;
  border-radius: 7px;
  cursor: pointer;
}
.dc-check-cell {
  cursor: pointer;
  vertical-align: middle;
}

.ts-control {
  min-height: 38px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  padding: 4px 8px;
}
.ts-control:focus-within {
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}
.ts-control .item {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: none;
}
.ts-dropdown {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  font-family: var(--dc-font-sans);
  margin-top: 4px;
  color: var(--dc-text);
  font-size: .875rem;
  z-index: 1080;
}
.ts-dropdown .option {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--dc-text);
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
}

/* Quill 2.0 */
.ql-toolbar.ql-snow {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-bottom: none;
  border-top-left-radius: var(--dc-radius);
  border-top-right-radius: var(--dc-radius);
}
.ql-container.ql-snow {
  border: 1px solid var(--dc-border);
  border-top: none;
  border-bottom-left-radius: var(--dc-radius);
  border-bottom-right-radius: var(--dc-radius);
  background: var(--dc-surface);
  font-family: var(--dc-font-sans);
  font-size: 13.5px;
  color: var(--dc-text);
}
.ql-snow .ql-stroke { stroke: var(--dc-text-muted); }
.ql-snow .ql-fill { fill: var(--dc-text-muted); }
.ql-snow .ql-picker { color: var(--dc-text-muted); }
.ql-snow .ql-active .ql-stroke,
.ql-snow button:hover .ql-stroke {
  stroke: var(--dc-primary-strong);
}
.ql-snow .ql-active .ql-fill,
.ql-snow button:hover .ql-fill {
  fill: var(--dc-primary-strong);
}
/* Editor Quill dentro una card-body p-0 (pagine invio email): la card è già il
   frame, quindi toolbar e container vanno flush — niente doppio bordo né angoli
   arrotondati a metà card. La toolbar tiene solo il divisore in basso. */
.card-body.p-0 > .ql-toolbar.ql-snow {
  border: 0;
  border-bottom: 1px solid var(--dc-border);
  border-radius: 0;
}
.card-body.p-0 > .ql-container.ql-snow {
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* ultimo elemento flush della card: prende il radius inferiore (= card outer
     meno il bordo), come fa la tabella flush più sopra. */
  border-bottom-left-radius: calc(var(--dc-radius-lg) - 1px);
  border-bottom-right-radius: calc(var(--dc-radius-lg) - 1px);
}

/* ==== CARD ==== */

.card {
  /* Aggiorna le variabili Bootstrap così .card-header:first-child eredita
     un border-top-radius coerente col card outer (Bootstrap calcola
     border-radius dell'header come var(--bs-card-inner-border-radius)). */
  --bs-card-border-radius: var(--dc-radius-lg);
  --bs-card-inner-border-radius: calc(var(--dc-radius-lg) - 1px);
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: none;
  /* niente overflow: hidden sul .card nudo — clipperebbe i dropdown
     TomSelect/Bootstrap (position:absolute) dentro il card. Lo applichiamo
     in modo MIRATO solo alle card il cui ultimo figlio è una tabella flush,
     via :has() (vedi regola più sotto), dove non ci sono dropdown da clippare. */
  position: relative;
}

/* Card con bordo di enfasi "danger" (es. card Campagna recupero): 2px, token-driven. */
.dc-card-danger { border: 2px solid var(--dc-border-danger, var(--dc-danger)); }

/* Quando la table-responsive è PRIMO child del card (no card-header sopra):
   applichiamo border-top-radius esplicito sul thead per coerenza con card outer. */
.card > .table-responsive:first-child .table thead tr:first-child th:first-child,
.card > .table-responsive:first-child .dc-erp-table thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--dc-radius-lg) - 1px);
}
.card > .table-responsive:first-child .table thead tr:first-child th:last-child,
.card > .table-responsive:first-child .dc-erp-table thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--dc-radius-lg) - 1px);
}

/* Quando la table-responsive è ULTIMO child del card (no card-footer sotto):
   l'ultima riga (.table tbody tr:last-child td) prende border-bottom-radius. */
.card > .table-responsive:last-child .table tbody tr:last-child td:first-child,
.card > .table-responsive:last-child .dc-erp-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--dc-radius-lg) - 1px);
}
.card > .table-responsive:last-child .table tbody tr:last-child td:last-child,
.card > .table-responsive:last-child .dc-erp-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--dc-radius-lg) - 1px);
}
/* ...e l'ultima riga non porta border-bottom: raddoppierebbe col bordo inferiore del card. */
.card > .table-responsive:last-child .table tbody tr:last-child > *,
.card > .table-responsive:last-child .dc-erp-table tbody tr:last-child > * {
  border-bottom: 0;
}

.card-header {
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-border);
  padding: 14px 18px;
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--dc-text);
}
.card-header strong {
  font-family: var(--dc-font-display);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.015em;
}
/* Sottotitoli/conteggi dentro l'header (es. "8 totali"): non capitalize */
.card-header .text-muted,
.card-header .text-muted.small {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--dc-font-sans);
  font-weight: 500;
  font-size: 12px;
}

.card-body { padding: 16px 18px; }

.card-footer {
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-border);
  color: var(--dc-text-muted);
  font-size: 12.5px;
  /* Override esplicito: il vecchio app.css forza border-radius 6px qui.
     Riprendiamo il radius coerente col card outer (14px - 1px del border). */
  border-radius: 0 0 calc(var(--dc-radius-lg) - 1px) calc(var(--dc-radius-lg) - 1px);
}

.card.border-primary { border-color: var(--dc-primary); }
.card.border-warning { border-color: var(--dc-warning); }
.card.border-danger  { border-color: var(--dc-danger); }

/* ==== TABELLA ==== */

.table,
.dc-erp-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--dc-text);
  --bs-table-border-color: var(--dc-border);
  --bs-table-striped-bg: var(--dc-surface-2);
  --bs-table-hover-bg: var(--dc-hover);
  margin-bottom: 0;
  font-size: 13px;
  font-family: var(--dc-font-sans);
}

.table > :not(caption) > * > * {
  padding: 12px 14px;
  border-bottom-color: var(--dc-border);
}

.table thead th,
.dc-erp-table thead th {
  background: var(--dc-surface-2);
  color: var(--dc-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--dc-border);
  white-space: nowrap;
}

.table tbody tr:hover,
.table-hover tbody tr:hover {
  --bs-table-accent-bg: var(--dc-hover);
}

.dc-erp-table td.text-nowrap:first-child,
.dc-doc-lines td:first-child,
.dc-doc-lines td:last-child,
.dc-status-badge__date,
.dc-mono,
.text-mono {
  font-family: var(--dc-font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

/* Tfoot su surface-2 con border-top netto. Reset di --bs-table-bg per
   neutralizzare il light beige di <tr class="table-light"> di Bootstrap. */
.table tfoot td,
.table tfoot th {
  background: var(--dc-surface-2);
  border-top: 1px solid var(--dc-border-strong);
  color: var(--dc-text);
  font-weight: 600;
}
.table tfoot tr.table-light {
  --bs-table-bg: var(--dc-surface-2);
  --bs-table-color: var(--dc-text);
}
.table tfoot tr.table-light > * {
  background: var(--dc-surface-2);
  color: var(--dc-text);
}
/* Tabella flush come ULTIMO figlio diretto della card (table-responsive, table
   nuda, o wrapper ajax winback): la card ritaglia il contenuto al proprio
   border-radius, così gli angoli quadrati della tabella e il footer tinto
   (.table tfoot → surface-2) non sporgono oltre i corner arrotondati. Scope
   :has() MIRATO: niente overflow:hidden sul .card nudo (clipperebbe i dropdown
   TomSelect/Bootstrap, vedi .card sopra) — queste card non contengono
   dropdown/popover (verificato app-wide). Sostituisce il vecchio
   border-radius sui <td>, che era inerte perché le .table sono
   border-collapse: collapse (raggio sui cell ignorato dal browser). */
.card:has(> .table-responsive:last-child),
.card:has(> .table:last-child),
.card:has(> [data-wb-ajax]:last-child) {
  overflow: hidden;
}

.dc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--dc-radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--dc-font-sans);
  letter-spacing: 0;
  background: var(--dc-surface-2);
  color: var(--dc-text-muted);
  border: none;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.dc-status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  opacity: .9;
}
.dc-status-badge--success {
  background: var(--dc-success-soft);
  color: #16a34a;
}
.dc-status-badge--success-soft {
  background: var(--dc-success-soft);
  color: #2f8a4a;
}
.dc-status-badge--warning {
  background: var(--dc-warning-soft);
  color: #c4711d;
}
.dc-status-badge--danger {
  background: var(--dc-danger-soft);
  color: #c93535;
}
.dc-status-badge--secondary {
  background: var(--dc-surface-2);
  color: #707a86;
}
/* Dot interno (::before) è già `background: currentColor` da regola base,
   quindi eredita automaticamente il colore vivace del testo. */

.badge.bg-secondary-subtle {
  background: var(--dc-surface-2) !important;
  color: var(--dc-text-muted) !important;
  border: 1px solid var(--dc-border) !important;
  font-family: var(--dc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--dc-radius);
}

.badge.bg-danger-subtle {
  background: var(--dc-danger-soft) !important;
  color: var(--dc-danger) !important;
  border: 1px solid var(--dc-danger-soft) !important;
}

/* ==== KPI TILE ==== */

.dc-kpi {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--dc-text);
  transition: all var(--dc-transition);
}
a.dc-kpi:hover,
.dc-kpi--link:hover {
  transform: translateY(-1px);
  box-shadow: var(--dc-shadow);
  border-color: var(--dc-primary-2);
}

.dc-kpi__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--dc-radius-md);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  border: 1px solid color-mix(in srgb, var(--dc-primary) 25%, transparent);
  flex: 0 0 auto;
}

.dc-kpi__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dc-kpi__label {
  font-size: 11px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.dc-kpi__value {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -0.035em;
  color: var(--dc-text);
  line-height: 1;
  flex: 0 0 auto;
  font-feature-settings: "zero";
}

.dc-kpi__cta {
  margin-left: auto;
  color: var(--dc-primary-strong);
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  transition: transform var(--dc-transition);
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  font-family: var(--dc-font-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
}
.dc-kpi:hover .dc-kpi__cta { transform: translateX(2px); }

.dc-kpi--warning .dc-kpi__icon {
  background: var(--dc-warning-soft);
  color: var(--dc-warning);
}
.dc-kpi--warning {
  border-color: transparent;
  box-shadow: var(--dc-shadow-warn);
}
.dc-kpi--warning .dc-kpi__cta { color: var(--dc-warning); }

.dc-kpi--danger .dc-kpi__icon {
  background: var(--dc-danger-soft);
  color: var(--dc-danger);
}
.dc-kpi--danger {
  border-color: transparent;
  box-shadow: var(--dc-shadow-danger);
}
.dc-kpi--danger .dc-kpi__cta { color: var(--dc-danger); }

.dc-kpi--success .dc-kpi__icon {
  background: var(--dc-success-soft);
  color: var(--dc-success);
}
.dc-kpi--info .dc-kpi__icon {
  background: var(--dc-info-soft);
  color: var(--dc-info);
}

/* ==== KPI --link (hub Pratiche) — consolidato 2026-07-15: la base
   .dc-kpi duplicata che stava qui è stata rimossa (vinceva comunque
   quella più sotto) e questa sezione è stata spostata DOPO la base,
   così il display:grid della variante --link ha finalmente effetto. */
.dc-kpi:hover { transform: translateY(-1px); box-shadow: var(--dc-shadow-lg); }

.dc-kpi__body .dc-kpi__label { flex: 0 0 auto; }

.dc-kpi--link {
  position: relative;
  display: grid;
  /* label = minmax(min-content,1fr): la colonna non scende MAI sotto la
     parola più lunga → niente lettere incolonnate; a stringere sono gli
     spazi, e sotto ancora la riga wrappa per parole intere. */
  grid-template-columns: auto minmax(min-content, 1fr) auto;
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  row-gap: 0;
  align-items: center;
  min-height: 120px;
  padding: 1.15rem 1.35rem 1.4rem;
  text-decoration: none !important;
  color: var(--dc-text);
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Rail laterale: lateral primary band, visible always but thicker on hover. */
.dc-kpi--link::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: var(--dc-primary);
  opacity: .85;
  transition: width .18s ease, opacity .18s ease;
}
.dc-kpi--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--dc-shadow-lg);
  border-color: color-mix(in srgb, var(--dc-primary) 55%, var(--dc-border-strong));
  color: var(--dc-text);
}
.dc-kpi--link:hover::before { width: 7px; opacity: 1; }

/* Header in singola riga (grid): icona — titolo — count.
   Il titolo è il protagonista visivo, il count il dato di servizio. */
.dc-kpi--link .dc-kpi__icon {
  grid-column: 1; grid-row: 1;
  width: 48px; height: 48px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--dc-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc-primary) 30%, transparent);
  color: var(--dc-primary);
  font-size: 1.4rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.dc-kpi--link:hover .dc-kpi__icon {
  background: var(--dc-primary);
  color: #fff;
  transform: rotate(-3deg) scale(1.05);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--dc-primary) 28%, transparent);
}
.dc-kpi--link .dc-kpi__label {
  grid-column: 2; grid-row: 1;
  position: relative;
  display: block;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;  /* override del generico .dc-kpi__label uppercase */
  color: var(--dc-text);
  line-height: 1.1;
  padding-bottom: .35rem;
}

.dc-kpi--link .dc-kpi__label::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: var(--dc-primary);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.dc-kpi--link:hover .dc-kpi__label::after { width: 44px; }
/* Variante warning: underline anch'essa orange. */
.dc-kpi--link.dc-kpi--warning .dc-kpi__label::after { background: var(--dc-warning); }

.dc-kpi--link .dc-kpi__value {
  grid-column: 3; grid-row: 1;
  justify-self: end;
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--dc-primary);
  line-height: .95;
  font-feature-settings: "tnum";
}
/* CTA in basso-destra: appare al hover. */
.dc-kpi--link:hover .dc-kpi__cta {
  opacity: 1;
  transform: translateX(0);
  gap: .5rem;
}

.dc-kpi--link.dc-kpi--warning::before { background: var(--dc-warning); }
.dc-kpi--link.dc-kpi--warning .dc-kpi__icon {
  background: color-mix(in srgb, var(--dc-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--dc-warning) 35%, transparent);
  color: var(--dc-warning);
}
.dc-kpi--link.dc-kpi--warning:hover .dc-kpi__icon {
  background: var(--dc-warning);
  color: #1c1917;
}
.dc-kpi--link.dc-kpi--warning .dc-kpi__value,
.dc-kpi--link.dc-kpi--warning .dc-kpi__cta { color: var(--dc-warning); }
.dc-kpi--link.dc-kpi--warning:hover {
  border-color: color-mix(in srgb, var(--dc-warning) 55%, var(--dc-border-strong));
}

.dc-kpi-tile {
  /* Variabile gradient interna: ogni variant la sovrascrive col proprio
     colore (vivace, come gli status-dot). Niente più border-left colorato:
     il colore vive solo nella "linea che corre" sul top al hover. */
  --dc-kpi-accent: linear-gradient(90deg, #5b7ca8 0%, #7a99c5 100%);
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--dc-text);
  display: block;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Linea orizzontale 3px al top — parte invisibile, al hover "corre" da sx
   a dx in 0.35s con gradient luminoso. Pattern delle carrier card BRT/GLS. */
.dc-kpi-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--dc-kpi-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.dc-kpi-tile:hover::after {
  transform: scaleX(1);
}
/* Hover: solo la linea che corre nello ::after, niente lift/shadow/filter. */
.dc-kpi-tile:hover,
.dc-kpi-tile:focus-visible,
a.dc-kpi-tile:hover {
  background: var(--dc-surface);
  transform: none;
  box-shadow: none;
  filter: none;
}
/* Icona a SINISTRA, valore a DESTRA (invertito rispetto al naturale flow
   del PHP). Usiamo row-reverse così non tocchiamo il markup. */
.dc-kpi-tile__head {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  min-width: 0;
}
.dc-kpi-tile__value {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: normal;
  color: var(--dc-text);
}
/* Mobile: sui tile a 2 colonne (~158px) un valore valuta largo ("€ 401.602")
   a 34px non entra accanto all'icona da 36px → sfonderebbe la head spingendo
   l'icona fuori schermo. Riduciamo il valore così l'icona resta dentro e le
   cifre non vengono mai troncate. */
@media (max-width: 767.98px) {
  .dc-kpi-tile__value { font-size: 26px; }
}
.dc-kpi-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--dc-radius);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 1;
  flex-shrink: 0;
}
.dc-kpi-tile__label {
  font-family: var(--dc-font-sans);
  font-size: 11px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  font-feature-settings: normal;
  line-height: 1.25;
  /* Va a capo invece di troncare con ellissi: le label status sono corte ma
     "Dati trasmessi a BRT" non entra su una riga in tile strette. Clamp a 2
     righe → cap di sicurezza per label anomale, senza sfondare la tile. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* Riga di contesto opzionale sotto la label (es. KPI kit: "736 su 1066"). */
.dc-kpi-tile__sub {
  font-size: 12px;
  color: var(--dc-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

/* Variant: gradient luminosi coerenti con la scala status-dot vivace.
   Vanno da una tinta saturata a una versione più chiara → la linea "corre"
   come un'onda di colore al hover. */
.dc-kpi-tile--success {
  --dc-kpi-accent: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}
.dc-kpi-tile--success .dc-kpi-tile__icon { background: var(--dc-success-soft); color: #16a34a; }

.dc-kpi-tile--success-soft {
  --dc-kpi-accent: linear-gradient(90deg, #2f8a4a 0%, #6cbb83 100%);
}
.dc-kpi-tile--success-soft .dc-kpi-tile__icon { background: var(--dc-success-soft); color: #2f8a4a; }

.dc-kpi-tile--warning {
  --dc-kpi-accent: linear-gradient(90deg, #e88838 0%, #fbbf67 100%);
}
.dc-kpi-tile--warning .dc-kpi-tile__icon { background: var(--dc-warning-soft); color: #c4711d; }

.dc-kpi-tile--danger {
  --dc-kpi-accent: linear-gradient(90deg, #d04848 0%, #f87171 100%);
}
.dc-kpi-tile--danger .dc-kpi-tile__icon { background: var(--dc-danger-soft); color: #c93535; }

.dc-kpi-tile--info {
  --dc-kpi-accent: linear-gradient(90deg, #0891b2 0%, #22d3ee 100%);
}
.dc-kpi-tile--info .dc-kpi-tile__icon { background: var(--dc-info-soft); color: #0e7490; }

.dc-kpi-tile--secondary {
  --dc-kpi-accent: linear-gradient(90deg, #707a86 0%, #a3acb7 100%);
}
.dc-kpi-tile--secondary .dc-kpi-tile__icon { background: var(--dc-bg); color: var(--dc-text-muted); }

/* ==== KPI BI executive ==== */

.dc-bi-kpi {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 16px 18px;
  position: relative;
  box-shadow: var(--dc-shadow);
  height: 100%;
  transition: var(--dc-transition);
  overflow: hidden;
}

.dc-bi-kpi__label {
  font-size: 11px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  font-family: var(--dc-font-mono);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
}

.dc-bi-kpi__value {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 6px;
  color: var(--dc-text);
  font-feature-settings: "tnum";
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.dc-bi-kpi__value-unit {
  font-size: 14px;
  color: var(--dc-text-muted);
  font-weight: 500;
  margin-left: 2px;
  font-family: var(--dc-font-sans);
  letter-spacing: 0;
}

.dc-bi-kpi__sub {
  font-size: 12px;
  color: var(--dc-text-muted);
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--dc-font-mono);
  font-feature-settings: "tnum";
}

.dc-bi-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--dc-radius-sm);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--dc-font-mono);
  margin-right: .35rem;
}
.dc-bi-kpi__delta--up   { background: var(--dc-success-soft); color: var(--dc-success); }
.dc-bi-kpi__delta--down { background: var(--dc-danger-soft);  color: var(--dc-danger); }
.dc-bi-kpi__delta--flat { background: var(--dc-surface-2);    color: var(--dc-text-muted); }

.dc-bi-kpi--accent {
  background: linear-gradient(135deg, var(--dc-primary-strong) 0%, var(--dc-primary) 100%);
  border-color: transparent;
  color: white;
}
.dc-bi-kpi--accent .dc-bi-kpi__label { color: var(--dc-primary-3); }
.dc-bi-kpi--accent .dc-bi-kpi__value { color: white; }
.dc-bi-kpi--accent .dc-bi-kpi__value-unit { color: var(--dc-primary-3); }
.dc-bi-kpi--accent .dc-bi-kpi__sub { color: var(--dc-primary-3); }
.dc-bi-kpi--accent .dc-bi-kpi__delta--up { background: rgba(255,255,255,0.18); color: #c8e6cf; }
.dc-bi-kpi--accent .dc-bi-kpi__delta--down { background: rgba(255,255,255,0.18); color: #f4b9b9; }

/* ==== COMPONENTI RICCHI ==== */

/* Foldable */
.dc-foldable {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* icona | contenuto | chevron */
  grid-template-rows: auto auto;        /* riga 1: titolo+count · riga 2: stamp */
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  text-decoration: none;
  color: var(--dc-text);
  transition: all var(--dc-transition);
  height: 100%;
}
.dc-foldable:hover {
  transform: translateY(-1px);
  box-shadow: var(--dc-shadow);
}

.dc-foldable__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: var(--dc-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.dc-foldable__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dc-foldable__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--dc-radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.dc-foldable__meta {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-width: 0;
}
.dc-foldable__stamp {
  font-family: var(--dc-font-mono);
  font-size: 10.5px;
  color: var(--dc-text-muted);
  letter-spacing: 0.02em;
  background: transparent;
  border: none;
  padding: 0;
}

.dc-foldable__chevron {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  color: var(--dc-text-muted-2);
  font-size: 18px;
}

.dc-foldable--pickup .dc-foldable__icon { background: var(--dc-success-soft); color: var(--dc-success); }
.dc-foldable--pickup .dc-foldable__count { background: var(--dc-success); }
.dc-foldable--late .dc-foldable__icon { background: var(--dc-danger-soft); color: var(--dc-danger); }
.dc-foldable--late .dc-foldable__count { background: var(--dc-danger); }
.dc-foldable--giacenza .dc-foldable__icon { background: var(--dc-warning-soft); color: var(--dc-warning); }
.dc-foldable--giacenza .dc-foldable__count { background: var(--dc-warning); }
.dc-foldable--monitored .dc-foldable__icon { background: var(--dc-orange-soft); color: var(--dc-orange); }
.dc-foldable--monitored .dc-foldable__count { background: var(--dc-orange); }

/* Card del dettaglio documento (pannelli collapse aperti da un bottone + card
   display di stato): look uniforme "flat primary" invece di un colore semantico
   per contesto — bordo, titolo e icona (in un quadratino soft) su --dc-primary. */
.card.dc-action-panel { border-color: var(--dc-primary); }
.dc-action-panel > .card-header > strong { color: var(--dc-primary-strong); }
.dc-action-panel > .card-header > .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--dc-radius-md);
  background: var(--dc-primary-soft);
  color: var(--dc-primary);
  font-size: 15px;
  flex-shrink: 0;
}

/* Carrier card */
.dc-carrier-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
}

.dc-carrier-card__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: .85rem;
}

.dc-carrier-card__head img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

.dc-carrier-card__totals {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.dc-carrier-card__total {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--dc-text);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.dc-carrier-card__transit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-warning-soft);
  color: var(--dc-warning);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--dc-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.dc-carrier-sedi { padding: 4px 4px 8px;   margin-top: 1rem;
  border-top: 1px solid var(--dc-border);
  --dc-sede-cols: 1fr 5rem 5rem 1.25rem;
}
.dc-carrier-sedi__head {
  padding: 8px 16px;
  font-size: 10.5px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  display: grid;
  grid-template-columns: 1fr 80px 80px 24px;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--dc-border);
}
.dc-carrier-sedi__head .text-end { text-align: right; }

.dc-carrier-sede {
  padding: 10px 16px;
  border-radius: var(--dc-radius-md);
  display: grid;
  grid-template-columns: 1fr 80px 80px 24px;
  align-items: center;
  text-decoration: none;
  color: var(--dc-text);
  gap: 1rem;
  border-bottom: 1px solid var(--dc-border);
  transition: background-color .18s ease, padding-left .18s ease;
}
.dc-carrier-sede:hover { background: var(--dc-hover);   color: var(--dc-text);
  padding-left: .55rem;
}

.dc-carrier-sede__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  min-width: 0;
}

.dc-carrier-sede__num {
  text-align: right;
  font-family: var(--dc-font-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dc-text);
  font-feature-settings: "tnum" 1, "zero" 1;
  justify-self: end;
}
.dc-carrier-sede__num--transit { color: var(--dc-warning); }

.dc-carrier-sede__chevron {
  color: var(--dc-text-muted-2);
  text-align: right;
  font-size: .85rem !important;
  opacity: .6;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* Info tile */





.dc-info-tile__sub a {
  color: var(--dc-text-muted);
  text-decoration: none;
}
.dc-info-tile__sub a:hover { color: var(--dc-primary-strong); }



/* Giacenza alert */






/* Timeline */
.dc-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.dc-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--dc-border);
  border-radius: 2px;
}

.dc-timeline__item {
  position: relative;
  padding: 0 0 18px 28px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
  background: transparent;        /* cancella linear-gradient del vecchio --current */
  margin: 0;                      /* cancella margin: 0 -.5rem .25rem del vecchio --current */
  border-radius: 0;
  flex-direction: column;
}
.dc-timeline__item:last-child { padding-bottom: 0; }

.dc-timeline__item--current {
  padding-left: 28px;
}


.dc-timeline__dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--dc-surface);
  box-shadow: 0 0 0 2px #a3acb7;
  background: #a3acb7;
  z-index: 1;
}
/* Stessa scala vivace di .dc-status-dot — il dot timeline replica il dot
   del filtro status per coerenza visiva fra lista filtri e timeline evento. */
.dc-timeline__dot--success      { background: #16a34a; box-shadow: 0 0 0 2px #16a34a; }
.dc-timeline__dot--success-soft { background: #6cbb83; box-shadow: 0 0 0 2px #6cbb83; }
.dc-timeline__dot--warning      { background: #e88838; box-shadow: 0 0 0 2px #e88838; }
.dc-timeline__dot--danger       { background: #d04848; box-shadow: 0 0 0 2px #d04848; }
.dc-timeline__dot--secondary    { background: #a3acb7; box-shadow: 0 0 0 2px #a3acb7; }

/* "Stato attuale": stessa dimensione degli altri (16px, niente shift),
   ma ring esterno più ampio in tinta soft del colore corrente. */
.dc-timeline__item--current .dc-timeline__dot--success      { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.22); }
.dc-timeline__item--current .dc-timeline__dot--success-soft { box-shadow: 0 0 0 5px rgba(108, 187, 131, 0.28); }
.dc-timeline__item--current .dc-timeline__dot--warning      { box-shadow: 0 0 0 5px rgba(232, 136, 56, 0.22); }
.dc-timeline__item--current .dc-timeline__dot--danger       { box-shadow: 0 0 0 5px rgba(208, 72, 72, 0.22); }
.dc-timeline__item--current .dc-timeline__dot--secondary    { box-shadow: 0 0 0 5px rgba(163, 172, 183, 0.30); }
/* Fallback se item--current senza variante esplicita */
.dc-timeline__item--current .dc-timeline__dot {
  box-shadow: 0 0 0 5px rgba(108, 187, 131, 0.28);
  left: 0;
}

.dc-timeline__time {
  font-family: var(--dc-font-mono);
  font-size: 12px;
  color: var(--dc-text-muted);
  font-weight: 500;
  padding-top: 2px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.dc-timeline__desc {
  font-family: var(--dc-font-sans);
  font-size: 13.5px;
  color: var(--dc-text);
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: normal;
  line-height: 1.35;
}

.dc-timeline__meta {
  display: block;
  font-family: var(--dc-font-sans);
  font-size: 12px;
  color: var(--dc-text-muted);
  margin-top: 3px;
  letter-spacing: 0;
  font-feature-settings: normal;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
}

.dc-timeline__empty {
  text-align: center;
  padding: 30px;
  color: var(--dc-text-muted);
  font-size: 13px;
}

/* ==== PAGE HEADER ==== */

.dc-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
/* Cluster di azioni a destra dell'header pagina (bottoni separati): gap
   coerente, va a capo su mobile. */
.dc-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Quando un page-header contiene un subtitle, mantieni lo stesso respiro
   verso il contenuto sottostante: 40px lasciano spazio sufficiente a
   separare visivamente "intestazione" da "corpo pagina". */
.dc-page-header--with-subhead {
  margin-bottom: 40px;
}
/* Eccezione: quando subito dopo l'header c'è una CTA-bar di sezione
   (es. la nav 5 voci di Agenti), gap stretto perché la nav-bar fa
   parte concettualmente dell'intestazione. */
.dc-page-header:has(+ .dc-agents-nav),
.dc-page-header--with-subhead:has(+ .dc-agents-nav) {
  margin-bottom: 12px;
}

.dc-page-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dc-page-title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  /* wrap: i badge di stato accodati al titolo vanno a capo invece di
     generare scroll orizzontale globale su mobile (regola CLAUDE.md) */
  flex-wrap: wrap;
  gap: 10px;
}
/* Icone Bootstrap inline dentro i titoli pagina: rimpicciolite e tinte
   accent così non rubano peso visivo al titolo. */
.dc-page-title > .bi,
.dc-page-title > i.bi {
  font-size: 0.7em;
  color: var(--dc-primary);
  background: var(--dc-primary-soft);
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--dc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dc-page-subtitle {
  color: var(--dc-text-muted);
  font-size: 13.5px;
  margin: 4px 0 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.dc-page-subtitle strong {
  color: var(--dc-text);
  font-weight: 600;
  font-family: var(--dc-font-mono);
  letter-spacing: 0;
  text-transform: none;
}

.dc-carrier-logo--lg {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.dc-loc-filter {
  display: inline-flex;
  gap: 4px;
  background: var(--dc-bg);
  padding: 4px;
  border-radius: var(--dc-radius-pill);
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow);
}
.dc-loc-filter a {
  padding: 7px 16px;
  border-radius: var(--dc-radius-pill);
  font-size: 13px;
  background: var(--dc-surface);
  color: var(--dc-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dc-transition);
  border: 1px solid transparent;
  font-weight: 500;
}
.dc-loc-filter a:hover {
  color: var(--dc-text);
  background: var(--dc-hover);
}
.dc-loc-filter a.active {
  background: var(--dc-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 6px -2px rgba(91, 124, 168, 0.45);
}
.dc-loc-filter a.active i,
.dc-loc-filter a.active .bi {
  color: white;
}
.dc-loc-filter a i,
.dc-loc-filter a .bi {
  color: var(--dc-text-muted);
  font-size: 13px;
}

/* ==========================================================================
   Shipments toolbar: loc filter (con logo corriere come primo elemento
   decorativo) + bottone refresh.
   ========================================================================== */

.dc-shipments-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
/* Cluster destro della toolbar: chip count + bottoni azione laterali */
.dc-shipments-toolbar > .d-flex {
  margin-left: auto;
}
/* Bottoni laterali (es. "Storico", "Tutte le spedizioni"): radius pill
   per coerenza col loc filter e chip count accanto, sfondo bianco
   esplicito per stagliarsi dal grigio del background pagina. */
.dc-shipments-toolbar .btn {
  border-radius: var(--dc-radius-pill);
  background: var(--dc-surface);
}
.dc-shipments-toolbar .btn:hover {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: var(--dc-primary);
}

/* Logo corriere all'inizio del loc filter (decorativo, non cliccabile) */
.dc-loc-filter__brand {
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 8px;
  margin-right: 2px;
  border-right: 1px solid var(--dc-border);
  pointer-events: none;
}
.dc-loc-filter__brand-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Bottone "Aggiorna spedizioni" — funzione centrale della pagina,
   sfondo primary solid coerente con CTA principali. Radius pill per
   restare coerente col loc-filter accanto, shadow accent per "alzarsi"
   (regola "shadow selettiva su CTA principali"). */
.dc-loc-refresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--dc-radius-pill);
  background: var(--dc-primary);
  border: 1px solid transparent;
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--dc-font-sans);
  cursor: pointer;
  transition: all var(--dc-transition);
  box-shadow: var(--dc-shadow-accent);
}
.dc-loc-refresh:hover {
  background: var(--dc-primary);
  color: white;
  filter: brightness(1.05);
  border-color: transparent;
}
.dc-loc-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}
.dc-loc-refresh .bi {
  color: white;
  font-size: 14px;
}

/* ==== CONFIG HUB (admin/index.php) ==== */
/* Grid di tile cliccabili per le voci di amministrazione. Stessa famiglia
   visiva del KPI tile (hover lift, border-left accent) ma layout adattato
   per "icona + titolo + descrizione" anziché "valore + label". */
.dc-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dc-config-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--dc-border);
  border-left: 4px solid var(--dc-primary);
  border-radius: var(--dc-radius);
  background: var(--dc-surface);
  color: var(--dc-text);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dc-config-tile:hover,
.dc-config-tile:focus-visible {
  text-decoration: none;
  color: var(--dc-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
  border-left-color: var(--dc-primary-strong);
}
.dc-config-tile:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}
.dc-config-tile__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dc-radius-sm);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  font-size: 18px;
}
.dc-config-tile__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-config-tile__title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--dc-text);
}
.dc-config-tile__desc {
  font-size: 12px;
  color: var(--dc-text-muted);
  line-height: 1.4;
}
.dc-config-tile__chevron {
  align-self: center;
  color: var(--dc-text-muted);
  font-size: 14px;
  transition: transform .15s ease, color .15s ease;
}
.dc-config-tile:hover .dc-config-tile__chevron {
  color: var(--dc-primary);
  transform: translateX(2px);
}

/* Kicker = nome modulo (livello 2) sopra l'azione (livello 3). La sezione
   (livello 1) sta nell'header di banda, quindi non si ripete sulla tile. */
.dc-config-tile__kicker {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  /* --dc-text-muted (non -muted-2): il kicker è l'UNICO posto dove rendo il
     livello "modulo", quindi deve passare WCAG AA (4.5:1), non 2.56:1. */
  color: var(--dc-text-muted);
  line-height: 1.2;
}

/* Banda: raggruppa le tile per sezione sidebar. Etichetta (riusa
   .dc-section-title) + conteggio + hairline, poi la .dc-config-grid. */
.dc-config-band {
  margin-bottom: 22px;
}
.dc-config-band:last-child {
  margin-bottom: 0;
}
.dc-config-band__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--dc-border);
}
.dc-config-band__head .dc-section-title {
  margin: 0;
}
.dc-config-band__count {
  margin-left: auto;
  font-family: var(--dc-font-mono);
  font-size: 11px;
  color: var(--dc-text-muted);
}
/* "Sistema" non è una sezione sidebar (admin globale): label più quieta. */
.dc-config-band--sys .dc-section-title {
  color: var(--dc-text-muted-2);
}

/* ==== EMPTY STATE ==== */

/* Empty state card — coerente con il pattern del design system.
   Card centrata (max-width) con bordo solid leggero e padding generoso.
   Icona Bootstrap dentro un cerchio SVG (renderizzato dal PHP) accent. */
.dc-empty {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 56px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}

/* Variante inline: niente bordo né bg (usata dentro <td>/altri wrapper). */
.dc-empty--inline {
  background: transparent;
  border: none;
  padding: 36px 16px;
}

/* Empty-state DENTRO un card BI: il card ha già bordo+sfondo → niente
   "riquadro nel riquadro", anche senza il modifier --inline nel markup. */
.dc-bi-card .dc-empty {
  background: transparent;
  border: none;
  padding: 32px 16px;
}

/* L'art è renderizzata dal PHP come <div.dc-empty__art><svg/><i.bi/></div>:
   SVG di 84px (2 cerchi concentrici) + icona Bootstrap 28px sovrapposta
   tramite margin-top: -56px inline. Coloriamo entrambi in accent. */
.dc-empty__art {
  color: var(--dc-primary);
  margin-bottom: 6px;
}
.dc-empty__art svg {
  color: var(--dc-primary);
}

/* Solo l'icona dell'art principale (dc-empty__art) eredita lo stile
   tonto accent. Le altre icone dentro .dc-empty (es. quella del CTA
   primary, che sta su sfondo accent) restano col loro stile bottone
   nativo (bianco su accent). */
.dc-empty__art .bi {
  width: auto;
  height: auto;
  background: transparent;
  display: block;
  color: var(--dc-primary);
  font-size: 28px;
  border-radius: 0;
}

/* Forma "semplice" dell'empty (icona Bootstrap diretta, senza __art):
   le icone CTA stanno dentro <a>/<button>, quindi NON sono figlie dirette. */
.dc-empty > .bi {
  font-size: 28px;
  color: var(--dc-primary);
}

.dc-empty__title,
.dc-empty h2,
.dc-empty h3 {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--dc-text);
  margin: 0;
}

.dc-empty__copy,
.dc-empty p {
  color: var(--dc-text-muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0;
}

.dc-empty__cta {
  margin-top: 10px;
}

/* Landing "Campagna KIT": griglia di card-kit cliccabili, hero = conversion
   rate. Riusa i token; light+dark si adattano da sé. */
.dc-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.dc-kit-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 14px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--dc-text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dc-kit-card:hover {
  border-color: var(--dc-primary);
  box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .35);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--dc-text);
}
.dc-kit-card__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-kit-card__hero {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 34px;
  line-height: 1.05;
  color: var(--dc-success);
}
.dc-kit-card__sub {
  font-size: 11px;
  color: var(--dc-text-muted);
  margin-bottom: 8px;
}
.dc-kit-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--dc-text-muted);
}
.dc-kit-card__cta {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dc-primary-strong);
}
/* Thumbnail immagine kit (admin) */
.dc-kit-thumb {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dc-text-muted); font-size: 22px;
  flex: 0 0 auto;
}
/* Riga "Immagine" del form kit (admin): anteprima + file input + rimuovi, in linea */
.dc-kit-imgfield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dc-kit-imgfield__input { max-width: 300px; }
/* Immagine in cima alla card-kit (landing): a tutta larghezza, altezza naturale
   → si vede l'intera foto (no crop, no letterbox). min-height regge il placeholder
   quando il kit non ha immagine. */
.dc-kit-card__image {
  min-height: 120px; margin: -1px -1px 12px;
  border-radius: var(--dc-radius-lg) var(--dc-radius-lg) 0 0;
  overflow: hidden;
  background: var(--dc-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--dc-text-muted-2); font-size: 34px;
}
.dc-kit-card__image img { display: block; width: 100%; height: auto; }
/* Immagine kit nell'header del dettaglio campagna */
.dc-kit-detail-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--dc-radius); border: 1px solid var(--dc-border);
}

/* Switch "Mostra anche anni precedenti" sotto la card della tabella in
   shipments_view (gls/brt). Aspetto: pill orizzontale con descrizione. */
.dc-year-switch {
  margin: 14px 0 24px;
  padding: 14px 18px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-year-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dc-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: max-content;
}
.dc-year-switch__toggle:hover { color: var(--dc-text); filter: none; }
.dc-year-switch__track {
  width: 34px;
  height: 18px;
  background: var(--dc-border);
  border-radius: 999px;
  position: relative;
  transition: background var(--dc-transition);
  flex-shrink: 0;
}
.dc-year-switch__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--dc-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform var(--dc-transition);
}
.dc-year-switch__toggle.is-on .dc-year-switch__track {
  background: var(--dc-primary);
}
.dc-year-switch__toggle.is-on .dc-year-switch__thumb {
  transform: translateX(16px);
}
.dc-year-switch__desc {
  margin: 0;
  font-size: 12px;
  color: var(--dc-text-muted);
  line-height: 1.45;
}

/* Container: summary a sx, nav a dx */
.card-footer.dc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-border);
  flex-wrap: wrap;
}

/* Summary: testo libero, niente pill */
.dc-pagination__summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px;
  color: var(--dc-text);
  font-variant-numeric: tabular-nums;
}
.dc-pagination__summary .text-muted {
  color: var(--dc-text-muted);
  font-weight: 400;
}
.dc-pagination__summary strong {
  color: var(--dc-text);
  font-family: var(--dc-font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  /* niente border, niente background */
  background: transparent;
  border: none;
  padding: 0;
}
.dc-pagination__sep {
  color: var(--dc-text-muted-2);
  margin: 0 6px;
}

/* Lista paginazione (numeri/frecce) */
.dc-pagination__list {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dc-pagination__list .page-item {
  list-style: none;
}
.dc-pagination__list .page-link {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-family: var(--dc-font-mono);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dc-transition);
}
.dc-pagination__list .page-link:hover {
  background: var(--dc-hover);
  color: var(--dc-text);
  border-color: var(--dc-border);
  z-index: auto;
  box-shadow: none;
}
.dc-pagination__list .page-link:focus {
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
  border-color: var(--dc-primary);
  z-index: 1;
}
.dc-pagination__list .page-item.active .page-link {
  background: var(--dc-primary);
  color: white;
  border-color: var(--dc-primary);
  font-weight: 600;
  box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--dc-primary) 60%, transparent);
}
.dc-pagination__list .page-item.disabled .page-link {
  background: var(--dc-surface);
  color: var(--dc-text-muted-2);
  border-color: var(--dc-border);
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
/* Ellipsis "…": niente bordo */
.dc-pagination__list .dc-pagination__ellipsis .page-link {
  border: none;
  background: transparent;
  color: var(--dc-text-muted-2);
  cursor: default;
  min-width: 1.5rem;
  padding: 0 .25rem;
  opacity: .7;
}

/* Variante usata dal Catalogo (catalog/index.php) — già OK ma teniamo
   per chiarezza che non collassa col selector lista BS. */
.dc-cat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}
.dc-cat-page {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-family: var(--dc-font-mono);
  text-decoration: none;
  transition: var(--dc-transition);
}
.dc-cat-page:hover { background: var(--dc-hover);   border-color: var(--dc-primary);
  color: var(--dc-primary);
}
.dc-cat-page.is-active {
  background: var(--dc-primary);
  color: white;
  border-color: var(--dc-primary);
  font-weight: 700;
}
.dc-cat-page--gap {
  border: none;
  background: transparent;
  color: var(--dc-text-muted-2);
  cursor: default;
}

/* ==== Lista spedizioni: filtri specifici ==== */

.dc-status-select__toggle {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  color: var(--dc-text);
}
.dc-status-select__menu {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--dc-shadow);
  min-width: 16rem;
  max-width: 22rem;
  padding: 0;
  z-index: 1080;
}
.dc-status-select__shortcuts {
  border-bottom-color: var(--dc-border);
}
.dc-status-select__item {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.dc-status-select__item:hover { background: var(--dc-hover); }

.dc-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  flex: 0 0 auto;
}
/* I "dot" sono singoli punti colorati: devono saltare all'occhio, quindi
   usano colori più SATURI dei token semantici principali (che sono
   ottimizzati per testo su bg soft). Otto valori distinti, ognuno con
   tonalità chiaramente riconoscibile, mantenendo la palette in keeping
   col design system. */
.dc-status-dot--success      { background: #16a34a; }
.dc-status-dot--success-soft { background: #6cbb83; }
.dc-status-dot--warning      { background: #e88838; }
.dc-status-dot--danger       { background: #d04848; }
.dc-status-dot--primary      { background: var(--dc-primary); }
.dc-status-dot--info         { background: #4ba0b3; }
.dc-status-dot--secondary    { background: #a3acb7; }

/* ==== Dashboard chart cards ==== */

.dc-chart-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 18px 20px;
}

.dc-chart-title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  margin: 0 0 3px;
  color: var(--dc-text);
}

.dc-chart-sub {
  font-size: 12px;
  color: var(--dc-text-muted);
  margin: 0 0 16px;
}

.dc-chart-wrap {
  position: relative;
  min-height: 220px;
  height: 280px;
}
/* Empty-state di uno slot grafico (nessun dato nel periodo): messaggio
   centrato al posto del canvas, riusa l'altezza di .dc-chart-wrap. */
.dc-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
  color: var(--dc-text-muted);
  font-size: .9rem;
}

/* ==== Doc detail specifici ==== */

.dc-size-pill {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  background: var(--dc-surface);
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.dc-size-pill__t {
  background: var(--dc-surface-2);
  padding: 2px 7px;
  color: var(--dc-text-muted);
  font-weight: 600;
  border-right: 1px solid var(--dc-border);
  font-family: var(--dc-font-mono);
  min-width: 2.2em;
  justify-content: center;
}
.dc-size-pill__q {
  padding: 2px 7px;
  color: var(--dc-text);
  font-weight: 600;
  font-family: var(--dc-font-mono);
  font-variant-numeric: tabular-nums;
}
.dc-size-pill__p {
  padding: 2px 7px;
  color: var(--dc-text-muted);
  border-left: 1px dashed var(--dc-border);
  font-family: var(--dc-font-mono);
  font-variant-numeric: tabular-nums;
}

.dc-doc-thumb,
.dc-doc-thumb-empty {
  width: 38px;
  height: 38px;
  border-radius: var(--dc-radius-sm);
  border: 1px solid var(--dc-border);
  background: var(--dc-bg);
  object-fit: cover;
}
.dc-doc-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-text-muted-2);
  font-size: 16px;
}

.dc-doc-lines__total td {
  background: var(--dc-surface-2);
  border-top: 1px solid var(--dc-border);
  font-weight: 700;
  font-family: var(--dc-font-display);
  font-size: 15px;
  letter-spacing: -0.015em;
  padding: .75rem 1rem;
}
/* Il border-top sopra è l'intento corretto (1px var(--dc-border)), ma
   `.table tfoot td` (specificità maggiore) lo sovrascriveva con
   --dc-border-strong, più scuro → la riga "Totale righe" sembrava una linea
   spessa. Override mirato del SOLO colore (width/style invariati) per
   riallinearla al resto della tabella. Single knob. */
.dc-doc-lines tr.dc-doc-lines__total td {
  border-top-color: var(--dc-border);
}

/* ============================================================
   .dc-stat-chip — mini-KPI (sostituto di .dc-chip)
   Layout unico "in linea": [icona soft] LABEL valore.
   Icona e label sono opzionali (value-only per i contatori).
   Tinte semantiche via modificatori: soft su icona + valore,
   mai fondo pieno (linguaggio dei status badge, sistema quieto).
   Bordo = single knob (--dc-border), radius = --dc-radius (8px).
   ============================================================ */
.dc-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
}
/* icona a filo del bordo sinistro: padding ridotto solo quando c'è */
.dc-stat-chip:has(.dc-stat-chip__icon) { padding-left: 5px; }

.dc-stat-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  font-size: 0.78rem;
  flex: 0 0 auto;
}
.dc-stat-chip__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  line-height: 1.15;
  white-space: nowrap;
}
.dc-stat-chip__value {
  font-family: 'Bricolage Grotesque', var(--dc-font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dc-text);
  line-height: 1.15;
  white-space: nowrap;
}

/* Varianti semantiche: tinta soft su icona + valore (niente fondo pieno) */
.dc-stat-chip--success .dc-stat-chip__icon  { background: var(--dc-success-soft); color: var(--dc-success); }
.dc-stat-chip--success .dc-stat-chip__value { color: var(--dc-success); }
.dc-stat-chip--warning .dc-stat-chip__icon  { background: var(--dc-warning-soft); color: var(--dc-warning); }
.dc-stat-chip--warning .dc-stat-chip__value { color: var(--dc-warning); }
.dc-stat-chip--danger .dc-stat-chip__icon   { background: var(--dc-danger-soft); color: var(--dc-danger); }
.dc-stat-chip--danger .dc-stat-chip__value  { color: var(--dc-danger); }




.dc-emaillog-row:last-child { border-bottom: none; }

/* ==== Form reso (refund breakdown) ==== */

.dc-refund {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-refund__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dc-refund__row--total {
  border-top: 2px dashed var(--dc-border-strong);
  padding-top: 12px;
  margin-top: 4px;
}

.dc-refund__label {
  color: var(--dc-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.dc-refund__hint {
  display: block;
  color: var(--dc-text-muted);
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 1px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dc-refund__value {
  font-family: var(--dc-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--dc-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dc-refund__total {
  font-family: var(--dc-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dc-success);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dc-refund__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  padding: 0 10px;
  height: 32px;
  flex: 0 0 auto;
}
.dc-refund__sign {
  color: var(--dc-danger);
  font-weight: 600;
  font-family: var(--dc-font-mono);
}
.dc-refund__field input {
  border: none;
  outline: none;
  text-align: right;
  width: 70px;
  font-family: var(--dc-font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--dc-text);
  background: transparent;
  padding: .26rem .5rem;
  font-variant-numeric: tabular-nums;
  border-radius: var(--dc-radius-sm);
}
.dc-refund__cur {
  color: var(--dc-text-muted);
  font-family: var(--dc-font-mono);
  font-size: 12px;
}

.dc-refund-toggle {
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  padding: 16px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  transition: var(--dc-transition);
}

.dc-refund-toggle__note {
  font-size: 12.5px;
  color: var(--dc-text-muted);
  line-height: 1.5;
  margin: 8px 0 0;
}
.dc-refund-toggle__note strong { color: var(--dc-text); }

.dc-switch-lg .form-check-input {
  width: 48px;
  height: 26px;
}

/* ==== Hub Pratiche (discrepanza bicolore + badge subtle) ==== */

.text-danger-emphasis {
  color: var(--dc-danger) !important;
}
.text-info-emphasis {
  color: var(--dc-info) !important;
}

.badge.bg-success-subtle {
  background: var(--dc-success-soft) !important;
  color: var(--dc-success) !important;
  border-color: transparent !important;
}
.badge.bg-warning-subtle {
  background: var(--dc-warning-soft) !important;
  color: var(--dc-warning) !important;
  border-color: transparent !important;
}
.badge.bg-primary-subtle {
  background: var(--dc-primary-soft) !important;
  color: var(--dc-primary-strong) !important;
  border-color: transparent !important;
}
.badge.bg-info-subtle {
  background: var(--dc-info-soft) !important;
  color: var(--dc-info) !important;
  border-color: transparent !important;
}

/* ==== Catalogo ==== */


.dc-cat-filters {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--dc-shadow);
}

.dc-cat-filters__search {
  height: 38px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dc-surface);
  flex: 1;
  position: relative;
  margin-bottom: .8rem;
}
/* Icona lente come flex child, prima dell'input. */
.dc-cat-filters__search > i,
.dc-cat-filters__search > .bi {
  position: static;
  left: auto;
  color: var(--dc-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
/* Stessa cosa per il link reset (×) */
.dc-cat-filters__search > a {
  position: static;
  right: auto;
  color: var(--dc-text-muted);
}

.dc-cat-filters__search > input,
.dc-cat-filters__search input {
  border: none;
  outline: none;
  font-size: 14px;
  flex: 1;
  background: transparent;
  color: var(--dc-text);
  height: auto;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--dc-font-sans);
}
.dc-cat-filters__search > input:focus,
.dc-cat-filters__search input:focus {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
}

.dc-cat-filters__count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--dc-text-muted);
}
.dc-cat-filters__count strong {
  color: var(--dc-text);
  font-family: var(--dc-font-mono);
  font-weight: 600;
}

.dc-cat-filters__label {
  font-size: 10.5px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
  min-width: 76px;
  font-family: var(--dc-font-mono);
  margin-right: .35rem;
}

.dc-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 12.5px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: var(--dc-transition);
}
.dc-cat-chip:hover {
  background: var(--dc-hover);
  border-color: var(--dc-primary);
  color: var(--dc-primary);
}
.dc-cat-chip.is-active {
  background: var(--dc-primary);
  color: #fff;
  border-color: var(--dc-primary);
  font-weight: 600;
}
.dc-cat-chip.is-empty { opacity: 0.4; pointer-events: none; }
.dc-cat-chip__code {
  font-family: var(--dc-font-mono);
  font-weight: 600;
}
.dc-cat-chip__count {
  font-family: var(--dc-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--dc-primary);
  background: var(--dc-primary-soft);
  padding: 1px 6px;
  border-radius: 4px;
}
.dc-cat-chip.is-active .dc-cat-chip__count {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

.dc-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--dc-radius);
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 12.5px;
  text-decoration: none;
  font-family: var(--dc-font-mono);
  letter-spacing: .04em;
  transition: var(--dc-transition);
  cursor: pointer;
}
.dc-tag-chip:hover { background: var(--dc-hover);   border-color: var(--dc-primary);
  color: var(--dc-primary);
}
.dc-tag-chip.is-active {
  background: var(--dc-primary);
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.dc-tag-chip--size {
  font-family: var(--dc-font-mono);
  font-weight: 600;
  min-width: 38px;
  justify-content: center;
  letter-spacing: .06em;
}
.dc-tag-chip--mag .dc-tag-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mag-color, var(--dc-text-muted));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mag-color, var(--dc-primary)) 25%, transparent);
}

.dc-color-palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
/* Swatch: chip tondo + nome sotto (column), niente container visibile. */
.dc-color-palette__swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--dc-text-muted);
  font-family: var(--dc-font-sans);
  font-size: .72rem;
  letter-spacing: .03em;
  transition: var(--dc-transition);
}
.dc-color-palette__swatch:hover {
  border: none;
  background: transparent;
  transform: none;
}
.dc-color-palette__swatch.is-active {
  border: none;
  background: transparent;
  color: var(--dc-primary-strong);
}
.dc-color-palette__chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sw, #ccc);
  border: 2px solid var(--dc-surface);
  box-shadow: 0 0 0 1px var(--dc-border);
  transition: all var(--dc-transition);
  flex-shrink: 0;
}
.dc-color-palette__swatch.is-active .dc-color-palette__chip {
  box-shadow: 0 0 0 2px var(--dc-primary);
  transform: scale(1.08);
}
.dc-color-palette__name {
  font-size: 10px;
  color: var(--dc-text-muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
}
.dc-color-palette__swatch.is-active .dc-color-palette__name {
  color: var(--dc-primary-strong);
  font-weight: 600;
}

.dc-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 1.5rem;
}
@media (max-width: 1500px) {
  .dc-cat-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1200px) {
  .dc-cat-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .dc-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dc-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

.dc-cat-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all var(--dc-transition);
}
.dc-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dc-shadow);
  border-color: var(--dc-primary-2);
}

.dc-cat-card__img {
  /* Aspect-ratio 3/4 verticale (più alto che largo) si adatta meglio
     alle foto prodotto BASIC che sono full-body modello. Niente più 1:1
     forzato — con contain si vedrebbero grandi bande bianche sopra/sotto. */
  aspect-ratio: 3 / 4;
  background: var(--dc-bg);
  position: relative;
  overflow: hidden;
  display: block;
  isolation: isolate;
  align-items: center;
  justify-content: center;
}
.dc-cat-card__img img {
  width: 100%;
  height: 100%;
  /* contain: mostra l'immagine intera anche se le sue proporzioni
     non matchano l'aspect-ratio della card (no taglio). */
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .25s ease;
}
.dc-cat-card:hover .dc-cat-card__img img { transform: none; }
.dc-cat-card__img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dc-text-muted-2);
  font-size: 32px;
}

.dc-cat-card__badge--new {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  width: auto;
  padding: 3px 8px;
  border-radius: var(--dc-radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--dc-text);
  color: white;
  font-family: var(--dc-font-display);
}

.dc-stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 8px;
  border-radius: var(--dc-radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  background: var(--dc-surface);
  color: var(--dc-text);
  box-shadow: var(--dc-shadow-sm);
  flex-shrink: 0;
  font-family: var(--dc-font-mono);
  letter-spacing: .04em;
  border: 1px solid color-mix(in srgb, var(--dc-text) 12%, transparent);
  --pill-color: var(--dc-text-muted);
}
.dc-stock-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill-color) 22%, transparent);
}

.dc-stock-pill--ok      { color: #16a34a;   --pill-color: #16a34a;
}
.dc-stock-pill--low     { color: #e88838;   --pill-color: #d97706;
}
.dc-stock-pill--out     { color: #d04848;   --pill-color: #dc2626;
}
.dc-stock-pill--request {
  color: var(--dc-primary-strong);
  background: var(--dc-primary-soft);
  box-shadow: none;
  --pill-color: #6366f1;
}
.dc-stock-pill--unknown { color: var(--dc-text-muted);   --pill-color: var(--dc-text-muted);
}

.dc-cat-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.dc-cat-card__code {
  font-family: var(--dc-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--dc-text);
}

.dc-cat-card__desc {
  font-size: 12.5px;
  color: var(--dc-text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.dc-cat-card__tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  font-size: 10.5px;
  color: var(--dc-text-muted);
  font-weight: 500;
  font-family: var(--dc-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dc-cat-card__tag--alt {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: transparent;
}

.dc-cat-card__brandbar {
  border-top: 1px solid var(--dc-border);
  margin: 6px -14px 0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 56px;
  overflow: hidden;
}
.dc-cat-card__brandbar-logo {
  height: 32px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  max-height: 44px;
  opacity: .82;
  transition: opacity .15s ease;
}
.dc-cat-card__brandbar--text .dc-cat-card__brandbar-logo { display: none; }
.dc-cat-card__brandbar-fallback {
  font-family: var(--dc-font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: none;
  color: var(--dc-text-muted);
}
.dc-cat-card__brandbar-surich-fallback {
  font-size: 10px;
  color: var(--dc-warning);
  background: var(--dc-warning-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  gap: .25rem;
  font-family: var(--dc-font-mono);
  border: 1px solid color-mix(in srgb, var(--dc-warning) 40%, transparent);
}

.dc-cat-card__footer {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dc-text-muted);
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--dc-border);
  gap: .65rem;
  align-items: center;
  font-family: var(--dc-font-mono);
}

/* ==== BI specifici ==== */


.dc-bi-pills {
  display: inline-flex;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
}
.dc-bi-pill {
  padding: 6px 14px;
  border-radius: var(--dc-radius-sm);
  font-size: 12.5px;
  color: var(--dc-text-muted);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  transition: var(--dc-transition);
}
.dc-bi-pill:hover { color: var(--dc-text);   background: var(--dc-bg-elev);
  border-color: var(--dc-border-strong);
}
.dc-bi-pill.is-active {
  background: var(--dc-primary);
  color: white;
  font-weight: 600;
  border-color: var(--dc-text);
}

.dc-bi-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--dc-shadow);
}
/* Card BI impilati direttamente nella sezione → spaziatura verticale.
   I card dentro .row/.col NON sono figli diretti, quindi restano spaziati
   dal gutter della griglia (questa regola non li tocca). */
.dc-bi-section > .dc-bi-card:not(:last-child) {
  margin-bottom: 14px;
}
.dc-bi-card__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dc-bi-card__title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--dc-text);
}
/* Descrizione/annotazione a destra del titolo nel card BI (sta nel __head
   flex space-between): muted e piccola, così non compete col titolo e resta
   centrata verticalmente. Allineata a destra perché è l'elemento di destra. */
.dc-bi-card__sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dc-text-muted);
  text-align: right;
  max-width: 60ch;
}
.dc-bi-card__meta {
  font-size: 11.5px;
  color: var(--dc-text-muted);
  font-family: var(--dc-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dc-bi-card__meta a {
  color: var(--dc-primary-strong);
  text-decoration: none;
  font-weight: 500;
}
.dc-bi-card__body {
  padding: 18px 20px;
  flex: 1;
}
.dc-bi-card__body--tight {
  padding: 8px;
}

.dc-bi-rank {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-bi-rank__empty {
  color: var(--dc-text-muted);
  font-size: .9rem;
  padding: .5rem .25rem;
}
.dc-bi-rank__item {
  display: grid;
  grid-template-columns: 28px 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--dc-radius);
  text-decoration: none;
  color: var(--dc-text);
  position: relative;
  transition: background .15s ease;
}
.dc-bi-rank__item:hover { background: var(--dc-hover);   color: inherit;
}
.dc-bi-rank__pos {
  font-family: var(--dc-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--dc-text-muted-2);
  text-align: right;
}
.dc-bi-rank__label {
  font-size: 13.5px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-bi-rank__value {
  text-align: right;
  font-family: var(--dc-font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--dc-text);
  font-feature-settings: "tnum";
}
.dc-bi-rank__bar {
  position: absolute;
  left: 50px;
  right: 110px;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--dc-primary-soft);
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: .25rem;
}
.dc-bi-rank__bar i {
  display: block;
  height: 100%;
  background: var(--dc-primary);
  border-radius: 2px;
}

.dc-stock-widget {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all var(--dc-transition);
  margin: 1rem 0 1.25rem;
  padding: .85rem 1rem;
  box-shadow: var(--dc-shadow);
}
.dc-stock-widget:hover {
  border-color: var(--dc-primary-2);
  box-shadow: var(--dc-shadow);
  transform: translateY(-2px);
  color: var(--dc-text);
}
.dc-stock-widget__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .6rem;
  font-family: var(--dc-font-mono);
  flex-wrap: wrap;
}
.dc-stock-widget__title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
}
.dc-stock-widget__meta {
  color: var(--dc-text-muted);
  font-size: 12px;
  margin-left: 4px;
  letter-spacing: .04em;
}
.dc-stock-widget__cta {
  margin-left: auto;
  color: var(--dc-primary-strong);
  font-weight: 600;
  font-size: 12.5px;
}
.dc-stock-widget__cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
/* Mobile: 2 colonne. DEVE stare dopo la regola base (a pari specificità vince l'ultima). */
@media (max-width: 768px) { .dc-stock-widget__cells { grid-template-columns: repeat(2, 1fr); } }
.dc-stock-widget__cell {
  padding: 18px 20px;
  border-right: 1px solid var(--dc-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-stock-widget__cell:last-child { border-right: none; }
.dc-stock-widget__val {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1;
  font-feature-settings: "tnum";
  color: var(--dc-text);
}
.dc-stock-widget__lbl {
  font-size: 11px;
  color: var(--dc-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--dc-font-mono);
  margin-top: .15rem;
}
.dc-stock-widget__cell--danger .dc-stock-widget__val { color: var(--dc-danger); }
.dc-stock-widget__cell--warning .dc-stock-widget__val { color: var(--dc-warning); }
.dc-stock-widget__cell--info .dc-stock-widget__val { color: var(--dc-primary-strong); }

/* ==== Login + 404 (no-sidebar shell) ==== */

.dc-shell.no-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--dc-header-h, 64px) 1fr;
}

.dc-shell.no-sidebar .dc-main {
  background: var(--dc-bg);
  position: relative;
  padding: 60px 24px;
  min-height: calc(100vh - 64px);
  overflow: hidden;
}

.dc-shell.no-sidebar .dc-main::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dc-primary-soft) 0%, transparent 70%);
  pointer-events: none;
}
.dc-shell.no-sidebar .dc-main::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 124, 168, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.bl-login-card {
  background: var(--dc-surface);
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
  border-radius: 16px;
  padding: 32px 28px 28px;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: var(--dc-shadow-lg);
  position: relative;
  z-index: 2;

  /* Override SOLO dei token Bootstrap (--bs-*) per forzare Bootstrap a leggere
     la nostra palette. I token --dc-* sono già corretti via eredità da :root
     (single knob rule, no ridichiarazioni hex). */
  --bs-card-bg: var(--dc-surface);
  --bs-card-color: var(--dc-text);
  --bs-card-border-color: var(--dc-border);
  --bs-body-bg: var(--dc-surface);
  --bs-body-color: var(--dc-text);
  --bs-border-color: var(--dc-border);
  --bs-emphasis-color: var(--dc-text);
}


.bl-login-card .form-label {
  color: var(--dc-text-muted);
  font-size: 10.5px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  font-weight: 600;
}

.bl-login-card .form-control {
  background: var(--dc-surface);
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
}
.bl-login-card .form-control::placeholder {
  color: var(--dc-text-muted-2);
}
.bl-login-card .form-control:focus {
  background: var(--dc-surface);
  color: var(--dc-text);
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}

.bl-login-card .alert-danger {
  background: var(--dc-danger-soft);
  color: var(--dc-danger);
  border: 1px solid var(--dc-danger-soft);
  border-radius: var(--dc-radius);
}

.bl-btn-login {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--dc-radius-md);
  background: var(--dc-primary);
  color: white;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  cursor: pointer;
  font-family: var(--dc-font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: none;
}
.bl-btn-login:hover,
.bl-btn-login:focus,
.bl-btn-login:focus-visible {
  background: var(--dc-primary);
  color: white;
  border: none;
  filter: brightness(1.05);
  outline: none;
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}
.bl-btn-login:active {
  background: var(--dc-primary-strong);
  color: white;
  border: none;
  filter: none;
}

/* ==== BRAND LOCKUP — header, login, mini ==== */
/* Pure wordmark "Basic·LAB": Basic in weight 500, dot brand, LAB in 800. */

.bl-lockup {
  display: inline-flex;
  align-items: center;
  color: var(--dc-text);
  font-family: var(--dc-font-display);
  letter-spacing: -0.025em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  vertical-align: baseline;
}
.bl-lockup .bl-word {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
}
.bl-lockup .bl-word__basic {
  font-weight: 500;
  color: inherit;
}
.bl-lockup .bl-word__dot {
  display: inline-block;
  width: .32em;
  height: .32em;
  border-radius: 50%;
  background: var(--bl-dot-color, var(--dc-primary));
  margin: 0 .32em 0;
  flex: 0 0 auto;
}
.bl-lockup .bl-word__lab {
  font-weight: 800;
  letter-spacing: 0;
  color: inherit;
}
.bl-lockup--header { font-size: 1.2rem; }
.bl-lockup--login  { font-size: 2.1rem; }
.bl-lockup--mini   { font-size: 0.85rem; color: var(--dc-text-muted); }
.bl-login-card .card-body { container-type: inline-size;   padding: 0;
}
.bl-login-card .bl-lockup--login { font-size: clamp(1.1rem, 14cqi, 2.1rem); }
.dc-header__brand .bl-lockup { line-height: 1; }
/* Sul brand-block navy il dot va più chiaro (accent blue) per essere visibile */
.dc-header__brand-block .bl-lockup { --bl-dot-color: var(--dc-sidebar-active-bar, #60a5fa); }

/* ==========================================================================
   Card "Consegnate in questa sync" (effimera post-sync, .dc-delivered-card):
   coerentemente verde — sia l'icona che il CTA "Chiudi e ricarica" usano
   --dc-success del design system.
   ========================================================================== */


.dc-delivered-card [data-dc-delivered-dismiss],
.dc-delivered-card .btn[data-dc-delivered-dismiss] {
  background: var(--dc-success);
  color: white;
  border-color: transparent;
}
.dc-delivered-card [data-dc-delivered-dismiss]:hover,
.dc-delivered-card .btn[data-dc-delivered-dismiss]:hover {
  background: var(--dc-success);
  color: white;
  filter: brightness(1.08);
  border-color: transparent;
}
.dc-delivered-card [data-dc-delivered-dismiss] .bi {
  color: white;
}

.dc-kpi__label,
.dc-kpi-tile__label,
.dc-bi-kpi__label,
.dc-bi-kpi__value-unit,
.dc-info-tile__label,
.dc-info-tile__sub,
.dc-stock-widget__lbl,
.dc-carrier-sedi__head,
.dc-carrier-sedi__head .dc-kpi__label,
.dc-sidebar__title,
.form-label,
.dc-cat-filters__label,
.dc-date-filter__field label,
.dc-refund-toggle__label,
.dc-refund__label,
.dc-foldable__title,
.dc-svincoli__date,
.dc-page-subtitle,
.dc-status-badge,
.table thead th,
.dc-erp-table thead th,
.dc-doc-lines thead th,
.dc-foldable__stamp,
.text-muted.small,
.text-muted.text-uppercase,
.badge.bg-secondary-subtle {
  font-family: var(--dc-font-sans);
  font-feature-settings: normal;
}

.alert {
  border-radius: var(--dc-radius);
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid transparent;
  border-left-width: 4px;
  background: var(--dc-surface);
  color: var(--dc-text);
}

.alert-warning {
  background: color-mix(in srgb, var(--dc-warning) 18%, var(--dc-bg-elev));
  color: var(--dc-warning);
  border-color: transparent;
  border-left-color: var(--dc-warning);
}
.alert-warning .bi,
.alert-warning .alert-link {
  color: var(--dc-warning);
}

.alert-danger {
  background: color-mix(in srgb, var(--dc-danger) 16%, var(--dc-bg-elev));
  color: var(--dc-danger);
  border-color: transparent;
  border-left-color: var(--dc-danger);
}
.alert-danger .bi,
.alert-danger .alert-link {
  color: var(--dc-danger);
}

.alert-success {
  background: color-mix(in srgb, var(--dc-success) 16%, var(--dc-bg-elev));
  color: var(--dc-success);
  border-color: transparent;
  border-left-color: var(--dc-success);
}
.alert-success .bi,
.alert-success .alert-link {
  color: var(--dc-success);
}

.alert-info,
.alert-primary {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  border-color: transparent;
  border-left-color: var(--dc-primary);
}
.alert-info .bi,
.alert-info .alert-link,
.alert-primary .bi,
.alert-primary .alert-link {
  color: var(--dc-primary-strong);
  font-weight: 600;
  text-decoration: none;
}

/* ==========================================================================
   Dropzone — drag&drop file upload (invoices/index.php, future altri).
   Pattern: <label.dc-dropzone for="..."> con <input type=file> nascosto
   dentro. Click sul label = file picker; drop su label = file assegnato.
   ========================================================================== */

.dc-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 2px dashed var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
  background: var(--dc-surface);
  cursor: pointer;
  transition: all var(--dc-transition);
  min-height: 60px;
}
.dc-dropzone:hover {
  border-color: var(--dc-primary-2);
  background: var(--dc-primary-soft);
}
.dc-dropzone.is-dragover {
  border-color: var(--dc-primary);
  background: var(--dc-primary-soft);
  border-style: solid;
}
.dc-dropzone.is-selected {
  border-color: var(--dc-success);
  background: var(--dc-success-soft);
  border-style: solid;
}

.dc-dropzone__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--dc-radius);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: all var(--dc-transition);
}
.dc-dropzone.is-selected .dc-dropzone__icon {
  background: var(--dc-success);
  color: white;
}
/* L'icona cambia anche col selected */
.dc-dropzone.is-selected .dc-dropzone__icon .bi-cloud-upload::before {
  content: "\F26B";  /* bi-check2 — sostituisce visivamente l'icona cloud-upload */
}

.dc-dropzone__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dc-dropzone__title {
  font-family: var(--dc-font-sans);
  font-size: 14px;
  color: var(--dc-text);
  line-height: 1.4;
}
.dc-dropzone__title strong {
  color: var(--dc-text);
  font-weight: 600;
}
.dc-dropzone.is-selected .dc-dropzone__title,
.dc-dropzone.is-selected .dc-dropzone__title strong {
  color: #14532d;
}

.dc-dropzone__hint {
  font-family: var(--dc-font-mono);
  font-size: 11.5px;
  color: var(--dc-text-muted);
}
.dc-dropzone.is-selected .dc-dropzone__hint {
  color: #14532d;
}

.dc-dropzone__input {
  /* file input nativo nascosto ma accessibile (no display:none così
     screen-reader e :focus-within funzionano) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dc-dropzone:focus-within {
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px var(--dc-primary-soft);
}

/* ==== MODULO AGENTI ==== */

.dc-agents {
  --ag-accent: var(--dc-primary);
  --ag-accent-soft: var(--dc-primary-soft);
  --ag-accent-strong: var(--dc-primary-strong);
}
/* Spaziatura verticale consistente tra le sezioni di primo livello delle pagine
   agenti (KPI strip, controls, filtri, righe di card, tabelle — presenti e futuri).
   Il page-header ha già il suo margine (40px); l'ultima sezione non ha margine sotto. */
.dc-agents > *:not(.dc-page-header):not(:last-child) {
  margin-bottom: 14px;
}

/* ── CTA-bar di navigazione tra le 5 pagine del modulo Agenti ── */
.dc-agents-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  color: var(--dc-text);
  border-radius: var(--dc-radius);
  font-family: var(--dc-font-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
}
.dc-agents-nav-btn:hover,
.dc-agents-nav-btn:focus-visible {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
  text-decoration: none;
}
.dc-agents-nav-btn i { font-size: 14px; }
.dc-agents-nav-btn.is-active {
  background: var(--dc-primary-soft);
  border-color: var(--dc-primary);
  color: var(--dc-primary-strong);
  font-weight: 600;
}

/* ── SETTIMANA: toolbar + grid 5 col + day card + visit row + empty ── */
.wk-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.wk-toolbar__nav { display: inline-flex; align-items: center; gap: 4px; }
.wk-toolbar__btn {
  width: 36px; height: 36px;
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s ease;
  color: var(--dc-text);
  text-decoration: none;
}
.wk-toolbar__btn:hover {
  border-color: var(--dc-primary);
  color: var(--dc-primary-strong);
  background: var(--dc-primary-soft);
}
.wk-toolbar__label {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--dc-text);
}
.wk-toolbar__sub {
  font-family: var(--dc-font-mono);
  font-size: 12.5px;
  color: var(--dc-text-muted);
  margin-left: 8px;
}
.wk-toolbar__today {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--dc-border);
  background: var(--dc-surface);
  border-radius: 999px;
  color: var(--dc-text);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
}
.wk-toolbar__today:hover { border-color: var(--dc-primary); color: var(--dc-primary-strong); }

/* Week grid (Lun-Ven, 5 cols) */
.wk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 991.98px) { .wk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) {
  .wk-grid { grid-template-columns: 1fr; }
  /* Colonna singola: la giornata vuota non deve tenere l'altezza piena
     (il min-height 380px serve solo ad allineare le card in riga su
     desktop/tablet). Selettore a 2 classi per vincere su `.wk-day` che è
     definito DOPO nel file (a pari specificità vincerebbe lui). */
  .wk-grid .wk-day--empty { min-height: auto; }
}

.wk-day {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  position: relative;
}
.wk-day--today {
  border-color: var(--dc-primary);
  background: linear-gradient(180deg, var(--dc-primary-soft) 0%, var(--dc-surface) 80px);
}
.wk-day--today::after {
  content: 'OGGI';
  position: absolute;
  top: 10px; right: 12px;
  background: var(--dc-primary);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 999px;
}
.wk-day--empty { border-style: dashed; }

.wk-day__head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wk-day--today .wk-day__head { border-bottom-color: var(--dc-primary); }
.wk-day__dow {
  font-family: var(--dc-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.wk-day--today .wk-day__dow { color: var(--dc-primary-strong); }
.wk-day__date {
  font-family: var(--dc-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--dc-text);
  margin-top: 4px;
}
.wk-day__count {
  font-family: var(--dc-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dc-text-muted);
}
.wk-day__count.has-visits {
  color: var(--dc-primary-strong);
  font-weight: 600;
}
.wk-day__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.wk-day__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--dc-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--dc-text-muted);
  background: var(--dc-bg-elev);
}
.wk-day--today .wk-day__foot {
  border-top-color: var(--dc-primary);
  background: rgba(231, 237, 245, .35);
}
.wk-day__foot strong { font-family: var(--dc-font-mono); color: var(--dc-text); }

/* Visit row dentro day */
.wk-visit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--dc-border);
  border-radius: 9px;
  background: var(--dc-surface);
  cursor: pointer;
  transition: all .12s ease;
  text-decoration: none;
  color: inherit;
}
.wk-visit:hover {
  border-color: var(--dc-primary);
  background: var(--dc-primary-soft);
  color: var(--dc-text);
  text-decoration: none;
}
.wk-visit__num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  font-family: var(--dc-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  color: var(--dc-text-muted);
}
.wk-visit--done .wk-visit__num {
  background: var(--dc-success-soft);
  color: var(--dc-success);
  border-color: var(--dc-success);
}
.wk-visit--done .wk-visit__num::before { content: '✓'; }
.wk-visit__body { flex: 1; min-width: 0; }
.wk-visit__name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--dc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-visit__meta {
  font-size: 11px;
  color: var(--dc-text-muted);
  display: flex;
  gap: 8px;
  margin-top: 1px;
}
.wk-visit--done .wk-visit__name,
.wk-visit--done .wk-visit__meta { opacity: .8; }

/* Visite fatte: sfondo tinto per esito (verde positivo / arancio neutro / rosso
   negativo) per rinforzare l'associazione status↔colore nel board settimanale.
   Token di stato theme-adattivi → light+dark si regolano da sé. */
.wk-visit--positivo { background: var(--dc-success-soft); border-color: color-mix(in srgb, var(--dc-success) 45%, var(--dc-border)); }
.wk-visit--neutro   { background: var(--dc-warning-soft); border-color: color-mix(in srgb, var(--dc-warning) 45%, var(--dc-border)); }
.wk-visit--negativo { background: var(--dc-danger-soft);  border-color: color-mix(in srgb, var(--dc-danger)  45%, var(--dc-border)); }

/* Sulle card tinte il colore già segnala "fatto": niente dimming (recupera
   leggibilità del meta) — sostituisce il vecchio opacity .8 di --done. */
.wk-visit--positivo .wk-visit__name, .wk-visit--positivo .wk-visit__meta,
.wk-visit--neutro   .wk-visit__name, .wk-visit--neutro   .wk-visit__meta,
.wk-visit--negativo .wk-visit__name, .wk-visit--negativo .wk-visit__meta { opacity: 1; }
/* Meta (città · €) un filo più scuro sulle tinte per restare ≥ AA su entrambi i temi. */
.wk-visit--positivo .wk-visit__meta,
.wk-visit--neutro   .wk-visit__meta,
.wk-visit--negativo .wk-visit__meta { color: color-mix(in srgb, var(--dc-text-muted) 80%, var(--dc-text)); }

/* Pallino "✓" coerente con l'esito (positivo resta verde dal default --done). */
.wk-visit--neutro   .wk-visit__num { background: var(--dc-warning-soft); color: var(--dc-warning); border-color: var(--dc-warning); }
.wk-visit--negativo .wk-visit__num { background: var(--dc-danger-soft);  color: var(--dc-danger);  border-color: var(--dc-danger); }

/* Hover: approfondisci la tinta dell'esito invece di virare al primary,
   così l'associazione di colore non si perde al passaggio del mouse. */
.wk-visit--positivo:hover { background: color-mix(in srgb, var(--dc-success-soft) 78%, var(--dc-success)); border-color: var(--dc-success); }
.wk-visit--neutro:hover   { background: color-mix(in srgb, var(--dc-warning-soft) 78%, var(--dc-warning)); border-color: var(--dc-warning); }
.wk-visit--negativo:hover { background: color-mix(in srgb, var(--dc-danger-soft)  78%, var(--dc-danger));  border-color: var(--dc-danger); }

/* Empty day: CTA singola "Pianifica" + breve descrizione sotto. */
.wk-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  text-align: center;
}
.wk-empty__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--dc-bg-elev);
  display: flex; align-items: center; justify-content: center;
  color: var(--dc-text-muted);
  font-size: 22px;
}
.wk-empty__title {
  font-size: 12.5px;
  color: var(--dc-text-muted);
  margin-bottom: 4px;
}
.wk-empty__cta {
  width: 100%;
  font-size: 12px;
  padding: 6px 10px;
}
.wk-empty__desc {
  font-size: 11.5px;
  color: var(--dc-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* Selettore agente in header */
.dc-page-header form select[name="agente_id"] {
  font-family: var(--dc-font-sans);
  font-size: 13px;
  font-weight: 500;
}

/* Week strip ridisegnata: 7 card alte con dow + data + count */
.dc-agents-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}
.dc-agents-week__day {
  position: relative;
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  background: transparent;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  font-family: var(--dc-font-body);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-agents-week__day:hover {
  border-color: var(--dc-border-strong);
  background: var(--dc-bg-elev);
}
.dc-agents-week__day.is-active {
  border-color: var(--dc-primary);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  box-shadow: var(--dc-shadow-accent);
}
.dc-agents-week__day.is-today { border-color: var(--dc-primary); }
.dc-agents-week__day.is-today::after {
  content: 'oggi';
  position: absolute;
  top: -7px; right: -4px;
  background: var(--dc-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}
.dc-agents-week__dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-agents-week__day.is-active .dc-agents-week__dow { color: var(--dc-primary-strong); }
.dc-agents-week__date {
  font-family: var(--dc-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--dc-text);
  line-height: 1.1;
}
.dc-agents-week__day.is-active .dc-agents-week__date { color: var(--dc-primary-strong); }
.dc-agents-week__count {
  font-size: 11px;
  font-family: var(--dc-font-mono);
  color: var(--dc-text-muted);
}
.dc-agents-week__count.has-visits {
  color: var(--dc-primary-strong);
  font-weight: 600;
}
.dc-agents-week__day.is-active .dc-agents-week__count { color: var(--dc-primary-strong); }

/* Controls row (data, raggio, CTA) */
.dc-agents-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.dc-agents-controls__field { display: flex; align-items: center; gap: 8px; }
.dc-agents-controls__field label {
  font-size: 12px;
  color: var(--dc-text-muted);
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}

/* Hint banner sotto i controlli — guida operativa per l'agente */
.dc-agents-hint {
  background: var(--dc-info-soft);
  border: 1px solid var(--dc-info);
  color: var(--dc-info);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.dc-agents-hint .bi { font-size: 16px; }
.dc-agents-hint__text { line-height: 1.4; }

/* ──────────────────────────────────────────────────────────────────────────
   PLANNER GRID — mappa + command panel
   ────────────────────────────────────────────────────────────────────────── */
.dc-agents-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .dc-agents-grid { grid-template-columns: 1fr; }
}

/* Card mappa con header + legenda */
.dc-agents-map-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dc-agents-map-card__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.dc-agents-map-card__title {
  font-family: var(--dc-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-agents-map-card__title .bi { color: var(--dc-primary); }
.dc-agents-legend {
  display: flex;
  gap: 14px;
  margin-left: auto;
  flex-wrap: wrap;
}
.dc-agents-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--dc-text-muted);
}
.dc-agents-legend__dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--dc-text-muted);
}
.dc-agents-legend__dot--anchor { background: var(--dc-danger); }
.dc-agents-legend__dot--giro   { background: var(--dc-primary); }
.dc-agents-legend__dot--target { background: var(--dc-success); }
.dc-agents-legend__dot--other  { background: var(--dc-text-muted); }

/* Map element */
#agents-map {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;      /* riempie la card mappa, che si allunga per pareggiare il pannello destro */
  min-height: 540px;   /* floor quando il pannello è corto */
}
.leaflet-popup-content {
  margin: 10px 14px !important;
  font-family: var(--dc-font-sans);
  font-size: 13px;
}
.leaflet-popup-content-wrapper {
  border-radius: var(--dc-radius) !important;
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow);
}
/* Popup cliente nella mappa Agenti — markup generato da agents-map.js.
   Usano classi al posto di style inline (CLAUDE.md: CSS-first). */
.dc-agents-popup__title {
  font-weight: 600;
  font-size: 13px;
}
.dc-agents-popup__code {
  font-family: var(--dc-font-mono);
  font-size: 10px;
  color: var(--dc-text-muted);
  letter-spacing: .04em;
}
.dc-agents-popup__addr {
  font-size: 11px;
  margin-top: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   COMMAND PANEL — sidebar a destra della mappa
   Status bar in cima · Mio giro · Suggeriti · Actions in fondo
   ────────────────────────────────────────────────────────────────────────── */
.dc-agents-panel {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Status bar */
.dc-agents-panel__status {
  background: linear-gradient(135deg, var(--dc-primary-soft) 0%, rgba(231, 237, 245, 0.4) 100%);
  border-bottom: 1px solid var(--dc-border);
  padding: 16px 18px;
}
/* Data pianificazione: prima riga dello status panel.
   La label segue lo stesso stile uppercase tracked di __status-label per
   coerenza visiva con il resto della card. */
.dc-agents-panel__date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed color-mix(in srgb, var(--dc-primary-strong) 28%, transparent);
}
.dc-agents-panel__date-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-primary-strong);
  margin: 0;
}
.dc-agents-panel__date-input {
  flex: 1;
}
.dc-agents-panel__status-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.dc-agents-panel__status-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-primary-strong);
}
.dc-agents-panel__status-progress {
  font-family: var(--dc-font-mono);
  font-size: 13px;
  color: var(--dc-primary-strong);
  font-weight: 600;
}
.dc-agents-panel__status-metrics {
  display: flex;
  gap: 16px;
}
.dc-agents-panel__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-agents-panel__metric-label {
  font-size: 10px;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.dc-agents-panel__metric-value {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--dc-text);
}
.dc-agents-panel__metric-value small {
  font-family: var(--dc-font-body);
  font-size: 11px;
  color: var(--dc-text-muted);
  font-weight: 500;
}

/* Sezioni interne (Mio giro, Suggeriti) */
.dc-agents-panel__section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
}
.dc-agents-panel__section:last-of-type { border-bottom: none; }
.dc-agents-panel__section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.dc-agents-panel__section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--dc-text);
}
.dc-agents-panel__section-title .bi { color: var(--dc-primary); }
.dc-agents-panel__count-pill,
#agents-giro-count {
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
  font-family: var(--dc-font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 4px;
}

/* Empty state interno (Mio giro / Suggeriti vuoti) */
.dc-agents-panel__empty {
  font-family: var(--dc-font-body);
  font-size: 12.5px;
  color: var(--dc-text-muted);
  text-align: center;
  padding: 14px 8px;
  margin: 0;
}

/* Timeline "Mio giro" */
.dc-agents-giro {
  display: flex;
  flex-direction: column;
}
.dc-agents-giro__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--dc-border);
  align-items: center;
}
.dc-agents-giro__item:first-child { border-top: none; padding-top: 0; }
.dc-agents-giro__item:last-child { padding-bottom: 0; }
.dc-agents-giro__num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--dc-primary);
  color: #fff;
  font-family: var(--dc-font-mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-agents-giro__body { flex: 1; min-width: 0; }
.dc-agents-giro__name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--dc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-agents-giro__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.dc-agents-giro__actions .btn {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--dc-text-muted);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
}
.dc-agents-giro__actions .btn:hover {
  color: var(--dc-text);
  background: var(--dc-bg-elev);
}
.dc-agents-giro__actions .agents-visit-from-giro:hover { color: var(--dc-success); }
.dc-agents-giro__actions .agents-email-from-giro:hover { color: var(--dc-info); }
.dc-agents-giro__actions .agents-report-from-giro:hover { color: var(--dc-primary-strong); }
.dc-agents-giro__actions .agents-remove-btn:hover { color: var(--dc-danger); }
.dc-agents-giro__handle {
  cursor: grab;
  padding: 4px;
  color: var(--dc-text-muted);
  border: 0;
  background: transparent;
  border-radius: 6px;
}
.dc-agents-giro__handle:hover { color: var(--dc-text); background: var(--dc-bg-elev); }

/* Suggeriti vicini */
.dc-agents-suggested {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.dc-agents-suggested__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--dc-border);
  border-radius: 9px;
  cursor: pointer;
  transition: all .12s ease;
  background: var(--dc-surface);
}
.dc-agents-suggested__item:hover {
  border-color: var(--dc-primary);
  background: var(--dc-primary-soft);
}
.dc-agents-suggested__score {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--dc-bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dc-font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
}
.dc-agents-suggested__score--high {
  background: rgba(22, 163, 74, .12);
  color: var(--dc-success);
  border-color: rgba(22, 163, 74, .25);
}
.dc-agents-suggested__score--mid {
  background: rgba(232, 136, 56, .12);
  color: #b45309;
  border-color: rgba(232, 136, 56, .25);
}
.dc-agents-suggested__body { flex: 1; min-width: 0; }
.dc-agents-suggested__name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--dc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dc-agents-suggested__meta {
  font-size: 11px;
  color: var(--dc-text-muted);
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.dc-agents-suggested__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.dc-agents-suggested__actions .agents-why-btn,
.dc-agents-suggested__actions .agents-locate-btn {
  border: 0;
  background: transparent;
  color: var(--dc-text-muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dc-agents-suggested__actions .agents-why-btn:hover,
.dc-agents-suggested__actions .agents-locate-btn:hover {
  color: var(--dc-primary-strong);
  background: var(--dc-bg-elev);
}
.dc-agents-suggested__add {
  border: 1px solid var(--dc-primary);
  background: var(--dc-surface);
  border-radius: 999px;
  width: 28px; height: 28px;
  color: var(--dc-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.dc-agents-suggested__add:hover {
  background: var(--dc-primary);
  color: #fff;
}
.dc-agents-suggested__in {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(22, 163, 74, .15);
  color: var(--dc-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Sezione "Pianifica per me": CTA full-width + spiegazione del criterio
   di scelta automatica. Sta in fondo alle sezioni, sopra le actions. */
.dc-agents-panel__autoplan {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-agents-panel__autoplan-desc {
  font-size: 12px;
  color: var(--dc-text-muted);
  line-height: 1.45;
  margin: 0;
}
.dc-agents-panel__autoplan-desc strong {
  font-weight: 700;
  color: var(--dc-text);
}

/* Bottom actions */
.dc-agents-panel__actions {
  padding: 14px 18px;
  background: var(--dc-bg-elev);
  border-top: 1px solid var(--dc-border);
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.dc-agents-panel__actions .btn {
  font-family: var(--dc-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--dc-radius);
}
#agents-giro-save {
  background: var(--dc-success);
  border-color: transparent;
  color: #fff;
}
#agents-giro-save:hover:not(:disabled) {
  background: var(--dc-success);
  filter: brightness(1.08);
  color: #fff;
  border-color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   KPI STRIP — riusabile per Oggi/Storico/Stats
   ────────────────────────────────────────────────────────────────────────── */
.dc-agents-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 767.98px) {
  .dc-agents-kpis { grid-template-columns: repeat(2, 1fr); }
}
.dc-agents-kpi {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.dc-agents-kpi__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-agents-kpi__label .bi { font-size: 14px; color: var(--dc-primary); }
.dc-agents-kpi__value {
  font-family: var(--dc-font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--dc-text);
}
.dc-agents-kpi__value--sm { font-size: 18px; line-height: 1.2; }
.dc-agents-kpi__sub {
  font-size: 12px;
  color: var(--dc-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dc-agents-kpi__sub .bi { font-size: 12px; }
.dc-agents-kpi--urgent { background: linear-gradient(135deg, rgba(208, 72, 72, .04) 0%, var(--dc-surface) 60%); }
.dc-agents-kpi--urgent .dc-agents-kpi__label .bi { color: var(--dc-danger); }
.dc-agents-kpi--urgent .dc-agents-kpi__value { color: #9d2a2a; }
.dc-agents-kpi--success .dc-agents-kpi__label .bi { color: var(--dc-success); }
.dc-agents-kpi--warning .dc-agents-kpi__label .bi { color: var(--dc-warning); }
.dc-agents-kpi--next {
  background: linear-gradient(135deg, var(--dc-primary-soft) 0%, var(--dc-surface) 65%);
  border-color: var(--dc-primary);
}
.dc-agents-kpi--next .dc-agents-kpi__label { color: var(--dc-primary-strong); }

/* ──────────────────────────────────────────────────────────────────────────
   VISIT CARDS — tab Oggi (sostituiscono il list-group precedente)
   ────────────────────────────────────────────────────────────────────────── */
.dc-agents-visit {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  transition: all .12s ease;
}
.dc-agents-visit:hover {
  border-color: var(--dc-primary);
}
.dc-agents-visit__time {
  flex: 0 0 64px;
  text-align: center;
  font-family: var(--dc-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--dc-text);
}
.dc-agents-visit__time small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dc-text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.dc-agents-visit__body { flex: 1; min-width: 0; }
.dc-agents-visit__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--dc-text);
  margin-bottom: 4px;
}
.dc-agents-visit__meta {
  font-size: 12.5px;
  color: var(--dc-text-muted);
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.dc-agents-visit__meta .bi { color: var(--dc-primary); }
.dc-agents-visit__meta .badge {
  font-family: var(--dc-font-sans);
  font-weight: 500;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.dc-agents-visit__actions { display: flex; gap: 8px; flex-shrink: 0; }
.dc-agents-visit--done { opacity: .85; }
.dc-agents-visit--done .dc-agents-visit__time { color: var(--dc-text-muted); }

/* Section headers (Da fare / Fatte) */
.dc-agents-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 12px;
}
.dc-agents-section-head h2 {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dc-agents-section-head h2 .bi { color: var(--dc-primary); }
.dc-agents-section-head .text-muted { font-size: 13px; }

/* Empty state visite */
.dc-agents-visit-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--dc-text-muted);
  font-size: 13px;
  background: var(--dc-surface);
  border: 1px dashed var(--dc-border);
  border-radius: 10px;
}

/* ──────────────────────────────────────────────────────────────────────────
   STORICO — filter card + tabella
   ────────────────────────────────────────────────────────────────────────── */
.dc-agents-filter-card {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  padding: 18px 20px;
}
.dc-agents-filter-card .form-label.small {
  font-family: var(--dc-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
#agents-storico-tbody .badge {
  font-family: var(--dc-font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   STATISTICHE — chart cards
   ────────────────────────────────────────────────────────────────────────── */
#agents-stats-status {
  font-family: var(--dc-font-sans);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dc-text-muted);
}
.dc-agents-content .card .card-header {
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-border);
  font-family: var(--dc-font-display);
  font-size: 15px;
  letter-spacing: -.015em;
  text-transform: none;
  font-weight: 600;
  color: var(--dc-text);
  padding: 14px 16px;
}
#agents-stats-top-clienti td,
#agents-stats-top-modelli td {
  vertical-align: middle;
  font-size: 13px;
  font-family: var(--dc-font-sans);
}
#agents-stats-top-clienti td:first-child,
#agents-stats-top-modelli td:first-child {
  font-family: var(--dc-font-mono);
  font-weight: 600;
  width: 32px;
  color: var(--dc-text-muted);
}

/* ──────────────────────────────────────────────────────────────────────────
   MODALI — invariati (header bianco, niente lime tactical)
   ────────────────────────────────────────────────────────────────────────── */
#agents-modal-why .modal-content,
#agents-modal-visit .modal-content,
#agents-modal-email .modal-content,
#agents-modal-report .modal-content,
#agents-modal-auto .modal-content {
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  background: var(--dc-surface);
}
#agents-modal-why .modal-header,
#agents-modal-visit .modal-header,
#agents-modal-email .modal-header,
#agents-modal-report .modal-header,
#agents-modal-auto .modal-header {
  background: var(--dc-surface);
  color: var(--dc-text);
  border-bottom: 1px solid var(--dc-border);
}
#agents-modal-why .modal-title,
#agents-modal-visit .modal-title,
#agents-modal-email .modal-title,
#agents-modal-report .modal-title,
#agents-modal-auto .modal-title {
  font-family: var(--dc-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  text-transform: none;
}
#agents-modal-why .display-6 {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: -.03em;
  color: var(--dc-primary-strong);
}
#agents-modal-why .progress {
  border-radius: 999px;
  background: var(--dc-bg);
  height: 8px;
}
#agents-modal-why .progress-bar {
  border-radius: 999px;
  background: var(--dc-primary);
}
#agents-modal-visit .btn-group .btn {
  font-family: var(--dc-font-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--dc-radius);
}

/* ──────────────────────────────────────────────────────────────────────────
   LEAFLET MARKERS — pin custom
   ────────────────────────────────────────────────────────────────────────── */
.dc-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dc-font-sans);
  font-weight: 600;
  filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25));
  transition: transform var(--dc-transition);
}
.dc-pin:hover { transform: scale(1.15); }

/* Marker "casa" dell'agente (partenza/arrivo del giro): goccia rossa con
   icona casetta. Rimpiazza il vecchio pin anchor ★ (la casa è la Partenza). */
.dc-pin-home { position: relative; width: 36px; height: 44px; }
.dc-pin-home svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.dc-pin-home .pin-fill { fill: var(--dc-danger); }
.dc-pin-home .pin-stroke { stroke: #fff; stroke-width: 1.5; }
.dc-pin-home .pin-home-ico {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

.dc-pin-giro { width: 32px; height: 32px; }
.dc-pin-giro svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.dc-pin-giro .pin-fill { fill: var(--dc-primary); }
.dc-pin-giro .pin-stroke { stroke: #fff; stroke-width: 1.5; }
.dc-pin-giro .pin-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-family: var(--dc-font-mono);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);  /* contrasto del numero sul blu */
  z-index: 2;  /* sopra l'SVG dell'esagono (che è z-index:1): senza, il numero resta nascosto */
}

.dc-pin-target {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dc-surface);
  border: 2px solid var(--dc-text-muted);
  position: relative;
}
.dc-pin-target.score-hi {
  border-color: var(--dc-success);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
  color: var(--dc-success);
}
.dc-pin-target.score-mid {
  border-color: var(--dc-warning);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc-warning) 25%, transparent);
  color: var(--dc-warning);
}
.dc-pin-target.score-lo { border-color: var(--dc-text-muted); color: var(--dc-text-muted); }
.dc-pin-target::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

/* Evidenziazione breve del marker (usata da BL_AGENTS_MAP.locate). */
@keyframes dc-pin-pulse { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.5); } }
.dc-pin--pulse { animation: dc-pin-pulse 1.5s ease; }

/* Polyline animata */
.leaflet-overlay-pane svg path.dc-polyline {
  stroke-dasharray: 10 6;
  animation: dc-polyline-flow 1.6s linear infinite;
}
@keyframes dc-polyline-flow {
  to { stroke-dashoffset: -16; }
}

/* Popup buttons */
.leaflet-popup-content button {
  font-family: var(--dc-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   MOBILE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .dc-agents-week { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .dc-agents-controls { gap: 10px; }
  .dc-agents-visit { flex-wrap: wrap; }
  .dc-agents-visit__time { flex-basis: auto; }
  .dc-agents-visit__actions { width: 100%; justify-content: flex-end; }
  #agents-map { min-height: 360px; }
}

/* ==========================================================================
   OVERRIDE — KPI catalog/BI legacy (.dc-cat-kpi) allineati al Cool Slate.
   Si applica alle pagine BI esistenti (stats/bi/*, admin/assistant_usage)
   che ancora usano questo pattern senza richiedere tocchi al markup.
   ========================================================================== */
.dc-cat-kpis {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  display: grid;
}
.dc-cat-kpi {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: none;
}
.dc-cat-kpi__label {
  font-family: var(--dc-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  margin-bottom: 6px;
}
.dc-cat-kpi__value {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -.025em;
  line-height: 1;
  color: var(--dc-text);
  font-feature-settings: "tnum";
}
.dc-cat-kpi__sub {
  font-family: var(--dc-font-sans);
  font-size: 12px;
  color: var(--dc-text-muted);
  margin-top: 8px;
  font-feature-settings: "tnum";
}
.dc-cat-kpi__sub.is-positive { color: var(--dc-success); }
.dc-cat-kpi__sub.is-negative { color: var(--dc-danger); }


/* ==== INTEGRATION SECTIONS — header carrier/servizio (admin/integrations.php) ==== */
.dc-integration-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 16px;
}
.dc-integration-header:first-of-type { margin-top: 12px; }
.dc-integration-header__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.dc-integration-header__avatar img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.dc-integration-header__avatar--brand {
  background: var(--dc-primary);
  color: #fff;
  border-color: transparent;
}
.dc-integration-header__avatar--anthropic {
  background: #cc785c;
  color: #fff;
  border-color: transparent;
}
.dc-integration-header__title {
  font-family: var(--dc-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.02em;
  color: var(--dc-text);
  margin: 0;
  line-height: 1.2;
}
.dc-integration-header__sub {
  font-size: 13px;
  color: var(--dc-text-muted);
  margin: 2px 0 0;
}

/* ==== PLACEHOLDER CHIPS — click-to-copy (admin/agents_templates.php) ==== */
.dc-placeholder-chip {
  display: block;
  padding: 6px 10px;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  background: var(--dc-bg-elev);
  color: var(--dc-text);
  font-family: var(--dc-font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: all .12s ease;
  user-select: all;
}
.dc-placeholder-chip:hover {
  border-color: var(--dc-primary);
  background: var(--dc-primary-soft);
  color: var(--dc-primary-strong);
}
.dc-placeholder-chip.is-copied {
  border-color: var(--dc-success);
  background: var(--dc-success-soft);
  color: var(--dc-success);
}

/* ==== COMPONENTI DI PAGINA — quota bar, skeleton, info-tile, sync-summary, ecc. ==== */

/* ── QUOTA BAR — mini-barra orizzontale per breakdown ── */
.dc-quota-bar {
  display: inline-block;
  width: 72px;
  height: 6px;
  background: var(--dc-border);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.dc-quota-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--dc-primary);
  transition: width .25s ease;
}

/* ── LINE HEADER — header di pagina carrier_invoice_line con stamp BRT/GLS ── */
.dc-line-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-left-width: 4px;
  border-left-color: var(--dc-border-strong);
  border-radius: var(--dc-radius-md);
}
.dc-line-header:has(.dc-line-header__stamp--brt) { border-left-color: var(--dc-danger); }
.dc-line-header:has(.dc-line-header__stamp--gls) { border-left-color: var(--dc-primary); }
.dc-line-header__stamp {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 52px;
  border-radius: var(--dc-radius);
  border: 2px solid currentColor;
  font-family: var(--dc-font-mono);
  font-weight: 600;
}
.dc-line-header__stamp--brt { color: var(--dc-danger);  background: var(--dc-danger-soft); }
.dc-line-header__stamp--gls { color: var(--dc-primary); background: var(--dc-primary-soft); }
.dc-line-header__stamp-icon  { font-size: 16px; line-height: 1; }
.dc-line-header__stamp-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dc-line-header__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--dc-font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dc-line-header__title code {
  font-family: var(--dc-font-mono);
  font-size: 20px;
  font-weight: 600;
  background: transparent;
  color: var(--dc-text);
  padding: 0;
  letter-spacing: -.005em;
}
.dc-line-header__match {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--dc-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 999px;
}
.dc-line-header__match--ok {
  color: var(--dc-success);
  background: var(--dc-success-soft);
  border-color: var(--dc-success);
}
.dc-line-header__match--no {
  color: var(--dc-danger);
  background: var(--dc-danger-soft);
  border-color: var(--dc-danger);
}
.dc-line-header__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .dc-line-header { flex-wrap: wrap; }
  .dc-line-header__actions { width: 100%; }
}

/* ── DELIVERED CARD — "Consegnate in questa sync", verde soft ── */
.dc-delivered-card {
  border: 1px solid var(--dc-success);
  border-left: 4px solid var(--dc-success);
  background: var(--dc-surface);
}
.dc-delivered-card > .card-header {
  background: var(--dc-success-soft);
  border-bottom: 1px solid var(--dc-success);
  color: var(--dc-success);
}
.dc-delivered-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--dc-success);
  color: #fff;
  border-radius: var(--dc-radius);
  font-size: 16px;
}
.dc-delivered-card .text-muted { color: var(--dc-success) !important; }

/* ── INFO TILES — KPI verticale per dettaglio documento ERP ── */
.dc-info-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 16px 16px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-md);
  transition: var(--dc-transition);
}
.dc-info-tile:hover {
  border-color: var(--dc-primary);
}
a.dc-info-tile--clickable,
a.dc-info-tile--clickable:hover {
  color: var(--dc-text);
  text-decoration: none;
}
a.dc-info-tile--clickable { cursor: pointer; }
.dc-info-tile__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dc-font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--dc-text-muted);
  line-height: 1.1;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dc-border);
  margin-bottom: 6px;
}
.dc-info-tile__label i { font-size: 13px; opacity: .85; color: var(--dc-primary); }
.dc-info-tile__value {
  font-size: 16px;
  font-weight: 500;
  color: var(--dc-text);
  line-height: 1.35;
  word-break: break-word;
  letter-spacing: -0.015em;
}
.dc-info-tile__value--scalar {
  font-family: var(--dc-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.dc-info-tile__value--mono {
  font-family: var(--dc-font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
/* Sotto-sezione "Rientro" nel tile Tracking del documento (modulo Colli in
   rientro): separata con una hairline dal blocco status sopra; intestazione +
   stato inline muted, niente pill ridondante con lo status corriere. */
.dc-return-block {
  border-top: 1px solid var(--dc-border);
  padding-top: 12px;
}
.dc-return-block__head {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dc-text);
  line-height: 1.3;
  margin-bottom: 8px;
}
.dc-return-block__head > i { color: var(--dc-text-muted); margin-right: 5px; }
.dc-return-block__state { font-weight: 500; color: var(--dc-text-muted); }
.dc-return-block__state::before { content: "·"; margin: 0 5px; color: var(--dc-border-strong); }
.dc-return-block__sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--dc-letter-tracked);
  color: var(--dc-text-muted);
  margin: 12px 0 6px;
}
.dc-return-note {
  font-size: 12.5px;
  color: var(--dc-text);
  background: var(--dc-surface-2);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 8px 10px;
  margin-top: 6px;
}
.dc-return-note :last-child { margin-bottom: 0; }
.dc-return-note-panel .ql-container { min-height: 90px; }
/* Nota dispositiva mostrata compatta nella colonna "Stato rientro" della lista. */
.dc-return-note-inline {
  font-size: 11.5px;
  color: var(--dc-text-muted);
  line-height: 1.35;
  margin-top: 4px;
  max-width: 300px;
}
.dc-return-note-inline p { margin: 0 0 2px; }
.dc-return-note-inline :last-child { margin-bottom: 0; }
.dc-info-tile__sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--dc-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}
.dc-info-tile__sub i { opacity: .7; margin-right: 3px; }
.dc-info-tile__divider {
  height: 1px;
  background: var(--dc-border);
  margin: 5px 0 2px;
  border-top: 1px solid var(--dc-border);
}
.dc-info-tile__footer { margin-top: auto; padding-top: 10px;   border-top: 1px solid var(--dc-border);
}

/* Sync actions: bottone "Aggiorna stato spedizione" + switch "Sospendi
   sincronizzazione" affiancati nel footer dell'info tile. Lo switch è una
   pill discreta che permette di marcare un singolo documento come "non più
   sincronizzabile" (parcel troppo vecchio che il corriere non espone più). */
.dc-sync-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dc-sync-toggle {
  margin: 0;
}
.dc-sync-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--dc-text-muted);
  text-align: left;
}
.dc-sync-toggle__btn:hover { color: var(--dc-text); filter: none; }
.dc-sync-toggle__track {
  width: 30px; height: 16px;
  background: var(--dc-border);
  border-radius: 999px;
  position: relative;
  transition: background var(--dc-transition);
  flex-shrink: 0;
}
.dc-sync-toggle__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--dc-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  transition: transform var(--dc-transition);
}
.dc-sync-toggle__btn.is-on .dc-sync-toggle__track { background: var(--dc-warning); }
.dc-sync-toggle__btn.is-on .dc-sync-toggle__thumb { transform: translateX(14px); }
.dc-sync-toggle__btn.is-on .dc-sync-toggle__label {
  color: var(--dc-warning);
  font-weight: 600;
}

/* Btn-surface: utility neutra con stessa "superficie" dei tile KPI */
.dc-btn-surface {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  color: var(--dc-text);
}
.dc-btn-surface:hover,
.dc-btn-surface:focus {
  background: var(--dc-bg-elev);
  border-color: var(--dc-primary);
  color: var(--dc-text);
}

/* ── SYNC ERRORS — pannello errori dentro card progress ── */
.dc-sync-errors {
  border-top: 1px dashed var(--dc-border);
  padding-top: 12px;
}
.dc-sync-errors__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  background: var(--dc-surface);
}
.dc-sync-errors__item {
  padding: 7px 10px;
  border-bottom: 1px solid var(--dc-border);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.dc-sync-errors__item:last-child { border-bottom: none; }
.dc-sync-errors__tn {
  font-family: var(--dc-font-mono);
  font-size: 12.5px;
  background: var(--dc-danger-soft);
  color: var(--dc-danger);
  padding: 1px 5px;
  border-radius: var(--dc-radius-sm);
}
.dc-sync-errors__msg { color: var(--dc-text-muted); }

/* ── SVINCOLI — storico azioni svincolo giacenza ── */
.dc-svincoli {
  border: 1px solid var(--dc-warning);
}
.dc-svincoli > .card-header {
  background: var(--dc-warning-soft);
  border-bottom: 1px solid var(--dc-warning);
  color: var(--dc-warning);
}
.dc-svincoli > .card-header .bi { color: var(--dc-warning); }
.dc-svincoli > .card-header .text-muted { color: var(--dc-warning) !important; }
.dc-svincoli .list-group-item {
  background: var(--dc-surface);
  border-color: var(--dc-border);
  padding: 14px 18px;
}
.dc-svincoli__date {
  font-family: var(--dc-font-mono);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.dc-svincoli__notes {
  background: var(--dc-warning-soft);
  border-left: 3px solid var(--dc-warning);
  border-radius: var(--dc-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dc-text);
  margin-top: 6px;
}
.dc-svincoli__notes p:last-child { margin-bottom: 0; }
.dc-svincoli__notes ol,
.dc-svincoli__notes ul { padding-left: 20px; margin: 4px 0 8px; }
.dc-svincoli__notes a { color: var(--dc-primary); text-decoration: underline; }
.dc-svincoli__notes h2,
.dc-svincoli__notes h3 { font-size: 16px; margin: 8px 0 6px; font-weight: 600; }
.dc-svincoli__notes blockquote {
  margin: 4px 0;
  padding-left: 12px;
  border-left: 3px solid var(--dc-border);
  color: var(--dc-text-muted);
}
.dc-svincoli__emaillog {
  border-top: 1px dashed var(--dc-border);
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-emaillog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--dc-success-soft);
  border-radius: var(--dc-radius-sm);
  border-bottom: 1px solid var(--dc-border);
}
.dc-emaillog-row--error {
  background: var(--dc-danger-soft);
}
.dc-emaillog-row__to {
  font-weight: 600;
  font-family: var(--dc-font-mono);
  font-size: 12.5px;
}
.dc-emaillog-row__err {
  font-size: 12px;
  color: var(--dc-danger);
  flex-basis: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── SVINCOLO BADGE — badge tabella giacenze "Svincolo richiesto" ── */
.dc-svincolo-badge {
  background: var(--dc-warning-soft);
  color: var(--dc-warning);
  border: 1px solid var(--dc-warning);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0;
}
.dc-svincolo-badge .bi { font-size: 13px; }
.dc-row-svincolo > td {
  background: var(--dc-warning-soft);
}
.dc-row-svincolo > td:first-child {
  box-shadow: inset 3px 0 0 var(--dc-warning);
}

/* ── SYNC SUMMARY — "ricevuta" sync ERP (post-POST sync) ── */
.dc-sync-summary {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  border-left-width: 4px;
  border-radius: var(--dc-radius-md);
  margin-bottom: 20px;
  overflow: hidden;
}
.dc-sync-summary--ok   { border-left-color: var(--dc-success); }
.dc-sync-summary--warn { border-left-color: var(--dc-warning); }
.dc-sync-summary__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dc-border);
  background: var(--dc-surface);
}
.dc-sync-summary--ok .dc-sync-summary__head   { background: var(--dc-success-soft); border-bottom-color: var(--dc-success); }
.dc-sync-summary--warn .dc-sync-summary__head { background: var(--dc-warning-soft); border-bottom-color: var(--dc-warning); }
.dc-sync-summary__head-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dc-sync-summary__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--dc-radius);
  font-size: 18px;
  color: #fff;
}
.dc-sync-summary--ok   .dc-sync-summary__icon { background: var(--dc-success); }
.dc-sync-summary--warn .dc-sync-summary__icon { background: var(--dc-warning); }
.dc-sync-summary__title-block { min-width: 0; }
.dc-sync-summary__eyebrow {
  font-family: var(--dc-font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
  line-height: 1.1;
}
.dc-sync-summary__title {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-top: 2px;
  color: var(--dc-text);
}
.dc-sync-summary__range {
  margin-top: 4px;
  font-size: 12.5px;
  font-family: var(--dc-font-mono);
  color: var(--dc-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dc-sync-summary__sep { opacity: .5; }
.dc-sync-summary__head-right { flex-shrink: 0; }

/* Metric grid */
.dc-sync-summary__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}
.dc-sync-summary__metric {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--dc-border);
  background: var(--dc-surface);
}
.dc-sync-summary__metric:last-child { border-right: none; }
.dc-sync-summary__metric-label {
  font-family: var(--dc-font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dc-text-muted);
}
.dc-sync-summary__metric-value {
  font-family: var(--dc-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--dc-text);
}
.dc-sync-summary__metric-hint {
  font-size: 12px;
  color: var(--dc-text-muted);
  margin-top: 2px;
}
.dc-sync-summary__metric--primary .dc-sync-summary__metric-value { color: var(--dc-success); }
.dc-sync-summary--warn .dc-sync-summary__metric--primary .dc-sync-summary__metric-value { color: var(--dc-text); }
.dc-sync-summary__metric--warn .dc-sync-summary__metric-value { color: var(--dc-warning); }

/* Removed details */
.dc-sync-summary__removed {
  margin-top: 6px;
  font-family: var(--dc-font-mono);
  font-size: 12px;
}
.dc-sync-summary__removed > summary {
  cursor: pointer;
  color: var(--dc-primary);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dc-sync-summary__removed > summary::before {
  content: '▸';
  font-size: 10px;
  transition: transform .15s ease;
}
.dc-sync-summary__removed[open] > summary::before { transform: rotate(90deg); }
.dc-sync-summary__removed > summary::-webkit-details-marker { display: none; }
.dc-sync-summary__removed-list {
  margin: 8px 0 0;
  padding-left: 16px;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
}
.dc-sync-summary__removed-list li {
  padding: 2px 0;
  border-bottom: 1px dashed var(--dc-border);
  color: var(--dc-text);
}
.dc-sync-summary__removed-list li:last-child { border-bottom: none; }
.dc-sync-summary__removed-type {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-sm);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dc-sync-summary__removed-more {
  margin: 6px 0 0;
  font-style: italic;
  color: var(--dc-text-muted);
}
@media (max-width: 575.98px) {
  .dc-sync-summary__metric { border-right: none; border-bottom: 1px solid var(--dc-border); }
  .dc-sync-summary__metric:last-child { border-bottom: none; }
  .dc-sync-summary__head { flex-wrap: wrap; }
}

/* ── STACK-ON-MOBILE — tabelle che diventano card stack sotto 768px ── */
@media (max-width: 768px) {
  table.dc-stack-on-mobile,
  table.dc-stack-on-mobile thead,
  table.dc-stack-on-mobile tbody,
  table.dc-stack-on-mobile tr,
  table.dc-stack-on-mobile td,
  table.dc-stack-on-mobile th { display: block; }
  table.dc-stack-on-mobile {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
  }
  table.dc-stack-on-mobile thead { display: none; }
  table.dc-stack-on-mobile tbody tr {
    background: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-md);
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  table.dc-stack-on-mobile tbody td {
    border: none;
    padding: 4px 0;
    text-align: right !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }
  table.dc-stack-on-mobile tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    color: var(--dc-text-muted);
    text-align: left;
  }
  table.dc-stack-on-mobile tbody td:not([data-label]) {
    justify-content: flex-end;
  }
  table.dc-stack-on-mobile tbody td:not([data-label])::before {
    content: '';
  }
  table.dc-stack-on-mobile .dc-empty {
    width: 100%;
    text-align: center;
    display: block;
  }
}

/* ── GIACENZA — alert card prominente sul dettaglio documento ── */
.dc-giacenza {
  display: flex;
  align-items: stretch;
  gap: 16px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-danger);
  border-left: 4px solid var(--dc-danger);
  border-radius: var(--dc-radius-md);
  padding: 16px 18px;
  margin: 0 0 16px;
}
.dc-giacenza__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--dc-danger);
  color: #fff;
  border-radius: var(--dc-radius);
  font-size: 24px;
  flex-shrink: 0;
}
.dc-giacenza__body  { flex: 1 1 auto; min-width: 0; }
.dc-giacenza__title {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--dc-text);
  margin-bottom: 4px;
  margin: 0 0 4px;
}
.dc-giacenza__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--dc-text);
  margin-bottom: 6px;
}
.dc-giacenza__meta i { opacity: .75; margin-right: 4px; }
.dc-giacenza__code {
  font-family: var(--dc-font-mono);
  font-size: 11.5px;
  background: var(--dc-bg-elev);
  border: 1px solid var(--dc-border);
  padding: 1px 6px;
  border-radius: var(--dc-radius-sm);
  color: var(--dc-text);
  font-weight: 600;
}
.dc-giacenza__desc {
  margin: 0;
  color: var(--dc-text);
  font-size: 13px;
  line-height: 1.5;
}

/* ==== FINE app.css ==== */

/* ============================================================
   Agenda (FullCalendar · tema Cool Slate)
   ============================================================ */
.agenda-card .card-body { min-height: 60vh; }

/* Editor note (Quill) nella modal evento: altezza vincolata + scroll interno,
   così non cresce a dismisura sovrapponendosi al footer (Salva/Annulla). */
#agendaEventModal #ev-note-editor { background: var(--dc-surface); }
#agendaEventModal .ql-editor { min-height: 100px; max-height: 200px; overflow-y: auto; }
#agendaEventModal .ql-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; }
#agendaEventModal .ql-container { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

/* ---- Modal evento: redesign (accent · sezioni · chip tipologia · toggle stato) ----
   .modal-content ha già overflow:hidden da .modal-dialog-scrollable, quindi la barra
   accent in cima eredita gli angoli arrotondati. --accent è impostata via JS sul
   #ev-content (= colore della tipologia selezionata); --c sul singolo chip. Sono
   colori-dato della tipologia (da DB), non bordi di chrome: ammessi via CSS var. */
#agendaEventModal .dc-ev-accent { height: 4px; background: var(--accent, var(--dc-primary)); }

#agendaEventModal .modal-header.dc-ev-head { align-items: flex-start; gap: 12px; }
#agendaEventModal .dc-ev-head__main { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
#agendaEventModal .dc-ev-head__actions { display: flex; align-items: center; gap: 10px; }
#agendaEventModal .dc-ev-title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--dc-font-display); font-weight: 600; letter-spacing: -.02em;
}
#agendaEventModal .dc-ev-title i { color: var(--accent, var(--dc-primary)); }
#agendaEventModal .dc-ev-sub { font-size: 12px; color: var(--dc-text-muted); margin: 3px 0 0; }
#agendaEventModal .dc-ev-sub:empty { display: none; }

#agendaEventModal .dc-ev-status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--dc-border); background: var(--dc-surface); color: var(--dc-text-muted); cursor: pointer;
}
#agendaEventModal .dc-ev-status.is-done {
  border-color: var(--dc-success); background: var(--dc-success-soft); color: var(--dc-success);
}

#agendaEventModal .dc-ev-sec { margin-bottom: 16px; }
#agendaEventModal .dc-ev-sec:last-child { margin-bottom: 0; }
#agendaEventModal .dc-ev-sec__label {
  display: flex; align-items: center; gap: 6px; margin: 0 0 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--dc-text-muted);
}
#agendaEventModal .dc-ev-sec__label i { font-size: 13px; opacity: .85; }

#agendaEventModal .dc-ev-types { display: flex; flex-wrap: wrap; gap: 8px; }
#agendaEventModal .dc-ev-type {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--dc-border); background: var(--dc-surface); color: var(--dc-text);
}
#agendaEventModal .dc-ev-type__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--dc-primary)); flex: 0 0 auto; }
#agendaEventModal .dc-ev-type.is-active {
  border-color: var(--c, var(--dc-primary));
  background: color-mix(in srgb, var(--c, var(--dc-primary)) 13%, var(--dc-surface));
  color: color-mix(in srgb, var(--c, var(--dc-primary)) 72%, var(--dc-text));
  font-weight: 600;
}
/* Dark: i colori-tipologia sono letterali (non theme-adattivi); col mix 72% il testo
   dell'active chip cadeva sotto AA su sfondo scuro (3.7–4.4:1). In dark si schiarisce
   verso --dc-text mantenendo un'impronta di colore (contrasto ≥ ~6.8:1). */
[data-bs-theme="dark"] #agendaEventModal .dc-ev-type.is-active {
  color: color-mix(in srgb, var(--c, var(--dc-primary)) 40%, var(--dc-text));
}
#agendaEventModal .dc-ev-type--add { border-style: dashed; color: var(--dc-text-muted); }

#agendaEventModal .dc-ev-newtype { display: flex; gap: 8px; margin-top: 10px; }
#agendaEventModal .dc-ev-newtype .form-control-color { width: 42px; flex: 0 0 auto; padding: 2px 3px; }
#agenda-calendar {
  --fc-border-color: var(--dc-border);
  --fc-page-bg-color: var(--dc-surface);
  --fc-neutral-bg-color: var(--dc-surface-2);
  --fc-today-bg-color: var(--dc-primary-soft);
  --fc-now-indicator-color: var(--dc-danger);
  --fc-event-text-color: #fff;
  --fc-list-event-hover-bg-color: var(--dc-surface-2);
  font-family: inherit;
}
#agenda-calendar .fc-toolbar-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  text-transform: capitalize;
}
#agenda-calendar .fc-button {
  background: var(--dc-surface);
  border: 1px solid var(--dc-border);
  color: var(--dc-text);
  font-size: .82rem;
  padding: .3rem .65rem;
  border-radius: 8px;
  box-shadow: none;
  text-transform: capitalize;
}
#agenda-calendar .fc-button:hover { background: var(--dc-surface-2); }
#agenda-calendar .fc-button-active,
#agenda-calendar .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--dc-primary);
  border-color: var(--dc-primary);
  color: #fff;
}
/* Spaziatura tra i bottoni dei gruppi toolbar (viste Giorno/Settimana/Mese/Lista
   e frecce prev/next): FullCalendar li attacca con margini negativi e angoli
   interni squadrati → li separiamo e ridiamo a ciascuno il proprio radius. */
#agenda-calendar .fc-button-group { gap: 6px; }
#agenda-calendar .fc-button-group > .fc-button {
  margin: 0;
  border-radius: 8px;
}
#agenda-calendar .fc-col-header-cell-cushion,
#agenda-calendar .fc-daygrid-day-number,
#agenda-calendar .fc-list-day-text,
#agenda-calendar .fc-list-day-side-text { color: var(--dc-text); text-decoration: none; }
#agenda-calendar .fc-event { border-radius: 6px; cursor: pointer; }
#agenda-calendar .agenda-done { opacity: .55; }
#agenda-calendar .agenda-done .fc-event-title,
#agenda-calendar .agenda-done .fc-list-event-title { text-decoration: line-through; }
#agenda-calendar .agenda-visit { cursor: pointer; }

/* Stampa agenda: solo il calendario (vista lista), niente chrome */
@media print {
  body:has(#agenda-calendar) .dc-sidebar,
  body:has(#agenda-calendar) header.dc-header,
  body:has(#agenda-calendar) .agenda-toolbar,
  body:has(#agenda-calendar) .fc-header-toolbar { display: none !important; }
  body:has(#agenda-calendar) .dc-main { margin: 0; padding: 0; }
  body:has(#agenda-calendar) .agenda-card { border: none; box-shadow: none; }
}

/* ============================================================
   Documento ERP · dettaglio (note, da non addebitare, stampa)
   ============================================================ */
/* Righe fattura corriere collegate a documenti "da non addebitare":
   tinta soft theme-adattiva (danger su base trasparente). */
.dc-row-nopay > td { background: color-mix(in srgb, var(--dc-danger) 6%, transparent); }

/* Stampa documento: il corpo (righe articolo) è in un collapse chiuso di
   default, ma sul foglio deve esserci sempre — solo questo pannello, i
   collapse-form (email/svincolo/danni/no-charge) restano non stampati. */
@media print {
  #docBodyPanel { display: block !important; }
}

/* Dropdown "Azioni Corriere" nel cluster header: voci leggermente più
   compatte del body (16px − 2px). */
.dc-header-actions-menu .dropdown-item { font-size: 14px; }

/* Dropdown: hover/focus/active su --dc-primary (il blu default di Bootstrap è
   troppo acceso, fuori dal design system quieto). Testo bianco per contrasto.
   Override delle variabili Bootstrap → vale per tutti i dropdown. */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--dc-primary);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-active-bg: var(--dc-primary);
  --bs-dropdown-link-active-color: #fff;
}

/* ==== 🎄 CHICCA NATALIZIA (christmas.access) ==== */

/* Widget header: alberello con lucine + Babbo Natale + countdown. */
.dc-xmas-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border: 1px solid var(--dc-border);
  border-radius: 999px;
  background: color-mix(in srgb, #3b7d4a 9%, transparent);
  text-decoration: none;
  transition: var(--dc-transition);
}
.dc-xmas-header:hover {
  transform: translateY(-1px);
  border-color: var(--dc-border-xmas, #3b7d4a); /* regola border=single-knob: var dedicata */
  box-shadow: var(--dc-shadow);
}
/* Mobile: l'header (gear+logout+utente) non ha spazio per altro — il pill
   sparisce sotto 576px (misurato: anche compresso causava scroll orizzontale).
   La pagina resta raggiungibile via URL; la chicca è un piacere da desktop. */
@media (max-width: 575.98px) {
  .dc-xmas-header { display: none; }
}
.dc-xmas-header__santa { font-size: 15px; line-height: 1; }
.dc-xmas-header__tree { width: 20px; height: 24px; display: block; }
.dc-xmas-header__days {
  font-family: var(--dc-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #2f6638;
}
[data-bs-theme="dark"] .dc-xmas-header__days { color: #7fc492; }

/* Lucine: lampeggio sfalsato. */
.dc-xmas-light { animation: dc-xmas-blink 1.4s ease-in-out infinite; }
.dc-xmas-light--1 { fill: #e3b341; animation-delay: 0s; }
.dc-xmas-light--2 { fill: #d64545; animation-delay: .35s; }
.dc-xmas-light--3 { fill: #4f8fd6; animation-delay: .7s; }
.dc-xmas-light--4 { fill: #9c6ade; animation-delay: 1.05s; }
@keyframes dc-xmas-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-xmas-light { animation: none; }
  #xmasBaubles .is-new { animation: none; }
  .dc-xmas-header,
  .dc-xmas-header:hover,
  .dc-xmas-pick,
  .dc-xmas-pick:hover { transform: none; transition: none; }
}

/* Pagina albero. */
.dc-xmas-stage {
  padding: 0;           /* scena a tutto sangue: niente passe-partout */
  overflow: hidden;     /* la card ritaglia gli angoli del cielo */
}
.dc-xmas-stage svg {
  display: block;
  width: 100%;
  height: auto;
}
.dc-xmas-side .dc-xmas-basket { padding-top: 6px; }
.dc-xmas-basket__svg { width: 110px; display: block; margin: 0 auto; }
.dc-xmas-basket__num {
  font-family: var(--dc-font-display);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: -46px;   /* il numero "dentro" il cesto */
  position: relative;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.dc-xmas-basket--done .dc-xmas-basket__num { margin-top: 0; text-shadow: none; }
.dc-xmas-basket__label {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase;
  color: var(--dc-text-muted);
  font-weight: 600;
}

/* Palline: il colore (fill/background) è l'hex reale TSRA150, inline. */
.dc-xmas-bauble { stroke: rgba(0,0,0,.25); stroke-width: 1; }
#xmasBaubles .is-new { animation: dc-xmas-pop .4s cubic-bezier(.22,.61,.36,1); }
@keyframes dc-xmas-pop {
  0%   { transform: scale(0); transform-origin: center; transform-box: fill-box; }
  70%  { transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
  100% { transform: scale(1); transform-origin: center; transform-box: fill-box; }
}

/* Palette di scelta: griglia scrollabile (78-90 colori TSRA150). */
.dc-xmas-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 7px;
  margin-top: 6px;
  padding: 2px;
  justify-items: center;
}
.dc-xmas-pick {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);   /* contorno netto anche sui colori chiari */
  cursor: pointer;
  padding: 0;
  transition: transform var(--dc-transition), box-shadow var(--dc-transition);
  /* lucentezza in alto a sinistra, ombra minima in basso: pallina "solida" */
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.45), inset -1px -2px 2px rgba(0,0,0,.22);
}
.dc-xmas-pick:hover { transform: translateY(-2px) scale(1.18); z-index: 1; }
.dc-xmas-pick.is-selected {
  border-color: var(--dc-text);
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.45), 0 0 0 2px var(--dc-surface), 0 0 0 4px var(--dc-primary);
  transform: scale(1.18);
  z-index: 1;
}
.dc-xmas-pick:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}
.dc-xmas-pick:disabled {
  opacity: .7;
  cursor: default;
  transform: none;
}
.dc-xmas-palette.is-done { opacity: .85; }

/* ==== 🎄 Ruota della fortuna + classifica + pallina d'oro ==== */

.dc-xmas-wheel-wrap { display: flex; justify-content: center; margin: 4px 0 2px; }
.dc-xmas-wheel {
  position: relative;
  width: 190px; height: 190px;
}
.dc-xmas-wheel__disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 4px solid var(--dc-surface);
  box-shadow: 0 0 0 3px var(--dc-border-strong), var(--dc-shadow);
  transform: rotate(0deg);
  /* background = conic-gradient inline (fette calcolate in PHP) */
}
/* Ogni nome è in una "striscia" dal centro al bordo, ruotata sulla sua fetta;
   il testo sta vicino al bordo (non coperto dall'hub) e legge in radiale. */
.dc-xmas-wheel__seg {
  position: absolute; left: 50%; top: 0;
  width: 84px; height: 50%;
  margin-left: -42px;
  transform-origin: bottom center;   /* = centro ruota */
  pointer-events: none;
}
.dc-xmas-wheel__seg span {
  display: block; text-align: center;
  padding-top: 12px;                 /* stacca dal bordo */
  font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dc-xmas-wheel__pin {
  position: absolute; top: -8px; left: 50%;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 28px solid #c62828;        /* punta in giù, verso lo spicchio vincente */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35));
  z-index: 3;
}
.dc-xmas-wheel__hub {
  position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; margin: -17px;
  border-radius: 50%;
  background: var(--dc-surface);
  box-shadow: 0 0 0 2px var(--dc-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; z-index: 2;
}

.dc-xmas-winner { margin-top: 10px; }
.dc-xmas-winner__label {
  font-size: 11px; letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase; color: var(--dc-text-muted); font-weight: 600;
}
.dc-xmas-winner__name {
  font-family: var(--dc-font-display);
  font-size: 22px; font-weight: 600; color: var(--dc-primary-strong);
  letter-spacing: -0.02em;
}

/* Classifica */
.dc-xmas-board__title {
  font-size: 11px; letter-spacing: var(--dc-letter-tracked);
  text-transform: uppercase; color: var(--dc-text-muted);
  font-weight: 600; margin-bottom: 8px; text-align: left;
}
.dc-xmas-board__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dc-xmas-board__table th {
  font-size: 10px; color: var(--dc-text-muted); font-weight: 600;
  text-align: center; padding: 2px 4px;
}
.dc-xmas-board__table th:nth-child(2) { text-align: left; }
.dc-xmas-board__table td { padding: 4px; border-top: 1px solid var(--dc-border); }
.dc-xmas-board__pos { width: 26px; text-align: center; font-weight: 700; }
.dc-xmas-board__name { text-align: left; }
.dc-xmas-board__num {
  text-align: center; width: 34px;
  font-family: var(--dc-font-mono); font-weight: 700;
}

/* Pallina d'oro: alone pulsante + segmento oro. */
.dc-xmas-golden-halo { opacity: .45; animation: dc-xmas-glow 1.6s ease-in-out infinite; }
@keyframes dc-xmas-glow {
  0%, 100% { opacity: .3; }
  50%      { opacity: .7; }
}
.dc-xmas-bauble-golden .dc-xmas-bauble { stroke: #b8860b; stroke-width: 1.5; }
[data-xmas-gold-arm].is-armed { outline: 2px solid var(--dc-warning); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .dc-xmas-wheel__disc { transition: none !important; }
  .dc-xmas-golden-halo { animation: none; }
}

/* ── Scena notturna (tema dark): l'albero diventa una notte innevata ──────── */
/* Ricolora l'SVG diurno con override di fill (gli attributi di presentazione
   cedono a qualunque regola CSS). Gli elementi solo-notte (.xt-night, alone
   del puntale) stanno a opacity:0 in light e sfumano in dark. Toggling il tema
   fa "calare la sera": i fill fanno crossfade e luna/stelle/neve appaiono.
   Il tema chiaro resta identico. */
#xmasTree .xt-night,
#xmasTree .xt-star-glow { opacity: 0; pointer-events: none; }
#xmasTree rect,
#xmasTree ellipse,
#xmasTree polygon,
#xmasTree .xt-star,
#xmasTree .xt-star-glow,
#xmasTree .xt-day,
#xmasTree .xt-night { transition: fill .55s ease, opacity .55s ease; }

/* .xt-day = l'inverso di .xt-night (il sole c'è solo di giorno) */
[data-bs-theme="dark"] #xmasTree .xt-day       { opacity: 0; }
[data-bs-theme="dark"] #xmasTree .xt-snowman   { fill: #dfe8f3; }
[data-bs-theme="dark"] #xmasTree .xt-night     { opacity: 1; }
[data-bs-theme="dark"] #xmasTree .xt-star-glow { opacity: .45; }
[data-bs-theme="dark"] #xmasTree .xt-sky       { fill: url(#xmasNightSky); }
[data-bs-theme="dark"] #xmasTree .xt-ground-a  { fill: #ccd8e8; }
[data-bs-theme="dark"] #xmasTree .xt-ground-b  { fill: #b7c5da; }
[data-bs-theme="dark"] #xmasTree .xt-far1      { fill: #2a4636; }
[data-bs-theme="dark"] #xmasTree .xt-far2      { fill: #31513d; }
[data-bs-theme="dark"] #xmasTree .xt-far-trunk { fill: #3f2c1c; }
[data-bs-theme="dark"] #xmasTree .xt-shadow    { fill: #8ea6c6; opacity: .5; }
[data-bs-theme="dark"] #xmasTree .xt-tree-1    { fill: #204a32; }
[data-bs-theme="dark"] #xmasTree .xt-tree-2    { fill: #26573b; }
[data-bs-theme="dark"] #xmasTree .xt-tree-3    { fill: #2c6444; }
[data-bs-theme="dark"] #xmasTree .xt-trunk     { fill: #4a3420; }
[data-bs-theme="dark"] #xmasTree .xt-star      { fill: #f0c85a; }

/* Stelle: alone + lampeggio. Ogni stella porta inline la SUA animation-duration e
   delay (v. loop in christmas/index.php), quindi qui vanno le longhand: lo shorthand
   `animation:` azzererebbe la durata inline e il cielo tornerebbe a pulsare a tempo.
   Lo scale fa "brillare" anche l'alone invece di limitarsi a sfumare. */
@media (prefers-reduced-motion: no-preference) {
  [data-bs-theme="dark"] #xmasTree .xt-star-dot {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: dc-xmas-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}
@keyframes dc-xmas-twinkle {
  0%, 100% { opacity: .4; transform: scale(.82); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

/* Neve che cade. Nascosta di base e mostrata SOLO con no-preference: il fiocco È il
   movimento, fermo sarebbe una fila di puntini in cima al cielo — meglio niente.
   (Nascondere di base copre anche gli UA che non supportano la media query.)
   Durata/delay sono inline per fiocco → longhand, non lo shorthand `animation:`. */
#xmasTree .xt-flakes { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #xmasTree .xt-flakes { display: inline; }
  #xmasTree .xt-flake {
    animation-name: dc-xmas-snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}
@keyframes dc-xmas-snowfall {
  0%   { transform: translate(0, -40px); }
  50%  { transform: translate(12px, 260px); }
  100% { transform: translate(0, 560px); }
}
@media (prefers-reduced-motion: reduce) {
  #xmasTree rect, #xmasTree ellipse, #xmasTree polygon,
  #xmasTree .xt-star, #xmasTree .xt-star-glow, #xmasTree .xt-night { transition: none; }
}