/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
    :root {
      --blue-50: #E6F4FB;
      --blue-100: #BCE0F3;
      --blue-500: #40ACE6;
      --blue-700: #1E7BAB;
      --blue-900: #0F4E72;
      --gray-50: #F7F8FA;
      --gray-100: #F1F2F4;
      --gray-200: #E5E7EB;
      --gray-300: #D1D5DB;
      --gray-400: #9CA3AF;
      --gray-500: #6B7280;
      --gray-600: #4B5563;
      --gray-700: #374151;
      --gray-900: #1F2937;
      --ow-font-sans: 'DM Sans', system-ui, sans-serif;
      --ow-r-sm: 6px;
      --ow-r-md: 10px;
      --ow-r-lg: 14px;
      --ow-r-pill: 999px;
      --ow-sidebar-w: 240px;
    }

    /* ============================================================
   2. RESET + LAYOUT BASE
   ============================================================ */
    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--ow-font-sans);
      font-size: 14px;
      line-height: 1.5;
      color: var(--gray-900);
      background: var(--gray-50);
      -webkit-font-smoothing: antialiased;
    }

    .ow-app {
      display: flex;
      min-height: 100vh;
    }

    .ow-main {
      flex: 1;
      margin-left: var(--ow-sidebar-w);
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    /* ============================================================
   3. SIDEBAR
   ============================================================ */
    .ow-sidebar {
      width: var(--ow-sidebar-w);
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      background: var(--gray-900);
      color: #b3bac6;
      display: flex;
      flex-direction: column;
      z-index: 50;
    }

    .ow-sidebar__brand {
      padding: 18px 18px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .ow-sidebar__brand-mark {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
      display: grid;
      place-items: center;
      color: white;
      font-weight: 700;
      font-size: 13px;
    }

    .ow-sidebar__brand-name {
      color: white;
      font-weight: 600;
      font-size: 15px;
    }

    .ow-sidebar__brand-sub {
      font-size: 10px;
      color: var(--gray-400);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-top: 1px;
    }

    .ow-sidebar__nav {
      padding: 10px;
      flex: 1;
      overflow-y: auto;
    }

    .ow-sidebar__section-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gray-400);
      padding: 14px 12px 6px;
      font-weight: 600;
    }

    .ow-sidebar__item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 6px;
      color: #b3bac6;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      min-height: 36px;
    }

    .ow-sidebar__item.is-active {
      background: rgba(64, 172, 230, 0.16);
      color: white;
      border-left: 3px solid var(--blue-500);
      padding-left: 9px;
    }

    .ow-sidebar__item i {
      font-size: 16px;
      opacity: 0.9;
    }

    .ow-sidebar__item .line-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-left: auto;
    }

    .ow-sidebar__item .line-dot.ok {
      background: var(--blue-500);
    }

    .ow-sidebar__item .line-dot.warn {
      background: var(--gray-400);
    }

    .ow-sidebar__item .line-dot.idle {
      background: var(--gray-500);
      opacity: 0.5;
    }

    .ow-sidebar__item .line-dot.nir {
      background: transparent;
      border: 1px dashed var(--gray-300);
      width: 8px;
      height: 8px;
    }

    .ow-sidebar__item .badge-admin {
      margin-left: auto;
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.10);
      color: var(--gray-300);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .ow-sidebar__user {
      padding: 14px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ow-sidebar__user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--blue-700);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 600;
      font-size: 12px;
    }

    .ow-sidebar__user-name {
      color: white;
      font-weight: 500;
      font-size: 12px;
    }

    .ow-sidebar__user-role {
      color: var(--gray-400);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .ow-drawer-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(13, 22, 38, 0.5);
      z-index: 40;
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms;
    }

    .ow-drawer-backdrop.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    /* ============================================================
   4. MOBILE HEADER
   ============================================================ */
    .ow-mobile-header {
      display: none;
    }

    .ow-btn-icon {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--gray-700);
      display: grid;
      place-items: center;
      font-size: 22px;
      cursor: pointer;
    }

    .ow-btn-icon:active {
      background: var(--gray-100);
    }

    /* ============================================================
   5. PAGE HEADER
   ============================================================ */
    .ow-page-header {
      background: white;
      border-bottom: 0.5px solid var(--gray-200);
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .ow-page-header__back {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: var(--gray-500);
      font-weight: 500;
      text-decoration: none;
    }

    .ow-page-header__back i {
      font-size: 14px;
    }

    .ow-page-header__crumb {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gray-400);
      font-weight: 600;
    }

    .ow-page-header__title {
      font-size: 22px;
      font-weight: 600;
      color: var(--gray-900);
      letter-spacing: -0.01em;
      margin-top: 2px;
    }

    .ow-page-header__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--gray-500);
      margin-top: 4px;
    }

    .ow-page-header__meta .building {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      background: var(--blue-50);
      border: 0.5px solid var(--blue-100);
      border-radius: var(--ow-r-pill);
      color: var(--blue-700);
      font-weight: 600;
    }

    .ow-page-header__meta .building i {
      font-size: 11px;
    }

    .ow-page-header__actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 500;
      border-radius: var(--ow-r-pill);
    }

    .status-pill--warn {
      background: var(--gray-100);
      color: var(--gray-600);
    }

    .status-pill i {
      font-size: 12px;
    }

    /* ============================================================
   6. CONTENT
   ============================================================ */
    .ow-page-content {
      padding: 24px;
      max-width: 1280px;
      width: 100%;
      margin: 0 auto;
    }

    /* Banner predittivo */
    .diag-banner {
      background: white;
      border: 0.5px solid var(--blue-100);
      border-left: 3px solid var(--blue-500);
      border-radius: var(--ow-r-md);
      padding: 14px 18px;
      margin-bottom: 22px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .diag-banner__icon {
      color: var(--blue-500);
      font-size: 22px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .diag-banner__title {
      font-size: 14px;
      font-weight: 600;
      color: var(--gray-900);
      margin-bottom: 4px;
      line-height: 1.35;
    }

    .diag-banner__body {
      font-size: 13px;
      color: var(--gray-600);
      line-height: 1.5;
    }

    .diag-banner__body strong {
      color: var(--gray-900);
      font-weight: 600;
    }

    /* Section label */
    .ow-section-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--gray-500);
      font-weight: 600;
      margin: 22px 0 12px;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .ow-section-label:first-of-type {
      margin-top: 0;
    }

    .ow-section-label__hint {
      font-size: 11px;
      color: var(--gray-400);
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
    }

    /* Trend cards row (2-col desktop, stack mobile) */
    .trend-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 8px;
    }

    .trend-card {
      background: white;
      border: 0.5px solid var(--gray-200);
      border-radius: var(--ow-r-md);
      padding: 16px 18px;
    }

    .trend-card__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .trend-card__icon {
      width: 30px;
      height: 30px;
      background: var(--blue-500);
      color: white;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 14px;
      flex-shrink: 0;
    }

    .trend-card--crit .trend-card__icon {
      background: var(--gray-900);
    }

    .trend-card__title {
      font-size: 14px;
      font-weight: 500;
      flex: 1;
    }

    .trend-card__badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 500;
      border-radius: var(--ow-r-pill);
    }

    .trend-card__badge--ok {
      color: var(--blue-700);
      background: var(--blue-50);
    }

    .trend-card__badge--crit {
      color: white;
      background: var(--gray-900);
    }

    .trend-card__badge i {
      font-size: 11px;
    }

    /* Valore istantaneo + mediana di contesto */
    .trend-card__values {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .value-pill {
      border: 1.5px solid var(--blue-500);
      color: var(--blue-900);
      background: white;
      padding: 5px 14px;
      border-radius: var(--ow-r-pill);
      font-weight: 500;
      font-size: 15px;
      font-variant-numeric: tabular-nums;
    }

    .value-pill--crit {
      border: none;
      background: var(--gray-900);
      color: white;
    }

    .value-pill__sub {
      font-size: 10px;
      opacity: 0.7;
      margin-left: 4px;
      font-weight: 500;
    }

    .value-context {
      font-size: 11px;
      color: var(--gray-500);
    }

    .value-context .median {
      display: inline-block;
      border: 1px solid var(--gray-200);
      background: var(--gray-50);
      padding: 2px 9px;
      border-radius: var(--ow-r-pill);
      margin-right: 4px;
      color: var(--gray-700);
      font-variant-numeric: tabular-nums;
      font-weight: 500;
    }

    /* Range bar (sotto il pill valore istantaneo) */
    .range-wrap {
      position: relative;
      margin: 8px 0 4px;
    }

    .range-bar {
      height: 6px;
      display: flex;
      border-radius: 3px;
      overflow: hidden;
    }

    .range-marker {
      position: absolute;
      top: -3px;
      transform: translateX(-50%);
      width: 3px;
      height: 12px;
      background: var(--gray-900);
      border-radius: 1px;
      box-shadow: 0 0 0 1px white;
    }

    .range-labels {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      color: var(--gray-400);
      margin-top: 4px;
      font-variant-numeric: tabular-nums;
    }

    /* Chart host */
    .chart-host {
      height: 180px;
      margin-top: 14px;
      background: var(--gray-50);
      border-radius: var(--ow-r-sm);
      overflow: hidden;
      position: relative;
    }

    .chart-host .apexcharts-canvas {
      max-width: 100%;
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      color: var(--gray-500);
      margin-top: 8px;
    }

    .chart-legend__item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .chart-legend__swatch {
      display: inline-block;
      width: 14px;
      height: 3px;
      background: var(--blue-500);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .chart-legend__swatch--scatter {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gray-900);
    }

    .chart-legend__swatch--bench {
      height: 0;
      border-top: 1.5px dashed var(--gray-500);
      background: transparent;
    }

    /* KPI grid - 4-col desktop, 2x2 mobile */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 10px;
    }

    .kpi-card {
      background: white;
      border: 0.5px solid var(--gray-200);
      border-radius: var(--ow-r-md);
      padding: 12px 14px;
    }

    .kpi-card__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      gap: 6px;
    }

    .kpi-card__badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 500;
      border-radius: var(--ow-r-pill);
    }

    .kpi-card__badge--ok {
      color: var(--blue-700);
      background: var(--blue-50);
    }

    .kpi-card__badge--warn {
      color: var(--gray-600);
      background: var(--gray-100);
    }

    .kpi-card__badge i {
      font-size: 10px;
    }

    .kpi-card__value {
      font-size: 18px;
      font-weight: 500;
      color: var(--blue-900);
      font-variant-numeric: tabular-nums;
    }

    .kpi-card__unit {
      font-size: 10px;
      color: var(--gray-500);
      margin-left: 2px;
      font-weight: 500;
    }

    .kpi-card__name {
      font-size: 11px;
      color: var(--gray-500);
      margin: 0 0 8px;
    }

    .kpi-card__live-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--gray-400);
      font-weight: 600;
      margin-bottom: 2px;
    }

    .kpi-card .range-wrap {
      margin: 6px 0 0;
    }

    .kpi-card .range-bar {
      height: 5px;
    }

    .kpi-card .range-marker {
      top: -2px;
      width: 3px;
      height: 9px;
    }

    .kpi-card .range-labels {
      font-size: 9px;
      margin-top: 3px;
    }

    /* Schema impianto (6 stazioni in fila desktop, scroll-snap mobile) */
    .schema-wrap {
      position: relative;
    }

    .schema-scroller {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .schema-station {
      background: white;
      border: 0.5px solid var(--gray-200);
      border-radius: var(--ow-r-sm);
      padding: 14px 8px;
      text-align: center;
      cursor: pointer;
      min-height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .schema-station.is-active {
      border: 1.5px solid var(--blue-500);
      background: var(--blue-50);
    }

    .schema-station__icon {
      font-size: 22px;
      color: var(--gray-500);
      margin-bottom: 6px;
    }

    .schema-station.is-active .schema-station__icon {
      color: var(--gray-900);
    }

    .schema-station__name {
      font-size: 11px;
      font-weight: 500;
      color: var(--gray-700);
      margin-bottom: 4px;
    }

    .schema-station__dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      margin-bottom: 4px;
    }

    .schema-station__dot--ok {
      background: var(--blue-500);
    }

    .schema-station__dot--warn {
      background: var(--gray-500);
    }

    .schema-station__dot--crit {
      background: var(--gray-900);
    }

    .schema-station__value {
      font-size: 10px;
      color: var(--gray-500);
      line-height: 1.2;
    }

    .schema-station.is-active .schema-station__value {
      color: var(--gray-900);
      font-weight: 500;
    }

    .schema-hint {
      display: none;
      text-align: center;
      font-size: 10px;
      color: var(--gray-400);
      margin: -4px 0 12px;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .schema-hint i {
      font-size: 11px;
    }

    /* Detail panel */
    .detail-panel {
      background: white;
      border: 0.5px solid var(--gray-200);
      border-radius: var(--ow-r-md);
      padding: 14px 18px;
      margin-bottom: 22px;
    }

    .detail-panel__head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 0.5px solid var(--gray-200);
    }

    .detail-panel__icon {
      width: 26px;
      height: 26px;
      background: var(--blue-500);
      color: white;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 13px;
    }

    .detail-panel__title {
      font-size: 13px;
      font-weight: 500;
      color: var(--gray-900);
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .detail-item {
      background: var(--gray-50);
      border: 0.5px solid var(--gray-200);
      border-radius: var(--ow-r-sm);
      padding: 10px 12px;
    }

    .detail-item--warn {
      border-left: 3px solid var(--gray-500);
      padding-left: 10px;
    }

    .detail-item--crit {
      border-left: 3px solid var(--gray-900);
      padding-left: 10px;
    }

    .detail-item__label {
      font-size: 10px;
      color: var(--gray-500);
      line-height: 1.3;
    }

    .detail-item__value {
      font-size: 14px;
      font-weight: 500;
      margin-top: 3px;
      color: var(--gray-900);
      font-variant-numeric: tabular-nums;
    }

    .detail-item--crit .detail-item__value {
      font-weight: 600;
    }

    .detail-item .range-wrap {
      margin-top: 6px;
    }

    .detail-item .range-bar {
      height: 4px;
    }

    .detail-item .range-marker {
      top: -2px;
      width: 2px;
      height: 8px;
    }

    .detail-item .range-labels {
      font-size: 8px;
      margin-top: 2px;
    }

    /* Footer */
    .ow-footer {
      padding: 24px;
      text-align: center;
      font-size: 11px;
      color: var(--gray-400);
      line-height: 1.5;
      border-top: 0.5px solid var(--gray-200);
      margin-top: 32px;
    }

    .ow-footer a {
      color: var(--blue-700);
      font-weight: 500;
    }

    /* ============================================================
   7. MEDIA QUERIES MOBILE
   ============================================================ */
    @media (max-width: 768px) {
      .ow-main {
        margin-left: 0;
      }

      .ow-sidebar {
        transform: translateX(-100%);
        transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
        width: 280px;
        max-width: 84%;
      }

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

      .ow-drawer-backdrop {
        display: block;
      }

      .ow-mobile-header {
        display: flex;
        height: 56px;
        background: white;
        border-bottom: 0.5px solid var(--gray-200);
        align-items: center;
        padding: 0 12px;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 30;
      }

      .ow-mobile-header__brand {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
      }

      .ow-mobile-header__brand-mark {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
        display: grid;
        place-items: center;
        color: white;
        font-weight: 700;
        font-size: 12px;
      }

      .ow-mobile-header__brand-name {
        font-weight: 600;
        font-size: 15px;
        color: var(--gray-900);
      }

      .ow-page-header {
        padding: 14px 16px 12px;
        flex-wrap: wrap;
        gap: 8px;
        top: 56px;
      }

      .ow-page-header__title {
        font-size: 18px;
      }

      .ow-page-header__back {
        font-size: 11px;
      }

      .ow-page-header__meta {
        font-size: 11px;
        margin-top: 6px;
        flex-wrap: wrap;
      }

      .ow-page-content {
        padding: 16px;
      }

      /* Banner predittivo: padding ridotto */
      .diag-banner {
        padding: 12px 14px;
        margin-bottom: 16px;
      }

      .diag-banner__title {
        font-size: 13px;
      }

      .diag-banner__body {
        font-size: 12px;
      }

      /* Trend: stack 1-col */
      .trend-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .trend-card {
        padding: 14px;
      }

      .chart-host {
        height: 160px;
      }

      /* KPI: 2x2 */
      .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .kpi-card {
        padding: 10px 12px;
      }

      .kpi-card__value {
        font-size: 16px;
      }

      .kpi-card__name {
        margin-bottom: 6px;
      }

      /* Schema: scroll-snap orizzontale */
      .schema-scroller {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 6px;
        margin: 0 -16px;
        padding: 4px 16px 12px;
        -webkit-overflow-scrolling: touch;
      }

      .schema-scroller::-webkit-scrollbar {
        display: none;
      }

      .schema-scroller {
        scrollbar-width: none;
      }

      .schema-station {
        flex: 0 0 88px;
        scroll-snap-align: start;
        min-height: 90px;
        padding: 10px 4px;
      }

      .schema-station__icon {
        font-size: 20px;
      }

      .schema-station__value {
        font-size: 9px;
      }

      .schema-hint {
        display: flex;
      }

      /* Detail grid: 2-col su mobile */
      .detail-grid {
        grid-template-columns: 1fr 1fr;
      }

      .detail-panel {
        padding: 12px 14px;
      }
    }

    @media (hover: hover) {
      .ow-sidebar__item:hover {
        background: rgba(255, 255, 255, 0.06);
      }

      .schema-station:hover {
        border-color: var(--blue-100);
      }
    }

    .ow-btn-icon:focus-visible {
      outline: 2px solid var(--blue-500);
      outline-offset: 2px;
    }