/* =============================================================================
   perizie-editor.css — B2 Redesign v2 (RYZE-inspired, 2026-04-22)
   Layout: header legacy DC (brand.js) + sidebar fissa sx + main dx
   Palette: primary red var(--brand-base) solo su CTA+badge; bulk UI in slate/navy
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. INTEGRATION col layout legacy: overlay sotto header DC
   - NON nascondiamo l'header top (resta visibile con brand DC)
   - Nascondiamo solo sidebar mappa + map container legacy
   - Overlay copre viewport dall'header in giu' (top: 60px default DC header)
   ----------------------------------------------------------------------------- */

/* Hide layout legacy quando portal=perizie */
body[data-active-portal="perizie"] .layout > .sidebar,
body[data-active-portal="perizie"] #sidebarPanel,
body[data-active-portal="perizie"] .layout > #map,
body[data-active-portal="perizie"] .mapboxgl-control-container {
  display: none !important;
}

body[data-active-portal="perizie"] .portal-panel:not([data-portal="perizie"]) {
  display: none !important;
}

/* Overlay mount: sotto l'header DC legacy (altezza ~60-68px) */
#pe-overlay-mount { display: none; }

body[data-active-portal="perizie"] #pe-overlay-mount {
  position: fixed;
  top: var(--pe-header-offset, 60px);
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  background: var(--pe-bg);
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
}

/* Su schermi piccoli sidebar collapse */
@media (max-width: 780px) {
  body[data-active-portal="perizie"] #pe-overlay-mount {
    grid-template-columns: 1fr;
  }
  .pe-sidebar-nav { display: none !important; }
}

body[data-active-portal="perizie"] { overflow: hidden !important; }

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (RYZE-inspired, light + slate/navy)
   ----------------------------------------------------------------------------- */
.pe-root, #pe-overlay-mount {
  --pe-brand: var(--brand-base);
  --pe-brand-hover: #6e0102;
  --pe-brand-soft: #fef2f2;
  --pe-navy: var(--brand-text-primary);
  --pe-navy-700: var(--brand-text-primary);
  --pe-navy-500: #334155;
  --pe-accent: var(--interactive);           /* blu per active nav (stile RYZE) */
  --pe-accent-soft: #eff6ff;
  --pe-bg: #f4f6f9;               /* main background grigio-azzurro */
  --pe-surface: #ffffff;
  --pe-surface-soft: var(--brand-interactive-bg);
  --pe-border: var(--brand-border);
  --pe-border-strong: var(--brand-border);
  --pe-text: var(--brand-text-primary);
  --pe-text-muted: var(--brand-text-secondary);
  --pe-text-faint: #94a3b8;
  --pe-row-hover: var(--brand-interactive-bg);
  --pe-focus-ring: rgba(37, 99, 235, 0.15);
  --pe-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --pe-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  --pe-radius: 8px;
  --pe-radius-sm: 6px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pe-text);
}

/* -----------------------------------------------------------------------------
   2. SIDEBAR (nav verticale, stile RYZE)
   ----------------------------------------------------------------------------- */
.pe-sidebar-nav {
  background: var(--pe-surface);
  border-right: 1px solid var(--pe-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
}

/* Card contesto (tenant/progetto/user) in alto */
.pe-context-card {
  padding: 14px 12px 12px;
  margin: 12px;
  background: var(--pe-surface-soft);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
}
.pe-context-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--pe-text);
  font-weight: 600;
}
.pe-context-row + .pe-context-row {
  padding-top: 8px;
  border-top: 1px solid var(--pe-border);
  margin-top: 4px;
}
.pe-context-icon {
  width: 16px; height: 16px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--pe-text-muted);
}
.pe-context-dropdown {
  flex: 1;
  height: 28px;
  padding: 0 24px 0 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius-sm);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5z' fill='%2364748b'/></svg>") no-repeat right 6px center;
  color: var(--pe-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.pe-context-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--pe-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Menu items */
.pe-nav-menu {
  padding: 8px 0;
  flex: 1;
}
.pe-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 2px 12px;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-radius: var(--pe-radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--pe-text-muted);
  transition: all 0.12s;
  font-family: inherit;
}
.pe-nav-item:hover {
  background: var(--pe-row-hover);
  color: var(--pe-text);
}
.pe-nav-item.active {
  background: var(--pe-accent-soft);
  color: var(--pe-accent);
}
.pe-nav-item.active .pe-nav-icon { color: var(--pe-accent); }
.pe-nav-item[disabled] {
  opacity: 0.45; cursor: not-allowed;
}
.pe-nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--pe-text-muted);
}
.pe-nav-badge {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--pe-brand);
  border-radius: 10px;
}

/* Footer sidebar */
.pe-sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--pe-border);
  font-size: 11px;
  color: var(--pe-text-faint);
  text-align: center;
}

/* -----------------------------------------------------------------------------
   3. MAIN CONTENT AREA
   ----------------------------------------------------------------------------- */
.pe-main {
  overflow-y: auto;
  padding: 24px 32px;
  background: var(--pe-bg);
}

.pe-main-header {
  margin-bottom: 20px;
}
.pe-main-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--pe-navy);
  letter-spacing: -0.3px;
}
.pe-main-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--pe-text-muted);
  font-weight: 500;
}
.pe-main-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* -----------------------------------------------------------------------------
   4. DASHBOARD — KPI cards + liste proattive
   ----------------------------------------------------------------------------- */
.pe-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.pe-kpi-card {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 16px;
  box-shadow: var(--pe-shadow-sm);
  transition: all 0.12s;
  cursor: pointer;
}
.pe-kpi-card:hover {
  box-shadow: var(--pe-shadow);
  border-color: var(--pe-border-strong);
}
.pe-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pe-kpi-value {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 700;
  color: var(--pe-navy);
  letter-spacing: -0.5px;
  line-height: 1;
}
.pe-kpi-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--pe-text-muted);
}
.pe-kpi-card.danger .pe-kpi-value { color: #dc2626; }
.pe-kpi-card.warn   .pe-kpi-value { color: #d97706; }
.pe-kpi-card.ok     .pe-kpi-value { color: #059669; }
.pe-kpi-card.info   .pe-kpi-value { color: var(--pe-accent); }

/* Dashboard sezioni liste urgenti */
.pe-dash-section {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--pe-shadow-sm);
}
.pe-dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pe-border);
}
.pe-dash-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--pe-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pe-dash-section-title .pe-badge-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.pe-dash-section-title .pe-badge-dot.danger { background: #dc2626; }
.pe-dash-section-title .pe-badge-dot.warn   { background: #d97706; }
.pe-dash-section-title .pe-badge-dot.info   { background: var(--pe-accent); }
.pe-dash-section-action {
  font-size: 12px;
  color: var(--pe-accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* -----------------------------------------------------------------------------
   5. FILTER BAR (lista perizie)
   ----------------------------------------------------------------------------- */
.pe-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  margin-bottom: 12px;
  box-shadow: var(--pe-shadow-sm);
}
.pe-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-right: 4px;
}

/* -----------------------------------------------------------------------------
   6. INPUTS
   ----------------------------------------------------------------------------- */
.pe-input,
.pe-select,
.pe-textarea {
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--pe-border-strong);
  border-radius: var(--pe-radius-sm);
  background: #fff;
  color: var(--pe-text);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pe-textarea { height: auto; padding: 8px 10px; resize: vertical; min-height: 72px; }
.pe-input:focus,
.pe-select:focus,
.pe-textarea:focus {
  outline: none;
  border-color: var(--pe-accent);
  box-shadow: 0 0 0 3px var(--pe-focus-ring);
}
.pe-input.invalid,
.pe-select.invalid { border-color: #dc2626; background: #fef2f2; }
.pe-input[readonly] { background: var(--pe-surface-soft); color: var(--pe-text-muted); }

.pe-input-group { display: flex; align-items: stretch; min-width: 0; }
.pe-input-prefix, .pe-input-suffix {
  height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center;
  background: var(--pe-surface-soft); border: 1px solid var(--pe-border-strong);
  color: var(--pe-text-muted); font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.pe-input-prefix { border-right: 0; border-radius: var(--pe-radius-sm) 0 0 var(--pe-radius-sm); }
.pe-input-suffix { border-left: 0; border-radius: 0 var(--pe-radius-sm) var(--pe-radius-sm) 0; }
.pe-input-group .pe-input { border-radius: 0; flex: 1; }
.pe-input-group .pe-input:first-child { border-radius: var(--pe-radius-sm) 0 0 var(--pe-radius-sm); }
.pe-input-group .pe-input:last-child  { border-radius: 0 var(--pe-radius-sm) var(--pe-radius-sm) 0; }

.pe-checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pe-checkbox input { width: 15px; height: 15px; accent-color: var(--pe-accent); }
.pe-radio-group { display: flex; flex-wrap: wrap; gap: 12px; }
.pe-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pe-radio input { accent-color: var(--pe-accent); }

/* -----------------------------------------------------------------------------
   7. BUTTONS (primary ROSSO bordeaux, non blu)
   ----------------------------------------------------------------------------- */
.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  background: #fff;
  color: var(--pe-text);
  border: 1px solid var(--pe-border-strong);
  border-radius: var(--pe-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
  font-family: inherit;
}
.pe-btn:hover { background: var(--pe-surface-soft); border-color: var(--pe-border-strong); }
.pe-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--pe-focus-ring); }
.pe-btn:disabled { opacity: 0.5; cursor: not-allowed; background: #fff; }
.pe-btn.pe-btn-primary {
  background: var(--pe-brand); color: #fff; border-color: var(--pe-brand); font-weight: 700;
}
.pe-btn.pe-btn-primary:hover { background: var(--pe-brand-hover); border-color: var(--pe-brand-hover); }
.pe-btn.pe-btn-ghost { background: transparent; border-color: transparent; color: var(--pe-text-muted); }
.pe-btn.pe-btn-ghost:hover { background: var(--pe-row-hover); color: var(--pe-text); }

/* -----------------------------------------------------------------------------
   8. TABELLA DENSA
   ----------------------------------------------------------------------------- */
.pe-list-body {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  overflow: auto;
  box-shadow: var(--pe-shadow-sm);
}
.pe-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pe-list-table thead {
  position: sticky; top: 0; z-index: 2; background: var(--pe-surface-soft);
}
.pe-list-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--pe-border);
  white-space: nowrap;
}
.pe-list-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--brand-interactive-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.pe-list-row {
  cursor: pointer;
  transition: background 0.08s;
  height: 40px;
}
.pe-list-row:hover { background: var(--pe-row-hover); }
.pe-list-row:focus { outline: none; background: var(--pe-row-hover); box-shadow: inset 3px 0 0 var(--pe-accent); }
.pe-list-row td strong { font-weight: 600; color: var(--pe-text); }
.pe-row-hint { color: var(--pe-accent); font-weight: 600; font-size: 12px; opacity: 0; transition: opacity 0.12s; }
.pe-list-row:hover .pe-row-hint,
.pe-list-row:focus .pe-row-hint { opacity: 1; }

.pe-col-codice  { width: 160px; }
.pe-col-sla     { width: 120px; text-align: center; }
.pe-col-actions { width: 80px;  text-align: right; }

.pe-sla-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.pe-sla-green  { background: #dcfce7; color: #166534; }
.pe-sla-yellow { background: #fef3c7; color: #92400e; }
.pe-sla-red    { background: #fee2e2; color: #991b1b; }
.pe-sla-none   { background: var(--brand-interactive-bg); color: var(--pe-text-faint); }

.pe-state-chip {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--pe-text);
  background: var(--brand-border);
  border-radius: 12px;
}

.pe-list-footer { padding: 10px 4px 4px; }
.pe-list-pagination {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--pe-text-muted);
}
.pe-list-pagination strong { color: var(--pe-text); font-weight: 700; }

/* -----------------------------------------------------------------------------
   9. EDITOR VIEW (tabbed)
   ----------------------------------------------------------------------------- */
.pe-editor-wrapper {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  overflow: hidden;
  box-shadow: var(--pe-shadow-sm);
}
.pe-editor-wrapper.split-view { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: transparent; border: 0; box-shadow: none; }
.pe-editor-wrapper.split-view > .pe-editor-panel,
.pe-editor-wrapper.split-view > .pe-preview-panel {
  background: var(--pe-surface); border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius); box-shadow: var(--pe-shadow-sm); overflow: hidden;
}
.pe-editor-panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 580px;
}

.pe-sidebar-tabs {
  background: var(--pe-surface-soft);
  border-right: 1px solid var(--pe-border);
  padding: 8px 0;
  overflow-y: auto;
}
.pe-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 13px;
  color: var(--pe-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.pe-tab:hover { background: #fff; color: var(--pe-text); }
.pe-tab.active {
  background: #fff;
  border-left-color: var(--pe-accent);
  color: var(--pe-accent);
  font-weight: 700;
}
.pe-tab[disabled] { opacity: 0.45; cursor: not-allowed; }
.pe-tab-badge { font-size: 11px; color: var(--pe-text-faint); font-weight: 500; margin-left: 6px; }
.pe-tab-dirty-dot { width: 7px; height: 7px; background: #f59e0b; border-radius: 50%; margin-left: 6px; display: inline-block; }

.pe-content {
  padding: 16px 20px;
  overflow-y: auto;
}
.pe-section-header {
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--pe-border);
}
.pe-section-header h2 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--pe-accent);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.pe-section-header .pe-section-desc {
  font-size: 11px; color: var(--pe-text-muted); margin-top: 2px; text-transform: none; letter-spacing: 0;
}

.pe-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 20px;
}
.pe-field { display: flex; flex-direction: column; min-width: 0; }
.pe-field label {
  font-size: 11px; font-weight: 700; color: var(--pe-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.pe-field.dirty label::after {
  content: "●"; color: #f59e0b; margin-left: 6px; font-size: 10px; vertical-align: middle;
}
.pe-field-badge {
  display: inline-block; padding: 1px 6px; font-size: 9px; font-weight: 700;
  border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.4px;
  vertical-align: baseline;
}
.pe-field-badge.custom   { background: #fef3c7; color: #92400e; }
.pe-field-badge.required { background: #fee2e2; color: #991b1b; }
.pe-field-hint { font-size: 11px; color: var(--pe-text-faint); margin-top: 4px; }
.pe-field-errors { font-size: 11px; color: #dc2626; margin-top: 4px; font-weight: 500; }

/* -----------------------------------------------------------------------------
   10. PREVIEW PANEL
   ----------------------------------------------------------------------------- */
.pe-preview-panel { display: flex; flex-direction: column; }
.pe-preview-head {
  padding: 8px 12px;
  background: var(--pe-surface-soft);
  border-bottom: 1px solid var(--pe-border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--pe-text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-preview-head strong { color: var(--pe-text); font-weight: 700; }
.pe-preview-iframe { flex: 1; width: 100%; border: 0; min-height: 600px; background: #fff; }

/* -----------------------------------------------------------------------------
   11. MODAL + LOADING + TOAST
   ----------------------------------------------------------------------------- */
.pe-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; backdrop-filter: blur(2px);
}
.pe-modal {
  background: #fff; border-radius: var(--pe-radius);
  padding: 22px; width: 440px; max-width: 90vw;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.pe-modal h3 {
  margin: 0 0 10px; font-size: 14px; color: var(--pe-brand);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-modal p { margin: 0 0 18px; color: var(--pe-text); font-size: 13px; }
.pe-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pe-modal-actions .pe-btn { min-width: 84px; }

/* Modal with form input (v4) */
.pe-modal { width: 520px; }
.pe-modal-body { margin: 0 0 14px; font-size: 13px; color: var(--pe-text); }
.pe-modal-input { display: block; margin: 10px 0 16px; }
.pe-modal-input label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--pe-text-muted); margin-bottom: 6px;
}
.pe-modal-input input.pe-input,
.pe-modal-input textarea.pe-input {
  width: 100%; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--pe-border); border-radius: 6px;
  font-family: inherit; resize: vertical;
}
.pe-modal-input .pe-field-hint { margin-top: 6px; font-size: 11px; }
.pe-modal-input input.invalid,
.pe-modal-input textarea.invalid { border-color: #dc2626; background: #fef2f2; }

/* Priority compare popup */
.pe-priority-compare {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 14px; align-items: stretch;
  margin-top: 14px;
}
.pe-priority-row { display: flex; flex-direction: column; gap: 8px; }
.pe-priority-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--pe-text-muted); font-weight: 600;
}
.pe-priority-card {
  background: #f4f6f9; border: 1px solid var(--pe-border);
  border-radius: 6px; padding: 10px 12px; min-height: 72px;
  display: flex; flex-direction: column; gap: 4px;
}
.pe-priority-suggested .pe-priority-card {
  background: #fef3c7; border-color: #f59e0b;
}
.pe-priority-divider {
  display: flex; align-items: center; justify-content: center;
  color: var(--pe-text-muted); font-size: 11px; font-weight: 700;
}
.pe-sla-chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: #fff; border: 1px solid var(--pe-border);
  padding: 2px 8px; border-radius: 12px; width: fit-content;
}

/* Tab speciali (Costi / Checklist) */
.pe-tabs-divider {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--pe-text-muted); font-weight: 600;
  padding: 14px 14px 6px;
  border-top: 1px solid var(--pe-border); margin-top: 10px;
}
.pe-tab-special {
  font-style: normal;
}
.pe-tab-special::before {
  content: "▸ "; color: var(--pe-accent); font-weight: 700;
}

/* =============================================================================
   COSTI TAB v5 — UX pilot (ridisegno 2026-04-22)
   Principi: density, readonly-first con edit esplicito, audit visible,
   data-first invoice breakdown, design tokens DC bordeaux + slate
   ============================================================================= */

.pe-costi-wrap {
  padding: 4px 2px 16px;
  display: flex; flex-direction: column; gap: 18px;
}

/* Section refined header */
.pe-section-header-refined {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--pe-border);
}
.pe-section-title {
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--pe-navy); letter-spacing: -0.1px;
}

/* Loading skeleton */
.pe-skel {
  background: linear-gradient(90deg, var(--brand-interactive-bg) 25%, var(--brand-border) 50%, var(--brand-interactive-bg) 75%);
  background-size: 200% 100%; animation: pe-skel-anim 1.5s infinite;
  border-radius: 8px;
}
.pe-skel-card { height: 140px; }
@keyframes pe-skel-anim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Snapshot banner (perizia terminale) */
.pe-snapshot-banner {
  display: flex; align-items: center; gap: 10px;
  background: #fef3c7; border: 1px solid #f59e0b; color: #92400e;
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
}
.pe-snapshot-banner strong { font-weight: 700; }
.pe-snapshot-banner svg { color: #b45309; flex-shrink: 0; }

/* Cost section container */
.pe-cost-section {
  background: #fff;
  border: 1px solid var(--pe-border);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.pe-cost-section-internal {
  background: #fafbfc;
}

/* Section head (title + summary right) */
.pe-cost-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; margin-bottom: 16px;
}
.pe-cost-section-title {
  margin: 0 0 3px; font-size: 14px; font-weight: 700;
  color: var(--pe-navy);
  display: inline-flex; align-items: center; gap: 7px;
}
.pe-cost-section-title svg { color: var(--pe-brand); flex-shrink: 0; }
.pe-cost-section-sub {
  font-size: 12px; color: var(--pe-text-muted);
  line-height: 1.4;
}
.pe-muted { color: var(--pe-text-muted); font-weight: 400; }

/* Tenant summary (ore + costo totale nella section head) */
.pe-tenant-summary {
  display: flex; gap: 22px; align-items: center;
  padding: 8px 14px; background: #fff;
  border: 1px solid var(--pe-border); border-radius: 8px;
}
.pe-tenant-summary > div {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 80px;
}
.pe-tenant-summary-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--pe-text-muted); font-weight: 600;
}
.pe-tenant-summary-value {
  font-size: 16px; font-weight: 700; color: var(--pe-navy);
  font-variant-numeric: tabular-nums;
}
.pe-tenant-summary-money { color: var(--pe-brand); }

/* Cost grid (3 voci perito) */
.pe-cost-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 18px;
}

/* Voce cost card */
.pe-cost-card {
  background: #fff;
  border: 1px solid var(--pe-border);
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-cost-card:hover {
  border-color: var(--pe-border-strong);
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.pe-cost-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.pe-cost-card-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--pe-brand-soft); color: var(--pe-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe-cost-card-title {
  flex: 1; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--pe-text-muted);
}
.pe-cost-card-value {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
}
.pe-cost-amount {
  font-size: 22px; font-weight: 700; color: var(--pe-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.pe-cost-edit-btn {
  width: 30px; height: 30px; border-radius: 6px;
  background: transparent; border: 1px solid var(--pe-border);
  color: var(--pe-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.pe-cost-edit-btn:hover {
  background: var(--pe-brand-soft);
  color: var(--pe-brand);
  border-color: var(--pe-brand);
}
.pe-cost-lock {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pe-text-faint);
}

/* Source badges */
.pe-src-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 10px;
  white-space: nowrap;
  margin-left: auto;
}
.pe-src-override   { background: #dbeafe; color: #1d4ed8; }
.pe-src-listino    { background: #ecfdf5; color: #065f46; }
.pe-src-template   { background: #f3e8ff; color: #6b21a8; }
.pe-src-snapshot   { background: #fef3c7; color: #92400e; }
.pe-src-default    { background: var(--brand-interactive-bg); color: var(--brand-text-secondary); }

/* Invoice breakdown */
.pe-invoice-breakdown {
  background: linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%);
  border: 1px solid var(--pe-border);
  border-radius: 8px; padding: 16px 18px;
}
.pe-invoice-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--pe-border);
  font-size: 12px; font-weight: 600; color: var(--pe-navy);
}
.pe-invoice-head svg { color: var(--pe-brand); }
.pe-invoice-rows {
  display: flex; flex-direction: column; gap: 6px;
}
.pe-invoice-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 4px 0;
  font-variant-numeric: tabular-nums;
}
.pe-invoice-row.pe-invoice-add { color: var(--brand-text-secondary); }
.pe-invoice-row.pe-invoice-sub { color: #b91c1c; }
.pe-invoice-row.pe-invoice-note {
  color: var(--pe-text-muted); font-size: 11px;
  font-style: italic; padding: 6px 0;
}
.pe-invoice-row.pe-invoice-note svg { margin-right: 4px; }
.pe-invoice-row.pe-invoice-totale {
  padding: 10px 0 8px; margin-top: 6px;
  border-top: 1px solid var(--pe-border);
  font-size: 14px;
}
.pe-invoice-lordo { font-weight: 700; color: var(--pe-navy); }
.pe-invoice-row.pe-invoice-netto {
  padding: 12px 16px; margin-top: 8px;
  background: var(--pe-brand); color: #fff;
  border-radius: 8px; font-size: 15px;
}
.pe-invoice-netto-val {
  font-weight: 800; font-size: 18px;
  letter-spacing: -0.2px;
}
.pe-invoice-val { font-variant-numeric: tabular-nums; }

/* Tenant breakdown table */
.pe-cost-breakdown-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--pe-border);
}
.pe-cost-breakdown-table thead {
  background: var(--pe-surface-soft);
}
.pe-cost-breakdown-table th {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--pe-text-muted);
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--pe-border);
}
.pe-cost-breakdown-table th.num, .pe-cost-breakdown-table td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.pe-cost-breakdown-table td {
  padding: 10px 14px; font-size: 13px;
  border-bottom: 1px solid var(--pe-border);
}
.pe-cost-breakdown-table tr:last-child td { border-bottom: none; }
.pe-cost-breakdown-table tr.pe-row-unconfigured { background: #fffbeb; }
.pe-num-strong { font-weight: 700; color: var(--pe-navy); }

/* User cell */
.pe-user-cell {
  display: flex; align-items: center; gap: 8px;
}
.pe-avatar-xs {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--pe-accent-soft); color: var(--pe-accent);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe-role-chip {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  background: var(--pe-surface-soft); color: var(--pe-text-muted);
  border-radius: 8px; margin-left: 6px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.pe-hours-chip {
  display: inline-block; font-size: 12px;
  padding: 2px 8px; background: var(--brand-interactive-bg); color: var(--pe-navy);
  border-radius: 6px; font-weight: 600;
}
.pe-warn-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; padding: 1px 6px;
  background: #fef3c7; color: #92400e; border-radius: 8px;
  margin-left: 6px; font-weight: 600;
}

/* Empty state cost (no time tracked) */
.pe-cost-empty {
  text-align: center; padding: 40px 20px;
  background: #fff; border: 1px dashed var(--pe-border);
  border-radius: 8px;
}
.pe-cost-empty svg { color: var(--pe-text-faint); margin-bottom: 8px; }
.pe-cost-empty-title { font-size: 13px; font-weight: 600; color: var(--pe-text); margin-bottom: 4px; }
.pe-cost-empty-desc { font-size: 12px; color: var(--pe-text-muted); max-width: 360px; margin: 0 auto; }

/* Totale pratica per tenant (hero row) */
.pe-cost-totale-practice {
  background: linear-gradient(135deg, var(--pe-navy) 0%, var(--brand-text-primary) 100%);
  color: #fff; padding: 18px 22px;
  border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.pe-cost-totale-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.85);
}
.pe-cost-totale-label svg { color: #fbbf24; }
.pe-cost-totale-breakdown {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}
.pe-cost-totale-breakdown .pe-muted {
  color: rgba(255,255,255,0.55); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.6px; margin-left: 4px;
}
.pe-cost-totale-plus, .pe-cost-totale-eq {
  font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 300;
}
.pe-cost-totale-big {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -0.3px; padding-left: 8px;
}

/* Audit panel */
.pe-audit-panel {
  background: #fff; border: 1px solid var(--pe-border);
  border-radius: 8px; overflow: hidden;
}
.pe-audit-toggle {
  padding: 12px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--pe-text);
  background: var(--pe-surface-soft);
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
}
.pe-audit-toggle:hover { background: var(--pe-row-hover); }
.pe-audit-toggle svg { color: var(--pe-text-muted); }
.pe-audit-panel[open] .pe-audit-toggle { border-bottom-color: var(--pe-border); }
.pe-audit-count {
  background: var(--pe-brand); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  min-width: 18px; text-align: center;
  margin-left: auto;
}
.pe-audit-list {
  display: flex; flex-direction: column;
  max-height: 360px; overflow-y: auto;
}
.pe-audit-row {
  display: flex; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--pe-border);
}
.pe-audit-row:last-child { border-bottom: none; }
.pe-audit-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--pe-brand-soft); color: var(--pe-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe-audit-body { flex: 1; }
.pe-audit-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; font-size: 13px; color: var(--pe-text);
}
.pe-audit-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.pe-audit-old {
  color: var(--pe-text-muted); text-decoration: line-through;
}
.pe-audit-new {
  color: var(--pe-brand); font-weight: 700;
}
.pe-audit-note {
  font-size: 12px; color: var(--pe-text);
  font-style: italic; padding: 4px 10px;
  background: var(--pe-surface-soft);
  border-left: 3px solid var(--pe-accent);
  border-radius: 3px;
  margin-bottom: 4px;
}
.pe-audit-meta {
  font-size: 11px; color: var(--pe-text-muted);
}

/* Edit voce modal */
.pe-modal-edit-voce { width: 480px; }
.pe-modal-head {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px 0;
  margin-bottom: 16px;
}
.pe-modal-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--pe-brand-soft); color: var(--pe-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pe-modal-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: var(--pe-navy);
}
.pe-modal-sub {
  font-size: 12px; color: var(--pe-text-muted);
  margin-top: 4px;
}
.pe-modal-sub strong { color: var(--pe-navy); font-variant-numeric: tabular-nums; }
.pe-modal-body {
  padding: 0 22px 10px;
}
.pe-modal-info {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; color: var(--pe-text-muted);
  padding: 10px 12px; margin-top: 8px;
  background: var(--pe-surface-soft);
  border-left: 3px solid var(--pe-accent);
  border-radius: 4px;
}
.pe-modal-info svg { color: var(--pe-accent); flex-shrink: 0; margin-top: 1px; }
.pe-modal-edit-voce .pe-modal-actions {
  padding: 14px 22px; margin: 0;
  background: var(--pe-surface-soft);
  border-top: 1px solid var(--pe-border);
}
.pe-label-required { color: var(--pe-brand); font-weight: 700; }

/* =============================================================================
   COSTI v6 — payable card + lifecycle + status chip (2026-04-22)
   ============================================================================= */

/* Banner same-payee */
.pe-same-payee-banner {
  display: flex; align-items: center; gap: 8px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8;
  padding: 10px 14px; border-radius: 8px; font-size: 12px;
  margin-bottom: 14px;
}
.pe-same-payee-banner svg { color: var(--interactive); flex-shrink: 0; }
.pe-same-payee-banner strong { font-weight: 700; }

/* Payable stack */
.pe-payable-stack {
  display: flex; flex-direction: column; gap: 10px;
}

/* Payable card */
.pe-payable-card {
  background: #fff; border: 1px solid var(--pe-border); border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-payable-card:hover {
  border-color: var(--pe-border-strong);
  box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}

.pe-payable-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px;
}
.pe-payable-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--pe-navy);
}
.pe-payable-title .pe-cost-card-icon {
  width: 28px; height: 28px;
}

.pe-payable-body {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 18px; align-items: center;
  padding: 4px 0 12px;
}
.pe-payable-amount {
  display: flex; align-items: center; gap: 10px;
}
.pe-payable-amount .pe-cost-amount {
  font-size: 22px; font-weight: 700; color: var(--pe-navy);
  font-variant-numeric: tabular-nums;
}
.pe-payable-payee {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--pe-surface-soft);
  border-radius: 6px; font-size: 12px; color: var(--pe-text);
  flex-wrap: wrap;
}
.pe-payable-payee.pe-payee-missing {
  background: #fffbeb; color: #92400e;
  border: 1px dashed #f59e0b;
}
.pe-payable-payee-label {
  text-transform: uppercase; letter-spacing: 0.4px;
  font-size: 10px; font-weight: 700; color: var(--pe-text-muted);
}
.pe-payable-payee strong { font-weight: 700; }
.pe-payable-payee-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--pe-text-muted);
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.pe-payable-payee-btn:hover {
  background: rgba(137,1,3,0.08); color: var(--pe-brand);
}

/* Status chip (lifecycle) */
.pe-status-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 12px;
  white-space: nowrap;
}
.pe-status-pending    { background: var(--brand-interactive-bg); color: var(--brand-text-secondary); }
.pe-status-oda        { background: #dbeafe; color: #1d4ed8; }
.pe-status-invoiced   { background: #f3e8ff; color: #6b21a8; }
.pe-status-paid       { background: #dcfce7; color: #14532d; }
.pe-status-frozen     { background: #fef3c7; color: #92400e; }
.pe-status-cancelled  { background: #fee2e2; color: #991b1b; }

/* Lifecycle steps (ODA -> Fattura -> Pagamento) */
.pe-payable-lifecycle {
  display: flex; align-items: center; gap: 0;
  padding: 12px 4px 4px;
  margin-top: 8px;
  border-top: 1px dashed var(--pe-border);
}
.pe-lc-step {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.pe-lc-step.pe-lc-done { opacity: 1; }
.pe-lc-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pe-surface-soft);
  color: var(--pe-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--pe-border);
  transition: all 0.2s;
}
.pe-lc-step.pe-lc-done .pe-lc-dot {
  background: #dcfce7; color: #14532d; border-color: #86efac;
}
.pe-lc-info {
  display: flex; flex-direction: column; line-height: 1.2;
  min-width: 0;
}
.pe-lc-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--pe-text-muted); font-weight: 700;
}
.pe-lc-value {
  font-size: 12px; font-weight: 600; color: var(--pe-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe-lc-connector {
  flex: 0 0 20px; height: 1px; background: var(--pe-border);
  margin: 0 4px;
}

/* =============================================================================
   PROGETTI view (Blocco 2a, 2026-04-22)
   ============================================================================= */

/* Sidebar nav divider */
.pe-nav-divider {
  margin: 18px 14px 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--pe-text-faint); font-weight: 700;
}

/* Projects card grid */
.pe-projects-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px; margin-top: 18px;
}

.pe-project-card {
  background: #fff; border: 1px solid var(--pe-border);
  border-radius: 10px; padding: 16px 18px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; flex-direction: column; gap: 10px;
}
.pe-project-card:hover {
  border-color: var(--pe-brand);
  box-shadow: 0 4px 12px rgba(137,1,3,0.12);
  transform: translateY(-1px);
}
.pe-project-card:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(137,1,3,0.18);
}

.pe-project-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.pe-project-card-code {
  font-size: 13px; font-weight: 700; color: var(--pe-brand);
  letter-spacing: -0.1px; font-variant-numeric: tabular-nums;
}
.pe-project-card-status {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: #065f46;
  background: #ecfdf5; padding: 2px 7px; border-radius: 8px;
}
.pe-project-card-name {
  font-size: 15px; font-weight: 700; color: var(--pe-navy);
  line-height: 1.3;
}
.pe-project-card-ref {
  font-size: 11px; color: var(--pe-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}

.pe-project-card-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 10px 0;
  border-top: 1px solid var(--pe-border);
  border-bottom: 1px solid var(--pe-border);
}
.pe-proj-metric {
  display: flex; flex-direction: column;
  padding: 2px;
}
.pe-proj-metric-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--pe-text-muted); font-weight: 700;
}
.pe-proj-metric-value {
  font-size: 15px; font-weight: 700; color: var(--pe-navy);
  font-variant-numeric: tabular-nums;
}

/* KPI status inline */
.pe-proj-kpi {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
}
.pe-proj-kpi-ok      { background: #ecfdf5; color: #065f46; }
.pe-proj-kpi-warn    { background: #fef3c7; color: #92400e; }
.pe-proj-kpi-danger  { background: #fef2f2; color: #991b1b; }
.pe-proj-kpi-muted   { background: var(--pe-surface-soft); color: var(--pe-text-muted); }
.pe-proj-kpi-value   { font-variant-numeric: tabular-nums; font-weight: 700; }

.pe-project-card-footer {
  margin-top: auto; padding-top: 2px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px; font-size: 11px;
  color: var(--pe-accent); font-weight: 600;
}

/* Project Detail */
.pe-detail-crumb {
  margin-bottom: 8px;
}
.pe-detail-tabs {
  display: flex; gap: 4px; margin-top: 14px;
  border-bottom: 2px solid var(--pe-border);
}
.pe-detail-tab {
  background: transparent; border: none; cursor: pointer;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--pe-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 0.12s;
  font-family: inherit;
}
.pe-detail-tab:hover { color: var(--pe-text); }
.pe-detail-tab.active {
  color: var(--pe-brand);
  border-bottom-color: var(--pe-brand);
}
.pe-detail-tab svg { flex-shrink: 0; }

.pe-detail-content { margin-top: 20px; }

.pe-detail-panel {
  background: #fff; border: 1px solid var(--pe-border);
  border-radius: 10px; padding: 22px;
}
.pe-detail-panel-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  color: var(--pe-navy);
  display: inline-flex; align-items: center; gap: 7px;
}
.pe-detail-panel-title svg { color: var(--pe-brand); }

.pe-detail-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; gap: 12px; flex-wrap: wrap;
}
.pe-flex-row { display: inline-flex; gap: 8px; align-items: center; }

/* dl lista generali */
.pe-dl {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 10px 20px; margin: 0;
}
.pe-dl dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--pe-text-muted); font-weight: 600;
}
.pe-dl dd {
  margin: 0; font-size: 13px; color: var(--pe-text);
}

/* SLA form grid */
.pe-sla-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.pe-sla-field {
  display: flex; flex-direction: column; gap: 6px;
}
.pe-sla-field label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--pe-text-muted);
}

/* KPI panel in SLA tab */
.pe-kpi-panel {
  background: var(--pe-surface-soft);
  border: 1px solid var(--pe-border); border-radius: 8px;
  padding: 14px 16px;
}
.pe-kpi-panel-head {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; padding-bottom: 10px;
  border-bottom: 1px solid var(--pe-border);
  font-size: 12px; color: var(--pe-text);
}
.pe-kpi-panel-rows {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.pe-kpi-panel-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-radius: 8px;
  color: #fff;
}
.pe-kpi-ok     { background: linear-gradient(135deg, #059669, #065f46); }
.pe-kpi-warn   { background: linear-gradient(135deg, #f59e0b, #b45309); }
.pe-kpi-danger { background: linear-gradient(135deg, #dc2626, #991b1b); }
.pe-kpi-row-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pe-kpi-row-sub { font-size: 11px; opacity: 0.9; margin-top: 2px; }
.pe-kpi-row-value {
  font-size: 28px; font-weight: 800; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

/* Listino header */
.pe-listino-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
}

/* Error panel */
.pe-error-panel {
  display: flex; gap: 12px;
  background: #fef2f2; border: 1px solid #fecaca;
  padding: 14px 16px; border-radius: 8px;
}
.pe-error-icon { color: #dc2626; flex-shrink: 0; }
.pe-error-title { font-weight: 700; color: #991b1b; font-size: 13px; margin-bottom: 3px; }
.pe-error-detail { font-size: 12px; color: #b91c1c; }

/* Input prefix per costi modal */
.pe-input-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--pe-border); border-radius: 6px;
  background: #fff; overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pe-input-group:focus-within {
  border-color: var(--pe-brand);
  box-shadow: 0 0 0 3px rgba(137,1,3,0.1);
}
.pe-input-group .pe-input-prefix {
  padding: 0 12px;
  background: var(--pe-surface-soft);
  color: var(--pe-text-muted);
  font-weight: 600; font-size: 13px;
  display: flex; align-items: center;
  border-right: 1px solid var(--pe-border);
}
.pe-input-group .pe-input {
  border: none !important; flex: 1;
  box-shadow: none !important;
}
.pe-input-group .pe-input:focus { box-shadow: none !important; }

/* Checklist panel */
.pe-checklist-wrap { padding: 4px; }
.pe-checklist-empty { text-align: center; padding: 36px 20px; }
.pe-checklist-empty p { margin: 0 0 12px; font-size: 13px; }
.pe-checklist-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pe-stat-chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  background: #fff; border: 1px solid var(--pe-border);
  padding: 4px 10px; border-radius: 14px;
}
.pe-stat-chip.pe-stat-ok { background: #ecfdf5; border-color: #059669; color: #065f46; }
.pe-stat-chip.pe-stat-danger { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.pe-stat-chip.pe-stat-muted { background: #f4f6f9; color: var(--pe-text-muted); }
.pe-checklist-table input.pe-checklist-note { width: 100%; height: 30px; font-size: 12px; }
.pe-checklist-table select.pe-checklist-status { width: 100%; height: 30px; font-size: 12px; }
.pe-checklist-table td { vertical-align: middle; padding: 8px 10px; }
.pe-checklist-table .pe-col-actions { text-align: right; }

/* Alert severity label inline */
.pe-alert-sev {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.6); padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; color: inherit;
}

.pe-loading, .pe-empty {
  padding: 40px 20px; text-align: center; color: var(--pe-text-muted); font-size: 13px;
}
.pe-loading::before {
  content: ""; display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--pe-border);
  border-top-color: var(--pe-accent);
  border-radius: 50%;
  animation: pe-spin 0.7s linear infinite;
  margin-right: 8px; vertical-align: middle;
}
@keyframes pe-spin { to { transform: rotate(360deg); } }

.pe-error {
  padding: 14px 18px;
  background: #fef2f2; border-left: 3px solid #dc2626;
  color: #991b1b; border-radius: var(--pe-radius-sm);
  margin: 12px 0; font-size: 13px;
}

.pe-toast {
  position: fixed; bottom: 20px; right: 24px;
  padding: 10px 16px; background: var(--pe-navy); color: #fff;
  border-radius: var(--pe-radius-sm); font-size: 13px; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9998; max-width: 380px;
}
.pe-toast.visible { opacity: 1; transform: translateY(0); }
.pe-toast-success { background: #059669; }
.pe-toast-error   { background: #dc2626; }

/* -----------------------------------------------------------------------------
   12. ICON helper (Lucide inline SVG)
   ----------------------------------------------------------------------------- */
.pe-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  stroke: currentColor;
}
.pe-nav-icon, .pe-context-icon {
  /* Retro-compat: sostituito da .pe-icon inline, ma lasciato per safety */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
}
.pe-nav-item .pe-icon { color: var(--pe-text-muted); }
.pe-nav-item.active .pe-icon { color: var(--pe-accent); }
.pe-context-card .pe-icon { color: var(--pe-text-muted); margin-right: 4px; }

/* -----------------------------------------------------------------------------
   13. DASHBOARD wow — KPI arricchite + grafici
   ----------------------------------------------------------------------------- */
.pe-kpi-card {
  position: relative;
  padding: 14px 16px 0;
  min-height: 130px;
  overflow: hidden;
}
.pe-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pe-kpi-icon-wrap {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
.pe-kpi-icon-wrap.danger { background: #fee2e2; color: #dc2626; }
.pe-kpi-icon-wrap.warn   { background: #fef3c7; color: #d97706; }
.pe-kpi-icon-wrap.info   { background: #dbeafe; color: var(--interactive); }
.pe-kpi-icon-wrap.ok     { background: #dcfce7; color: #059669; }
.pe-kpi-label {
  font-size: 11px; font-weight: 700;
  color: var(--pe-text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.pe-kpi-value {
  margin-top: 4px;
  font-size: 28px; font-weight: 700;
  color: var(--pe-navy);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.pe-kpi-sub {
  margin-top: 10px;
  font-size: 11px;
  color: var(--pe-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pe-kpi-sub strong { color: var(--pe-text); font-weight: 700; }
.pe-kpi-trend {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.pe-kpi-trend.up   { background: #dcfce7; color: #166534; }
.pe-kpi-trend.down { background: #fee2e2; color: #991b1b; }

.pe-sparkline {
  display: block;
  width: 100%;
  height: 36px;
  margin: 6px 0 0;
}

/* -----------------------------------------------------------------------------
   14. Dashboard grid per grafici (bar chart + donut SLA)
   ----------------------------------------------------------------------------- */
.pe-dash-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 980px) {
  .pe-dash-grid { grid-template-columns: 1fr; }
}

/* Bar chart orizzontale */
.pe-chart-bars .pe-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pe-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.pe-bar-label {
  color: var(--pe-text-muted);
  font-weight: 600;
}
.pe-bar-track {
  height: 14px;
  background: var(--pe-surface-soft);
  border-radius: 4px;
  overflow: hidden;
}
.pe-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.pe-bar-value {
  text-align: right;
  font-weight: 700;
  color: var(--pe-navy);
  font-variant-numeric: tabular-nums;
}

/* Donut SLA */
.pe-chart-sla .pe-donut-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 16px;
}
.pe-donut { display: block; }
.pe-sla-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pe-sla-leg-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--pe-text);
}
.pe-sla-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.pe-sla-leg-row strong {
  color: var(--pe-navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Badge count su dashboard section header */
.pe-badge-count {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text-muted);
  background: var(--pe-surface-soft);
  border-radius: 10px;
  margin-left: 8px;
}

/* Alert items (dashboard urgenti) */
.pe-alert-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  margin: -1px 0;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid var(--pe-border);
}
.pe-alert-item:last-child { border-bottom: 0; }
.pe-alert-item:hover { background: var(--pe-row-hover); }
.pe-alert-item:focus { outline: none; background: var(--pe-row-hover); }
.pe-alert-item.priority-danger { border-left-color: #dc2626; }
.pe-alert-item.priority-warn   { border-left-color: #d97706; }
.pe-alert-item.priority-info   { border-left-color: var(--pe-accent); }

.pe-alert-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--pe-surface-soft);
  color: var(--pe-text-muted);
}
.pe-alert-item.priority-danger .pe-alert-icon { background: #fee2e2; color: #dc2626; }
.pe-alert-item.priority-warn   .pe-alert-icon { background: #fef3c7; color: #d97706; }
.pe-alert-item.priority-info   .pe-alert-icon { background: #dbeafe; color: var(--pe-accent); }

.pe-alert-body { min-width: 0; }
.pe-alert-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--pe-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pe-alert-msg {
  font-size: 12px;
  color: var(--pe-text-muted);
  margin-top: 2px;
}
.pe-alert-action {
  color: var(--pe-text-faint);
  flex-shrink: 0;
}
.pe-alert-item:hover .pe-alert-action { color: var(--pe-accent); }

/* Section action button con icon */
.pe-dash-section-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pe-dash-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* -----------------------------------------------------------------------------
   15. Cluster perizie (magazzino SLA + in lavorazione accordion)
   ----------------------------------------------------------------------------- */
.pe-kpi-grid-compact .pe-kpi-card {
  min-height: 100px;
  padding: 12px 14px;
}
.pe-kpi-grid-compact .pe-kpi-value { font-size: 22px; }

.pe-cluster {
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  overflow: hidden;
  margin-top: 12px;
  background: var(--pe-surface);
}
.pe-cluster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--pe-surface-soft);
  border-bottom: 1px solid var(--pe-border);
  list-style: none;
  cursor: pointer;
}
.pe-cluster-header::-webkit-details-marker { display: none; }
.pe-cluster-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pe-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pe-cluster[data-cluster="red"]    .pe-cluster-title { color: #991b1b; }
.pe-cluster[data-cluster="yellow"] .pe-cluster-title { color: #92400e; }
.pe-cluster[data-cluster="green"]  .pe-cluster-title { color: #166534; }
.pe-cluster[data-cluster="red"]    { border-left: 3px solid #dc2626; }
.pe-cluster[data-cluster="yellow"] { border-left: 3px solid #d97706; }
.pe-cluster[data-cluster="green"]  { border-left: 3px solid #059669; }

.pe-cluster-accordion > summary { cursor: pointer; }
.pe-cluster-accordion[open] > summary { border-bottom: 1px solid var(--pe-border); }
.pe-cluster .pe-list-table { border: 0; }
.pe-cluster .pe-list-table thead { background: transparent; }

/* -----------------------------------------------------------------------------
   16. Ricerca Prelios-like
   ----------------------------------------------------------------------------- */
.pe-search-quick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  margin-bottom: 12px;
  box-shadow: var(--pe-shadow-sm);
}
.pe-search-quick-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pe-search-advanced {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--pe-shadow-sm);
}
.pe-search-advanced > summary {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pe-text);
  cursor: pointer;
  background: var(--pe-surface-soft);
  border-bottom: 1px solid var(--pe-border);
}
.pe-search-advanced[open] > summary { border-bottom: 1px solid var(--pe-border); }
.pe-search-advanced .pe-filters {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--pe-border);
}
.pe-search-advanced .pe-filters.pe-filters-historical {
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
}
.pe-search-advanced .pe-filters.pe-filters-actions {
  border-bottom: 1px solid var(--pe-border);
  justify-content: flex-end;
  gap: 8px;
}
.pe-filter-group-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: #b45309;
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 8px;
}
.pe-search-note {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--pe-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* -----------------------------------------------------------------------------
   17. Z-INDEX: popup legacy header SOPRA overlay perizie (overlay z-index 2000)
   I popup del header (chat, notifiche, profilo, guided tour, tooltip) devono
   restare accessibili quando l'utente clicca sulle icone in alto. Li alziamo
   sopra 2000 cosi' risultano interagibili anche dentro portal Perizie.
   ----------------------------------------------------------------------------- */
body[data-active-portal="perizie"] .guided-tour-popover,
body[data-active-portal="perizie"] .driver-popover,
body[data-active-portal="perizie"] .chat-drawer,
body[data-active-portal="perizie"] .chat-drawer-backdrop,
body[data-active-portal="perizie"] .notifications-popup,
body[data-active-portal="perizie"] .notifications-panel,
body[data-active-portal="perizie"] #notificationsPanel,
body[data-active-portal="perizie"] #profileDrawer,
body[data-active-portal="perizie"] #userMenuDropdown,
body[data-active-portal="perizie"] .user-menu-dropdown,
body[data-active-portal="perizie"] .driver-overlay,
body[data-active-portal="perizie"] [class*="tippy"],
body[data-active-portal="perizie"] [id*="tooltip"] {
  z-index: 3000 !important;
}

/* -----------------------------------------------------------------------------
   17b. HEADER stacking fix — Perizie portal
   ROOT CAUSE (verificato via preview_eval 2026-04-22):
   `.app-shell` ha `animation: app-reveal 0s 0.4s both` (layout.css) che anima
   `opacity`. Durante l'animation (fase 'both' pre-delay) l'opacity !=1 crea
   un **stacking context implicito** su app-shell, senza z-index esplicito.
   Risultato: INTERA app-shell (header incluso) viene dipinta SOTTO
   #pe-overlay-mount (z-index:500), i dropdown figli (chatDropdown, etc.)
   restano intrappolati nel stacking context di app-shell e non escono sopra.
   FIX verificato empiricamente: basta rimuovere l'animation su app-shell in
   portal perizie -> niente stacking context -> header z-index:5000 fa il suo
   lavoro nel body stacking, dropdown figli visibili sopra overlay.
   NB: NON aggiungiamo z-index su app-shell (coprirebbe la dashboard).
   ----------------------------------------------------------------------------- */
body[data-active-portal="perizie"] .app-shell {
  animation: none !important;
}

body[data-active-portal="perizie"] header,
body[data-active-portal="perizie"] .app-shell > header {
  position: relative !important;
  z-index: 5000 !important;
  animation: none !important;       /* rimuove transform residuo */
  transform: none !important;
  overflow: visible !important;
}

/* Dropdown interni header: z-index alto per uscire sopra overlay perizie */
body[data-active-portal="perizie"] #chatDropdown,
body[data-active-portal="perizie"] #notifDropdown,
body[data-active-portal="perizie"] #userMenuPanel,
body[data-active-portal="perizie"] .user-menu-panel,
body[data-active-portal="perizie"] .legend-menu-panel {
  z-index: 10001 !important;
}

/* Quando drawer portali è aperto, header scende SOTTO backdrop (3000)+drawer (3100) */
body.portal-drawer-open[data-active-portal="perizie"] header,
body.portal-drawer-open[data-active-portal="perizie"] .app-shell > header {
  z-index: 1 !important;
}

/* Drawer portali aperto: backdrop più denso + sfoca l'overlay perizie sottostante */
body.portal-drawer-open .portal-drawer-backdrop {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
body.portal-drawer-open[data-active-portal="perizie"] #pe-overlay-mount {
  filter: blur(3px) brightness(0.7);
  pointer-events: none;
  transition: filter 0.2s ease;
}

/* =============================================================================
   BACKOFFICE DRAWER (B4 cabina di regia, 2026-04-22)
   Drawer slide-in da destra, 60% viewport (min 720px). Sopra portal overlay.
   ============================================================================= */

.bo-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 9500;                 /* sopra header portale (5000), popups management (10000) restano sopra */
  display: none;
  pointer-events: none;
  color: var(--pe-text, var(--brand-text-primary));
  font-family: var(--pe-font-body, "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif);
  /* Brand vars scope: se aperto da fuori .pe-root, pe-brand è undefined → fallback */
  --bo-brand: var(--pe-brand, var(--brand-base));
  --bo-brand-hover: var(--pe-brand-hover, #6e0102);
  --bo-brand-soft: var(--pe-brand-soft, #fef2f2);
  --bo-navy: var(--pe-navy, var(--brand-text-primary));
  --bo-border: var(--pe-border, var(--brand-border));
  --bo-surface: #ffffff;
  --bo-surface-soft: var(--brand-interactive-bg);
  --bo-text: var(--brand-text-primary);
  --bo-muted: var(--brand-text-secondary);
  --bo-faint: #94a3b8;
  --bo-row-hover: var(--brand-interactive-bg);
  --bo-accent: var(--interactive);
}
.bo-drawer-root.bo-open { display: block; pointer-events: auto; }

/* Quando backoffice drawer aperto: abbassa z-index header portale (pattern allineato a portal-drawer-open) */
body.bo-drawer-open header,
body.bo-drawer-open .app-shell > header {
  z-index: 1 !important;
}

.bo-drawer-root .bo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: bo-fade-in 0.15s ease-out;
}

.bo-drawer-root .bo-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(60vw, 1100px);
  min-width: 720px;
  background: var(--bo-surface);
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.2);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  animation: bo-slide-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes bo-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes bo-slide-in { from { transform: translateX(30px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

@media (max-width: 900px) {
  .bo-drawer-root .bo-drawer { width: 100vw; min-width: 0; }
}

/* ---------- Header ---------- */
.bo-drawer-root .bo-header {
  position: sticky; top: 0;
  background: linear-gradient(180deg, var(--bo-surface) 0%, var(--bo-surface) 70%, rgba(255,255,255,0.9) 100%);
  border-bottom: 1px solid var(--bo-border);
  padding: 16px 24px 12px;
  z-index: 2;
}
.bo-drawer-root .bo-header-skel {
  color: var(--bo-muted); font-style: italic;
}
.bo-drawer-root .bo-header-main { display: flex; flex-direction: column; gap: 6px; }
.bo-drawer-root .bo-header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.bo-drawer-root .bo-header-codice {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.bo-drawer-root .bo-header-codice h2 {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--bo-navy);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bo-drawer-root .bo-header-sub {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--bo-muted); font-size: 13px;
}
.bo-drawer-root .bo-header-intest {
  color: var(--bo-text); font-weight: 600;
}
.bo-drawer-root .bo-sep { color: var(--bo-faint); }

/* ---------- Inner nav (chips scroll-to) ---------- */
.bo-drawer-root .bo-innernav {
  padding: 8px 24px;
  background: var(--bo-surface-soft);
  border-bottom: 1px solid var(--bo-border);
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: thin;
}
.bo-drawer-root .bo-innernav::-webkit-scrollbar { height: 4px; }
.bo-drawer-root .bo-innernav::-webkit-scrollbar-thumb { background: var(--bo-border); border-radius: 2px; }
.bo-drawer-root .bo-navchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--bo-border); background: #fff;
  font-size: 12px; color: var(--bo-text); cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.bo-drawer-root .bo-navchip:hover {
  border-color: var(--bo-brand); color: var(--bo-brand); background: var(--bo-brand-soft);
}

/* ---------- Body + sections ---------- */
.bo-drawer-root .bo-body {
  overflow-y: auto; padding: 16px 24px 24px;
  scroll-behavior: smooth;
}
.bo-drawer-root .bo-section {
  background: var(--bo-surface);
  border: 1px solid var(--bo-border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  scroll-margin-top: 16px;
}
.bo-drawer-root .bo-sec-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: var(--bo-navy);
}
.bo-drawer-root .bo-sec-title h3 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; flex: 1;
}
.bo-drawer-root .bo-sec-title .bo-icon {
  color: var(--bo-brand); flex-shrink: 0;
}

/* KV grid per anagrafica + banca */
.bo-drawer-root .bo-grid-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.bo-drawer-root .bo-kv {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0; border-bottom: 1px dashed var(--bo-border);
}
.bo-drawer-root .bo-kv:last-child { border-bottom: 0; }
.bo-drawer-root .bo-kv span { font-size: 11px; color: var(--bo-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bo-drawer-root .bo-kv strong { font-size: 14px; color: var(--bo-text); font-weight: 600; word-break: break-word; }

.bo-drawer-root .bo-note-internal {
  margin-top: 10px; padding: 10px 12px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  font-size: 13px; color: #92400e;
}

/* Immobili grid */
.bo-drawer-root .bo-immobili-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.bo-drawer-root .bo-immobile-card {
  border: 1px solid var(--bo-border); border-radius: 8px; padding: 10px 12px;
  background: var(--bo-surface-soft);
}
.bo-drawer-root .bo-immobile-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.bo-drawer-root .bo-immobile-addr { font-size: 13px; color: var(--bo-text); margin-bottom: 6px; }
.bo-drawer-root .bo-immobile-meta {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--bo-muted);
}

/* Mutuo */
.bo-drawer-root .bo-mutuo-main {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bo-drawer-root .bo-mutuo-amount {
  font-size: 32px; font-weight: 700; color: var(--bo-navy); letter-spacing: -0.02em;
}
.bo-drawer-root .bo-mutuo-sub { display: flex; gap: 6px; flex-wrap: wrap; }

/* Costi */
.bo-drawer-root .bo-cost-grid {
  display: grid; gap: 6px;
}
.bo-drawer-root .bo-cost-head,
.bo-drawer-root .bo-cost-row,
.bo-drawer-root .bo-cost-totale {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr 0.8fr;
  align-items: center; gap: 12px;
  padding: 8px 10px;
}
.bo-drawer-root .bo-cost-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--bo-muted); border-bottom: 1px solid var(--bo-border);
}
.bo-drawer-root .bo-cost-row {
  background: var(--bo-surface-soft); border-radius: 6px;
}
.bo-drawer-root .bo-cost-row.bo-cost-interni { background: #f0f9ff; }
.bo-drawer-root .bo-cost-voce { font-weight: 600; color: var(--bo-text); }
.bo-drawer-root .bo-cost-payee { color: var(--bo-muted); font-size: 13px; }
.bo-drawer-root .bo-cost-eur { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.bo-drawer-root .bo-cost-subhead {
  margin-top: 8px; padding: 4px 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--bo-muted); border-bottom: 1px dashed var(--bo-border);
}
.bo-drawer-root .bo-cost-totale {
  margin-top: 6px; background: var(--bo-navy); color: #fff; border-radius: 8px;
  grid-template-columns: 1fr auto; padding: 12px 14px;
}
.bo-drawer-root .bo-cost-totale strong { font-size: 18px; font-variant-numeric: tabular-nums; }

/* Assegnazioni */
.bo-drawer-root .bo-assign-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.bo-drawer-root .bo-assign-card {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--bo-border); border-radius: 8px;
  background: var(--bo-surface-soft);
}
.bo-drawer-root .bo-assign-card.bo-assign-empty { background: #fefce8; border-color: #fef08a; }
.bo-drawer-root .bo-assign-role { font-size: 11px; text-transform: uppercase; color: var(--bo-muted); letter-spacing: 0.03em; }
.bo-drawer-root .bo-assign-name strong { font-size: 14px; color: var(--bo-text); }
.bo-drawer-root .bo-assign-mail { font-size: 11px; color: var(--bo-muted); margin-top: 2px; }

/* Alert rows */
.bo-drawer-root .bo-alert-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 10px; border: 1px solid var(--bo-border); border-radius: 8px;
  background: var(--bo-surface-soft); margin-bottom: 6px;
}
.bo-drawer-root .bo-alert-main { display: flex; gap: 10px; flex: 1; min-width: 0; }
.bo-drawer-root .bo-alert-title { font-size: 14px; color: var(--bo-text); }
.bo-drawer-root .bo-alert-msg { font-size: 13px; color: var(--bo-muted); margin: 2px 0 4px; }
.bo-drawer-root .bo-alert-meta { font-size: 11px; }

/* Checklist */
.bo-drawer-root .bo-checklist-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.bo-drawer-root .bo-checklist-stats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.bo-drawer-root .bo-pct-bar {
  flex: 1; min-width: 140px; height: 8px; background: var(--bo-border); border-radius: 4px; overflow: hidden;
}
.bo-drawer-root .bo-pct-bar > div { height: 100%; border-radius: 4px; transition: width 0.3s; }

/* Timeline */
.bo-drawer-root .bo-filter-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.bo-drawer-root .bo-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--bo-border); background: #fff;
  font-size: 12px; color: var(--bo-text); cursor: pointer; transition: all 0.15s;
}
.bo-drawer-root .bo-filter-pill.active {
  background: var(--bo-brand); border-color: var(--bo-brand); color: #fff;
}
.bo-drawer-root .bo-filter-pill:hover:not(.active) {
  border-color: var(--bo-brand); color: var(--bo-brand);
}
.bo-drawer-root .bo-pill-count {
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.1); color: inherit;
}
.bo-drawer-root .bo-filter-pill.active .bo-pill-count { background: rgba(255,255,255,0.25); }

.bo-drawer-root .bo-timeline {
  display: flex; flex-direction: column; gap: 4px;
}
.bo-drawer-root .bo-tl-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 10px;
  padding: 8px 6px; border-bottom: 1px dashed var(--bo-border);
  position: relative;
}
.bo-drawer-root .bo-tl-item.is-pinned {
  background: #fef2f2; border-radius: 6px; padding: 8px 10px; border-bottom: 0;
}
.bo-drawer-root .bo-tl-badge {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bo-drawer-root .bo-tl-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--bo-text);
}
.bo-drawer-root .bo-tl-time { font-size: 11px; }
.bo-drawer-root .bo-tl-content {
  font-size: 13px; color: var(--bo-muted); margin-top: 4px;
  white-space: pre-wrap; word-break: break-word;
}
.bo-drawer-root .bo-pin-mark { color: #dc2626; display: inline-flex; }

/* ---------- Action bar (sticky bottom) ---------- */
.bo-drawer-root .bo-actionbar {
  position: sticky; bottom: 0;
  background: #fff;
  border-top: 1px solid var(--bo-border);
  padding: 12px 24px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
  z-index: 2;
}
.bo-drawer-root .bo-actionbar-left,
.bo-drawer-root .bo-actionbar-right {
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ---------- Chips / btns ---------- */
.bo-drawer-root .bo-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--brand-interactive-bg); color: var(--bo-text);
  border: 1px solid transparent;
  white-space: nowrap;
}
.bo-drawer-root .bo-state-chip {
  padding: 5px 12px; font-size: 13px; border: 1px solid;
  border-radius: 999px; font-weight: 700; white-space: nowrap;
}

.bo-drawer-root .bo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--bo-border); background: #fff; color: var(--bo-text);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.bo-drawer-root .bo-btn:hover:not(:disabled) {
  border-color: var(--bo-brand); color: var(--bo-brand); background: var(--bo-brand-soft);
}
.bo-drawer-root .bo-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.bo-drawer-root .bo-btn.bo-btn-primary {
  background: var(--bo-brand); color: #fff; border-color: var(--bo-brand);
}
.bo-drawer-root .bo-btn.bo-btn-primary:hover:not(:disabled) {
  background: var(--bo-brand-hover); border-color: var(--bo-brand-hover); color: #fff;
}
.bo-drawer-root .bo-btn.bo-btn-warn {
  background: #fffbeb; color: #b45309; border-color: #fbbf24;
}
.bo-drawer-root .bo-btn.bo-btn-warn:hover:not(:disabled) {
  background: #fef3c7; color: #92400e; border-color: #f59e0b;
}
.bo-drawer-root .bo-btn.bo-btn-ghost {
  background: transparent; border-color: transparent; color: var(--bo-muted);
}
.bo-drawer-root .bo-btn.bo-btn-ghost:hover:not(:disabled) {
  background: var(--bo-row-hover); color: var(--bo-text);
}
.bo-drawer-root .bo-btn.bo-btn-sm { padding: 4px 10px; font-size: 12px; }
.bo-drawer-root .bo-btn-icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent; background: transparent;
  color: var(--bo-muted); cursor: pointer;
}
.bo-drawer-root .bo-btn-icon:hover {
  background: var(--bo-row-hover); color: var(--bo-text);
}

/* Payable status chips */
.bo-drawer-root .bo-status-pending { background: var(--brand-interactive-bg); color: var(--brand-text-secondary); }
.bo-drawer-root .bo-status-oda_emitted { background: #dbeafe; color: #1e40af; }
.bo-drawer-root .bo-status-invoiced { background: #e0e7ff; color: #4338ca; }
.bo-drawer-root .bo-status-paid { background: #dcfce7; color: #15803d; }
.bo-drawer-root .bo-status-frozen { background: #f3e8ff; color: #6b21a8; }
.bo-drawer-root .bo-status-cancelled { background: #fee2e2; color: #b91c1c; }

.bo-drawer-root .bo-muted { color: var(--bo-muted); }
.bo-drawer-root .bo-warn { color: #b45309; font-size: 11px; margin-left: 6px; }
.bo-drawer-root .bo-empty {
  padding: 16px; color: var(--bo-muted); text-align: center;
  background: var(--bo-surface-soft); border-radius: 6px; border: 1px dashed var(--bo-border);
  font-size: 13px;
}
.bo-drawer-root .bo-more {
  margin-top: 6px; font-size: 12px; color: var(--bo-muted); text-align: center;
}
.bo-drawer-root .bo-error {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
  color: #991b1b;
}
.bo-drawer-root .bo-error .bo-icon { color: #dc2626; width: 24px; height: 24px; flex-shrink: 0; }

/* Skeleton */
.bo-drawer-root .bo-skel { padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bo-drawer-root .bo-skel-line {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--brand-interactive-bg) 0%, var(--brand-border) 50%, var(--brand-interactive-bg) 100%);
  background-size: 200% 100%;
  animation: bo-shimmer 1.4s infinite;
}
@keyframes bo-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Stampa riga perizia "apribile in drawer" — hint visivo su hover */
.pe-list-row.has-backoffice-hint td.pe-col-codice:hover {
  text-decoration: underline; cursor: pointer;
}

/* Kbd shortcut hints in title attr — styling generico */
.bo-drawer-root [title*="Alt+"],
.bo-drawer-root [title*="Esc"] {
  position: relative;
}

/* Dark mode tokens (quando body.theme-dark o auto) */
@media (prefers-color-scheme: dark) {
  .bo-drawer-root.bo-auto-dark {
    --bo-surface: var(--brand-text-primary);
    --bo-surface-soft: var(--brand-text-primary);
    --bo-text: var(--brand-border);
    --bo-muted: #94a3b8;
    --bo-faint: var(--brand-text-secondary);
    --bo-border: #334155;
    --bo-row-hover: var(--brand-text-primary);
  }
  .bo-drawer-root.bo-auto-dark .bo-cost-totale { background: #020617; }
}

/* =============================================================================
   BACKOFFICE INLINE PANEL (B4 polish 2026-04-22)
   Pannello "cabina di regia" collassabile in cima all'editor perizia.
   Sticky sotto il pe-main-header.
   ============================================================================= */
.pe-backoffice-inline {
  position: sticky; top: 0;
  background: linear-gradient(180deg, #fef2f2 0%, #fef2f210 100%);
  border: 1px solid var(--pe-border, var(--brand-border));
  border-radius: 10px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  z-index: 10;
  font-family: inherit;
}
.pe-backoffice-inline[data-loading="1"] { background: var(--brand-interactive-bg); }
.pe-bo-inline-skel { color: var(--brand-text-secondary); font-style: italic; font-size: 12px; text-align: center; padding: 4px 0; }
.pe-bo-inline-err {
  color: #991b1b; font-size: 12px; padding: 4px 0; font-style: italic;
}
.pe-bo-inline-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pe-bo-inline-head-l, .pe-bo-inline-head-r {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pe-bo-inline-head-l strong {
  font-size: 13px; color: var(--pe-brand, var(--brand-base));
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pe-bo-state-chip {
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid;
  white-space: nowrap;
}
.pe-bo-inline-sla {
  padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid;
  background: #fff;
}
.pe-bo-alert-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: #fef2f2; color: #dc2626; border: 1px solid #fecaca;
}
.pe-bo-inline-body { margin-top: 8px; border-top: 1px dashed var(--brand-border); padding-top: 8px; }
.pe-bo-inline-tl { display: flex; flex-direction: column; gap: 4px; }
.pe-bo-inline-tl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; font-size: 12px; color: var(--brand-text-secondary);
  border-radius: 4px;
}
.pe-bo-inline-tl-item:hover { background: var(--brand-interactive-bg); }
.pe-bo-inline-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pe-bo-inline-tl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-bo-inline-tl-title strong { color: var(--brand-text-primary); font-weight: 600; }
.pe-bo-inline-tl-time { color: #94a3b8; font-size: 11px; white-space: nowrap; }
.pe-bo-inline-empty { font-style: italic; color: #94a3b8; padding: 4px 0; font-size: 12px; }
.pe-btn-sm { padding: 4px 10px !important; font-size: 12px !important; height: auto !important; line-height: 1.4 !important; }

/* =============================================================================
   WORKFLOW STATI CONFIG (B2b 2026-04-22) — Tab in Impostazioni → Progetti
   ============================================================================= */
.wf-cfg-intro {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--pe-border, var(--brand-border));
  margin-bottom: 12px;
}
.wf-section-label {
  font-size: 11px; color: var(--brand-text-secondary); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 12px 0 6px; font-weight: 600;
}
.wf-states-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.wf-state-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid; font-size: 13px;
}
.wf-state-chip strong { font-weight: 600; }
.wf-state-chip span { font-size: 11px; opacity: 0.7; font-family: monospace; }
.wf-tag {
  padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  background: #10b98120; color: #10b981; text-transform: uppercase;
}
.wf-tag-end { background: #dc262620; color: #dc2626; }
.wf-state-chip-mini {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.wf-trans-group {
  border: 1px solid var(--pe-border, var(--brand-border));
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  background: var(--brand-interactive-bg);
}
.wf-trans-group-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px dashed var(--pe-border, var(--brand-border));
  font-size: 12px;
}
.wf-trans-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 6px 4px; font-size: 13px;
  border-bottom: 1px dashed var(--brand-interactive-bg);
}
.wf-trans-row:last-child { border-bottom: 0; }
.wf-trans-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-trans-label { font-weight: 600; color: var(--brand-text-primary); }
.wf-trans-arrow { color: #94a3b8; }
.wf-trans-roles {
  display: flex; gap: 3px; flex-wrap: wrap; max-width: 260px; justify-content: flex-end;
}
.wf-role-chip {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  background: #eff6ff; color: var(--interactive); border: 1px solid #dbeafe;
}
.wf-flag {
  padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700;
  background: #eff6ff; color: var(--interactive); border: 1px solid #bfdbfe;
  font-family: monospace;
}
.wf-flag-d { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.wf-perm-hint { margin: 8px 0 10px; font-size: 12px; font-style: italic; }
.wf-perm-matrix-wrap { overflow-x: auto; border: 1px solid var(--pe-border, var(--brand-border)); border-radius: 6px; }
.wf-perm-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
.wf-perm-matrix th, .wf-perm-matrix td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--pe-border, var(--brand-border));
  text-align: center;
  white-space: nowrap;
  background: #fff;
}
.wf-perm-matrix tr:last-child th, .wf-perm-matrix tr:last-child td { border-bottom: 0; }
.wf-perm-matrix th { background: var(--brand-interactive-bg); font-weight: 600; color: var(--pe-text, var(--brand-text-primary)); }
.wf-perm-state-h { text-align: left !important; position: sticky; left: 0; z-index: 2; }
.wf-perm-role-h { font-family: monospace; font-size: 11px; color: var(--pe-brand, var(--brand-base)); }
.wf-perm-state { text-align: left !important; position: sticky; left: 0; z-index: 1; background: #fff !important; }
.wf-perm-cell { transition: background 0.2s; }
.wf-perm-cell.wf-perm-saved { background: #dcfce7 !important; }
.wf-perm-chk {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0 3px; cursor: pointer; font-size: 10px; font-weight: 700;
  color: var(--pe-text-muted, var(--brand-text-secondary));
}
.wf-perm-chk input[type="checkbox"] { margin: 0; }
.wf-perm-chk input[type="checkbox"]:checked + span { color: var(--pe-brand, var(--brand-base)); }
.pe-muted { color: #94a3b8; font-size: 11px; }

/* =============================================================================
   DASHBOARD 4 VISTE (B6 2026-04-22) — role-based dashboards
   ============================================================================= */
.dc-dash-scope-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--pe-brand, var(--brand-base));
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
}
.dc-dash-scope-chip[data-scope="dev"] { background: var(--brand-text-primary); }
.dc-dash-scope-chip[data-scope="tenant"] { background: var(--brand-base); }
.dc-dash-scope-chip[data-scope="admin"] { background: var(--interactive); }
.dc-dash-scope-chip[data-scope="user"] { background: #059669; }

.dc-dash-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.dc-dash-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-dash-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--pe-text, var(--brand-text-primary));
  border-bottom: 1px dashed var(--pe-border, var(--brand-border));
}
.dc-dash-row:last-child { border-bottom: 0; }
.dc-dash-row-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-dash-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.dc-dash-row-clickable:hover {
  background: var(--pe-row-hover, var(--brand-interactive-bg));
}
.dc-dash-row strong { font-variant-numeric: tabular-nums; }

.dc-dash-trend {
  grid-template-columns: 90px 1fr 40px;
}
.dc-dash-bar {
  flex: 1;
  height: 8px;
  background: var(--brand-interactive-bg);
  border-radius: 4px;
  overflow: hidden;
}
.dc-dash-bar > div {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.dc-dash-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.dc-dash-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--pe-surface-soft, var(--brand-interactive-bg));
  border: 1px solid var(--pe-border, var(--brand-border));
}
.dc-dash-kv span {
  font-size: 11px;
  color: var(--pe-text-muted, var(--brand-text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dc-dash-kv strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--pe-text, var(--brand-text-primary));
  font-variant-numeric: tabular-nums;
}
.dc-dash-kv small { font-size: 10px; }
.dc-dash-kv-total {
  background: var(--pe-navy, var(--brand-text-primary));
  color: #fff;
  border-color: var(--pe-navy, var(--brand-text-primary));
}
.dc-dash-kv-total span { color: var(--brand-border); }
.dc-dash-kv-total strong { color: #fff; }

.dc-dash-sev-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.dc-dash-sev-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.dc-dash-sev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dc-dash-sev-label {
  text-transform: capitalize;
  color: var(--pe-text-muted, var(--brand-text-secondary));
}
.dc-dash-sev-row strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* =============================================================================
   Tab "Archivio docs" — integrazione Repository (2026-04-23)
   ============================================================================= */

.pe-archivi-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 2px 24px;
}

.pe-archivi-error {
  padding: 16px 20px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--pe-radius);
  color: #991b1b;
  font-size: 13px;
}
.pe-archivi-error-inline {
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--pe-radius-sm);
  color: #991b1b;
  font-size: 12px;
}

.pe-archivi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 2;
}
.pe-archivi-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pe-text);
}
.pe-archivi-counter {
  padding: 2px 10px;
  background: var(--pe-accent-soft);
  color: var(--pe-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pe-archivi-actions {
  display: flex;
  gap: 8px;
}

.pe-archivi-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pe-archivi-section {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: var(--pe-radius);
  overflow: hidden;
}
.pe-archivi-section[data-state="empty"] .pe-archivi-sec-head {
  background: var(--pe-surface-soft);
}
.pe-archivi-section[data-state="error"] {
  border-color: #fecaca;
}

.pe-archivi-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pe-border);
  background: linear-gradient(to bottom, #ffffff, #fafbfc);
}
.pe-archivi-sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--pe-text);
}
.pe-archivi-sec-icon {
  font-size: 18px;
  line-height: 1;
}
.pe-archivi-sec-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.pe-archivi-sec-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--pe-bg);
  border: 1px solid var(--pe-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text-muted);
  font-variant-numeric: tabular-nums;
}
.pe-archivi-sec-actions {
  display: flex;
  gap: 8px;
}
.pe-archivi-upload-btn {
  cursor: pointer;
  user-select: none;
}

.pe-archivi-sec-body {
  padding: 0;
}
.pe-archivi-skeleton,
.pe-archivi-empty {
  padding: 18px 16px;
  color: var(--pe-text-muted);
  font-size: 13px;
  text-align: center;
  font-style: italic;
}
.pe-archivi-empty {
  opacity: 0.7;
}

.pe-archivi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pe-archivi-table thead th {
  background: var(--pe-surface-soft);
  border-bottom: 1px solid var(--pe-border);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--pe-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pe-archivi-table tbody tr {
  border-bottom: 1px solid var(--pe-border);
  transition: background 0.12s ease;
}
.pe-archivi-table tbody tr:last-child {
  border-bottom: none;
}
.pe-archivi-table tbody tr:hover {
  background: var(--pe-row-hover);
}
.pe-archivi-table td {
  padding: 8px 12px;
  vertical-align: middle;
}
.pe-arc-th-mime,    .pe-arc-td-mime    { width: 36px; text-align: center; font-size: 18px; line-height: 1; }
.pe-arc-th-name,    .pe-arc-td-name    { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-arc-td-name                        { font-weight: 500; color: var(--pe-text); }
.pe-arc-name-link {
  color: var(--pe-brand);
  text-decoration: none;
  cursor: pointer;
}
.pe-arc-name-link:hover { text-decoration: underline; }
.pe-arc-th-size,    .pe-arc-td-size    { width: 88px; white-space: nowrap; color: var(--pe-text-muted); font-variant-numeric: tabular-nums; }
.pe-arc-th-actor,   .pe-arc-td-actor   { width: 180px; }
.pe-arc-th-date,    .pe-arc-td-date    { width: 120px; white-space: nowrap; color: var(--pe-text-muted); font-size: 12px; }
.pe-arc-th-actions, .pe-arc-td-actions { width: 160px; text-align: right; white-space: nowrap; }
.pe-arc-td-actions .pe-btn { margin-left: 4px; padding: 3px 8px; font-size: 12px; }
.pe-arc-btn-del:hover { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }

.pe-arc-uploader {
  font-size: 11px;
  color: var(--pe-text-muted);
  margin-top: 2px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pe-arc-actor-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.pe-arc-actor-tenant  { background: var(--pe-accent-soft); color: var(--pe-accent); border-color: #bfdbfe; }
.pe-arc-actor-octopus { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.pe-arc-actor-client  { background: #fef2f2; color: var(--pe-brand); border-color: #fecaca; }
.pe-arc-actor-tecnico { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* Upload overlay progresso */
.pe-archivi-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
}
.pe-archivi-upload-box {
  background: var(--pe-surface);
  border-radius: var(--pe-radius);
  padding: 20px 24px;
  min-width: 360px;
  max-width: 480px;
  box-shadow: var(--pe-shadow);
}
.pe-archivi-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--pe-text);
  margin-bottom: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pe-archivi-upload-progress {
  height: 6px;
  background: var(--pe-bg);
  border-radius: 999px;
  overflow: hidden;
}
.pe-archivi-upload-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pe-accent), var(--interactive));
  transition: width 0.2s ease;
}

/* ============================================================================
   Step 2 (2026-04-24) — Tab "Definizione perimetro" + "Catasto" (integrazione Octopus)
   ========================================================================== */

.pe-perim-root,
.pe-catasto-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

/* ── Perimetro: sezione ── */
.pe-perim-section {
  background: var(--pe-surface);
  border: 1px solid var(--pe-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.pe-perim-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}
.pe-perim-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pe-text);
}
.pe-perim-actions-top {
  display: flex;
  gap: 6px;
}

/* ── Perimetro: stati ── */
.pe-perim-loading,
.pe-perim-empty,
.pe-perim-error,
.pe-catasto-loading,
.pe-catasto-empty,
.pe-catasto-error {
  padding: 32px 20px;
  text-align: center;
  color: var(--pe-muted);
  font-size: 13px;
}
.pe-perim-error,
.pe-catasto-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  text-align: left;
}
.pe-perim-empty-icon,
.pe-catasto-empty-icon {
  font-size: 48px;
  margin-bottom: 10px;
}
.pe-perim-empty-title,
.pe-catasto-empty-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--pe-text);
  margin-bottom: 6px;
}
.pe-perim-empty-desc,
.pe-catasto-empty-desc {
  font-size: 12px;
  color: var(--pe-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* ── Perimetro: tabella ── */
.pe-perim-table-wrap {
  overflow-x: auto;
}
.pe-perim-table,
.pe-catasto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pe-perim-table th,
.pe-catasto-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--pe-border);
  background: var(--pe-bg);
  color: var(--pe-text);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pe-perim-table td,
.pe-catasto-table td {
  padding: 10px;
  border-bottom: 1px solid var(--pe-border);
  vertical-align: middle;
}
.pe-perim-table th.num,
.pe-catasto-table th.num,
.pe-perim-table td.num,
.pe-catasto-table td.num {
  text-align: right;
  white-space: nowrap;
}
.pe-perim-table th.actions,
.pe-catasto-table th.actions,
.pe-perim-td-actions,
.pe-catasto-table td.actions {
  white-space: nowrap;
  width: 1%;
}
.pe-perim-th-idx { width: 40px; text-align: center; }
.pe-perim-td-idx { text-align: center; color: var(--pe-muted); }

.pe-perim-cu {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--pe-text);
}
.pe-perim-comune {
  font-size: 11px;
  color: var(--pe-muted);
  margin-top: 2px;
}

.pe-perim-row:hover,
.pe-catasto-row:hover {
  background: var(--pe-row-hover, var(--brand-interactive-bg));
}
.pe-catasto-row-clickable {
  cursor: pointer;
}
.pe-catasto-row-clickable:hover {
  background: #eff6ff;
}

/* ── Perimetro: badge stato ── */
.pe-perim-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.pe-perim-badge-queued     { background: #e0e7ff; color: #3730a3; }
.pe-perim-badge-running    { background: #dbeafe; color: #1e40af; }
.pe-perim-badge-completed  { background: #dcfce7; color: #166534; }
.pe-perim-badge-failed     { background: #fee2e2; color: #991b1b; }
.pe-perim-badge-partial    { background: #fef3c7; color: #854d0e; }
.pe-perim-badge-retry      { background: #fde68a; color: #78350f; }
.pe-perim-badge-cancelled  { background: var(--brand-border); color: var(--brand-text-secondary); }
.pe-perim-badge-unknown    { background: var(--brand-interactive-bg); color: var(--brand-text-secondary); }

/* ── Perimetro: progress ── */
.pe-perim-progress {
  position: relative;
  height: 18px;
  background: var(--pe-bg);
  border-radius: 999px;
  overflow: hidden;
  min-width: 120px;
  border: 1px solid var(--pe-border);
}
.pe-perim-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--pe-accent), var(--interactive));
  transition: width 0.4s ease;
}
.pe-perim-progress-label {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pe-text);
}
.pe-perim-no-coverage {
  color: var(--pe-muted);
  font-size: 12px;
}

/* ── Perimetro: action section (avvia ricerca) ── */
.pe-perim-action-section {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.pe-perim-action-info { flex: 1; min-width: 240px; }
.pe-perim-action-title {
  font-weight: 700;
  font-size: 14px;
  color: #854d0e;
  margin-bottom: 4px;
}
.pe-perim-action-desc {
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}
.pe-perim-action-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pe-perim-pending-preview {
  flex: 1 1 100%;
  background: white;
  border: 1px solid var(--pe-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
}
.pe-perim-pending-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--pe-text);
  margin-bottom: 6px;
}
.pe-perim-pending-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pe-perim-pending-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: var(--pe-text);
  border-bottom: 1px dashed var(--pe-border);
}
.pe-perim-pending-list li:last-child { border-bottom: 0; }
.pe-perim-pending-remove {
  border: 0;
  background: transparent;
  color: #b91c1c;
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  line-height: 1;
}
.pe-perim-pending-remove:hover { background: #fee2e2; border-radius: 4px; }

/* ── Perimetro: dialog aggiungi immobile ── */
.pe-perim-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9600;
  padding: 20px;
}
.pe-perim-dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.pe-perim-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pe-border);
}
.pe-perim-dialog-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--pe-text);
}
.pe-perim-dialog-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--pe-muted);
  line-height: 1;
  padding: 4px 8px;
}
.pe-perim-dialog-close:hover { color: var(--pe-brand); }
.pe-perim-dialog-body {
  padding: 18px 20px;
  flex: 1;
}
.pe-perim-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--pe-border);
  background: var(--pe-bg);
  border-radius: 0 0 12px 12px;
}
.pe-perim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.pe-perim-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-perim-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pe-text);
}
.pe-perim-label small {
  font-weight: 400;
  color: var(--pe-muted);
}
.pe-perim-hint {
  font-size: 11px;
  color: var(--pe-muted);
  margin-top: 2px;
}

/* ── Catasto: toolbar ── */
.pe-catasto-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.pe-catasto-fps {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: var(--pe-text);
}
.pe-catasto-intest-more {
  display: inline-block;
  background: var(--pe-bg);
  color: var(--pe-muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.pe-catasto-no-link {
  color: var(--pe-muted);
  font-size: 12px;
}

/* ── Button XS size ── */
.pe-btn-xs {
  font-size: 11px;
  padding: 3px 8px;
  line-height: 1.3;
  border-radius: 6px;
}

/* ── Dialog perimetro: autocomplete + readonly + fix bottone primary ── */
/* Fix 2026-04-24: dialog backdrop con pe-root eredita tokens PerizeEditor per
   evitare bottone primary invisibile (bug noto checkpoint 2026-04-22). */
.pe-perim-dialog-backdrop.pe-root .pe-btn-primary,
.pe-perim-dialog .pe-btn-primary {
  background: var(--pe-brand);
  color: #fff;
  border-color: var(--pe-brand);
  font-weight: 600;
}
.pe-perim-dialog-backdrop.pe-root .pe-btn-primary:hover,
.pe-perim-dialog .pe-btn-primary:hover {
  filter: brightness(1.08);
}
.pe-perim-dialog-backdrop.pe-root .pe-btn-ghost,
.pe-perim-dialog .pe-btn-ghost {
  background: transparent;
  color: var(--pe-text);
  border-color: var(--pe-border);
}

/* Input readonly: visibilmente distinto (grigio chiaro + no cursor) */
.pe-perim-dialog .pe-input-readonly {
  background: var(--pe-bg);
  color: var(--pe-muted);
  cursor: default;
  border-color: var(--pe-border);
}

/* Input con selezione confermata (badge verde) */
.pe-perim-dialog .pe-input-ok {
  border-color: #16a34a;
  background-color: #f0fdf4;
}

/* Autocomplete dropdown */
.pe-perim-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--pe-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.pe-perim-autocomplete.open {
  display: block;
}
.pe-perim-ac-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--pe-border);
  font-size: 13px;
}
.pe-perim-ac-item:last-child { border-bottom: 0; }
.pe-perim-ac-item:hover {
  background: #eff6ff;
}
.pe-perim-ac-nome {
  font-weight: 600;
  color: var(--pe-text);
}
.pe-perim-ac-meta {
  color: var(--pe-muted);
  font-size: 11px;
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.pe-perim-ac-empty {
  padding: 12px;
  text-align: center;
  color: var(--pe-muted);
  font-size: 12px;
  font-style: italic;
}

/* Modal perizie (dirty confirm) ha z-index 9999, resta sopra l'overlay 2000 */

/* =============================================================================
   TIME TRACKING IDLE DETECTION (2026-04-24, migration 020)
   Warning banner in tab Costi + sezione "Tempo per utente" nel backoffice drawer.
   ============================================================================= */

/* Banner warning tariffa non configurata (tab Costi editor) */
.pe-tt-warning-banner {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 8px;
  color: #92400e;
  align-items: flex-start;
}
.pe-tt-warning-banner svg {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}
.pe-tt-warning-body { flex: 1; min-width: 0; }
.pe-tt-warning-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  color: #7c2d12;
}
.pe-tt-warning-list {
  margin: 4px 0;
  padding-left: 18px;
  font-size: 12px;
  color: #92400e;
}
.pe-tt-warning-list li {
  padding: 1px 0;
  line-height: 1.4;
}
.pe-tt-warning-cta {
  font-size: 11px;
  color: #78350f;
  margin-top: 6px;
  font-style: italic;
}
.pe-tt-warning-cta em {
  font-style: normal;
  font-weight: 600;
}

/* Sezione "Tempo per utente" nel backoffice drawer */
.bo-drawer-root .bo-tpu-warn-banner {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #fde68a;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}
.bo-drawer-root .bo-tpu-warn-banner svg {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}
.bo-drawer-root .bo-tpu-warn-banner strong {
  color: #7c2d12;
}

.bo-drawer-root .bo-tpu-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bo-drawer-root .bo-tpu-head,
.bo-drawer-root .bo-tpu-row,
.bo-drawer-root .bo-tpu-total {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: 10px;
  padding: 8px 10px;
  align-items: center;
  font-size: 13px;
}
.bo-drawer-root .bo-tpu-head {
  border-bottom: 1px solid var(--bo-border, var(--brand-border));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bo-muted, var(--brand-text-secondary));
  font-weight: 600;
}
.bo-drawer-root .bo-tpu-row {
  background: var(--bo-surface-soft, var(--brand-interactive-bg));
  border-radius: 6px;
}
.bo-drawer-root .bo-tpu-row.bo-tpu-warn {
  background: #fffbeb;
  border: 1px solid #fef3c7;
}
.bo-drawer-root .bo-tpu-name strong {
  color: var(--bo-text, var(--brand-text-primary));
  font-weight: 600;
  margin-right: 6px;
}
.bo-drawer-root .bo-tpu-name .bo-muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bo-drawer-root .bo-tpu-hours,
.bo-drawer-root .bo-tpu-cph,
.bo-drawer-root .bo-tpu-eur {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bo-drawer-root .bo-tpu-eur { font-weight: 600; }
.bo-drawer-root .bo-tpu-badge { font-size: 10px; }
.bo-drawer-root .bo-tpu-total {
  margin-top: 8px;
  background: var(--bo-navy, var(--brand-text-primary));
  color: #fff;
  border-radius: 6px;
  padding: 10px 12px;
}
.bo-drawer-root .bo-tpu-total strong { color: #fff; }
.bo-drawer-root .bo-chip-legacy {
  background: #e0f2fe !important;
  color: #075985 !important;
  border-color: #bae6fd !important;
}

/* =============================================================================
   B11 (2026-05-05) — Tab Contesto territoriale
   Storicizzazione OMI / Risk / Fastmap acquisiti per immobile principale.
   ============================================================================= */
.pe-ctx-root { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 16px; }
.pe-ctx-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pe-border); }
.pe-ctx-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand-secondary, #0f172a); }
.pe-ctx-sub { font-size: 12px; color: #64748b; margin-top: 4px; }
.pe-ctx-actions { display: flex; gap: 12px; align-items: center; }
.pe-ctx-toggle { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #475569; cursor: pointer; }

.pe-ctx-immobile-banner { }
.pe-ctx-banner { background: #f1f5f9; border-left: 4px solid var(--brand-primary, #890103); padding: 10px 14px; border-radius: 4px; font-size: 13px; }
.pe-ctx-banner-warn { background: #fef3c7; border-left-color: #b45309; }
.pe-ctx-banner-motivo { font-size: 11px; color: #64748b; margin-top: 4px; font-style: italic; }

.pe-ctx-status { min-height: 20px; }
.pe-ctx-info { background: #e0f2fe; color: #075985; padding: 8px 12px; border-radius: 4px; font-size: 12px; }
.pe-ctx-success { background: #dcfce7; color: #166534; padding: 8px 12px; border-radius: 4px; font-size: 12px; }
.pe-ctx-warn { background: #fef9c3; color: #854d0e; padding: 8px 12px; border-radius: 4px; font-size: 12px; }
.pe-ctx-error { background: #fee2e2; color: #991b1b; padding: 8px 12px; border-radius: 4px; font-size: 12px; }
.pe-ctx-empty { color: #94a3b8; padding: 16px; text-align: center; font-size: 13px; }
.pe-ctx-skeleton { color: #94a3b8; padding: 16px; font-size: 12px; font-style: italic; }

.pe-ctx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.pe-ctx-card { background: #fff; border: 1px solid var(--pe-border, #e2e8f0); border-radius: 6px; overflow: hidden; }
.pe-ctx-card-head { padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--pe-border, #e2e8f0); font-size: 13px; }
.pe-ctx-card-body { padding: 12px 14px; font-size: 13px; }

.pe-ctx-audit { font-size: 11px; color: #64748b; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
.pe-ctx-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 2px; }

.pe-ctx-omi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pe-ctx-omi-grid > div { font-size: 13px; }
.pe-ctx-omi-grid strong { display: block; color: var(--brand-secondary, #0f172a); }

.pe-ctx-risk-row { display: grid; grid-template-columns: 90px 80px 1fr; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #f1f5f9; font-size: 12px; }
.pe-ctx-risk-row:last-child { border-bottom: none; }
.pe-ctx-risk-label { text-transform: capitalize; color: #475569; font-weight: 500; }
.pe-ctx-risk-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: #e2e8f0; color: #475569; text-align: center; }
.pe-ctx-risk-bassa, .pe-ctx-risk-low, .pe-ctx-risk-1 { background: #dcfce7; color: #166534; }
.pe-ctx-risk-media, .pe-ctx-risk-medium, .pe-ctx-risk-2 { background: #fef9c3; color: #854d0e; }
.pe-ctx-risk-alta, .pe-ctx-risk-high, .pe-ctx-risk-3 { background: #fee2e2; color: #991b1b; }
.pe-ctx-risk-molto-alta, .pe-ctx-risk-4 { background: #fecaca; color: #7f1d1d; }
.pe-ctx-risk-desc { color: #64748b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

.pe-ctx-fm { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pe-ctx-fm-sv img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 4px; display: block; }
.pe-ctx-fm-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.pe-ctx-fm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pe-ctx-fm-thumb { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: #475569; }
.pe-ctx-fm-thumb img { width: 100%; height: 80px; object-fit: cover; border-radius: 3px; border: 1px solid var(--pe-border, #e2e8f0); }
.pe-ctx-fm-thumb span { font-size: 10px; text-transform: capitalize; }

/* ===========================================================================
 * Modulo Assegnazioni v2 — Banner alerts (sticky topbar editor)
 * =========================================================================== */
.pe-alerts-banner { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.pe-alerts-banner:empty { display: none; }
.pe-alert-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 4px; background: #fef3c7; border-left: 4px solid #f59e0b; font-size: 12.5px; }
.pe-alert-row.pe-alert-criticita { background: #fee2e2; border-left-color: #dc2626; }
.pe-alert-row.pe-alert-urgenza { background: #ffedd5; border-left-color: #ea580c; }
.pe-alert-row.pe-alert-raccomandazione { background: #fef3c7; border-left-color: #f59e0b; }
.pe-alert-row.pe-alert-info { background: #dbeafe; border-left-color: #3b82f6; }
.pe-alert-sev { font-size: 10px; font-weight: 700; text-transform: uppercase; background: rgba(0,0,0,0.1); padding: 2px 8px; border-radius: 3px; letter-spacing: 0.5px; }
.pe-alert-msg { color: #0f172a; line-height: 1.4; }
.pe-alert-resolve { width: 24px; height: 24px; border-radius: 4px; background: rgba(255,255,255,0.7); border: 1px solid #cbd5e1; color: #166534; font-weight: 700; cursor: pointer; font-size: 14px; }
.pe-alert-resolve:hover { background: #bbf7d0; color: #14532d; }
.pe-alert-more { font-size: 11px; color: #64748b; padding: 4px 10px; font-style: italic; }

/* Modulo Assegnazioni v2 — Cards editor (perizia + sopralluogo) */
.pe-assignment-cards { margin: 6px 0 12px; }
.pe-assignment-cards:empty, .pe-assignment-cards[data-loading] { min-height: 0; }
.pe-assign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pe-assign-card { background: #fff; border: 1px solid var(--pe-border, #e2e8f0); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.pe-assign-card-disabled { background: #f8fafc; opacity: 0.7; }
.pe-assign-card-empty-state { border-style: dashed; background: #fafafa; }
.pe-assign-card-active { border-color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.pe-assign-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--brand-secondary, #0f172a); }
.pe-assign-icon { font-size: 16px; }
.pe-assign-card-title { flex: 1; }
.pe-assign-status-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; background: #e2e8f0; color: #475569; letter-spacing: 0.4px; }
.pe-assign-status-chip.pe-status-empty { background: #f1f5f9; color: #94a3b8; }
.pe-assign-status-chip.pe-status-pending { background: #fef3c7; color: #92400e; }
.pe-assign-status-chip.pe-status-assigned { background: #dbeafe; color: #1e40af; }
.pe-assign-status-chip.pe-status-in_progress { background: #fde68a; color: #92400e; }
.pe-assign-status-chip.pe-status-completed { background: #dcfce7; color: #166534; }
.pe-assign-status-chip.pe-status-released { background: #f1f5f9; color: #64748b; }
.pe-assign-status-chip.pe-status-cancelled { background: #fee2e2; color: #991b1b; }
.pe-assign-card-body { font-size: 12.5px; line-height: 1.5; color: #475569; }
.pe-assign-card-empty { color: #94a3b8; font-style: italic; }
.pe-assign-perito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-assign-origin-chip { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; background: #e2e8f0; color: #475569; }
.pe-assign-origin-chip.pe-origin-interno { background: #d1fae5; color: #065f46; }
.pe-assign-origin-chip.pe-origin-esterno { background: #fce7f3; color: #9d174d; }
.pe-assign-cost-chip { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 3px; background: #f1f5f9; color: #0f172a; }
.pe-assign-esito-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 2px; background: #f1f5f9; color: #475569; }
.pe-assign-esito-chip.pe-esito-positivo { background: #dcfce7; color: #166534; }
.pe-assign-esito-chip.pe-esito-negativo { background: #fee2e2; color: #991b1b; }
.pe-assign-esito-chip.pe-esito-sospeso { background: #fef3c7; color: #92400e; }
.pe-assign-esito-chip.pe-esito-rinviato { background: #dbeafe; color: #1e40af; }
.pe-assign-when { font-size: 11px; color: #64748b; margin-top: 4px; }
.pe-assign-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pe-assign-err { padding: 8px 12px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 4px; font-size: 12px; }
@media (max-width: 900px) { .pe-assign-grid { grid-template-columns: 1fr; } }