/* SPH-776: TPV 3.0 panel (Components/Tpv30Panel.razor).
   Neutrals and status colours come from the application theme (Fluent --dxds-* tokens, then
   Bootstrap --bs-*), so the panel follows light and dark. The two data colours are the dataviz
   categorical steps validated for both surfaces (#3987e5 / #d95926, then #199e70 / #c98500). */
.tp30 {
    --tp-ink: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #22384d));
    --tp-ink-2: color-mix(in srgb, var(--tp-ink) 74%, transparent);
    --tp-ink-3: color-mix(in srgb, var(--tp-ink) 56%, transparent);
    --tp-surface: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #fff));
    --tp-line: var(--dxds-color-border-secondary-default-rest, var(--bs-border-color, #dde4eb));
    --tp-grid: color-mix(in srgb, var(--tp-ink) 10%, transparent);
    --tp-axis: color-mix(in srgb, var(--tp-ink) 38%, transparent);
    /* Status colours. Fluent has theme-aware tokens; Bootstrap themes (Blazing Berry / Dark) do not
       redefine --bs-*-text-emphasis for dark surfaces, so the fallback mixes a mid-tone with the
       theme's ink: darker on light themes, lighter on dark ones, readable on both. */
    --tp-ok: var(--dxds-color-content-success-default-rest, color-mix(in oklab, #2e9e5b 62%, var(--tp-ink)));
    --tp-warn: var(--dxds-color-content-warning-default-rest, color-mix(in oklab, #d99400 62%, var(--tp-ink)));
    --tp-crit: var(--dxds-color-content-danger-default-rest, color-mix(in oklab, #e0443e 66%, var(--tp-ink)));
    --tp-info: var(--dxds-color-content-primary-default-rest, color-mix(in oklab, var(--bs-primary, #5b3b95) 62%, var(--tp-ink)));
    --tp-accent: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #5b3b95));
    --tp-s1: #3987e5;
    --tp-s2: #d95926;
    --tp-s3: #199e70;
    --tp-s4: #c98500;
    --tp-nc: color-mix(in srgb, var(--tp-ink) 26%, transparent);
    color: var(--tp-ink);
    padding: .75rem 1rem 1.5rem;
    font-size: .875rem;
    line-height: 1.45;
}

.tp30 h3 { font-size: .8125rem; font-weight: 600; margin: 0 0 2px; color: var(--tp-ink); }
.tp30-sub { font-size: .78rem; color: var(--tp-ink-3); margin: 0 0 .75rem; }
.tp30-muted { color: var(--tp-ink-3); font-size: .78rem; }
.tp30-num { font-variant-numeric: tabular-nums; }
.tp30-empty { padding: 2rem; color: var(--tp-ink-3); }

/* Header: connection, period, refresh time */
.tp30-top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tp30-spacer { flex: 1; }
.tp30-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--tp-line); border-radius: 999px; padding: 3px 10px; font-size: .78rem; color: var(--tp-ink-2); background: var(--tp-surface); }
.tp30-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tp-ok); }
.tp30-dot.warn { background: var(--tp-warn); }
.tp30-seg { display: inline-flex; border: 1px solid var(--tp-line); border-radius: 8px; overflow: hidden; background: var(--tp-surface); }
.tp30-seg button { border: 0; background: none; padding: 5px 12px; font: inherit; font-size: .8rem; color: var(--tp-ink-2); cursor: pointer; }
.tp30-seg button.on { background: var(--tp-ink); color: var(--tp-surface); font-weight: 500; }

/* Layout */
.tp30-grid { display: grid; gap: 14px; }
.tp30-g-top { grid-template-columns: 1.35fr 1fr; }
.tp30-g-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tp30-g-mid { grid-template-columns: 1.7fr 1fr; margin-top: 14px; }
.tp30-g-bot { grid-template-columns: 1.25fr 1fr; margin-top: 14px; }
.tp30-stack-col { grid-template-rows: auto 1fr; }
.tp30-card { background: var(--tp-surface); border: 1px solid var(--tp-line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.tp30-section { margin: 18px 0 8px; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tp-ink-3); }

/* Status marks: icon + text, never colour alone */
.tp30-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; flex: none; }
.tp30-ico.ok { color: var(--tp-ok); background: color-mix(in srgb, var(--tp-ok) 14%, transparent); }
.tp30-ico.warn { color: var(--tp-warn); background: color-mix(in srgb, var(--tp-warn) 16%, transparent); }
.tp30-ico.crit { color: var(--tp-crit); background: color-mix(in srgb, var(--tp-crit) 14%, transparent); }
.tp30-ico.info { color: var(--tp-info); background: color-mix(in srgb, var(--tp-info) 14%, transparent); }
.tp30-pill, .tp30-flag { display: inline-block; font-size: .72rem; border-radius: 999px; padding: 1px 8px; font-weight: 500; }
.tp30-flag { border-radius: 6px; margin-top: 6px; }
.tp30-pill.ok, .tp30-flag.ok { color: var(--tp-ok); background: color-mix(in srgb, var(--tp-ok) 14%, transparent); }
.tp30-pill.warn, .tp30-flag.warn { color: var(--tp-warn); background: color-mix(in srgb, var(--tp-warn) 16%, transparent); }
.tp30-pill.crit, .tp30-flag.crit { color: var(--tp-crit); background: color-mix(in srgb, var(--tp-crit) 14%, transparent); }
.tp30-pill.info, .tp30-flag.info { color: var(--tp-ink-3); background: color-mix(in srgb, var(--tp-ink) 7%, transparent); }

/* Needs attention */
.tp30-att { list-style: none; margin: 0; padding: 0; }
.tp30-att li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--tp-line); }
.tp30-att li:first-child { border-top: 0; padding-top: 2px; }
.tp30-att-title { font-weight: 500; }
.tp30-att-detail { color: var(--tp-ink-2); font-size: .78rem; }
.tp30-refs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.tp30-link { border: 0; background: none; padding: 0; font: inherit; font-size: .78rem; color: var(--tp-info); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tp30-btn { border: 1px solid var(--tp-line); background: var(--tp-surface); color: var(--tp-ink); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.tp30-btn.pri { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp30-allclear { display: flex; gap: 10px; align-items: center; color: var(--tp-ink-2); }

/* Synchronization */
.tp30-hrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--tp-line); }
.tp30-hrow:first-of-type { border-top: 0; padding-top: 2px; }
.tp30-hval { font-variant-numeric: tabular-nums; color: var(--tp-ink-2); font-size: .78rem; text-align: right; }

/* KPI tiles */
.tp30-kpi-name { font-size: .78rem; color: var(--tp-ink-2); }
.tp30-kpi-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin: 3px 0 1px; }
.tp30-kpi-ctx { font-size: .78rem; color: var(--tp-ink-3); }
.tp30-spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
.tp30-spark .line { fill: none; stroke: var(--tp-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tp30-spark .area { fill: color-mix(in srgb, var(--tp-s1) 12%, transparent); stroke: none; }

/* Legends and colour keys */
.tp30-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--tp-ink-2); margin: -4px 0 8px; }
.tp30-legend i, .tp30-pay i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tp30 .s1, .tp30 .c1 { background: var(--tp-s1); }
.tp30 .s2, .tp30 .c2 { background: var(--tp-s2); }
.tp30 .c3 { background: var(--tp-s3); }
.tp30 .c4 { background: var(--tp-s4); }
.tp30 .nc { background: var(--tp-nc); }

/* Column charts: bars grow from one baseline, <= 24px, 4px rounded data end, 2px surface gap */
.tp30-cols { position: relative; }
.tp30-plot { position: relative; height: 210px; margin-left: 38px; }
.tp30-hours .tp30-plot { height: 150px; }
.tp30-gridline, .tp30-baseline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--tp-grid); }
.tp30-baseline { border-top-color: var(--tp-axis); z-index: 1; }
.tp30-gridline span, .tp30-baseline span { position: absolute; right: calc(100% + 6px); top: -.6em; font-size: .7rem; color: var(--tp-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp30-bars { position: absolute; inset: 0; display: flex; }
.tp30-col { position: relative; flex: 1; min-width: 0; outline: none; }
.tp30-up, .tp30-down { position: absolute; left: 50%; width: min(24px, 60%); transform: translateX(-50%); display: flex; flex-direction: column; }
/* Each half has the height of its side of the axis; a bar is a share of that half. */
.tp30-up { top: 0; bottom: calc(100% - var(--base)); gap: 2px; justify-content: flex-end; }
.tp30-down { top: calc(var(--base) + 2px); bottom: 0; }
.tp30-cols .seg { display: block; width: 100%; min-height: 2px; position: relative; }
.tp30-up .seg.cap { border-radius: 4px 4px 0 0; }
.tp30-down .seg { border-radius: 0 0 4px 4px; }
.tp30-col:hover::before, .tp30-col:focus-visible::before { content: ""; position: absolute; inset: 0 8%; background: color-mix(in srgb, var(--tp-ink) 5%, transparent); border-radius: 6px; }
.tp30-tip { display: none; position: absolute; bottom: calc(100% - var(--base) + 8px); left: 50%; transform: translateX(-50%); z-index: 5; background: var(--tp-ink); color: var(--tp-surface); font-size: .74rem; line-height: 1.4; border-radius: 8px; padding: 6px 9px; white-space: nowrap; pointer-events: none; }
.tp30-col:hover .tp30-tip, .tp30-col:focus-visible .tp30-tip { display: block; }
.tp30-col:first-child .tp30-tip, .tp30-col:nth-child(2) .tp30-tip { left: 0; transform: none; }
.tp30-col:last-child .tp30-tip, .tp30-col:nth-last-child(2) .tp30-tip { left: auto; right: 0; transform: none; }
.tp30-peak { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; font-weight: 500; color: var(--tp-ink-2); white-space: nowrap; }
.tp30-xrow { display: flex; margin-left: 38px; }
.tp30-xrow > span { flex: 1; min-width: 0; text-align: center; font-size: .7rem; color: var(--tp-ink-3); white-space: nowrap; overflow: visible; padding-top: 4px; }
.tp30-xrow > span.today { color: var(--tp-ink); font-weight: 600; }
.tp30-recon > span { padding-top: 6px; }
.tp30-recon-label { position: absolute; left: 0; bottom: 2px; font-size: .7rem; color: var(--tp-ink-3); }
.tp30-mini { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; font-size: .6rem; font-weight: 700; }
.tp30-mini.ok { color: var(--tp-ok); background: color-mix(in srgb, var(--tp-ok) 16%, transparent); }
.tp30-mini.warn { color: var(--tp-warn); background: color-mix(in srgb, var(--tp-warn) 18%, transparent); }

/* Payments: one 100 % bar, labels beside it */
.tp30-bar100 { display: flex; gap: 2px; height: 14px; border-radius: 5px; overflow: hidden; margin: 4px 0 10px; }
.tp30-bar100 span { display: block; height: 100%; }
.tp30-pay { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; font-size: .82rem; padding: 2px 0; }
.tp30-pay .tp30-num { text-align: right; }

/* Tables: articles and latest documents */
.tp30-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tp30-table th { font-weight: 500; color: var(--tp-ink-3); text-align: left; font-size: .74rem; padding: 0 8px 7px; border-bottom: 1px solid var(--tp-line); }
.tp30-table td { padding: 6px 8px; border-bottom: 1px solid var(--tp-line); vertical-align: middle; }
.tp30-table tr:last-child td { border-bottom: 0; }
.tp30-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp30-click tbody tr { cursor: pointer; }
.tp30-click tbody tr:hover td { background: color-mix(in srgb, var(--tp-ink) 4%, transparent); }
.tp30-barcell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tp30-hbar { display: flex; gap: 2px; width: 120px; flex: none; }
.tp30-hbar span { display: block; height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; }
.tp30-hbar span.flat { border-radius: 0; }
.tp30-meter { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--tp-grid); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.tp30-meter span { display: block; height: 100%; background: var(--tp-s1); }

@media (max-width: 1200px) {
    .tp30-g-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .tp30-g-top, .tp30-g-mid, .tp30-g-bot { grid-template-columns: 1fr; }
    .tp30-g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .tp30 { padding: .5rem; }
    .tp30-g-kpi { grid-template-columns: 1fr; }
    .tp30-hbar { width: 70px; }
}