/* ============================================================================
 * BI — design system for the dashboard & report area
 * ----------------------------------------------------------------------------
 * Tokens map onto the Radzen Material palette (--rz-*) so the BI area reads as
 * part of the same program as the rest of OpexPrime. Every rule is scoped to
 * the `.bi-area` namespace: the DevExpress dashboard, designer and viewer canvases
 * share these pages, and DX is sensitive to stray global CSS.
 *
 * The recurring device is the scope rule — a hairline under every page title,
 * tipped with a short accent segment, carrying the counts that say how much of
 * the catalog you are looking at. It is the one element every BI page shares.
 * ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
.bi-area {
    /* surfaces */
    --bi-ground: var(--rz-base-100, #f6f7fa);
    --bi-paper: var(--rz-white, #ffffff);
    --bi-sunk: var(--rz-base-200, #e9edf0);

    /* hairlines */
    --bi-line: var(--rz-base-300, #dadfe2);
    --bi-line-soft: var(--rz-base-200, #e9edf0);
    --bi-line-strong: var(--rz-base-400, #c1c9cb);

    /* ink */
    --bi-ink: var(--rz-base-900, #28363c);
    --bi-ink-soft: var(--rz-base-700, #545e61);
    --bi-ink-mute: var(--rz-base-600, #77858b);
    --bi-ink-faint: var(--rz-base-500, #95a4a8);

    /* accent — one blue, the app's primary */
    --bi-accent: var(--rz-primary, #0d6efd);
    --bi-accent-soft: rgba(13, 110, 253, 0.08);
    --bi-accent-line: rgba(13, 110, 253, 0.32);

    /* semantics — darkened off the Radzen pastels so they read on white */
    --bi-star: #b07d1f;
    --bi-good: #3f8a57;
    --bi-warn: #b07d1f;
    --bi-bad: #c64a50;
    --bi-good-soft: rgba(93, 191, 116, 0.16);
    --bi-warn-soft: rgba(250, 193, 82, 0.20);
    --bi-bad-soft: rgba(249, 119, 127, 0.16);

    /* type */
    --bi-font: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bi-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* spacing */
    --bi-s1: 4px;
    --bi-s2: 8px;
    --bi-s3: 12px;
    --bi-s4: 16px;
    --bi-s5: 24px;
    --bi-s6: 32px;
    --bi-s7: 48px;

    /* radii — tight; this is a catalog, not a card wall */
    --bi-r-sm: 3px;
    --bi-r-md: 6px;
    --bi-r-lg: 10px;
    --bi-r-pill: 999px;

    /* motion */
    --bi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bi-fast: 140ms;
    --bi-slow: 220ms;

    /* elevation — flat at rest, lifts only on intent */
    --bi-lift: 0 1px 2px rgba(40, 54, 60, 0.04), 0 6px 16px rgba(40, 54, 60, 0.08);
}

/* ----------------------------------------------------------------- shell -- */
.bi-area {
    background: var(--bi-ground);
    color: var(--bi-ink);
    font-family: var(--bi-font);
    font-size: 14px;
    line-height: 1.5;
    /* The host article is a column flex container, so growing is what actually fills a short
       page — a percentage min-height resolves against an auto height and does nothing. */
    flex: 1 1 auto;
    min-height: 100%;
    padding: var(--bi-s6) var(--bi-s6) var(--bi-s7);
    box-sizing: border-box;
}

.bi-area *,
.bi-area *::before,
.bi-area *::after {
    box-sizing: border-box;
}

/* Let the BI ground run edge to edge inside the host content area. */
article:has(> .bi-area) {
    padding: 0 !important;
}

.bi-shell {
    max-width: 1440px;
    margin: 0 auto;
}

/* Canvas pages pin themselves to the viewport (minus the layout's 3.5rem topbar) and hand
   every remaining pixel to the DX surface: the head takes its natural height, the canvas
   flexes into the rest, and the page itself never scrolls. */
.bi-area--canvas {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 3.5rem);
    min-height: 0;
    overflow: hidden;
    padding: var(--bi-s4) var(--bi-s5);
}

/* Canvas pages ignore the catalog's 1440px reading width — the DX surface gets the whole
   viewport, with the area's own padding as the only side margin. */
.bi-area--canvas .bi-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
}

.bi-area--canvas .bi-canvas {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* ------------------------------------------------------------- page head -- */
.bi-head {
    margin-bottom: var(--bi-s5);
}

.bi-eyebrow {
    font-family: var(--bi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
    margin: 0 0 var(--bi-s2);
}

.bi-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--bi-ink);
    margin: 0;
}

.bi-lede {
    margin: var(--bi-s3) 0 0;
    color: var(--bi-ink-mute);
    font-size: 14px;
    max-width: 76ch;
}

.bi-lede code {
    font-family: var(--bi-mono);
    font-size: 0.92em;
    background: var(--bi-sunk);
    border-radius: var(--bi-r-sm);
    padding: 1px 5px;
}

/* The scope rule — hairline, accent tick at the left, facts and actions under. */
.bi-rule {
    position: relative;
    margin-top: var(--bi-s5);
    padding-top: var(--bi-s3);
    border-top: 1px solid var(--bi-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-s4);
    flex-wrap: wrap;
}

.bi-rule::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 28px;
    height: 2px;
    background: var(--bi-accent);
}

.bi-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bi-s1) var(--bi-s4);
    min-height: 30px;
}

.bi-fact {
    font-family: var(--bi-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
    white-space: nowrap;
}

.bi-fact b {
    font-weight: 600;
    font-size: 13px;
    color: var(--bi-ink);
    font-variant-numeric: tabular-nums;
}

.bi-fact--accent b {
    color: var(--bi-accent);
}

.bi-fact--star b {
    color: var(--bi-star);
}

.bi-fact--warn b {
    color: var(--bi-warn);
}

.bi-actions {
    display: flex;
    align-items: center;
    gap: var(--bi-s2);
    flex-wrap: wrap;
}

/* Compact head — the canvas pages' single-row variant. The accent tick moves onto the
   bottom hairline so the scope-rule identity survives the collapse. */
.bi-head--compact {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-s4);
    flex-wrap: wrap;
    margin-bottom: var(--bi-s3);
    padding-bottom: var(--bi-s3);
    border-bottom: 1px solid var(--bi-line);
}

.bi-head--compact::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 2px;
    background: var(--bi-accent);
}

.bi-head--compact .bi-head__id {
    display: flex;
    align-items: baseline;
    gap: var(--bi-s3);
    min-width: 0;
}

.bi-head--compact .bi-eyebrow {
    margin: 0;
    white-space: nowrap;
}

.bi-head--compact .bi-title {
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bi-head--compact .bi-facts {
    min-height: 0;
}

/* --------------------------------------------------------------- search --- */
/* A native input rather than a Radzen one: filtering has to react per keystroke,
   and RadzenTextBox only raises its value on change. */
.bi-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bi-search__icon {
    position: absolute;
    left: 9px;
    color: var(--bi-ink-faint);
    pointer-events: none;
    line-height: 0;
}

.bi-search input {
    font: inherit;
    font-size: 13px;
    color: var(--bi-ink);
    width: 240px;
    height: 34px;
    padding: 0 30px 0 32px;
    background: var(--bi-paper);
    border: 1px solid var(--bi-line-strong);
    border-radius: var(--bi-r-sm);
    transition: border-color var(--bi-fast) var(--bi-ease), box-shadow var(--bi-fast) var(--bi-ease);
}

.bi-search input::placeholder {
    color: var(--bi-ink-faint);
}

.bi-search input:hover {
    border-color: var(--bi-ink-faint);
}

.bi-search input:focus {
    outline: none;
    border-color: var(--bi-accent);
    box-shadow: 0 0 0 3px var(--bi-accent-soft);
}

.bi-search__clear {
    position: absolute;
    right: 5px;
    appearance: none;
    background: none;
    border: 0;
    padding: 2px;
    line-height: 0;
    border-radius: var(--bi-r-sm);
    color: var(--bi-ink-faint);
    cursor: pointer;
}

.bi-search__clear:hover {
    color: var(--bi-ink);
    background: var(--bi-sunk);
}

/* ---------------------------------------------------------------- panel --- */
.bi-panel {
    background: var(--bi-paper);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
}

.bi-panel + .bi-panel {
    margin-top: var(--bi-s4);
}

.bi-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-s4);
    flex-wrap: wrap;
    padding: var(--bi-s4) var(--bi-s5);
    border-bottom: 1px solid var(--bi-line-soft);
}

.bi-panel__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bi-ink);
    margin: 0;
}

.bi-panel__hint {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--bi-ink-mute);
}

.bi-panel__body {
    padding: var(--bi-s5);
}

/* -------------------------------------------------------------- section --- */

.bi-section__title {
    font-family: var(--bi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
    margin: 0 0 var(--bi-s3);
}

/* ---------------------------------------------------------------- tiles --- */
.bi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bi-s4);
}

.bi-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bi-s3);
    background: var(--bi-paper);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    padding: var(--bi-s4);
    transition: border-color var(--bi-fast) var(--bi-ease),
                box-shadow var(--bi-slow) var(--bi-ease),
                transform var(--bi-slow) var(--bi-ease);
}

.bi-tile:hover {
    border-color: var(--bi-accent-line);
    box-shadow: var(--bi-lift);
    transform: translateY(-2px);
}

.bi-tile:focus-within {
    border-color: var(--bi-accent);
}

.bi-tile__top {
    display: flex;
    align-items: flex-start;
    gap: var(--bi-s3);
}

.bi-tile__mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--bi-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bi-accent-soft);
    color: var(--bi-accent);
    overflow: hidden;
}

.bi-tile__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bi-tile__heading {
    min-width: 0;
    flex: 1 1 auto;
}

/* The name is the hit target: its ::after covers the whole tile, so the card
   clicks as one piece while the star button stays independently reachable. */
.bi-tile__name {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bi-ink);
    cursor: pointer;
    overflow-wrap: anywhere;
}

.bi-tile__name::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--bi-r-md);
}

.bi-tile__name:hover {
    color: var(--bi-accent);
}

.bi-tile__name:focus-visible {
    outline: none;
}

.bi-tile__name:focus-visible::after {
    outline: 2px solid var(--bi-accent);
    outline-offset: 2px;
}

.bi-tile__desc {
    margin: 0;
    font-size: 13px;
    color: var(--bi-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bi-tile__foot {
    margin-top: auto;
    padding-top: var(--bi-s3);
    border-top: 1px solid var(--bi-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-s2);
    min-height: 34px;
}

/* Category identity, shown only where cards span categories. */
.bi-tile__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s2);
    font-size: 12px;
    color: var(--bi-ink-mute);
    min-width: 0;
}

.bi-tile__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
}

.bi-tile__open {
    font-family: var(--bi-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bi-ink-faint);
    white-space: nowrap;
    transition: color var(--bi-fast) var(--bi-ease);
}

.bi-tile:hover .bi-tile__open {
    color: var(--bi-accent);
}

/* Star sits above the tile-wide hit area. */
.bi-star {
    position: relative;
    z-index: 1;
    appearance: none;
    background: none;
    border: 0;
    padding: var(--bi-s1);
    margin: -4px -4px 0 0;
    line-height: 0;
    border-radius: var(--bi-r-sm);
    color: var(--bi-ink-faint);
    cursor: pointer;
    transition: color var(--bi-fast) var(--bi-ease), background var(--bi-fast) var(--bi-ease);
}

.bi-star:hover {
    background: var(--bi-sunk);
    color: var(--bi-star);
}

.bi-star--on {
    color: var(--bi-star);
}

/* ---------------------------------------------------------------- strip --- */
.bi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--bi-paper);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    overflow: hidden;
}

.bi-strip__cell {
    padding: var(--bi-s4) var(--bi-s5);
    border-right: 1px solid var(--bi-line-soft);
    display: flex;
    flex-direction: column;
    gap: var(--bi-s1);
}

.bi-strip__cell:last-child {
    border-right: 0;
}

.bi-strip__label {
    font-family: var(--bi-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
}

.bi-strip__value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bi-ink);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- pills --- */
.bi-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s1);
    padding: 2px 9px;
    border-radius: var(--bi-r-pill);
    font-family: var(--bi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--bi-sunk);
    color: var(--bi-ink-soft);
}

.bi-pill--good {
    background: var(--bi-good-soft);
    color: var(--bi-good);
}

.bi-pill--warn {
    background: var(--bi-warn-soft);
    color: var(--bi-warn);
}

.bi-pill--quiet {
    background: transparent;
    border: 1px solid var(--bi-line);
    color: var(--bi-ink-mute);
}

/* Machine-facing identifiers: DbSet names, process ids, context names. */
.bi-ident {
    font-family: var(--bi-mono);
    font-size: 12px;
    color: var(--bi-ink-mute);
}


/* A disclosure that keeps long reference copy out of the way until wanted. */
.bi-disclose {
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
}

.bi-disclose > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--bi-s3) var(--bi-s5);
    font-size: 13px;
    font-weight: 600;
    color: var(--bi-ink-soft);
    display: flex;
    align-items: center;
    gap: var(--bi-s2);
}

.bi-disclose > summary::-webkit-details-marker {
    display: none;
}

.bi-disclose > summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid var(--bi-ink-faint);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform var(--bi-fast) var(--bi-ease);
}

.bi-disclose[open] > summary::before {
    transform: rotate(90deg);
}

.bi-disclose > summary:hover {
    color: var(--bi-accent);
}

.bi-disclose__body {
    padding: 0 var(--bi-s5) var(--bi-s4);
    border-top: 1px solid var(--bi-line-soft);
    padding-top: var(--bi-s4);
}

.bi-disclose__body p {
    margin: 0 0 var(--bi-s3);
    font-size: 13px;
    color: var(--bi-ink-soft);
    max-width: 92ch;
}

.bi-disclose__body p:last-child {
    margin-bottom: 0;
}

.bi-disclose__body code {
    font-family: var(--bi-mono);
    font-size: 0.92em;
    background: var(--bi-sunk);
    border-radius: var(--bi-r-sm);
    padding: 1px 5px;
}

/* --------------------------------------------------------------- states --- */
.bi-state {
    border: 1px dashed var(--bi-line-strong);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
    padding: var(--bi-s7) var(--bi-s5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bi-s3);
    text-align: center;
}

.bi-state__icon {
    color: var(--bi-ink-faint);
    line-height: 0;
}

.bi-state--error .bi-state__icon {
    color: var(--bi-bad);
}

.bi-state__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bi-ink);
    margin: 0;
}

.bi-state__body {
    margin: 0;
    font-size: 13px;
    color: var(--bi-ink-mute);
    max-width: 46ch;
}

/* Skeletons hold the layout while data loads, so nothing jumps on arrival. */
.bi-skel {
    background: linear-gradient(90deg, var(--bi-sunk) 25%, var(--bi-line-soft) 37%, var(--bi-sunk) 63%);
    background-size: 400% 100%;
    animation: bi-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--bi-r-sm);
}

.bi-skel-tile {
    height: 148px;
    border-radius: var(--bi-r-md);
}

.bi-skel-row {
    height: 44px;
    margin-bottom: var(--bi-s2);
}

@keyframes bi-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* --------------------------------------------------------------- canvas --- */
/* Frame around a DevExpress dashboard, designer or viewer surface. */
.bi-canvas {
    background: var(--bi-paper);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    overflow: hidden;
    min-height: 460px;
}

.bi-canvas .dx-dashboard {
    height: 100%;
    overflow: hidden;
}

/* ------------------------------------------------- Radzen grid alignment -- */
/* Radzen grids stay Radzen grids; these only bring their chrome in line with
   the rest of the BI vocabulary. */
.bi-area .rz-data-grid,
.bi-area .rz-datatable {
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    overflow: hidden;
    background: var(--bi-paper);
}

.bi-area .rz-datatable-thead th {
    font-family: var(--bi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
    background: var(--bi-ground);
}

.bi-area .rz-data-row td {
    border-bottom: 1px solid var(--bi-line-soft);
}

.bi-area .rz-data-row:hover td {
    background: var(--bi-ground);
}

/* ---------------------------------------------------------------- views --- */
/* BI Views: a DevExpress grid or pivot under a small toolbar, on a canvas page. The page never
   scrolls; the tab strip, toolbar and banners take their natural height and the control gets the
   rest, scrolling its own rows. The controls keep their own chrome. */
.bi-area .bi-view-domain {
    margin-bottom: var(--bi-s6);
}

.bi-area .bi-view-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bi-s2);
    margin: var(--bi-s2) 0;
}

.bi-area .bi-view-toolbar__spacer {
    flex: 1 1 auto;
}

.bi-area .bi-view-toolbar__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s1);
    margin: 0 var(--bi-s2);
    font-size: 13px;
    color: var(--bi-ink-soft);
    cursor: pointer;
}

.bi-area .bi-view-banner {
    display: flex;
    align-items: center;
    gap: var(--bi-s2);
    margin-bottom: var(--bi-s2);
    padding: var(--bi-s1) var(--bi-s3);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
    color: var(--bi-ink-soft);
    font-size: 13px;
}

.bi-area .bi-view-banner--warn {
    border-color: var(--bi-warn);
    background: var(--bi-warn-soft);
    color: var(--bi-ink);
}

/* Tabs → panel → tab wrapper → canvas: every level is a column flex item with min-height 0 so the
   canvas can shrink to what is left of the viewport instead of pushing the page to scroll. */
.bi-area--canvas .bi-view-tabs,
.bi-area--canvas .bi-view-tabs .rz-tabview,
.bi-area--canvas .bi-view-tabs .rz-tabview-panels,
.bi-area--canvas .bi-view-tabs .rz-tabview-panel,
.bi-area--canvas .bi-view-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bi-area--canvas .bi-view-tabs .rz-tabview-panel {
    padding: 0;
}

.bi-area .bi-view-canvas {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bi-area .bi-view-grid,
.bi-area .bi-view-pivot {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border: 0;
}

.bi-area .bi-view-empty {
    padding: var(--bi-s6);
    text-align: center;
    color: var(--bi-ink-mute);
}

/* --------------------------------------------------------------- graphs --- */
/* The Graphs tab: a field rail on the left, then a grid of up to four chart
   cards. The grid is keyed on the card count, so one CSS rule per count decides the layout and
   the cards only need a grid-area letter. Every level keeps min-height 0 so the charts, not the
   page, absorb the viewport. */
.bi-area .bi-graphs__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--bi-s3);
}

.bi-area .bi-graphs__fields {
    flex: 0 0 240px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
    transition: flex-basis var(--bi-fast) var(--bi-ease);
}

.bi-area .bi-graphs__fields--collapsed {
    flex-basis: 48px;
}

.bi-area .bi-fields {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.bi-area .bi-fields__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bi-s2) var(--bi-s2) var(--bi-s2) var(--bi-s3);
    border-bottom: 1px solid var(--bi-line-soft);
}

.bi-area .bi-fields--collapsed .bi-fields__head {
    justify-content: center;
    padding: var(--bi-s2) 0;
}

.bi-area .bi-fields__title {
    font-family: var(--bi-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
}

.bi-area .bi-fields__search {
    margin: var(--bi-s2) var(--bi-s2) 0;
    padding: var(--bi-s1) var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-sm);
    background: var(--bi-paper);
    font: inherit;
    font-size: 13px;
    color: var(--bi-ink);
}

.bi-area .bi-fields__groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--bi-s2);
}

.bi-area .bi-fields__group + .bi-fields__group {
    margin-top: var(--bi-s3);
}

.bi-area .bi-fields__group-title {
    margin: 0 0 var(--bi-s1) var(--bi-s1);
    font-family: var(--bi-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bi-ink-faint);
}

.bi-area .bi-fields__group .bi-chip--field + .bi-chip--field {
    margin-top: 2px;
}

.bi-area .bi-fields__menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--bi-s2) var(--bi-s2) 0;
    padding: var(--bi-s1);
    border: 1px solid var(--bi-accent-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-accent-soft);
}

.bi-area .bi-fields__menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bi-s2);
    padding: 0 var(--bi-s1);
    font-size: 12px;
    color: var(--bi-ink-soft);
}

.bi-area .bi-fields__menu-title b {
    color: var(--bi-ink);
}

.bi-area .bi-fields__menu-empty {
    padding: var(--bi-s1) var(--bi-s2);
    font-size: 12px;
    color: var(--bi-ink-mute);
}

.bi-area .bi-fields__menu-item {
    display: block;
    width: 100%;
    padding: var(--bi-s1) var(--bi-s2);
    border: 0;
    border-radius: var(--bi-r-sm);
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--bi-ink);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bi-area .bi-fields__menu-item:hover {
    background: var(--bi-paper);
}

/* Chips: a field in the panel (drag source), in a slot, or in the filter strip. */
.bi-area .bi-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s1);
    max-width: 100%;
    padding: 2px var(--bi-s2) 2px var(--bi-s1);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-pill);
    background: var(--bi-paper);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bi-ink);
}

.bi-area .bi-chip .rzi {
    font-size: 16px;
    color: var(--bi-ink-mute);
}

.bi-area .bi-chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bi-area .bi-chip--field {
    width: 100%;
    cursor: grab;
    user-select: none;
}

.bi-area .bi-chip--field:hover {
    border-color: var(--bi-accent-line);
    background: var(--bi-accent-soft);
}

.bi-area .bi-chip--field:active {
    cursor: grabbing;
}

.bi-area .bi-chip--active {
    border-color: var(--bi-accent);
    background: var(--bi-accent-soft);
}

.bi-area .bi-chip--filter {
    padding-right: var(--bi-s1);
    gap: var(--bi-s2);
}

.bi-area .bi-chip__remove {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--bi-ink-faint);
    cursor: pointer;
}

.bi-area .bi-chip__remove:hover {
    color: var(--bi-bad);
}

.bi-area .bi-chip__remove .rzi {
    font-size: 14px;
    color: inherit;
}

.bi-area .bi-chip__sep {
    color: var(--bi-ink-faint);
}

.bi-area .bi-chip__input {
    width: 140px;
    padding: 2px var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-sm);
    font: inherit;
    font-size: 13px;
}

/* Native selects keep the grouped chart-type picker and the tiny inline summary pickers light. */
.bi-area .bi-select {
    padding: 2px var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-sm);
    background: var(--bi-paper);
    font: inherit;
    font-size: 13px;
    color: var(--bi-ink);
    max-width: 180px;
}

.bi-area .bi-select--inline {
    padding: 0 var(--bi-s1);
    border-color: transparent;
    background: var(--bi-ground);
    font-size: 12px;
    color: var(--bi-ink-soft);
}

/* Drop slots. */
.bi-area .bi-slot {
    display: flex;
    align-items: center;
    gap: var(--bi-s2);
    min-height: 34px;
    padding: var(--bi-s1) var(--bi-s2);
    border: 1px dashed var(--bi-line-strong);
    border-radius: var(--bi-r-md);
    background: var(--bi-ground);
    transition: background var(--bi-fast) var(--bi-ease), border-color var(--bi-fast) var(--bi-ease);
}

.bi-area .bi-slot__label {
    flex: 0 0 auto;
    font-family: var(--bi-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
}

.bi-area .bi-slot__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bi-s1);
    min-width: 0;
    flex: 1 1 auto;
}

.bi-area .bi-slot__placeholder {
    font-size: 12px;
    color: var(--bi-ink-faint);
}

.bi-area .bi-slot--over {
    border-color: var(--bi-accent);
    background: var(--bi-accent-soft);
}

.bi-area .bi-slot--no {
    border-color: var(--bi-bad);
    background: var(--bi-bad-soft);
}

/* While a drag is in flight, slot children must not catch the pointer or dragleave fires on every
   child boundary and the highlight flickers. */
.bi-area .bi-dragging .bi-slot > * {
    pointer-events: none;
}

.bi-area .bi-graphs__main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bi-s2);
}

/* The filter strip above the tabs: one slot with the chips, the AND/OR toggles between them and the
   field picker at the end, then the row count and Clear. It applies to every tab, so it sits in
   the page body rather than in a tab. */
.bi-area--canvas .bi-view-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bi-area .bi-view-filters {
    display: flex;
    align-items: flex-start;
    gap: var(--bi-s2);
    flex: 0 0 auto;
    margin-bottom: var(--bi-s2);
}

.bi-area .bi-view-filters > .bi-slot {
    flex: 1 1 auto;
    min-width: 0;
}

.bi-area .bi-view-filters__side {
    display: flex;
    align-items: center;
    gap: var(--bi-s2);
    flex: 0 0 auto;
    min-height: 34px;
    white-space: nowrap;
}

.bi-area .bi-view-filters__add {
    border-style: dashed;
    border-color: var(--bi-line);
    color: var(--bi-ink-mute);
}

/* The conjunction between two filter chips. OR is louder because it starts a new group. */
.bi-area .bi-conj {
    padding: 1px var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-sm);
    background: var(--bi-paper);
    font-family: var(--bi-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--bi-ink-mute);
    cursor: pointer;
}

.bi-area .bi-conj:hover {
    border-color: var(--bi-accent-line);
    color: var(--bi-ink);
}

.bi-area .bi-conj--or {
    border-color: var(--bi-accent);
    background: var(--bi-accent-soft);
    color: var(--bi-accent);
}

/* The pivot's field bar: what is in Rows, Columns and Values right now, each with its grouping or
   summary picker. It mirrors the pivot; the pivot itself is where fields are moved. */
.bi-area .bi-view-fieldbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bi-s2) var(--bi-s4);
    flex: 0 0 auto;
    margin-bottom: var(--bi-s2);
    padding: var(--bi-s1) var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-ground);
}

.bi-area .bi-fieldbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bi-s1);
    min-height: 26px;
}

.bi-area .bi-fieldbar__label {
    font-family: var(--bi-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
    margin-right: var(--bi-s1);
}

.bi-area .bi-fieldbar__empty {
    font-size: 12px;
    color: var(--bi-ink-faint);
}

.bi-area .bi-graphs__grid {
    display: grid;
    gap: var(--bi-s2);
    flex: 1 1 auto;
    min-height: 0;
    grid-template-areas: "a";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

.bi-area .bi-graphs__grid--n2 {
    grid-template-areas: "a" "b";
    grid-template-rows: 1fr 1fr;
}

.bi-area .bi-graphs__grid--n3 {
    grid-template-areas: "a b" "c c";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

.bi-area .bi-graphs__grid--n4 {
    grid-template-areas: "a b" "c d";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

.bi-area .bi-graphs__grid > .bi-state {
    grid-area: a;
    align-self: center;
}

/* Chart cards. */
.bi-area .bi-chart-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
}

.bi-area .bi-chart-card--selected {
    border-color: var(--bi-accent-line);
    box-shadow: 0 0 0 1px var(--bi-accent-line);
}

.bi-area .bi-chart-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bi-s2);
    padding: var(--bi-s1) var(--bi-s2);
    border-bottom: 1px solid var(--bi-line-soft);
}

.bi-area .bi-chart-card__title {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s1);
    min-width: 0;
    max-width: 40%;
    padding: 2px var(--bi-s1);
    border: 0;
    border-radius: var(--bi-r-sm);
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--bi-ink);
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bi-area .bi-chart-card__title .rzi {
    font-size: 14px;
    color: var(--bi-ink-faint);
}

.bi-area .bi-chart-card__title:hover .rzi {
    color: var(--bi-accent);
}

.bi-area .bi-chart-card__title-input {
    min-width: 200px;
    padding: 2px var(--bi-s1);
    border: 1px solid var(--bi-accent-line);
    border-radius: var(--bi-r-sm);
    font: inherit;
    font-weight: 600;
    color: var(--bi-ink);
}

.bi-area .bi-chart-card__slots {
    display: flex;
    flex-direction: column;
    gap: var(--bi-s1);
    padding: var(--bi-s2);
    border-bottom: 1px solid var(--bi-line-soft);
    background: var(--bi-paper);
}

.bi-area .bi-chart-card__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bi-s1) var(--bi-s3);
    padding: var(--bi-s1) var(--bi-s2);
    font-size: 12px;
    color: var(--bi-warn);
    background: var(--bi-warn-soft);
}

.bi-area .bi-chart-card__note--bad {
    color: var(--bi-bad);
}

.bi-area .bi-chart-card__body {
    flex: 1 1 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    padding: var(--bi-s1);
}

.bi-area .bi-chart {
    flex: 1 1 auto;
    min-height: 0;
}

.bi-area .bi-chart-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--bi-s2);
    color: var(--bi-ink-mute);
}

.bi-area .bi-chart-empty .rzi {
    font-size: 2rem;
    color: var(--bi-ink-faint);
}

.bi-chart__tip {
    padding: var(--bi-s1) var(--bi-s2);
    font-size: 13px;
}

.bi-chart__tip-title {
    font-weight: 600;
}

@media (max-width: 900px) {
    .bi-area .bi-graphs__body {
        flex-direction: column;
    }

    .bi-area .bi-graphs__fields {
        flex: 0 0 auto;
        max-height: 40vh;
    }

    .bi-area .bi-graphs__fields--collapsed {
        flex-basis: auto;
    }

    .bi-area .bi-graphs__grid--n3,
    .bi-area .bi-graphs__grid--n4 {
        grid-template-areas: "a" "b" "c" "d";
        grid-template-rows: repeat(4, minmax(240px, 1fr));
        grid-template-columns: 1fr;
    }

    .bi-area .bi-graphs__grid--n3 {
        grid-template-areas: "a" "b" "c";
        grid-template-rows: repeat(3, minmax(240px, 1fr));
    }

    .bi-area .bi-graphs__main {
        overflow-y: auto;
    }
}

/* -------------------------------------------------------------- layouts --- */
/* The saved-layout picker in the viewer head. The trigger reads like a select; the menu is a
   popover anchored under it, closed by a transparent backdrop that covers the viewport. */
.bi-area .bi-actions__divider {
    width: 1px;
    height: 22px;
    margin: 0 var(--bi-s1);
    background: var(--bi-line);
}

.bi-area .bi-layout-picker {
    position: relative;
}

.bi-area .bi-layout-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--bi-s1);
    max-width: 280px;
    height: 30px;
    padding: 0 var(--bi-s2) 0 var(--bi-s2);
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
    color: var(--bi-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--bi-fast) var(--bi-ease), background var(--bi-fast) var(--bi-ease);
}

.bi-area .bi-layout-trigger:hover,
.bi-area .bi-layout-trigger--open {
    border-color: var(--bi-accent-line);
    background: var(--bi-accent-soft);
}

.bi-area .bi-layout-trigger .rzi {
    font-size: 18px;
    color: var(--bi-ink-mute);
}

.bi-area .bi-layout-trigger__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.bi-area .bi-layout-trigger__star .rzi {
    font-size: 16px;
    color: var(--bi-star);
}

.bi-area .bi-layout-trigger__caret .rzi {
    font-size: 20px;
}

.bi-area .bi-layout-trigger__dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bi-accent);
}

.bi-area .bi-layout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: transparent;
}

.bi-area .bi-layout-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--bi-s1) 0;
    border: 1px solid var(--bi-line);
    border-radius: var(--bi-r-md);
    background: var(--bi-paper);
    box-shadow: var(--bi-lift);
    outline: none;
}

.bi-area .bi-layout-menu__group {
    padding: var(--bi-s2) var(--bi-s3) var(--bi-s1);
    font-family: var(--bi-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bi-ink-mute);
}

.bi-area .bi-layout-menu__empty {
    padding: var(--bi-s1) var(--bi-s3) var(--bi-s2);
    font-size: 13px;
    color: var(--bi-ink-faint);
}

.bi-area .bi-layout-menu__row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 var(--bi-s1) 0 0;
}

.bi-area .bi-layout-menu__row:hover {
    background: var(--bi-sunk);
}

.bi-area .bi-layout-menu__row--current {
    background: var(--bi-accent-soft);
}

.bi-area .bi-layout-menu__row--current .bi-layout-menu__name {
    color: var(--bi-accent);
    font-weight: 600;
}

.bi-area .bi-layout-menu__pick {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--bi-s2);
    min-width: 0;
    padding: var(--bi-s2) var(--bi-s3);
    border: 0;
    background: transparent;
    color: var(--bi-ink);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.bi-area .bi-layout-menu__pick .rzi {
    font-size: 18px;
    color: var(--bi-ink-mute);
}

.bi-area .bi-layout-menu__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bi-area .bi-layout-menu__by {
    flex: none;
    font-size: 12px;
    color: var(--bi-ink-faint);
}

.bi-area .bi-layout-menu__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: var(--bi-s1);
    border: 0;
    border-radius: var(--bi-r-sm);
    background: transparent;
    color: var(--bi-ink-faint);
    cursor: pointer;
}

.bi-area .bi-layout-menu__icon .rzi {
    font-size: 18px;
}

.bi-area .bi-layout-menu__icon:hover {
    background: var(--bi-paper);
    color: var(--bi-ink);
}

.bi-area .bi-layout-menu__icon--on {
    color: var(--bi-star);
}

.bi-area .bi-view-banner__close {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bi-ink-mute);
    cursor: pointer;
}

.bi-area .bi-view-banner__close .rzi {
    font-size: 18px;
}

/* --------------------------------------------------------------- a11y ----- */
.bi-area :focus-visible {
    outline: 2px solid var(--bi-accent);
    outline-offset: 2px;
}

/* DevExpress draws its own focus affordances; hand its internals back to the browser default
   rather than stamping the BI ring on every toolbar item inside a canvas. */
.bi-canvas :focus-visible {
    outline: revert;
    outline-offset: revert;
}

.bi-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bi-area *,
    .bi-area *::before,
    .bi-area *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .bi-tile:hover {
        transform: none;
    }
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 640px) {
    .bi-area {
        padding: var(--bi-s5) var(--bi-s4) var(--bi-s6);
    }

    /* The stacked mobile layout has no fixed topbar offset to subtract, so canvas pages
       fall back to natural page scroll with a vh-sized canvas. */
    .bi-area--canvas {
        height: auto;
        overflow: visible;
    }

    .bi-area--canvas .bi-canvas {
        flex: none;
        height: 78vh;
    }

    .bi-title {
        font-size: 24px;
    }

    .bi-grid {
        grid-template-columns: 1fr;
    }

    .bi-strip__cell {
        border-right: 0;
        border-bottom: 1px solid var(--bi-line-soft);
    }

    .bi-strip__cell:last-child {
        border-bottom: 0;
    }
}