/* ============================================================
   Risk Dashboard v2 — Design System (Blazor port)
   Dark trading-terminal aesthetic. Backward-compat aliases kept
   so existing razor inline styles continue to work unchanged.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* risk palette */
    --r-safe:    #2fbd83;
    --r-warning: #e6ad3c;
    --r-danger:  #ef8b3f;
    --r-soft:    #ee6347;
    --r-breach:  #f0413f;
    --r-blocked: #a98ae6;
    --r-profit:  #29bcb0;
    --accent:    #4f9dff;

    --r-safe-soft:    rgba(47, 189, 131, 0.14);
    --r-warning-soft: rgba(230, 173, 60, 0.14);
    --r-danger-soft:  rgba(239, 139, 63, 0.14);
    --r-soft-soft:    rgba(238, 99, 71, 0.14);
    --r-breach-soft:  rgba(240, 65, 63, 0.15);
    --r-blocked-soft: rgba(169, 138, 230, 0.15);
    --r-profit-soft:  rgba(41, 188, 176, 0.14);
    --accent-soft:    rgba(79, 157, 255, 0.14);

    /* dark palette */
    --bg:            #0a0c0e;
    --bg-grid:       rgba(255,255,255,0.018);
    --panel:         #121619;
    --panel-2:       #161b1f;
    --panel-3:       #1b2126;
    --inset:         rgba(255,255,255,0.025);
    --border:        rgba(255,255,255,0.075);
    --border-strong: rgba(255,255,255,0.14);
    --text:          #eef1f3;
    --text-2:        #c2c9cf;
    --muted:         #8b949c;
    --dim:           #5b646b;
    --glow:          0 0 0 1px rgba(255,255,255,0.03);
    --shadow:        0 8px 28px rgba(0,0,0,0.40);
    --shadow-lg:     0 18px 48px rgba(0,0,0,0.55);
    --heat-empty:    rgba(255,255,255,0.04);

    /* fonts */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-ui:      'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* spacing */
    --pad:    18px;
    --pad-sm: 14px;
    --gap:    14px;
    --row-h:  38px;
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius:    12px;
    --radius-lg: 16px;
    --transition: 0.2s ease;

    /* backward-compat aliases (used in razor inline styles) */
    --c-bg:            var(--bg);
    --c-bg-accent:     var(--panel-2);
    --c-surface:       rgba(18, 22, 25, 0.96);
    --c-surface-strong:rgba(22, 27, 31, 0.98);
    --c-surface-soft:  var(--inset);
    --c-border:        var(--border);
    --c-border-strong: var(--border-strong);
    --c-text:          var(--text);
    --c-muted:         var(--muted);
    --c-dim:           var(--dim);
    --c-accent:        var(--accent);
    --c-accent-soft:   var(--accent-soft);
    --c-success:       var(--r-safe);
    --c-warning:       var(--r-warning);
    --c-danger:        var(--r-breach);
    --c-orange:        var(--r-soft);
    --c-purple:        var(--r-blocked);
    --c-teal:          var(--r-profit);
    --c-amber:         var(--r-warning);
    --shadow-soft:     var(--shadow);
    --shadow-focus:    0 0 0 1px rgba(255,255,255,0.04), var(--shadow);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-ui);
    font-size: 13px;
    background:
        linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0 / 100% 26px,
        var(--bg);
    color: var(--text);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body { margin: 0; }

.mono, .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ============================================================
   MUDBLAZOR OVERRIDES
   ============================================================ */
.mud-layout { background: transparent !important; }
.mud-main-content { background: transparent !important; }

.mud-appbar, .mud-drawer, .mud-paper, .mud-popover, .mud-dialog {
    color: var(--text);
}

.mud-appbar.dashboard-appbar {
    background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    min-height: 58px;
    padding: 0 16px;
}

.dashboard-appbar .mud-icon-button { border-radius: var(--radius-sm); }

.dashboard-drawer {
    background: var(--panel) !important;
    border-right: 1px solid var(--border) !important;
    padding: 12px 10px 14px;
}

.dashboard-main-content {
    padding: calc(var(--mud-appbar-height, 58px) + 24px) 20px 32px !important;
    box-sizing: border-box;
    overflow: visible;
}

.dashboard-content-shell {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
}

.dashboard-main-content .mud-grid-item { min-width: 0; }

.dashboard-main-content .mud-grid-item > .mud-paper,
.dashboard-main-content .mud-table-container,
.dashboard-main-content .mud-simple-table { width: 100%; min-width: 0; overflow-x: auto; }

.dashboard-main-content .mud-paper {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--glow) !important;
    border-radius: var(--radius) !important;
}

.mud-input-root, .mud-select, .mud-chip, .mud-button-root,
.mud-pagination-item, .mud-tabs-panels, .mud-tab,
.mud-alert, .mud-progress-linear { border-radius: var(--radius-sm); }

.mud-input-outlined-border { border-color: var(--border-strong) !important; }
.mud-input-root:hover .mud-input-outlined-border,
.mud-select:hover .mud-input-outlined-border { border-color: rgba(255,255,255,0.22) !important; }
.mud-input-root.mud-input-focused .mud-input-outlined-border,
.mud-select.mud-input-focused .mud-input-outlined-border { border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important; }

.mud-button-root.mud-button-text { color: var(--muted); }
.mud-divider { border-color: var(--border) !important; }
.mud-breadcrumbs { padding: 0 !important; }

/* ============================================================
   APP SHELL — BRAND + TOPBAR
   ============================================================ */
.shell-menu-button {
    margin-right: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm) !important;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--r-profit));
    display: grid; place-items: center;
    box-shadow: 0 0 0 1px var(--border-strong), 0 4px 14px var(--accent-soft);
}

.brand-mark span {
    font-family: var(--font-mono); font-weight: 700; font-size: 15px;
    color: #06080a;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-icon { color: var(--muted); font-size: 18px !important; }

.brand-title, .brand-name {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.brand-subtitle, .brand-sub {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}

.appbar-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* topbar pill — replaces old topbar-pill */
.topbar-pill, .topbar-icon-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--inset);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-2);
    transition: border-color .15s, color .15s;
}

.topbar-icon-pill { width: 34px; padding: 0; justify-content: center; }
.topbar-pill:hover, .topbar-icon-pill:hover { border-color: var(--border-strong); color: var(--text); }

.clock-rack { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.clock-pill { gap: 6px; padding: 0 8px; }

.clock-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
}

.clock-remove {
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: var(--dim);
    opacity: 0;
    transition: opacity .12s, color .12s;
}
.clock-pill:hover .clock-remove { opacity: 1; }
.clock-remove:hover { color: var(--r-danger); }

.mono-clock {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.connection-pill {}
.connection-pill.connected .connection-label { color: var(--r-safe); }
.connection-pill.disconnected .connection-label { color: var(--r-breach); }
.connection-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }

.environment-select { min-width: 190px; }
.environment-select .mud-input-root { border-radius: var(--radius-sm) !important; background: transparent; }
.environment-select .mud-select-input, .environment-select .mud-input-slot { font-size: 12px; color: var(--text); }
.environment-select .mud-input-label { color: var(--dim); }

/* ============================================================
   BREACH TICKER
   ============================================================ */
.breach-ticker {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--inset);
    display: flex;
    align-items: center;
    position: relative;
}

.breach-ticker-label {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
    flex-shrink: 0; display: flex; align-items: center;
    padding: 0 12px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
    color: #06080a; text-transform: uppercase;
    background: var(--r-breach);
    box-shadow: 8px 0 12px -4px var(--panel), 1px 0 0 0 color-mix(in srgb, var(--r-breach) 60%, #000);
    white-space: nowrap;
}

.breach-ticker-track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    padding-left: 108px;
    animation: ticker-scroll 52s linear infinite;
}

.breach-ticker:hover .breach-ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.breach-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--muted);
}

.breach-ticker-item .acct-mono { font-family: var(--font-mono); color: var(--text); font-size: 11.5px; font-weight: 600; }

.breach-ticker-empty {
    padding-left: 116px;
    font-size: 11.5px;
    color: var(--dim);
    white-space: nowrap;
}

/* ============================================================
   NAV SIDEBAR
   ============================================================ */
.shell-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px 10px;
    gap: 3px;
    overflow-y: auto;
}

.nav-section-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 14px 10px 6px;
    display: block;
    white-space: nowrap;
}

/* override MudNavLink with v2 style */
.shell-nav .mud-nav-link, .shell-nav a.mud-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    border: 1px solid transparent;
    transition: background .14s, color .14s, border-color .14s;
    font-size: 14px; font-weight: 500;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Bigger nav item icons to match the larger labels */
.shell-nav .mud-nav-link .mud-icon-root, .shell-nav a.mud-nav-link .mud-icon-root {
    font-size: 20px;
}

.shell-nav .mud-nav-link:hover, .shell-nav a.mud-nav-link:hover {
    background: var(--inset) !important;
    color: var(--text);
    border-color: transparent;
    transform: none;
}

.mud-nav-link.active, a.mud-nav-link.active {
    background: var(--accent-soft) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    color: var(--text) !important;
    box-shadow: none;
    position: relative;
}

.mud-nav-link.active::before, a.mud-nav-link.active::before {
    content: "";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0;
    background: var(--accent);
}

.mud-nav-link.active .mud-nav-link-text,
a.mud-nav-link.active .mud-nav-link-text,
.mud-nav-link.active .mud-icon-root,
a.mud-nav-link.active .mud-icon-root {
    color: var(--text) !important;
    font-weight: 600;
}

/* old .shell-nav-header kept for compat */
.shell-nav-header {
    margin-bottom: 10px;
    padding: 6px 10px 12px;
}

.shell-nav-title { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); }
.shell-nav-subtitle { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Sections size to their content — no per-section scroll. The whole .shell-nav scrolls
   (overflow-y:auto above) only if all items together overflow the sidebar height. */
.shell-nav-menu { flex: 0 0 auto; overflow: visible; }
.shell-nav-menu .mud-nav-menu { padding: 0 !important; }

/* nav footer */
.nav-footer {
    margin-top: auto;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--inset);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nav-footer-env {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-footer-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--r-safe);
    padding: 2px 7px;
    border-radius: 99px;
    background: var(--r-safe-soft);
}

/* ============================================================
   STATUS DOT
   ============================================================ */
.status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.status-dot::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    animation: live-pulse 2s ease infinite;
}

.status-dot.connected {
    background: var(--r-safe);
}

.status-dot.connected::after { background: var(--r-safe); }

.status-dot.disconnected {
    background: var(--r-breach);
    animation: pulse-dot-red 1s ease infinite;
}

.status-dot.disconnected::after { animation: none; }

@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 var(--r-safe-soft); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulse-dot-red {
    0%, 100% { box-shadow: 0 0 0 0 var(--r-breach-soft); }
    50%       { box-shadow: 0 0 0 6px transparent; }
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--pad);
    flex-wrap: wrap;
}

.page-header-left { display: flex; flex-direction: column; gap: 7px; }

.page-header-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 25px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
}

.page-header-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 0; }

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.acct-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
}

.acct-detail-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.acct-detail-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: var(--inset);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

/* ============================================================
   PANEL PRIMITIVES
   ============================================================ */
.surface-panel, .v2-panel {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--glow) !important;
    padding: var(--pad) !important;
}

.surface-panel.compact-panel { padding: 16px !important; }

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: var(--pad-sm);
}

.panel-header > div:first-child { min-width: 0; }
.panel-header-title { display: flex; align-items: center; gap: 10px; }

.panel-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 9px;
}

.panel-subtitle, .panel-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.eyebrow {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
}

.section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 12px;
}

/* ============================================================
   RISK CHIPS
   ============================================================ */
.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 21px;
    padding: 0 9px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.v2-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2-chip.safe    { color: var(--r-safe);    background: var(--r-safe-soft);    border-color: color-mix(in srgb, var(--r-safe) 26%, transparent); }
.v2-chip.warning { color: var(--r-warning); background: var(--r-warning-soft); border-color: color-mix(in srgb, var(--r-warning) 26%, transparent); }
.v2-chip.danger  { color: var(--r-danger);  background: var(--r-danger-soft);  border-color: color-mix(in srgb, var(--r-danger) 26%, transparent); }
.v2-chip.soft    { color: var(--r-soft);    background: var(--r-soft-soft);    border-color: color-mix(in srgb, var(--r-soft) 26%, transparent); }
.v2-chip.breach  { color: var(--r-breach);  background: var(--r-breach-soft);  border-color: color-mix(in srgb, var(--r-breach) 30%, transparent); }
.v2-chip.blocked { color: var(--r-blocked); background: var(--r-blocked-soft); border-color: color-mix(in srgb, var(--r-blocked) 30%, transparent); }
.v2-chip.profit  { color: var(--r-profit);  background: var(--r-profit-soft);  border-color: color-mix(in srgb, var(--r-profit) 26%, transparent); }
.v2-chip.ghost   { color: var(--muted);     background: var(--inset);          border-color: var(--border); }

.risk-chip { border-radius: 99px !important; font-weight: 700; letter-spacing: 0.03em; }
.pos { color: var(--r-safe); }
.neg { color: var(--r-breach); }

/* ============================================================
   KPI CARDS
   ============================================================ */
.overview-kpi-grid .mud-item { display: flex; }

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 96px;
    padding: 16px !important;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition);
    cursor: default;
}

.kpi-card.cursor-pointer { cursor: pointer; }

.kpi-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--kpi-color, var(--accent));
}

.kpi-card:hover {
    border-color: var(--border-strong) !important;
}

.kpi-card-top, .kpi-card-bottom, .metric-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kpi-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kpi-color, var(--dim));
}

.kpi-icon { color: var(--kpi-color, var(--accent)); font-size: 16px !important; }

.kpi-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: clamp(26px, 2.2vw, 32px);
    line-height: 1;
    color: var(--text);
}

.kpi-caption { font-size: 12px; color: var(--muted); }

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 7px;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
}

.kpi-delta.up   { color: var(--r-safe);   background: var(--r-safe-soft); }
.kpi-delta.down { color: var(--r-breach); background: var(--r-breach-soft); }

/* ============================================================
   TABLES
   ============================================================ */
.table-panel .mud-table-container,
.table-panel .mud-simple-table,
.table-panel .mud-table-root { background: transparent !important; }

.table-panel .mud-table-root { border-radius: var(--radius); overflow: hidden; }

.table-panel .mud-table-head th,
.table-panel .mud-simple-table thead th {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    border-bottom: 1px solid var(--border);
    padding-top: 12px;
    padding-bottom: 12px;
}

.table-panel .mud-table-cell,
.table-panel .mud-simple-table tbody td {
    border-bottom: 1px solid var(--border);
}

.table-panel .mud-table-row:hover > .mud-table-cell,
.table-panel .mud-table-row:hover > td,
.table-panel .mud-simple-table tbody tr:hover td,
.overview-critical-table tbody tr:hover td {
    background: var(--inset) !important;
    box-shadow: inset 2px 0 0 var(--accent) !important;
    transition: background var(--transition), box-shadow var(--transition);
}

/* risk left-tint rows */
.risk-row-breach td    { background-color: var(--r-breach-soft) !important; }
.risk-row-softbreach td { background-color: var(--r-soft-soft) !important; }
.risk-row-danger td    { background-color: var(--r-danger-soft) !important; }
.risk-row-warning td   { background-color: var(--r-warning-soft) !important; }
.risk-row-blocked td   { background-color: var(--r-blocked-soft) !important; }

/* risk left border on first cell */
.risk-row-breach td:first-child    { box-shadow: inset 3px 0 0 var(--r-breach) !important; }
.risk-row-softbreach td:first-child { box-shadow: inset 3px 0 0 var(--r-soft) !important; }
.risk-row-danger td:first-child    { box-shadow: inset 3px 0 0 var(--r-danger) !important; }
.risk-row-warning td:first-child   { box-shadow: inset 3px 0 0 var(--r-warning) !important; }
.risk-row-blocked td:first-child   { box-shadow: inset 3px 0 0 var(--r-blocked) !important; }

/* account cell */
.account-cell { display: inline-flex; align-items: center; gap: 6px; }

.account-mono, .td-num, .stat-box-value, .global-stat-value,
.health-metric-value, .stream-panel-metrics, .stream-detail-table .stream-num,
.redis-key-badge, .redis-terminal {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.account-mono { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.td-num       { text-align: right; font-size: 13px; }

.accounts-table-panel .mud-table-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* ============================================================
   FILTERS / TOOLBAR
   ============================================================ */
.filters-panel { margin-bottom: var(--pad); }
.filters-grid  { align-items: end; }
.filters-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.filters-summary { font-size: 12px; color: var(--muted); }
.quick-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-filter-chip { border-radius: 99px !important; }

/* ============================================================
   BOOK HEATMAP
   ============================================================ */
.heatmap-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--muted);
}

.heatmap-swatch {
    width: 9px; height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.heatmap-hover-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 26px;
    font-size: 11.5px;
    color: var(--muted);
}

.heat-grid {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
}

.heat-tile {
    aspect-ratio: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    outline: 1px solid var(--border);
    transition: transform .1s, outline-color .1s, box-shadow .1s;
    background: var(--heat-empty);
}

.heat-tile:hover {
    transform: scale(1.25);
    outline: 1.5px solid var(--text);
    box-shadow: var(--shadow);
    z-index: 2;
    position: relative;
}

/* ============================================================
   CRITICAL QUEUE CARDS
   ============================================================ */
.critical-queue {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crit-queue {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crit-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px 13px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color .14s, transform .14s, background .14s;
    text-decoration: none;
    color: var(--text);
}

.crit-card:hover { border-color: var(--border-strong); transform: translateX(2px); background: var(--panel-3); }

.crit-bar { width: 4px; align-self: stretch; flex-shrink: 0; border-radius: 0 2px 2px 0; }
.crit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.crit-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit-stats { display: flex; gap: 22px; flex-shrink: 0; }
.crit-stat  { display: flex; flex-direction: column; gap: 4px; text-align: right; min-width: 58px; }
.crit-stat .mono { font-size: 14px; font-family: var(--font-mono); }
.crit-go { color: var(--dim); flex-shrink: 0; padding-right: 4px; font-size: 18px; }
.crit-card:hover .crit-go { color: var(--accent); }

.crit-header { display: flex; align-items: center; gap: 9px; }

/* ============================================================
   ENGINE STRIP
   ============================================================ */
.engine-strip-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
}

.engine-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-top: var(--pad-sm);
}

.engine-cell {
    background: var(--panel);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: background .12s;
}

.engine-cell:hover { background: var(--panel-2); }

.engine-cell .engine-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    line-height: 1;
}

/* ============================================================
   OVERVIEW PANELS
   ============================================================ */
.critical-panel {
    border: 1px solid color-mix(in srgb, var(--r-breach) 25%, transparent) !important;
}

.critical-panel-empty {
    border: 1px solid var(--border) !important;
}

.dist-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 32px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.dist-label  { color: var(--text-2); font-size: 12px; }
.dist-count  { text-align: right; font-size: 12px; color: var(--text); font-family: var(--font-mono); }

.dist-bar-bg {
    height: 6px;
    background: var(--inset);
    border-radius: 99px;
    overflow: hidden;
}

.dist-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
    min-width: 4px;
}

/* metric stack (Redis engine stats) */
.metric-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.metric-tile {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--inset);
    border: 1px solid var(--border);
}

.metric-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }

.metric-value {
    display: block;
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.metric-value.muted   { color: var(--muted); }
.metric-value.success { color: var(--r-safe); }
.metric-value.warning { color: var(--r-warning); }
.metric-value.danger  { color: var(--r-breach); }
.metric-value.purple  { color: var(--r-blocked); }

/* ============================================================
   STAT BOXES
   ============================================================ */
.stat-box {
    text-align: center;
    padding: 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--inset);
    transition: border-color var(--transition);
    height: 100%;
    box-sizing: border-box;
}

.stat-box:hover { border-color: var(--border-strong); }
.stat-box.alert { border-color: color-mix(in srgb, var(--r-breach) 30%, transparent); }

.stat-box-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
    display: block;
    margin-bottom: 6px;
}

.stat-box-value { font-weight: 700; font-size: 15px; color: var(--text); }

/* ============================================================
   GLOBAL STAT
   ============================================================ */
.global-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 12px;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 78px;
}

.global-stat-box.alert-warning { border-color: color-mix(in srgb, var(--r-warning) 30%, transparent); background: var(--r-warning-soft); }
.global-stat-box.alert-error   { border-color: color-mix(in srgb, var(--r-breach) 30%, transparent); background: var(--r-breach-soft); }

.global-stat-label  { font-size: 10px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.global-stat-value  { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--text); }

.metric-group-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 4px 0;
}

/* ============================================================
   REDIS
   ============================================================ */
.redis-key-badge {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    display: inline-block;
    margin-bottom: 4px;
}

.redis-terminal {
    background: #06101c;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    min-height: 220px;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.redis-terminal .t-prompt { color: var(--accent); }
.redis-terminal .t-ok     { color: var(--r-safe); }
.redis-terminal .t-error  { color: var(--r-breach); }
.redis-terminal .t-meta   { color: var(--muted); font-size: 11px; }
.redis-terminal .t-cmd    { color: var(--text); }
.redis-terminal .t-nil    { color: var(--dim); }

/* ============================================================
   HEALTH / STREAM PANELS
   ============================================================ */
.stream-health-panels { display: flex; flex-direction: column; gap: 12px; }
.stream-health-panels .mud-expand-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--inset);
    overflow: hidden;
}

.stream-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-width: 0; }
.stream-panel-metrics { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }
.stream-meta-grid { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 6px 12px; font-size: 12px; }
.stream-meta-grid span { color: var(--muted); }
.stream-meta-grid strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-weight: 500; color: var(--text); }
.stream-detail-table th { font-size: 11px; color: var(--muted); }
.stream-detail-table td { font-size: 12px; }
.stream-detail-table .stream-num { text-align: right; }

.health-metric-card { height: 100%; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.health-metric-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* ============================================================
   ACTION CARDS
   ============================================================ */
.action-card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    cursor: pointer;
}

.action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow) !important; }
.action-card.danger:hover  { border-color: color-mix(in srgb, var(--r-breach) 38%, transparent) !important; }
.action-card.warning:hover { border-color: color-mix(in srgb, var(--r-warning) 38%, transparent) !important; }
.action-card.safe:hover    { border-color: color-mix(in srgb, var(--r-safe) 38%, transparent) !important; }

/* ============================================================
   PAYLOAD / MISC
   ============================================================ */
.payload-box {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    background: var(--inset);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 16px;
    gap: 10px;
}

.empty-state-icon { font-size: 50px !important; opacity: 0.35; }
.empty-state-text { font-size: 13px; color: var(--muted); text-align: center; }

/* ============================================================
   COLOR UTILITY CLASSES
   ============================================================ */
.t-secondary { color: var(--muted); }
.t-muted     { color: var(--dim); }
.t-primary   { color: var(--accent); }
.t-success   { color: var(--r-safe); }
.t-error     { color: var(--r-breach); }
.t-warning   { color: var(--r-warning); }
.t-orange    { color: var(--r-soft); }
.t-purple    { color: var(--r-blocked); }
.t-teal      { color: var(--r-profit); }
.key-present  { color: var(--r-safe); }
.key-absent   { color: #3a4b65; }
.key-critical { color: var(--r-breach); }

/* ============================================================
   TOP QUERY TABLE
   ============================================================ */
.top-query-table table { width: 100%; table-layout: fixed; }
.top-query-table th    { font-size: 11px; color: var(--muted); }
.top-query-table .top-query-rank { width: 42px; text-align: center; font-size: 12px; color: var(--dim); }
.top-query-table .top-query-sql  { font-family: var(--font-mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-query-table .top-query-num  { width: 96px; text-align: center; }

.table-header-info { display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; }
.table-header-info-icon { font-size: 14px !important; color: var(--muted) !important; opacity: 0.85; vertical-align: middle; }

/* ============================================================
   ACCOUNT DETAIL — métricas, barras, tabelas
   ============================================================ */
.acct-metrics-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.acct-metric-cell {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    background: var(--panel);
    transition: background var(--transition);
}
.acct-metric-cell:hover { background: var(--panel-2); }
.acct-metric-label {
    font-size: 10px; font-weight: 600;
    letter-spacing: .06em; color: var(--muted);
    text-transform: uppercase;
}
.acct-metric-value {
    font-family: var(--font-mono);
    font-size: 18px; font-weight: 700;
    color: var(--text); line-height: 1;
}

/* Progress bar v2 (substitui MudProgressLinear) */
.dd-bar-track {
    height: 6px; background: var(--inset);
    border-radius: 3px; overflow: hidden;
}
.dd-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.dd-bar-labels { display: flex; justify-content: space-between; margin-top: 4px; }
.dd-bar-labels span { font-size: 10px; color: var(--dim); }

/* Tabelas de detalhe — classes utilitárias */
.acct-tbl th { font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: .05em; }
.acct-tbl td { font-size: 12px; }
.acct-tbl .mono { font-family: var(--font-mono); }
.acct-tbl .muted { color: var(--muted); }
.acct-tbl .num { text-align: right; font-family: var(--font-mono); }

/* Rajada de balance — eventos recebidos no mesmo segundo (aba Balance do detalhe da conta).
   A faixa lateral é o que amarra o bloco: sem ela as linhas da rajada se perdem no meio da tabela
   e o retardatário passa por queda legítima de saldo. Ver invariante I-24 / EC-29. */
.acct-tbl tr.burst-head td {
    font-size: 10.5px;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 8%, transparent);
    border-left: 3px solid var(--dim);
    padding-top: 6px;
    padding-bottom: 6px;
}
.acct-tbl tr.burst-head.inverted td { border-left-color: var(--r-breach); }
.acct-tbl tr.burst-row td:first-child { border-left: 3px solid var(--dim); }
.acct-tbl tr.burst-winner td { background: color-mix(in srgb, var(--r-breach) 10%, transparent); }

@media (max-width: 960px) {
    .acct-metrics-panel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .acct-metrics-panel { grid-template-columns: 1fr 1fr; }
    .acct-metric-value { font-size: 15px; }
}

/* ============================================================
   CURSOR / MISC
   ============================================================ */
.cursor-pointer { cursor: pointer; }
.cursor-pointer:hover { opacity: 0.96; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
    .engine-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 960px) {
    .dashboard-main-content {
        padding: calc(var(--mud-appbar-height, 58px) + 18px) 14px 20px !important;
    }

    .dashboard-appbar { padding: 0 12px; }
    .appbar-tools { gap: 8px; }
    .environment-select { min-width: 150px; }
    .page-header, .panel-header { flex-direction: column; align-items: stretch; }
    .metric-stack { grid-template-columns: 1fr; }
    .crit-card { flex-wrap: wrap; }
    .crit-stats { gap: 14px; }
}

@media (max-width: 700px) {
    .brand-copy { display: none; }
    .clock-rack { display: none; }
    .breach-ticker { display: none; }
    .dist-row { grid-template-columns: 1fr; }
    .engine-grid { grid-template-columns: repeat(2, 1fr); }
    .stream-panel-title { align-items: flex-start; flex-direction: column; }
    .stream-panel-metrics { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .breach-ticker-track, .status-dot::after { animation: none !important; }
}

/* ============================================================
   Pipeline Map (/pipeline) — living circuit of the engine
   Boards carry their own metrics; wires show flow direction +
   health (marching-ants speed ∝ throughput; stall = frozen red).
   ============================================================ */
.pf-legend { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.pf-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.pf-legend i { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }
.pf-legend .l-flow { background: var(--accent); }
.pf-legend .l-lag  { background: var(--r-warning); }
.pf-legend .l-lat  { background: var(--r-blocked); }
.pf-legend .l-p2   { background: repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 8px); }

.pf-ghost {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 12px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}
.pf-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.pf-ghost:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.pf-shell {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(79, 157, 255, 0.04), transparent 70%),
        linear-gradient(180deg, var(--panel), #0e1215);
    padding: 22px 18px;
}
.pf-drag-hint {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 10.5px;
    color: var(--dim);
    pointer-events: none;
}
.pf-canvas {
    position: relative;
    width: 1300px;
    height: 380px;
    margin: 0 auto;
    touch-action: none;
}
svg.pf-edges {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* ── Wires ── */
.pf-edge-base { stroke: rgba(255, 255, 255, 0.10); stroke-width: 2.5; fill: none; }
.pf-flow {
    stroke: var(--accent);
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 10 12;
    animation: pf-march var(--pf-spd, 1.1s) linear infinite;
    filter: drop-shadow(0 0 4px var(--accent-soft));
}
.pf-flow.lag { stroke: var(--r-warning); filter: drop-shadow(0 0 4px var(--r-warning-soft)); }
.pf-flow.lat { stroke: var(--r-blocked); filter: drop-shadow(0 0 4px var(--r-blocked-soft)); }
.pf-flow.phase2 { stroke: var(--dim); stroke-dasharray: 2 8; animation: none; opacity: 0.5; }
.pf-flow.stalled { stroke: var(--r-breach); animation: none; stroke-dasharray: 10 12; opacity: 0.9; }
@keyframes pf-march { to { stroke-dashoffset: -44; } }

/* ── Boards ── */
.pf-node {
    position: absolute;
    width: 176px;
    transform: translate(-50%, -50%);
    cursor: grab;
    user-select: none;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 11px 13px 12px;
    transition: box-shadow 0.16s, border-color 0.16s;
    box-shadow: var(--shadow);
}
.pf-node:hover { border-color: var(--accent); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-soft); }
.pf-node.dragging {
    cursor: grabbing;
    z-index: 20;
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent);
}
.pf-top { display: flex; align-items: center; gap: 9px; }
.pf-ico {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: var(--radius-xs);
    display: grid;
    place-items: center;
    background: var(--panel-3);
    border: 1px solid var(--border);
    color: var(--accent);
}
.pf-ico svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-id { flex: 1 1 auto; min-width: 0; }
.pf-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-kind {
    font-size: 9.5px;
    color: var(--dim);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-chip {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 7px;
    border-radius: 20px;
    text-transform: uppercase;
}
.pf-chip.ok   { color: var(--r-safe);    background: var(--r-safe-soft); }
.pf-chip.warn { color: var(--r-warning); background: var(--r-warning-soft); }
.pf-chip.down { color: var(--r-breach);  background: var(--r-breach-soft); }
.pf-headline { display: flex; align-items: baseline; gap: 6px; margin-top: 11px; }
.pf-hv {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.6px;
    color: var(--text);
}
.pf-hu { font-size: 10.5px; color: var(--muted); }
.pf-rows {
    margin-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.pf-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-rk { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.3px; }
.pf-rv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text); font-weight: 500; }
.pf-row.rlag .pf-rv { color: var(--r-warning); }
.pf-row.rlat .pf-rv { color: var(--r-blocked); }

.pf-node.s-warn { border-color: rgba(230, 173, 60, 0.5); }
.pf-node.s-down { border-color: rgba(240, 65, 63, 0.55); }
.pf-node.s-warn .pf-hv { color: var(--r-warning); }
.pf-node.s-down .pf-hv { color: var(--r-breach); }

@media (prefers-reduced-motion: reduce) {
    .pf-flow { animation: none !important; }
}

/* Pipeline summary cards */
.pf-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
}
.pf-card {
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--r-safe);
    border-radius: var(--radius);
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pf-card-title {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.pf-card-info {
    font-size: 15px !important;
    width: 15px;
    height: 15px;
    color: var(--dim);
    cursor: help;
}
.pf-card-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.15;
}
.pf-card-unit {
    font-size: 12px;
    color: var(--dim);
    margin-left: 4px;
}
.pf-card-evidence {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}
.pf-card.s-ok    { border-left-color: var(--r-safe); }
.pf-card.s-ok    .pf-card-value { color: var(--text); }
.pf-card.s-warn  { border-left-color: var(--r-warning); }
.pf-card.s-warn  .pf-card-value { color: var(--r-warning); }
.pf-card.s-down  { border-left-color: var(--r-breach); }
.pf-card.s-down  .pf-card-value { color: var(--r-breach); }
.pf-card--focus {
    border-color: var(--accent);
    background:
        linear-gradient(180deg, var(--accent-soft), transparent 60%),
        var(--panel-2);
}

/* ── Chat da IA (aba Diagnóstico): markdown renderizado dentro do balão ── */
.ai-md { color: var(--text-2); }
.ai-md > *:first-child { margin-top: 0; }
.ai-md > *:last-child  { margin-bottom: 0; }
.ai-md p { margin: 0 0 8px; }
.ai-md h4, .ai-md h5 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.3;
    margin: 12px 0 6px;
}
.ai-md h4 { font-size: 13.5px; font-weight: 600; }
.ai-md h5 {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ai-md ul, .ai-md ol { margin: 0 0 8px; padding-left: 18px; }
.ai-md li { margin: 2px 0; }
.ai-md li::marker { color: var(--dim); }
.ai-md hr { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
.ai-md a { color: var(--accent); }
.ai-md strong { color: var(--text); font-weight: 600; }
.ai-md code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 1px 4px;
}
.ai-md pre {
    background: var(--inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin: 0 0 8px;
    overflow-x: auto;
}
.ai-md pre code { background: none; border: 0; padding: 0; }
.ai-md blockquote {
    margin: 0 0 8px;
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--border-strong);
    color: var(--muted);
}
.ai-md .ai-md-table { overflow-x: auto; margin: 0 0 8px; }
.ai-md table { border-collapse: collapse; width: 100%; font-size: 12px; }
.ai-md th, .ai-md td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.ai-md th {
    background: var(--inset);
    color: var(--text);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.ai-md tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.ai-md th.num, .ai-md td.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.ai-md .a-right  { text-align: right; }
.ai-md .a-center { text-align: center; }
.ai-md .a-left   { text-align: left; }