:root{
  --bg:#0e0b14; --card:#191425; --panel:#151024; --txt:#e9e6f5; --muted:#a39bbf; --line:#2a2340;
  --vio1:#7c4dff; --vio2:#b388ff; --vio3:#6200ea;
  --ok:#00e676; --warn:#ffb300; --bad:#ff5252;
  --blue1:#4fc3f7; --blue2:#0288d1; --green1:#a5d6a7; --green2:#2e7d32;
}

.cards-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.card { border:1px solid #e5e7eb; border-radius:12px; padding:12px; display:grid; gap:10px; background:#fff; }
.card-header { font-weight:60; color:#111827; }
.card-body { display:flex; align-items:center; gap:16px; justify-content:space-between; }
.led { width:14px; height:14px; border-radius:50%; }
.led-on  { background:#22c55e; box-shadow:0 0 8px #22c55e; }
.led-off { background:#ef4444; box-shadow:0 0 8px #ef4444; }
.mini { border-collapse:collapse; }
.mini th, .mini td { border:1px solid #e5e7eb; padding:6px 8px; }
.gauge-plc { font-weight:600; color:#374151; }
.param-input input[type=number] { width:120px; }
.toggle { display:flex; gap:6px; align-items:center; }
.settings {
  display: flex; gap: 10px; align-items: center; margin: 12px 0 18px;
}
.settings select { padding: 6px 10px; border:1px solid #e5e7eb; border-radius:8px; }
.settings button { padding: 6px 10px; border:0; background:#111827; color:#fff; border-radius:8px; }
.active-conf { margin-top: 8px; color:#374151; }


/* Tema scuro: colori di base */
html, body {
  background: #0b0f14; /* scuro profondo */
  color: #e5e7eb;      /* testo chiaro */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Cards in dark theme */
.card {
  background: #111827;                /* grigio molto scuro */
  border: 1px solid #1f2937;          /* bordo scuro */
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
  color: #f3f4f6;                     /* testo chiaro dentro le card */
  height: auto;
}

.card-header {
  font-weight: 60;
  color: #f9fafb;                     /* titolo ancora più chiaro per contrasto */
}

.card-body {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  color: #e5e7eb;                     /* testo del corpo chiaro */
}

/* Piccole tabelle minimal (INT non-gauge) */
.mini {
  border-collapse: collapse;
}
.mini th, .mini td {
  border: 1px solid #374151;          /* bordo scuro medio */
  padding: 6px 8px;
  color: #e5e7eb;                     /* testo chiaro */
}

/* Placeholder gauge (fino a tema 5) */
.gauge-plc {
  font-weight: 600;
  color: #e5e7eb;
}

/* Input PARAM numerici */
.param-input input[type=number] {
  width: 90%;
  background: #0f172a;                /* blu scuro */
  color: #e5e7eb;                     /* testo chiaro */
  border: 1px solid #334155;          /* bordo scuro */
  border-radius: 8px;
  padding: 6px 8px;
}

/* Toggle (PARAM BOOL) */
.toggle {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #e5e7eb;
}
.toggle input[type=checkbox] {
  accent-color: #16a34a;              /* verde acceso per dark theme */
}

/* LED moderni */
.led {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 2px #374151 inset;
}
.led-on  { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.led-off { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

/* Griglia cards */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Sezione Settings (tema scuro) */
.settings {
  display: flex; gap: 10px; align-items: center; margin: 12px 0 18px;
  color: #e5e7eb;
}
.settings select {
  padding: 6px 10px; border: 1px solid #334155; border-radius: 8px;
  background: #0f172a; color: #e5e7eb;
}
.settings button {
  padding: 6px 10px; border: 0; background: #1f2937; color: #f3f4f6; border-radius: 8px;
}
.active-conf { margin-top: 8px; color: #e5e7eb; }

/* Status dot sul dark theme */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.status-dot.green { background: #16a34a; }
.status-dot.gray  { background: #6b7280; }
.status-dot.red   { background: #ef4444; }


h2, h3 {
  color: #f9fafb;     /* più chiaro dei testi */
}


/* Label scura, testo chiaro */
.label {
  color: #e5e7eb;
  font-size: 14px;
}

/* Wrapper per select con caret custom */
.select-wrap {
  position: relative;
  display: inline-block;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 8px 36px 8px 12px;
  background: #0f172a;            /* blu scuro */
  color: #e5e7eb;                 /* testo chiaro */
  border: 1px solid #334155;      /* bordo scuro */
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  min-width: 260px;
  outline: none;
}
.select:focus {
  border-color: #475569;          /* leggero focus */
  box-shadow: 0 0 0 2px rgba(148,163,184,0.15);
}

/* Chevron del select */
.select-wrap .chev {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #94a3b8;                 /* grigio ardesia */
}

/* Pulsante 'Carica' coerente col dark */
.btn {
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #1f2937;            /* grigio scuro */
  color: #f3f4f6;
  font-weight: 600;
}
.btn:hover { background: #111827; }
.btn:active { transform: translateY(1px); }

.headbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; margin-bottom:8px; border-bottom:1px solid #1f2937;
}
.btn-icon {
  padding: 2px 5px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  font-size: 24px;
}
.mode-dropdown { position: relative; display: inline-block; }
.dropdown {
  position: absolute; right: 0; margin-top: 6px; min-width: 200px;
  background: #0b1220; border: 1px solid #1f2937; border-radius: 10px; padding: 10px;
  display: none; /* hidden di default */
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dropdown .opt { display:flex; gap:8px; align-items:center; color:#e5e7eb; margin-bottom:6px; }
.dropdown .btn { width: 100%; margin-top: 6px; }

.login { max-width:360px; margin:10vh auto; padding:18px; border:0px solid #1f2937; border-radius:12px; background:#111827; }
.login h1 { margin:0 0 12px; font-size:18px; color:#f9fafb; }
.login p { color:#cbd5e1; font-size:14px; }
.login label { display:block; margin-top:10px; font-size:14px; color:#e5e7eb; }
.login input { width:100%; padding:10px; margin-top:6px; border:1px solid #334155; border-radius:8px; background:#0f172a; color:#e5e7eb; }
.login button { margin-top:12px; width:100%; padding:10px; border:0; background:#1f2937; color:#f3f4f6; border-radius:8px; font-weight:600; }
.login .err { color:#ef4444; margin-top:10px; }
.login .back { display:inline-block; margin-top:10px; color:#93c5fd; text-decoration:none; }

.logo{display:flex;align-items:center;gap:10px}
.logo svg{width:75px;height:60px;fill:var(--vio1)}

*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b0913,#130f1f);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
header{background:linear-gradient(90deg,#1a1330,#241948);border-bottom:1px solid var(--line);padding:10px 10px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}

h1{font-size:26px;margin:0; font-weight: 50; color:#dacfff}
h3{font-size:32px;text-align: center;margin:0;color:#dacfff}
h4{font-size:18px;margin:0; color:#dacfff;font-weight: 400}
.headbar{margin-left:auto;display:flex;gap:12px}
.iconbtn{background:transparent;border:none;color:#cfc5ff;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer}
.iconbtn:hover{background:#21193f}
.iconbtn.active{background:#2a1f52;color:#fff}
.iconbtn svg{width:18px;height:18px;fill:currentColor}
.status{margin-left:8px;color:var(--muted)}
.errorbar{display:none;background:#3b1b1b;color:#ffd0d0;border-bottom:1px solid #5e2a2a;padding:8px 14px}
.errorbar.show{display:block}
main{padding:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:16px; padding: 12px;}
.panel h2{margin:4px;padding:10px 5px;border-bottom:1px solid var(--line);color:#d9ccff;font-size:14px}
.panel .content{padding:6px; display: grid; gap: 15px;}
.grid{display:flex;flex-wrap:wrap;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;width:280px;position:relative}
.card.error{border-color:var(--bad)}
.overlay{position:absolute;inset:0;border-radius:12px;pointer-events:none}
.overlay.status1{background:rgba(180,180,200,.5)}
.overlay.status2{background:rgba(255,193,7,.35)}
.title{font-weight:700;margin-bottom:6px;color:#efe8ff}
.muted{color:var(--muted)}
.gauge-svg{width:260px;height:130px}
.bar{height:16px;background:#2a2340;border-radius:8px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--vio1),var(--vio2))}
.level-vert{width:44px;height:160px;border-radius:6px;background:#1b1530;border:1px solid var(--line);position:relative;overflow:hidden}
.level-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(var(--blue1),var(--blue2))}
.tank{width:84px;height:180px;border:2px solid #9a8ccf;border-radius:12px 12px 6px 6px;position:relative;background:#160f29;overflow:hidden}
.tank-fill{position:absolute;bottom:0;width:100%;background:linear-gradient(var(--green1),var(--green2))}
.value-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.num{font-weight:800}
.unit{color:#c7bfff}
.footerline{display:flex;gap:8px;align-items:center;color:var(--muted);padding-top:8px;border-top:1px dashed var(--line)}
.status-dot{width:8px;height:8px;border-radius:50%}
.dot-ok{background:var(--ok)} .dot-off{background:var(--bad)} .dot-re{background:var(--warn)}

/* Settings: param rows */
.param-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;position:relative}
.param-row.error{border-color:var(--bad)}
.param-label{font-weight:600}
.param-desc{font-size:12px;color:var(--muted)}
.switch{position:relative;width:48px;height:26px;background:#392b63;border-radius:13px;border:1px solid #584a85;cursor:pointer}
.switch input{display:none}
.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfc5ff;transition:left .18s ease}
.switch.on{background:#4b2fbf}
.switch.on .switch-knob{left:25px;background:#fff}
.param-input{background:#231941;color:#fff;border:1px solid #4b3c7a;border-radius:8px;padding:6px 10px;width:90%}
.param-input:focus{outline:none;border-color:#7c4dff;box-shadow:0 0 0 2px rgba(124,77,255,.2)}

/* Alarms table */
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
th{color:#d9ccff;background:#1a1330}
.alarm-row.error{outline:1px solid var(--bad)}
.alarm-active{color:#ffea00}

/* Tabs */
.tab{display:none}
.tab.active{display:block}

/* Responsive */
@media (max-width:720px){ .card{width:100%} .param-input{width:95%} }

/* Termometro */
.thermo { width: 140px; height: 160px; }

/* Igrometro */
.hygro  { width: 220px; height: 120px; }

/* Sfera pressione */
.pressure { width: 120px; height: 120px; }

/* Allineamento nel corpo card */
.card-body .data-block svg { display:block; }

/* ===== Layout verticale: IST (top) / SOLL (bottom) ===== */
.card-body.vertical {
  display: grid;
  grid-template-rows: 1fr 1px 1fr; /* data, separator, param */
  gap: 1px;
  align-items: bottom;
}

.center-sep {
  height: 1px;
  background: #1f2937; /* linea separatrice scura */
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ===== TEXT (IST grande) ===== */
.text-ist {
  font-size: 22px;
  font-weight: 600;
  color: #f3f4f6;
  letter-spacing: 0.2px;
}

/* ===== LED più piccoli (≈¼) ===== */
.led {
  width: 7px;           /* prima era 14px */
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #374151 inset;
}
.led-on  { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.led-off { background:#ef4444; box-shadow:0 0 6px #ef4444; }

/* ===== Slider BOOL (PARAM) ===== */
/* Structure: <label class="slider"><input><span class="track"></span><span class="thumb"></span></label> */
.slider {
  --w: 44px; --h: 24px; --r: 12px;
  position: relative; display: inline-block; width: var(--w); height: var(--h); padding: 2px;
}
.slider input { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.slider .track {
  position: absolute; inset: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: var(--r);
  transition: background 200ms ease, border-color 200ms ease;
}
.slider .thumb {
  position: absolute;
  width: calc(var(--h) - 6px);
  height: calc(var(--h) - 6px);
  top: 3px; left: 3px;
  border-radius: 999px;
  background: #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: left 200ms ease, background 200ms ease;
}

.slider input:checked ~ .track { background: #1f2937; border-color: #22c55e; }
.slider input:checked ~ .thumb { left: calc(var(--w) - var(--h) + 3px); background: #22c55e; }

/* Griglia più densa e card più compatte */
.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

/* Niente larghezza fissa: le card si adattano alla colonna */
.card {
  width: auto !important;
  max-width: 320px;
  padding: 10px;
}

/* Layout verticale: IST (top) / SOLL (bottom) — stop al flex orizzontale */
.card-body {
  display: grid !important;
  grid-template-rows: 1fr 1px 1fr;
  align-items: bottom;
  gap: 5px;
  justify-content: initial !important; /* annulla space-between legacy */
}

/* LED piccoli ma leggibili (regolabile) */
.led {
  width: 8px !important;   /* compromesso */
  height: 8px !important;
  box-shadow: 0 0 0 1px #374151 inset;
}

/* Slider BOOL (param) già in uso: niente impatto, solo assicurare dimensioni */
.slider { --w: 44px; --h: 24px; }
.slider .thumb { width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); }

/* === OVERRIDES (layout verticale pulito) === */

/* 1) Card grid più densa e card compatte */
.cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 10px !important; }
.card { width: auto !important; max-width: 320px; max-height: 240px; padding: 10px; }

.card-body.vertical {
  display: grid !important;
  grid-template-rows: auto 1px auto;  /* IST (auto), separatore, SOLL (auto) */
  gap: 1px;
}
/* 4) LED piccoli ma non invisibili */
.led { width: 12px !important; height: 12px !important; box-shadow: 0 0 0 2px #374151 inset; }
.led-on  { background:#22c55e; box-shadow:0 0 6px #22c55e; }
.led-off { background:#4a4a4a; box-shadow:0 0 6px #4a4a4a; }

/* 7) Valore IST (text) grande, senza aggiungere altezza superflua */
.text-ist { font-size: 22px; font-weight: 600; color: #f3f4f6; letter-spacing: .3px; }

.data-block {
  height: auto; padding: 2px; margin-bottom: 6px;
  display: grid; align-items: end; gap: 1px;
}

.card-header { line-height: 1.25; margin-bottom: 4px; min-height: 40px;}
.text-ist     { line-height: 1.5;}
.param-block  { align-items: center !important; margin-top: 6px; padding: 2px;}

/* RIGA: input + unit (sempre su una sola riga) */
.param-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;         /* evita che l'unità vada a capo */
  white-space: nowrap;       /* evita a capo anche in caso di spazi */
}

/* Input numerico: dimensione e stile coerenti */
.param-input {
  width: 120px;
  background: #0f172a;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 6px 8px;
}

/* Unità sempre accanto, mai sotto */
.unit {
  display: inline-block;
  margin-left: 2px;          /* micro margine; puoi portarlo a 6px se preferisci */
  color: #9ca3af;
  font-size: 12px;
  line-height: 1;            /* compatta: evita che sembrino disallineate */
}

.text-bottom { align-items: end !important; }
.text-center { align-items: center !important; }

.dp-chart[data-widget="hbar"] { width: 95%; height: 65px; margin: 0px; padding: 0px; } /* più spazio per scala e label */
.dp-chart[data-widget="vbar"] { width: 160px; height: 180px; }

.dp-chart[data-widget="gauge"] { height: 200px !important; }
.dp-chart[data-widget="tank"]  { height: 180px !important; }


/* Tabella Configuration (pivot) */
#configuration-table {
  width: 100%;
  border-collapse: collapse;
}
#configuration-table th {
  color: #e5e7eb;
  background: #1a1330;
  border-bottom: 1px solid #2a2340;
  padding: 6px 8px;
  font-weight: 600;
}
#configuration-table td {
  border-bottom: 1px dashed #2a2340;
  padding: 4px 6px;
}

/* Chip "Attiva" e bottone "Carica" */
.chip.chip-active {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #22c55e;
  font-size: 12px;
  font-weight: 600;
}
.btn.btn-load-conf {
  padding: 6px 10px;
  border: 0;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: 8px;
  cursor: pointer;
}
.btn.btn-load-conf:hover { background: var(--vio1); }

/* === Tabella Configuration (pivot) === */
.settings-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.settings-table th, .settings-table td {
  border-bottom: 1px solid #2a2340;
  padding: 6px 8px;
}
.settings-table th {
  color: #e5e7eb;
  background: #1a1330;
  font-weight: 600;
}
.settings-table .th-top { line-height: 1.25; }
.settings-table .th-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.settings-table .th-sub .code {
  font-size: 11px; color: #a39bbf; background: #0f172a; border: 1px solid #334155;
  border-radius: 6px; padding: 2px 6px;
}
.settings-table .th-sub .unit-chip {
  font-size: 11px; color: #93c5fd; background: #0b1220; border: 1px solid #334155;
  border-radius: 6px; padding: 2px 6px;
}
.settings-table .cell-preset { display: flex; align-items: baseline; gap: 6px; }
.settings-table .cell-preset .val { color: #f3f4f6; }
.settings-table .cell-preset .unit { color: #93c5fd; font-size: 12px; }

/* Chip "Attiva" + bottone Carica */
.chip.chip-active {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  background: #0f172a; border: 1px solid #334155;
  color: #22c55e; font-size: 12px; font-weight: 600;
}
.btn.btn-load-conf { padding: 6px 10px; border: 0; background: #1f2937; color: #f3f4f6; border-radius: 8px; cursor: pointer; }
.btn.btn-load-conf:hover { background: #111827; }

.card .col-param { width: 50%; }
.card .col-unit  { width: 12rem; }
.card .col-input { width: auto; }
.card .lbl { color: #f3f4f6; font-weight: 600; }
.card .sub { color: #a39bbf; font-size: 12px; margin-top: 2px; }
.card .param-line { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.card .param-input { width: 160px; background: #0f172a; color: #e5e7eb; border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; }
.card .unit { color: #93c5fd; font-size: 12px; }

/* Responsivity: su schermi stretti, la tabella diventa "stacked" */
@media (max-width: 720px) {
  .settings-table .col-name { width: 160px; }
  .card .col-param, .card .col-unit, .card .col-input { width: 100%; display: block; }
  .card td { display: block; padding: 6px 8px; }
  .card tr { border-bottom: 1px solid #1f2937; margin-bottom: 10px; display: block; }
}


/* === Schema table (editor) === */
.schema-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.schema-table th, .schema-table td { border-bottom:1px solid #2a2340; padding:6px 8px; }
.schema-table th { background:#1a1330; color:#e5e7eb; font-weight:600; }
.schema-table .btn-sm { padding:4px 8px; font-size:12px; border-radius:6px; }

/* === Datapoints read-only table === */
.dpm-table { width:100%; border-collapse:collapse; table-layout:auto; }
.dpm-table th, .dpm-table td { border-bottom:1px dotted #2a2340; padding:4px 6px; }
.dpm-table th { background:#1a1330; color:#e5e7eb; }

/* === Segmented selector (radio/checkbox stile Node-RED) === */
.segmented {
  display:inline-flex; border:1px solid #334155; border-radius:10px; overflow:hidden;
  background:#0f172a;
}
.segmented input { display:none; }
.segmented label {
  padding:6px 10px; font-size:13px; line-height:1;
  color:#e5e7eb; cursor:pointer; user-select:none;
  border-right:1px solid #334155; background:#0f172a;
}
.segmented label:last-child { border-right:none; }
.segmented input:checked + label {
  background:#1f2937; color:#93c5fd;  /* selezionato */
  box-shadow: inset 0 0 0 1px #334155;
}
/* Variante multi-scelta: usa checkbox al posto di radio */
.segmented.multiselect input:checked + label {
  background:#1f2937; color:#22c55e;
}
/* Stato disabled */
.segmented input:disabled + label {
  color:#6b7280; cursor:not-allowed; background:#0b1220;
}
/* Responsivo: “stack” su schermi piccoli */
@media (max-width: 720px) {
  .segmented { display:flex; flex-wrap:wrap; }
  .segmented label { border-right:none; border-bottom:1px solid #334155; }
  .segmented label:last-child { border-bottom:none; }
}


/* ===== WRAPPER: abilita scroll orizzontale (non sborda su 2K) ===== */
.table-wrap {
  overflow-x: auto;              /* scroll orizzontale */
  overflow-y: hidden;
  /* altezza massima facoltativa, se vuoi scroll verticale interno */
  /* max-height: 72vh; */
  border: 1px solid #2a2340;
  border-radius: 10px;
}

/* ===== TABELE CRUD GENERICHE ===== */
.settings-table, .dpm-table {
  width: max-content;            /* larghezza cresce con le colonne */
  border-collapse: separate;     /* meglio rispetto a collapse con sticky */
  border-spacing: 0;
  table-layout: fixed;           /* celle rispettano la larghezza */
  white-space: nowrap;           /* evita a capo → niente overlap */
}

.settings-table th, .settings-table td,
.dpm-table th, .dpm-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #2a2340;
  vertical-align: middle;
}

/* Header visibile su scroll verticale (opzionale) */
.settings-table thead th, .dpm-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #1a1330;
  color: #e5e7eb;
  white-space: normal;              /* <-- override del nowrap ereditato dalla tabella */
  overflow-wrap: anywhere;          /* forza il wrapping anche su parole lunghe/senza spazi */
  word-break: normal;               /* evita spezzature “brutte” se non necessarie */
  hyphens: auto;                    /* abilita trattini automatici se il browser supporta */
  line-height: 1.25;                /* migliora leggibilità su due righe */

}

/* Campi dinamici (min/max/default/value/ts/status/error/msg) */
.col-min, .col-max, .col-def, .col-val, .col-ts, .col-status, .col-error, .col-msg {
  width: 12rem;
}

/* Azione a destra */
.col-action  { width: 12rem; }

/* ===== Evita che editor/esempi “escano” dalle celle ===== */
.settings-table td, .dpm-table td {
  min-width: 0;                  /* consente al contenuto di comprimersi */
}
.settings-table td .param-input,
.settings-table td textarea.param-input {
  width: 100%;                   /* si adatta alla cella */
  max-width: 100%;
  box-sizing: border-box;
}

/* Slider BOOL dentro cella */
.settings-table td .slider {
  transform: scale(.95);         /* compatta un filo */
}

/* Tooltip ellissi per testi lunghi (description/msg), non input */
.cell-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==== Contenitore scroll orizzontale */
.table-wrap { overflow-x: auto; overflow-y: hidden; border: 1px solid #2a2340; border-radius: 10px; }

/* ==== Tabelle CRUD/Read-only */
.settings-table, .dpm-table {
  width: max-content;               /* si adatta al numero colonne */
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  white-space: nowrap;              /* evita a capo */
  font-family: "Arial Narrow";
}

.settings-table th, .settings-table td,
.dpm-table th, .dpm-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #2a2340;
  vertical-align: middle;
}

/* ==== Classi di larghezza coerenti per tipo colonna */
.col-id        { width: 12ch; }      /* es. 999999 → 6ch, lasciamo 8ch */
.col-system    { width: 10ch; }      /* ENE01/WAA01/DIV01 → 5–6ch */
.col-class     { width: 14ch; }      /* DATA/PARAM/SETTING/TAL/OWA/OAL/WDT → max 7ch, mettiamo 6–7ch */
.col-datatype  { width: 12ch; }     /* INT/FLOAT/BOOL/VARCHAR/DATETIME → 5–10ch */
.col-unit      { width: 9ch; }      /* V, A, W, %, °C, W/m² → 2–4ch */
.col-widget    { width: 14ch; }     /* gauge/hbar/vbar/tank/text/led/radio/switch */
.col-min, .col-max, .col-def { width: 12ch; }   /* numerici */
.col-val       { width: 14ch;}     /* value spesso numerico/testo corto */
.col-ts        { width: 20ch;}     /* timestamp ISO */
.col-status, .col-error { width: 8ch;}         /* piccoli interi */
.col-name      { width: 24ch; }     /* name tecnico */
.col-desc      { width: 28ch; font-family: "Arial Narrow"; }     /* description (testo) */
.col-msg       { width: 8ch; display: none; }     /* messaggi (testo) */
.col-action    { font-family: "Arial Narrow"; width: 80px;}
td.col-action  { font-family: "Arial Narrow"; display: grid; gap: 5px; max-width: 90%;}

/* --- Textarea senza scrollbar, con auto-grow e min-height --- */
.settings-table td.col-desc textarea.param-input {
  min-height: 45px;           /* altezza minima voluta */
  height: auto;               /* lascia crescere in base al contenuto */
  overflow: hidden;           /* niente scrollbar */
  line-height: 1.25;          /* migliora la lettura */
  width: 100%;
  box-sizing: border-box;
}

/* Se vuoi una minima “respirazione” di riga, usa padding sulle celle */
.settings-table th,
.settings-table td {
  padding-block: 4px;         /* ↑↓: regola a tuo gusto 6–10px */
  vertical-align: middle;
  font-family: "Arial Narrow";
}

/* Input dentro cella: non superano i limiti */
.settings-table td .param-input,
.settings-table td textarea.param-input {
  display: grid;width: 100%; max-width: 100%; box-sizing: border-box; font-size: 13px; font-family: "Arial Narrow";
}

/* Slider BOOL: compatti */
.settings-table td .slider { transform: scale(.95); }

/* Testo lungo: ellissi */
.cell-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* (Opzionale) Sticky prime colonne: ID, name, system, _class */
.sticky-id     { position: sticky; left: 0; z-index: 3; background: #151024; box-shadow: 1px 0 0 #2a2340 inset; }
.sticky-name   { position: sticky; left: 8ch; z-index: 3; background: #151024; box-shadow: 1px 0 0 #2a2340 inset; }

/* Header sticky (opzionale) */
.settings-table thead th, .dpm-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: #1a1330; color: #e5e7eb;
}

/* --- Celle sdoppiate IST/SOLL --- */
.settings-table td.split-cell { padding: 0; }
.settings-table td.split-cell .cell-split {
  display: grid;
  grid-template-rows: 1fr 1fr;            /* metà sopra/basso */
  min-height: 56px;                       /* riga “respirata” */
}
.settings-table td.split-cell .cell-top {
  display: flex; align-items: center;
  padding: 6px 8px;
  color: #cbd5e1;                          /* IST */
  background: #121027;
  border-bottom: 1px solid #2a2340;
  font-size: 12px;
}
.settings-table td.split-cell .cell-bottom {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;                        /* editor (SOLL) */
}

/* Editor si adatta alla metà inferiore */
.settings-table td.split-cell .param-input,
.settings-table td.split-cell textarea.param-input {
  width: 100%; max-width: 100%;
  box-sizing: border-box;
}

/* Textarea description senza scrollbar (auto-grow): */
.settings-table td.col-desc textarea.param-input {
  min-height: 40px;
  height: auto;
  overflow: hidden;
  resize: none;
  line-height: 1.25;
}

/* Header può andare a capo (se necessario) */
.settings-table thead th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }


/* Evidenzia differenza IST vs SOLL nella cella */
.settings-table td.split-cell .cell-top.changed {
  color: #f97316; /* arancione */
  font-weight: 600;
}