@import url("ui_card.css");
:root {
  /* stati UI */
  --ui-added:      #d8ffd8;
  --ui-available:  #f5f5f5;
  --ui-selected:   #c7e6ff;
  --ui-hover:      #e6e6e6;

  /* RPW = Readonly Preview Wash
     palette standard + lieve wash grigio */
  --ui-rpw-wash:      #78787814;
  --ui-rpw-border:    #5a5a5a38;
  --ui-rpw-note-bg:   #ffffffd6;
  --ui-rpw-note-text: #4f4f4f;

  /* window scena */
  --window-normal: #E9ECEF;/*#d5dadd;*/
  --window-hover:  #e6e6e6;

  /* UI sizing */
  --btn-size: 26px;     /* quadratino perfetto wow */
  --hmi-panel-bg: #f4f4f7;
  --hmi-panel-border: #aaa;
  --hmi-section-border: #cfcfcf;
  --hmi-section-gap: 6px;
  --hmi-title-width-default: 16ch;
  --hmi-collapse-pad-left: 16px;
  --hmi-header-gap: 8px;
}
/* =========================================================
   LAYOUT GENERALE
   ========================================================= */
body {
    margin: 0;
    display: flex;
    height: 100vh;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

/* Area 3D */
#left {
    flex: 1;
    background: #1a1a1a;
    position: relative;
}

/* Pannello destro */
#right {
    width: 250px;
    background: var(--hmi-panel-bg);
    padding: var(--hmi-section-gap);
    border-left: 1px solid var(--hmi-panel-border);
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Resizer laterale */
#side-resizer {
    width: 6px;
    height: 100vh;
    cursor: col-resize;
    background: transparent;
    user-select: none;
    z-index: 10000;
}

#side-resizer:hover {
    background: var(--ui-hover);/*#4d90fe;*/
}

/* =========================================================
   CANVAS
   ========================================================= */
canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* =========================================================
   TIPOGRAFIA / INPUT BASE
   ========================================================= */
h3 {
    margin: 8px 0 4px 0;
    font-size: 13px;
}

input,
select,
button {
    width: 100%;
    margin: 1px 0;
    padding: 2px 3px;
    font-size: 12px;
    box-sizing: border-box;
    line-height: 1.2;
}

/* =========================================================
   PULSANTI ICONA (quadratini perfetti)
   - i pulsanti principali (toolbar/layout-bar) devono usare class="btn"
   ========================================================= */
button.btn{
  width: var(--btn-size) !important;
  height: var(--btn-size) !important;
  min-width: var(--btn-size) !important;
  max-width: var(--btn-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: bold;
}

/* =========================================================
   ROLE BADGES (researcher / developer / runtimer)
   Sostituisce il vecchio badge hide/show
   ========================================================= */
.roleBadges{display:inline-flex;gap:6px}

.roleBadges .rb{
    width:30px;height:30px;
    margin:0;
    padding:0;
    border:1px solid #bfbfbf;
    border-radius:3px;
    background:#f3f3f3;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.18);
    color:#444;
    display:grid; place-items:center;
    cursor:pointer;
}
.roleBadges .rb[data-on="1"]{
    background:#e9e9e9;
    border-color:#8f8f8f;
}
.roleBadges .rb:focus-visible{outline:2px solid #7aa7ff;outline-offset:2px}

.roleBadges .ico{
    font-size:15px;
    line-height:1;
    transform: translateY(-.5px); /* micro-centering */
}

/* =========================================================
   UI BADGE BAR (sempre visibile, anche in runtimer)
   - contiene: role badges + badge utente + badge app
   ========================================================= */
.uiBadgeBar{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px;
  background: rgba(255,255,255,.75);
  border:1px solid #bfbfbf;
  border-radius:6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  user-select:none;
}

/* Dock container inside the RIGHT panel (badge bar takes its own space, no occlusion) */
.uiBadgeDock{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding:0 0 6px 0;
}
.uiBadgeBar.docked{ position: static; }
.uiBadgeBar.floating{ position: fixed; }
.uiBadgeBar.scene-left{ position:absolute; top:8px; left:8px; right:auto; z-index:9999; }


.uiBadgeBar .roleBadges{display:flex;flex-direction:column;gap:6px}

/* same look of role badges, but for extra buttons */
.uiBadgeBar .bb{
  width:30px;height:30px;
  margin:0;
  padding:0;
  border:1px solid #bfbfbf;
  border-radius:3px;
  background:#f3f3f3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 1px rgba(0,0,0,.18);
  color:#444;
  display:grid; place-items:center;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.uiBadgeBar .bb:focus-visible{outline:2px solid #7aa7ff;outline-offset:2px}

/* =========================================================
   STATO MODULI
   ========================================================= */
#moduleStatusPanel {
    margin-top: 4px;
}

/* Overlay (fuori dalla sidebar) */
#moduleStatusOverlay {
    position: fixed;
    top: 34px;
    right: 8px;
    width: 340px;
    max-height: 70vh;
    overflow: auto;
    background: rgba(244,244,247,.98);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    padding: 8px;
    z-index: 20000;
}

.mod-toggle {
    position: fixed;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.20);
    background: rgba(255,255,255,.75);
    font-weight: bold;
    line-height: 24px;
    cursor: pointer;
    z-index: 20001;
}

.mod-toggle:hover {
    background: rgba(255,255,255,.95);
}

.mod-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.mod-overlay-title {
    font-size: 12px;
    font-weight: bold;
    opacity: .85;
}

.mod-overlay-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.20);
    background: rgba(255,255,255,.60);
    cursor: pointer;
}

.mod-overlay-close:hover {
    background: rgba(255,255,255,.90);
}

.mod-row {
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.65);
    border-radius: 6px;
    padding: 4px 6px;
    margin: 4px 0;
    font-size: 11px;
}

.mod-left,
.mod-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mod-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 2px;
}

.mod-right {
    justify-content: flex-end;
}

.mod-id {
    font-weight: bold;
}

.mod-stage {
    opacity: .6;
    font-size: 10px;
}

.mod-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.15);
}

.mod-on { background: rgba(34,197,94,.18); }
.mod-ready { background: rgba(59,130,246,.12); }
.mod-off { background: rgba(239,68,68,.10); }

.mod-reason {
    opacity: .7;
    font-size: 10px;
}

.mod-prof {
    opacity: .65;
    font-size: 10px;
    margin-left: 6px;
    white-space: nowrap;
}

.mod-missing {
    grid-column: 1 / -1;
    opacity: .65;
    font-size: 10px;
    line-height: 1.2;
}

/* =========================================================
   PANNELLO PROPRIETÀ (legacy, mantenuto)
   ========================================================= */
.prop-row {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.prop-label {
    width: 90px;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}

.prop-value {
    flex: 1;
}

.prop-value select {
    padding: 1px 3px;
    font-size: 12px;
}

/* =========================================================
   TABELLE DATI (Window / Button / Layout)
   ========================================================= */
.window-data-container {
    width: 100%;
    height: 150px;
    min-height: 90px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #999;
    background: white;
    margin-top: 6px;
    box-sizing: border-box;
    scroll-padding-top: 24px;
    resize: vertical;
}

/* Tabella */
.windowDataTable {
    width: max-content;
    border-collapse: collapse;
    background: #fff;
    font-size: 11px;
}

/* Righe */
.windowDataTable tr {
    height: 24px;
}

/*
.windowDataTable tr:hover {
    background: #ffeaa7;
}
*/

/* Celle */
.windowDataTable th,
.windowDataTable td {
    border: 1px solid #000;
    padding: 3px 5px;
    white-space: nowrap;
    text-align: left;
}

/* Header sticky */
.windowDataTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f0f0f0;
    font-weight: bold;
}

/* Stati riga */
.data_added {
    background: var(--ui-added); /*#d8ffd8;*/
    cursor: pointer;
}

.data_available {
    background: var(--ui-available);/*#f5f5f5;*/
    cursor: pointer;
}

.selectedRow {
    background-color: var(--ui-selected) !important; /*#c7e6ff !important;*/
}
.rowPreview {
    background: var(--ui-hover);/*#e6e6e6;*/ /* grigio leggero */
}

.rowConflict {
    background: var(--ui-conflict, #ffd0d0);
}
/* =========================================================
   COLONNE COLLASSATE
   ========================================================= */
.col-hidden {
    display: none;
}

.collapsed-col {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    text-align: center !important;
    padding: 0 !important;
}

.collapse-icon {
    font-size: 12px;
    font-weight: bold;
    pointer-events: none;
}

.plusMark {
    color: #008000;
}

/* =========================================================
   SELEZIONE CELLA (Excel-like)
   ========================================================= */
.cellSelected {
    outline: 2px solid #4d90fe;
    outline-offset: -2px;
}

/* =========================================================
   CONTEXT MENU
   ========================================================= */
.contextMenu {
    position: fixed;
    background: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 4px;
    padding: 4px 0;
    min-width: 160px;
    font-size: 13px;
    font-family: system-ui, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    user-select: none;
    white-space: nowrap;
    z-index: 99999999;
}

.contextMenuItem {
    padding: 6px 14px;
    cursor: pointer;
}

.contextMenuItem:hover {
    background: var(--ui-hover);/*#e5e5e5;*/
}

/* =========================================================
   POPUP SELEZIONE CAMPO
   ========================================================= */
.fieldSelectorPopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #888;
    padding: 10px;
    z-index: 999999999;
    max-height: 300px;
    overflow-y: auto;
    min-width: 240px;
    font-family: system-ui, sans-serif;
}

.fieldSelectorItem {
    padding: 5px;
    cursor: pointer;
}

.fieldSelectorItem:hover {
    background: var(--ui-hover);/*#dde7ff;*/
}
editor: {
  selectionGlow: 0xA5BFD4,
  hover: var(--ui-hover);/*0xE6E6E6*/   // 🔥 stesso grigio della UI
}

/* =========================================================
   BARRA SALVATAGGIO LAYOUT
   ========================================================= */
/*.layout-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
}*/

.layout-bar{
  display:flex;
  align-items:center;
  gap:var(--hmi-header-gap);
  min-width:0;
}

/* Larghezza titolo calcolata dinamicamente (default: 16ch).
   Viene aggiornata da ui_shell service in base al titolo più lungo tra i moduli visibili. */
#right{ --hmi-title-width: var(--hmi-title-width-default); }

.layout-title{
  margin:0;
  white-space:nowrap;
  box-sizing:border-box;
  flex: 0 0 var(--hmi-title-width, var(--hmi-title-width-default));
  width: var(--hmi-title-width, var(--hmi-title-width-default));
  min-width:0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allinea i pulsanti a destra SOLO quando la layout-bar non ha input.
   Nota: button.btn ha margin:0 !important, quindi qui usiamo !important.
   Usare la classe "no-input" per evitare di rompere layout-bar con <input> (es. GLB). */
.layout-bar.no-input > button.btn:first-of-type{
  margin-left:auto !important;
}

.layout-bar input{
  flex: 1 1 auto;   /* PRENDE tutto lo spazio disponibile */
  min-width:0;
}

/* Wrapper per allineare gruppi di pulsanti a destra anche quando nella barra ci sono input/select */
.layout-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--hmi-header-gap);
}
.layout-actions > button.btn{ flex:0 0 auto; }

.upd-section-shell{
  display:grid;
  gap:6px;
  margin:8px 0 0 0;
}
.upd-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid #cfcfcf;
  background:#f7f7f9;
  box-sizing:border-box;
}
.upd-section-titlebox{
  min-width:0;
  display:grid;
  gap:2px;
}
.upd-section-title{
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.upd-section-desc{
  font-size:11px;
  line-height:1.25;
  color:#555;
  min-width:0;
}
.upd-section-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--hmi-header-gap);
  flex-wrap:wrap;
}
.upd-section-actions > button.btn{
  flex:0 0 auto;
}
.upd-section-body{
  min-width:0;
}

/* Select in layout-bar: deve comportarsi come input (prende spazio) */
.layout-bar select.layout-input{
  flex: 1 1 auto;
  min-width:0;
}


/* i pulsanti in layout-bar sono sempre "btn" -> quadratini */
.layout-bar button.btn{
  flex: 0 0 auto;
}

/* Pulsanti per azioni distruttive (icona/label centralizzata in ui_shell service) */
.btn-danger{
  background:#c33;
  color:#fff;
  border-color:#a22;
}
.btn-danger:hover{
  filter:brightness(0.95);
}


.contextRow {
  background: #2a6cff33;
}

/* =========================================================
   COLLAPSIBLE GROUPS (Right panel)
   - 1 wrapper div per gruppo
   - click sul titolo per collassare
   ========================================================= */
.ui-section {
  border-bottom: 1px solid var(--hmi-section-border);
  padding-bottom: var(--hmi-section-gap);
  margin-bottom: var(--hmi-section-gap);
}

/* Quando collassato: nasconde tutto tranne il primo figlio (header) */
.ui-section.is-collapsed > :not(:first-child) {
  display: none;
}

.ui-section > .layout-bar {
  min-width: 0;
}

/* Header collassabile unificato: il titolo è sempre .layout-title,
   ma manteniamo il fallback sul primo <h3> per sezioni legacy o iniettate. */
.ui-section > .layout-bar > .layout-title,
.ui-section > h3:first-child {
  margin: 8px 0 6px 0;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: var(--hmi-collapse-pad-left);
  padding-right: 34px;
  box-sizing: border-box;
  min-width: var(--hmi-title-width, var(--hmi-title-width-default));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-section > .layout-bar > .layout-title::before,
.ui-section > h3:first-child::before {
  content: "▾";
  position: absolute;
  left: 0;
  top: 0;
}
.ui-section.is-collapsed > .layout-bar > .layout-title::before,
.ui-section.is-collapsed > h3:first-child::before {
  content: "▸";
}


/* --- GLB / ROI (integrati in HMI) --- */
.glb-toolbar, .roi-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0;
}
.glb-toolbar input {
  flex: 1 1 auto;
  min-width: 160px;
}
.small-info {
  font-size: 12px;
  opacity: 0.85;
  margin: 4px 0;
}
.roi-sizes{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items:center;
  margin: 6px 0;
}
.roi-sizes label{
  font-size:12px;
  opacity:0.8;
}


/* =========================================================
   WORKBENCH (prototype modulo Finestre)
   ========================================================= */
.workbench{
  margin-top:8px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:6px;
  padding:6px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  max-height:var(--mw-ui-max-height, calc(100vh - 140px));
  overflow:hidden;
}
.workbench.is-dirty{
  box-shadow: inset 0 0 0 1px rgba(194,111,0,.22);
}
.mw-head,
.mw-header{
  display:flex;
  gap:6px;
  align-items:flex-start;
  justify-content:space-between;
}
.mw-title-wrap{ min-width:0; }
.mw-title{ font-size:12px; font-weight:bold; }
.mw-subtitle{ font-size:11px; color:#666; margin-top:2px; }
.mw-actions{ display:flex; gap:4px; flex:0 0 auto; }
.mw-header-tools{ display:flex; align-items:center; gap:8px; }
.mw-mini.btn{ width:var(--btn-size) !important; height:var(--btn-size) !important; min-width:var(--btn-size) !important; max-width:var(--btn-size) !important; }
.mw-pathbar{ margin-top:0; }
.mw-path{
  font-family: Consolas, monospace;
  font-size:11px;
  background:#fbfbfb;
}
.mw-metahead{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
  margin-bottom:6px;
}
.mw-main{
  --mw-side-width:320px;
  display:flex;
  align-items:stretch;
  gap:0;
  min-height:var(--mw-editor-min-height, 240px);
  max-height:var(--mw-editor-max-height, calc(100vh - 240px));
  overflow:hidden;
}
.mw-editor-col{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; min-height:var(--mw-editor-min-height, 240px); max-height:var(--mw-editor-max-height, calc(100vh - 240px)); overflow:hidden; }
.mw-editor-host{ flex:1 1 auto; min-height:var(--mw-editor-min-height, 240px); max-height:var(--mw-editor-max-height, calc(100vh - 240px)); overflow:hidden; }
.mw-editor{
  flex:1 1 auto;
  width:100%;
  min-height:360px;
  resize:vertical;
  font-family: Consolas, monospace;
  font-size:12px;
  line-height:1.4;
  white-space:pre;
  tab-size:2;
  padding:8px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fcfcfc;
}
.mw-editor-status{
  margin-top:0;
  font-size:11px;
  color:#555;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-splitter{
  flex:0 0 10px;
  width:10px;
  cursor:col-resize;
  user-select:none;
  position:relative;
  z-index:2;
  touch-action:none;
}
.mw-splitter::before{
  content:'';
  position:absolute;
  inset:0 2px;
  border-radius:6px;
  background:rgba(0,0,0,.06);
}
.mw-splitter:hover::before,
body.mw-is-resizing .mw-splitter::before{ background:#d6e0eb; }
body.mw-is-resizing{ cursor:col-resize !important; }
.mw-side-col{
  min-width:220px;
  width:var(--mw-side-width, 320px);
  flex:0 0 var(--mw-side-width, 320px);
  border-left:1px solid rgba(0,0,0,.08);
  padding-left:8px;
}
.mw-side-shell{
  display:flex;
  flex-direction:column;
  min-height:var(--mw-editor-min-height, 240px);
  max-height:var(--mw-editor-max-height, calc(100vh - 240px));
  height:100%;
  overflow:hidden;
}
.mw-tabs{
  display:flex;
  gap:4px;
  margin-bottom:6px;
}
.mw-tab{
  flex:1 1 0;
  width:auto;
  font-size:11px;
  padding:6px 6px;
  border:1px solid #c8c8c8;
  background:#f3f3f3;
  border-radius:4px;
  cursor:pointer;
}
.mw-tab.is-active{ background:#dfefff; border-color:#93b9e5; }
.mw-tab-panels{ flex:1 1 auto; min-height:0; overflow:hidden; }
.mw-panel{
  display:none;
  height:100%;
  min-height:360px;
  overflow:auto;
  padding-right:2px;
}
.mw-panel-help{
  font-size:11px;
  color:#617287;
  margin:0 0 6px 0;
  line-height:1.35;
}
.mw-panel.is-active{ display:block; }
.mw-empty{ font-size:11px; color:#777; padding:8px 4px; }
.mw-group{ margin:0 0 8px 0; }
.mw-group > summary,
.mw-tree-dir > summary{
  cursor:pointer;
  font-size:11px;
  font-weight:bold;
  margin-bottom:4px;
}
.mw-method-list{ display:flex; flex-direction:column; gap:3px; }
.mw-method-item,
.mw-tree-file{
  width:100%;
  text-align:left;
  padding:4px 6px;
  border:1px solid #ddd;
  border-radius:4px;
  background:#fafafa;
  font-size:11px;
  cursor:pointer;
}
.mw-method-item:hover,
.mw-tree-file:hover{ background:#f0f6ff; }
.mw-method-item.is-current,
.mw-tree-file.is-current,
.mw-flow-node.is-current rect{
  border-color:#7aa7ff;
  background:#e8f2ff;
}
.mw-method-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.mw-method-name{ font-family:Consolas, monospace; }
.mw-method-line{ color:#777; }
.mw-tree-root{ margin-bottom:8px; }
.mw-tree-label{ font-size:11px; font-weight:bold; margin-bottom:4px; }
.mw-tree-dir{ margin-left:8px; }
.mw-tree-file{ display:block; margin:3px 0 3px 8px; }
.mw-flow-wrap{ display:flex; flex-direction:column; gap:8px; }
.mw-flow-svg{ width:100%; height:auto; border:1px solid #e2e2e2; background:#fff; border-radius:6px; }
.mw-flow-edge{ fill:none; stroke:#888; stroke-width:1.25; marker-end:url(#mw-arrow); }
.mw-flow-edge-label{ font-size:8px; fill:#555; }
.mw-flow-node{ cursor:pointer; }
.mw-flow-node rect{ fill:#f6f6f6; stroke:#b9b9b9; stroke-width:1; }
.mw-flow-node.file rect{ fill:#eef6ff; stroke:#9ebfe8; }
.mw-flow-node.external rect{ fill:#f4f4f4; stroke:#c4c4c4; }
.mw-flow-node.resource rect{ fill:#eef9ee; stroke:#a8d0a8; }
.mw-flow-node text{ font-size:10px; fill:#333; }
.mw-flow-legend{ font-size:11px; color:#666; }

/* =========================================================
   WORKBENCH INLINE (solo per role=researcher)
   ========================================================= */
.mw-dock-slot{ margin-top:8px; }
.ui-card--workbench .mw-dock-slot{ margin-top:0; }
.ui-card--workbench .ui-card__header{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:4px; align-items:start; }
.ui-card--workbench .ui-card__titlebox{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:0 0 auto; }
.ui-card--workbench .ui-card__actions{ flex:0 0 auto; align-self:flex-start; }
.ui-card--workbench .ui-card__actions:empty{ display:none; }
.ui-card--workbench .mw-card-header-slot{ min-width:0; display:flex; flex-direction:column; gap:3px; align-self:start; grid-column:2; grid-row:1; justify-self:stretch; width:100%; }
.ui-card--workbench .mw-card-header-slot .mw-pathbar{ width:100%; margin-top:0; min-width:0; }
.ui-card--workbench .mw-card-header-slot .mw-pathbar .mw-path{ flex:1 1 auto; min-width:0; }
.ui-card--workbench .mw-card-header-slot .mw-editor-status{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-card.is-collapsed.ui-card--workbench .mw-card-header-slot{ display:none; }
.ui-card--cnc .ui-card__header{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:4px; align-items:start; }
.ui-card--cnc .ui-card__titlebox{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:0 0 auto; }
.ui-card--cnc .ui-card__actions{ flex:0 0 auto; align-self:flex-start; }
.ui-card--cnc .ui-card__actions:empty{ display:none; }
.ui-card--cnc .mw-card-header-slot{ min-width:0; display:flex; flex-direction:column; gap:3px; align-self:start; grid-column:2; grid-row:1; justify-self:stretch; width:100%; }
.ui-card--cnc .mw-card-header-slot .mw-pathbar{ width:100%; margin-top:0; min-width:0; }
.ui-card--cnc .mw-card-header-slot .mw-pathbar .mw-path{ flex:1 1 auto; min-width:0; }
.ui-card--cnc .mw-card-header-slot .mw-editor-status{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-card.is-collapsed.ui-card--cnc .mw-card-header-slot{ display:none; }

.ui-card--assembly-catalog .ui-card__header{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:10px; row-gap:4px; align-items:start; }
.ui-card--assembly-catalog .ui-card__titlebox{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:0 0 auto; }
.ui-card--assembly-catalog .assembly-card-header-slot{ min-width:0; display:flex; flex-direction:column; gap:3px; align-self:start; justify-self:stretch; width:100%; }
.ui-card--assembly-catalog .assembly-card-header-slot input,
.ui-card--assembly-catalog .assembly-card-header-slot select,
.ui-card--assembly-catalog .assembly-card-header-slot textarea{ width:100%; min-width:0; }
.ui-card--assembly-catalog .ui-card__actions{ flex:0 0 auto; align-self:start; justify-self:end; }
.ui-card--assembly-catalog .assembly-catalog-action-strip{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.ui-card--assembly-catalog .assembly-catalog-action-strip > #btnSaveAssemblyAs,
.ui-card--assembly-catalog .assembly-catalog-action-strip > [id="btnSaveAssemblyAs"]{ order:1; }
.ui-card--assembly-catalog .assembly-catalog-action-strip > #btnDeleteAssembly,
.ui-card--assembly-catalog .assembly-catalog-action-strip > [id="btnDeleteAssembly"]{ order:2; }
.ui-card--assembly-catalog .assembly-catalog-action-strip > [data-role="assembly-use-layout"]{ order:3; }
.ui-card--assembly-catalog .assembly-catalog-action-strip > [data-role="assembly-init-catalog"]{ order:4; }
.ui-card.is-collapsed.ui-card--assembly-catalog .assembly-card-header-slot{ display:none; }
.mw-section-toggle.is-active{
  background:#dfefff;
  border-color:#93b9e5;
}
.ui-card--cnc .mw-actions{ flex:0 0 auto; }
.ui-card--cnc .mw-pathbar{ display:flex; align-items:center; gap:4px; }
.ui-card--cnc .mw-path{ width:auto; }
.mw-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.mw-help{
  font-size:11px;
  color:#666;
  margin:4px 0 6px 0;
}
.mw-select,
.mw-search{
  min-height:24px;
}
.mw-check{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  white-space:nowrap;
}
.mw-method-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.mw-method-kind{
  font-size:10px;
  color:#666;
}
.mw-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  padding:1px 5px;
  border-radius:999px;
  font-size:10px;
  line-height:1.2;
}
.mw-badge.is-count{
  background:#eef3ff;
  color:#355b93;
  border:1px solid #c5d5f0;
}
.mw-badge.is-muted{
  background:#f0f0f0;
  color:#666;
  border:1px solid #ddd;
}
.mw-linklike{
  border:0;
  background:transparent;
  color:#255aa8;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.mw-struct-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mw-struct-card{
  border:1px solid #e0e0e0;
  border-radius:6px;
  padding:8px;
  background:#fafafa;
}
.mw-struct-title{
  font-size:11px;
  font-weight:bold;
  margin-bottom:6px;
}
.mw-struct-row{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:6px;
  margin:4px 0;
  align-items:start;
}
.mw-struct-key{
  font-size:11px;
  color:#666;
}
.mw-struct-value{
  font-size:11px;
  color:#222;
  word-break:break-word;
}
.mw-file-main{
  display:block;
}
.mw-file-sub{
  display:block;
  font-size:10px;
  color:#666;
  margin-top:2px;
}

.mw-toolbar{ display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.mw-select,
.mw-search{
  height:24px;
  border:1px solid #c9d8ea;
  border-radius:6px;
  background:#fff;
  font-size:11px;
  padding:0 8px;
  min-width:0;
}
.mw-select{ max-width:92px; }
.mw-search{ flex:1 1 120px; }
.mw-panel-body{ min-height:0; }
.mw-panel-help b{ color:#24374f; }
.mw-check{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#556; }
.mw-file-main{ display:block; }
.mw-file-sub{ display:block; font-size:10px; color:#6d7682; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:16px; padding:0 5px; border-radius:999px; font-size:10px; margin-left:6px; }
.mw-badge.is-count{ background:#e9f2ff; color:#456b98; }
.mw-badge.is-muted{ background:#eef0f4; color:#6a7480; }
.mw-struct-wrap{ display:flex; flex-direction:column; gap:8px; }
.mw-struct-card{ border:1px solid #d9e1eb; border-radius:8px; background:#fbfdff; padding:8px; }
.mw-struct-title{ font-size:11px; font-weight:bold; margin-bottom:6px; color:#355170; }
.mw-struct-row{ display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:start; margin:4px 0; }
.mw-struct-key{ font-size:10px; color:#617287; text-transform:uppercase; }
.mw-struct-value{ font-size:11px; color:#24374f; word-break:break-word; }
.mw-linklike{ border:0; background:none; color:#295ea8; padding:0; text-align:left; cursor:pointer; font:inherit; }

/* workbench R3 relations */
.mw-relations-wrap{ display:flex; flex-direction:column; gap:8px; }
.mw-rel-current-card{ background:#f9fbff; }
.mw-rel-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mw-rel-path{ font-size:11px; font-weight:bold; color:#24374f; word-break:break-word; }
.mw-rel-score{ font-size:10px; color:#617287; text-transform:uppercase; }
.mw-rel-card{ margin-top:8px; }
.mw-rel-link,
.mw-rel-item{ display:flex; flex-direction:column; gap:2px; width:100%; padding:6px 8px; border:1px solid #d6e0eb; border-radius:7px; background:#fff; margin-bottom:6px; text-align:left; }
.mw-rel-link{ cursor:pointer; }
.mw-rel-link:hover{ border-color:#9ebfe8; background:#f3f8ff; }
.mw-rel-item.is-missing{ border-style:dashed; background:#fffaf3; }
.mw-rel-main{ font-size:11px; color:#24374f; }
.mw-rel-sub{ font-size:10px; color:#617287; word-break:break-word; }
.mw-chip-list{ display:flex; flex-wrap:wrap; gap:6px; }
.mw-chip{ display:inline-flex; align-items:center; padding:3px 7px; border-radius:999px; font-size:10px; border:1px solid #d6dde8; background:#fff; color:#355170; }
.mw-chip.is-endpoint{ background:#eef6ff; border-color:#bad1ef; }
.mw-chip.is-event{ background:#eef9ee; border-color:#b9ddb9; }
.mw-chip.is-service{ background:#fff5ec; border-color:#ead1b2; }
.mw-help-inline{ font-size:11px; color:#617287; margin-bottom:8px; }

.mw-pathbar .mw-path{ flex:1 1 auto; }


.mw-diag-box{
  margin-top:6px;
  border:1px solid #d9e1eb;
  border-radius:8px;
  background:#fbfdff;
  padding:8px;
}
.mw-diag-box.is-neutral{ background:#fbfdff; }
.mw-diag-box.is-ok{ background:#f6fcf6; border-color:#cfe6cf; }
.mw-diag-box.is-warn{ background:#fffaf2; border-color:#ead5aa; }
.mw-diag-head{ font-size:11px; font-weight:bold; color:#355170; margin-bottom:4px; }
.mw-diag-body{ font-size:11px; color:#617287; }
.mw-diag-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.mw-diag-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  width:100%;
  text-align:left;
  border:1px solid #e2d5b0;
  border-radius:6px;
  background:#fff;
  padding:6px 8px;
  cursor:pointer;
}
.mw-diag-item:hover{ background:#fff7e8; border-color:#d8c08d; }
.mw-diag-line{ font-size:10px; color:#8a6a20; text-transform:uppercase; }
.mw-diag-text{ font-size:11px; color:#4a3b18; }

@media (max-width: 980px){
  .mw-header{
    align-items:stretch;
    flex-wrap:wrap;
  }
  .mw-header-tools{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .mw-main{
    flex-direction:column;
  }
  .mw-splitter{
    display:none;
  }
  .mw-side-col{
    width:auto;
    flex:1 1 auto;
    border-left:0;
    padding-left:0;
    padding-top:8px;
    border-top:1px solid rgba(0,0,0,.08);
  }
}

.buttons-cards-host{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ui-panel-empty,
.buttons-panel-empty,
.windows-panel-empty,
.glb-panel-empty{
  font-weight:600;
  margin-bottom:6px;
}

.ui-panel-hint,
.buttons-panel-hint,
.windows-panel-hint,
.glb-panel-hint{
  font-size:12px;
  line-height:1.25;
  color:#555;
}

/* Keep button module body text local, but avoid card typography drift. */
.buttons-main-title,
.buttons-panel-title,
.windows-panel-title,
.glb-panel-title {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}


.buttons-panel-subtitle,
.windows-panel-subtitle,
.glb-panel-subtitle{
  margin: 0 0 8px 0;
  font-size: 12px;
  line-height: 1.25;
  color: #555;
}

.buttons-empty-title,
.windows-empty-title,
.glb-empty-title {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: #333;
}

.buttons-empty-subtitle,
.windows-empty-subtitle,
.glb-empty-subtitle {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #555;
}

.buttons-secondary-host{
  min-width: 0;
}



  25%{ transform:translateX(-2px); }
  50%{ transform:translateX(2px); }
  75%{ transform:translateX(-1px); }
  100%{ transform:translateX(0); }
}


/* =========================================================
   BADGE BAR MODULE UI
   - stessi quadratini dei badge esistenti
   - i badge UI vengono accodati sotto ruolo/utente/app
   ========================================================= */
.uiBadgeBar{
  gap:6px;
}
.uiBadgeBar__group{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.uiBadgeBar__group--modules{
  margin-top:2px;
}
.uiBadgeBar .bb-group-grid{
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(5, 30px);
  grid-auto-columns:30px;
  gap:6px;
}
.uiBadgeBar .bb.bb-module{
  width:30px;
  height:30px;
  min-width:30px;
  max-width:30px;
  border-radius:6px;
  border-width:1px;
  border-style:solid;
  border-color:var(--badge-accent, #bfbfbf);
  background:var(--badge-accent-soft, #f3f3f3);
  color:var(--badge-accent, #444);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 1px 1px rgba(0,0,0,.18);
  font-size:11px;
  font-weight:700;
  letter-spacing:-0.15px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease, opacity .12s ease;
}
.uiBadgeBar .bb.bb-module[data-on="1"],
.uiBadgeBar .bb.bb-module.is-on{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.50), 0 0 0 1px color-mix(in srgb, var(--badge-accent, #8d99a6) 55%, white 45%), 0 1px 2px rgba(0,0,0,.18);
}
.uiBadgeBar .bb.bb-module[data-on="0"],
.uiBadgeBar .bb.bb-module.is-off{
  opacity:.78;
}
.uiBadgeBar .bb.bb-module:hover{
  transform:translateY(-1px);
  filter:brightness(0.98);
}
.uiBadgeBar .bb.bb-module.is-error{
  box-shadow:0 0 0 1px rgba(185, 60, 60, .35), 0 1px 2px rgba(0,0,0,.18);
}
.uiBadgeBar .bb.bb-module.is-busy{
  cursor:progress;
  opacity:.92;
}
.uiBadgeBar .bb.bb-module.is-blocked{
  animation:hmiBadgeBlocked .42s ease;
}
@keyframes hmiBadgeBlocked{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-2px); }
  50%{ transform:translateX(2px); }
  75%{ transform:translateX(-1px); }
  100%{ transform:translateX(0); }
}


.uiBadgeBar .bb-group-label{
  width:100%;
  margin:2px 0 1px;
  padding:0 2px;
  font-size:9px;
  line-height:1;
  font-weight:600;
  letter-spacing:.04em;
  text-align:center;
  color:#7a7a7a;
  opacity:.72;
  background:transparent;
  border:0;
  box-shadow:none;
  user-select:none;
}

.mw-diag-card{ margin:6px 0 8px 0; }
.mw-diag-card .ui-card__content{ padding:8px; }
.mw-diag-card .mw-diag-box{ margin:0; max-height:220px; overflow-y:auto; overflow-x:hidden; }
.mw-diag-card .mw-diag-list{ margin-top:6px; }

.glb-part-callout-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:35;
  overflow:hidden;
}
.glb-part-callout-svg{
  position:absolute;
  inset:0;
  overflow:visible;
}
.glb-part-callout-path{
  fill:none;
  stroke:#ff9f1c;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.9));
}
.glb-part-callout-arrow{
  fill:#ff9f1c;
}
.glb-part-callout-label{
  position:absolute;
  left:0;
  top:0;
  min-height:28px;
  padding:5px 10px;
  border-radius:8px;
  border:1px solid rgba(124, 74, 9, .35);
  background:rgba(255, 248, 235, .96);
  color:#5d3b00;
  font-size:12px;
  font-weight:600;
  line-height:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  text-align:left;
}

.cnc .mw-import.btn{ width:var(--btn-size) !important; min-width:var(--btn-size) !important; max-width:var(--btn-size) !important; height:var(--btn-size) !important; padding:0 !important; font-size:13px !important; }


/* CNC header: keep title box compact so file path uses the row like workbench */
.ui-card--cnc .ui-card__header{
  grid-template-columns: 160px minmax(0,1fr);
}
.ui-card--cnc .ui-card__titlebox{
  min-width: 0;
  max-width: 160px;
}
.ui-card--cnc .mw-card-header-slot{
  min-width:0;
  width:100%;
}
.ui-card--cnc .mw-pathbar{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
}
.ui-card--cnc .mw-path{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0;
}
.ui-card--cnc .mw-actions{
  flex:0 0 auto;
  margin-left:0;
}


/* CNC 4C.2_fix1 — compact File/Relations tabs */
.mw-group--folder{
  margin:0 0 6px 0;
  border:1px solid #d9e1eb;
  border-radius:8px;
  background:#fbfdff;
}
.mw-group--folder > summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  margin:0;
}
.mw-group--folder > summary::-webkit-details-marker{ display:none; }
.mw-folder-summary-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.mw-folder-title{
  font-size:11px;
  font-weight:700;
  color:#24374f;
  line-height:1.2;
}
.mw-folder-sub{
  font-size:10px;
  color:#6b7b8f;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-folder-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 6px 6px 6px;
}
.mw-tree-file--compact{
  margin:0 !important;
  padding:5px 7px;
  border-radius:6px;
  background:#fff;
}
.mw-tree-file--compact .mw-file-row-head{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.mw-tree-file--compact .mw-file-type{
  flex:0 0 auto;
  min-width:28px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  border:1px solid #c8d6ea;
  background:#eef4ff;
  color:#355b93;
  font-size:9px;
  line-height:14px;
  text-align:center;
  font-weight:700;
}
.mw-tree-file--compact .mw-file-name{
  min-width:0;
  flex:1 1 auto;
  font-size:11px;
  line-height:1.25;
  color:#22364d;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-tree-file--compact .mw-file-flag{
  flex:0 0 auto;
  padding:0 5px;
  border-radius:999px;
  background:#e8f2ff;
  color:#365b8d;
  font-size:9px;
  line-height:16px;
}
.mw-tree-file--compact .mw-file-row-sub{
  display:block;
  margin-top:1px;
  padding-left:34px;
  font-size:10px;
  color:#738398;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-rel-header--compact{
  margin-bottom:2px;
  align-items:center;
}
.mw-rel-current-main{
  min-width:0;
  font-size:12px;
  font-weight:700;
  color:#24374f;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-rel-current-sub{
  font-size:10px;
  color:#6b7b8f;
  margin-bottom:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mw-rel-groups{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mw-rel-group{
  border-top:1px solid #e7edf5;
  padding-top:8px;
}
.mw-rel-group:first-child{
  border-top:0;
  padding-top:0;
}
.mw-rel-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.mw-rel-group-title{
  font-size:11px;
  font-weight:700;
  color:#355170;
}
.mw-rel-group-list .mw-tree-file--compact{
  background:#fff;
}
.ui-card--cnc .mw-panel[data-panel="folders"] .mw-panel-help,
.ui-card--cnc .mw-panel[data-panel="relations"] .mw-panel-help{
  margin-bottom:8px;
}

.mw-rel-row.is-muted{
  opacity:.86;
  border-style:dashed;
}
.mw-panel[data-panel="relations"] .mw-toolbar{
  margin-bottom:8px;
}

/* =========================================================
   RPW — READONLY PREVIEW WASH
   - preview sì
   - edit no
   - stato standard preservato
   ========================================================= */

.ui-rpw-panel {
  position: relative;
}

.ui-rpw-note {
  margin: 6px 0 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--ui-rpw-border);
  border-radius: 8px;
  background: var(--ui-rpw-note-bg);
  color: var(--ui-rpw-note-text);
  font-size: 12px;
  line-height: 1.35;
}

.ui-rpw-cell {
  /* wash lieve sopra lo stato standard, senza sostituirlo */
  box-shadow: inset 0 0 0 9999px var(--ui-rpw-wash);
  color: inherit;
}

.ui-rpw-blocked {
  cursor: default;
}

.ui-rpw-blocked td,
.ui-rpw-blocked th {
  cursor: default;
}