/* StyloBot Component Styles - BEM + CSS Custom Properties
   Theme-aware: adapts to light/dark via prefers-color-scheme.
   Override with .sb-dark or .sb-light on any ancestor. */

/* =============================================
   Theme tokens (light by default)
   ============================================= */

:root {
    --sb-color-human: #22c55e;
    --sb-color-bot: #ef4444;
    --sb-color-unknown: #94a3b8;

    --sb-color-risk-unknown: #94a3b8;
    --sb-color-risk-verylow: #22c55e;
    --sb-color-risk-low: #4ade80;
    --sb-color-risk-elevated: #facc15;
    --sb-color-risk-medium: #f97316;
    --sb-color-risk-high: #ef4444;
    --sb-color-risk-veryhigh: #dc2626;
    --sb-color-risk-verified: #3b82f6;

    --sb-font-size: 0.875rem;
    --sb-font-family: system-ui, -apple-system, sans-serif;
    --sb-border-radius: 4px;
    --sb-pill-border-radius: 9999px;

    /* Surface / text tokens - light theme */
    --sb-surface: #f8fafc;
    --sb-surface-alt: #fff;
    --sb-border: #e2e8f0;
    --sb-text: #1e293b;
    --sb-text-muted: #475569;
    --sb-text-faint: #94a3b8;
    --sb-bar-track: #e2e8f0;
    --sb-badge-mix-base: white;
}

/* Dark theme - auto via media query */
@media (prefers-color-scheme: dark) {
    :root {
        --sb-surface: #1e293b;
        --sb-surface-alt: #0f172a;
        --sb-border: #334155;
        --sb-text: #e2e8f0;
        --sb-text-muted: #94a3b8;
        --sb-text-faint: #8b9eb8;
        --sb-bar-track: #334155;
        --sb-badge-mix-base: #0f172a;
    }
}

/* Explicit dark override class */
.sb-dark {
    --sb-surface: #1e293b;
    --sb-surface-alt: #0f172a;
    --sb-border: #334155;
    --sb-text: #e2e8f0;
    --sb-text-muted: #94a3b8;
    --sb-text-faint: #8b9eb8;
    --sb-bar-track: #334155;
    --sb-badge-mix-base: #0f172a;
}

/* Explicit light override class */
.sb-light {
    --sb-surface: #f8fafc;
    --sb-surface-alt: #fff;
    --sb-border: #e2e8f0;
    --sb-text: #1e293b;
    --sb-text-muted: #475569;
    --sb-text-faint: #94a3b8;
    --sb-bar-track: #e2e8f0;
    --sb-badge-mix-base: white;
}

/* =============================================
   Badge
   ============================================= */

.sb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    line-height: 1;
    padding: 0.25em 0.5em;
    border-radius: var(--sb-border-radius);
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.sb-badge--human { border-color: var(--sb-color-human); }
.sb-badge--bot   { border-color: var(--sb-color-bot); }

.sb-badge--risk-unknown   { background: color-mix(in srgb, var(--sb-color-risk-unknown) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-verylow   { background: color-mix(in srgb, var(--sb-color-risk-verylow) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-low       { background: color-mix(in srgb, var(--sb-color-risk-low) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-elevated  { background: color-mix(in srgb, var(--sb-color-risk-elevated) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-medium    { background: color-mix(in srgb, var(--sb-color-risk-medium) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-high      { background: color-mix(in srgb, var(--sb-color-risk-high) 10%, var(--sb-badge-mix-base)); }
.sb-badge--risk-veryhigh  { background: color-mix(in srgb, var(--sb-color-risk-veryhigh) 10%, var(--sb-badge-mix-base)); }

.sb-badge__icon {
    font-size: 1.1em;
}

.sb-badge__label {
    font-weight: 600;
}

.sb-badge__risk {
    opacity: 0.7;
    font-size: 0.85em;
}

/* =============================================
   Confidence Meter
   ============================================= */

.sb-confidence {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    color: var(--sb-text);
}

.sb-confidence__bar {
    display: inline-block;
    height: 8px;
    background: var(--sb-bar-track);
    border-radius: var(--sb-pill-border-radius);
    overflow: hidden;
}

.sb-confidence__fill {
    display: block;
    height: 100%;
    border-radius: var(--sb-pill-border-radius);
    transition: width 0.3s ease;
}

.sb-confidence--low .sb-confidence__fill   { background: var(--sb-color-human); }
.sb-confidence--medium .sb-confidence__fill { background: var(--sb-color-risk-medium); }
.sb-confidence--high .sb-confidence__fill   { background: var(--sb-color-bot); }

.sb-confidence__text {
    font-weight: 600;
    min-width: 2.5em;
    text-align: right;
}

.sb-confidence--low .sb-confidence__text   { color: var(--sb-color-human); }
.sb-confidence--medium .sb-confidence__text { color: var(--sb-color-risk-medium); }
.sb-confidence--high .sb-confidence__text   { color: var(--sb-color-bot); }

/* =============================================
   Risk Pill
   ============================================= */

.sb-risk-pill {
    display: inline-block;
    font-family: var(--sb-font-family);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25em 0.6em;
    border-radius: var(--sb-pill-border-radius);
    color: #fff;
    text-transform: capitalize;
}

.sb-risk-pill--unknown   { background: var(--sb-color-risk-unknown); }
.sb-risk-pill--verylow   { background: var(--sb-color-risk-verylow); }
.sb-risk-pill--low       { background: var(--sb-color-risk-low); color: #1a2e05; }
.sb-risk-pill--elevated  { background: var(--sb-color-risk-elevated); color: #422006; }
.sb-risk-pill--medium    { background: var(--sb-color-risk-medium); }
.sb-risk-pill--high      { background: var(--sb-color-risk-high); }
.sb-risk-pill--veryhigh  { background: var(--sb-color-risk-veryhigh); }
.sb-risk-pill--verified  { background: var(--sb-color-risk-verified); }

/* =============================================
   Summary (Inline)
   ============================================= */

.sb-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    color: var(--sb-text-muted);
}

.sb-summary__label {
    font-weight: 600;
    color: var(--sb-text);
}

.sb-summary__sep {
    opacity: 0.4;
}

/* =============================================
   Summary Card
   ============================================= */

.sb-summary-card {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 1em;
    background: var(--sb-surface-alt);
    color: var(--sb-text);
    max-width: 320px;
}

.sb-summary-card--human { border-left: 3px solid var(--sb-color-human); }
.sb-summary-card--bot   { border-left: 3px solid var(--sb-color-bot); }

.sb-summary-card__header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.75em;
}

.sb-summary-card__icon {
    font-size: 1.25em;
}

.sb-summary-card__label {
    font-weight: 700;
    flex: 1;
}

.sb-summary-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
}

.sb-summary-card__stat {
    display: flex;
    flex-direction: column;
}

.sb-summary-card__stat-label {
    font-size: 0.75rem;
    color: var(--sb-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sb-summary-card__stat-value {
    font-weight: 600;
    color: var(--sb-text);
}

/* =============================================
   Honeypot (offscreen trap)
   ============================================= */

.sb-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* =============================================
   Accessibility: contrast floor for dark theme
   Low-opacity Tailwind text-base-content classes
   fail WCAG AA for small text (<14px) in dark.
   These raise the floor without touching light mode.
   ============================================= */

/* daisyUI 5 renamed --bc to --color-base-content; the old oklch(var(--bc) / x%)
   rendered as oklch(empty / x%) = invalid -> the floor-bump silently failed and
   small-text contrast in dark dropped to the unbumped Tailwind opacity. */
[data-theme="dark"] .text-base-content\/20 { color: color-mix(in oklab, var(--color-base-content) 45%, transparent); }
[data-theme="dark"] .text-base-content\/30 { color: color-mix(in oklab, var(--color-base-content) 52%, transparent); }

/* =============================================
   Table scroll container that does not clip
   tooltips. `overflow-x: auto` + `overflow-y: visible`
   is invalid in the CSS spec (browsers coerce to
   auto/auto), so we use `overflow-x: clip` which IS
   spec-compliant alongside `overflow-y: visible` --
   horizontal overflow is clipped without creating
   a scrollable area that traps daisyUI tooltip
   ::before pseudo-elements. Daisy tooltips on cells
   near the top or bottom edge can now pop above /
   below the row without being chopped by the table
   wrapper.

   Use `.sb-table-scroll` instead of `overflow-x-auto`
   on table wrappers when the cells contain tooltips.
   ============================================= */
.sb-table-scroll {
    overflow-x: clip;
    overflow-y: visible;
    overflow-clip-margin: 0.5rem;
}

/* =============================================
   Tooltip portal. While the portal is showing
   a cell's tooltip at body level, suppress the
   original ::before / ::after pseudos so we
   don't render a clipped copy alongside the
   portaled one.
   ============================================= */
.tooltip.sb-tooltip-portal-active::before,
.tooltip.sb-tooltip-portal-active::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

.sb-tooltip-portal-tip {
    /* daisyUI v5 renamed the theme palette CSS variables from --n / --nc to
       --color-neutral / --color-neutral-content (and base / primary / etc.
       likewise). The old `oklch(var(--n) / 0.95)` resolved to oklch(empty / 0.95)
       under v5 -> no background, no foreground -> invisible tooltips. v5's
       --color-neutral is already a full color (e.g. oklch(...)), so wrap with
       color-mix for the transparency. Mirror change anywhere else in this file
       that still references --n / --nc / --bc -- those are all v4 leftovers. */
    background: color-mix(in oklab, var(--color-neutral) 95%, transparent);
    color: var(--color-neutral-content);
    font-size: 11px;
    line-height: 1.3;
    padding: 4px 8px;
    border-radius: 4px;
    max-width: 22rem;
    white-space: pre-line;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .text-base-content\/40 { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
[data-theme="dark"] .text-base-content\/50 { color: color-mix(in oklab, var(--color-base-content) 68%, transparent); }

/* =============================================
   SbHealthDot -- single-glance status indicator.
   Drives both the standalone dot (pack-hub headers) and the
   left-border accent on SbStatTile through the colour tokens
   below. Caution + Warning share a token deliberately; if they
   ever need to diverge it is a single rule edit, not an enum
   churn.
   Tokens reuse the existing --sb-color-human / --sb-color-bot
   palette so dot semantics stay in lock-step with the badge
   semantics used throughout the dashboard.
   ============================================= */
.sb-health-dot {
    display: inline-block;
    line-height: 1;
    font-size: 0.7em;
    vertical-align: middle;
}
.sb-health-good     { color: var(--sb-color-human); }
.sb-health-caution  { color: var(--sb-color-risk-elevated); }
.sb-health-danger   { color: var(--sb-color-bot); }
.sb-health-neutral  { color: var(--sb-text-muted); }

/* =============================================
   SbStatTile -- big-number rollup card.
   Composes SbSparkline + a HealthBand-driven left-border accent
   that matches the SbHealthDot tokens above. All optional props
   collapse cleanly; a tile with just a title + value still
   renders.
   ============================================= */
.sb-stat-tile {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    background: var(--sb-surface-alt);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 0.75em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    min-width: 9rem;
}
.sb-stat-tile-good     { border-left: 3px solid var(--sb-color-human); }
.sb-stat-tile-caution  { border-left: 3px solid var(--sb-color-risk-elevated); }
.sb-stat-tile-danger   { border-left: 3px solid var(--sb-color-bot); }
.sb-stat-tile-neutral  { border-left: 3px solid var(--sb-border); }

.sb-stat-tile-head {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sb-text-faint);
}
.sb-stat-tile-title { font-weight: 600; }

.sb-stat-tile-body {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
}
.sb-stat-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sb-text);
}
.sb-stat-tile-unit {
    font-size: 0.85rem;
    color: var(--sb-text-muted);
}
.sb-stat-tile-spark {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

.sb-stat-tile-delta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

.sb-stat-tile-foot {
    margin-top: 0.25em;
    font-size: 0.8rem;
}
.sb-stat-tile-drill {
    color: var(--sb-text-muted);
    text-decoration: none;
}
.sb-stat-tile-drill:hover {
    color: var(--sb-text);
    text-decoration: underline;
}

/* =============================================
   SbTrendCard -- medium-sized meter card.
   Sits between SbStatTile (compact) and a full chart panel.
   Reuses the same HealthBand left-border accent tokens as SbStatTile
   + the muted text tokens for subtitle/delta/axis. No new palette.
   ============================================= */
.sb-trend-card {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    background: var(--sb-surface-alt);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 0.85em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    min-width: 14rem;
}
.sb-trend-card--good     { border-left: 3px solid var(--sb-color-human); }
.sb-trend-card--caution  { border-left: 3px solid var(--sb-color-risk-elevated); }
.sb-trend-card--danger   { border-left: 3px solid var(--sb-color-bot); }
.sb-trend-card--neutral  { border-left: 3px solid var(--sb-border); }

.sb-trend-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.sb-trend-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
}
.sb-trend-card__icon {
    color: var(--sb-text-muted);
    font-size: 1em;
}
.sb-trend-card__title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sb-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sb-trend-card__subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sb-text-faint);
}

.sb-trend-card__headline {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
    flex-wrap: wrap;
}
.sb-trend-card__value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--sb-text);
}
.sb-trend-card__unit {
    font-size: 0.85rem;
    color: var(--sb-text-muted);
}
.sb-trend-card__spark-inline {
    display: inline-flex;
    align-items: center;
    color: var(--sb-text-muted);
}
.sb-trend-card__delta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--sb-text-muted);
}

.sb-trend-card__trend {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    color: var(--sb-text-muted);
}
.sb-trend-card__trend .sb-sparkline {
    width: 100%;
    height: 28px;
}
.sb-trend-card__axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--sb-text-faint);
}
.sb-trend-card__axis-tick {
    line-height: 1;
}

.sb-trend-card__footer {
    margin-top: 0.2em;
    font-size: 0.8rem;
}
.sb-trend-card__drill {
    color: var(--sb-text-muted);
    text-decoration: none;
}
.sb-trend-card__drill:hover {
    color: var(--sb-text);
    text-decoration: underline;
}

/* =============================================
   SbMeterTable -- tabular meter listing.
   Borderless, dense; the Current column is monospace + right-aligned
   so values line up across rows. Row variants use the same HealthBand
   tokens as SbStatTile / SbTrendCard via a subtle 2px left border.
   Kind pills reuse existing tokens: Counter=human-ish (accent), Gauge
   neutral, Histogram=elevated, UpDownCounter=muted. No new palette.
   ============================================= */
.sb-meter-table {
    font-family: var(--sb-font-family);
    font-size: var(--sb-font-size);
    color: var(--sb-text);
    background: var(--sb-surface-alt);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 0.75em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.sb-meter-table__head {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.sb-meter-table__title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sb-text);
}
.sb-meter-table__caption {
    margin: 0;
    font-size: 0.75rem;
    color: var(--sb-text-faint);
}
.sb-meter-table__empty {
    margin: 0;
    padding: 0.75em 0;
    font-size: 0.85rem;
    color: var(--sb-text-faint);
    font-style: italic;
}

.sb-meter-table__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.sb-meter-table__table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--sb-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3em 0.5em;
    border-bottom: 1px solid var(--sb-border);
}
.sb-meter-table__table tbody td,
.sb-meter-table__table tbody th {
    padding: 0.35em 0.5em;
    border-bottom: 1px solid var(--sb-border);
    vertical-align: middle;
    text-align: left;
    font-weight: 400;
}
.sb-meter-table__table tbody tr:last-child td,
.sb-meter-table__table tbody tr:last-child th {
    border-bottom: none;
}

.sb-meter-table__num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: right;
    white-space: nowrap;
}
.sb-meter-table__name {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    font-weight: 500;
    color: var(--sb-text);
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}
.sb-meter-table__name-block {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
}
.sb-meter-table__name-text {
    word-break: break-word;
    font-weight: 600;
    color: var(--sb-text);
}
.sb-meter-table__name-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.7rem;
    color: var(--sb-text-muted);
    background: var(--sb-surface-alt, rgba(127,127,127,0.08));
    padding: 0.05em 0.4em;
    border-radius: 4px;
    align-self: flex-start;
    word-break: break-all;
}
.sb-meter-table__name-desc {
    color: var(--sb-text-muted);
    font-size: 0.78rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.35;
    max-width: 56ch;
}
.sb-meter-table__value {
    font-weight: 600;
    color: var(--sb-text);
}
.sb-meter-table__unit {
    color: var(--sb-text-muted);
    margin-left: 0.2em;
}
.sb-meter-table__spark {
    vertical-align: middle;
    color: var(--sb-text-muted);
    width: 80px;
}
.sb-meter-table__action {
    text-align: right;
    white-space: nowrap;
}
.sb-meter-table__drill {
    color: var(--sb-text-muted);
    text-decoration: none;
    font-size: 0.75rem;
}
.sb-meter-table__drill:hover {
    color: var(--sb-text);
    text-decoration: underline;
}

.sb-meter-table__row--good > .sb-meter-table__name     { box-shadow: inset 2px 0 0 var(--sb-color-human); }
.sb-meter-table__row--caution > .sb-meter-table__name  { box-shadow: inset 2px 0 0 var(--sb-color-risk-elevated); }
.sb-meter-table__row--danger > .sb-meter-table__name   { box-shadow: inset 2px 0 0 var(--sb-color-bot); }
.sb-meter-table__row--neutral > .sb-meter-table__name  { box-shadow: inset 2px 0 0 transparent; }

.sb-meter-table__pill {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: var(--sb-pill-border-radius);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    background: var(--sb-surface);
    color: var(--sb-text-muted);
    border: 1px solid var(--sb-border);
}
.sb-meter-table__pill--counter        { color: var(--sb-color-human); border-color: var(--sb-color-human); }
.sb-meter-table__pill--gauge          { color: var(--sb-text-muted); border-color: var(--sb-border); }
.sb-meter-table__pill--histogram      { color: var(--sb-color-risk-elevated); border-color: var(--sb-color-risk-elevated); }
.sb-meter-table__pill--updowncounter  { color: var(--sb-text-faint); border-color: var(--sb-text-faint); }

/* =============================================
   Pack-health row (C1 -- dashboard overview front door)
   ============================================= */

.sb-pack-health-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.sb-pack-health-row__cell {
    min-width: 0;
}

/* =============================================
   Endpoints list - inline-detail selection state
   ============================================= */

/* Highlight the row whose detail is currently shown in
   #endpoint-detail-panel. Driven by hx-on::before-request on the row
   in SbEndpointsList/Default.cshtml. Border-only treatment so the
   selection stays visible across the row's hover state without
   fighting the table's striping. */
tr.endpoint-row.is-selected > td {
    background: color-mix(in srgb, var(--color-primary, #3b82f6) 12%, transparent);
    box-shadow: inset 2px 0 0 0 var(--color-primary, #3b82f6);
}

tr.endpoint-row.is-selected > td:first-child {
    border-left: 2px solid var(--color-primary, #3b82f6);
}