/*
 * Lo stile della simulazione del Customer Portal, sopra la base comune di platform/shell.css.
 * Misure e colori da src/web/Corellix.CustomerPortal: la shell (ShellB.tsx, ContextPanel.tsx), le
 * card del tema «Pannelli» (src/ui), Core 360° (components/core360) e il pannello di Corell!A.
 */

#cp-app { height: 100%; }

.cp-nav { position: relative; display: flex; flex-shrink: 0; z-index: 30; }
/* Dodici domini: in un iframe alto quanto una sezione della homepage il rail del prodotto (52 px a
   bottone) non ci sta, e gli ultimi due finirebbero sotto il bordo. */
.cp-nav .rail-nav { gap: 2px; }
.cp-nav .rail-btn { height: 46px; }
.cp-nowrap { white-space: nowrap; }
.app.cp-collapsed .panel { display: none; }
.cp-menu { display: none; }
.cp-content { padding: 0; background: var(--canvas); }
.cp-pad { padding: 20px 24px 40px; }

/* ---------------------------------------------------------------- pannello e barra */
.cp-cmdk { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 10px; padding: 6px 10px; border-radius: var(--radius-c); background: var(--line-soft); color: var(--muted); font-size: 12px; text-align: left; }
.dark .cp-cmdk { background: #1F2937; }
.cp-cmdk kbd { padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); font: 10px ui-monospace, Menlo, monospace; }

.cp-titles { min-width: 0; }
.cp-dataof { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-c); background: var(--line-soft); color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.dark .cp-dataof { background: #1F2937; border-color: #374151; }
.cp-bell { position: relative; width: 34px; height: 34px; color: var(--muted); }
.cp-bell svg { width: 18px; height: 18px; }
.cp-count { position: absolute; top: 2px; right: 1px; min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--p600); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.cp-count.red { background: #DC2626; }
.cp-ai-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin: 0 4px; padding: 6px 12px; border: 1px solid var(--p200); border-radius: var(--radius-c); background: var(--p50); color: var(--p-ink); font-size: 12px; font-weight: 500; }
.cp-ai-btn:hover { background: var(--p100); }
.cp-theme { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-c); background: var(--line-soft); }
.dark .cp-theme { background: #1F2937; }
.cp-theme button { padding: 6px; border-radius: 3px; color: var(--faint); }
.cp-theme button.on { background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }
.dark .cp-theme button.on { background: #374151; }
.cp-theme button.sun { color: #EAB308; }
.cp-theme button.moon { color: #3B82F6; }
.cp-user { display: flex; margin-left: 6px; }
.cp-user span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; }

/* La riga sotto la barra: filtri a sinistra, azioni della pagina a destra (regola 30 del canone). */
.cp-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; min-height: 50px; padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.cp-toolbar-left, .cp-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cp-search { display: flex; align-items: center; gap: 6px; width: 240px; height: 30px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: var(--radius-c); background: var(--surface); color: var(--faint); }
.cp-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 12.5px; }

/* ---------------------------------------------------------------- Core 360° */
.cp-subject { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.cp-subject-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 1 360px; max-width: 520px; height: 34px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: var(--radius-c); background: var(--surface); color: var(--faint); }
.cp-subject-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; }
.cp-suggest { position: absolute; left: -1px; right: -1px; top: 36px; z-index: 10; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.cp-sug { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 3px; color: var(--ink-2); font-size: 13px; text-align: left; }
.cp-sug:hover { background: var(--p50); }
.cp-sug svg { color: var(--faint); }
.cp-recent { margin-left: 4px; }
.cp-recent-chip { height: 24px; font-weight: 500; }

.cp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.cp-kpi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cp-kpi-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--p50); color: var(--p-ink-soft); }
.cp-kpi-icon.bad { background: var(--bad-bg); color: var(--bad); }
.cp-kpi-value { font-size: 22px; font-weight: 600; line-height: 1.1; }
.cp-kpi-label { color: var(--muted); font-size: 12px; }

.cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-span-2 { grid-column: span 2; }
.cp-tile { display: flex; flex-direction: column; min-width: 0; }
.cp-tile .card-head { gap: 10px; }
.cp-tile .card-head .link { margin-left: auto; color: var(--p-ink-soft); font-size: 11px; font-weight: 600; text-transform: none; }
.cp-head-note { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cp-tile-body { flex: 1; padding: 12px 14px; }
.cp-tile-body > * + * { margin-top: 8px; }
.cp-tile-cta { margin-top: 12px !important; }

.cp-problem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-c); text-align: left; transition: background-color 0.15s; }
.cp-problem:hover { background: var(--surface-2); }
.cp-problem .grow { display: flex; flex-direction: column; }
.cp-problem-title { color: var(--ink); font-size: 13px; font-weight: 600; }
.cp-problem .pill svg { width: 12px; height: 12px; }
.cp-sev-bad { color: var(--bad-dot); }
.cp-sev-warn { color: var(--warn-dot); }
.cp-sev-info { color: var(--p500); }
.cp-fresh, .tbl tr.cp-fresh td { background: var(--warn-bg) !important; }

.cp-mosaic-group + .cp-mosaic-group { margin-top: 10px; }
.cp-mosaic-label { margin-bottom: 5px; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.cp-mosaic { display: flex; flex-wrap: wrap; gap: 4px; }
.cp-sq { display: inline-block; width: 18px; height: 18px; border-radius: 2px; background: #86EFAC; transition: transform 0.15s; }
.cp-sq:hover { transform: scale(1.18); }
.cp-sq.ok { background: #4ADE80; }
.cp-sq.warn { background: #FBBF24; }
.cp-sq.bad { background: #EF4444; animation: sim-pulse 1.6s ease-in-out infinite; }
.cp-legend { display: flex; gap: 12px; }
.cp-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cp-legend .cp-sq { width: 10px; height: 10px; animation: none; }

.cp-row { display: flex; align-items: center; gap: 8px; }
.cp-row .bar { flex: 1; }
.cp-row-label { width: 54px; flex-shrink: 0; color: var(--muted); font-size: 12px; }
.cp-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cp-cl + .cp-cl { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cp-cl > * + * { margin-top: 5px; }
.cp-runway { display: flex; align-items: baseline; gap: 6px; color: var(--warn); }
.cp-runway-n { font-size: 32px; font-weight: 700; line-height: 1; }
.cp-nomargin { margin: 4px 0 0; }
.cp-mt8 { margin-top: 10px !important; }
.cp-donut-row { display: flex; align-items: center; gap: 14px; }
.cp-donut { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(var(--ok-dot) calc(var(--p) * 1%), var(--line-soft) 0); }
.cp-donut span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); font-size: 15px; font-weight: 700; }
.cp-warn-ink { color: var(--warn); }
.cp-ok-ink { color: var(--ok); }

/* ---------------------------------------------------------------- tabelle e schede */
.cp-cell-bar { min-width: 110px; }
.cp-cell-bar .bar { display: inline-block; width: 60px; margin-right: 6px; vertical-align: middle; }
.cp-actions { white-space: nowrap; }
.cp-actions .btn + .btn { margin-left: 6px; }
.cp-inline { display: inline-block; margin-right: 4px; vertical-align: -2px; }

.cp-vm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cp-vm-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius); background: var(--p50); color: var(--p-ink-soft); }
.cp-h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cp-kpis-vm .cp-mini { padding: 10px 14px; }
.cp-mini-v { font-size: 20px; font-weight: 600; }
.cp-mini-v.bad { color: var(--bad); }
.cp-mini-v.warn { color: var(--warn); }
.cp-grid-vm .chart { display: block; }

.cp-chain { display: flex; flex-direction: column; align-items: stretch; }
.cp-chain-node { display: grid; grid-template-columns: 18px 70px 1fr; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-c); }
.cp-chain-node svg { color: var(--faint); }
.cp-chain-node.me { border-color: var(--p300); background: var(--p50); }
.cp-chain-node.hot { border-color: var(--bad-line); background: var(--bad-bg); }
.cp-chain-node.hot svg { color: var(--bad); }
.cp-chain-sep { display: flex; justify-content: center; color: var(--faint); }
.cp-tile-body > .cp-chain { margin-top: 0; }

.cp-nb { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-c); text-align: left; }
.cp-nb:hover { background: var(--surface-2); }
.cp-nb.hot { background: var(--bad-bg); }
.cp-tile-body > .cp-nb { margin-top: 2px; }

.cp-logon { display: flex; height: 22px; overflow: hidden; border-radius: var(--radius-c); }
.cp-logon span { height: 100%; }
.cp-logon-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.cp-logon-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.cp-logon-legend b { color: var(--ink-2); font-weight: 600; }
.cp-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--warn-line); border-radius: var(--radius-c); background: var(--warn-bg); color: var(--warn-ink); }

.cp-grid-ticket { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-timeline { margin: 0; padding: 0; list-style: none; }
.cp-timeline li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cp-tl-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--line-soft); color: var(--muted); }
.cp-tl-icon.ai { background: var(--p50); color: var(--p-ink-soft); }
.cp-reply { display: flex; gap: 8px; padding-top: 10px; }
.cp-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.cp-dl > span { color: var(--muted); }
.cp-dl > b { font-weight: 600; }
.cp-tile-body.cp-dl > * + * { margin-top: 0; }

/* ---------------------------------------------------------------- Corell!A */
.cp-ai {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-width: 100%;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 40px -24px rgba(15, 23, 42, 0.5);
    transform: translateX(105%);
    transition: transform 0.3s ease;
}
.cp-ai.open { transform: none; }
.cp-ai-head { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); color: var(--p-ink-soft); }
.cp-ai-head b { color: var(--ink); }
.cp-ai-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.cp-ai-hello { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; color: var(--p-ink-soft); text-align: center; }
.cp-ai-hello p { margin: 0; color: var(--muted); font-size: 13px; }
.cp-msg { margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.cp-msg.me { margin-left: 40px; padding: 8px 12px; border-radius: var(--radius); background: var(--p600); color: #fff; }
.cp-msg.ai { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--ink-2); }
.cp-msg.ai p { margin: 0 0 8px; }
.cp-msg.ai ol { margin: 0 0 8px; padding-left: 18px; }
.cp-msg.ai b { color: var(--ink); }
.cp-src { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.cp-src .chip { height: 22px; font-size: 11px; }
.cp-typing { display: inline-flex; gap: 3px; }
.cp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--p500); animation: sim-pulse 1s ease-in-out infinite; }
.cp-typing i:nth-child(2) { animation-delay: 0.15s; }
.cp-typing i:nth-child(3) { animation-delay: 0.3s; }
.cp-ai-prompts { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 10px; }
.cp-prompt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--p200); border-radius: var(--radius-c); background: var(--p50); color: var(--p-ink); font-size: 12px; text-align: left; }
.cp-prompt:hover { background: var(--p100); }
.cp-ai-input { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.cp-ai-input input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: var(--radius-c); background: var(--surface); color: var(--ink); font-size: 13px; }

/* ---------------------------------------------------------------- larghezze */
/* Come il portale sotto «sm»: il badge «Dati di» perde la sua traccia centrata e si mette accanto
   ai controlli, invece di finirci sotto. */
@media (max-width: 1280px) {
    .topbar { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@media (max-width: 1240px) {
    .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-recent, .cp-recent-chip { display: none; }
}
@media (max-width: 1000px) {
    .cp-menu { display: inline-flex; }
    .app.drawer .panel { display: flex; position: absolute; left: 76px; top: 0; bottom: 0; z-index: 40; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35); }
    .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-pad, .cp-toolbar, .cp-subject { padding-left: 16px; padding-right: 16px; }
    .cp-theme { display: none; }
}
@media (max-width: 760px) {
    .cp-grid, .cp-grid-ticket { grid-template-columns: minmax(0, 1fr); }
    .cp-span-2 { grid-column: auto; }
    .cp-ai-btn span { display: none; }
}
@media (max-width: 640px) {
    .app.drawer .panel { left: 60px; }
    .cp-bell { display: none; }
}

/* ---------------------------------------------------------------- le altre pagine */
.cp-mt16 { margin-top: 16px; }
.cp-w120 { width: 120px; flex-shrink: 0; }
.cp-bad-ink { color: var(--bad); }
.cp-ok-icon { color: var(--ok); }
.cp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-chip-sm { height: 20px; padding: 0 6px; font-size: 10.5px; font-weight: 500; }
.cp-pad > .card + .card, .cp-pad > section + section { margin-top: 12px; }

.cp-tree .card-head svg, .cp-switch .card-head svg, .cp-incident .card-head svg { color: var(--faint); }
.cp-tree-host { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.cp-tree-host:first-child { border-top: 0; padding-top: 0; }
.cp-tree-host.hot .cp-tree-hostname b { color: var(--bad); }
.cp-tree-hostname { display: flex; align-items: center; gap: 8px; }
.cp-tree-hostname svg { color: var(--faint); }
.cp-tree-hostname .cp-row { max-width: 280px; margin-left: auto; }
.cp-tree-vms { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cp-vm-chip { padding: 3px 8px; border: 1px solid var(--line); border-left: 3px solid var(--ok-dot); border-radius: var(--radius-c); background: var(--surface); color: var(--ink-2); font: 11px ui-monospace, Menlo, monospace; }
.cp-vm-chip:hover { background: var(--p50); }
.cp-vm-chip.warn { border-left-color: var(--warn-dot); }
.cp-vm-chip.bad { border-left-color: var(--bad-dot); background: var(--bad-bg); }

.cp-ports { display: grid; grid-template-columns: repeat(24, 14px); gap: 3px; }
.cp-port { display: inline-block; width: 14px; height: 12px; border-radius: 2px; background: var(--line); }
.cp-port.up { background: #4ADE80; }
.cp-port.err { background: #F59E0B; animation: sim-pulse 1.4s ease-in-out infinite; }
.cp-legend .cp-port { width: 10px; height: 9px; animation: none; }

.cp-trace-ends { display: flex; align-items: center; gap: 8px; color: var(--faint); }
.cp-trace { display: flex; flex-direction: column; align-items: stretch; max-width: 640px; padding: 16px; }
.cp-trace-hop { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cp-trace-hop > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 10px; align-items: baseline; flex: 1; }
.cp-trace-hop > div > b { grid-column: 2; grid-row: 1; }
.cp-trace-hop > div > .xs:first-child { grid-column: 1; grid-row: 1 / span 2; }
.cp-trace-hop > div > .xs:last-child { grid-column: 2; }
.cp-trace-hop.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.cp-trace-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-c); background: var(--p50); color: var(--p-ink-soft); }
.cp-trace-hop.warn .cp-trace-icon { background: var(--surface); color: var(--warn); }
.cp-trace-link { position: relative; width: 2px; height: 22px; margin-left: 23px; background: var(--p300); }
.cp-trace-link span { position: absolute; top: 4px; left: 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }

.cp-empty-state { max-width: 560px; margin: 32px auto; padding: 28px; text-align: center; }
.cp-empty-state svg { margin: 0 auto 10px; color: var(--faint); }
.cp-empty-state h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.cp-empty-state p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }

.cp-map { padding: 12px; }
.cp-map svg { display: block; }
.cp-map-box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.cp-map-box.warn { fill: var(--warn-bg); stroke: var(--warn-dot); }
.cp-map-t { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
.cp-map-s { fill: var(--muted); font-size: 10.5px; }
.cp-map-l { fill: none; stroke: var(--p300); stroke-width: 2; }
.cp-map-l.thin { stroke-dasharray: 4 4; }
.cp-map-l.err { stroke: var(--warn-dot); stroke-dasharray: 6 4; animation: cp-flow 1s linear infinite; }
@keyframes cp-flow { to { stroke-dashoffset: -20; } }

.cp-insight { padding: 14px 16px; border-left: 4px solid var(--p500); }
.cp-insight.bad { border-left-color: var(--bad-dot); }
.cp-insight.warn { border-left-color: var(--warn-dot); }
.cp-insight .row { gap: 10px; color: var(--p-ink-soft); }
.cp-insight .row b { color: var(--ink); }
.cp-insight p { margin: 8px 0 0; color: var(--ink-2); }
.cp-insight-rec { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: var(--radius-c); background: var(--surface-2); }
.cp-insight-rec svg { flex-shrink: 0; margin-top: 2px; color: var(--warn); }
.cp-insight .cp-src { margin-top: 10px; padding-top: 0; border-top: 0; }

.cp-incident.bad { border-left: 4px solid var(--bad-dot); }
.cp-incident.warn { border-left: 4px solid var(--warn-dot); }
.cp-maint { padding: 12px 16px; }
.cp-maint-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-c); background: var(--p50); color: var(--p-ink-soft); }
.cp-maint .row { gap: 12px; }
.cp-mt8 { margin-top: 8px; }

.cp-console { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cp-console .cp-vm-icon { width: 40px; height: 40px; }
.cp-kb { padding: 12px 16px; }
.cp-kb .row { gap: 8px; color: var(--faint); }
.cp-kb .row b { color: var(--ink); }

@media (max-width: 1000px) {
    .cp-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .cp-ports { grid-template-columns: repeat(16, 14px); }
}