/* ============================================================== *
 * REDESIGN OTTANIO V2 — COMPOSED COMPONENTS (introdotto 2026-05-03)
 * Riferimento: docs/redesign/DeskControl Perizie - Handoff Sviluppo.md sez. 3.5+
 *
 * Componenti composti: accordion, tab, drawer, sidebar contestuale,
 * card, modal, tooltip, info-tip, toolbar verticale, table override,
 * empty state, loading skeleton.
 *
 * STRATEGIA DUAL (come foundation):
 *   - Classi NEW prefissate `.rd-*`
 *   - Override classi legacy DENTRO `.rd-scope`
 * ============================================================== */

/* ====================================================
 * ACCORDION / SECTION ESPANDIBILE (.rd-sect)
 * ==================================================== */

.rd-sect {
  border-bottom: 1px solid var(--ott-200);
}
.rd-sect:last-child { border-bottom: 0; }

.rd-sect__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.rd-sect__head:hover { background: var(--ott-50); }
.rd-sect__head[aria-expanded="true"] { background: var(--ott-50); }

.rd-sect__icon {
  width: 22px;
  height: 22px;
  border-radius: var(--rd-r-5);
  background: var(--paper);
  border: 1px solid var(--ott-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ott-base);
  flex-shrink: 0;
}
.rd-sect__icon svg { width: 12px; height: 12px; }

.rd-sect__title {
  flex: 1;
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  color: var(--ott-700);
}

.rd-sect__count {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: var(--ott-100);
  color: var(--ott-base);
  border-radius: var(--rd-r-pill);
  font-family: var(--ff-mono);
  font-size: var(--fs-10-5);
  font-weight: 600;
}

.rd-sect__chev {
  width: 13px;
  height: 13px;
  color: var(--ott-500);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.rd-sect__head[aria-expanded="true"] .rd-sect__chev { transform: rotate(180deg); }

.rd-sect__body {
  padding: 4px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-sect__head[aria-expanded="false"] + .rd-sect__body { display: none; }

/* Override accordion legacy dentro rd-scope */
.rd-scope .collapsible-section {
  border-bottom: 1px solid var(--ott-200);
}
.rd-scope .collapsible-section[aria-expanded="true"] > .section-header,
.rd-scope .collapsible-section > .section-header:hover {
  background: var(--ott-50);
}

/* Variante <details>/<summary> HTML5 per accordion zero-JS */
details.rd-sect { padding: 0; margin: 0; }
details.rd-sect > summary.rd-sect__head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.rd-sect > summary.rd-sect__head::-webkit-details-marker { display: none; }
details.rd-sect > summary.rd-sect__head::marker { content: ""; }
details.rd-sect:not([open]) > .rd-sect__body { display: none; }
details.rd-sect[open] > summary.rd-sect__head { background: var(--ott-50); }
details.rd-sect[open] > summary.rd-sect__head .rd-sect__chev { transform: rotate(180deg); }

/* ====================================================
 * SIDEBAR PANEL REDESIGN — markup applicato a sidebar
 * Mappe (panel-catasto) e altri panel migrati Step 7
 * ==================================================== */

/* Quando .rd-scope e' su un panel sidebar con sezioni accordion,
 * rimuovo padding inline che il legacy applica via .section. */
.rd-scope.sidebar-panel,
.rd-scope .sidebar-panel,
.rd-scope.sidebar-content,
.rd-scope > .section {
  padding: 0;
}

/* Override per le vecchie .section dentro rd-scope: niente bordo doppio,
 * niente margin, lascia che details.rd-sect gestisca l'accordion. */
.rd-scope details.rd-sect {
  background: var(--paper);
  border-bottom: 1px solid var(--ott-200);
  margin: 0;
  padding: 0;
}
.rd-scope details.rd-sect:last-of-type { border-bottom: 0; }

/* Override su h2 di vecchio markup, in caso (fallback) */
.rd-scope details.rd-sect summary.rd-sect__head h2,
.rd-scope details.rd-sect summary.rd-sect__head .rd-sect__title {
  margin: 0;
  flex: 1;
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  color: var(--ott-700);
}

/* Field stack — etichetta sopra campo, gap 4px */
.rd-scope .rd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

/* Sezione body padding standard */
.rd-scope .rd-sect__body {
  padding: 4px 16px 14px;
}

/* Layout 2-col campi */
.rd-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Help text tenue sotto i campi */
.rd-scope .rd-help {
  font-size: var(--fs-10-5);
  color: var(--ott-500);
  line-height: 1.45;
  margin: 0;
}

/* Btn-row 3 bottoni */
.rd-scope .rd-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.rd-scope .rd-btn-row > .btn { flex: 1; }

/* ====================================================
 * DRAWER GESTIONE PERIZIE (rd-drawer-style)
 * Applica stile rd-drawer al markup nav-window legacy
 * ==================================================== */

.rd-drawer-style {
  background: var(--paper) !important;
  border: 1px solid var(--ott-200) !important;
  border-radius: 0 !important;
  box-shadow: var(--rd-shadow-md) !important;
  width: 380px !important;
  max-width: 380px !important;
  font-family: var(--ff-body);
  color: var(--ink);
  overflow: hidden;
  /* NO !important su display — l'inline style="display:none" deve poter
     nascondere il drawer (gestito dal toggle JS di Gestione perizie).
     Senza questa rinuncia, il drawer resta box-presente e cattura mouse
     events, bloccando pan/zoom sulla mappa sottostante. */
  display: flex;
  flex-direction: column;
}

/* Override nav-window-header legacy */
.rd-drawer-style .rd-drawer__head,
.rd-drawer-style > .nav-window-header {
  background: var(--paper);
  padding: 14px 16px;
  border-bottom: 1px solid var(--ott-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
}
.rd-drawer-style .rd-drawer__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-15);
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.rd-drawer-style .rd-drawer__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: var(--rd-r-6);
  color: var(--ott-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.rd-drawer-style .rd-drawer__close:hover {
  background: var(--ott-50);
  color: var(--ink);
}

/* Body scroll interno */
.rd-drawer-style .rd-drawer__body,
.rd-drawer-style .nav-window-body {
  overflow-y: auto;
  flex: 1;
  padding: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ott-300) transparent;
}
.rd-drawer-style .rd-drawer__body::-webkit-scrollbar,
.rd-drawer-style .nav-window-body::-webkit-scrollbar { width: 6px; }
.rd-drawer-style .rd-drawer__body::-webkit-scrollbar-thumb,
.rd-drawer-style .nav-window-body::-webkit-scrollbar-thumb {
  background: var(--ott-300);
  border-radius: 999px;
}

/* ====================================================
 * ROW TOGGLE (label + sub + toggle switch)
 * ==================================================== */

.rd-scope .rd-row-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.rd-scope .rd-row-toggle + .rd-row-toggle {
  border-top: 1px solid var(--ott-200);
}
.rd-scope .rd-row-toggle__label {
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.rd-scope .rd-row-toggle__sub {
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  color: var(--ott-500);
  margin-top: 2px;
  line-height: 1.3;
}

/* ====================================================
 * ROW STEPPER (label + stepper inline)
 * ==================================================== */

.rd-scope .rd-row-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.rd-scope .rd-row-stepper__label {
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  font-weight: 500;
  color: var(--ink);
}

/* ====================================================
 * ROW CTA (label sx + icon button dx)
 * ==================================================== */

.rd-scope .rd-row-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ott-200);
  border-bottom: 1px solid var(--ott-200);
}
.rd-scope .rd-row-cta__label {
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  flex: 1;
}

/* ====================================================
 * TOGGLE SWITCH legacy (.toggle-switch) ottanio v2
 * ==================================================== */

.rd-scope .toggle-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.rd-scope .toggle-switch input { opacity: 0; width: 0; height: 0; margin: 0; position: absolute; }
.rd-scope .toggle-switch .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--ott-300);
  border-radius: var(--rd-r-pill);
  transition: background var(--t-base);
}
.rd-scope .toggle-switch .toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform var(--t-base);
}
.rd-scope .toggle-switch input:checked ~ .toggle-slider {
  background: var(--ott-base);
}
.rd-scope .toggle-switch input:checked ~ .toggle-slider::before {
  transform: translateX(14px);
}

/* ====================================================
 * GROUP COUNT CONTROLS (stepper -1+) ottanio v2
 * ==================================================== */

.rd-scope .group-count-controls {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.rd-scope .group-count-btn {
  width: 26px;
  height: 28px;
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-6);
  background: var(--paper);
  color: var(--ott-base);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-13);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rd-scope .group-count-btn:hover {
  background: var(--ott-50);
  border-color: var(--ott-300);
}
.rd-scope .group-count-controls > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--ink);
}
.rd-scope .group-count-trash-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-6);
  background: var(--paper);
  color: var(--ott-error);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
  margin-left: 4px;
  position: relative;
}
.rd-scope .group-count-trash-btn::before {
  content: "";
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.rd-scope .group-count-trash-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.30);
}
.rd-scope .perizia-delete-btn {
  color: var(--ott-error);
}
.rd-scope .perizia-save-btn,
.rd-scope .perizia-delete-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-7);
  background: var(--paper);
  color: var(--ott-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rd-scope .perizia-save-btn:hover {
  background: var(--ott-50);
  border-color: var(--ott-300);
}
.rd-scope .perizia-delete-btn { color: var(--ott-error); }
.rd-scope .perizia-delete-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.30);
}
.rd-scope .perizia-save-btn svg,
.rd-scope .perizia-delete-btn svg {
  width: 14px;
  height: 14px;
}

/* ====================================================
 * TAB ORIZZONTALI (.rd-tabs)
 * ==================================================== */

.rd-tabs {
  display: flex;
  background: var(--ott-50);
  border-bottom: 1px solid var(--ott-200);
  padding: 0 4px;
  overflow: hidden;
}
.rd-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 4px 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--ott-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  white-space: nowrap;
}
.rd-tab:hover { color: var(--ink); }
.rd-tab.is-on,
.rd-tab[aria-selected="true"] {
  color: var(--ott-base);
  border-bottom-color: var(--ott-base);
  background: var(--paper);
}
.rd-tab svg { width: 13px; height: 13px; }
.rd-tab__badge {
  background: var(--ott-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: var(--rd-r-pill);
  line-height: 1.4;
}

/* Override tab legacy dentro rd-scope */
.rd-scope .tab-button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ott-500);
  padding: 11px 14px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.rd-scope .tab-button:hover { color: var(--ink); }
.rd-scope .tab-button.active {
  color: var(--ott-base);
  border-bottom-color: var(--ott-base);
}

/* ====================================================
 * DRAWER (pannello laterale dx, 380)
 * ==================================================== */

.rd-drawer {
  width: 380px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: var(--paper);
  border-left: 1px solid var(--ott-200);
  overflow: hidden;
}
.rd-drawer__head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ott-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rd-drawer__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-15);
  color: var(--ink);
  margin: 0;
}
.rd-drawer__close {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  border-radius: var(--rd-r-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ott-500);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.rd-drawer__close:hover {
  background: var(--ott-50);
  color: var(--ink);
}
.rd-drawer__close svg { width: 14px; height: 14px; }

.rd-drawer__breadcrumb {
  background: var(--ott-50);
  padding: 9px 14px;
  border-bottom: 1px solid var(--ott-200);
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  color: var(--ott-500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-drawer__breadcrumb strong { color: var(--ott-base); font-weight: 600; }

.rd-drawer__body {
  overflow-y: auto;
  scrollbar-width: none;
}
.rd-drawer__body::-webkit-scrollbar { display: none; }

.rd-drawer__foot {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--ott-200);
  background: var(--paper);
  display: flex;
  gap: 6px;
}
.rd-drawer__foot .rd-btn { flex: 1; }

/* ====================================================
 * SIDEBAR CONTESTUALE (sx, 300)
 * ==================================================== */

.rd-side {
  width: 300px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--paper);
  border-right: 1px solid var(--ott-200);
  overflow: hidden;
}
.rd-side__tabs {
  display: flex;
  background: var(--ott-50);
  border-bottom: 1px solid var(--ott-200);
  padding: 0 4px;
}
.rd-side__body {
  overflow-y: auto;
  scrollbar-width: none;
}
.rd-side__body::-webkit-scrollbar { display: none; }
.rd-side__foot {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--ott-200);
  background: var(--paper);
  display: flex;
  gap: 6px;
}
.rd-side__foot .rd-btn { flex: 1; }

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

.rd-card {
  background: var(--paper);
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-9);
  padding: 14px 16px;
}
.rd-card--lg {
  border-radius: var(--rd-r-12);
  padding: 18px 20px;
}
.rd-card--floating {
  box-shadow: var(--rd-shadow-md);
}
.rd-card__head {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-14);
  color: var(--ink);
  margin: 0 0 8px;
}

/* Override card legacy dentro rd-scope */
.rd-scope .card,
.rd-scope .panel,
.rd-scope .portal-panel {
  background: var(--paper);
  border: 1px solid var(--ott-200);
  border-radius: var(--rd-r-9);
}

/* ====================================================
 * MODAL
 * ==================================================== */

.rd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 24px;
}
.rd-modal {
  background: var(--paper);
  border-radius: var(--rd-r-14);
  box-shadow: var(--rd-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rd-modal__head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ott-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rd-modal__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-17);
  color: var(--ink);
  margin: 0;
}
.rd-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}
.rd-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ott-200);
  background: var(--ott-50);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.rd-modal--lg { max-width: 720px; }
.rd-modal--sm { max-width: 420px; }

/* ====================================================
 * TOOLTIP (CSS-only via data-tooltip, alternativa Tippy)
 * ==================================================== */

.rd-tooltip {
  position: relative;
}
.rd-tooltip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ott-deep);
  color: #fff;
  font-family: var(--ff-body);
  font-size: var(--fs-11-5);
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--rd-r-5);
  box-shadow: var(--rd-shadow-md);
  z-index: 100;
  pointer-events: none;
  animation: rd-tooltip-in 120ms ease-out 200ms forwards;
  opacity: 0;
}
.rd-tooltip[data-tooltip][data-tooltip-side="right"]:hover::after {
  left: calc(100% + 8px);
  bottom: 50%;
  transform: translateY(50%);
}
@keyframes rd-tooltip-in {
  to { opacity: 1; }
}

/* Tippy.js theme override (per usare tooltip esistenti con stile ottanio) */
.tippy-box[data-theme~="ottanio"] {
  background: var(--ott-deep);
  color: #fff;
  font-family: var(--ff-body);
  font-size: var(--fs-11-5);
  font-weight: 500;
  border-radius: var(--rd-r-5);
  padding: 0;
}
.tippy-box[data-theme~="ottanio"] > .tippy-content { padding: 5px 9px; }
.tippy-box[data-theme~="ottanio"] > .tippy-arrow { color: var(--ott-deep); }

/* ====================================================
 * INFO-TIP (cerchietto "i" inline)
 * ==================================================== */

.rd-info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ott-100);
  color: var(--ott-500);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 10px;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  border: 0;
  padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.rd-info-tip:hover {
  background: var(--ott-base);
  color: #fff;
}

/* ====================================================
 * TOOLBAR VERTICALE (mappa, 56px)
 * ==================================================== */

.rd-tb {
  width: 56px;
  background: var(--paper);
  border-right: 1px solid var(--ott-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  overflow: hidden;
}
.rd-tb__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
}
.rd-tb__group + .rd-tb__group {
  border-top: 1px solid var(--ott-200);
}
.rd-tb__btn {
  width: 38px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--rd-r-7);
  color: var(--ott-500);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.rd-tb__btn:hover {
  background: var(--ott-50);
  color: var(--ott-base);
}
.rd-tb__btn.is-active {
  background: var(--ott-base);
  color: #fff;
}
.rd-tb__btn.is-active:hover {
  background: var(--ott-soft);
}
.rd-tb__btn svg { width: 17px; height: 17px; }

/* Tooltip CSS-only laterale per toolbar */
.rd-tb__btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--ott-deep);
  color: #fff;
  font-size: var(--fs-11-5);
  font-weight: 500;
  padding: 5px 9px;
  border-radius: var(--rd-r-5);
  box-shadow: var(--rd-shadow-md);
  z-index: 100;
  pointer-events: none;
}
.rd-tb__btn[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--ott-deep);
  z-index: 100;
  pointer-events: none;
}

/* ====================================================
 * TABELLA (override + classe nuova .rd-table)
 * ==================================================== */

.rd-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
}
.rd-table thead th {
  position: sticky;
  top: 0;
  background: var(--ott-50);
  border-bottom: 1px solid var(--ott-200);
  font-family: var(--ff-body);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--ott-500);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}
.rd-table tbody tr {
  height: 44px;
  border-bottom: 1px solid var(--ott-200);
  transition: background var(--t-fast);
}
.rd-table tbody tr:hover { background: var(--ott-50); }
.rd-table tbody tr:last-child { border-bottom: 0; }
.rd-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--ink);
}
.rd-table tbody td.mono { font-family: var(--ff-mono); }

/* Override tabelle legacy dentro rd-scope */
.rd-scope table {
  border-collapse: collapse;
}
.rd-scope table thead th {
  background: var(--ott-50);
  border-bottom: 1px solid var(--ott-200);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--ott-500);
  padding: 10px 12px;
}
.rd-scope table tbody tr {
  border-bottom: 1px solid var(--ott-200);
  transition: background var(--t-fast);
}
.rd-scope table tbody tr:hover { background: var(--ott-50); }
.rd-scope table tbody td { padding: 10px 12px; }

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

.rd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.rd-empty__icon {
  color: var(--ott-300);
}
.rd-empty__icon svg { width: 48px; height: 48px; stroke-width: 2; }
.rd-empty__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-14);
  color: var(--ink);
  margin: 0;
}
.rd-empty__text {
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  color: var(--ott-500);
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}

/* ====================================================
 * LOADING SKELETON SHIMMER
 * ==================================================== */

.rd-skeleton {
  background: linear-gradient(90deg, var(--ott-50) 0%, var(--ott-100) 50%, var(--ott-50) 100%);
  background-size: 200% 100%;
  animation: rd-shimmer 1500ms ease-in-out infinite;
  border-radius: var(--rd-r-6);
}
@keyframes rd-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ====================================================
 * BANNER ERRORE / WARNING / SUCCESS INLINE
 * ==================================================== */

.rd-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--rd-r-7);
  font-family: var(--ff-body);
  font-size: var(--fs-12-5);
  border-left: 4px solid;
}
.rd-banner__icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.rd-banner__icon svg { width: 16px; height: 16px; }
.rd-banner__body {
  flex: 1;
  line-height: 1.45;
}
.rd-banner--error {
  background: #FCE7E7;
  border-color: var(--ott-error);
  color: #7f1d1d;
}
.rd-banner--warn {
  background: #FBF1DC;
  border-color: var(--ott-warn);
  color: #8b5a14;
}
.rd-banner--ok {
  background: #E6F8F0;
  border-color: var(--ott-green);
  color: #166245;
}
.rd-banner--info {
  background: var(--ott-50);
  border-color: var(--ott-base);
  color: var(--ink);
}

/* ====================================================
 * STAGE / FRAME / LAYOUT SHELL CON MAPPA
 * ==================================================== */

/* Layout grid 4-colonne per pagine con mappa */
.rd-shell-map {
  display: grid;
  grid-template-columns: 300px 56px 1fr 380px;
  height: 100%;
  overflow: hidden;
}

/* Layout 2-colonne per pagine senza mappa */
.rd-shell-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  overflow: hidden;
}
.rd-shell-page__nav {
  background: var(--paper);
  border-right: 1px solid var(--ott-200);
  overflow-y: auto;
}
.rd-shell-page__content {
  overflow-y: auto;
  padding: 24px 32px;
  max-width: 1200px;
  width: 100%;
}

/* ====================================================
 * PIN STOPS (per card percorso)
 * ==================================================== */

.rd-pin-stop {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ott-base);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-11);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ott-base);
  flex-shrink: 0;
}
.rd-pin-stop--start {
  background: var(--ott-green);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ott-green);
}
.rd-pin-stop--end {
  background: var(--ott-red);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ott-red);
}