/* ============================================================
   Integry Control Panel — Design System «CAL» (Cal.com)
   Registro: product UI densa (monitoraggio flotta) sul linguaggio CAL.
   Canvas bianco, azioni near-black, tipografia Inter (sostituto Cal Sans
   = Inter 600 con tracking negativa), card hairline, badge-pill, angoli
   gerarchici (8px controlli, 12px card, 16px contenitori, pill).
   Temi chiaro (mondo nativo CAL) e scuro (token surface-dark dello spec).
   ============================================================ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

:root {
    /* Light — mondo nativo CAL */
    --bg:           #ffffff;
    --surface:      #ffffff;
    --surface-2:    #f8f9fa;
    --surface-card: #f5f5f5;
    --surface-strong: #e5e7eb;
    --ink:          #111111;
    --muted:        #6b7280;
    --faint:        #898989;
    --border:       #e5e7eb;
    --border-hi:    #d1d5db;
    --hairline-soft:#f3f4f6;

    --primary:        #111111;
    --primary-active: #242424;
    --on-primary:     #ffffff;

    --accent:        #3b82f6;
    --accent-strong: #2563eb;
    --accent-dim:    rgba(59, 130, 246, 0.10);

    --ok:   #059669;  --ok-bg:   rgba(16, 185, 129, 0.12);
    --warn: #d97706;  --warn-bg: rgba(245, 158, 11, 0.14);
    --err:  #dc2626;  --err-bg:  rgba(239, 68, 68, 0.11);

    --deemph:     #e5e7eb;
    --chart-grid: #e5e7eb;

    --nav-bg: rgba(255, 255, 255, 0.85);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);

    color-scheme: light;

    /* Geometria e motion */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 120ms;
    --t-med: 200ms;
    --z-nav: 10;
    --z-toast: 20;
    --z-modal: 100;
}

[data-theme="dark"] {
    --bg:           #0b0b0c;
    --surface:      #141416;
    --surface-2:    #1a1a1a;
    --surface-card: #1a1a1a;
    --surface-strong: #2a2a2e;
    --ink:          #ffffff;
    --muted:        #a1a1aa;
    --faint:        #71717a;
    --border:       #26262a;
    --border-hi:    #3a3a3f;
    --hairline-soft:#1f1f22;

    --primary:        #ffffff;
    --primary-active: #e4e4e7;
    --on-primary:     #111111;

    --accent:        #60a5fa;
    --accent-strong: #93c5fd;
    --accent-dim:    rgba(96, 165, 250, 0.14);

    --ok:   #34d399;  --ok-bg:   rgba(52, 211, 153, 0.14);
    --warn: #fbbf24;  --warn-bg: rgba(251, 191, 36, 0.14);
    --err:  #f87171;  --err-bg:  rgba(248, 113, 113, 0.15);

    --deemph:     #2a2a2e;
    --chart-grid: #26262a;

    --nav-bg: rgba(11, 11, 12, 0.85);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* Fallback senza JS: segue il sistema */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg:#0b0b0c; --surface:#141416; --surface-2:#1a1a1a; --surface-card:#1a1a1a; --surface-strong:#2a2a2e;
        --ink:#ffffff; --muted:#a1a1aa; --faint:#71717a; --border:#26262a; --border-hi:#3a3a3f; --hairline-soft:#1f1f22;
        --primary:#ffffff; --primary-active:#e4e4e7; --on-primary:#111111;
        --accent:#60a5fa; --accent-strong:#93c5fd; --accent-dim:rgba(96,165,250,0.14);
        --ok:#34d399; --ok-bg:rgba(52,211,153,0.14); --warn:#fbbf24; --warn-bg:rgba(251,191,36,0.14);
        --err:#f87171; --err-bg:rgba(248,113,113,0.15);
        --deemph:#2a2a2e; --chart-grid:#26262a;
        --nav-bg:rgba(11,11,12,0.85); --shadow-1:0 1px 2px rgba(0,0,0,0.4); --shadow-2:0 6px 20px rgba(0,0,0,0.5);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background var(--t-med) ease, color var(--t-med) ease;
}

main { max-width: 1240px; margin: 0 auto; padding: 26px 24px 80px; }

/* ---------- Tipografia (CAL: display = Inter 600 tracking negativa) ---------- */
h1, .display {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
}
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; margin: 0; color: var(--ink); }
h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--ink); }

.label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

a { color: var(--ink); }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.strong { font-weight: 600; color: var(--ink); }
.dim { color: var(--muted); font-weight: 400; }

/* ---------- Topnav 64px (CAL: canvas + blur + hairline-soft) ---------- */
.topnav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 64px;
    padding: 0 24px;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--hairline-soft);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 22px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.3px;
}
.brand-mark {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    background: var(--ink);
    flex: none;
    padding: 3px;
}
.brand-mark rect { fill: var(--on-primary); }

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav-link:hover { color: var(--ink); background: var(--surface-2); }
.nav-link.active { color: var(--ink); background: var(--surface-2); }
.nav-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 11px;
    font-weight: 600;
    display: inline-grid;
    place-items: center;
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.icon-button:hover { color: var(--ink); border-color: var(--ink); }
.icon-button svg { width: 16px; height: 16px; display: none; }
[data-theme-pref="light"]  .icon-button .i-light,
[data-theme-pref="dark"]   .icon-button .i-dark,
[data-theme-pref="system"] .icon-button .i-system { display: block; }

.link-button {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 8px 12px;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background var(--t-fast) ease;
}
.link-button:hover { background: var(--surface-2); }
.logout-form { display: contents; }

/* ---------- Intestazione pagina ---------- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 0 24px;
}
.page-header .subtitle {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    max-width: 70ch;
}
.page-header .display .dim { color: var(--muted); font-weight: 400; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--faint);
}
.breadcrumb a, .breadcrumb .bc { color: var(--muted); text-decoration: none; cursor: pointer; }
.breadcrumb a:hover, .breadcrumb .bc:hover { color: var(--ink); text-decoration: underline; }

.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--muted);
}
.live-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--ok);
    animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* ---------- Riga KPI: celle unite da hairline (card CAL r-lg) ---------- */
.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    margin-bottom: 4px;
}
.kpi {
    padding: 18px 20px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.kpi:last-child { border-right: none; }
.kpi-value {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.kpi-value .unit { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.kpi-sub {
    font-size: 12.5px;
    color: var(--faint);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    flex-wrap: wrap;
}
.kpi-sub .alert { color: var(--err); font-weight: 600; }
a.kpi { color: inherit; text-decoration: none; transition: background var(--t-fast) ease; }
a.kpi:hover { background: var(--surface-2); }

.meter {
    width: 100%;
    height: 5px;
    margin-top: 2px;
    border-radius: 9999px;
    background: var(--surface-strong);
    overflow: hidden;
}
.meter > i {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--ok);
    transform-origin: left center;
    animation: growX 0.7s var(--ease);
}
.meter.warn > i { background: var(--warn); }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Pannelli e sezioni ---------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px 0;
}
.panel-head h2 { font-size: 15px; }
.panel-body { padding: 14px 20px 18px; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    color: var(--ink);
}
.key-value {
    display: inline-block;
    font-size: 15px;
    padding: 6px 10px;
    margin: 2px 0 8px;
    word-break: break-all;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.section { margin-top: 28px; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.hint { font-size: 12.5px; color: var(--faint); }
.subhead { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }

/* ---------- Barre orizzontali (monocromo, emph = ink) ---------- */
.hbar-chart { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hbar {
    display: grid;
    grid-template-columns: minmax(96px, 140px) 1fr 3ch;
    align-items: center;
    gap: 12px;
}
.hbar-label {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbar-track { display: block; min-width: 0; }
.hbar-fill {
    display: block;
    height: 14px;
    border-radius: 0 6px 6px 0;
    background: var(--surface-strong);
    transform-origin: left center;
    animation: growX 0.7s var(--ease);
    min-width: 3px;
}
.hbar-fill.zero { display: none; }
.hbar.emph .hbar-fill { background: var(--ink); }
.hbar.emph .hbar-label { color: var(--ink); font-weight: 600; }
.hbar-value {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    text-align: right;
}
.hbar.emph .hbar-value { color: var(--ink); font-weight: 600; }

.legend-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--faint); }
.legend-key::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }

/* ---------- Sparkline area (flex fino a ~6 per riga) ---------- */
.charts { display: flex; flex-wrap: wrap; gap: 16px; }
.chart {
    flex: 1 1 190px;
    min-width: 168px;
    max-width: 360px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
.chart figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.chart .chart-title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.chart .chart-value { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart .chart-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.chart svg { display: block; width: 100%; height: auto; margin-top: 8px; }

.spark-area { fill: var(--ink); opacity: 0.06; }
.spark-line {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: drawLine 0.9s var(--ease);
}
@keyframes drawLine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.spark-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.spark-base { stroke: var(--chart-grid); stroke-width: 1; }

/* Crescita size a componenti: tre serie sulla stessa scala (max dei totali).
   spark-data = componente dominante (blu accent), index/log = tinte ok/warn
   già del design system, teniamo il totale come area di sfondo tenue. */
.spark-data  { stroke: var(--accent); stroke-width: 1.6; }
.spark-index { stroke: var(--ok);     stroke-width: 1.6; }
.spark-log   { stroke: var(--warn);   stroke-width: 1.6; }

/* ---------- Tabelle dense in card CAL ---------- */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: auto; /* clip agli angoli arrotondati + scroll orizzontale su tabelle larghe */
}
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
table.data th.num { text-align: right; }
table.data td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--hairline-soft);
    vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background 100ms ease; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--surface-strong);
}
table.data a:hover { border-bottom-color: var(--ink); }

/* ---------- Tabella dinamica (ricerca, sort, resize) ---------- */
.table-toolbar { display: flex; align-items: center; gap: 12px; }
.search-input { width: 280px; max-width: 48vw; }
table.sortable th[data-key] { position: relative; cursor: pointer; user-select: none; }
table.sortable th .sort-caret { margin-left: 6px; font-size: 9px; color: var(--muted); vertical-align: middle; }
table.sortable th.sorted { color: var(--ink); }
table.sortable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.sortable th .col-resizer {
    position: absolute; top: 0; right: 0; width: 8px; height: 100%;
    cursor: col-resize; user-select: none; touch-action: none;
}
table.sortable th .col-resizer:hover { background: var(--border); }
.empty-inline { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- Pill di stato (CAL badge-pill + colore semantico) ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 9999px; background: currentColor; flex: none; }
.pill.ok      { color: var(--ok);   background: var(--ok-bg); }
.pill.warn    { color: var(--warn); background: var(--warn-bg); }
.pill.err     { color: var(--err);  background: var(--err-bg); }
.pill.neutral { color: var(--muted); background: var(--surface-card); }
.pill.plain   { color: var(--ink);  background: var(--surface-card); }
.pill.plain::before { display: none; }

.outdated { color: var(--warn); font-weight: 600; }

/* ---------- nav-pill-group (componente firma CAL) ---------- */
.pill-group { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 9999px; padding: 5px; }
.pill-group button {
    border: none; background: none; border-radius: 9999px; padding: 6px 14px;
    font: inherit; font-weight: 500; font-size: 13px; color: var(--muted); cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-med);
}
.pill-group button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ---------- Application Info (info secondarie, per DB) ---------- */
.appinfo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.appinfo-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.appinfo-head {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px; font-weight: 600; color: var(--ink);
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; word-break: break-all;
}
.appinfo-head svg { width: 14px; height: 14px; stroke: var(--muted); stroke-width: 1.7; fill: none; flex: none; }
.appinfo-props { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; margin: 0; }
.appinfo-props dt { color: var(--muted); font-size: 13px; }
.appinfo-props dd { margin: 0; text-align: right; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.appinfo-foot {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 12px; display: flex; align-items: center; gap: 8px;
}

/* ---------- Dettaglio istanza (stat tiles + gruppi) ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-tile .k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.stat-tile .v { font-size: 19px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.stat-tile .s { font-size: 12px; color: var(--faint); }
.info-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.info-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.info-group h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline-soft); display: flex; align-items: center; gap: 8px; }
.info-group h3 svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 1.7; fill: none; flex: none; }
.info-group dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0; }
.info-group dt { color: var(--muted); font-size: 13px; white-space: nowrap; }
.info-group dd { margin: 0; text-align: right; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.maint { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.maint p { margin: 0; color: var(--muted); font-size: 13px; max-width: 60ch; }

/* ---------- Flash ---------- */
.flash-holder { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 14px;
    box-shadow: var(--shadow-1);
    animation: flashIn 0.25s var(--ease);
}
.flash::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; flex: none; }
.flash.ok  { color: var(--ok); }
.flash.ok::before  { background: var(--ok); }
.flash.err { color: var(--err); }
.flash.err::before { background: var(--err); }
@keyframes flashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Liste proprietà ---------- */
dl.props {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 20px;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    font-size: 13.5px;
}
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }

/* ---------- Stato vuoto ---------- */
.empty { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; }
.empty strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; font-size: 15px; }
.empty p { margin: 0 auto; max-width: 52ch; }

/* ---------- Bottoni e form (CAL: primary near-black, r-md 8px) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.btn:hover { background: var(--primary-active); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.danger { background: var(--err); color: #fff; }
.btn.danger:hover { filter: brightness(1.06); }
.btn.quiet {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    font-weight: 600;
}
.btn.quiet:hover { background: var(--surface); border-color: var(--ink); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }

:is(.btn, .link-button, .icon-button, input, select, a, button, summary):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: var(--radius);
}

input, select {
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    min-width: 0;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
input::placeholder { color: var(--muted); }
input:focus, select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--border);
}

.assign-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.assign-form select { max-width: 220px; }
.assign-form input { max-width: 160px; }

/* ---------- Zona pericolosa ---------- */
.danger-zone {
    margin-top: 32px;
    border: 1px solid var(--err);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 18px 20px 20px;
}
.danger-zone h2 { color: var(--err); margin-bottom: 6px; }
.danger-zone p { margin: 0 0 14px; color: var(--muted); }

/* ---------- Login ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
    margin: 0;
}
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    padding: 34px 36px 36px;
    width: min(380px, calc(100vw - 32px));
    animation: flashIn 0.3s var(--ease);
}
.login-card .brand-mark { width: 40px; height: 40px; border-radius: var(--radius-lg); margin-bottom: 18px; padding: 6px; }
.login-card h1 { font-size: 22px; letter-spacing: -0.4px; }
.login-card .subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.login-card input { height: 40px; }
.login-card .btn { justify-content: center; height: 44px; margin-top: 6px; }

/* ---------- Modale dettaglio ingest (CAL: card r-xl, shadow-2) ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 24px;
    animation: flashIn 0.15s ease;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2); width: min(760px, 100%); max-height: 86vh;
    display: flex; flex-direction: column; overflow: hidden; animation: modalPop 0.18s var(--ease);
}
@keyframes modalPop { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 16px; }
.modal-close {
    margin-left: auto; width: 34px; height: 34px; border-radius: 9999px; display: grid; place-items: center;
    color: var(--muted); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: 0.15s;
}
.modal-close:hover { color: var(--ink); border-color: var(--ink); }
.modal-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.modal-body { padding: 18px 20px 20px; overflow: auto; }
.modal-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px;
}
.modal-meta .m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.modal-meta .mk { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.modal-meta .mv { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.modal-section { margin-top: 18px; }
.modal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.modal-section-head h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.modal-tools { display: flex; align-items: center; gap: 8px; }
.modal .log-block { max-height: 44vh; }
.payload-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; color: var(--muted); display: block; max-width: 360px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }

/* ---------- HTMX: transizione dei frammenti ---------- */
.htmx-swapping { opacity: 0; transition: opacity var(--t-fast) ease-in; }
.htmx-settling { animation: settleIn var(--t-med) var(--ease); }
@keyframes settleIn { from { opacity: 0.4; } to { opacity: 1; } }

/* ---------- Blocco log / details ---------- */
details { margin: 0; }
summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 13px; }
.log-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 8px 0 0;
    padding: 12px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 22rem;
    overflow: auto;
    white-space: pre;
    color: var(--muted);
}

/* ---------- Layout responsive ---------- */
@media (max-width: 720px) {
    main { padding: 20px 16px 70px; }
    .topnav { padding: 0 16px; }
    .brand span { display: none; }
    .search-input { width: 200px; }
    dl.props { grid-template-columns: 1fr; gap: 2px 0; }
    dl.props dt { margin-top: 10px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Log ingest — barra filtri e paginazione */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.filter-bar .field { display: flex; flex-direction: column; gap: 4px; }
.filter-bar .field.grow { flex: 1 1 240px; }
.filter-bar .field > span { font-size: 12px; color: var(--muted); }
.filter-bar select, .filter-bar input { min-width: 140px; }
.filter-bar .field.grow input { width: 100%; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }

/* ---------- Host: barra RAM dedicata/in uso vs fisica ---------- */
.ram-bar { display: flex; flex-direction: column; gap: 8px; }
.ram-bar-track { position: relative; height: 22px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ram-bar-dedicated { position: absolute; inset: 0 auto 0 0; height: 100%; background: color-mix(in srgb, var(--accent) 28%, transparent); }
.ram-bar-used { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--accent); }
.ram-bar-legend { display: flex; gap: 18px; font-size: 12px; }

/* ---------- Card riepilogo con donut (RAM / disco) ---------- */
.summary-card { flex-direction: row; align-items: center; gap: 18px; }
.summary-card.wide { grid-column: span 2; }
@media (max-width: 620px) { .summary-card { flex-direction: column; align-items: stretch; } .summary-card.wide { grid-column: auto; } }

.donut { position: relative; width: 108px; height: 108px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--surface-strong); stroke-width: 5; }
.donut-seg { fill: none; stroke-width: 5; stroke-linecap: butt; transition: stroke-dasharray .3s ease; }
.donut-seg.heap { stroke: var(--accent); }
.donut-seg.sql  { stroke: var(--ok); }
.donut-seg.disk { stroke: var(--accent); }
.donut.warn .donut-seg.disk { stroke: var(--warn); }
.donut.warn .donut-seg.heap { stroke: var(--warn); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-center .dc-v { font-size: 16px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.donut-center .dc-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

.summary-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.summary-legend .sl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.summary-legend .sl-head .k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.sl-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sl-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sl-row .sw.heap { background: var(--accent); }
.sl-row .sw.sql  { background: var(--ok); }
.sl-row .sw.free { background: var(--surface-strong); }
.sl-row .sw.disk { background: var(--accent); }
.sl-row .lbl { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-row .val { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sl-row .pct { color: var(--faint); font-size: 12px; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.sl-row.sub { font-size: 12px; }
.sl-row.sub .lbl { color: var(--faint); }
.sl-row.sub .val { font-weight: 500; color: var(--muted); }

/* ---------- Sezioni storiche secondarie (collassabili) ---------- */
details.disclosure { border-top: 1px solid var(--border); }
details.disclosure > summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 2px; color: var(--muted);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before {
    content: "›"; display: inline-block; color: var(--faint); font-size: 15px;
    transition: transform .15s ease;
}
details.disclosure[open] > summary::before { transform: rotate(90deg); }
details.disclosure > summary h2 { font-size: 13px; font-weight: 600; color: var(--muted); }
details.disclosure[open] > summary h2 { color: var(--ink); }
details.disclosure > summary:hover h2 { color: var(--ink); }
details.disclosure > .table-wrap,
details.disclosure > .panel { margin: 4px 0 14px; }

/* ---------- Tooltip (data-tip): spiega una metrica senza occupare la cella ---------- */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--on-primary);
    padding: 7px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    width: max-content;
    max-width: 260px;
    z-index: 60;
    pointer-events: none;
    box-shadow: var(--shadow-2);
    animation: tipIn var(--t-fast) ease-out;
}
/* ancoraggio a destra per i trigger nelle ultime colonne (il tooltip resta nella card) */
[data-tip].tip-end:hover::after, [data-tip].tip-end:focus-visible::after {
    left: auto; right: 0; transform: none; animation-name: tipInEnd;
}
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, 3px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tipInEnd { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Riepilogo: tab bar + gruppi-cliente (sipario) ---------- */
.tabs { display: inline-flex; gap: 4px; background: var(--surface-2); border-radius: 9999px; padding: 5px; }
.tabs a {
    padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 500;
    color: var(--muted); text-decoration: none;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* Righe-gruppo dentro le tabelle piatte: intestazione di cliente (Tomcat/Host)
   oppure di host SQL (Istanze SQL, con seconda riga per la commessa). */
table.data tr.grp > td {
    padding: 9px 16px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
table.data tr.grp:hover { background: var(--surface-2); }
table.data tbody tr.grp:first-child > td { border-top: none; }
table.data tr.grp.host > td { padding: 10px 16px; }
.grp-line { display: flex; align-items: center; gap: 12px; }
.grp-line.wrap { gap: 10px; flex-wrap: wrap; }
.grp-line .grp-code { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: none; }
.grp-line .grp-desc {
    color: var(--muted); font-size: 13px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grp-line .grp-sum {
    margin-left: auto; flex: none; color: var(--faint); font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.grp-line .grp-key { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.grp-line .grp-engine { margin-left: auto; flex: none; color: var(--muted); font-size: 12.5px; }
.grp-line .grp-count { flex: none; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.grp-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.grp-sub a { color: var(--muted); font-weight: 400; }

/* Celle a due livelli: nome (con icona) + sottotitolo */
.cell-main { display: inline-flex; align-items: center; gap: 7px; }
.cell-sub { font-size: 12px; color: var(--faint); font-weight: 400; }
.os-icon { width: 14px; height: 14px; flex: none; display: block; color: var(--ink); }
.roles { display: inline-flex; align-items: center; gap: 6px; }
.role { display: inline-flex; cursor: default; }
.role-icon { width: 18px; height: 18px; display: block; flex: none; }

/* Metrica compatta: mini-donut + valore/percentuale */
.metric { display: inline-flex; align-items: center; gap: 9px; cursor: default; }
.metric .m-pct { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric .m-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.metric .m-txt { white-space: nowrap; }
.donut.mini { width: 22px; height: 22px; }
.donut.mini .donut-track, .donut.mini .donut-seg { stroke-width: 9; }
.donut-seg.gauge { stroke: var(--ok); }
.donut.warn .donut-seg.gauge { stroke: var(--warn); }

/* Volumi disco: un mini-donut per volume + nota sul totale */
.vols { display: inline-flex; align-items: center; gap: 12px; }
.vol { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: default; }
.vol .v-pct { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; }
.vols .v-note { font-size: 12px; color: var(--faint); white-space: nowrap; }

/* Riempimento su tetto SQL: barra + valore, allineati a destra nella cella numerica */
.fill { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 108px; margin-left: auto; }
.fill .meter { margin-top: 0; }
.fill .f-val { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.no-limit { font-weight: 600; color: var(--ink); cursor: default; }

/* riga PVM di un cliente senza telemetria */
tr.row-faint td { color: var(--faint); }
tr.row-faint td.strong a { color: var(--muted); }

.arglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arglist li { font-size: 12.5px; overflow-wrap: anywhere; }
.arglist code { color: var(--ink); }