/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-zeika8lbj4] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-zeika8lbj4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/LicenseOverview.razor.rz.scp.css */
/*
   Tufte-style scoped styles for the analytics overview.

   Principles applied (see references/design_system.md in the tufte skill):
     - Off-white background (#FFFFF8), near-black ink (#111111).
     - Charter/Georgia serif for analytical surfaces.
     - No card chrome. Numbers + thin gray rules; whitespace separates blocks.
     - Severity carried by a glyph (▲) in Tufte red, not by background hue —
       color-blind safe (the glyph carries the signal even in grayscale).
     - Section headings in italic small caps; no bold competing with data.
     - Inline rate bars use luminance, not hue, to encode magnitude.

   The :deep() selectors reach into Bootstrap-rendered children (the surrounding
   Bootstrap card we don't control).
*/

.analytics[b-x7bpcj6mgk] {
    --ink: #111111;
    --ink-muted: #666666;
    --rule: #DDDDDD;
    --rule-strong: #999999;
    --bg: #FFFFF8;
    --accent: #9B1C1C;            /* Tufte red, used only for the warn/danger glyph */
    --bar-fill: #4E5C68;          /* slate; matches the bar chart color */
    --bar-track: #EEEEEE;

    background: var(--bg);
    color: var(--ink);
    font-family: Charter, Georgia, "Source Serif Pro", serif;
    font-size: 11pt;
    line-height: 1.4;
    padding: 1.25rem;
}

.analytics .section-heading[b-x7bpcj6mgk] {
    font-size: 10pt;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.25rem;
    margin: 0 0 0.75rem 0;
}

.analytics .section-heading + .section-heading[b-x7bpcj6mgk],
.analytics .kpi-row + .section-heading[b-x7bpcj6mgk] {
    margin-top: 1.5rem;
}

/* KPI grid — flat blocks, no card chrome. Aligned by CSS grid for crisp columns. */
.analytics .kpi-row[b-x7bpcj6mgk] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem 1.5rem;
    margin-bottom: 0.5rem;
}
.analytics .kpi-row.cols-4[b-x7bpcj6mgk] { grid-template-columns: repeat(4, 1fr); }
.analytics .kpi-row.cols-3[b-x7bpcj6mgk] { grid-template-columns: repeat(3, 1fr); }

.analytics .kpi[b-x7bpcj6mgk] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--rule);
    padding-top: 0.4rem;
}

.analytics .kpi-value[b-x7bpcj6mgk] {
    font-size: 22pt;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums oldstyle-nums;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.analytics .kpi-label[b-x7bpcj6mgk] {
    font-size: 9.5pt;
    color: var(--ink-muted);
    margin-top: 0.25rem;
}

.analytics .kpi-sub[b-x7bpcj6mgk] {
    font-size: 8.5pt;
    color: var(--ink-muted);
    margin-top: 0.1rem;
    font-style: italic;
}

/* Severity glyph — the only colored mark on the dashboard. Position carries
   meaning (next to the value it warns about); color is reinforcement, not
   the only signal. Title attribute provides accessible text. */
.analytics .warn-glyph[b-x7bpcj6mgk] {
    color: var(--accent);
    font-size: 12pt;
    line-height: 1;
}

/* Inline horizontal bar for the activation-utilization KPI. Width encodes
   magnitude directly; the percent label sits beside it for precision. */
.analytics .kpi-bar[b-x7bpcj6mgk] {
    width: 100%;
    height: 6px;
    background: var(--bar-track);
    margin-top: 0.4rem;
    position: relative;
}
.analytics .kpi-bar > .kpi-bar-fill[b-x7bpcj6mgk] {
    height: 100%;
    background: var(--bar-fill);
}

/* Rate-comparison row: two paired metrics (sent, redeemed) shown as 7d-vs-30d
   daily averages on a shared scale. The eye reads the rate change without
   needing to do the division. */
.analytics .rate-block[b-x7bpcj6mgk] {
    margin-bottom: 1rem;
}
.analytics .rate-title[b-x7bpcj6mgk] {
    font-size: 9.5pt;
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
}
.analytics .rate-row[b-x7bpcj6mgk] {
    display: grid;
    grid-template-columns: 5rem 1fr 4rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums oldstyle-nums;
    font-size: 10pt;
}
.analytics .rate-row .rate-window-label[b-x7bpcj6mgk] {
    color: var(--ink-muted);
    font-style: italic;
}
.analytics .rate-row .rate-track[b-x7bpcj6mgk] {
    height: 8px;
    background: var(--bar-track);
    position: relative;
}
.analytics .rate-row .rate-fill[b-x7bpcj6mgk] {
    height: 100%;
    background: var(--bar-fill);
}
.analytics .rate-row .rate-value[b-x7bpcj6mgk] {
    color: var(--ink);
    text-align: left;
}
.analytics .rate-row .rate-value .rate-suffix[b-x7bpcj6mgk] {
    color: var(--ink-muted);
    font-size: 8.5pt;
    margin-left: 0.15rem;
}

/* Product-mix bar chart wrapper — let the canvas take the width it needs. */
.analytics .product-mix-chart[b-x7bpcj6mgk] {
    max-width: 540px;
    margin-bottom: 0.5rem;
}

.analytics .footer-source[b-x7bpcj6mgk] {
    font-size: 8.5pt;
    color: var(--ink-muted);
    margin-top: 1.5rem;
    font-style: italic;
}

/* Responsive collapse on narrow screens — keep the grid honest on tablets. */
@media (max-width: 960px) {
    .analytics .kpi-row[b-x7bpcj6mgk],
    .analytics .kpi-row.cols-4[b-x7bpcj6mgk],
    .analytics .kpi-row.cols-3[b-x7bpcj6mgk] {
        grid-template-columns: repeat(2, 1fr);
    }
}