/* ==========================================================================
   SERRA PILOTA - SCADA / IOT GREENHOUSE DASHBOARD STYLESHEET
   Design fedele ai mockup PDF con supporto Dark Mode (PDF 1) e Light Mode (PDF 2)
   ========================================================================== */

:root {
  /* DARK THEME TOKENS (PDF 1) - Default */
  --bg-app: #0e1318;
  --bg-sidebar: #090d10;
  --bg-header: #141a21;
  --bg-card: #182028;
  --bg-card-hover: #1e2832;
  --bg-card-active: #152535;
  --bg-panel: #141b22;
  --bg-badge-wait: #232d38;
  --bg-badge-irriga: #16365c;
  --bg-badge-alarm: #472615;
  --bg-badge-pause: #25282d;
  
  --border-subtle: #242e39;
  --border-card: #222b36;
  --border-focus: #3b82f6;
  --border-alarm: #d97706;
  --border-alarm-glow: rgba(217, 119, 6, 0.4);
  --border-active-glow: rgba(59, 130, 246, 0.4);

  --text-main: #f1f5f9;
  --text-muted: #8b9bb0;
  --text-dim: #64748b;
  --text-highlight: #ffffff;

  --color-blue: #38bdf8;
  --color-blue-dark: #2563eb;
  --color-blue-bg: #0f2c4d;
  --color-green: #22c55e;
  --color-green-glow: rgba(34, 197, 94, 0.2);
  --color-orange: #f59e0b;
  --color-orange-dark: #b45309;
  --color-red: #ef4444;
  --color-red-btn: #dc2626;
  --color-red-hover: #b91c1c;

  --tank-track: #202b36;
  --tank-fill: #60a5fa;

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-glow-blue: 0 0 15px rgba(56, 189, 248, 0.25);
  --shadow-glow-orange: 0 0 18px rgba(245, 158, 11, 0.3);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* LIGHT THEME TOKENS (PDF 2) */
[data-theme="light"] {
  --bg-app: #f1f5f9;
  --bg-sidebar: #ffffff;
  --bg-header: #1e293b;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-card-active: #eff6ff;
  --bg-panel: #ffffff;
  --bg-badge-wait: #f1f5f9;
  --bg-badge-irriga: #dbeafe;
  --bg-badge-alarm: #ffedd5;
  --bg-badge-pause: #f3f4f6;

  --border-subtle: #e2e8f0;
  --border-card: #e2e8f0;
  --border-focus: #2563eb;
  --border-alarm: #ea580c;
  --border-alarm-glow: rgba(234, 88, 12, 0.3);
  --border-active-glow: rgba(37, 99, 235, 0.25);

  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --text-highlight: #020617;

  --color-blue: #0284c7;
  --color-blue-dark: #0369a1;
  --color-blue-bg: #e0f2fe;
  --color-green: #16a34a;
  --color-green-glow: rgba(22, 163, 74, 0.15);
  --color-orange: #d97706;
  --color-orange-dark: #9a3412;
  --color-red: #dc2626;

  --tank-track: #e2e8f0;
  --tank-fill: #3b82f6;

  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-glow-blue: 0 0 12px rgba(2, 132, 199, 0.2);
  --shadow-glow-orange: 0 0 15px rgba(217, 119, 6, 0.25);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   SIDEBAR NAVIGATION (PDF 1 style)
   ========================================================================== */
.sidebar {
  width: 90px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  flex-shrink: 0;
  z-index: 100;
}

.logo-container {
  margin-bottom: 24px;
}

.logo-drop {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 0 8px;
}

.nav-item {
  width: 100%;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  gap: 6px;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
}

.nav-link svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nav-link:hover {
  color: var(--text-main);
  background-color: var(--bg-card-hover);
}

.nav-link.active {
  color: var(--color-blue);
  background-color: var(--color-blue-bg);
}

.nav-badge {
  position: absolute;
  top: 6px;
  right: 18px;
  background-color: var(--color-orange);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.sidebar-footer {
  margin-top: auto;
  width: 100%;
  padding: 0 8px;
}

/* ==========================================================================
   MAIN WRAPPER & TOP HEADER
   ========================================================================== */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--bg-app);
}

.top-header {
  height: 64px;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: #ffffff;
  gap: 16px;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.serra-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  color: #ffffff;
}

.serra-selector:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.breadcrumb-slash {
  color: #64748b;
  font-weight: 400;
}

.page-title {
  color: #94a3b8;
  font-size: 15px;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-group {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #cbd5e1;
}

.status-online {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.status-dot-green {
  width: 9px;
  height: 9px;
  background-color: var(--color-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-green);
  animation: pulse-dot 2s infinite;
}

.status-4g {
  color: #94a3b8;
}

.header-clock {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #e2e8f0;
}

/* Theme Switcher Toggle */
.theme-switch-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
}

.theme-switch-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-stop {
  background-color: var(--color-red-btn);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
  transition: var(--transition);
}

.btn-stop:hover {
  background-color: var(--color-red-hover);
  transform: scale(1.02);
}

.btn-stop-square {
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  display: inline-block;
}

/* ==========================================================================
   DASHBOARD CONTENT GRID
   ========================================================================== */
.dashboard-content {
  flex: 1;
  display: block;
  padding: 20px 24px;
  overflow-y: auto;
  min-width: 0;
  width: 100%;
}

.main-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ==========================================================================
   TOP KPI METRICS BAR
   ========================================================================== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1300px) {
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .kpi-row {
    grid-template-columns: 1fr;
  }
}

.kpi-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 104px;
  box-sizing: border-box;
}

.kpi-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
  min-height: 34px;
  display: flex;
  align-items: flex-start;
}

.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
}

.kpi-number {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.5px;
}

.kpi-unit {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

.kpi-progress-bar {
  margin-top: 8px;
  height: 4px;
  background-color: var(--border-card);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.kpi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue), var(--color-blue-dark));
  border-radius: var(--radius-full);
}

/* ==========================================================================
   SETTORI SECTION & HEADER
   ========================================================================== */
.settori-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settori-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.settori-title-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.settori-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.settori-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.settori-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.irriga {
  background-color: var(--color-blue);
  box-shadow: 0 0 6px var(--color-blue);
}

.legend-dot.attesa {
  background-color: var(--text-dim);
}

.legend-dot.allarme {
  background-color: var(--color-orange);
  box-shadow: 0 0 6px var(--color-orange);
}

.legend-dot.pausa {
  border: 1.5px solid var(--text-muted);
  background: transparent;
}

/* ==========================================================================
   SETTORI CARDS GRID (8 Sectors)
   ========================================================================== */
.settori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.sector-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 195px;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
}

.sector-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-focus);
}

/* Specific state modifiers */
.sector-card.status-irriga {
  border-color: var(--color-blue);
  box-shadow: var(--shadow-glow-blue);
  background-color: var(--bg-card-active);
}

.sector-card.status-allarme {
  border: 1.5px solid var(--border-alarm);
  box-shadow: var(--shadow-glow-orange);
}

.sector-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sector-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sector-badge.badge-irriga {
  background-color: var(--color-blue-bg);
  color: var(--color-blue);
}

.sector-badge.badge-attesa {
  background-color: var(--bg-badge-wait);
  color: var(--text-muted);
}

.sector-badge.badge-allarme {
  background-color: var(--bg-badge-alarm);
  color: var(--color-orange);
}

.sector-badge.badge-pausa {
  background-color: var(--bg-badge-pause);
  color: var(--text-dim);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.badge-dot.irriga {
  background-color: var(--color-blue);
  animation: pulse-dot 1.5s infinite;
}

.badge-dot.allarme {
  background-color: var(--color-orange);
}

.valve-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}

.sector-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.sector-plant {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 500;
}

/* Sector Mid Section */
.sector-mid {
  margin-bottom: 14px;
}

.irriga-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.irriga-percent {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-blue);
}

.irriga-volume {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.irriga-bar-container {
  height: 6px;
  background-color: var(--border-card);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.irriga-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.sector-status-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.35;
}

.sector-status-text.warning {
  color: var(--color-orange);
  font-weight: 700;
}

.sector-status-text.dimmed {
  color: var(--text-muted);
}

/* Sector Card Bottom */
.sector-card-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  gap: 8px;
}

.sector-card-bottom > span {
  white-space: nowrap;
  font-weight: 600;
}

.turni-dots {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.turni-dot {
  width: 9px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--border-card);
}

.turni-dot.done {
  background-color: var(--text-dim);
}

.turni-dot.active {
  background-color: var(--color-blue);
}

/* ==========================================================================
   RIGHT COLUMN - TELEMETRY & ALERTS (SCADA PANEL)
   ========================================================================== */
.telemetry-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-card {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.panel-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

/* EC & pH Big Display Cards */
.ph-ec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.metric-block {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.metric-top {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.metric-huge {
  font-size: 34px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -1px;
  line-height: 1.1;
}

.metric-target {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.metric-target-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-green);
}

/* Hydraulic Stats (Portata & Pressione) */
.hydraulic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background-color: var(--bg-card);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  border: 1px solid var(--border-card);
}

.hydraulic-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hydraulic-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.hydraulic-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

/* Fertilizers Tanks Progress Bars */
.tanks-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tank-row {
  display: grid;
  grid-template-columns: 50px 1fr 40px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.tank-name {
  color: var(--text-muted);
}

.tank-bar-track {
  height: 10px;
  background-color: var(--tank-track);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tank-bar-fill {
  height: 100%;
  background-color: var(--tank-fill);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.tank-pct {
  color: var(--text-main);
  text-align: right;
  font-size: 12px;
}

/* ==========================================================================
   ALARM CARD / ALERT BOX (Settore 6 Melanzana)
   ========================================================================== */
.alarm-panel {
  border-left: 4px solid var(--color-orange);
  background-color: var(--bg-panel);
  border-top: 1px solid var(--border-card);
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alarm-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-orange);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alarm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.alarm-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.alarm-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.alarm-meta-row {
  display: flex;
  justify-content: space-between;
}

.alarm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.btn-primary-action {
  background-color: var(--color-blue-dark);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn-primary-action:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}

.btn-secondary-action {
  background-color: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}

.btn-secondary-action:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--text-muted);
}

/* ==========================================================================
   MODAL DIALOG (Diagnosi & Dettagli)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.modal-overlay.open,
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 520px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.25s ease;
}

.modal-overlay.open .modal-content,
.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  padding: 18px 22px;
  background-color: var(--bg-header);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

.modal-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}

.modal-close:hover {
  color: #ffffff;
}

.modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  color: var(--text-main);
}

.diagnostic-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  background-color: var(--bg-app);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-card);
}

.step-icon {
  font-size: 18px;
}

.step-content strong {
  display: block;
  margin-bottom: 2px;
}

.modal-footer {
  padding: 16px 22px;
  background-color: var(--bg-header);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Toast alert message */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--bg-header);
  border: 1px solid var(--border-focus);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1280px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  .settori-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   RASPBERRY PI 4 DIAGNOSTIC BADGE & MODAL
   ========================================================================== */
.rpi-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(226, 42, 79, 0.15);
  border: 1px solid rgba(226, 42, 79, 0.4);
  color: #ff6b8b;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.rpi-header-badge:hover {
  background: rgba(226, 42, 79, 0.28);
  border-color: #ff6b8b;
  transform: translateY(-1px);
}

.rpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-green);
  box-shadow: 0 0 8px var(--color-green);
}

.rpi-dot.error {
  background-color: var(--color-red);
  box-shadow: 0 0 8px var(--color-red);
}

/* Modal sizing for Raspberry Diagnostic */
.modal-content.rpi-modal {
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.rpi-modal-body {
  overflow-y: auto;
  max-height: calc(85vh - 130px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Controls toolbar */
.rpi-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--bg-app);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.sim-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sim-mode-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.sim-mode-btn.active.ok {
  background-color: rgba(34, 197, 94, 0.2);
  border-color: var(--color-green);
  color: var(--color-green);
}

.sim-mode-btn.active.fault {
  background-color: rgba(239, 68, 68, 0.2);
  border-color: var(--color-red);
  color: var(--color-red);
}

.btn-run-diag {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
  transition: var(--transition);
}

.btn-run-diag:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f43f5e, #e11d48);
}

/* RPi Board Visual Header */
.rpi-visual-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(15, 23, 42, 0.4));
  border-radius: var(--radius-md);
  border: 1px solid rgba(225, 29, 72, 0.25);
}

.rpi-icon-large {
  font-size: 38px;
}

.rpi-board-details h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.rpi-board-details p {
  font-size: 12px;
  color: var(--text-muted);
}

.rpi-led-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rpi-act-led {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #1e3a1e;
  border: 2px solid #2d5a2d;
  transition: all 0.15s ease;
}

.rpi-act-led.blinking {
  background-color: #22c55e;
  box-shadow: 0 0 14px #22c55e, 0 0 24px #4ade80;
  animation: act-blink 0.25s infinite alternate;
}

@keyframes act-blink {
  from { opacity: 0.2; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.15); }
}

.led-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Test Item Cards Grid */
.rpi-tests-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rpi-test-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

.rpi-test-card.testing {
  border-color: var(--color-blue);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.rpi-test-card.passed {
  border-color: rgba(34, 197, 94, 0.4);
  background-color: rgba(34, 197, 94, 0.03);
}

.rpi-test-card.failed {
  border-color: rgba(239, 68, 68, 0.5);
  background-color: rgba(239, 68, 68, 0.05);
}

.test-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.test-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.test-status-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background-color: var(--bg-app);
  color: var(--text-dim);
}

.test-status-tag.ok {
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--color-green);
}

.test-status-tag.fail {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--color-red);
}

.test-status-tag.running {
  background-color: rgba(56, 189, 248, 0.15);
  color: var(--color-blue);
  animation: pulse-dot 1s infinite;
}

.test-details {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.test-val-highlight {
  font-weight: 700;
  color: var(--text-main);
}

/* GPIO internal pin tester sub-list */
.gpio-pin-test-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 6px;
  background: var(--bg-app);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.gpio-pin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Modal Tabs System */
.modal-tabs-header {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 20px;
  background-color: var(--bg-header);
}

.modal-tab-btn {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.modal-tab-btn:hover {
  color: var(--text-main);
}

.modal-tab-btn.active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

.tab-pane {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.tab-pane.active {
  display: flex;
}

/* Interactive Testing Action Buttons */
.interactive-test-box {
  background-color: var(--bg-app);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.interactive-test-info h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 3px;
}

.interactive-test-info p {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-test-action {
  background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark));
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.btn-test-action:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Pin Toggle Switcher */
.pin-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.btn-pin-toggle {
  background-color: var(--bg-badge-wait);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-pin-toggle.active {
  background-color: var(--color-green);
  color: #ffffff;
  border-color: var(--color-green);
}

/* ==========================================================================
   MULTI-VIEW SPA PANELS (Panoramica, Programmi, Ricette, Storico, Allarmi, Impostazioni)
   ========================================================================== */
.view-panel {
  display: none;
  width: 100%;
  animation: fadeInView 0.25s ease-out;
}

.view-panel.active {
  display: block;
}

#view-panoramica.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1280px) {
  #view-panoramica.active {
    grid-template-columns: 1fr;
  }
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Brand DAN & Logo */
.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  margin-bottom: 22px;
}

.dan-logo-mark {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #0284c7, #2563eb 50%, #059669);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* View Header Banner */
.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.view-title-group h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.view-title-group p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.view-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Day Selector Filter Pills */
.days-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.day-pill {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.day-pill:hover {
  border-color: var(--color-blue);
  color: var(--text-main);
}

.day-pill.active {
  background-color: var(--color-blue-bg);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* Programs Scheduling Cards */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.program-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.program-card:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
}

.program-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.program-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

.program-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.badge-tag-sm {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-app);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.badge-tag-sm.sector {
  background-color: var(--color-blue-bg);
  color: var(--color-blue);
  border-color: transparent;
}

.program-meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  background-color: var(--bg-app);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  font-size: 12px;
}

.program-meta-item span {
  color: var(--text-muted);
  display: block;
}

.program-meta-item strong {
  color: var(--text-main);
  font-size: 13px;
}

.program-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
  margin-top: auto;
}

/* Recipes Cards & Nutrients */
.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

.recipe-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: var(--transition);
}

.recipe-card:hover {
  border-color: var(--border-focus);
}

.recipe-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recipe-crop-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.recipe-phase-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--color-green);
}

.ph-correction-box {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(15, 23, 42, 0.2));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ph-correction-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ph-comparison-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.ph-val-badge {
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
}

/* Nutrients PPM Breakdown */
.nutrients-bars-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--bg-app);
  padding: 12px;
  border-radius: var(--radius-md);
}

.nutrient-bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.nutrient-name {
  color: var(--text-muted);
  font-weight: 600;
}

.nutrient-track {
  height: 6px;
  background-color: var(--border-card);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.nutrient-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

.nutrient-fill.nitrogen { background-color: #3b82f6; }
.nutrient-fill.phosphorus { background-color: #f59e0b; }
.nutrient-fill.potassium { background-color: #8b5cf6; }
.nutrient-fill.calcium { background-color: #10b981; }

.nutrient-ppm {
  text-align: right;
  font-weight: 700;
  color: var(--text-main);
}

/* History / Activity Log Table */
.history-filters-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.filter-inputs-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-select, .filter-input {
  background-color: var(--bg-app);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
}

.history-table-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.data-table th {
  background-color: var(--bg-header);
  padding: 12px 16px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-subtle);
}

.data-table tr:hover td {
  background-color: var(--bg-card-hover);
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.badge-status.success {
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--color-green);
}

.badge-status.warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--color-orange);
}

.badge-status.info {
  background-color: rgba(56, 189, 248, 0.15);
  color: var(--color-blue);
}

/* Modal Form Controls */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.form-control {
  background-color: var(--bg-app);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
}

.days-checkboxes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.day-check-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background-color: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}

/* ==========================================================================
   OPERATOR BADGE & PIN ACCESS
   ========================================================================== */
.operator-badge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}

.operator-badge-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-blue);
}

.op-avatar {
  font-size: 15px;
}

.op-texts {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.op-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

.op-pin {
  font-size: 10px;
  color: #94a3b8;
  font-family: monospace;
}

.op-switch-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.plant-badge-edit {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 4px;
  transition: var(--transition);
}

.serra-selector:hover .plant-badge-edit {
  opacity: 1;
  transform: scale(1.15);
}

/* ==========================================================================
   SCADA: DOPPIO MANOMETRO POMPA/FILTRO & INTASAMENTO
   ========================================================================== */
.filter-scada-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.filter-scada-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scada-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.filter-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.filter-card-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.filter-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-status-pill {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
}

.filter-status-pill.status-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.filter-status-pill.status-ok {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-backwash-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.btn-backwash-action:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.filter-metrics-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr 1.3fr;
  align-items: center;
  gap: 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

@media (max-width: 900px) {
  .filter-metrics-strip {
    grid-template-columns: 1fr 1fr;
  }
  .press-arrow-divider {
    display: none;
  }
}

.press-gauge-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gauge-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.gauge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.gauge-dot.in-dot { background-color: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.gauge-dot.out-dot { background-color: #10b981; box-shadow: 0 0 6px #10b981; }

.gauge-number-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.gauge-val {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.gauge-val.text-blue { color: #38bdf8; }
.gauge-val.text-green { color: #10b981; }
.gauge-val.text-amber { color: #f59e0b; }

.gauge-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.gauge-note {
  font-size: 11px;
  color: var(--text-dim);
}

.press-arrow-divider {
  font-size: 18px;
  color: var(--text-dim);
  font-weight: bold;
}

.intasamento-box {
  border-left: 1px solid var(--border-subtle);
  padding-left: 16px;
}

.intasamento-bar-track {
  height: 8px;
  background-color: var(--border-card);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 6px 0 4px 0;
}

.intasamento-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 65%, #ef4444 85%);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.intasamento-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
}

.filter-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--text-muted);
}

.chart-leg-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chart-leg-dot.leg-in { background-color: #38bdf8; }
.chart-leg-dot.leg-out { background-color: #10b981; }
.chart-leg-dot.leg-delta { background-color: #f59e0b; }

/* ==========================================================================
   SCADA: SINOTTICO DELLE POMPE
   ========================================================================== */
.pumps-scada-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pumps-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pumps-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pump-count-active {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pumps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.pump-item-box {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  transition: var(--transition);
}

.pump-item-box.active {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(2, 132, 199, 0.04);
}

.pump-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pump-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.pump-indicator.on {
  background-color: var(--color-green);
  box-shadow: 0 0 8px var(--color-green);
  animation: pulse-dot 1.8s infinite;
}

.pump-indicator.off {
  background-color: var(--text-dim);
}

.pump-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.pump-badge-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.pump-badge-status.running {
  background: rgba(16, 185, 129, 0.15);
  color: var(--color-green);
}

.pump-badge-status.stopped {
  background: var(--bg-badge-wait);
  color: var(--text-muted);
}

.pump-badge-status.standby {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-orange);
}

.pump-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.pump-telemetry-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--bg-card);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  border: 1px solid var(--border-card);
}

.pump-tel-col {
  display: flex;
  flex-direction: column;
}

.pump-tel-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.pump-tel-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.pump-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  margin-top: auto;
}

.btn-pump-toggle {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-pump-toggle:hover {
  background: var(--color-blue);
  color: #ffffff;
  border-color: var(--color-blue);
}

/* ==========================================================================
   BAMBU LAB AMS STYLE VENTURIMETER SYNOPTIC
   ========================================================================== */
.ams-container {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.ams-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.ams-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ams-badge-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ams-sub-title {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 600;
}

.ams-status-dot-active {
  font-size: 10px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.5px;
  animation: pulse-dot 1.8s infinite;
}

.ams-bay-chassis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ams-slot-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 4px;
  transition: var(--transition);
  position: relative;
}

.ams-slot-unit.active {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.ams-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
  margin-bottom: 6px;
}

.ams-slot-code {
  font-size: 10px;
  font-weight: 800;
  color: #cbd5e1;
  font-family: monospace;
}

.ams-channel-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.ams-channel-led.on {
  background-color: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulse-dot 1.6s infinite;
}

.ams-channel-led.off {
  background-color: #475569;
}

/* Realistic Vertical Tank Vessel with glowing meniscus */
.ams-tank-vessel {
  width: 32px;
  height: 72px;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ams-fluid-fill {
  width: 100%;
  position: relative;
  transition: height 0.8s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ams-fluid-fill.color-green {
  background: linear-gradient(180deg, #34d399, #059669);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.35);
}

.ams-fluid-fill.color-amber {
  background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.35);
}

.ams-fluid-fill.color-purple {
  background: linear-gradient(180deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.35);
}

.ams-fluid-fill.color-cyan {
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}

.ams-fluid-fill.color-red {
  background: linear-gradient(180deg, #f87171, #dc2626);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.35);
}

.ams-pct-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.ams-slot-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  line-height: 1.15;
}

.ams-substance-name {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.ams-flow-readout {
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  margin-top: 2px;
}

.ams-flow-readout small {
  font-size: 8.5px;
  color: #94a3b8;
  font-weight: 500;
}

/* AMS Manifold & PTFE Tubing */
.ams-manifold-tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.ams-mixing-hub {
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 8.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
}

/* ==========================================================================
   METEOROLOGICAL DASHBOARD
   ========================================================================== */
.meteo-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.meteo-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
}

.meteo-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meteo-icon {
  font-size: 22px;
}

.meteo-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.meteo-huge-value {
  font-size: 34px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -1px;
  margin: 10px 0 6px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.meteo-huge-value small {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

.meteo-sub-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.compass-svg-wrap {
  width: 64px;
  height: 64px;
}

/* ==========================================================================
   GREENHOUSE WINDOW & ROOF VENT VISUALIZATION
   ========================================================================== */
.greenhouse-window-box {
  height: 110px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 12px 0;
}

.gh-roof-frame {
  width: 140px;
  height: 60px;
  border-left: 2px solid var(--border-card);
  border-right: 2px solid var(--border-card);
  border-top: 2px solid var(--color-blue);
  position: relative;
}

.gh-vent-flap {
  position: absolute;
  top: -2px;
  height: 3px;
  background-color: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
  transition: transform 0.5s ease;
  transform-origin: top left;
}

.gh-vent-flap.flap-left {
  left: 0;
  width: 68px;
}

.gh-vent-flap.flap-right {
  right: 0;
  width: 68px;
  transform-origin: top right;
}

/* ==========================================================================
   PORTALE DISPOSITIVI (DUAL VIEW: CLIENTE SFOLTITO / TECNICO DAN)
   ========================================================================== */
.device-view-toggle-pills {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 30px;
  padding: 3px;
  gap: 3px;
}

.device-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.device-view-pill:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.device-view-pill.active {
  background: var(--color-blue);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
}

/* Vista Cliente: 3 KPI Cards Rassicuranti e Pulite */
.client-devices-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.client-kpi-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.client-kpi-card:hover {
  border-color: var(--color-cyan);
  transform: translateY(-1px);
}

.client-kpi-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.client-kpi-body {
  display: flex;
  flex-direction: column;
}

.client-kpi-lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--text-muted);
}

.client-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin: 3px 0 2px;
}

.client-kpi-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Badge informativo in cima alla tabella */
.devices-table-header-info {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-card);
  background: rgba(255, 255, 255, 0.015);
}

.client-info-badge {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.client-device-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.unifi-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.unifi-kpi {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}

.unifi-kpi-lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.unifi-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 4px;
}

.range-slider {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--border-card);
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-blue);
  cursor: pointer;
  box-shadow: 0 0 6px var(--color-blue);
}

.aux-outputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   IPAD & RESPONSIVE DESIGN ARCHITECTURE (TABLET LANDSCAPE & PORTRAIT FIRST)
   ========================================================================== */

/* 1. Toggle Button Sidebar per iPad & Mobile */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-toggle-btn:hover,
.sidebar-toggle-btn:active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-blue);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1040;
}

/* 2. Ottimizzazioni Touch & Apple iPadOS Standards */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }

  .nav-link,
  .btn-primary-action,
  .btn-secondary-action,
  .btn-pump-toggle,
  .btn-pin-toggle,
  .btn-stop,
  .day-pill,
  .sector-card,
  .theme-switch-btn,
  .rpi-header-badge,
  .operator-badge-btn {
    min-height: 44px;
    touch-action: manipulation;
  }

  .range-slider {
    height: 10px;
    margin: 8px 0;
  }

  .range-slider::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  /* Micro scale on active touch */
  .sector-card:active,
  .kpi-card:active,
  .pump-item-box:active {
    transform: scale(0.985);
  }
}

/* 3. iPad Pro Landscape & iPad Air Landscape (max-width: 1200px) */
@media (max-width: 1200px) {
  /* Sidebar compact */
  .sidebar {
    width: 78px;
    padding: 12px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-link {
    font-size: 10px;
    padding: 8px 2px;
    min-height: 48px;
    gap: 4px;
  }

  .nav-link svg {
    width: 20px;
    height: 20px;
  }

  /* Header su iPad Landscape */
  .top-header {
    padding: 0 16px;
    gap: 12px;
  }

  .serra-selector {
    font-size: 14.5px;
    padding: 4px 8px;
  }

  .header-right {
    gap: 10px;
  }

  .status-4g {
    display: none;
  }

  .op-switch-tag {
    display: none;
  }

  .theme-switch-btn span#themeLabel {
    display: none;
  }

  .theme-switch-btn {
    padding: 6px 10px;
  }

  /* Panoramica: passa a layout fluido stacked */
  #view-panoramica.active {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Colonna Telemetria SCADA (AMS Venturimetri e schede affiancate) */
  .telemetry-column {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .telemetry-column > .panel-card:first-child {
    grid-column: 1 / -1;
  }

  /* AMS Venturi con 5 canali distribuiti */
  .ams-bay-chassis {
    gap: 10px;
  }

  .ams-tank-vessel {
    height: 125px;
  }

  /* Striscia Manometri Filtro iPad Landscape */
  .filter-metrics-strip {
    grid-template-columns: 1fr auto 1fr 1fr 1.3fr;
    gap: 10px;
    padding: 12px 14px;
  }

  /* Pompe SCADA iPad Landscape: 3 colonne */
  .pumps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  /* Settori iPad Landscape: 4 colonne */
  .settori-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  /* Meteo Dashboard iPad Landscape: 2 colonne */
  .meteo-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* UniFi KPI strip iPad */
  .unifi-summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 4. iPad Portrait, iPad Mini & Tablet Vertivali (max-width: 900px) */
@media (max-width: 900px) {
  /* Mostra pulsante toggle menu per iPad Portrait */
  .sidebar-toggle-btn {
    display: inline-flex;
  }

  /* Sidebar trasformata in cassetto laterale (Off-Canvas Drawer) */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 96px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6);
    background-color: var(--bg-sidebar);
    padding: 16px 0 max(16px, env(safe-area-inset-bottom)) 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.active {
    display: block;
  }

  .main-wrapper {
    width: 100%;
  }

  /* Header ottimizzato per iPad Portrait */
  .top-header {
    height: auto;
    min-height: 58px;
    padding: 8px 14px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-left {
    flex: 1;
    min-width: 180px;
    gap: 8px;
  }

  .breadcrumb-slash,
  .page-title {
    display: none;
  }

  .header-right {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .status-group {
    font-size: 11px;
    gap: 8px;
  }

  .status-online {
    display: none;
  }

  .header-clock {
    font-size: 12px;
  }

  /* Dashboard content area per iPad Portrait */
  .dashboard-content {
    padding: 14px 16px;
  }

  /* KPI cards: 2x2 grid */
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Striscia Pressioni Filtro: 2x2 grid */
  .filter-metrics-strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .press-arrow-divider {
    display: none;
  }

  .intasamento-box {
    grid-column: 1 / -1;
  }

  /* Pompe SCADA su iPad Portrait: 2 colonne */
  .pumps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Settori su iPad Portrait: 3 colonne perfette */
  .settori-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* Telemetria SCADA stacked */
  .telemetry-column {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* AMS Bay Chassis su iPad Portrait: 5 canali */
  .ams-bay-chassis {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .ams-tank-vessel {
    height: 115px;
  }

  .ams-flow-readout {
    font-size: 12px;
  }

  /* Meteo Dashboard: 2 colonne ordinate */
  .meteo-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Tabelle con scroll orizzontale touch */
  .history-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }

  /* UniFi summary strip */
  .unifi-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Modali su iPad */
  .modal-overlay {
    padding: 14px;
  }

  .modal-content {
    max-width: 92vw;
    width: 94%;
    max-height: 88vh;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 5. Smartphone e Schermi Compatti (max-width: 640px) */
@media (max-width: 640px) {
  .top-header {
    padding: 8px 10px;
  }

  .header-plant-title {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kpi-row {
    grid-template-columns: 1fr;
  }

  .filter-metrics-strip {
    grid-template-columns: 1fr;
  }

  .pumps-grid {
    grid-template-columns: 1fr;
  }

  .settori-grid {
    grid-template-columns: 1fr;
  }

  .ams-bay-chassis {
    gap: 4px;
  }

  .ams-slot-code {
    font-size: 11px;
  }

  .ams-flow-readout {
    font-size: 11px;
  }

  .meteo-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .unifi-summary-strip {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   NEW SCADA UPGRADES: HOME CUSTOMIZER, 3D FILTER, SECTORS BG, ADVISORY & SERRE 3D
   ============================================================================= */

/* 1. PANORAMICA TOOLBAR & LAYOUT CUSTOMIZER BUTTON */
.panoramica-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.panoramica-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulse-dot 1.8s infinite;
}

.panoramica-head-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
  letter-spacing: -0.2px;
}

.panoramica-head-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

.btn-layout-config {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.btn-layout-config:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.lock-icon-badge {
  font-size: 14px;
}

/* 2. SMART AGRONOMIC ADVISORY (DECISION SUPPORT SYSTEM) */
.smart-advisory-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
  backdrop-filter: blur(12px);
}

.smart-advisory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.advisory-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.advisory-pulse-icon {
  font-size: 18px;
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-orange);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.advisory-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.advisory-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.advisory-badges {
  display: flex;
  align-items: center;
  gap: 8px;
}

.advisory-badge-mode {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.advisory-badge-live {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.advisory-items-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advisory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

.advisory-item.warning-wind {
  border-left: 4px solid var(--color-orange);
}

.advisory-item.info-humidity {
  border-left: 4px solid var(--color-blue);
}

.advisory-item-icon {
  font-size: 24px;
}

.advisory-item-body {
  flex: 1;
  min-width: 240px;
}

.advisory-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.advisory-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.advisory-tag.tag-warning {
  color: var(--color-orange);
}

.advisory-tag.tag-info {
  color: var(--color-blue);
}

.advisory-timestamp {
  font-size: 10.5px;
  color: var(--text-dim);
}

.advisory-item-text {
  font-size: 12.5px;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.advisory-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-advisory-consent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: transform 0.15s ease, filter 0.15s ease;
  min-height: 44px;
}

.btn-advisory-consent:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn-advisory-consent.info-consent {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.btn-advisory-dismiss {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

/* 3. 3D FILTRATION VESSEL & PIPE OVERLAYS */
.filter-vessel-visual-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
  background: #090d16;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
}

.filter-vessel-stage {
  position: relative;
  width: 100%;
  min-height: 280px;
  max-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-3d-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center;
  filter: brightness(1) contrast(1.05);
  display: block;
  border-radius: 10px;
}

.filter-cutaway-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.12), transparent 70%);
  pointer-events: none;
}

/* Pipe Callout Boxes */
.pipe-callout {
  position: absolute;
  z-index: 10;
}

.pipe-callout.inlet-pipe {
  top: 24px;
  left: 20px;
}

.pipe-callout.outlet-pipe {
  top: 24px;
  right: 20px;
}

.pipe-callout.vessel-center-callout {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.88);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px;
  padding: 10px 18px;
  backdrop-filter: blur(10px);
  min-width: 260px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.pipe-hotspot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: -6px;
  animation: pulse-dot 1.8s infinite;
}

.pipe-hotspot.in-hotspot {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.pipe-hotspot.out-hotspot {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.pipe-data-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  min-width: 170px;
}

.pipe-tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.pipe-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.pipe-pill.in-pill {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

.pipe-pill.out-pill {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.pipe-source-tag {
  font-size: 10px;
  color: var(--text-dim);
}

.pipe-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pipe-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.pipe-unit {
  font-size: 12px;
  color: var(--text-muted);
}

.pipe-bar-mini {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.pipe-bar-fill.in-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
}

.pipe-bar-fill.out-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
}

.vessel-badge-head {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.vessel-delta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}

.vessel-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-top: 6px;
  color: var(--text-muted);
}

.mesh-tag {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}

/* 4. DYNAMIC SECTORS WITH PHOTOGRAPHIC BACKGROUNDS */
.btn-customize-sectors {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.btn-customize-sectors:hover {
  background: rgba(37, 99, 235, 0.1);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.sector-card.has-photo-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  min-height: 200px;
}

.sector-card.has-photo-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72) 0%, rgba(15, 23, 42, 0.94) 100%);
  z-index: 1;
  transition: background 0.25s ease;
}

.sector-card.has-photo-bg:hover::before {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.88) 100%);
}

.sector-card.has-photo-bg > * {
  position: relative;
  z-index: 2;
}

.sector-crop-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Background Picker in Sector Edit Modal */
.bg-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.bg-picker-option {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.bg-picker-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.bg-picker-option:has(input:checked) {
  border-color: var(--color-blue);
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

.bg-picker-preview {
  height: 90px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 8px;
}

.bg-picker-preview::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.bg-picker-lbl {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 5. 3D ARCHITECTURAL GREENHOUSE MODEL VIEW */
.storm-interlock-banner {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid var(--color-green);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.storm-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.greenhouse-3d-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #090d16;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.gh-model-wrapper {
  position: relative;
  width: 100%;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gh-model-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gh-model-scrim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.12), transparent 75%),
              linear-gradient(to bottom, rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.75));
  pointer-events: none;
}

.gh-hotspot {
  position: absolute;
  z-index: 10;
  cursor: pointer;
}

.hotspot-ridge-nord {
  top: 18%;
  left: 28%;
}

.hotspot-ridge-sud {
  top: 22%;
  right: 28%;
}

.hotspot-side-wall {
  bottom: 22%;
  left: 12%;
}

.hotspot-climate-sensor {
  bottom: 18%;
  right: 14%;
}

.gh-pin-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  display: block;
  animation: pulse-dot 1.8s infinite;
}

.gh-pin-card {
  position: absolute;
  top: 18px;
  left: -20px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 160px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.gh-pin-title {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.gh-pin-stat {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #f59e0b;
  margin: 2px 0;
}

.gh-pin-card small {
  display: block;
  font-size: 9.5px;
  color: var(--text-muted);
}

/* Angular Protractor & Telemetry for Greenhouse Actuators */
.gh-protractor-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-app);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
  border: 1px solid var(--border-subtle);
}

.protractor-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.protractor-angle {
  font-size: 24px;
  font-weight: 900;
  color: #f59e0b;
  line-height: 1;
}

.protractor-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.protractor-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.protractor-metrics strong {
  color: var(--text-main);
}

.gh-preset-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.btn-preset-chip {
  padding: 6px 4px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  min-height: 44px;
  transition: all 0.15s ease;
}

.btn-preset-chip:hover {
  background: rgba(37, 99, 235, 0.12);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* 6. ANTIGELO SELECTION & SECTORS PICKER */
.smart-advisory-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  flex-wrap: wrap;
}

.smart-advisory-banner.frost-banner {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.14), rgba(37, 99, 235, 0.08));
  border: 1.5px solid var(--color-blue);
}

.smart-advisory-banner.heating-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.08));
  border: 1.5px solid var(--color-orange);
}

.advisory-icon-frost {
  font-size: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.2);
}

.advisory-body-frost {
  flex: 1;
  min-width: 260px;
}

.advisory-tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.advisory-tag.tag-frost {
  color: #38bdf8;
}

.advisory-temp-tag {
  font-size: 12px;
  color: var(--text-muted);
}

.advisory-msg {
  font-size: 13px;
  color: var(--text-main);
  margin: 0;
  line-height: 1.4;
}

.btn-advisory-consent.frost-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb);
}

.antigelo-settori-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.antigelo-sector-chk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.antigelo-sector-chk input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  cursor: pointer;
}

.antigelo-sector-chk:has(input:checked) {
  border-color: var(--color-blue);
  background: rgba(37, 99, 235, 0.08);
}

.chk-sector-info strong {
  display: block;
  font-size: 12px;
  color: var(--text-main);
}

.chk-sector-info small {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
}

/* 7. LAYOUT CUSTOMIZER MODAL & BLOCKS LIST */
.layout-lock-status-box {
  background: var(--bg-app);
  border: 1.5px solid var(--border-card);
  border-radius: 10px;
  padding: 14px 16px;
}

.layout-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.layout-block-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  min-height: 44px;
}

.layout-block-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.layout-block-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.layout-block-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--border-card);
  transition: .3s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.layout-block-switch input:checked + .switch-slider {
  background-color: var(--color-blue);
}

.layout-block-switch input:checked + .switch-slider:before {
  transform: translateX(20px);
}

.layout-block-switch input:disabled + .switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-manage-tanks-sm {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 28px;
}

.btn-manage-tanks-sm:hover {
  background: var(--color-blue);
  color: white;
  border-color: var(--color-blue);
}

/* ==========================================================================
   GLOBAL APP PIN LOCK SCREEN (Protezione Globale da Esterno - PIN: dan171026)
   ========================================================================== */
.global-app-lock {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.global-app-lock.unlocked {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.global-lock-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #0d1a2d 0%, #070d17 55%, #020509 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.global-lock-card {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 440px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  padding: 34px 28px 28px;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 40px rgba(37, 99, 235, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: lockCardPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lockCardPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.global-lock-card.shake {
  animation: pinShake 0.45s ease-in-out;
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 40px rgba(239, 68, 68, 0.3);
}

.global-lock-logo {
  margin-bottom: 14px;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.6));
  animation: logoPulse 3s infinite alternate ease-in-out;
}

@keyframes logoPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)); }
  100% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.85)); }
}

.global-lock-brand h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
  margin: 0 0 4px 0;
}

.global-lock-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
}

.global-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: var(--color-green);
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  margin: 16px 0 20px;
}

.global-lock-form {
  width: 100%;
}

.global-lock-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 10px;
  text-align: left;
}

.global-pin-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 2px 12px;
  transition: all 0.2s ease;
}

.global-pin-input-wrap:focus-within {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  background: rgba(0, 0, 0, 0.6);
}

.global-pin-key-icon {
  font-size: 16px;
  margin-right: 8px;
  opacity: 0.8;
}

.global-pin-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  padding: 12px 6px;
  letter-spacing: 2px;
}

.global-pin-input::placeholder {
  color: var(--text-muted);
  letter-spacing: 0;
  font-weight: 500;
  font-size: 13px;
}

.btn-toggle-pin-eye {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  font-size: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.btn-toggle-pin-eye:hover {
  color: var(--text-main);
  opacity: 1;
}

.global-lock-feedback {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.global-lock-feedback.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}

.global-lock-feedback.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.global-unlock-submit-btn {
  width: 100%;
  margin-top: 18px;
  padding: 13px 20px;
  min-height: 48px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
  transition: all 0.2s ease;
}

.global-unlock-submit-btn:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
  transform: translateY(-1px);
}

.global-unlock-submit-btn:active {
  transform: translateY(1px);
}

.global-lock-footer-info {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.global-lock-footer-info span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  opacity: 0.85;
}

.global-lock-footer-info small {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Header Global Lock Button */
.global-lock-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.2s ease;
}

.global-lock-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

@media (max-width: 900px) {
  .global-lock-btn-text {
    display: none;
  }
  .global-lock-btn {
    padding: 6px 9px;
  }
}

/* ==========================================================================
   DAN SWAL2 MODAL SYSTEM (SweetAlert2 Style Centered Dialog SCADA)
   ========================================================================== */
.dan-swal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(4, 8, 20, 0.82);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dan-swal-overlay.open,
.dan-swal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.dan-swal-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, #131d33 0%, #0b1220 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.85),
              0 0 35px rgba(14, 165, 233, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  padding: 30px 26px 24px;
  text-align: center;
  transform: scale(0.88) translateY(14px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.dan-swal-overlay.open .dan-swal-box,
.dan-swal-overlay.active .dan-swal-box {
  transform: scale(1) translateY(0);
}

/* Icon Wrap & Pulse */
.dan-swal-icon-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: rgba(37, 99, 235, 0.15);
  border: 2px solid rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  animation: danSwalPulse 2.4s infinite ease-in-out;
}

@keyframes danSwalPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.65);
  }
}

/* Icon Variants */
.dan-swal-icon-wrap.variant-frost {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.85);
  box-shadow: 0 0 30px rgba(6, 182, 212, 0.45);
  animation-name: danSwalPulseFrost;
}
@keyframes danSwalPulseFrost {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(6, 182, 212, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(6, 182, 212, 0.7); }
}

.dan-swal-icon-wrap.variant-warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.45);
  animation-name: danSwalPulseWarning;
}
@keyframes danSwalPulseWarning {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(245, 158, 11, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(245, 158, 11, 0.7); }
}

.dan-swal-icon-wrap.variant-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.85);
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.45);
  animation-name: danSwalPulseDanger;
}
@keyframes danSwalPulseDanger {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(239, 68, 68, 0.7); }
}

.dan-swal-icon-wrap.variant-success {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.85);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.45);
  animation-name: danSwalPulseSuccess;
}
@keyframes danSwalPulseSuccess {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(16, 185, 129, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(16, 185, 129, 0.7); }
}

.dan-swal-icon-wrap.variant-fire {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.85);
  box-shadow: 0 0 30px rgba(249, 115, 22, 0.45);
  animation-name: danSwalPulseFire;
}
@keyframes danSwalPulseFire {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(249, 115, 22, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(249, 115, 22, 0.7); }
}

/* Badge Tag */
.dan-swal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.dan-swal-badge.variant-frost {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.4);
  color: #22d3ee;
}

.dan-swal-badge.variant-warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.dan-swal-badge.variant-danger {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.dan-swal-badge.variant-success {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

/* Title */
.dan-swal-title {
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 12px 0;
  line-height: 1.35;
}

/* Body & Content */
.dan-swal-body {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 22px;
}

.dan-swal-text {
  margin: 0 0 10px 0;
  color: #94a3b8;
  font-size: 13.5px;
}

/* Action Callout Card */
.dan-swal-action-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0 10px;
  text-align: left;
}

.dan-swal-action-card.variant-frost {
  border-color: rgba(6, 182, 212, 0.35);
  background: rgba(8, 47, 73, 0.4);
}

.dan-swal-action-card.variant-danger {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(69, 10, 10, 0.4);
}

.dan-swal-action-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.dan-swal-action-text {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

/* Audit Note */
.dan-swal-audit-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 10px;
  text-align: left;
}

/* Action Buttons */
.dan-swal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-top: 6px;
}

.dan-swal-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  user-select: none;
}

.dan-swal-btn:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.dan-swal-btn-cancel {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

.dan-swal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.dan-swal-btn-confirm {
  flex: 1.4;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
}

.dan-swal-btn-confirm:hover {
  background: linear-gradient(135deg, #0369a1, #1d4ed8);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.65);
  transform: translateY(-1.5px);
}

.dan-swal-btn-confirm.btn-danger {
  background: linear-gradient(135deg, #e11d48, #be123c);
  box-shadow: 0 4px 18px rgba(225, 29, 72, 0.45);
}

.dan-swal-btn-confirm.btn-danger:hover {
  background: linear-gradient(135deg, #be123c, #9f1239);
  box-shadow: 0 6px 24px rgba(225, 29, 72, 0.65);
}

.dan-swal-btn-confirm.btn-frost {
  background: linear-gradient(135deg, #0891b2, #0284c7);
  box-shadow: 0 4px 18px rgba(6, 182, 212, 0.45);
}

.dan-swal-btn-confirm.btn-frost:hover {
  background: linear-gradient(135deg, #0e7490, #0369a1);
  box-shadow: 0 6px 24px rgba(6, 182, 212, 0.65);
}

/* Light Theme Overrides */
body.light-theme .dan-swal-overlay {
  background: rgba(15, 23, 42, 0.55);
}

body.light-theme .dan-swal-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.25),
              0 0 35px rgba(37, 99, 235, 0.15);
}

body.light-theme .dan-swal-title {
  color: #0f172a;
}

body.light-theme .dan-swal-text {
  color: #64748b;
}

body.light-theme .dan-swal-action-card {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

body.light-theme .dan-swal-action-card.variant-frost {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

body.light-theme .dan-swal-action-card.variant-danger {
  background: #ffe4e6;
  border-color: #fecdd3;
}

body.light-theme .dan-swal-action-text {
  color: #0f172a;
}

body.light-theme .dan-swal-audit-note {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}

body.light-theme .dan-swal-btn-cancel {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

body.light-theme .dan-swal-btn-cancel:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ==========================================================================
   STUFE & IMPIANTO TERMICO SCADA DESIGN SYSTEM
   ========================================================================== */
.btn-danger-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  border: 1px solid rgba(225, 29, 72, 0.4);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
  transition: all 0.2s ease;
}

.btn-danger-action:hover {
  background: linear-gradient(135deg, #be123c, #9f1239);
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.55);
  transform: translateY(-1px);
}

.stufe-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.stufe-power-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.stufe-power-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Sinottico SCADA Centrale */
.stufe-schematic-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin: 18px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.stufe-schematic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}

.stufe-schematic-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.stufe-schematic-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.stufe-schematic-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stufe-telemetry-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.stufe-telemetry-tag.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Stage Sinottico Fluido */
.stufe-synoptic-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.3fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

@media (max-width: 900px) {
  .stufe-synoptic-stage {
    grid-template-columns: 1fr;
  }
}

.synoptic-unit {
  position: relative;
}

.unit-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
  transition: all 0.25s ease;
}

.unit-box:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.unit-icon-flame {
  font-size: 32px;
  margin-bottom: 6px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.unit-icon-flame.active {
  animation: flameFlicker 1.8s infinite ease-in-out;
}

@keyframes flameFlicker {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.9)); }
}

.valve-icon, .manifold-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.unit-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.3px;
}

.unit-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.unit-stats-mini {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: var(--text-muted);
}

.unit-stats-mini strong {
  color: var(--text-main);
}

.unit-zones-pills {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}

.zone-pill {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
}

.zone-pill.active {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-weight: 700;
}

.synoptic-pipe {
  height: 6px;
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  border-radius: 3px;
  position: relative;
}

@media (max-width: 900px) {
  .synoptic-pipe {
    display: none;
  }
}

/* Griglia Zone Termiche */
.stufe-zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.stufe-card {
  transition: all 0.25s ease;
  position: relative;
}

.stufe-card.active-card {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1);
}

.stufe-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.stufe-flame-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
}

.stufe-flame-badge.burning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
  animation: flameFlicker 2s infinite ease-in-out;
}

/* Selettore Modalità Pill */
.stufe-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  margin-bottom: 14px;
}

.stufe-mode-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.stufe-mode-pills {
  display: flex;
  gap: 4px;
}

.stufe-mode-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}

.stufe-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.stufe-mode-btn.active {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Telemetry Strip */
.stufe-telemetry-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  background: var(--bg-app);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.stufe-telem-box {
  text-align: center;
}

.telem-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.telem-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

/* Sliders */
.stufe-slider-wrap {
  margin: 12px 0;
}

.stufe-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.stufe-slider-header strong {
  font-size: 13.5px;
}

/* Footer Telemetry & Action */
.stufe-footer-telemetry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 10px 0;
  margin-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.stufe-actions-row {
  margin-top: 10px;
}

.stufe-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  font-weight: 700;
}

.stufe-toggle-btn.active-burning {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* Grafico Canvas 24h */
.stufe-chart-card {
  margin-top: 22px;
  padding: 20px;
}

.stufe-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.stufe-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stufe-canvas-wrap {
  width: 100%;
  height: 240px;
  position: relative;
}

.stufe-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   SERRE & MECCATRONICA FALDE - COMPACT CONSOLE SCADA (SFOLTITA & ORDINATA)
   ========================================================================== */
.serre-storm-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-md);
  margin: 14px 0 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.serre-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.serre-strip-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 6px;
}

.serre-microclima-tag {
  font-size: 12.5px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.serre-precaution-btn {
  font-size: 11.5px;
  padding: 6px 12px;
}

/* Split SCADA 2 Colonne */
.serre-split-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 18px;
  margin-bottom: 16px;
}

@media (max-width: 960px) {
  .serre-split-layout {
    grid-template-columns: 1fr;
  }
}

.serre-synoptic-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.serre-synoptic-hero-wrap {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  background: #090d16;
}

.serre-synoptic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9);
}

.serre-synoptic-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0.8));
  pointer-events: none;
}

.serre-live-pills {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.serre-pill-stat {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: #cbd5e1;
  backdrop-filter: blur(8px);
}

.serre-pill-stat strong {
  color: #38bdf8;
}

.serre-synoptic-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.syn-metric-box {
  text-align: center;
}

.syn-metric-lbl {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.syn-metric-box strong {
  font-size: 13.5px;
}

/* Console Unificata Actuators */
.serre-console-card {
  padding: 18px 20px;
}

.serre-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
}

.serre-actuators-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.serre-actuator-item {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

.serre-actuator-item:hover {
  border-color: rgba(56, 189, 248, 0.35);
}

.actuator-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.actuator-title-grp {
  display: flex;
  align-items: center;
  gap: 10px;
}

.actuator-icon {
  font-size: 20px;
}

.actuator-name {
  font-size: 13.5px;
  color: var(--text-main);
  display: block;
}

.actuator-sub {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.actuator-stat-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}

.actuator-angle-pill, .actuator-corsa-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: #38bdf8;
}

.actuator-controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 640px) {
  .actuator-controls-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

.actuator-slider-box {
  flex: 1;
}

.actuator-chips-box {
  display: flex;
  gap: 4px;
}

/* Regole Interlock in fondo */
.serre-rules-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.serre-rule-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.rule-icon-box {
  font-size: 24px;
}

.rule-title {
  font-size: 12.5px;
  color: var(--text-main);
}

.rule-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   CENTRO ALLARMI & NOTIFICHE SCADA DETTAGLIATE
   ========================================================================== */
.alarm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.alarm-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.alarm-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-blue);
}

.alarm-kpi-card.critico {
  border-left: 4px solid var(--color-red);
}

.alarm-kpi-card.avviso {
  border-left: 4px solid var(--color-orange);
}

.alarm-kpi-card.sicurezza {
  border-left: 4px solid var(--color-blue);
}

.alarm-kpi-card.silenziati {
  border-left: 4px solid var(--text-muted);
}

.alarm-kpi-ico {
  font-size: 28px;
  line-height: 1;
}

.alarm-kpi-info {
  display: flex;
  flex-direction: column;
}

.alarm-kpi-lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.alarm-kpi-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 2px 0;
}

.alarm-kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* Alarm Filter Bar */
.alarm-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.alarm-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.alarm-filter-pill:hover {
  color: var(--text-main);
  border-color: var(--color-blue);
}

.alarm-filter-pill.active {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.35);
}

.filter-count-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
}

/* Detailed Alarm Cards Container */
.detailed-alarms-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detailed-alarm-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: border-color 0.2s ease;
}

.detailed-alarm-card.critico {
  border-left: 5px solid var(--color-red);
}

.detailed-alarm-card.avviso {
  border-left: 5px solid var(--color-orange);
}

.detailed-alarm-card.sicurezza {
  border-left: 5px solid var(--color-blue);
}

.detailed-alarm-card.manutenzione {
  border-left: 5px solid var(--color-cyan);
}

.detailed-alarm-card.silenziato {
  opacity: 0.65;
  border-left: 5px solid var(--text-muted);
}

.alarm-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.alarm-meta-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alarm-code-tag {
  font-family: monospace;
  font-weight: 700;
  font-size: 11.5px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: var(--text-main);
}

.alarm-severity-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alarm-severity-badge.critico {
  background: rgba(255, 68, 68, 0.18);
  color: #ff5252;
  border: 1px solid rgba(255, 68, 68, 0.4);
}

.alarm-severity-badge.avviso {
  background: rgba(255, 153, 0, 0.18);
  color: #ffa726;
  border: 1px solid rgba(255, 153, 0, 0.4);
}

.alarm-severity-badge.sicurezza {
  background: rgba(0, 153, 255, 0.18);
  color: #42a5f5;
  border: 1px solid rgba(0, 153, 255, 0.4);
}

.alarm-severity-badge.manutenzione {
  background: rgba(0, 229, 255, 0.18);
  color: #26c6da;
  border: 1px solid rgba(0, 229, 255, 0.4);
}

.alarm-category-tag {
  font-size: 11.5px;
  color: var(--text-muted);
}

.alarm-time-tag {
  font-size: 11.5px;
  color: var(--text-muted);
}

.alarm-title-main {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 14px;
  line-height: 1.4;
}

/* Box Telemetria & Parametri */
.alarm-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.alarm-info-box {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.alarm-info-box-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alarm-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  gap: 10px;
}

.alarm-info-row:last-child {
  margin-bottom: 0;
}

.alarm-info-lbl {
  color: var(--text-muted);
}

.alarm-info-val {
  color: var(--text-main);
  font-weight: 600;
  text-align: right;
}

.alarm-impact-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 4px;
}

/* Box Risoluzione Step by Step */
.alarm-resolution-box {
  background: rgba(0, 102, 255, 0.05);
  border: 1px solid rgba(0, 102, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}

.alarm-resolution-title {
  font-size: 11.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.alarm-resolution-step {
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.55;
  margin-bottom: 4px;
}

.alarm-resolution-step:last-child {
  margin-bottom: 0;
}

/* Actions footer */
.alarm-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   IMPOSTAZIONI SCADA MODERNE (TAB SYSTEM)
   ========================================================================== */
.settings-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-card);
  padding-bottom: 10px;
  overflow-x: auto;
}

.settings-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.settings-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.settings-tab-btn.active {
  background: var(--bg-card);
  color: var(--color-blue);
  border-color: var(--border-card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.settings-tab-pane {
  display: none;
}

.settings-tab-pane.active {
  display: block;
}

.settings-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.settings-grid-3col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.form-help {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}