/*
 * La simulazione dell'interfaccia di NX-Monitor (pagina /solutions/nx-monitor/demo, dentro un iframe della
 * landing). Colori, misure e componenti sono quelli dell'app 3.5.7 (repository NX-Monitor:
 * src/NxMonitor.App/Theme.axaml e Styles.axaml): le forme di EUCMT con i colori di NX-Monitor, Inter per il
 * testo e IBM Plex Mono per dati, intestazioni di colonna, tag e barra di stato. Se l'app cambia, va
 * riallineato anche questo file.
 */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

:root {
    --nx-canvas: #ecf0f4;
    --nx-surface: #ffffff;
    --nx-surface-alt: #f6f8fa;
    --nx-header: #f3f6f9;
    --nx-statusbar: #e2e8ee;
    --nx-line: #d3dbe3;
    --nx-line-strong: #aebbc8;
    --nx-divider: #e9eef2;
    --nx-row-hover: #f3f7fb;
    --nx-row-selected: #e4eef8;
    --nx-graphite: #1b2530;
    --nx-side-text: #c3d0dc;
    --nx-side-section: #8193a5;
    --nx-side-hover: #243140;
    --nx-side-active: #2d3d4f;
    --nx-side-divider: #33424f;
    --nx-side-edge: #111920;
    --nx-ink: #1b2530;
    --nx-ink-strong: #34495c;
    --nx-ink-muted: #56697c;
    --nx-ink-faint: #738497;
    --nx-brand: #3270ab;
    --nx-brand-dark: #25527d;
    --nx-brand-light: #edf3f9;
    --nx-lime: #b6e34a;
    --nx-lime-deep: #9ac63a;
    --nx-ok: #1a6e2e; --nx-ok-fill: #eaf5ec; --nx-ok-line: #a8d3b2;
    --nx-warn: #8f5600; --nx-warn-dot: #b76e00; --nx-warn-fill: #fcf5e8; --nx-warn-line: #e2bf85;
    --nx-err: #b42318; --nx-err-fill: #fdf0ef; --nx-err-line: #edb1ab;
    --nx-info: #25527d; --nx-info-fill: #edf3f9; --nx-info-line: #a9c6e3;
    --nx-neutral: #4f6173; --nx-neutral-fill: #f2f5f8; --nx-neutral-line: #c6d0da;
    --nx-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --nx-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font: 13px/1.4 var(--nx-sans); color: var(--nx-ink); background: var(--nx-canvas); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
svg { display: block; }

#nx-app { display: flex; flex-direction: column; height: 100%; }
.nx-mono { font-family: var(--nx-mono); font-size: 11.5px; }
.nx-muted { color: var(--nx-ink-muted); }
.nx-strong { font-weight: 600; }
.nx-sub { display: block; font-size: 12px; color: var(--nx-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- striscia del cliente e barra superiore */
.nx-stripe { flex: 0 0 3px; transition: background-color .3s ease; }
.nx-appbar { flex: 0 0 36px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 12px; background: var(--nx-graphite); border-bottom: 1px solid var(--nx-side-edge); color: var(--nx-side-text); min-width: 0; }
.nx-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font: 500 12px var(--nx-mono); letter-spacing: 1.4px; color: #fff; }
.nx-brand img { width: 18px; height: 18px; }
.nx-brand b { font-weight: 500; color: var(--nx-lime); }
.nx-divider { width: 1px; height: 16px; background: var(--nx-side-divider); flex-shrink: 0; }
.nx-slash { color: var(--nx-side-section); }
.nx-chip { position: relative; display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.nx-chip i { position: absolute; left: 9px; width: 8px; height: 8px; pointer-events: none; }
.nx-chip select { height: 26px; min-width: 0; max-width: 300px; padding: 0 26px 0 8px; border: 1px solid var(--nx-side-divider); border-radius: 3px; background: var(--nx-side-hover) no-repeat right 8px center / 10px 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238193a5' stroke-width='1.4'/%3E%3C/svg%3E"); color: #e6ecf2; font-size: 12.5px; font-weight: 500; -webkit-appearance: none; appearance: none; cursor: pointer; }
.nx-chip.nx-has-dot select { padding-left: 24px; min-width: 210px; }
.nx-chip select:hover { background-color: var(--nx-side-active); border-color: var(--nx-side-section); color: #fff; }
.nx-chip select option { color: var(--nx-ink); background: #fff; }
.nx-appbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.nx-service { display: flex; align-items: center; gap: 6px; margin-right: 8px; font-size: 12px; white-space: nowrap; }
.nx-service i { width: 7px; height: 7px; border-radius: 50%; background: #5cc77a; }
.nx-service.nx-running i { background: #6fa5d8; }
.nx-user { display: flex; align-items: center; gap: 6px; margin: 0 4px 0 8px; white-space: nowrap; }
.nx-user strong { color: #fff; font-weight: 500; font-size: 12.5px; }
.nx-user span { color: var(--nx-side-section); font-size: 12px; }
.nx-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--nx-side-text); cursor: pointer; }
.nx-icon-btn:hover { background: var(--nx-side-hover); border-color: var(--nx-side-divider); color: #fff; }
.nx-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------------------------------------------------------------- barra laterale */
.nx-body { flex: 1 1 auto; display: flex; min-height: 0; }
.nx-side { flex: 0 0 212px; width: 212px; display: flex; flex-direction: column; padding: 6px; background: var(--nx-graphite); border-right: 1px solid var(--nx-side-edge); transition: flex-basis .18s ease, width .18s ease; overflow: hidden; }
.nx-side.nx-compact { flex-basis: 52px; width: 52px; }
.nx-nav { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
.nx-nav-section { margin: 12px 0 4px 8px; font: 10px var(--nx-mono); letter-spacing: .8px; color: var(--nx-side-section); white-space: nowrap; }
.nx-nav-sep { height: 1px; margin: 6px; background: var(--nx-side-divider); }
.nx-nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; margin-bottom: 1px; padding: 0 8px; border: 0; border-radius: 3px; background: transparent; color: var(--nx-side-text); font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; }
.nx-nav-item .nx-ic { color: var(--nx-side-section); }
.nx-nav-item:hover { background: var(--nx-side-hover); color: #fff; }
.nx-nav-item:hover .nx-ic, .nx-nav-item.nx-active .nx-ic { color: #fff; }
.nx-nav-item.nx-active { background: var(--nx-side-active); color: #fff; font-weight: 600; }
.nx-nav-item.nx-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--nx-lime); }
.nx-compact .nx-nav-item { justify-content: center; padding: 0; }
.nx-compact .nx-nav-item span, .nx-compact .nx-nav-section, .nx-compact .nx-side-logo { display: none; }
.nx-side-foot { flex-shrink: 0; padding-top: 5px; border-top: 1px solid var(--nx-side-divider); margin: 0 2px; }
.nx-side-logo { display: block; width: 112px; margin: 12px 0 4px 8px; }
.nx-flipped .nx-ic { transform: rotate(180deg); }

/* ---------------------------------------------------------------- pagina */
.nx-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.nx-pagehead { flex-shrink: 0; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 16px; background: var(--nx-surface); border-bottom: 1px solid var(--nx-line); }
.nx-pagehead h1 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nx-context { font: 11.5px var(--nx-mono); color: var(--nx-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nx-pagehead .nx-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
.nx-toolbar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--nx-surface-alt); border-bottom: 1px solid var(--nx-line); flex-wrap: wrap; }
.nx-toolbar .nx-actions { margin-left: auto; display: flex; gap: 8px; }
.nx-content { flex: 1 1 auto; overflow: auto; padding: 12px; }
.nx-stack > * + * { margin-top: 12px; }
.nx-hint { margin: 10px 2px 0; font-size: 12px; line-height: 17px; color: var(--nx-ink-muted); }

/* ---------------------------------------------------------------- pannelli, tabelle, tag */
.nx-panel { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 4px; overflow: hidden; }
.nx-panelhead { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; border-bottom: 1px solid var(--nx-line); }
.nx-panelhead h2 { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.nx-panelhead .nx-right { margin-left: auto; }
.nx-count { font: 11px var(--nx-mono); color: var(--nx-ink-muted); }
.nx-panelfoot { padding: 5px 12px; background: var(--nx-surface-alt); border-top: 1px solid var(--nx-line); font-size: 12px; color: var(--nx-ink-muted); }
.nx-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--nx-divider); }
.nx-row:last-child { border-bottom: 0; }
.nx-row > div:first-child { flex: 1 1 auto; min-width: 0; }
.nx-table { width: 100%; border-collapse: collapse; }
.nx-table th { height: 28px; padding: 0 12px; background: var(--nx-header); border-bottom: 1px solid var(--nx-line); font: 10px var(--nx-mono); letter-spacing: .5px; color: var(--nx-ink-muted); text-align: left; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.nx-table td { padding: 6px 12px; border-bottom: 1px solid var(--nx-divider); vertical-align: middle; }
.nx-table tbody tr { cursor: default; }
.nx-table tbody tr:hover td { background: var(--nx-row-hover); }
.nx-table tbody tr.nx-sel td { background: var(--nx-row-selected); }
.nx-table tbody tr[data-open] { cursor: pointer; }
.nx-scroll { overflow: auto; }
.nx-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 0 5px; border: 1px solid var(--nx-neutral-line); border-radius: 2px; background: var(--nx-neutral-fill); color: var(--nx-neutral); font: 500 10.5px var(--nx-mono); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.nx-tag-ok { border-color: var(--nx-ok-line); background: var(--nx-ok-fill); color: var(--nx-ok); }
.nx-tag-warn { border-color: var(--nx-warn-line); background: var(--nx-warn-fill); color: var(--nx-warn); }
.nx-tag-err { border-color: var(--nx-err-line); background: var(--nx-err-fill); color: var(--nx-err); }
.nx-tag-info { border-color: var(--nx-info-line); background: var(--nx-info-fill); color: var(--nx-info); }
.nx-tag-live { animation: nx-pulse 1.2s ease-in-out infinite; }
@keyframes nx-pulse { 50% { opacity: .55; } }
.nx-err-text { color: var(--nx-err); font-size: 12px; }
.nx-warn-text { color: var(--nx-warn); }
.nx-ok-text { color: var(--nx-ok); }
.nx-sq { display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: 1px; }

/* ---------------------------------------------------------------- pulsanti e campi */
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--nx-line-strong); border-radius: 3px; background: var(--nx-surface); color: var(--nx-ink); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.nx-btn:hover { background: var(--nx-surface-alt); border-color: #3e5468; }
.nx-btn:disabled { opacity: .5; cursor: default; }
.nx-btn-primary { border-color: var(--nx-brand); background: var(--nx-brand); color: #fff; font-weight: 600; }
.nx-btn-primary:hover { border-color: var(--nx-brand-dark); background: var(--nx-brand-dark); }
.nx-btn-outline { border-color: var(--nx-info-line); color: var(--nx-brand); font-weight: 500; }
.nx-btn-outline:hover { border-color: var(--nx-brand); background: var(--nx-brand-light); color: var(--nx-brand-dark); }
.nx-btn-danger { border-color: var(--nx-err-line); color: var(--nx-err); }
.nx-btn-danger:hover { border-color: var(--nx-err); background: var(--nx-err-fill); }
.nx-link { padding: 0; border: 0; background: none; color: var(--nx-brand); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.nx-link:hover { color: var(--nx-brand-dark); }
.nx-input, .nx-select { height: 28px; padding: 0 8px; border: 1px solid #b9c6d3; border-radius: 3px; background: #fff; font-size: 12.5px; }
.nx-input:focus, .nx-select:focus { outline: none; border-color: var(--nx-brand); }
.nx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.nx-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--nx-brand); }

/* ---------------------------------------------------------------- numeri: striscia e caselle */
.nx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nx-kpi { padding: 10px 12px 11px 14px; border-left: 1px solid var(--nx-divider); min-width: 0; }
.nx-kpi:first-child { border-left: 0; }
button.nx-kpi { border-top: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; cursor: pointer; }
button.nx-kpi:hover { background: var(--nx-row-hover); }
.nx-kpi-label, .nx-tile-label, .nx-info-label { display: block; font: 10px var(--nx-mono); letter-spacing: .8px; color: var(--nx-ink-muted); text-transform: uppercase; white-space: nowrap; }
.nx-kpi-value { display: block; font-size: 22px; font-weight: 600; line-height: 28px; }
.nx-tiles { display: grid; gap: 8px; }
.nx-tile { padding: 9px 12px 10px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 4px; min-width: 0; }
.nx-tile-label { letter-spacing: .5px; }
.nx-tile-value { display: block; font-size: 18px; font-weight: 600; line-height: 24px; }
.nx-tile-detail { display: block; font-size: 12px; color: var(--nx-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-info { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 10px 12px; }
.nx-info-label { letter-spacing: .5px; text-transform: none; }
.nx-info-value { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-v-warn { color: var(--nx-warn); }
.nx-v-err { color: var(--nx-err); }

/* ---------------------------------------------------------------- disposizioni */
.nx-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.nx-split .nx-table th, .nx-split .nx-table td { padding-left: 8px; padding-right: 8px; }
.nx-split .nx-table th:first-child, .nx-split .nx-table td:first-child { padding-left: 12px; }
.nx-master { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.nx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nx-list-item { display: block; width: 100%; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--nx-divider); background: none; text-align: left; cursor: pointer; }
.nx-list-item:hover { background: var(--nx-row-hover); }
.nx-list-item.nx-sel { background: var(--nx-row-selected); }
.nx-list-item .nx-tag { margin-top: 4px; }

/* ---------------------------------------------------------------- barre dei messaggi */
.nx-bar { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--nx-info-line); border-radius: 3px; background: var(--nx-info-fill); color: var(--nx-info); font-size: 12.5px; }
.nx-bar-warn { border-color: var(--nx-warn-line); background: var(--nx-warn-fill); color: var(--nx-warn); }
.nx-bar-ok { border-color: var(--nx-ok-line); background: var(--nx-ok-fill); color: var(--nx-ok); }
.nx-bar-err { border-color: var(--nx-err-line); background: var(--nx-err-fill); color: var(--nx-err); }

/* ---------------------------------------------------------------- occupazione */
.nx-usage { height: 6px; border-radius: 1px; background: #e3eaf1; overflow: hidden; }
.nx-usage span { display: block; height: 100%; background: var(--nx-brand); }
.nx-usage.nx-warn span { background: var(--nx-warn-dot); }
.nx-usage.nx-err span { background: var(--nx-err); }
.nx-big { font-size: 22px; font-weight: 600; }
.nx-figure { font-size: 15px; font-weight: 600; }

/* ---------------------------------------------------------------- grafici */
.nx-chart { position: relative; padding: 8px; }
.nx-chart-head { display: flex; align-items: center; gap: 14px; margin: 0 4px 6px 2px; min-height: 18px; }
.nx-chart-unit { font: 10px var(--nx-mono); letter-spacing: .5px; color: var(--nx-ink-muted); }
.nx-legend { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; font-size: 12px; color: var(--nx-ink-strong); }
.nx-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nx-legend i { width: 14px; height: 3px; border-radius: 1px; }
.nx-legend .nx-dash { color: var(--nx-ink-muted); }
.nx-legend .nx-dash i { height: 0; border-top: 1.5px dashed; background: none !important; opacity: .8; }
.nx-plot { position: relative; }
.nx-plot svg { width: 100%; height: auto; overflow: visible; }
.nx-plot text { font: 10.5px var(--nx-mono); fill: #738497; }
.nx-cross { position: absolute; top: 0; width: 1px; background: #8193a5; pointer-events: none; display: none; }
.nx-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border: 1.5px solid #fff; border-radius: 50%; pointer-events: none; display: none; box-sizing: content-box; }
.nx-tip { position: absolute; top: 6px; z-index: 3; padding: 7px 9px; background: #fff; border: 1px solid #c6d0da; border-radius: 3px; box-shadow: 0 2px 8px rgba(27, 37, 48, .12); pointer-events: none; display: none; white-space: nowrap; }
.nx-tip-time { margin-bottom: 4px; font: 11px var(--nx-mono); color: var(--nx-ink-muted); }
.nx-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--nx-ink-strong); }
.nx-tip-row i { width: 8px; height: 8px; }
.nx-tip-row b { margin-left: auto; padding-left: 16px; font: 400 11.5px var(--nx-mono); }

/* ---------------------------------------------------------------- dialoghi */
.nx-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 24, 32, .45); }
.nx-dialog { display: flex; flex-direction: column; width: 100%; max-width: 480px; max-height: 100%; background: #fff; border: 1px solid var(--nx-line-strong); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); overflow: hidden; }
.nx-dialog.nx-wide { max-width: 980px; height: 100%; background: var(--nx-canvas); }
.nx-dialog-body { flex: 1 1 auto; overflow: auto; padding: 18px 22px; }
.nx-dialog-foot { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; background: var(--nx-surface-alt); border-top: 1px solid var(--nx-line); }
.nx-dialog h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600; }
.nx-field { margin-bottom: 10px; }
.nx-field label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--nx-ink-strong); }
.nx-field .nx-input, .nx-field .nx-select { width: 100%; }
.nx-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 4px; }
.nx-about { text-align: center; }
.nx-about img.nx-about-icon { width: 72px; height: 72px; }
.nx-about-name { margin-top: 10px; font: 500 20px var(--nx-mono); letter-spacing: 2px; }
.nx-about-name b { font-weight: 500; color: var(--nx-lime-deep); }
.nx-about-box { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 7px 0; margin-top: 18px; padding: 9px 12px 10px; border: 1px solid var(--nx-line); border-radius: 4px; text-align: left; }
.nx-about-box span:nth-child(odd) { padding-top: 3px; font: 10px var(--nx-mono); letter-spacing: .8px; color: var(--nx-ink-muted); }
.nx-about-dev { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--nx-line); }
.nx-about-dev img { display: block; width: 222px; margin: 10px auto; }
.nx-log { margin: 0; padding: 10px 12px; max-height: 340px; overflow: auto; border-radius: 4px; background: #121b24; color: #d5dee7; font: 11.5px/1.6 var(--nx-mono); white-space: pre-wrap; }
.nx-log em { font-style: normal; color: #8193a5; }

/* ---------------------------------------------------------------- avvisi e fascia della simulazione */
.nx-notice { position: fixed; left: 50%; bottom: 40px; z-index: 35; max-width: calc(100% - 32px); padding: 8px 12px; transform: translateX(-50%); border: 1px solid var(--nx-info-line); border-radius: 3px; background: #fff; color: var(--nx-info); font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.nx-notice.nx-ok { border-color: var(--nx-ok-line); color: var(--nx-ok); }
.nx-sim { position: fixed; right: .9rem; bottom: 2.1rem; z-index: 40; display: flex; align-items: center; gap: .5rem; max-width: calc(100% - 1.8rem); padding: .4rem .8rem; border-radius: 999px; background: rgba(27, 37, 48, .9); color: #fff; font-size: .8rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); pointer-events: none; }
.nx-sim::before { content: ""; flex-shrink: 0; width: .5rem; height: .5rem; border-radius: 50%; background: var(--nx-lime); }

/* ---------------------------------------------------------------- barra di stato */
.nx-status { flex: 0 0 24px; display: flex; align-items: center; gap: 14px; padding: 0 10px; background: var(--nx-statusbar); border-top: 1px solid var(--nx-line); font: 10.5px var(--nx-mono); color: var(--nx-ink-strong); white-space: nowrap; overflow: hidden; }
.nx-status .nx-right { margin-left: auto; }
.nx-status i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 0; }

/* ---------------------------------------------------------------- schermi stretti */
/* Nella landing l'iframe e' largo quanto la pagina: sotto i 1100 px la colonna di destra della panoramica va
   sotto, sotto i 760 px (telefoni, iframe alto 620 px) la barra laterale resta ridotta alle icone e le
   tabelle tengono le colonne essenziali. */
/* Fra 1100 e 1180 px (l'iframe su un portatile da 1366 e' largo 1108) la tabella dei cluster accanto alla
   colonna di destra sta giusta: celle un po' piu' strette, cosi' la colonna «VM» resta in vista. */
@media (min-width: 1101px) and (max-width: 1180px) {
    .nx-split .nx-table th, .nx-split .nx-table td { padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1100px) {
    .nx-split { grid-template-columns: minmax(0, 1fr); }
    .nx-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .nx-side { flex-basis: 52px; width: 52px; }
    .nx-side .nx-nav-item { justify-content: center; padding: 0; }
    .nx-side .nx-nav-item span, .nx-side .nx-nav-section, .nx-side .nx-side-logo, .nx-side [data-toggle-nav] { display: none; }
    .nx-user, .nx-service span, .nx-period, .nx-slash, .nx-hide-sm { display: none; }
    .nx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-kpi:nth-child(odd) { border-left: 0; }
    .nx-kpi { border-bottom: 1px solid var(--nx-divider); }
    .nx-master, .nx-two { grid-template-columns: minmax(0, 1fr); }
    /* Le pagine fissano le colonne delle tessere nello stile dell'elemento: sul telefono due per riga. */
    .nx-info, .nx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .nx-context { display: none; }
    .nx-chip.nx-has-dot select { min-width: 0; max-width: 170px; }
    .nx-table td, .nx-table th { padding-left: 8px; padding-right: 8px; }
    .nx-sim { bottom: 2rem; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nx-tag-live { animation: none; }
    .nx-side, .nx-stripe { transition: none; }
}