/* Layer dei componenti condiviso da tutte le piattaforme del pacchetto.
   Si carica dopo tokens.css e prima del foglio della piattaforma.
   I colori vengono dai token. Gli unici esadecimali sono i quattro valori fissi che
   Parte 6.5 e Parte 3.5 del manuale scrivono letteralmente: i due estremi del gradiente
   neutro, l'estremo chiaro del gradiente di accesso e il fondo del chip informativo. */

/* ---------- 1. Tipografia (Parte 6.1) ---------- */
html, body {
  height: 100%;
  font-family: var(--rg-font-body);
  line-height: normal;
}
.wordmark { font-family: var(--brand-font-display); }
.subtitle {
  font-size: 13px;
  color: var(--rg-caption);
}
.fs-7    { font-size: 14px; }
.font-17 { font-size: 17px; }
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; }

/* ---------- 2. Troncamento (Parte 6.2) ---------- */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.min-width-0 { min-width: 0; }
.subtitle.ellipsis, .username.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subtitle.two-rows.ellipsis {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  height: 40px;
}

/* ---------- 3. Spaziature (Parte 6.3) ---------- */
.p-2-5   { padding: 12px; }
.px-2-5  { padding-left: 12px; padding-right: 12px; }
.mt-2-5  { margin-top: 10px !important; }
.py-12px { padding-top: 12px; padding-bottom: 12px; }
.min-w-130 { min-width: 130px; }
/* Spazio perche' la barra riepilogo non copra l'ultima riga. Serve solo dove la barra
   e' fissa al viewport, cioe' sotto lg: sopra lg e' sticky nel flusso e non copre nulla,
   e il padding lascerebbe solo una banda vuota. */
@media (max-width: 991.98px) {
  .padding-footer { padding-bottom: 80px !important; }
}

/* ---------- 4. Raggi e ombre (Parte 6.4) ---------- */
.rounded-3-5, .btn-outline-secondary, .nav-link.rounded-3-5 { border-radius: var(--rg-radius-input); }
.table-head-sticky thead th { position: sticky; top: 0; z-index: 2; }
.rounded-card-top    { border-top-left-radius: var(--rg-radius-modal); border-top-right-radius: var(--rg-radius-modal); }
.rounded-card-bottom { border-bottom-left-radius: var(--rg-radius-modal); border-bottom-right-radius: var(--rg-radius-modal); }
.rounded-top-accordion    { border-radius: var(--rg-radius-accordion) var(--rg-radius-accordion) 0 0 !important; }
.rounded-bottom-accordion { border-radius: 0 0 var(--rg-radius-accordion) var(--rg-radius-accordion) !important; }
.shadow-md        { box-shadow: var(--rg-shadow-md) !important; }
.shadow-dashboard { box-shadow: var(--rg-shadow-dashboard) !important; }

/* ---------- 5. I due soli gradienti ammessi (Parte 6.5) ---------- */
.dashboard-card       { background-image: linear-gradient(120deg, #eef0f2 0%, #fdfbfb 100%); }
.dashboard-header     { background-image: linear-gradient(to top, var(--brand-accent) 0%, var(--brand-primary) 100%); color: #fff; }
.dashboard-header-det { background-image: linear-gradient(to left, var(--brand-accent) 0%, var(--brand-primary) 100%); color: #fff; }
.login-gradient       { background-image: linear-gradient(to top, #F2F5F9 25%, var(--brand-primary-subtle) 100%); }

/* ---------- 6. Stati (Parte 6.6) ---------- */
.clickable, .editable { cursor: pointer; }
.cursor-default       { cursor: default !important; }
.disabled-content     { pointer-events: none; opacity: .4; }
.disabled-pointer     { pointer-events: none; }
tr.disabled td        { color: var(--rg-caption) !important; }

/* ---------- 7. Regioni a piena altezza (Parte 6.7, par. 10.4) ---------- */
/* vh prima, dvh dopo: un browser che non conosce dvh tiene la prima (Appendice B.E) */
@media (min-width: 992px) {
  .card-main {
    min-height: calc(100vh - 20px);
    min-height: calc(100dvh - 20px);
  }
  .container-list {
    height: calc(100vh - 185px);
    height: calc(100dvh - 185px);
    overflow: auto;
  }
  [id^="data_"] {
    height: calc(100vh - 170px);
    height: calc(100dvh - 170px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .card-main { min-height: 0; }
  .container-list,
  [id^="data_"] {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ---------- 8. Guscio: pila delle superfici e navigazione ---------- */
/* Le primitive qui sotto servono una navigazione a barra superiore. La variante a
   barra laterale si aggiunge quando tocchera' a una piattaforma che ne ha una,
   come variante di .app-nav-link e .app-drawer: non si costruisce in anticipo. */
body { background: var(--rg-app-bg); }
.main-content { background: var(--rg-app-bg); min-height: 100vh; }
.card-main { background: var(--rg-surface); }

.nav-link { color: var(--rg-caption) !important; }
.nav-link:hover, .nav-link.active {
  background-color: var(--rg-surface-sunken) !important;
  color: var(--rg-text) !important;
}

/* Testata: una riga sola. La fascia dei loghi partner e dei recapiti che stava qui
   costava 160 px prima di ogni schermata ed e' scesa nel footer. Il colore di marchio
   resta perche' il wordmark e' bianco su trasparenza: una piattaforma con testata
   neutra sovrascrive questa regola nel proprio foglio. */
.app-header {
  min-height: 56px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  gap: .25rem;
}
.app-brand img { width: 190px; max-width: 42vw; }
.app-header .app-nav-link {
  color: var(--brand-on-primary);
  height: 40px;
  border-radius: var(--rg-radius-input);
}
.app-header .app-nav-link:hover,
.app-header .app-nav-link.active {
  background: rgba(255, 255, 255, .18);
  color: var(--brand-on-primary);
}
.app-header .app-nav-link.active { font-weight: 600; }

/* La voce promozionale lampeggiava con un setInterval ogni 500 ms. Stessa evidenza,
   in CSS, cosi' si spegne da sola sotto prefers-reduced-motion. */
.app-nav-link-promo { animation: promoBlink 1.4s steps(1, end) infinite; }
@keyframes promoBlink {
  0%, 50%   { background: transparent; }
  51%, 100% { background: var(--rg-danger); }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav-link-promo {
    animation: none;
    background: var(--rg-danger);
  }
}

.app-user-name { max-width: 140px; }
.app-user-menu { min-width: 260px; }
.app-login .form-control { max-width: 140px; }

.app-footer {
  background: var(--rg-surface-sunken);
  border-top: 1px solid var(--rg-border);
}
.app-footer-partner img { max-height: 28px; }
.app-footer-sede { color: var(--rg-caption); font-weight: 600; }
.app-footer a { color: var(--rg-text); text-decoration: underline; }

.app-topbar {
  height: var(--header-height);
  background: var(--rg-app-bg);
}
.app-nav-link {
  color: var(--rg-text-muted-2);
  border-radius: 8px;
  height: 45px;
  white-space: nowrap;
  overflow: hidden;
}
.app-nav-link:hover,
.app-nav-link.active {
  color: var(--rg-text-strong);
  background: var(--rg-surface);
}
.app-nav-link i { width: 26px; }

/* Cassetto di navigazione sotto lg (par. 10.3) */
.app-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(85vw, 320px);
  height: 100%;
  background: var(--rg-app-bg);
  z-index: 1045;
  overflow-y: auto;
  transition: left .3s ease;
  box-shadow: 0 0 24px rgba(0,0,0,.15);
}
.app-drawer.show { left: 0; }
.app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1044;
}
.mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 56px;
  background: var(--rg-app-bg);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .75rem;
}
@media (min-width: 992px) {
  .mobile-topbar { display: none; }
  .app-drawer {
    position: static;
    left: auto;
    width: auto;
    height: auto;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
}

/* ---------- 9. Barra strumenti (Parte 8.1) ---------- */
.btn-clear {
  width: 38px;
  padding: 7px;
  background: var(--rg-surface);
}
.btn-clear:hover { color: var(--rg-text) !important; }
.btn-clear.btn-arrow { padding: 3px; }
.btn-lg { min-width: 115px !important; }
.back-page:hover { color: var(--rg-text-black); }

/* ---------- 10. Card-in-card (Parte 8.2) ---------- */
.table-responsive, .bg-card { background: var(--rg-surface-sunken); }
.card-footer { background: var(--rg-surface-sunken); }
.card.bg-card.clickable:hover { background: var(--rg-surface-hover) !important; }
.card.clickable:hover, .filter-button:hover {
  box-shadow: 0 0 6px 0 rgba(13, 106, 239, .7) !important;
  box-shadow: 0 0 6px 0 color-mix(in srgb, var(--brand-primary) 70%, transparent) !important;
}
.card.clickable.btn-list:hover {
  box-shadow: none !important;
  background: var(--rg-surface);
  color: var(--rg-text);
}

/* ---------- 11. Pillola di ricerca (Parte 8.3) ---------- */
.search_mini {
  height: 48px;
  background: var(--rg-app-bg);
  padding: 7px 10px;
}
.search_input {
  border: 0;
  outline: 0;
  background: none;
  width: 0;
  line-height: 50px;
}
.search_mini .search_input { padding: 0 10px; }
.search_icon_mini {
  height: 35px;
  width: 35px;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.clear-input-btn {
  position: absolute;
  width: 30px;
  font-weight: 550;
  border: none;
  background: transparent;
  z-index: 9;
}
.search_mini .clear-input-btn {
  line-height: 35px;
  left: calc(100% - 75px);
}
.clear-input-btn:hover { color: var(--brand-primary); }
.textarea_search { height: auto; }
.textarea_search .search_input {
  resize: none;
  overflow: hidden;
  line-height: 30px;
  max-height: 125px;
}

/* ---------- 12. Tabelle (Parte 8.4) ---------- */
th {
  background-color: var(--rg-secondary) !important;
  color: var(--rg-text-black) !important;
}
.table-dashboard { padding: 0 12px; }
.table-dashboard th {
  background: var(--rg-surface-sunken) !important;
  color: var(--rg-text-muted-3) !important;
  font-size: 18px;
  font-weight: normal !important;
  vertical-align: middle;
  padding: 10px !important;
  position: sticky;
  top: 0;
  z-index: 1;
  border-color: var(--rg-border-strong) !important;
  border-bottom: 0 !important;
}
.table-dashboard td {
  font-size: 14px;
  vertical-align: middle;
}
.table-dashboard-white th {
  background: var(--rg-surface) !important;
  font-size: 16px !important;
  padding: 8px !important;
}
tr.clickable > *       { background-color: var(--rg-surface) !important; }
tr.clickable:hover > * { background-color: var(--rg-row-hover) !important; }
.table-hover > tbody > tr:hover > * { background: var(--brand-primary-subtle) !important; }
.tbl-pvt thead.text-bg-dark th {
  background: var(--brand-dark) !important;
  color: var(--rg-surface) !important;
}
.table-spacing { border-collapse: separate; }

/* Cromatura DataTables: la ricerca nativa e' nascosta, la guida la pillola di par. 8.3 */
div.dt-layout-cell.dt-layout-end { margin: 0 auto !important; }
div.dt-layout-cell.dt-layout-end .dt-search, .dt-search { display: none !important; }
div.dt-layout-start {
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
div.dt-layout-end:has(> div.dt-paging) { margin: 0 auto !important; }
div.dt-container .dt-paging .dt-paging-button {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--rg-surface) !important;
  box-shadow: none !important;
}
div.dt-container .dt-paging .dt-paging-button .page-link:focus { box-shadow: none !important; }
div.dt-container .dt-paging .page-link { height: 100%; }
div.dt-length { display: none; }
div.dtcc-dropdown button.dtcc-button span.dtcc-button-text {
  padding: 8px 0 !important;
  font-size: 14px !important;
}
div.dtcc-dropdown div.dtcc-list div.dtcc-list-buttons { background: var(--rg-surface) !important; }
div.dtcc-list-controls {
  border-bottom: 1px solid var(--rg-border);
  margin: 0 5px;
}
.table.dataTable input.dt-select-checkbox { width: 15px; height: 15px; }
.table.dataTable .dt-column-header input.dt-select-checkbox { display: none; }
.select .dt-column-header { display: block !important; }
table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--brand-primary) !important;
}
.dt-select-checkbox { cursor: pointer; }

/* ---------- 13. Elenco a schede e avatar (Parte 8.5, 8.6) ---------- */
.dropdown-toggle::after { display: none; }
.dropdown-toggle.no-arrow::after,
.dropstart .dropdown-toggle.no-arrow::before { display: none; }
.dropdown-menu { padding: 0 !important; }
.dropdown-menu li a { padding: 10px !important; }

.badge-icon {
  width: 35px;
  height: 35px;
  background: var(--brand-dark);
  color: var(--rg-surface);
}
.badge-icon.warning { background: var(--rg-alert); }
.badge-icon-list {
  width: 45px;
  height: 45px;
  background: var(--brand-dark);
  color: var(--rg-surface);
}
.badge-icon-card {
  width: 35px;
  height: 35px;
  background: #9BFBF9;
  font-size: 13px;
}
.card_usr_logo { width: 45px; height: 45px; object-fit: cover; }
.img-area      { max-width: 32px; }
.thumb-tsk     { width: 40px; height: 40px; }
.img-card-list { width: 18px; height: 18px; }

/* ---------- 14. Pillole di filtro (Parte 8.7) ---------- */
.nav-filter .nav-link.active {
  background: var(--rg-surface);
  color: var(--rg-text);
}
.nav-filter .nav-link:not(.active):hover {
  background: var(--rg-surface-hover);
  color: var(--rg-text);
}

/* ---------- 15. Form (Parte 8.8) ---------- */
.form-select, .form-control, .input-group-text { border: 1px solid var(--rg-border) !important; }
.form-select.is-invalid, .form-control.is-invalid { border: 1px solid var(--rg-invalid-border) !important; }
.input-group-text { width: 44px; }
.input-group-text.clickable {
  background: var(--brand-primary);
  color: var(--rg-surface);
}
.input-group-text.clickable:hover { background: var(--brand-primary-hover); }
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-switch-big { width: 40px !important; height: 20px !important; }
textarea { resize: none; }
hr.title_separator { border: 1px solid var(--rg-rule); }
.accordion-button {
  background: var(--rg-surface-sunken) !important;
  color: var(--rg-text-black) !important;
}
.select2-container--bootstrap-5 .select2-selection { border-radius: var(--rg-radius-select2); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  color: var(--rg-text-strong);
  background-color: var(--rg-surface);
}

/* ---------- 16. Modali (Parte 8.10) ---------- */
.modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-normal) { max-width: 325px; }
.modal-90 { --bs-modal-width: 90%; }
.modal-header .btn-close-white { filter: brightness(0) invert(1) !important; }

/* ---------- 17. Accordion (Parte 8.12) ---------- */
.accordion-tpp .accordion-button::after { content: none !important; }
.accordion-tpp .accordion-button { box-shadow: none !important; }

/* ---------- 18. Skeleton (Parte 8.15) ---------- */
.skel {
  display: block;
  border-radius: var(--rg-radius-input);
}
.skel-line    { height: 12px; margin-bottom: .5rem; }
.skel-line.sm { height: 10px; }
.skel-line.lg { height: 16px; }
.skel-badge {
  height: 24px;
  width: 88px;
  border-radius: var(--rg-radius-pill);
}
.skel-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.skel-avatar.lg { width: 45px; height: 45px; }
.skel-btn {
  height: 38px;
  width: 130px;
  border-radius: var(--rg-radius-input);
}
.skel-kpi  { height: 34px; width: 96px; }
.skel-node { height: 14px; margin-bottom: .65rem; }
[aria-busy="true"] { cursor: progress; }

/* ---------- 19. Tracker (Parte 8.17) ---------- */
.tracker-container { max-width: 800px; margin: 0 auto; }
.tracker-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tracker-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 9px;
  left: calc(50% + 10px);
  width: calc(100% - 20px);
  height: 3px;
  background-color: var(--rg-track);
  z-index: 0;
}
.tracker-step:not(.inactive):not(:last-child)::after { background-color: var(--brand-dark); }
/* Classe resa dal server: fa lo stesso lavoro di :has() dove :has() non c'e' (Appendice B.E) */
.tracker-step.is-last-active::after,
.tracker-step:not(.inactive):has(+ .tracker-step.inactive)::after {
  background: linear-gradient(to right, var(--brand-dark) 50%, var(--rg-track) 50%);
}
.tracker-dot {
  width: 20px;
  height: 20px;
  background-color: var(--brand-dark);
  border-radius: 50%;
  margin: 0 auto 10px;
  box-shadow: 0 0 0 4px var(--rg-surface);
  position: relative;
  z-index: 1;
}
.tracker-label {
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.tracker-step.inactive .tracker-dot   { background-color: var(--rg-track); }
.tracker-step.inactive .tracker-label { color: var(--rg-track-text); }

/* ---------- 20. Login (Parte 8.18) e tooltip (Parte 8.19) ---------- */
.form-signin { max-width: 1000px; padding: 15px; }
.form-signin .form-floating:focus-within { z-index: 2; }
.custom-tooltip {
  --bs-tooltip-bg: var(--brand-primary);
  z-index: 1200 !important;
}

/* ================================================================
   21. Estensioni autorizzate par. 1B.5 - costruite una volta, riusate
   ================================================================ */

/* 21.0 Primitive comuni alle estensioni
   Nessun esadecimale: dove serve una tinta piu' chiara o piu' scura di un token la si
   ricava con color-mix dal token stesso, con una riga di ripiego prima per i browser
   che non lo conoscono (stesso schema di tokens.css). */

/* Cifre: larghezza costante, cosi' le colonne di importi restano allineate mentre
   cambiano. E' il difetto piu' visibile di una tabella di prezzi senza questa regola. */
.num, .summary-value, .group-subtotal, .qty-value, .detail-value, td.text-end {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Testata di schermata: titolo, riga di contesto, strumenti sulla stessa linea di base */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .75rem;
}
.page-head .page-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--rg-text-strong);
}
.page-head .page-sub {
  font-size: 13.5px;
  color: var(--rg-caption);
  padding-top: 2px;
}

/* Intestazione di sezione dentro una schermata */
.section-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .1rem 0 .55rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--rg-border);
  font-size: 17px;
  font-weight: 600;
  color: var(--rg-text-strong);
}
.section-head::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--brand-primary);
  flex: 0 0 auto;
}

/* Pillole di stato: una sola forma, cinque tinte, tutte derivate dai token */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .12rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--rg-radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.chip + .chip { margin-left: .25rem; }
.chip-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* ripiego con i soli token, per chi non conosce color-mix: forma e leggibilita' restano */
.chip-neutral { color: var(--rg-caption);     background: var(--rg-surface-sunken);    border-color: var(--rg-border); }
.chip-success { color: var(--rg-success);     background: var(--rg-surface-sunken);    border-color: var(--rg-border); }
.chip-warning { color: var(--rg-text-strong); background: var(--rg-surface-sunken);    border-color: var(--rg-border); }
.chip-danger  { color: var(--rg-danger);      background: var(--rg-surface-sunken);    border-color: var(--rg-border); }
.chip-brand   { color: var(--brand-dark);     background: var(--brand-primary-subtle); border-color: var(--rg-border); }
/* tinta piena, ricavata dal token stesso */
.chip-success { color: color-mix(in srgb, var(--rg-success) 78%, #000); background: color-mix(in srgb, var(--rg-success) 12%, #fff); border-color: color-mix(in srgb, var(--rg-success) 32%, #fff); }
.chip-warning { color: color-mix(in srgb, var(--rg-warning) 42%, #000); background: color-mix(in srgb, var(--rg-warning) 16%, #fff); border-color: color-mix(in srgb, var(--rg-warning) 45%, #fff); }
.chip-danger  { color: color-mix(in srgb, var(--rg-danger)  82%, #000); background: color-mix(in srgb, var(--rg-danger)   9%, #fff); border-color: color-mix(in srgb, var(--rg-danger)  28%, #fff); }
.chip-brand   { color: var(--brand-dark);     background: var(--brand-primary-subtle); border-color: color-mix(in srgb, var(--brand-primary) 28%, #fff); }

/* Scheda di scelta: un'opzione che si tocca tutta, non un pallino da 13 px */
.choice-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .6rem .9rem;
  margin: 0;
  border: 1px solid var(--rg-border);
  border-radius: var(--rg-radius-input);
  background: var(--rg-surface);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice-card:hover { border-color: var(--brand-primary); }
.choice-card:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.choice-card:has(input:focus-visible) { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.choice-card .form-check-input { margin: 0; flex: 0 0 auto; }
.choice-card .choice-label { font-weight: 600; color: var(--rg-text-strong); }
.choice-card .choice-hint  { font-size: 12.5px; color: var(--rg-caption); }

/* 21.1 Briciole di pane */
.breadcrumb { margin-bottom: 0; }
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  font-size: 14px;
  color: var(--rg-caption);
}
.breadcrumb .breadcrumb-item a { text-decoration: none; }
.breadcrumb .breadcrumb-item a:hover { color: var(--brand-primary); text-decoration: underline; }
.breadcrumb .breadcrumb-item.active {
  color: var(--rg-text-strong);
  font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--rg-caption); }
@media (max-width: 767.98px) {
  .breadcrumb .breadcrumb-item { display: none; }
  .breadcrumb .breadcrumb-item:nth-last-child(2) { display: inline-flex; }
  .breadcrumb .breadcrumb-item:nth-last-child(2)::before { content: "\2039"; }
}

/* 21.2 Ricerca assistita */
.lookup { position: relative; }
.lookup-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1050;
  max-height: 320px;
  overflow-y: auto;
  background: var(--rg-surface);
  border: 1px solid var(--rg-border);
  border-radius: var(--rg-radius-input);
  box-shadow: var(--rg-shadow-md);
}
.lookup-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--rg-border);
}
.lookup-item:last-child { border-bottom: 0; }
.lookup-item:hover,
.lookup-item.active { background: var(--brand-primary-subtle); }
.lookup-item .lookup-code {
  font-weight: 600;
  color: var(--rg-text-strong);
}
.lookup-item .lookup-desc {
  font-size: 13px;
  color: var(--rg-caption);
}
.lookup-empty, .lookup-loading {
  padding: 12px;
  font-size: 14px;
  color: var(--rg-caption);
  text-align: center;
}
@media (max-width: 767.98px) {
  .lookup-results {
    position: fixed;
    inset: auto 0 0 0;
    top: 0;
    max-height: none;
    border-radius: 0;
    border: 0;
  }
}

/* Campo con icona guida: l'icona dice che il campo cerca, senza aggiungere parole */
.field-icon { position: relative; }
.field-icon > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rg-caption);
  pointer-events: none;
  font-size: 15px;
}
.field-icon > .form-control { padding-left: 36px; }

/* 21.3 Stepper di quantita' */
.qty-stepper { width: auto; }
.qty-stepper .qty-value {
  text-align: center;
  max-width: 62px;
  border-left: 0;
  border-right: 0;
  font-weight: 600;
  color: var(--rg-text-strong);
  background: var(--rg-surface);
}
.qty-stepper .qty-value:focus {
  box-shadow: none;
  border-color: var(--brand-primary);
}
.qty-stepper .btn {
  min-width: 34px;
  padding: .25rem .45rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rg-caption);
  background: var(--rg-surface-sunken);
  border: 1px solid var(--rg-border);
}
.qty-stepper .btn:hover {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-dark);
}
@media (max-width: 991.98px) {
  .qty-stepper .btn { min-width: 44px; min-height: 44px; }
  .qty-stepper .qty-value { min-height: 44px; font-size: 16px; max-width: 76px; }
}

/* 21.4 Riga di dettaglio espandibile
   La spaziatura sta sull'elemento che si apre, non sulla cella: una cella con padding
   proprio lascia una banda vuota fra le righe anche quando il dettaglio e' chiuso. */
.detail-row > td {
  background: var(--rg-surface-sunken) !important;
  padding: 0 !important;
  border-top-width: 0 !important;
}
.detail-row .collapse.show,
.detail-row .collapsing {
  padding: .85rem 1rem .85rem 3.1rem;
  border-left: 3px solid var(--brand-primary);
}
.detail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rg-caption);
}
.detail-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--rg-text-strong);
}
.detail-toggle {
  width: 30px;
  height: 30px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rg-caption);
  text-decoration: none;
}
.detail-toggle:hover {
  background: var(--rg-surface-hover);
  color: var(--brand-dark);
}
.detail-toggle i { transition: transform .2s ease; }
.detail-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.detail-toggle[aria-expanded="true"] {
  background: var(--brand-primary-subtle);
  color: var(--brand-dark);
}

/* 21.5 Intestazione di gruppo sticky
   Deve leggersi come l'inizio di un blocco, non come una riga piu' chiara: fondo di
   marchio tenue, barra di accento a sinistra, conteggio come pillola, subtotale a destra. */
.group-header > * {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .6rem 1rem !important;
  background: var(--brand-primary-subtle) !important;
  border-top: 1px solid var(--rg-border) !important;
  border-bottom: 1px solid var(--rg-border) !important;
  box-shadow: inset 4px 0 0 var(--brand-primary);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--brand-dark) !important;
}
.group-header .group-name { letter-spacing: .01em; }
.group-header .group-count {
  padding: .05rem .55rem;
  border: 1px solid var(--rg-border);
  border-radius: var(--rg-radius-pill);
  background: var(--rg-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--rg-caption);
}
.group-header .group-subtotal {
  font-weight: 700;
  color: var(--rg-text-strong);
}
.group-header .group-subtotal .group-subtotal-label {
  font-weight: 400;
  font-size: 12px;
  color: var(--rg-caption);
  padding-right: .35rem;
}

/* 21.6 Barra riepilogo sticky
   E' il posto dove si decide: le tre cifre hanno pesi diversi e l'azione primaria e'
   l'unica di questo colore in tutta la schermata. */
.summary-bar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background: var(--rg-surface);
  border: 1px solid var(--rg-border);
  border-top: 2px solid var(--brand-primary);
  border-radius: var(--rg-radius-card);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .07);
}
.summary-bar .summary-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rg-caption);
}
.summary-bar .summary-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--rg-text-strong);
  line-height: 1.25;
}
.summary-bar .summary-total .summary-label { color: var(--brand-dark); }
.summary-bar .summary-total .summary-value {
  font-size: 27px;
  font-weight: 700;
  color: var(--rg-text-black);
}
.summary-bar .summary-sep {
  width: 1px;
  align-self: stretch;
  margin: .25rem 0;
  background: var(--rg-border);
}
.summary-bar .summary-value.is-pending {
  opacity: .45;
  cursor: progress;
}
@media (max-width: 991.98px) {
  .summary-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important;
  }
  .summary-bar .summary-sep { display: none; }
  .summary-bar .summary-total .summary-value { font-size: 22px; }
}

/* 21.7 Barra di selezione multipla */
.bulk-bar {
  background: var(--brand-primary-subtle);
  border: 1px solid var(--brand-primary);
  border-radius: var(--rg-radius-input);
}
.bulk-bar .bulk-count {
  font-weight: 600;
  color: var(--brand-dark);
}

/* 21.8 Stato salvato in linea */
.is-saved > td:first-child { box-shadow: inset 4px 0 0 var(--rg-success); }
.is-saved > td { animation: savedTint 1.6s ease-out; }
@keyframes savedTint {
  0%   { background-color: color-mix(in srgb, var(--rg-success) 14%, #fff); }
  100% { background-color: transparent; }
}
.saved-mark { color: var(--rg-success); }

/* 21.9 Righe di elenco
   Ritmo verticale, separatore sottile, evidenza al passaggio: senza queste tre cose una
   tabella lunga di codici si legge male, ed e' il caso del carrello.

   `.table-cols` e' una VARIANTE di `.table-dashboard`, non una sua modifica: la tabella
   di cruscotto conserva la propria intestazione da 18 px come sta scritta. Serve dove le
   colonne sono molte e dense, perche' li' un'intestazione piu' grande e piu' chiara del
   contenuto rovescia la gerarchia: si legge prima il nome della colonna del dato. */
.table-dashboard.table-cols thead th {
  padding: .45rem .75rem !important;
  background: var(--rg-surface) !important;
  border-bottom: 1px solid var(--rg-border-strong) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rg-caption) !important;
}
.table-dashboard tbody tr.row-item > td {
  padding-top: .65rem !important;
  padding-bottom: .65rem !important;
  border-top: 1px solid var(--rg-border);
  border-bottom: 0;
  background: var(--rg-surface);
}
.table-dashboard tbody tr.row-item:hover > td { background: var(--rg-row-hover); }
.table-dashboard tbody tr.row-item + tr.detail-row + tr.row-item > td { border-top: 1px solid var(--rg-border); }
.row-item .row-code {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--rg-text-strong);
  letter-spacing: .01em;
}
.row-item .row-desc { color: var(--rg-text); }
/* Riga di contesto sotto un'etichetta: serve anche nelle intestazioni di gruppo,
   quindi non e' agganciata a .row-item. */
.row-note {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--rg-caption);
}
.group-header .row-note { color: var(--rg-caption); }
/* Segnaposto della casella di selezione: senza, il chevron delle righe che non si
   possono selezionare cade a un'ascissa diversa dalle altre. */
.cell-controls .check-slot { width: 16px; flex: 0 0 16px; }
.row-item .row-total {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--rg-text-strong);
}
.row-item.row-service > td { background: var(--rg-surface-sunken); }
.row-item.row-service .row-code { color: var(--rg-caption); font-weight: 600; }
.btn-row-del {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rg-caption) !important;
  text-decoration: none;
}
.btn-row-del:hover {
  background: var(--rg-danger);
  color: var(--brand-on-primary) !important;
}
@media (max-width: 991.98px) {
  .btn-row-del { width: 44px; height: 44px; }
}

/* ---------- 22. Responsivita' (Parte 10) ---------- */
@media (max-width: 991.98px) {
  .page-toolbar { flex-wrap: wrap; gap: .5rem; }
  .page-toolbar .btn { min-width: 44px !important; }
  .page-toolbar .btn span:not(.visually-hidden) { display: none; }
  .search_mini {
    width: 100%;
    margin-right: 0 !important;
  }
  .search_mini .clear-input-btn { left: auto; right: 48px; }

  .nav-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-filter::-webkit-scrollbar { display: none; }
  .nav-filter .nav-item { flex: 0 0 auto; }
  .nav-filter .nav-link {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    white-space: nowrap;
  }
  #date-range { width: 100% !important; }

  .col-md-4.pe-md-5 { padding-right: 0 !important; }
  .form-control, .form-select { font-size: 16px; }
  .form-switch-big { width: 48px !important; height: 26px !important; }
  .btn-add, .btn-del, .btn-edit, .btn-save, .btn-clear { min-width: 44px; min-height: 44px; }
  .btn-back, .btn-big { width: 44px; height: 44px; }
}
@media (min-width: 992px) {
  #date-range { width: 260px; }
}

/* Tabelle impilate sotto md, con l'etichetta presa da data-label (par. 10.5) */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }
  .table-stack tr {
    background: var(--rg-surface);
    border-radius: var(--rg-radius-card);
    margin-bottom: .75rem;
    padding: .5rem .75rem;
  }
  .table-stack td {
    border: 0;
    padding: .35rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .table-stack td::before {
    content: attr(data-label);
    color: var(--rg-caption);
    font-size: 13px;
    flex: 0 0 45%;
  }
  .table-stack td.text-end { justify-content: flex-end; }

  /* Celle di soli controlli: non hanno un'etichetta da mostrare e non devono
     lasciarne lo spazio. */
  .table-stack td.cell-controls::before { content: none; }
  .table-stack td.cell-controls { justify-content: flex-start; }

  /* La riga di dettaglio non e' una scheda a se': quando e' chiusa non deve lasciare
     una scheda vuota sotto ogni riga, quando e' aperta appartiene alla riga di sopra. */
  .table-stack tr.detail-row {
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
  }
  /* impilata, ogni cella e' un blocco: il filo che separa le righe diventerebbe un filo
     sopra ogni fatto, compreso il primo, dove non separa niente */
  .table-stack tr.row-item > td { border-top: 1px solid var(--rg-border); }
  .table-stack tr.row-item > td:first-child { border-top: 0; }
}

/* daterangepicker: cromatura minima */
.drp-selected { display: none !important; }
.drp-calendar th { background: var(--rg-surface) !important; }

/* ---------- 23. Movimento ridotto (Parte 11.1) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .placeholder-wave, .placeholder-glow {
    animation: none !important;
    mask-image: none !important;
  }
  .placeholder-wave .placeholder, .placeholder-glow .placeholder { opacity: .35; }
}

/* ---------- 24. Stampa (Parte 10.9) ---------- */
@media print {
  .app-drawer, .mobile-topbar, .page-toolbar, .dt-paging, .nav-filter, .summary-bar { display: none !important; }
  .main-content { margin: 0 !important; }
  .container-list, [id^="data_"] {
    height: auto !important;
    overflow: visible !important;
  }
  .card, .bg-card {
    background: var(--rg-surface) !important;
    box-shadow: none !important;
  }
}