@import '_content/Linq2Dashboard.Blazor/Linq2Dashboard.Blazor.oq102zva5c.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
.site[b-x7gtxhyxfg] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header[b-x7gtxhyxfg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid var(--docs-border);
    background: var(--docs-surface);
}

.site-brand[b-x7gtxhyxfg] {
    font-weight: 700;
    font-size: 1.125rem;
    color: inherit;
    text-decoration: none;
}

.site-nav[b-x7gtxhyxfg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.site-nav[b-x7gtxhyxfg]  a {
    color: var(--docs-muted);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav[b-x7gtxhyxfg]  a:hover {
    color: var(--docs-text);
}

.site-nav[b-x7gtxhyxfg]  a.active {
    color: var(--docs-text);
    border-bottom-color: var(--docs-accent);
}

.site-main[b-x7gtxhyxfg] {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
}

.site-footer[b-x7gtxhyxfg] {
    padding: 1rem 2rem;
    border-top: 1px solid var(--docs-border);
    color: var(--docs-muted);
    font-size: 0.8125rem;
}

@media (max-width: 48rem) {
    .site-header[b-x7gtxhyxfg], .site-main[b-x7gtxhyxfg], .site-footer[b-x7gtxhyxfg] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.site-main-wide[b-x7gtxhyxfg] {
    max-width: none;
}
/* /Pages/Demo.razor.rz.scp.css */
.demo-toolbar[b-6ua3syo4k9] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1rem;
}

.demo-toolbar h1[b-6ua3syo4k9] {
    margin: 0;
}

.demo-rows[b-6ua3syo4k9] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--docs-muted);
}

.demo-rows select[b-6ua3syo4k9] {
    font: inherit;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--docs-border);
    border-radius: 0.25rem;
    background: var(--docs-surface);
    color: inherit;
}

.demo-timing[b-6ua3syo4k9],
.demo-building[b-6ua3syo4k9] {
    color: var(--docs-muted);
    font-size: 0.875rem;
}

.demo-layout[b-6ua3syo4k9] {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2rem;
    align-items: start;
}

.demo-facets[b-6ua3syo4k9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    scrollbar-width: thin;
}

.demo-main[b-6ua3syo4k9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.demo-main[b-6ua3syo4k9]  .demo-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.demo-json summary[b-6ua3syo4k9] {
    cursor: pointer;
    color: var(--docs-muted);
}

@media (max-width: 48rem) {
    .demo-layout[b-6ua3syo4k9] {
        grid-template-columns: 1fr;
    }

    .demo-facets[b-6ua3syo4k9] {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.demo-status[b-6ua3syo4k9] {
    display: flex;
    justify-content: flex-end;
}

.demo-note[b-6ua3syo4k9] {
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid var(--docs-accent);
    background: var(--docs-surface);
    color: var(--docs-muted);
    font-size: 0.875rem;
    max-width: 60rem;
}

/* Metric tiles: as many per row as fit, never narrower than 11rem, so two per row on a phone. Each tile is a DemoTile
   rendered through MetricTemplate, which renders no element of the library's, so the tile itself is drawn entirely
   by DemoTile.razor.css; the sizes below inherit into it. */
.demo-metrics[b-6ua3syo4k9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0.75rem;
    --demo-metric-pad-y: 0.875rem;
    --demo-metric-pad-x: 1rem;
    --demo-metric-icon-panel: 4.5rem;
    --demo-metric-icon-glyph: 2.25rem;
    --demo-metric-size: clamp(1.0625rem, 0.875rem + 0.5vw, 1.25rem);
}

@media (max-width: 48rem) {
    .demo-metrics[b-6ua3syo4k9] {
        gap: 0.5rem;
        --demo-metric-pad-y: 0.625rem;
        --demo-metric-pad-x: 0.75rem;
        --demo-metric-icon-panel: 3.5rem;
        --demo-metric-icon-glyph: 1.75rem;
    }
}

/* The page's own chart: one column per month, the total faint behind the filtered count, both scaled to the
   largest total so the shape holds. A 2px gap of surface separates the columns; text stays in the muted ink. */
.demo-chart[b-6ua3syo4k9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem 0.5rem;
    border: 1px solid var(--docs-border);
    border-radius: 0.5rem;
    background: var(--docs-surface);
}

.demo-chart-header[b-6ua3syo4k9] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
}

.demo-chart-title[b-6ua3syo4k9] {
    font-weight: 600;
}

.demo-chart-note[b-6ua3syo4k9] {
    color: var(--docs-muted);
}

.demo-chart-bars[b-6ua3syo4k9] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 5rem;
}

.demo-chart-bar[b-6ua3syo4k9] {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.demo-chart-bar:hover[b-6ua3syo4k9] {
    background: color-mix(in srgb, var(--docs-accent) 8%, transparent);
}

.demo-chart-total[b-6ua3syo4k9],
.demo-chart-filtered[b-6ua3syo4k9] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px 2px 0 0;
}

.demo-chart-total[b-6ua3syo4k9] {
    height: calc(var(--total) * 100%);
    background: rgba(0, 0, 0, 0.08);
}

.demo-chart-filtered[b-6ua3syo4k9] {
    height: calc(var(--filtered) * 100%);
    background: var(--docs-accent);
}

/* While a month is selected, the facet's own counts ignore that selection (concept §4.2), so every bar stays full;
   the selected month is marked by dimming the others, the way a selected value stands out in a facet. */
.demo-chart-has-selection .demo-chart-bar:not(.demo-chart-selected) .demo-chart-filtered[b-6ua3syo4k9] {
    opacity: 0.35;
}

.demo-chart-axis[b-6ua3syo4k9] {
    display: flex;
    gap: 2px;
    padding-top: 0.25rem;
    border-top: 1px solid var(--docs-border);
    font-size: 0.75rem;
    color: var(--docs-muted);
}

.demo-chart-axis span[b-6ua3syo4k9] {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .demo-chart-total[b-6ua3syo4k9] {
        background: rgba(255, 255, 255, 0.12);
    }
}

/* The demo uses the whole screen: results fill the viewport below the toolbar, metrics and chart. */
.demo-layout[b-6ua3syo4k9] {
    --l2d-results-height: max(20rem, calc(100vh - 34rem));
}
/* /Pages/Home.razor.rz.scp.css */
.lead[b-r2kaltc42b] {
    font-size: 1.125rem;
    max-width: 48rem;
}

.button[b-r2kaltc42b] {
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background: var(--docs-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.button.secondary[b-r2kaltc42b] {
    background: transparent;
    color: var(--docs-accent);
    border: 1px solid var(--docs-border);
}

.cards[b-r2kaltc42b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.card[b-r2kaltc42b] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--docs-border);
    border-radius: 0.5rem;
    background: var(--docs-surface);
}

.card h3[b-r2kaltc42b] {
    margin: 0 0 0.5rem;
}

.card p[b-r2kaltc42b] {
    margin: 0;
    color: var(--docs-muted);
}
/* /Shared/DemoTile.razor.rz.scp.css */
/* Sizes come from the demo page: the --demo-metric-* properties are set on the metrics grid and inherit here.
   The tile is a two-column grid: text left, framed by the padding; the icon panel the tile's full height on the
   right, flush with the edge. */
.demo-tile[b-kts99npl9t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    padding-left: var(--demo-metric-pad-x, 1rem);
    border: 1px solid var(--l2d-border, #d4d4d8);
    border-radius: var(--l2d-radius, 0.25rem);
    background: var(--docs-surface, #ffffff);
}

.demo-tile-text[b-kts99npl9t] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: var(--demo-metric-pad-y, 0.875rem) 0;
}

.demo-tile-title[b-kts99npl9t] {
    font-size: var(--l2d-small-size, 0.8125rem);
    color: var(--l2d-muted, #71717a);
}

.demo-tile-value[b-kts99npl9t] {
    font-size: var(--demo-metric-size, 1.375rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.demo-tile-empty[b-kts99npl9t] {
    color: var(--l2d-muted, #71717a);
}

.demo-tile-share[b-kts99npl9t] {
    font-size: var(--l2d-small-size, 0.8125rem);
    color: var(--l2d-muted, #71717a);
    font-variant-numeric: tabular-nums;
}

.demo-tile-icon[b-kts99npl9t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: var(--demo-metric-icon-panel, 4.5rem);
    color: var(--demo-tile-color, var(--l2d-accent, #2563eb));
    background: color-mix(in srgb, var(--demo-tile-color, var(--l2d-accent, #2563eb)) 14%, transparent);
}

.demo-tile-icon[b-kts99npl9t]  svg {
    width: var(--demo-metric-icon-glyph, 2.25rem);
    height: var(--demo-metric-icon-glyph, 2.25rem);
}

/* One hue per tile: the icon takes the colour, its panel a light tint of the same colour. */
.demo-tile[data-key="orders"][b-kts99npl9t] { --demo-tile-color: #2563eb; }
.demo-tile[data-key="revenue"][b-kts99npl9t] { --demo-tile-color: #16a34a; }
.demo-tile[data-key="average"][b-kts99npl9t] { --demo-tile-color: #d97706; }
.demo-tile[data-key="customers"][b-kts99npl9t] { --demo-tile-color: #7c3aed; }
.demo-tile[data-key="perCustomer"][b-kts99npl9t] { --demo-tile-color: #0d9488; }

@media (prefers-color-scheme: dark) {
    .demo-tile[data-key="orders"][b-kts99npl9t] { --demo-tile-color: #60a5fa; }
    .demo-tile[data-key="revenue"][b-kts99npl9t] { --demo-tile-color: #4ade80; }
    .demo-tile[data-key="average"][b-kts99npl9t] { --demo-tile-color: #fbbf24; }
    .demo-tile[data-key="customers"][b-kts99npl9t] { --demo-tile-color: #a78bfa; }
    .demo-tile[data-key="perCustomer"][b-kts99npl9t] { --demo-tile-color: #2dd4bf; }
}