/* Lattice on top of Tabler: only what Tabler doesn't cover. */
h1:focus, h2:focus {
    outline: none;
}

.validation-message {
    color: var(--tblr-danger);
    font-size: .875em;
    margin-top: .25rem;
}

.blazor-error-boundary {
    padding: 1rem;
    color: var(--tblr-danger);
}

    .blazor-error-boundary::after {
        content: "This part of the page failed to load.";
    }

/* Numbers line up in tables and cards. */
.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chart-box {
    position: relative;
    height: 240px;
}

/* Fill markers: the tooltip ApexCharts shows over a point annotation. */
.apexcharts-annotation-tooltip {
    max-width: none;
}

.lattice-marker {
    cursor: pointer;
}

.lattice-marker-tip table td {
    padding: 0;
}

.chart-box.chart-box-donut {
    height: 220px;
}

@media (max-width: 575.98px) {
    .chart-box {
        height: 200px;
    }

    .page-body {
        margin-top: .75rem;
    }
}

/* Grid ladder: the current price sits between the sells and the buys. */
.ladder-price td {
    border-top: 2px solid var(--tblr-primary);
    border-bottom: 2px solid var(--tblr-primary);
    font-weight: 600;
}

.kill-zone {
    border-top: 1px dashed var(--tblr-danger);
    padding-top: 1rem;
}

/* Live bots: real money. Tabler's card-gradient in one blue, the same in light and dark themes: a soft wash from
   the top edge, quiet enough to live with all day. The LIVE mark itself stays red (a badge, or a ribbon where the
   card's corner is free). Pages of a live bot get the same wash on every card. */
:root {
    --lattice-live: oklch(55% 0.17 254);
}

/* A 1px blue line along the top edge (inset 0 1px), over the gradient. */
.card-gradient {
    --tblr-card-gradient: var(--lattice-live), var(--lattice-live);
    box-shadow: inset 0 1px 0 0 var(--lattice-live);
}

.live-page .card {
    --tblr-card-gradient-direction: 180deg;
    --tblr-card-gradient-opacity: 86%;
    --tblr-card-gradient: var(--lattice-live), var(--lattice-live);
    box-shadow: inset 0 1px 0 0 var(--lattice-live);
    background: radial-gradient(ellipse at center, var(--tblr-card-bg) 0%, color-mix(in oklab, var(--tblr-card-bg) 0%, transparent) 80%) border-box,
        linear-gradient(var(--tblr-card-gradient-direction), color-mix(in oklab, var(--tblr-card-bg) var(--tblr-card-gradient-opacity), transparent) 0%, var(--tblr-card-bg) 40%) border-box,
        linear-gradient(calc(270deg + var(--tblr-card-gradient-direction)), var(--tblr-card-gradient)) border-box;
}

.live-banner {
    border: 1px solid color-mix(in oklab, var(--lattice-live) 35%, transparent);
    border-left: 3px solid var(--lattice-live);
    background-color: color-mix(in oklab, var(--lattice-live) 7%, transparent);
    border-radius: var(--tblr-border-radius);
    padding: .5rem .75rem;
    font-size: .875rem;
}

.live-section-title {
    color: var(--lattice-live);
}

/* Overview: one section per mode, its title above its own totals. */
.mode-section + .mode-section {
    margin-top: 2rem;
}

.mode-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Coin logos (the dashboard's own copies, wwwroot/img/coins): round, never squeezed, on the text's line. */
.coin-icon {
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    object-fit: contain;
}

.coin-icon-letters {
    flex-shrink: 0;
    font-weight: 600;
    vertical-align: middle;
}

/* Total equity: a coin's donut colour beside it in the table, the same eight slots as lattice.js (light and
   dark steps); past the eighth, and "Other", gray. */
.series-swatch {
    display: inline-block;
    width: .75rem;
    height: .1875rem;
    border-radius: 2px;
    vertical-align: middle;
    background: #898781;
}

.series-swatch[data-slot="0"] { background: #2a78d6; }
.series-swatch[data-slot="1"] { background: #eb6834; }
.series-swatch[data-slot="2"] { background: #1baf7a; }
.series-swatch[data-slot="3"] { background: #eda100; }
.series-swatch[data-slot="4"] { background: #e87ba4; }
.series-swatch[data-slot="5"] { background: #008300; }
.series-swatch[data-slot="6"] { background: #6250d6; }
.series-swatch[data-slot="7"] { background: #e34948; }

[data-bs-theme="dark"] .series-swatch[data-slot="0"] { background: #3987e5; }
[data-bs-theme="dark"] .series-swatch[data-slot="1"] { background: #d95926; }
[data-bs-theme="dark"] .series-swatch[data-slot="2"] { background: #199e70; }
[data-bs-theme="dark"] .series-swatch[data-slot="3"] { background: #c98500; }
[data-bs-theme="dark"] .series-swatch[data-slot="4"] { background: #d55181; }
[data-bs-theme="dark"] .series-swatch[data-slot="6"] { background: #9085e9; }
[data-bs-theme="dark"] .series-swatch[data-slot="7"] { background: #e66767; }

/* Overview: the total equity card opens the equity page. */
a.card.text-reset:hover .subheader {
    color: var(--tblr-primary);
}

/* New bot: the pair dropdown, below the field and scrolling past a dozen pairs. */
.pair-picker {
    max-height: 22rem;
    overflow-y: auto;
    top: 100%;
    left: 0;
}